.homepage {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #000;
}

a { color: inherit; }

/* ===================== PAGE TRANSITION ===================== */

body {
  margin: 0;
  transition: opacity 200ms ease;
}

body.page-fade-out {
  opacity: 0;
}

/* ===================== BACK NAVIGATION ===================== */

/* Sits as its own full-width bar between the fixed header stack and the
   page's main content, so its spacing never depends on (or fights with)
   each page's own container padding. The inner max-width/padding matches
   .header-container so the button's left edge lines up with the nav logo
   above it — consistent across every page that uses it. */
.back-nav-bar {
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px 48px 28px;
  box-sizing: border-box;
}

@media (max-width: 1024px) {
  .back-nav-bar { padding: 20px 32px 28px; }
}

@media (max-width: 640px) {
  .back-nav-bar { padding: 16px 20px 24px; }
}

.back-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #000;
  border: none;
  border-radius: 999px;
  padding: 10px 18px 10px 14px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 250ms ease, transform 250ms ease;
}

.back-nav:hover {
  background: #f2f2f2;
  transform: translateX(-2px);
}

.back-nav:active {
  transform: translateX(-1px) scale(0.97);
}

@media (max-width: 640px) {
  .back-nav span { display: none; }
  .back-nav { padding: 10px; }
}

/* ===================== TOAST NOTIFICATIONS ===================== */

.gv-toast-stack {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}

.gv-toast {
  background: #000;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 220ms ease, transform 220ms ease;
  max-width: 90vw;
  text-align: center;
}

.gv-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===================== ANNOUNCEMENT BAR (always visible, never hides) ===================== */

.announce {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 110;
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
}

/* Non-hero pages have no hero image behind the always-visible announce bar
   or the sticky nav (which starts visible, not hidden, on page load), so
   page content needs clearance for the full fixed header stack:
   announce (40px) + nav (72px) = 112px. Without this the nav overlaps
   whatever renders first in the page — including the back button. */
body:not(.page-home) {
  padding-top: calc(112px + env(safe-area-inset-top, 0px));
}

.announce__track {
  display: inline-flex;
  width: max-content;
  animation: marquee 26s linear infinite;
}

.announce__item {
  padding: 0 32px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .announce__track { animation: none; }
}

/* ===================== NAVBAR (transparent, identical on every page) ===================== */

.header-container {
  box-sizing: border-box;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 0 48px;
}

@media (max-width: 1024px) {
  .header-container { padding: 0 32px; }
  .nav__menu { gap: 28px; }
}

@media (max-width: 640px) {
  .header-container { padding: 0 20px; }
}

.nav {
  position: fixed;
  top: 40px;
  left: 0;
  right: 0;
  z-index: 105;
  background: transparent;
  transform: translateY(0);
  transition: transform 300ms ease-in-out, background-color 300ms ease, box-shadow 300ms ease;
}

.nav.is-hidden {
  transform: translateY(-150%);
}

.nav.is-solid {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.nav__container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 72px;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  justify-self: start;
}

.nav__logo {
  width: 26px;
  height: auto;
}

.nav__logo path {
  fill: #ffffff;
}

.nav__word {
  color: #ffffff;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 0.04em;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: 44px;
  justify-self: center;
}

.nav__menu a {
  color: #ffffff;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  opacity: 0.88;
  transition: opacity 250ms ease;
}

.nav__menu a:hover,
.nav__menu a.is-current { opacity: 1; }

.nav__menu a.is-current {
  position: relative;
}

.nav__menu a.is-current::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 2px;
  background: #fff;
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-self: end;
}

.nav__search {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 250ms ease;
}

.nav__search:hover {
  background: rgba(255, 255, 255, 0.24);
}

/* ---------- cart ----------
   Same shape and weight as the search control beside it; the only thing
   that distinguishes it is the count, and that only appears when the
   cart actually has something in it. */

.nav__cart {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 250ms ease;
}

.nav__cart:hover {
  background: rgba(255, 255, 255, 0.24);
}

