/* ============================================================
   RENUCE — PRODUCT CARD (product-card.css)
   The core repeating unit of every product listing:
   homepage grids, category pages, search results, related items.

   Load order: AFTER reset.css, typography.css, components.css
   Depends on:  variables.css (all --space-*, --color-*, etc.)

   Sections:
     1.  Design Tokens (local overrides)
     2.  Card Shell
     3.  Media — Image Container
     4.  Image & Hover Swap
     5.  Product Badges
     6.  Overlay Actions (Wishlist + Quick View)
     7.  Add-to-Cart Slide-Up
     8.  Card Body
     9.  Category Label
    10.  Product Name
    11.  Rating
    12.  Price Block
    13.  Color Swatches
    14.  Sold-Out State
    15.  Featured Variant
    16.  List View Variant
    17.  Wishlist-Active & In-Cart States
    18.  Loading / Placeholder
    19.  Reduced Motion
    20.  Responsive Overrides
   ============================================================ */


/* =====================================================
   1. DESIGN TOKENS — LOCAL
   Centralised here so the card can be reskinned in
   one place without touching variables.css.
===================================================== */

.product-card {
  --card-radius:         var(--radius-card, 12px);
  --card-img-ratio:      3 / 4;          /* portrait — standard fashion card */
  --card-img-bg:         var(--color-bg-secondary, #F5F5F5);
  --card-border:         var(--color-border, #E5E5E5);
  --card-shadow-hover:   0 12px 40px rgba(0, 0, 0, 0.10);
  --card-action-size:    38px;
  --card-body-px:        var(--space-3, 0.75rem);
  --card-body-py:        var(--space-3, 0.75rem);
  --card-transition:     var(--duration-base, 200ms) var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
}


/* =====================================================
   2. CARD SHELL
===================================================== */

.product-card {
  position:        relative;
  display:         flex;
  flex-direction:  column;
  background:      var(--color-bg-primary, #fff);
  border-radius:   var(--card-radius);
  border:          1px solid var(--card-border);
  overflow:        hidden;
  text-decoration: none;
  color:           inherit;
  transition:      box-shadow  var(--card-transition),
                   transform   var(--duration-fast, 120ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
                   border-color var(--card-transition);
  cursor:          pointer;
  /* GPU hint — prevents jank when many cards animate */
  will-change:     transform, box-shadow;
}

.product-card:hover {
  box-shadow:   var(--card-shadow-hover);
  border-color: transparent;
  transform:    translateY(-3px);
}

.product-card:focus-visible {
  outline:        2px solid var(--focus-ring-color, var(--color-brand-gold));
  outline-offset: 2px;
}

/* Anchor reset when the whole card is a link */
a.product-card,
.product-card > a.product-card__media-link {
  text-decoration: none;
  color:           inherit;
}


/* =====================================================
   3. MEDIA — IMAGE CONTAINER
===================================================== */

.product-card__media {
  position:         relative;
  width:            100%;
  aspect-ratio:     var(--card-img-ratio);
  background-color: var(--card-img-bg);
  overflow:         hidden;
  border-radius:    var(--card-radius) var(--card-radius) 0 0;
  flex-shrink:      0;
}

/* Clicking the image area navigates to the product */
.product-card__media-link {
  display:         block;
  position:        absolute;
  inset:           0;
  z-index:         1;
  text-decoration: none;
}


/* =====================================================
   4. IMAGE & HOVER SWAP
   Two images stacked. Primary is always visible.
   Secondary fades / slides in on hover (JS adds class
   .has-hover-img to the card when a second image exists).
===================================================== */

.product-card__img,
.product-card__img--hover {
  position:        absolute;
  inset:           0;
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center top;   /* show garment top / model face first */
  display:         block;
  transition:      opacity    0.45s var(--ease-in-out),
                   transform  0.55s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

/* Primary image */
.product-card__img {
  opacity:   1;
  transform: scale(1);
  z-index:   1;
}

/* Hover image — hidden by default */
.product-card__img--hover {
  opacity:   0;
  transform: scale(1.04);
  z-index:   2;
}

/* Reveal hover image on card hover (only if it exists) */
.product-card.has-hover-img:hover .product-card__img {
  opacity:   0;
  transform: scale(0.97);
}

.product-card.has-hover-img:hover .product-card__img--hover {
  opacity:   1;
  transform: scale(1);
}

/* Subtle zoom on primary when no hover image */
.product-card:not(.has-hover-img):hover .product-card__img {
  transform: scale(1.05);
}

/* Broken image fallback */
.product-card__media--fallback {
  background: linear-gradient(135deg, #F0EDEA 0%, #E8E4DF 100%);
}

.product-card__media--fallback .product-card__img {
  opacity: 0;
}

.product-card__media--fallback::after {
  content:         '';
  position:        absolute;
  inset:           0;
  background:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='%23C9A96E' stroke-width='1' opacity='0.4'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E")
                   center center / 40px no-repeat;
  z-index:         3;
  pointer-events:  none;
}


/* =====================================================
   5. PRODUCT BADGES
   Stacked in the top-left corner of the media.
   Reuse .badge base from components.css.
===================================================== */

.product-card__badges {
  position:       absolute;
  top:            var(--space-3, 0.75rem);
  left:           var(--space-3, 0.75rem);
  z-index:        4;
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1-5, 0.375rem);
  pointer-events: none;
}

/* Override badge base for card context */
.product-card__badges .badge {
  font-size:     9px;
  padding:       0.25em 0.65em;
  border-radius: var(--radius-sm, 4px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight:   var(--weight-bold, 700);
  box-shadow:    0 2px 6px rgba(0, 0, 0, 0.12);
  line-height:   1.4;
}

.product-card__badges .badge--new {
  background: var(--color-brand-black, #0A0A0A);
  color:      var(--color-brand-white, #fff);
}

.product-card__badges .badge--sale {
  background: #DC2626;
  color:      #fff;
}

.product-card__badges .badge--featured {
  background: var(--color-brand-gold, #C9A96E);
  color:      var(--color-brand-black, #0A0A0A);
}

.product-card__badges .badge--sold {
  background: rgba(0, 0, 0, 0.55);
  color:      rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}


/* =====================================================
   6. OVERLAY ACTIONS — WISHLIST + QUICK VIEW
   Icon buttons appear on the right edge of the media
   on hover. They slide in from the right.
===================================================== */

.product-card__overlay-actions {
  position:       absolute;
  top:            var(--space-3, 0.75rem);
  right:          var(--space-3, 0.75rem);
  z-index:        5;
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2, 0.5rem);
  /* Hidden until hover */
  opacity:        0;
  transform:      translateX(8px);
  transition:     opacity    var(--card-transition),
                  transform  var(--card-transition);
  pointer-events: none;
}

.product-card:hover .product-card__overlay-actions {
  opacity:        1;
  transform:      translateX(0);
  pointer-events: auto;
}

/* Staggered reveal for each button */
.product-card:hover .product-card__overlay-actions .product-card__action-btn:nth-child(1) {
  transition-delay: 0ms;
}
.product-card:hover .product-card__overlay-actions .product-card__action-btn:nth-child(2) {
  transition-delay: 50ms;
}

/* ── Action Button ── */
.product-card__action-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           var(--card-action-size);
  height:          var(--card-action-size);
  background:      rgba(255, 255, 255, 0.92);
  border:          1px solid rgba(0, 0, 0, 0.06);
  border-radius:   var(--radius-full, 9999px);
  color:           var(--color-text-secondary, #525252);
  cursor:          pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:      0 2px 8px rgba(0, 0, 0, 0.10);
  transition:      background  var(--duration-fast, 120ms) var(--ease-in-out),
                   color       var(--duration-fast, 120ms) var(--ease-in-out),
                   transform   var(--duration-fast, 120ms) var(--ease-out),
                   box-shadow  var(--duration-fast, 120ms) var(--ease-in-out);
  flex-shrink:     0;
  padding:         0;
}

.product-card__action-btn svg {
  flex-shrink:  0;
  /* No translateX on icon-only buttons */
  transition:   transform var(--duration-fast, 120ms) var(--ease-out);
}

.product-card__action-btn:hover {
  background:  var(--color-brand-black, #0A0A0A);
  border-color: var(--color-brand-black, #0A0A0A);
  color:       var(--color-brand-white, #fff);
  transform:   scale(1.08);
  box-shadow:  0 4px 14px rgba(0, 0, 0, 0.18);
}

.product-card__action-btn:hover svg {
  transform: scale(1.10);
}

.product-card__action-btn:active {
  transform: scale(0.95);
}

.product-card__action-btn:focus-visible {
  outline:        2px solid var(--color-brand-gold, #C9A96E);
  outline-offset: 2px;
}

/* ── Wishlist active state ── */
.product-card__action-btn--wishlist.is-wishlisted {
  background:   #FEF2F2;
  border-color: #FECACA;
  color:        #DC2626;
}

.product-card__action-btn--wishlist.is-wishlisted svg {
  fill: #DC2626;
}

.product-card__action-btn--wishlist.is-wishlisted:hover {
  background:   #DC2626;
  border-color: #DC2626;
  color:        #fff;
}

.product-card__action-btn--wishlist.is-wishlisted:hover svg {
  fill: #fff;
}


/* =====================================================
   7. ADD-TO-CART SLIDE-UP
   Full-width bar that rises from the bottom of the
   media area on hover. Sits above the bottom vignette.
===================================================== */

.product-card__atc-bar {
  position:        absolute;
  bottom:          0;
  left:            0;
  right:           0;
  z-index:         5;
  padding:         var(--space-3, 0.75rem) var(--space-4, 1rem);
  background:      var(--color-brand-black, #0A0A0A);
  color:           var(--color-brand-white, #fff);
  font-family:     var(--font-sans);
  font-size:       var(--text-xs, 0.75rem);
  font-weight:     var(--weight-semibold, 600);
  letter-spacing:  0.10em;
  text-transform:  uppercase;
  text-align:      center;
  cursor:          pointer;
  border:          none;
  width:           100%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2, 0.5rem);
  /* Hidden below the media */
  transform:       translateY(100%);
  opacity:         0;
  transition:      transform  0.30s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
                   opacity    0.25s var(--ease-out),
                   background var(--duration-fast, 120ms) var(--ease-in-out);
  pointer-events:  none;
}

.product-card__atc-bar svg {
  flex-shrink: 0;
  /* Override global btn svg nudge */
  transition:  transform var(--duration-base, 200ms) var(--ease-out);
}

/* Reveal on card hover */
.product-card:hover .product-card__atc-bar {
  transform:      translateY(0);
  opacity:        1;
  pointer-events: auto;
}

.product-card__atc-bar:hover {
  background: var(--color-brand-gold, #C9A96E);
  color:      var(--color-brand-black, #0A0A0A);
}

.product-card__atc-bar:hover svg {
  transform: translateX(2px);
}

.product-card__atc-bar:active {
  background: #b8962f;
}

.product-card__atc-bar:focus-visible {
  outline:        2px solid var(--color-brand-gold, #C9A96E);
  outline-offset: -2px;
}

/* Loading state — spinner replaces text */
.product-card__atc-bar.is-loading {
  color:          transparent;
  pointer-events: none;
}

.product-card__atc-bar.is-loading::after {
  content:       '';
  position:      absolute;
  top:           50%;
  left:          50%;
  width:         16px;
  height:        16px;
  border:        2px solid rgba(255, 255, 255, 0.30);
  border-top-color: #fff;
  border-radius: var(--radius-full, 9999px);
  transform:     translate(-50%, -50%);
  animation:     atc-spin 0.65s linear infinite;
}

@keyframes atc-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Confirmation state */
.product-card__atc-bar.is-added {
  background:  #16A34A;
  color:       #fff;
  pointer-events: none;
}

/* Sold out — disable ATC entirely */
.product-card--sold-out .product-card__atc-bar {
  background:   rgba(0, 0, 0, 0.50);
  cursor:       not-allowed;
  pointer-events: none;
}


/* =====================================================
   8. CARD BODY
===================================================== */

.product-card__body {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1-5, 0.375rem);
  padding:        var(--card-body-py) var(--card-body-px);
  flex:           1;          /* pushes footer content down */
}


/* =====================================================
   9. CATEGORY LABEL
===================================================== */

.product-card__category {
  font-family:    var(--font-sans);
  font-size:      var(--text-xs, 0.75rem);
  font-weight:    var(--weight-medium, 500);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          var(--color-text-muted, #A3A3A3);
  line-height:    1;
}


/* =====================================================
   10. PRODUCT NAME
===================================================== */

.product-card__name {
  font-family:     var(--font-sans);
  font-size:       var(--text-base, 1rem);
  font-weight:     var(--weight-medium, 500);
  color:           var(--color-text-primary, #0A0A0A);
  line-height:     var(--leading-snug, 1.35);
  margin:          0;
  /* Clamp to 2 lines */
  display:         -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:        hidden;
  text-overflow:   ellipsis;
  transition:      color var(--duration-fast, 120ms) var(--ease-in-out);
}

.product-card:hover .product-card__name {
  color: var(--color-brand-gold, #C9A96E);
}


/* =====================================================
   11. RATING
===================================================== */

.product-card__rating {
  display:     flex;
  align-items: center;
  gap:         var(--space-1-5, 0.375rem);
}

.product-card__rating-stars {
  display: flex;
  gap:     1px;
}

.product-card__rating-stars svg {
  width:        12px;
  height:       12px;
  flex-shrink:  0;
  color:        var(--color-star, #F59E0B);
}

.product-card__rating-stars svg.empty {
  color: var(--color-star-empty, #E5E7EB);
}

.product-card__rating-score {
  font-size:   var(--text-xs, 0.75rem);
  font-weight: var(--weight-semibold, 600);
  color:       var(--color-text-secondary, #525252);
  line-height: 1;
}

.product-card__rating-count {
  font-size:  var(--text-xs, 0.75rem);
  color:      var(--color-text-muted, #A3A3A3);
  line-height: 1;
}


/* =====================================================
   12. PRICE BLOCK
===================================================== */

.product-card__price {
  display:     flex;
  align-items: baseline;
  gap:         var(--space-2, 0.5rem);
  flex-wrap:   wrap;
  margin-top:  var(--space-0-5, 0.125rem);
}

/* Current / sale price */
.product-card__price-current {
  font-family:  var(--font-sans);
  font-size:    var(--text-base, 1rem);
  font-weight:  var(--weight-semibold, 600);
  color:        var(--color-text-primary, #0A0A0A);
  line-height:  1.2;
  white-space:  nowrap;
}

/* On-sale: current price becomes red */
.product-card--on-sale .product-card__price-current {
  color: #DC2626;
}

/* Original (crossed-out) price */
.product-card__price-original {
  font-size:       var(--text-sm, 0.875rem);
  font-weight:     var(--weight-regular, 400);
  color:           var(--color-text-muted, #A3A3A3);
  text-decoration: line-through;
  text-decoration-color: rgba(163, 163, 163, 0.65);
  line-height:     1.2;
  white-space:     nowrap;
}

/* Discount percentage pill */
.product-card__price-discount {
  display:        inline-flex;
  align-items:    center;
  padding:        0.15em 0.5em;
  font-size:      var(--text-xs, 0.75rem);
  font-weight:    var(--weight-bold, 700);
  color:          #DC2626;
  background:     #FEF2F2;
  border-radius:  var(--radius-sm, 4px);
  line-height:    1.4;
  white-space:    nowrap;
}


/* =====================================================
   13. COLOR SWATCHES
   Small dot row below price — shows available colors.
===================================================== */

.product-card__colors {
  display:     flex;
  align-items: center;
  gap:         var(--space-1-5, 0.375rem);
  flex-wrap:   wrap;
  margin-top:  var(--space-1, 0.25rem);
}

.product-card__color-dot {
  width:         16px;
  height:        16px;
  border-radius: var(--radius-full, 9999px);
  border:        1.5px solid rgba(0, 0, 0, 0.10);
  cursor:        pointer;
  transition:    transform  var(--duration-fast, 120ms) var(--ease-out),
                 box-shadow var(--duration-fast, 120ms) var(--ease-in-out);
  flex-shrink:   0;
  position:      relative;
}

.product-card__color-dot:hover {
  transform:  scale(1.20);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(0, 0, 0, 0.30);
}

.product-card__color-dot.is-active {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--color-brand-black, #0A0A0A);
}

/* "+N more" overflow indicator */
.product-card__colors-more {
  font-size:   var(--text-xs, 0.75rem);
  color:       var(--color-text-muted, #A3A3A3);
  line-height: 1;
  white-space: nowrap;
  margin-left: var(--space-0-5, 0.125rem);
}


/* =====================================================
   14. SOLD-OUT STATE
===================================================== */

.product-card--sold-out .product-card__media {
  /* Slight desaturation on sold-out products */
  filter: grayscale(18%);
}

.product-card--sold-out .product-card__img {
  opacity: 0.85;
}

.product-card--sold-out .product-card__price-current {
  color: var(--color-text-muted, #A3A3A3);
}

.product-card--sold-out:hover {
  transform:   translateY(-1px);      /* reduced lift */
  box-shadow:  var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.06));
}

/* "Sold Out" label inside the media — drawn by JS */
.product-card__sold-overlay {
  position:        absolute;
  bottom:          var(--space-3, 0.75rem);
  left:            50%;
  transform:       translateX(-50%);
  z-index:         4;
  background:      rgba(255, 255, 255, 0.90);
  color:           var(--color-text-primary, #0A0A0A);
  font-size:       var(--text-xs, 0.75rem);
  font-weight:     var(--weight-semibold, 600);
  letter-spacing:  0.12em;
  text-transform:  uppercase;
  padding:         0.30em 0.80em;
  border-radius:   var(--radius-full, 9999px);
  backdrop-filter: blur(4px);
  white-space:     nowrap;
  pointer-events:  none;
  box-shadow:      0 2px 8px rgba(0, 0, 0, 0.10);
}


/* =====================================================
   15. FEATURED VARIANT
   Larger card — used for editor's picks or spotlights.
   JS adds .product-card--featured to designated cards.
===================================================== */

.product-card--featured {
  border-color: rgba(201, 169, 110, 0.30);
}

.product-card--featured::before {
  content:    '';
  position:   absolute;
  inset:      0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1.5px rgba(201, 169, 110, 0.25);
  pointer-events: none;
  z-index:    6;
}

.product-card--featured:hover {
  border-color: transparent;
  box-shadow:   0 16px 48px rgba(201, 169, 110, 0.15),
                0  8px 24px rgba(0, 0, 0, 0.10);
}

.product-card--featured .product-card__name {
  font-family:  var(--font-serif, 'Playfair Display', serif);
  font-size:    var(--text-lg, 1.125rem);
}


/* =====================================================
   16. LIST VIEW VARIANT
   The grid switches to .products-grid--list and each
   card gets .product-card--list (toggled by JS).
   Layout: [image 280px] [body 1fr] [actions auto]
   Already defined in layout.css grid-template-columns.
===================================================== */

.product-card--list {
  flex-direction: row;
  align-items:    stretch;
  border-radius:  var(--radius-lg, 10px);
}

.product-card--list .product-card__media {
  width:         200px;
  aspect-ratio:  unset;
  flex-shrink:   0;
  border-radius: var(--radius-lg, 10px) 0 0 var(--radius-lg, 10px);
}

.product-card--list .product-card__body {
  flex:          1;
  padding:       var(--space-5, 1.25rem);
  gap:           var(--space-2-5, 0.625rem);
  justify-content: center;
}

.product-card--list .product-card__name {
  -webkit-line-clamp: 3;
  font-size:          var(--text-lg, 1.125rem);
}

.product-card--list .product-card__atc-bar {
  position:   static;
  transform:  none;
  opacity:    1;
  width:      auto;
  border-radius: 0;
  pointer-events: auto;
  /* Now a normal flex child at the right side */
  align-self: stretch;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding:    var(--space-5) var(--space-3);
  min-width:  52px;
  justify-content: center;
  border-radius: 0 var(--radius-lg, 10px) var(--radius-lg, 10px) 0;
  font-size:  var(--text-xs, 0.75rem);
  letter-spacing: 0.14em;
}

.product-card--list .product-card__overlay-actions {
  /* Repositioned to body area on list view */
  position:  static;
  opacity:   1;
  transform: none;
  flex-direction: row;
  pointer-events: auto;
  margin-top: var(--space-3, 0.75rem);
}

/* On list hover, no image swap or atc-bar translate */
.product-card--list:hover .product-card__img {
  transform: scale(1.04);
  opacity:   1;
}

.product-card--list:hover .product-card__img--hover {
  opacity: 0;
}


/* =====================================================
   17. WISHLIST-ACTIVE & IN-CART STATES
===================================================== */

/* Wishlist button pulse on activation */
@keyframes wishlist-pop {
  0%   { transform: scale(1);    }
  40%  { transform: scale(1.30); }
  70%  { transform: scale(0.90); }
  100% { transform: scale(1);    }
}

.product-card__action-btn--wishlist.just-added svg {
  animation: wishlist-pop 0.35s var(--ease-out) forwards;
}

/* In-cart indicator: thin gold bottom border */
.product-card.is-in-cart {
  border-bottom: 2.5px solid var(--color-brand-gold, #C9A96E);
}

.product-card.is-in-cart .product-card__atc-bar {
  background:   #16A34A;
  transform:    translateY(0);
  opacity:      1;
  pointer-events: auto;
}


/* =====================================================
   18. LOADING / PLACEHOLDER
   .product-skeleton already defined in components.css.
   These rules extend it to match the card's exact shape.
===================================================== */

/* Match skeleton shape to card proportions */
.product-skeleton {
  border:        1px solid var(--color-border, #E5E5E5);
  border-radius: var(--card-radius, 12px);
}

.product-skeleton__img {
  aspect-ratio: 3 / 4;
  border-radius: var(--card-radius, 12px) var(--card-radius, 12px) 0 0;
}

.product-skeleton__body {
  padding: var(--space-3, 0.75rem);
  gap:     var(--space-2-5, 0.625rem);
}

.product-skeleton__line {
  height:        11px;
  border-radius: var(--radius-sm, 4px);
}

.product-skeleton__line--sm {
  width:  55%;
  height: 10px;
}


/* =====================================================
   19. REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

  .product-card {
    transition: box-shadow var(--duration-base), border-color var(--duration-base);
    will-change: auto;
  }

  .product-card:hover {
    transform: none;
  }

  .product-card__img,
  .product-card__img--hover {
    transition: opacity var(--duration-base);
  }

  .product-card.has-hover-img:hover .product-card__img {
    transform: none;
  }

  .product-card:not(.has-hover-img):hover .product-card__img {
    transform: none;
  }

  .product-card__atc-bar {
    transition: opacity var(--duration-base), background var(--duration-fast);
  }

  .product-card__overlay-actions {
    transition: opacity var(--duration-base);
  }

  .product-card__color-dot:hover {
    transform: none;
  }

  .product-card__action-btn:hover {
    transform: none;
  }

  .product-card__action-btn--wishlist.just-added svg {
    animation: none;
  }

}


/* =====================================================
   20. RESPONSIVE OVERRIDES
===================================================== */

/* ── LG: ≤ 1024px ── */
@media (max-width: 1024px) {

  .product-card {
    --card-action-size: 34px;
  }

  .product-card__name {
    font-size: var(--text-sm, 0.875rem);
  }

  .product-card__price-current {
    font-size: var(--text-sm, 0.875rem);
  }

}

/* ── MD: ≤ 768px ── */
@media (max-width: 768px) {

  .product-card {
    --card-body-px: var(--space-2-5, 0.625rem);
    --card-body-py: var(--space-2-5, 0.625rem);
  }

  /* Always show ATC bar on mobile (no hover state) */
  .product-card .product-card__atc-bar {
    transform:      translateY(0);
    opacity:        1;
    pointer-events: auto;
  }

  /* Always show overlay actions on mobile */
  .product-card .product-card__overlay-actions {
    opacity:        1;
    transform:      translateX(0);
    pointer-events: auto;
  }

  /* Tighten body gap */
  .product-card__body {
    gap: var(--space-1, 0.25rem);
  }

  /* Hide rating count on small screens */
  .product-card__rating-count {
    display: none;
  }

  /* List view: stack vertically on mobile */
  .product-card--list {
    flex-direction: column;
  }

  .product-card--list .product-card__media {
    width:        100%;
    aspect-ratio: var(--card-img-ratio);
    border-radius: var(--card-radius, 12px) var(--card-radius, 12px) 0 0;
  }

  .product-card--list .product-card__atc-bar {
    writing-mode:  horizontal-tb;
    padding:       var(--space-3) var(--space-4);
    min-width:     unset;
    border-radius: 0 0 var(--card-radius, 12px) var(--card-radius, 12px);
  }

  .product-card--list .product-card__overlay-actions {
    position:  absolute;
    top:       var(--space-3, 0.75rem);
    right:     var(--space-3, 0.75rem);
    flex-direction: column;
    margin-top: 0;
  }

}

/* ── SM: ≤ 640px ── */
@media (max-width: 640px) {

  .product-card {
    --card-radius: var(--radius-lg, 10px);
    --card-action-size: 32px;
  }

  /* Smaller ATC text on phones */
  .product-card__atc-bar {
    font-size:      9px;
    padding:        var(--space-2-5, 0.625rem) var(--space-3, 0.75rem);
    letter-spacing: 0.08em;
  }

  .product-card__name {
    font-size:          var(--text-sm, 0.875rem);
    -webkit-line-clamp: 2;
  }

  /* Hide color swatches on smallest screens to save space */
  .product-card__colors {
    display: none;
  }

  .product-card__badges .badge {
    font-size: 8px;
    padding:   0.20em 0.55em;
  }

}

/* ── XS: ≤ 480px ── */
@media (max-width: 480px) {

  .product-card {
    --card-body-px: var(--space-2, 0.5rem);
    --card-body-py: var(--space-2, 0.5rem);
  }

  /* Single action button on very small screens */
  .product-card__overlay-actions .product-card__action-btn:not(.product-card__action-btn--wishlist) {
    display: none;
  }

  /* Compact price */
  .product-card__price-discount {
    display: none;
  }

}