/* === Product Items (shop/archive grid) ===
 * Mirrors the homepage feature products card style
 * (.cms-home-feature-products in pageHome.css).
 * Keep these two blocks visually identical.
 */

/* Equal-height product cards via flex */
.products > .col.product-small {
  margin: 0;
  display: flex;
}

.products > .col.product-small > .col-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  padding: 12px;
  background-color: var(--surface-card);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.products > .col.product-small > .col-inner:hover {
  border-color: var(--primary-blue);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Make the whole card behave as flex column */
.products > .col.product-small > .col-inner > .box {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.products > .col.product-small > .col-inner > .box > .box-text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* Hide category chip above title — match home (cleaner) */
.products > .col.product-small .title-wrapper > .category {
  display: none !important;
}

/* Sale badge */
.products > .col.product-small > .col-inner > .badge-container {
  left: 16px;
  top: 16px;
  margin: 0;
  z-index: 3;
}

.products > .col.product-small > .col-inner > .badge-container .badge-inner {
  display: inline-block;
  width: auto;
  height: auto;
  padding: 3px 9px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #fff;
  background-color: var(--accent-danger);
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 6px rgba(235, 0, 0, 0.18);
}

/* Image — portrait aspect-ratio for product feel */
.products > .col.product-small .box-image {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  height: auto;
  max-height: none;
  width: 100%;
  border-radius: var(--radius-sm);
  background-color: var(--surface-alt);
  position: relative;
  flex: 0 0 auto;
}

.products > .col.product-small .box-image > div,
.products > .col.product-small .box-image .image-zoom-fade {
  width: 100%;
  height: 100%;
}

.products > .col.product-small .box-image a {
  display: block;
  width: 100%;
  height: 100%;
}

.products > .col.product-small .box-image img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s ease;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

.products > .col.product-small > .col-inner:hover .box-image img {
  transform: scale(1.04);
}

.products
  > .col.product-small
  .box-image
  .image-tools.grid-tools.text-center.hide-for-small.bottom.hover-slide-in.show-on-hover {
  opacity: 0 !important;
  transform: none !important;
}

/* "Đã bán" badge — leave plugin's native styling intact */

/* Box text */
.products > .col.product-small .box-text {
  padding: 14px 0 0;
}

.products > .col.product-small .box-text .title-wrapper {
  margin-bottom: 8px;
  min-height: 0;
}

.products > .col.product-small .box-text .title-wrapper a {
  color: var(--primary-text);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  text-align: left;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  letter-spacing: -0.1px;
}

.products > .col.product-small .box-text .title-wrapper a:hover {
  color: var(--primary-blue);
}

/* Hide short description & custom divider — match home (cleaner cards) */
.products > .col.product-small .box-text .cms-short-description,
.products > .col.product-small .box-text .cms-product-divide,
.products > .col.product-small .cms-product-divide {
  display: none !important;
}

/* Price + cart row — push to bottom */
.products > .col.product-small .box-text .price-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  background-color: transparent;
  padding: 12px 0 0;
  margin-top: auto;
  border-top: 1px solid var(--border-default);
  border-radius: 0;
  position: relative;
}

.products > .col.product-small .box-text .price-wrapper::before {
  content: none;
}

.products > .col.product-small .box-text .price-wrapper span.price {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  display: block;
  padding-left: 0;
  text-align: left;
  color: var(--primary-blue);
  font-size: 17px;
  line-height: 22px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

/* "Từ" prefix in lighter weight + muted */
.products > .col.product-small .box-text .price-wrapper span.price .cms-price-prefix {
  display: inline-block;
  color: var(--muted-text);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  margin-right: 2px;
  vertical-align: baseline;
}

/* Price amount + dash inline (variable product without sale) */
.products > .col.product-small .box-text .price-wrapper span.price > .woocommerce-Price-amount,
.products > .col.product-small .box-text .price-wrapper span.price > span[aria-hidden="true"] {
  display: inline;
  color: var(--primary-blue);
  font-size: 17px;
  line-height: 22px;
  font-weight: 700;
}

.products > .col.product-small .box-text .price-wrapper span.price > .woocommerce-Price-amount bdi {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  line-height: inherit;
}

.products > .col.product-small .box-text .price-wrapper span.price .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Sale old/new stack (simple product on sale) */
.products > .col.product-small .box-text .price-wrapper span.price del {
  display: block;
  text-decoration: line-through;
  margin-bottom: 2px;
}

.products > .col.product-small .box-text .price-wrapper span.price ins {
  display: block;
  text-decoration: none;
  background: transparent;
}

.products > .col.product-small .box-text .price-wrapper span.price del bdi,
.products > .col.product-small .box-text .price-wrapper span.price del .woocommerce-Price-amount {
  color: var(--muted-text);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  text-decoration: line-through;
}

.products > .col.product-small .box-text .price-wrapper span.price ins bdi,
.products > .col.product-small .box-text .price-wrapper span.price ins .woocommerce-Price-amount {
  color: var(--primary-blue);
  font-size: 17px;
  line-height: 22px;
  font-weight: 700;
}

/* Cart icon button (custom add-to-cart) */
.products > .col.product-small .box-text .price-wrapper > a.custom-add-to-cart.added {
  display: block !important;
}

.products > .col.product-small .box-text .price-wrapper > a.added_to_cart {
  display: none !important;
}

.products
  > .col.product-small
  .box-text
  .price-wrapper
  > a.custom-add-to-cart
  > .material-symbols-outlined {
  color: var(--primary-blue);
  background-color: var(--primary-blue-soft);
  padding: 8px;
  border-radius: var(--radius-md);
  font-size: 20px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.products
  > .col.product-small
  .box-text
  .price-wrapper
  > a.custom-add-to-cart:hover
  > .material-symbols-outlined {
  background-color: var(--primary-blue);
  color: #fff;
}

/* Decorative horizontal divider (kept hidden by default; legacy class) */
.cms-product-divide {
  display: none;
}

/* Responsive — match home */
@media screen and (max-width: 549px) {
  .products > .col.product-small .box-image {
    aspect-ratio: 4 / 5;
  }
}

@media screen and (max-width: 468px) {
  .products > .col.product-small .box-text .title-wrapper a {
    font-size: 13px;
    line-height: 18px;
  }

  .products > .col.product-small .box-text .price-wrapper span.price > .woocommerce-Price-amount,
  .products > .col.product-small .box-text .price-wrapper span.price ins bdi {
    font-size: 15px;
    line-height: 20px;
  }
}

/* ============================================================
   PHARMACITY-INSPIRED PRODUCT CARD
   Light-blue image canvas, 2-line title, blue price, full-width
   outline "Chọn mua" button. Applies both to shop archives and
   to .col.product-small inside related products on single page.
   ============================================================ */

/* Image canvas — light blue like Pharmacity */
.products > .col.product-small .box-image,
.col.product-small .box-image {
  background-color: var(--primary-blue-gallery);
}
.products > .col.product-small .box-image img,
.col.product-small .box-image img {
  object-fit: contain;   /* product packshot, not cover */
  background: transparent;
  padding: 8px;
}

/* Inner card — softer radius, lighter border */
.products > .col.product-small > .col-inner,
.col.product-small > .col-inner {
  border-radius: var(--radius-md);
  border-color: var(--border-default);
}

/* Hover — gentle, no aggressive shadow (Pharmacity is flat) */
.products > .col.product-small > .col-inner:hover,
.col.product-small > .col-inner:hover {
  border-color: var(--primary-blue);
  box-shadow: var(--shadow-sm);
  transform: none;
}

/* Title — 2-line clamp, weight 600 */
.products > .col.product-small .box-text .title-wrapper a,
.col.product-small .box-text .title-wrapper a {
  color: var(--primary-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: calc(1.4em * 2);
}

/* Price — Pharmacity uses primary blue for active price */
.products > .col.product-small .box-text .price-wrapper span.price,
.col.product-small .box-text .price-wrapper span.price,
.products > .col.product-small .box-text .price-wrapper span.price ins bdi,
.col.product-small .box-text .price-wrapper span.price ins bdi,
.products > .col.product-small .box-text .price-wrapper span.price > .woocommerce-Price-amount,
.col.product-small .box-text .price-wrapper span.price > .woocommerce-Price-amount {
  color: var(--primary-blue);
  font-weight: 800;
}

/* Sale strike-through (old price) — light gray */
.products > .col.product-small .box-text .price-wrapper span.price del bdi,
.col.product-small .box-text .price-wrapper span.price del bdi {
  color: var(--light-text);
}

/* "Chọn mua" full-width outline button replacement.
   The existing markup wraps an <a class="custom-add-to-cart">
   with a material-symbols icon. We layer label text via ::after
   so we don't need to touch the PHP markup. */
.products > .col.product-small .box-text .price-wrapper > a.custom-add-to-cart,
.col.product-small .box-text .price-wrapper > a.custom-add-to-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  width: auto;
  min-width: 40px;
  height: 38px;
  padding: 0;
  border-radius: var(--radius-md);
  background: transparent;
  border: none;
  text-decoration: none !important;
}

/* Icon inside button — Pharmacity blue inverted on hover */
.products > .col.product-small .box-text .price-wrapper > a.custom-add-to-cart > .material-symbols-outlined,
.col.product-small .box-text .price-wrapper > a.custom-add-to-cart > .material-symbols-outlined {
  background-color: var(--primary-blue-soft);
  color: var(--primary-blue);
  border: 1px solid var(--primary-blue-border);
  padding: 7px;
  border-radius: var(--radius-md);
  font-size: 18px;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.products > .col.product-small .box-text .price-wrapper > a.custom-add-to-cart:hover > .material-symbols-outlined,
.col.product-small .box-text .price-wrapper > a.custom-add-to-cart:hover > .material-symbols-outlined {
  background-color: var(--primary-blue);
  color: #fff;
  border-color: var(--primary-blue);
}

/* Category chip (only used inside single-page related) — Pharmacity tint */
.product-footer .cms-single-product-related .title-wrapper > .category,
.col.product-small .title-wrapper > .category {
  background-color: var(--primary-blue-soft);
  color: var(--primary-blue);
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 11px;
  padding: 2px 10px;
}

/* Sale badge — Pharmacity style: orange-red pill */
.products > .col.product-small > .col-inner > .badge-container .badge-inner,
.col.product-small > .col-inner > .badge-container .badge-inner {
  background-color: var(--accent-danger);
  border-radius: var(--radius-sm);
  padding: 3px 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 6px rgba(229, 57, 53, 0.18);
}

/* Related-on-single grid: aim for 5 columns desktop (Pharmacity layout) */
@media (min-width: 1200px) {
  .product-footer .cms-single-product-related .row.large-columns-4 > .col.product-small,
  .product-footer .related-products-wrapper .row > .col.product-small {
    flex-basis: 20% !important;
    max-width: 20% !important;
    width: 20% !important;
  }
}

/* ============================================================
   MOBILE — Shopee-style DENSE compact product grid
   Tight gaps, minimal padding, edge-to-edge feel
   ============================================================ */
@media (max-width: 768px) {
  /* Grid container — minimal horizontal page padding */
  .products,
  .row.large-columns-4,
  .products.row,
  .related-products-wrapper .row {
    margin-left: -3px !important;
    margin-right: -3px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Force 2 columns on mobile */
  .products > .col.product-small,
  .col.product-small {
    flex-basis: 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
    margin-bottom: 6px !important;
  }

  /* Card — minimal padding, subtle border (or none) */
  .products > .col.product-small > .col-inner,
  .col.product-small > .col-inner {
    padding: 0 !important;
    border-radius: 6px !important;
    border: 1px solid #eef0f4 !important;
    overflow: hidden;
  }
  .products > .col.product-small > .col-inner:hover,
  .col.product-small > .col-inner:hover {
    border-color: #d1d9e6 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
    transform: none !important;
  }

  /* Image — fills card width, no padding around */
  .products > .col.product-small .box-image,
  .col.product-small .box-image {
    aspect-ratio: 1 / 1 !important;
    border-radius: 0 !important;
    background-color: #fff !important;
    margin: 0 !important;
  }
  .products > .col.product-small .box-image img,
  .col.product-small .box-image img {
    padding: 4px !important;
    object-fit: contain !important;
  }

  /* Text area — compact, no extra padding */
  .products > .col.product-small .box-text,
  .col.product-small .box-text {
    padding: 6px 8px 8px !important;
  }

  /* Title — 2 lines, slightly smaller */
  .products > .col.product-small .box-text .title-wrapper a,
  .col.product-small .box-text .title-wrapper a {
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
    min-height: calc(1.35em * 2) !important;
    margin-bottom: 4px !important;
  }

  /* Price — bigger, bolder (like Shopee orange-red but our brand blue) */
  .products > .col.product-small .box-text .price-wrapper,
  .col.product-small .box-text .price-wrapper {
    margin-top: 2px !important;
  }
  .products > .col.product-small .box-text .price-wrapper span.price > .woocommerce-Price-amount,
  .col.product-small .box-text .price-wrapper span.price > .woocommerce-Price-amount,
  .products > .col.product-small .box-text .price-wrapper span.price ins bdi,
  .col.product-small .box-text .price-wrapper span.price ins bdi {
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
  }

  /* "Từ" prefix smaller */
  .products > .col.product-small .box-text .price-wrapper span.price .cms-price-prefix,
  .col.product-small .box-text .price-wrapper span.price .cms-price-prefix {
    font-size: 10px !important;
  }

  /* Sold-count pill — compact but fits full text "🔥 X hôm nay · Đã bán X.Xk+" */
  .products .skill-set,
  .col.product-small .skill-set {
    margin: 4px 0 0 !important;
  }
  .products .skill-set__bar,
  .col.product-small .skill-set__bar {
    height: 20px !important;
    overflow: visible !important;
  }
  .products .skill-set_percentage,
  .col.product-small .skill-set_percentage {
    font-size: 10px !important;
    line-height: 20px !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }
  .products .skill-set_percentage .cs-today,
  .col.product-small .skill-set_percentage .cs-today {
    font-size: 10px !important;
  }
  .products .skill-set_fire,
  .col.product-small .skill-set_fire {
    width: 14px !important;
    height: 20px !important;
    top: -4px !important;
  }
  .products .skill-set_fire::before,
  .col.product-small .skill-set_fire::before {
    font-size: 12px !important;
  }

  /* Hide "Add to cart" button on mobile cards (Shopee doesn't have it) */
  .products > .col.product-small .add-to-cart-button,
  .products > .col.product-small .button.product_type_simple,
  .products > .col.product-small .button.product_type_variable,
  .products > .col.product-small .added_to_cart,
  .col.product-small .button.product_type_simple,
  .col.product-small .button.product_type_variable {
    display: none !important;
  }

  /* Reduce row gap between product rows */
  .row.large-columns-4 > .col.product-small,
  .products.row > .col.product-small {
    margin-bottom: 6px !important;
  }

  /* Page-level container padding — very minimal like Shopee */
  .shop-container,
  .products-wrapper,
  .related-products-wrapper {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}

/* Even tighter on small phones */
@media (max-width: 380px) {
  .products > .col.product-small > .col-inner,
  .col.product-small > .col-inner {
    border-radius: 4px !important;
  }
  .products > .col.product-small .box-image img,
  .col.product-small .box-image img {
    padding: 2px !important;
  }
  .products > .col.product-small .box-text,
  .col.product-small .box-text {
    padding: 5px 6px 6px !important;
  }
  .products > .col.product-small .box-text .title-wrapper a,
  .col.product-small .box-text .title-wrapper a {
    font-size: 12px !important;
  }
}

/* Keep Flatsome's sale badge pinned to the top of product thumbnails.
   Core Flatsome adds margin-top: 30px to .badge-container, which pushes
   the "Giảm %" pill down into the image on archive/home product cards. */
.products > .col.product-small > .col-inner > .badge-container,
.cms-home-feature-products > .col.product-small > .col-inner > .badge-container,
.col.product-small > .col-inner > .badge-container {
  top: 8px !important;
  left: 8px !important;
  margin: 0 !important;
  z-index: 5 !important;
}