.nav__cart-count {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  border: 2px solid transparent;
  background: #fff;
  color: #000;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 14px;
  text-align: center;
  box-sizing: content-box;
}

.nav__cta {
  background: #fff;
  color: #000;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  padding: 11px 22px;
  border-radius: 999px;
  transition: transform 250ms ease, opacity 250ms ease;
  display: inline-block;
}

.nav__cta:hover {
  transform: translateY(-2px);
  opacity: 0.88;
}

/* ===================== MOBILE HAMBURGER + SLIDE-IN MENU ===================== */

.nav__hamburger {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 250ms ease;
}

.nav__hamburger:hover {
  background: rgba(255, 255, 255, 0.24);
}

.mobile-menu__backdrop {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease-in-out;
}

.mobile-menu__backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu {
  box-sizing: border-box;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  width: 78vw;
  max-width: 320px;
  background: #ffffff;
  transform: translateX(100%);
  transition: transform 300ms ease-in-out;
  display: flex;
  flex-direction: column;
  padding: 28px 28px 40px;
}

.mobile-menu.is-open {
  transform: translateX(0);
}

.mobile-menu__close {
  align-self: flex-end;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: none;
  background: #f2f2f2;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-bottom: 32px;
}

.mobile-menu__links {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mobile-menu__links a {
  color: #000;
  text-decoration: none;
  font-size: 18px;
  font-weight: 700;
}

.mobile-menu__links a.is-current {
  color: #000;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Solid state (shown once scrolled past the hero, or immediately on pages
   with no hero at all): swap the white-on-hero treatment for a dark variant. */
.nav.is-solid .nav__logo path {
  fill: #000000;
}

.nav.is-solid .nav__word,
.nav.is-solid .nav__menu a {
  color: #000000;
}

.nav.is-solid .nav__menu a.is-current::after {
  background: #000;
}

.nav.is-solid .nav__search {
  background: rgba(0, 0, 0, 0.08);
  color: #000;
}

.nav.is-solid .nav__search:hover {
  background: rgba(0, 0, 0, 0.14);
}

.nav.is-solid .nav__cta {
  background: #000;
  color: #fff;
}

/* The cart shares the search button's treatment in both nav states, so
   the two read as one pair of controls rather than two separate ideas. */
.nav.is-solid .nav__cart {
  background: rgba(0, 0, 0, 0.08);
  color: #000;
}

.nav.is-solid .nav__cart:hover {
  background: rgba(0, 0, 0, 0.14);
}

.nav.is-solid .nav__cart-count {
  background: #000;
  color: #fff;
  border-color: #fff;
}

.nav.is-solid .nav__hamburger {
  background: rgba(0, 0, 0, 0.08);
  color: #000;
}

.nav.is-solid .nav__hamburger:hover {
  background: rgba(0, 0, 0, 0.14);
}

/* ===================== HERO ===================== */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ---------- rotating product stage ---------- */

.hero__stage {
  position: absolute;
  inset: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur-slow, 620ms) var(--ease-soft, ease),
    visibility 0s linear var(--dur-slow, 620ms);
}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--dur-slow, 620ms) var(--ease-soft, ease),
    visibility 0s;
}

/* The image drifts fractionally the whole time it's on screen — a slow
   push-in that reads as depth rather than as an animation. */
.hero-slide__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.08);
  will-change: transform;
}

.hero-slide.is-active .hero-slide__media {
  transform: scale(1);
  transition: transform 7000ms linear;
}

/* Weighted to the bottom so the garment and its printed artwork stay clear
   through the middle of the frame, where the copy used to sit. */
.hero-slide__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.52) 0%,
      rgba(0,0,0,0.16) 22%,
      rgba(0,0,0,0.06) 45%,
      rgba(0,0,0,0.42) 72%,
      rgba(0,0,0,0.82) 100%);
}

/* ---------- slide copy ---------- */

/* Anchored to the lower band of the hero rather than centred, so nothing
   is laid over the artwork on the tee. */
.hero-slide {
  align-items: flex-end;
}

