/* =========================================================
   PRODUCT CARD — trang chủ (.dx-product)
   Đồng bộ chất lượng với card ở /shop (.products .product-small).
   ⚠️ Yêu cầu products.php đã trả về price_html gốc (không strip tags)
   — đã xác nhận qua view-source thật: giá sale hiện đúng <del>/<ins>,
   không còn vỡ chữ như trước.
   Signature: khi hover, một vệt sáng vàng "quét" dọc qua ảnh
   sản phẩm như tia laser đang khắc — gắn thẳng với chủ đề.
   ========================================================= */

.dx-product{
  height: 100%;                 /* để footer các card lệch mô tả vẫn thẳng hàng trong .dx-grid */
  display: flex;
  flex-direction: column;
  background: var(--dx-charcoal);
  border: 1px solid var(--dx-ink);
  border-radius: var(--dx-radius-md);
  overflow: hidden;
  box-shadow: 0 4px 20px -10px rgba(0,0,0,.6);
  transition: border-color .4s var(--dx-ease), box-shadow .4s var(--dx-ease);
}
.dx-product:hover{
  /* ĐÃ BỎ transform:translateY(-6px) — card tự nhô lên trong khi các ô
     lưới bên cạnh đứng yên gây cảm giác "giật" hàng khi rê chuột qua
     nhiều sản phẩm liên tiếp, đặc biệt rõ ở trang chủ vì có sản phẩm
     không có mô tả (card thấp) xen giữa sản phẩm có mô tả dài (card
     cao). Giữ viền sáng lên + đổ bóng sâu hơn để vẫn nổi bật khi hover,
     không còn dịch chuyển vị trí — êm hơn, không ảnh hưởng UX. */
  border-color: var(--dx-gold-dim);
  box-shadow: 0 16px 34px -14px rgba(0,0,0,.7), 0 0 0 1px rgba(201,162,74,.15);
}

.dx-product__media{
  position: relative;
  display: block !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden;
  background: var(--dx-charcoal-2);
}
.dx-product__media img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform .6s var(--dx-ease);
}
.dx-product:hover .dx-product__media img{ transform: scale(1.06); }

/* Vệt laser quét khi hover */
.dx-product__media::after{
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -10%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--dx-gold-light), transparent);
  box-shadow: 0 0 16px 2px rgba(231,205,134,.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.dx-product:hover .dx-product__media::after{
  opacity: 1;
  animation: dx-laser-sweep 1.1s var(--dx-ease);
}
@keyframes dx-laser-sweep{
  from{ top: -4%; }
  to{ top: 104%; }
}

/* Badge Sale — dạng pill có viền + shadow, đồng bộ với .dx-product__tag
   trong badge-container ở shop.css. Ở đây nằm trực tiếp trong
   .dx-product__media (đã position:relative), KHÔNG có badge-container
   bọc ngoài như bên shop — giữ position:absolute trực tiếp, không cần
   ép static (fix riêng cho case 2 lớp absolute lồng nhau bên shop,
   ở đây không xảy ra tình huống đó). */
.dx-product__tag{
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  display: inline-block;
  font-family: var(--dx-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dx-black);
  background: var(--dx-gold);
  border: 1px solid rgba(0,0,0,.15);
  box-shadow: 0 4px 12px -2px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08);
  border-radius: 999px;
  padding: 5px 13px;
  line-height: 1.6;
}

.dx-product__body{
  display: flex;
  flex-direction: column;
  flex: 1;                      /* cùng với .dx-product{flex-column} để đẩy footer xuống đáy card */
  padding: 18px 20px 20px;      /* ★ giảm nhẹ padding — card giờ có 4 cột nên hẹp hơn 5 cột cũ, padding to quá làm chữ càng có cảm giác chật/to */
}

.dx-product__code{
  font-family: var(--dx-font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--dx-muted-2);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.dx-product__name{
  margin: 0 0 8px;
}
.dx-product__name a{
  /* ★ ĐỒNG BỘ ĐÚNG với shop.css: 18px + line-height 1.4 + line-clamp 2
     dòng (trước đây để 19px và tuy đã có line-clamp nhưng vẫn to hơn
     shop 1px — không nhiều nhưng đủ để nhận ra khi đặt cạnh nhau).
     KHÔNG hạ thấp hơn 18px vì đây là size chuẩn đã dùng nhất quán ở
     mọi nơi hiển thị tên sản phẩm trên site (thẻ card sản phẩm nói
     chung), hạ thêm sẽ làm 2 nơi lệch tông ngược lại. */
  font-family: var(--dx-font-display);
  font-size: 18px;
  line-height: 1.4;
  color: var(--dx-ivory);
  transition: color .3s;
  /* Tên sản phẩm dài (VD "Custom Pet ID Tag Photo Engraved, Dog Cat
     Name Tag Personalized, Lost Pet Contact Tag Gift") sẽ đẩy card
     cao lên không đều giữa các cột nếu không giới hạn — ép 2 dòng,
     phần dư bị cắt kèm dấu "…" tự động do line-clamp. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dx-product:hover .dx-product__name a{ color: var(--dx-gold-light); }

.dx-product__desc{
  font-size: 13px;
  line-height: 1.6;
  color: var(--dx-muted);
  margin: 0 0 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Sản phẩm không có mô tả (short_description rỗng) vẫn render ra thẻ
   <p class="dx-product__desc"></p> — xác nhận đúng trong HTML thật
   (sản phẩm DX-068 render <p class="dx-product__desc"></p> trống).
   Thẻ rỗng vẫn ăn margin-bottom 14px vô nghĩa, tạo khoảng trắng thừa
   trước phần giá. Ẩn hẳn khi rỗng. */
.dx-product__desc:empty{
  display: none;
}

.dx-product__footer{
  margin-top: auto;             /* đẩy xuống đáy card nhờ flex ở .dx-product__body */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--dx-ink);
}

/* ---------- Giá — price_html gốc từ WooCommerce, xem ghi chú đầu file ---------- */
.dx-product__price{
  font-family: var(--dx-font-mono);
  font-size: 15px;              /* ★ giảm từ 16px xuống 15px cho vừa vặn hơn với card 4 cột */
  color: var(--dx-gold);
}
.dx-product__price .amount,
.dx-product__price .amount *{
  font-family: var(--dx-font-mono) !important;
  color: var(--dx-gold) !important;
}
.dx-product__price del,
.dx-product__price del *{
  color: var(--dx-muted-2) !important;
  font-size: 12px !important;
  opacity: 1 !important;
  margin-right: 6px;
}
.dx-product__price ins{
  text-decoration: none !important;
}

.dx-product__cart{
  flex: 0 0 auto;
  width: 36px; height: 36px;    /* ★ giảm nhẹ từ 38px cho cân với padding/font đã thu nhỏ */
  border: 1px solid var(--dx-ink);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--dx-ivory);
  transition: background .3s, border-color .3s, color .3s;
}
.dx-product__cart:hover{
  background: var(--dx-gold);
  border-color: var(--dx-gold);
  color: var(--dx-black);
}