/* =========================================================
   Mobile refinements
   ---------------------------------------------------------
   Single source of truth for the phone layout of:
     1. the home "benefits" strip;
     2. every product card rendered by
        sections/components/product-card.php (home carousels,
        shop, category/taxonomy, related, favourites).

   This file is enqueued LAST (see inc/theme-assets.php), so it
   wins on cascade order. That is deliberate: it lets the rules
   below stay `!important`-free even though shop.css and
   single-product.css load after responsive.css.

   The blocks that previously lived in responsive.css for these
   two areas were removed when this file was introduced — do not
   reintroduce them there.
   ========================================================= */

/* =========================================================
   1. Benefits strip — 2 x 2 grid inside one rounded green card
   ---------------------------------------------------------
   Client feedback: the right-hand pair must start just after the
   centre divider instead of being centred inside its column,
   which read as an oversized inner padding.
   ========================================================= */
@media (max-width: 1024px) {
  .benefits-section {
    background: transparent;
    padding: 14px 0 20px;
  }

  .benefits-section > .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* `.benefits-section__inner` is also a `.swiper` root; the swiper
     stylesheet is enqueued after the theme styles, so these rules
     are scoped one level deeper to win on specificity. */
  .benefits-section .benefits-section__inner {
    display: block;
    gap: 0;
    padding: 12px 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, #4f8c08 0%, #7cbf12 60%, #93d500 100%);
    overflow: hidden;
  }

  .benefits-section .benefits-section__track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Equal rows keep the four quadrants on the same rhythm even if one
       caption wraps on a very narrow phone. */
    grid-auto-rows: 1fr;
    gap: 0;
    transform: none;
  }

  /* "+" divider: one vertical and one horizontal hairline crossing
     at the exact centre of the 2 x 2 grid. */
  .benefits-section .benefits-section__track::before {
    content: "";
    position: absolute;
    top: 6%;
    bottom: 6%;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.32);
    pointer-events: none;
  }

  .benefits-section .benefits-section__track::after {
    content: "";
    position: absolute;
    left: 2%;
    right: 2%;
    top: 50%;
    height: 1px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.32);
    pointer-events: none;
  }

  /* Specificity ties with `.benefits-section__inner:not(.is-slider)
     .benefit-item` in home.css and wins on load order, so the
     desktop `justify-content: center` is dropped here. */
  .benefits-section .benefits-section__inner .benefit-item {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: 0;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 4px;
    border: 0;
    background: transparent;
  }

  /* Left column hugs the card's inner edge, right column starts
     just past the divider — the red line in the client's mock-up. */
  .benefits-section .benefits-section__inner .benefit-item:nth-child(odd) {
    padding-left: 0;
    padding-right: 12px;
  }

  .benefits-section .benefits-section__inner .benefit-item:nth-child(even) {
    padding-left: 14px;
    padding-right: 0;
  }

  .benefits-section .benefit-item + .benefit-item::before {
    display: none;
  }

  .benefits-section .benefit-item__icon {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    color: #4f8c08;
  }

  .benefits-section .benefit-item__icon svg {
    width: 17px;
    height: 17px;
  }

  .benefits-section .benefit-item__content {
    flex: 0 1 auto;
    min-width: 0;
    text-align: left;
  }

  .benefits-section .benefit-item__title {
    margin: 0 0 2px;
    color: #ffffff;
    font-size: 12px;
    line-height: 1.25;
    letter-spacing: 0;
  }

  .benefits-section .benefit-item__text {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 10.5px;
    line-height: 1.3;
    letter-spacing: 0;
  }

  /* Every benefit is visible in the grid, so the swiper dots are noise. */
  .benefits-swiper__pagination {
    display: none;
  }
}