.hero-slide__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 760px;
  padding: 0 24px 108px;
  text-align: center;
}

/* Each element rises out of a slight blur, staggered, so the copy resolves
   rather than appearing. Held in the "out" state until the slide is
   active, so it never plays for an off-screen slide. */
/* Scoped inside .hero-slide so the persistent overlay below — which is not
   part of any one slide — is never held in this hidden state. */
.hero-slide .hero-slide__eyebrow,
.hero-slide .hero-slide__price,
.hero-slide .hero-slide__actions {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  filter: blur(6px);
}

.hero-slide.is-active .hero-slide__eyebrow,
.hero-slide.is-active .hero-slide__price,
.hero-slide.is-active .hero-slide__actions {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition:
    opacity var(--dur-slow, 620ms) var(--ease-out, ease),
    transform var(--dur-slow, 620ms) var(--ease-out, ease),
    filter var(--dur-slow, 620ms) var(--ease-out, ease);
}

.hero-slide.is-active .hero-slide__eyebrow { transition-delay: 140ms; }
.hero-slide.is-active .hero-slide__price   { transition-delay: 250ms; }
.hero-slide.is-active .hero-slide__actions { transition-delay: 350ms; }

.hero-slide__eyebrow {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.hero-slide__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 32px;
}

.hero-slide__price-now {
  color: #fff;
  font-size: 26px;
  font-weight: 800;
}

.hero-slide__price-was {
  color: rgba(255, 255, 255, 0.55);
  font-size: 15px;
  font-weight: 600;
  text-decoration: line-through;
}

.hero-slide__price-off {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 12px;
}

.hero-slide__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

/* ---------- group handover ----------
   New Arrivals -> Best Sellers gets a single wide sweep across the hero,
   distinguishing a change of chapter from an ordinary slide change. */

.hero__wipe {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(0, 0, 0, 0.55) 38%,
    rgba(0, 0, 0, 0.92) 50%,
    rgba(0, 0, 0, 0.55) 62%,
    transparent 100%);
  transform: translate3d(-120%, 0, 0);
}

.hero.is-switching .hero__wipe {
  animation: hero-wipe var(--dur-cinematic, 1100ms) var(--ease-in-out, ease) both;
}

@keyframes hero-wipe {
  0%   { opacity: 0; transform: translate3d(-120%, 0, 0); }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(120%, 0, 0); }
}

/* ---------- persistent overlay ----------
   The call to action belongs to the hero, not to any one image, so it sits
   above the stage and holds still while the artwork changes beneath it. */

.hero__overlay {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 24px 108px;
  pointer-events: none;                 /* the arrows sit either side of it */
  /* 'backwards', not 'both': once the entrance has played the element must
     fall back to the normal cascade, or the departure state below could
     never override the animation's final frame. */
  animation: page-enter var(--dur-slow, 620ms) var(--ease-out, ease) backwards;
  animation-delay: 220ms;
  visibility: visible;
  transition:
    opacity 420ms var(--ease-out, ease),
    transform 420ms var(--ease-out, ease),
    visibility 0s linear 0s;
}

.hero__overlay .hero-slide__actions {
  pointer-events: auto;
}

/* Auto-hide: fade and settle slightly — layout stays put so the hero
   never jumps when the CTA leaves or returns. */
.hero.is-cta-hidden .hero__overlay {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 420ms var(--ease-out, ease),
    transform 420ms var(--ease-out, ease),
    visibility 0s linear 420ms;
}

.hero.is-cta-hidden .hero__overlay .hero-slide__actions {
  pointer-events: none;
}

/* ---------- manual navigation ----------
   Deliberately quiet: a hairline circle that only firms up on hover, so
   the image stays the loudest thing in the frame. */

.hero__arrow {
  position: absolute;
  z-index: 5;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  opacity: 0.65;
  transition:
    opacity var(--dur-base, 320ms) var(--ease-soft, ease),
    background-color var(--dur-base, 320ms) var(--ease-soft, ease),
    border-color var(--dur-base, 320ms) var(--ease-soft, ease),
    color var(--dur-base, 320ms) var(--ease-soft, ease);
}

