/* ==========================================================================
   Product cards — shared by New arrivals (rail) and Best sellers (grid)
   ========================================================================== */

.u-head--row {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.products__all { flex: 0 0 auto; }

/* --- Grid ----------------------------------------------------------------- */

.products__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}

@media (min-width: 768px)  { .products__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .products__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --- Horizontal rail (New arrivals) --------------------------------------- */

.products--rail { overflow: hidden; }

.products__rail {
  display: flex;
  gap: clamp(1rem, 2vw, 1.5rem);
  /* Padding matches the wrapper gutter so the first card lines up with the
     heading above it, while the rail itself still bleeds to the edge. */
  padding-inline: var(--gutter);
  padding-block: 0.5rem 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}

.products__rail > .product-card {
  flex: 0 0 clamp(230px, 72vw, 290px);
  scroll-snap-align: start;
}

@media (min-width: 640px) {
  .products__rail > .product-card { flex-basis: 290px; }
}

/* --- Card ------------------------------------------------------------------
   Transform ownership, outermost first:
     .product-card        GSAP (scroll reveal)
     .product-card__inner CSS  (hover lift + resting tilt)
   Nothing else transforms, so the two never overwrite each other.          */

.product-card { height: 100%; }

.product-card__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--u-white);
}

/* --- Media ---------------------------------------------------------------- */

.product-card__media {
  position: relative;
  aspect-ratio: 1;
  background: var(--u-paper-2);
  overflow: hidden;
}

.product-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--t-slow) var(--ease-out), scale var(--t-slow) var(--ease-out);
}

.product-card__img--alt {
  opacity: 0;
  pointer-events: none;
}

@media (hover: hover) {
  /* Subtle zoom on hover */
  .product-card:hover .product-card__img {
    scale: 1.05;
  }

  /* ONLY fade out primary image if a secondary alt image actually exists */
  .product-card.has-hover-image:hover .product-card__img:not(.product-card__img--alt),
  .product-card:hover:has(.product-card__img--alt) .product-card__img:not(.product-card__img--alt) {
    opacity: 0;
  }

  /* Fade in secondary image */
  .product-card:hover .product-card__img--alt {
    opacity: 1;
  }
}

.product-card__badges {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  /* 3.5rem clears the wish button's own footprint (36px + offsets); the
     extra 0.5rem is breathing room so a full-width badge touches it rather
     than butting flush against it on the narrowest cards. */
  max-width: calc(100% - 4rem);
}

.product-card__wish {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 2px solid var(--u-ink);
  border-radius: 50%;
  background: var(--u-white);
  color: var(--u-ink);
  transition: background-color var(--t-fast), color var(--t-fast), scale var(--t-fast) var(--ease-back);
}
.product-card__wish svg { width: 18px; height: 18px; }
.product-card__wish:hover,
.product-card__wish.is-on { background: var(--u-primary); color: var(--u-white); scale: 1.1; }
.product-card__wish.is-on svg path { fill: currentColor; }

/* --- Body ----------------------------------------------------------------- */

.product-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
  padding: 1rem;
}

.product-card__brand {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--u-ink-soft);
}

.product-card__name {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
}

/* Stretch the link over the whole card so the entire tile is clickable,
   while the wishlist and add-to-cart buttons stay above it. */
.product-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.product-card__inner { position: relative; }

/* NOTE: .product-card__wish already has position:absolute above (it's
   pinned to the top-right corner). Adding position:relative here used to
   win the cascade and silently cancel that, dropping the button back into
   normal flow right next to the badges — the top-left pile-up bug. Only
   .product-card__add (which sits in-flow at the bottom) needs a position
   change to lift above the stretched link. */
.product-card__wish { z-index: 2; }
.product-card__add  { position: relative; z-index: 2; }

.product-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.5rem;
}

.product-card__now {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 400;
  /* NOT var(--accent): lime and sunflower fail contrast on white, and a
     price is the last place to trade legibility for colour. */
  color: var(--u-ink);
}

/* A discounted price earns the red; a regular one stays ink. */
.product-card:has(.product-card__was) .product-card__now { color: var(--u-danger); }

.product-card__was {
  font-size: var(--fs-small);
  color: var(--u-ink-soft);
}

.product-card__add {
  margin-top: 0.75rem;
  padding-block: 0.7rem;
  font-size: 0.875rem;
  width: 100%;
}