@media (max-width: 374px) {
  .benefits-section > .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .benefits-section .benefits-section__inner {
    padding: 10px 10px;
  }

  /* Roughly 98px of caption width per quadrant at 320px, so the sizes
     below are tuned to keep both label lines unwrapped. */
  .benefits-section .benefits-section__inner .benefit-item {
    gap: 6px;
    padding-top: 9px;
    padding-bottom: 9px;
  }

  .benefits-section .benefits-section__inner .benefit-item:nth-child(odd) {
    padding-right: 8px;
  }

  .benefits-section .benefits-section__inner .benefit-item:nth-child(even) {
    padding-left: 10px;
  }

  .benefits-section .benefit-item__icon {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
  }

  .benefits-section .benefit-item__icon svg {
    width: 14px;
    height: 14px;
  }

  .benefits-section .benefit-item__title {
    font-size: 10.5px;
    line-height: 1.22;
  }

  .benefits-section .benefit-item__text {
    font-size: 9.3px;
    line-height: 1.25;
  }
}

/* =========================================================
   2. Product cards — one layout for every listing
   ---------------------------------------------------------
   All cards come from sections/components/product-card.php, so the
   rules below are anchored on `.promo-product-card` itself. That
   keeps the home carousels, the shop grid, category archives, the
   related-products rail and the favourites page on the exact same
   vertical rhythm:

     media → title → spec pill → rating → price → old price / %
     → "Thêm Vào Giỏ" pinned to the bottom edge.

   Each of those bands reserves its height, so a product missing a
   spec, a rating or a sale price does not shift the price block or
   lift the button above its neighbours.
   ========================================================= */