.hero__arrow--prev { left: 24px; }
.hero__arrow--next { right: 24px; }

.hero__arrow:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.34);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.hero__arrow:focus-visible {
  opacity: 1;
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 3px;
}

/* Scale the press, not the position — the arrow is already translated to
   sit on the vertical centre line. */
.hero__arrow:active {
  transform: translateY(-50%) scale(0.92);
}

/* ---------- progress ticks ---------- */

.hero__progress {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.hero__tick {
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.28);
  transition:
    background-color var(--dur-base, 320ms) var(--ease-soft, ease),
    width var(--dur-base, 320ms) var(--ease-out, ease);
}

.hero__tick.is-active {
  width: 44px;
  background: #fff;
}

/* ---------- departure ----------
   While the page scrolls away to a section, the hero recedes very slightly
   instead of just sliding off — the copy lifts out and the image settles
   back, so the eye is handed forward rather than dragged. */

.hero__stage,
.hero__progress {
  transition:
    opacity var(--dur-cinematic, 1100ms) var(--ease-in-out, ease),
    transform var(--dur-cinematic, 1100ms) var(--ease-in-out, ease);
}

.hero.is-departing .hero__stage {
  opacity: 0.55;
  transform: scale(1.04);
}

.hero.is-departing .hero__progress,
.hero.is-departing .hero__arrow {
  opacity: 0;
  pointer-events: none;
}

.hero.is-departing .hero__overlay,
.hero.is-departing .hero-slide__content {
  opacity: 0;
  transform: translate3d(0, -18px, 0);
  transition:
    opacity var(--dur-slow, 620ms) var(--ease-in-out, ease),
    transform var(--dur-slow, 620ms) var(--ease-in-out, ease);
}

/* ---------- section arrival ----------
   The destination section resolves as it comes into view, and its cards
   settle in sequence rather than all at once. */

.home-section {
  /* Clears the fixed nav when scrolled to. */
  scroll-margin-top: 88px;
}

/* Scoped to .js-reveal, which the script adds only once it has an observer
   ready to take them back out again. Without that class — no JS, no
   IntersectionObserver, reduced motion — the products are simply visible,
   so a failure here can never leave the section blank. */
.home-section.js-reveal .home-section__header,
.home-section.js-reveal .product-card {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
}

.home-section.is-revealed .home-section__header,
.home-section.is-revealed .product-card {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-slow, 620ms) var(--ease-out, ease),
    transform var(--dur-slow, 620ms) var(--ease-out, ease);
}

.home-section.is-revealed .home-section__header { transition-delay: 60ms; }

/* Stagger set per card by the observer, so it scales to any product count
   instead of being capped at a hand-written list of nth-child rules. */
.home-section.is-revealed .product-card {
  transition-delay: calc(160ms + var(--card-index, 0) * 90ms);
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  padding: 140px 24px 220px;
  text-align: center;
}

.hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 6px 18px 6px 6px;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
}

.hero__chip-pill {
  background: #fff;
  color: #000;
  font-weight: 700;
  font-size: 12px;
  padding: 3px 12px;
  border-radius: 999px;
}

.hero__title {
  color: #fff;
  font-weight: 800;
  font-size: clamp(38px, 6vw, 68px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 26px 0 22px;
}

.hero__subtitle {
  color: rgba(255, 255, 255, 0.78);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  max-width: 560px;
  margin: 0 auto;
}

/* Fallback headline, shown only when the admin has marked nothing as a New
   Arrival or Best Seller and the hero therefore has no products to rotate. */
.hero__intro {
  animation: page-enter var(--dur-slow, 620ms) var(--ease-out, ease) both;
}

.hero__buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 36px;
}

.btn {
  display: inline-block;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 700;
  padding: 15px 30px;
  border-radius: 999px;
  transition: transform 250ms ease, opacity 250ms ease, background 250ms ease;
}

.btn--light {
  background: #fff;
  color: #000;
}

.btn--dark {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.btn:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

/* ===================== CUSTOMER REVIEWS ===================== */

.reviews {
  background: #ffffff;
  color: #000000;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  padding: 72px 0 8px;
  /* .homepage is a column flex container, where min-width:auto resolves to
     this section's min-content — and the card track never wraps, so that
     would stretch the section to the width of every card laid end to end.
     Zeroing it lets the section take the page width and clip the track. */
  width: 100%;
  min-width: 0;
}

/* ---------- full-bleed on the homepage ----------
   product.css styles a block with this same .reviews class for the
   PRODUCT page, where it is deliberately capped at 1280px and centred.
   The homepage loads that stylesheet too, so those caps were landing
   here and leaving the white band floating in the page's black
   background with a wide margin either side.

   Everything below is scoped to .homepage: it out-specifies the product
   page's rules without editing them, so the product page's own review
   list — which shares .reviews and .review-card — is untouched. */

.homepage .reviews {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* The heading and the card track share one gutter, so the title stays
   aligned with the left edge of the first card at any width. */
.homepage .reviews__head,
.homepage .reviews__track {
  padding: 0 6vw;
}

.homepage .reviews__head {
  max-width: none;
}

/* Three across, sharing the full width evenly rather than sitting at a
   fixed 360px with the remainder left empty. The 40px subtracted is the
   two 20px gaps between the three cards. Height and every other card
   style are left exactly as they were. */
.homepage .review-card {
  flex: 0 0 calc((100% - 40px) / 3);
  width: auto;
  max-width: none;
  /* A flex item's min-width defaults to its min-content width, so a card
     with a long product name would refuse to shrink to its share and end
     up wider than the others. Zeroing it keeps all three identical. */
  min-width: 0;
}

.reviews__head {
  max-width: 1440px;
  margin: 0 auto 28px;
  padding: 0 48px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.reviews__title {
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0;
}

.reviews__nav {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.reviews__arrow {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 50%;
  background: #fff;
  color: #000;
  cursor: pointer;
  transition:
    background-color var(--dur-base, 320ms) var(--ease-soft, ease),
    border-color var(--dur-base, 320ms) var(--ease-soft, ease),
    transform var(--dur-base, 320ms) var(--ease-out, ease),
    opacity var(--dur-base, 320ms) var(--ease-soft, ease);
}

.reviews__arrow:hover {
  background: #f2f2f2;
  border-color: rgba(0, 0, 0, 0.3);
}

.reviews__arrow:active {
  transform: scale(0.92);
}

.reviews__arrow[disabled] {
  opacity: 0.3;
  cursor: default;
}

.reviews__viewport {
  overflow: hidden;
  padding: 4px 0 40px;
}

.reviews__track {
  display: flex;
  gap: 20px;
  padding: 0 48px;
  /* Position is driven by JS setting translate3d on this element. */
  transition: transform var(--dur-slow, 620ms) var(--ease-out, ease);
  will-change: transform;
}

.review-card {
  flex: 0 0 auto;
  width: 360px;
  max-width: 82vw;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition:
    transform var(--dur-slow, 620ms) var(--ease-out, ease),
    box-shadow var(--dur-slow, 620ms) var(--ease-out, ease);
}

.review-card:hover {
  transform: translate3d(0, -4px, 0);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.09);
}

.review-card__text {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.75);
  margin: 0;
  flex: 1;
  /* Keeps every card the same height however long the review runs. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.review-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.review-card__who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.review-card__name {
  font-size: 14px;
  font-weight: 700;
}

.review-card__verified {
  font-size: 11.5px;
  font-weight: 600;
  color: #1a9850;
}

.review-card__product {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: rgba(0, 0, 0, 0.55);
  font-size: 12px;
  font-weight: 600;
  max-width: 50%;
  flex-shrink: 0;
}

.review-card__product:hover {
  color: #000;
}

.review-card__product img {
  width: 34px;
  height: 44px;
  border-radius: 7px;
  object-fit: cover;
  background: #f2f2f2;
  flex-shrink: 0;
}

.review-card__product span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===================== HOMEPAGE CURATED SECTIONS ===================== */

/* Full-bleed light surface below the hero — the product-card component is
   designed against white, so the sections carry their own background
   rather than sitting on .homepage's black. */
.home-sections {
  background: #ffffff;
  color: #000000;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
}

.home-section {
  max-width: 1440px;
  margin: 0 auto;
  padding: 72px 48px 0;
}

.home-section:last-of-type {
  padding-bottom: 96px;
}

.home-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.home-section__title {
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0;
}

.home-section__link {
  font-size: 13.5px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.55);
  text-decoration: none;
  flex-shrink: 0;
  transition: color 200ms ease;
}

.home-section__link:hover {
  color: #000;
}

@media (max-width: 900px) {
  .nav__menu { display: none; }
  .nav__hamburger { display: flex; }
  .nav__container { grid-template-columns: 1fr auto; }
  .home-section { padding: 56px 24px 0; }
  .home-section:last-of-type { padding-bottom: 72px; }
}

@media (max-width: 900px) {
  .reviews { padding-top: 56px; }
  .reviews__head { padding: 0 24px; }
  .reviews__track { padding: 0 24px; }

  /* Tablet: two cards across, still edge to edge with a tighter gutter
     so neither card has to shrink to fit. */
  .homepage .reviews__head,
  .homepage .reviews__track { padding: 0 5vw; }

  .homepage .review-card { flex-basis: calc((100% - 20px) / 2); }
}

@media (max-width: 640px) {
  /* Phone: one card at a time, on a fixed gutter that matches the other
     homepage sections rather than a shrinking percentage. */
  .homepage .reviews__head,
  .homepage .reviews__track { padding: 0 22px; }

  .homepage .review-card { flex-basis: 100%; }
}

@media (max-width: 640px) {
  .hero__content { padding: 120px 20px 200px; }
  .hero__buttons { flex-direction: column; gap: 12px; }
  .btn { width: 100%; }
  .home-section__header { margin-bottom: 20px; }

  /* Stacked buttons make this block much taller, so the margins tighten to
     keep the whole thing in the lower third and off the artwork. */
  .hero-slide__content { padding: 0 20px 58px; }
  .hero-slide__eyebrow { margin-bottom: 10px; }
  .hero-slide__price { margin-bottom: 18px; gap: 8px; }
  .hero-slide__price-now { font-size: 22px; }
  .hero-slide__actions { flex-direction: column; gap: 10px; width: 100%; }
  .hero-slide__actions .btn { width: 100%; padding: 13px 24px; }
  .hero__overlay { padding: 0 20px 58px; }
  .hero__progress { bottom: 22px; }

  /* Pulled in and shrunk so the arrows clear the stacked buttons and stay
     off the edge of the frame on a narrow screen. */
  .hero__arrow { width: 38px; height: 38px; top: 42%; }
  .hero__arrow--prev { left: 12px; }
  .hero__arrow--next { right: 12px; }
  .review-card { width: 300px; padding: 20px; }
}

/* The hero's push-in and the wipe are decoration over a hero that already
   shows the product — with reduced motion the slides simply cut. */
@media (prefers-reduced-motion: reduce) {
  .hero-slide.is-active .hero-slide__media { transition: none; transform: scale(1); }
  .hero-slide__media { transform: scale(1); }
  .hero__wipe { display: none; }
  .hero-slide__eyebrow,
  .hero-slide__price,
  .hero-slide__actions { filter: none; transform: none; }

  /* Never leave content stranded invisible: the reveal and departure are
     decoration, so their resting state has to be the visible one. */
  .home-section.js-reveal .home-section__header,
  .home-section.js-reveal .product-card { opacity: 1; transform: none; }
  .hero.is-departing .hero__stage { opacity: 1; transform: none; }
  .hero.is-departing .hero-slide__content,
  .hero.is-departing .hero__overlay { opacity: 1; transform: none; }
  .hero__overlay { animation: none; }
  .hero.is-cta-hidden .hero__overlay { opacity: 1; transform: none; visibility: visible; }
}