@media (max-width: 768px) {
  /* ---------- Containers ---------- */

  /* Shop + category archives: two cards per row. */
  .shop-main ul.products,
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  .custom-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  /* Home carousels stay a horizontal rail (the flex/overflow mechanics
     live in responsive.css); two whole cards fit and the third peeks in
     to signal that the row scrolls. The card itself keeps the same
     internal layout as the shop grid. */
  .promo-products__grid > .promo-product-card,
  .promo-products__grid > .promo-product-card__item,
  .promo-products__grid > li.product {
    flex: 0 0 calc(50% - 22px);
    width: calc(50% - 22px);
    max-width: calc(50% - 22px);
    min-width: 0;
    margin: 0;
    scroll-snap-align: start;
  }

  .promo-products__grid > .promo-product-card__item > .promo-product-card {
    width: 100%;
  }

  .product-sp-related__grid > .promo-product-card,
  .product-sp-related__grid > .promo-product-card__item,
  .product-sp-related__grid > li.product {
    min-width: 0;
  }

  /* ---------- Card shell ---------- */
  .promo-product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    border-radius: 16px;
    border-color: #e8efdf;
    box-shadow: 0 5px 16px rgba(25, 39, 12, 0.08);
  }

  /* ---------- Media ---------- */
  .promo-product-card .promo-product__media {
    flex: 0 0 auto;
    height: 134px;
    min-height: 0;
    padding: 8px 8px 0;
    align-items: center;
    background: #ffffff;
    box-shadow: none;
    transform: none;
  }

  .promo-product-card .promo-product__image-link {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
    align-items: center;
    justify-content: center;
  }

  .promo-product-card .promo-product__media img.promo-product__image {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    object-fit: contain;
    transform: none;
  }

  .promo-product-card .promo-product__tag {
    left: 10px;
    top: 9px;
    gap: 3px;
    padding: 3px 8px;
    font-size: 10.5px;
    line-height: 1.25;
    white-space: nowrap;
  }

  .promo-product-card .promo-product__tag svg {
    width: 13px;
    height: 13px;
  }

  .promo-product-card .promo-product__wish {
    top: 9px;
    right: 9px;
    width: 28px;
    height: 28px;
    background: transparent;
    box-shadow: none;
  }

  .promo-product-card .promo-product__wish svg {
    width: 20px;
    height: 20px;
  }

  /* ---------- Body ---------- */
  .promo-product-card .promo-product__body {
    /* Reserved bands keep the vertical marks aligned between cards. */
    --promo-product-title-min-height: 36px;
    --promo-product-meta-min-height: 22px;
    --promo-product-subtitle-min-height: 0;
    --promo-product-sku-min-height: 0;
    --promo-product-unit-price-min-height: 0;
    flex: 1 1 auto;
    gap: 0;
    padding: 8px 9px 9px;
  }

  .promo-product-card .promo-product__summary {
    flex: 0 0 auto;
    gap: 5px;
  }

  .promo-product-card .promo-product__summary-top {
    gap: 0;
  }

  .promo-product-card .promo-product__title {
    margin: 0;
    min-height: var(--promo-product-title-min-height);
    font-size: 14.5px;
    line-height: 1.24;
    letter-spacing: 0;
  }

  .promo-product-card .promo-product__title a {
    color: #437127;
    -webkit-line-clamp: 2;
  }

  /* Client request: the marketing subtitle and the SKU are desktop-only. */
  .promo-product-card .promo-product__subtitle,
  .promo-product-card .promo-product__sku {
    display: none;
  }

  /* The spec/origin pill keeps its slot even when a product has no
     attributes, so the rating and price rows never jump. */
  .promo-product-card .promo-product__meta {
    min-height: var(--promo-product-meta-min-height);
    align-items: center;
    gap: 4px;
  }

  .promo-product-card .promo-product__meta-pill {
    max-width: 100%;
    gap: 6px;
    padding: 3px 8px;
    font-size: 11px;
    line-height: 1.25;
    overflow: hidden;
  }

  .promo-product-card .promo-product__meta-item-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .promo-product-card .promo-product__meta-divider {
    height: 14px;
  }

  /* ---------- Purchase block ---------- */
  .promo-product-card .promo-product__purchase {
    flex: 1 1 auto;
    gap: 6px;
    margin-top: 7px;
    padding-top: 0;
    border-top: 0;
  }

  .promo-product-card .promo-product__rating {
    min-height: 16px;
    align-items: center;
    gap: 3px;
    line-height: 1.2;
  }

  .promo-product-card .promo-product__rating-icon svg {
    width: 13px;
    height: 13px;
  }

  .promo-product-card .promo-product__rating-score,
  .promo-product-card .promo-product__rating-count {
    font-size: 11px;
    line-height: 1.2;
  }

  /* Price: current price on its own line, then the struck-through
     price and the discount badge underneath — the rhythm the client
     asked the "Sản Phẩm Ưu Đãi" rail to copy from the other rails.
     The reserved height keeps full-price and on-sale cards level. */
  .promo-product-card .promo-product__price-group {
    min-height: 38px;
    gap: 2px;
  }

  .promo-product-card .promo-product__price-row {
    align-items: center;
    flex-wrap: wrap;
    gap: 3px 6px;
  }

  .promo-product-card .promo-product__price-current {
    flex: 1 0 100%;
    font-size: 17px;
    line-height: 1.2;
    white-space: nowrap;
  }

  .promo-product-card .promo-product__price-regular {
    flex: 0 1 auto;
    min-width: 0;
    color: #9e9e9e;
    font-size: 11px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .promo-product-card .promo-product__discount {
    flex: 0 0 auto;
    padding: 2px 6px;
    font-size: 9.5px;
    line-height: 1.2;
  }

  /* Client request: drop the converted "…đ/1kg" line on phones.
     Desktop keeps it. */
  .promo-product-card .promo-product__unit-price {
    display: none;
  }

  /* ---------- Call to action ---------- */
  .promo-product-card .promo-product__cart {
    min-height: 36px;
    margin-top: auto;
    gap: 5px;
    padding: 8px;
    border-radius: 22px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
  }

  .promo-product-card .promo-product__cart svg {
    width: 19px;
    height: 19px;
  }
}

@media (max-width: 389px) {
  .promo-product-card .promo-product__media {
    height: 120px;
  }

  .promo-product-card .promo-product__body {
    --promo-product-title-min-height: 34px;
    padding: 8px 8px 9px;
  }

  .promo-product-card .promo-product__title {
    font-size: 13.5px;
  }

  .promo-product-card .promo-product__price-group {
    min-height: 36px;
  }

  .promo-product-card .promo-product__price-current {
    font-size: 16px;
  }

  .promo-product-card .promo-product__cart {
    font-size: 12px;
  }

  /* Sale badge on mobile cards */
  .promo-product-card img.promo-product__sale-badge {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 48px;
    min-height: 0;
    object-fit: contain;
    z-index: 3;
    pointer-events: none;
  }

  .promo-product__media:has(.promo-product__sale-badge) .promo-product__wish {
    top: 28px;
  }
}