/* =========================================================================
   BESTUFF — Core stylesheet
   -------------------------------------------------------------------------
   MOBILE FIRST. Base rules target a phone; `min-width` queries add back the
   space a larger screen affords.

   PALETTE — ivory, sand, champagne, gold, charcoal.
   Warm neutrals rather than stark white: every product photograph is a black
   bottle shot on white, and the wordmark is a black monogram, so both
   composite naturally on a warm light ground with `mix-blend-mode: multiply`
   and no masking hacks.

   LAYERING — read before adding any fixed element.
   Backgrounds sit at NEGATIVE z-index so page content needs no z-index and no
   wrapper needs `position: relative`. Giving `#header-root` or
   `#cart-drawer-root` a z-index makes it a stacking context and traps its
   fixed children beneath <main>. Anything covering the viewport MUST set
   `pointer-events: none` when it is not receiving input.
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap");

/* ============================== TOKENS ================================== */
:root {
  /* Paper — warm ivory, never pure white */
  --ivory: #fcfaf5;
  --ivory-2: #f6f1e6;
  --sand: #ece3d1;
  --sand-2: #ded2ba;
  --paper: #fffefb;

  /* Metal */
  --champagne: #e3d3b0;
  --gold: #b08d57;
  --gold-deep: #8d6e3d;
  --gold-light: #e0c790;
  --gold-grad: linear-gradient(105deg, #8d6e3d 0%, #e0c790 38%, #b08d57 62%, #f0e2c2 100%);

  /* Ink */
  --charcoal: #1e1c18;
  --charcoal-2: #45413a;
  --muted: #857f72;
  --faint: #a8a294;

  /* Lines */
  --line: #e4dccb;
  --line-2: #d2c7b0;
  --hair: rgba(30, 28, 24, 0.07);

  /* Status */
  --ok: #4a7a55;
  --warn: #a2732c;
  --danger: #a0453f;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --fast: 180ms;
  --med: 380ms;
  --slow: 700ms;

  /* Type */
  --display: "Cormorant Garamond", "Georgia", serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Metrics — phone values, scaled up in the breakpoints */
  --container: 1300px;
  --pad: 18px;
  --radius: 16px;
  --radius-sm: 10px;
  --header-h: 58px;
  --announce-h: 32px;
  --chrome-h: calc(var(--header-h) + var(--announce-h));
  /* The bottom tab bar is gone, but six other things were anchored to its
     height — the chat button, scroll-to-top, the sticky add-to-bag rail and the
     cart's total bar. Collapsing the variable retires all of them at once
     instead of hunting each `calc(var(--tabbar-h) + 14px)` down by hand.
     It resolves to the home-indicator inset rather than a flat 0, so those same
     floating controls still clear the gesture bar on an iPhone. */
  --tabbar-h: env(safe-area-inset-bottom, 0px);
  --tap: 44px;

  /* Layers */
  --z-bg: -1;
  --z-sticky: 700;
  --z-tabbar: 800;
  --z-nav: 900;
  --z-header: 1000;
  --z-spin: 1200;
  --z-cart-overlay: 1400;
  --z-cart: 1401;
  --z-toast: 1500;
  --z-burst: 1550;
  --z-cursor: 1600;
  --z-skip: 1900;

  /* Depth — soft, warm, never grey */
  --shadow-sm: 0 1px 2px rgba(60, 48, 28, 0.04), 0 4px 14px -6px rgba(60, 48, 28, 0.1);
  --shadow: 0 2px 8px rgba(60, 48, 28, 0.05), 0 20px 44px -22px rgba(60, 48, 28, 0.24);
  --shadow-lg: 0 4px 14px rgba(60, 48, 28, 0.06), 0 40px 80px -32px rgba(60, 48, 28, 0.32);
  --glow-gold: 0 0 0 1px rgba(176, 141, 87, 0.28), 0 18px 50px -20px rgba(176, 141, 87, 0.4);

  /* Frosted glass */
  --glass: rgba(255, 254, 251, 0.72);
  --glass-line: rgba(255, 255, 255, 0.6);
}

/* =============================== RESET ================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--chrome-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* Warm ivory gradient rather than flat white. */
  background:
    radial-gradient(1200px 800px at 80% -5%, rgba(227, 211, 176, 0.4), transparent 60%),
    radial-gradient(900px 700px at 0% 30%, rgba(236, 227, 209, 0.5), transparent 62%),
    linear-gradient(180deg, var(--ivory) 0%, var(--ivory-2) 55%, var(--ivory) 100%);
  background-attachment: fixed;
  color: var(--charcoal);
  font-family: var(--body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /**
   * Clears the two fixed bars, ONCE, for every page.
   *
   * This offset used to be repeated inside each page section — .hero, .pdp,
   * .checkout, .pay, .track, .quiz, .prose, .not-found — fourteen copies. The
   * Saved page was written as `<main class="shop">` rather than
   * `<main><section class="shop">`, so its selector never matched and the
   * heading sat behind the navbar.
   *
   * It lives on `body` rather than on `#main` deliberately: an ID selector
   * would out-specify every page's own `padding-top` and silently delete each
   * page's breathing room. On body it simply composes with them.
   */
  padding-top: var(--chrome-h);
  padding-bottom: var(--tabbar-h);
}
body.no-scroll { overflow: hidden; }

img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
input, textarea, select { font-family: inherit; font-size: 16px; } /* 16px stops iOS zoom-on-focus */
h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }

/* The `hidden` attribute must always win. Any component with an author
   `display` value would otherwise ignore it — that is how the cart drawer once
   showed "your bag is empty" over a bag with items in it. */
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--champagne); color: var(--charcoal); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.skip-link {
  position: fixed;
  top: -80px; left: 12px;
  z-index: var(--z-skip);
  padding: 12px 20px;
  background: var(--charcoal);
  color: var(--ivory);
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 8px;
  transition: top var(--fast) var(--ease);
}
.skip-link:focus { top: 12px; }

/* ============================ PAGE LOADING ============================== */
/* A brief veil so the first paint resolves rather than flashing in. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-skip);
  background: var(--ivory);
  opacity: 1;
  pointer-events: none;
  transition: opacity 700ms var(--ease);
}
body.is-loaded::after { opacity: 0; }

/* ============================= ATMOSPHERE =============================== */
.aurora { position: fixed; inset: 0; z-index: var(--z-bg); overflow: hidden; pointer-events: none; }

/* Ambient blurred lighting. */
.aurora span { position: absolute; border-radius: 50%; }
.aurora span:nth-child(1) {
  width: 110vw; height: 110vw;
  top: -50vw; right: -40vw;
  background: radial-gradient(circle, rgba(227, 211, 176, 0.55), transparent 66%);
}
.aurora span:nth-child(2) {
  width: 95vw; height: 95vw;
  top: 45vh; left: -45vw;
  background: radial-gradient(circle, rgba(176, 141, 87, 0.14), transparent 66%);
}
.aurora span:nth-child(3) {
  width: 70vw; height: 70vw;
  bottom: -20vw; right: 5vw;
  background: radial-gradient(circle, rgba(236, 227, 209, 0.6), transparent 68%);
}

/* Faint light rays for depth. Desktop only — a full-screen extra layer is not
   worth a phone's compositing budget. */
@media (min-width: 900px) {
  .aurora::before {
    content: "";
    position: absolute;
    inset: -20% -10%;
    background: repeating-linear-gradient(
      104deg,
      transparent 0 90px,
      rgba(255, 255, 255, 0.5) 90px 130px,
      transparent 130px 240px
    );
    opacity: 0.35;
    filter: blur(28px);
    pointer-events: none;
  }
  .aurora span { filter: blur(60px); }
}

/* Luxury grain at 2.5% — the texture that stops large flat fields looking
   digital. Desktop only; invisible on a 6-inch screen and not worth the layer. */
@media (min-width: 900px) {
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: var(--z-bg);
    pointer-events: none;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  }
}

/* =============================== LAYOUT ================================= */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }


/* =============================== TYPE =================================== */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 16px;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--gold-grad); flex-shrink: 0; }

.section-heading {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.2rem, 9vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
/* Champagne gradient on the emphasised word. */
.section-heading em, .gold-text {
  font-style: italic;
  font-weight: 400;
  background: var(--gold-grad);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gold-drift 8s linear infinite;
}
.gold-text { font-style: normal; }
@keyframes gold-drift { to { background-position: 200% center; } }
.reduced-motion .section-heading em, .reduced-motion .gold-text { animation: none; }
.section-heading--sm { font-size: clamp(1.6rem, 5.4vw, 2.6rem); }

.section-sub { font-size: 1rem; line-height: 1.85; color: var(--muted); max-width: 58ch; }
.hint { font-size: 0.9rem; line-height: 1.75; color: var(--muted); }

/* ============================== BUTTONS ================================= */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 15px 30px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: 100px;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  /* ONE transform declaration for the component. --mx/--my come from the
     magnetic effect, --lift from :hover. Two rules both writing `transform`
     is what made these judder under the cursor. */
  transform: translate3d(var(--mx, 0px), calc(var(--my, 0px) + var(--lift, 0px)), 0);
  transition: background-color var(--med) var(--ease), color var(--med) var(--ease),
              border-color var(--med) var(--ease), box-shadow var(--med) var(--ease),
              transform var(--fast) var(--ease);
}
.btn:active { --lift: 1px; }

/* Gold shimmer sweep. */
.btn::after {
  content: "";
  position: absolute;
  top: 0; left: -140%;
  width: 60%; height: 100%;
  z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transition: left var(--slow) var(--ease);
  pointer-events: none;
}
@media (hover: hover) { .btn:hover::after { left: 150%; } }

.btn--dark, .btn--gold { background: var(--charcoal); color: var(--ivory); box-shadow: var(--shadow-sm); }
.btn--light { background: var(--gold-grad); color: #241d10; box-shadow: 0 10px 30px -14px rgba(176, 141, 87, 0.85); }
.btn--outline, .btn--outline-light, .btn--outline-dark, .btn--ghost {
  border-color: var(--line-2);
  color: var(--charcoal);
  background: rgba(255, 254, 251, 0.5);
}

@media (hover: hover) {
  .btn--dark:hover, .btn--gold:hover {
    --lift: -3px;
    background: #2c2820;
    box-shadow: var(--shadow), var(--glow-gold);
  }
  .btn--light:hover { --lift: -3px; box-shadow: 0 16px 40px -14px rgba(176, 141, 87, 1); }
  .btn--outline:hover, .btn--ghost:hover, .btn--outline-light:hover, .btn--outline-dark:hover {
    --lift: -3px;
    border-color: var(--gold);
    color: var(--gold-deep);
    box-shadow: var(--glow-gold);
  }
}

.btn--block { width: 100%; }
.btn--grow { flex: 1; }
.btn--sm { min-height: 38px; padding: 10px 20px; font-size: 0.64rem; letter-spacing: 0.1em; }
.btn--lg { padding: 18px 36px; font-size: 0.78rem; }
.btn:disabled { opacity: 0.4; pointer-events: none; }

.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--ivory);
  animation: spin 700ms linear infinite;
}
.btn--outline.is-loading::before, .btn--ghost.is-loading::before { color: var(--gold); }
@keyframes spin { to { transform: rotate(360deg); } }

.btn__arrow {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--med) var(--ease);
}
@media (hover: hover) { .btn:hover .btn__arrow { transform: translateX(5px); } }

/* --------------------------------- Ripple -------------------------------- */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transform: scale(0);
  opacity: 0.8;
  pointer-events: none;
  animation: ripple 620ms var(--ease-out) forwards;
}
.btn--outline .ripple, .btn--ghost .ripple, .chip .ripple { background: rgba(176, 141, 87, 0.3); }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

.link-btn {
  padding: 4px 0;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--muted);
  border-bottom: 1px solid var(--line-2);
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.link-btn:hover { color: var(--gold-deep); border-color: var(--gold); }

/* ============================ SCROLL PROGRESS =========================== */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  height: 2px;
  background: var(--gold-grad);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

/* ============================ CUSTOM CURSOR ============================= */
.cursor-glow {
  position: fixed;
  top: 0; left: 0;
  z-index: var(--z-cursor);
  width: 320px; height: 320px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, rgba(224, 199, 144, 0.16), transparent 62%);
  transition: opacity 400ms ease, width 400ms var(--ease), height 400ms var(--ease);
  mix-blend-mode: multiply;
}
.cursor-glow.is-on { opacity: 1; }
.cursor-glow.is-active { width: 420px; height: 420px; }

/* ========================== ANNOUNCEMENT BAR ============================ */
.announce {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  height: var(--announce-h);
  display: flex;
  align-items: center;
  background: var(--charcoal);
  color: var(--champagne);
}
.announce__inner { display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; }
.announce__mark { color: var(--gold); }

/* =============================== HEADER ================================= */
/* Floating glassmorphism. NOTE: #header-root has no position or z-index —
   see the layering note at the top of this file. */
.site-header {
  position: fixed;
  top: var(--announce-h);
  left: 0; right: 0;
  z-index: var(--z-header);
  background: var(--glass);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: background-color var(--med) var(--ease), border-color var(--med) var(--ease),
              box-shadow var(--med) var(--ease), height var(--med) var(--ease);
}
.site-header.is-stuck {
  background: rgba(252, 250, 245, 0.9);
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}
/* Shrinks slightly once scrolled. */
.site-header.is-stuck .site-header__row { height: calc(var(--header-h) - 8px); }

.site-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  height: var(--header-h);
  transition: height var(--med) var(--ease);
}

.brand { display: flex; align-items: center; gap: 10px; }
.brand__mark { height: 26px; width: auto; transition: transform var(--med) var(--spring); }
@media (hover: hover) { .brand:hover .brand__mark { transform: rotate(-8deg) scale(1.08); } }
.brand__word {
  font-family: var(--display);
  font-size: 1.42rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--charcoal);
}

.header-actions { display: flex; align-items: center; gap: 2px; }

.icon-btn {
  position: relative;
  width: var(--tap); height: var(--tap);
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--charcoal-2);
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.icon-btn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; transition: transform var(--med) var(--spring); }
.icon-btn:hover, .icon-btn:focus-visible { color: var(--gold-deep); background: rgba(176, 141, 87, 0.1); }
@media (hover: hover) { .icon-btn:hover svg { transform: translateY(-2px) scale(1.08); } }

.count-badge {
  position: absolute;
  top: 4px; right: 3px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--gold-grad);
  color: #241d10;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  transform: scale(0);
  transition: transform var(--med) var(--spring);
}
.count-badge.is-visible { transform: scale(1); }

[data-cart-open].is-bumped { animation: bump 480ms var(--spring); }
@keyframes bump { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.26); } 70% { transform: scale(0.95); } }

/* Shown at EVERY width. It used to appear only from 900px up, because below
   that the bottom tab bar carried navigation. With the tab bar gone, hiding
   this on phones would leave the menu — Collection, Find Your Scent, Our Story,
   Track Order, Contact — with no way in on the devices most of the traffic
   uses. */
.hamburger { display: grid; place-items: center; width: var(--tap); height: var(--tap); }
.hamburger span, .hamburger span::before, .hamburger span::after {
  content: "";
  display: block;
  width: 20px; height: 1.6px;
  background: var(--charcoal);
  border-radius: 2px;
  transition: transform var(--med) var(--ease), opacity var(--fast) var(--ease);
}
.hamburger span { position: relative; }
.hamburger span::before { position: absolute; top: -6px; }
.hamburger span::after { position: absolute; top: 6px; }
.site-header.nav-open .hamburger span { background: transparent; }
.site-header.nav-open .hamburger span::before { transform: translateY(6px) rotate(45deg); }
.site-header.nav-open .hamburger span::after { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------- Search flyout ------------------------------ */
.search-flyout {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: rgba(252, 250, 245, 0.97);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  pointer-events: none;
  transition: clip-path var(--med) var(--ease), opacity var(--fast) var(--ease);
}
.search-flyout.is-open { clip-path: inset(0 0 0 0); opacity: 1; pointer-events: auto; }
.search-flyout .container { padding-block: 18px 22px; }
.search-flyout input {
  width: 100%;
  padding: 12px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-2);
  color: var(--charcoal);
  font-family: var(--display);
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  font-weight: 300;
}
.search-flyout input:focus { outline: none; border-bottom-color: var(--gold); }
.search-results { max-height: 52vh; overflow-y: auto; margin-top: 6px; }
.search-results a {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 11px 8px;
  border-bottom: 1px solid var(--hair);
  border-radius: 8px;
  transition: background var(--fast) var(--ease), padding-left var(--med) var(--ease);
}
.search-results a:hover { background: rgba(236, 227, 209, 0.5); padding-left: 16px; }
.search-results img { width: 46px; height: 46px; object-fit: contain; mix-blend-mode: multiply; }
.search-result__text { display: flex; flex-direction: column; min-width: 0; }
.search-result__name { font-family: var(--display); font-size: 1.1rem; }
.search-result__family { font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.search-result__price { font-family: var(--display); font-size: 1.1rem; color: var(--gold-deep); }
.search-empty { padding: 20px 8px; color: var(--muted); }

/* ---------------------------- Menu overlay ------------------------------ */
/* Sits BELOW the header on purpose: it used to be above, which covered the
   hamburger — the only control that closes it. */
.main-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-nav);
  display: grid;
  place-items: center;
  padding: calc(var(--chrome-h) + 20px) var(--pad) 40px;
  background: rgba(252, 250, 245, 0.97);
  backdrop-filter: blur(24px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--med) var(--ease), visibility var(--med);
}
.main-nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.main-nav__inner { width: 100%; max-width: 540px; text-align: center; }
.main-nav__links { display: flex; flex-direction: column; gap: 2px; }
.main-nav__links a {
  position: relative;
  display: inline-block;
  padding: 12px 0;
  font-family: var(--display);
  font-size: clamp(1.9rem, 8vw, 3.2rem);
  font-weight: 300;
  color: var(--charcoal-2);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--med) var(--ease), transform var(--med) var(--ease), color var(--fast) var(--ease);
}
.main-nav.is-open .main-nav__links a { opacity: 1; transform: none; }
.main-nav.is-open li:nth-child(1) a { transition-delay: 60ms; }
.main-nav.is-open li:nth-child(2) a { transition-delay: 110ms; }
.main-nav.is-open li:nth-child(3) a { transition-delay: 160ms; }
.main-nav.is-open li:nth-child(4) a { transition-delay: 210ms; }
.main-nav.is-open li:nth-child(5) a { transition-delay: 260ms; }
.main-nav.is-open li:nth-child(6) a { transition-delay: 310ms; }
/* Animated underline. */
.main-nav__links a::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 6px;
  width: 0; height: 1px;
  background: var(--gold-grad);
  transform: translateX(-50%);
  transition: width var(--med) var(--ease);
}
.main-nav__links a:hover::after, .main-nav__links a.is-active::after { width: 60%; }
.main-nav__links a:hover, .main-nav__links a.is-active { color: var(--gold-deep); font-style: italic; }
.main-nav__foot { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); }
.main-nav__foot a { font-size: 0.8rem; color: var(--muted); }
.main-nav__foot a:hover { color: var(--gold-deep); }

/* The mobile tab bar was removed. Its four destinations all survive: Shop and
   Saved are in the menu, Search and Bag are in the header, and the menu is now
   reachable at every width via the hamburger below. */

/* ------------------------- Chrome on small phones ------------------------ */

/* The announce bar is a FIXED 32px tall, and .site-header is positioned at
   top: var(--announce-h) to sit directly beneath it. So the bar's contents
   wrapping to a second line does not grow the bar — it overflows it and runs
   under the header. The free-delivery sentence is about 367px wide at the
   desktop size, which is wider than a 360px phone, so it wrapped on virtually
   every phone in use. One line, always, and an ellipsis if it truly cannot fit. */
@media (max-width: 560px) {
  .announce__inner { gap: 6px; font-size: 0.55rem; letter-spacing: 0.07em; }
  .announce__inner span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .announce__mark { flex: none; }
}

/* Brand plus FOUR 44px targets — search, saved, bag, menu — plus padding comes
   to about 352px, which leaves nothing between them on a 360px phone and
   overflows below that. Raised from 400px to 430px when the hamburger returned
   to mobile and made it four buttons instead of three. */
@media (max-width: 430px) {
  :root { --pad: 13px; }
  .site-header__row { gap: 8px; }
  .brand { gap: 7px; }
  .brand__mark { height: 22px; }
  .brand__word { font-size: 1.18rem; }
  .header-actions { gap: 0; }
  /* Still comfortably above the 44px minimum once the icon's own padding is
     counted — the tappable area is the button, and it stays finger-sized. */
  .icon-btn { width: 40px; height: 40px; }
  .icon-btn svg { width: 19px; height: 19px; }
  .count-badge { top: 2px; right: 1px; }
}

/* ================================ HERO ================================== */
.hero {
  position: relative;
  padding-top: 22px;
  padding-bottom: 34px;
}
.hero__mist, .hero__watermark, .hero__scroll { display: none; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44%;
  grid-template-areas: "copy stage" "rest rest";
  align-items: center;
  gap: 10px;
}
.hero__copy { grid-area: copy; }
.hero__stage { grid-area: stage; }
.hero__rest { grid-area: rest; }

/* ----------------------------- Bottle stage ------------------------------ */
/* Depth is built in layers: spotlight (background) → glow + rays (midground)
   → bottle (foreground) → particles (front). */
.hero__stage {
  position: relative;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  align-self: center;
  display: grid;
  place-items: center;
  perspective: 1200px;
}

/* Mouse-following spotlight. --sx/--sy are written by motion.js. */
.hero__spotlight {
  position: absolute;
  inset: -40%;
  border-radius: 50%;
  background: radial-gradient(
    circle at var(--sx, 50%) var(--sy, 45%),
    rgba(255, 252, 244, 0.95) 0%,
    rgba(227, 211, 176, 0.55) 26%,
    rgba(227, 211, 176, 0) 62%
  );
  pointer-events: none;
}

.hero__glow {
  position: absolute;
  top: 44%; left: 50%;
  width: 96%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 66%);
  pointer-events: none;
}

/* Ground shadow. */
.hero__plinth {
  position: absolute;
  bottom: 2%; left: 50%;
  width: 54%; height: 4%;
  transform: translateX(-50%) scaleX(0);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(60, 48, 28, 0.3), transparent 72%);
  filter: blur(6px);
  animation: plinth-in 700ms var(--ease) 800ms forwards;
  pointer-events: none;
}
@keyframes plinth-in { to { transform: translateX(-50%) scaleX(1); } }

/**
 * Sized by HEIGHT, with width following the photograph. `width: 100%` plus a
 * `max-height` letterboxes it — the box fills the column but the contained
 * image shrinks to the height cap, so the bottle renders far smaller than the
 * space it occupies.
 */
.hero__bottle {
  position: relative;
  z-index: 2;
  display: block;
  width: auto;
  height: 34vh;
  max-width: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  /* Landing, then a slow 7-second float. --rx/--ry come from the tilt. */
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  animation:
    bottle-land 1300ms var(--ease-out) both,
    bottle-float 7s ease-in-out 1400ms infinite;
}
@keyframes bottle-land {
  0% { opacity: 0; transform: translateY(-52px) scale(0.9); }
  60% { opacity: 1; }
  80% { transform: translateY(6px) scale(1.01); }
  100% { opacity: 1; transform: none; }
}
@keyframes bottle-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -14px; }
}
.reduced-motion .hero__bottle { animation: none; }

/* Reflection beneath the bottle — the same image, flipped and faded. */
.hero__reflection {
  position: absolute;
  bottom: -1%;
  left: 50%;
  z-index: 1;
  width: auto;
  height: 34vh;
  transform: translateX(-50%) scaleY(-1);
  object-fit: contain;
  opacity: 0.16;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 42%);
  mask-image: linear-gradient(to top, #000 0%, transparent 42%);
  pointer-events: none;
}

/* Fragrance motes. Plain composited spans with CSS keyframes — no per-frame
   JavaScript at all, unlike a canvas doing the same job. */
.hero__particles { position: absolute; inset: -8% -14%; z-index: 3; pointer-events: none; overflow: hidden; }
.hero__particles span {
  position: absolute;
  left: var(--x);
  bottom: -8%;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 199, 144, 0.95), rgba(224, 199, 144, 0));
  animation: mote var(--d) linear var(--delay) infinite;
}
@keyframes mote {
  0% { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
  12% { opacity: 0.9; }
  85% { opacity: 0.55; }
  100% { transform: translate3d(var(--drift), -130%, 0) scale(1.25); opacity: 0; }
}
.reduced-motion .hero__particles { display: none; }

.hero__badge {
  position: absolute;
  top: 0; right: -10px;
  z-index: 4;
  width: 54px;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  text-align: center;
  border-radius: 50%;
  background: var(--charcoal);
  color: var(--champagne);
  box-shadow: var(--shadow);
  animation: badge-in 700ms var(--spring) 1000ms both;
}
@keyframes badge-in { from { opacity: 0; transform: scale(0.6); } }
.hero__badge b { display: block; font-family: var(--display); font-size: 1.15rem; line-height: 1; }
.hero__badge span { display: block; margin-top: 1px; font-size: 0.36rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; line-height: 1.25; }

/* ------------------------------ Hero type -------------------------------- */
.hero__title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.1rem, 9.5vw, 3.4rem);
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
  overflow-wrap: break-word;
}
.hero__title em {
  font-style: italic;
  font-weight: 400;
  background: var(--gold-grad);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gold-drift 8s linear infinite;
}

.hero__rotator { font-family: var(--display); font-style: italic; font-size: 1.15rem; color: var(--muted); margin-bottom: 14px; min-height: 1.6em; }
.type-caret { display: inline-block; width: 2px; height: 1em; margin-left: 3px; background: var(--gold); vertical-align: -0.12em; animation: caret 1s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.reduced-motion .type-caret { display: none; }

.hero__tagline { font-size: 0.95rem; line-height: 1.85; color: var(--muted); margin-bottom: 20px; }

.hero__features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 22px;
  padding: 16px 0;
  border-block: 1px solid var(--line);
}
.hero__features li { text-align: center; }
.hero__features svg { width: 21px; height: 21px; margin: 0 auto 7px; fill: none; stroke: var(--gold); stroke-width: 1.1; stroke-linejoin: round; stroke-linecap: round; }
.hero__features b { display: block; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 2px; }
.hero__features span { font-size: 0.62rem; color: var(--faint); }

.hero__actions { display: flex; gap: 10px; }
.hero__actions .btn { flex: 1; }

/* ============================= TRUST BAR ================================ */
.trustbar { padding-block: 18px; }
.trustbar__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 18px;
  background: var(--glass);
  backdrop-filter: blur(14px);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.trustbar__list li { display: flex; align-items: center; gap: 10px; }
.trustbar__list svg { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: var(--gold); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.trustbar__list b { display: block; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.04em; }
.trustbar__list span { font-size: 0.66rem; color: var(--faint); }

/* ============================== MARQUEE ================================= */
.marquee { overflow: hidden; padding: 12px 0; border-block: 1px solid var(--line); background: rgba(236, 227, 209, 0.4); }
.marquee__track { display: flex; align-items: center; gap: 26px; width: max-content; white-space: nowrap; animation: marquee 46s linear infinite; }
.marquee__track span { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.marquee__track i { color: var(--gold); font-style: normal; }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }
.reduced-motion .marquee__track { animation: none; }

/* ================================ SHOP ================================== */
.shop { padding-block: 34px; }
.shop--tight { padding-block: 26px; }
.collection-panel { padding: 0; }

/* When a shop grid is the FIRST thing on a page (Saved) it has to clear the
   fixed header itself; on the homepage the hero provides that offset. */

/**
 * A section header: a text block on the left, optional controls on the right.
 *
 * The text MUST be wrapped in its own element. Left as bare children, the
 * eyebrow, heading and description each become flex items and lay out in a
 * ROW — which is why "Saved for later." sat beside its description instead of
 * above it. The `> p { flex-basis: 100% }` below is a safety net so a stray
 * paragraph still wraps to its own line if that wrapper is ever forgotten.
 */
.shop__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.shop__head > div { flex: 1 1 320px; min-width: 0; }
.shop__head > p { flex-basis: 100%; }
.shop__head .section-heading { margin-bottom: 0; }
.shop__head .section-sub { margin-top: 10px; }

.rail-nav { display: none; gap: 8px; flex-shrink: 0; }
.rail-btn {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--charcoal-2);
  background: var(--paper);
  position: relative;
  overflow: hidden;
  transition: all var(--med) var(--ease);
}
.rail-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rail-btn:hover { background: var(--charcoal); color: var(--ivory); border-color: var(--charcoal); }
.rail-btn:disabled { opacity: 0.3; pointer-events: none; }

.toolbar { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.toolbar__filters {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline: calc(var(--pad) * -1);
  padding-inline: var(--pad);
}
.toolbar__filters::-webkit-scrollbar { display: none; }
.chip {
  position: relative;
  flex-shrink: 0;
  padding: 9px 17px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
  overflow: hidden;
  transition: all var(--med) var(--ease);
}
.chip.is-active { background: var(--charcoal); color: var(--ivory); border-color: var(--charcoal); }

.toolbar__sort { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.toolbar__count { font-size: 0.72rem; color: var(--faint); }
.toolbar__sort label { display: none; }
.toolbar__sort select {
  padding: 9px 32px 9px 14px;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23b08d57' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 13px center;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--charcoal);
  font-size: 0.78rem;
  appearance: none;
}

/* ---------------------------- Product cards ------------------------------ */
.product-rail, .product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--glass);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  /**
   * A deliberately shallow tilt (max 5°), and NO `transform-style:
   * preserve-3d`.
   *
   * Both matter for hit-testing: a steep tilt moves the add button measurably
   * between press and release, and `preserve-3d` on a container with
   * interactive children causes pointer-target quirks in some browsers. A
   * single `perspective()` function gives the same look without either risk.
   */
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--card-lift, 0px));
  transition: box-shadow var(--med) var(--ease), border-color var(--med) var(--ease), transform 140ms linear;
}
@media (hover: hover) {
  .pcard:hover { --card-lift: -6px; box-shadow: var(--shadow-lg), var(--glow-gold); border-color: rgba(176, 141, 87, 0.3); }
}
.pcard:active { --card-lift: 0px; }

/* Specular sheen following the pointer. */
.pcard__media { position: relative; display: block; aspect-ratio: 1; padding: 12px; }
.pcard__media::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(340px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.75), transparent 62%);
  transition: opacity var(--med) var(--ease);
}
@media (hover: hover) { .pcard:hover .pcard__media::after { opacity: 1; } }
.pcard__media img {
  width: 100%; height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform var(--slow) var(--ease);
}
@media (hover: hover) { .pcard:hover .pcard__media img { transform: scale(1.08) translateY(-2%); } }

.pcard__aura { display: none; }

.pcard__foot {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  padding: 13px;
  border-top: 1px solid var(--hair);
}
.pcard__text { min-width: 0; }
.pcard__name { font-family: var(--display); font-size: 1.12rem; font-weight: 500; line-height: 1.18; }
.pcard__notes { margin-top: 2px; font-size: 0.66rem; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard__price { margin-top: 6px; font-family: var(--display); font-size: 1.1rem; font-weight: 500; }
.pcard__mrp { font-family: var(--body); font-size: 0.72rem; color: var(--faint); text-decoration: line-through; margin-right: 5px; }

.pcard__add {
  position: relative;
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--charcoal);
  color: var(--ivory);
  overflow: hidden;
  transition: background var(--med) var(--ease), transform var(--fast) var(--spring), box-shadow var(--med) var(--ease);
}
.pcard__add svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform var(--med) var(--spring); }
.pcard__add:hover { background: var(--gold-deep); box-shadow: var(--glow-gold); }
@media (hover: hover) { .pcard__add:hover svg { transform: rotate(90deg); } }
.pcard__add:active { transform: scale(0.88); }
.pcard__add.is-added { background: var(--ok); animation: add-pop 520ms var(--spring); }
.pcard__add.is-added svg { transform: rotate(90deg) scale(1.1); }
@keyframes add-pop { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } }
.pcard__add--notify { background: var(--sand); color: var(--charcoal-2); }
.pcard__add--notify:hover svg { transform: none; }

.pcard.is-sold-out .pcard__media img { opacity: 0.32; }

.pcard__badges { position: absolute; top: 11px; left: 11px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.tagpill {
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--charcoal);
  color: var(--champagne);
}
.tagpill--dark { background: var(--gold-grad); color: #241d10; }
.tagpill--sale { background: rgba(74, 122, 85, 0.14); color: var(--ok); }
.tagpill--out { background: var(--sand); color: var(--muted); }
.tagpill--low { background: rgba(162, 115, 44, 0.14); color: var(--warn); }

.wish-btn {
  position: absolute;
  top: 9px; right: 9px;
  z-index: 2;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 254, 251, 0.85);
  backdrop-filter: blur(6px);
  color: var(--muted);
  transition: transform var(--med) var(--spring), color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.wish-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; }
.wish-btn.is-saved { background: var(--charcoal); color: var(--champagne); }
.wish-btn.is-saved svg { fill: currentColor; }
.wish-btn:active { transform: scale(0.86); }
.wish-btn--lg { position: static; width: 54px; height: 54px; background: transparent; border: 1px solid var(--line-2); flex-shrink: 0; }

/* ------------------------------ Skeletons -------------------------------- */
.skeleton { background: linear-gradient(100deg, var(--sand) 20%, var(--paper) 40%, var(--sand) 60%); background-size: 220% 100%; animation: shimmer 1.4s linear infinite; border-radius: 8px; }
.skeleton--media { aspect-ratio: 1; width: 100%; margin-bottom: 10px; }
.skeleton--line { height: 10px; margin: 0 13px 8px; }
.skeleton--block { height: 200px; width: 100%; }
@keyframes shimmer { to { background-position: -220% 0; } }
.reduced-motion .skeleton { animation: none; }
.pcard--skeleton { pointer-events: none; padding-bottom: 10px; transform: none; }

.grid-empty { grid-column: 1 / -1; padding: 50px 16px; text-align: center; color: var(--muted); }
.grid-empty .btn { margin-top: 16px; }

/* -------------------------- Diffusion gauge ------------------------------ */
.diffusion { display: flex; align-items: center; gap: 8px; }
.diffusion__label { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.diffusion__track { display: flex; gap: 3px; flex: 1; }
.diffusion__seg {
  flex: 1; height: 5px; min-width: 3px;
  border-radius: 3px;
  background: var(--sand);
  transform: scaleY(0.45);
  opacity: 0.5;
  transform-origin: bottom;
  transition: transform 380ms var(--spring), opacity 380ms var(--ease);
}
.diffusion__seg.is-filled { background: var(--gold-grad); }
.diffusion__seg.is-filled.is-lit { transform: scaleY(1); opacity: 1; }
.diffusion__hrs { font-family: var(--display); font-size: 0.95rem; font-weight: 500; color: var(--gold-deep); min-width: 24px; text-align: right; }

/* ============================ QUIZ BANNER =============================== */
.quiz-banner { padding-block: 44px; background: var(--charcoal); color: var(--ivory); }
.quiz-banner .eyebrow { color: var(--champagne); }
.quiz-banner .eyebrow::before { background: var(--champagne); }
.quiz-banner .section-heading { color: var(--ivory); margin-bottom: 10px; }
.quiz-banner p { color: rgba(252, 250, 245, 0.68); }
.quiz-banner__inner { display: flex; flex-direction: column; gap: 20px; }
.quiz-banner .btn { align-self: flex-start; }

/* =============================== STORY ================================== */
.story { padding-block: 46px; }
.story__mark { display: none; }
.story__inner p { color: var(--muted); line-height: 1.9; margin-bottom: 16px; }
.story__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.story__stat b {
  display: block;
  font-family: var(--display);
  font-size: clamp(2rem, 9vw, 3.2rem);
  font-weight: 300;
  line-height: 1;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.story__stat span { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }

/* ============================= NEWSLETTER =============================== */
.newsletter { padding-block: 44px; text-align: center; }
.newsletter .eyebrow { justify-content: center; }
.newsletter .eyebrow::before { display: none; }
.newsletter__form { display: flex; flex-direction: column; gap: 10px; max-width: 460px; margin: 20px auto 0; }
.newsletter__form input {
  padding: 15px 20px;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 100px;
  color: var(--charcoal);
  text-align: center;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.newsletter__form input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(176, 141, 87, 0.12); }

/* ============================== CONTACT ================================= */
.contact { padding-block: 46px; }
.contact__grid { display: flex; flex-direction: column; gap: 26px; margin-top: 24px; }

.field { margin-bottom: 18px; }
.field label { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--charcoal-2); margin-bottom: 8px; }
.field__optional { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--faint); }
.field input, .field textarea, .field select {
  width: 100%;
  min-height: var(--tap);
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  color: var(--charcoal);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(176, 141, 87, 0.12); }
.field__error { display: block; font-size: 0.74rem; color: var(--danger); margin-top: 6px; opacity: 0; transition: opacity var(--fast) var(--ease); }
.field.has-error input, .field.has-error textarea { border-color: var(--danger); }
.field.has-error .field__error { opacity: 1; }
.field__note { display: block; font-size: 0.74rem; color: var(--faint); margin-top: 6px; }
.field__note.is-good { color: var(--ok); }
.field__note.is-bad { color: var(--danger); }
.form-row { display: grid; gap: 0; }

.info-card {
  padding: 24px;
  background: var(--glass);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.info-card h3 { font-family: var(--display); font-size: 1.4rem; font-weight: 500; margin-bottom: 16px; }
.info-list li { padding: 13px 0; border-bottom: 1px solid var(--hair); font-size: 0.88rem; color: var(--charcoal-2); }
.info-list b { display: block; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 3px; }
.social-row { display: flex; gap: 10px; margin-top: 20px; }
.social-row a { width: var(--tap); height: var(--tap); display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; color: var(--charcoal-2); transition: all var(--med) var(--ease); }
.social-row svg { width: 16px; height: 16px; fill: currentColor; }
.social-row a:hover { background: var(--charcoal); color: var(--champagne); border-color: var(--charcoal); transform: translateY(-3px) rotate(6deg); }

/* =============================== FOOTER ================================= */
.site-footer {
  padding-top: 46px;
  padding-bottom: max(32px, calc(var(--tabbar-h) + 24px));
  background: var(--charcoal);
  color: var(--ivory);
  position: relative;
}
.footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding-bottom: 32px; }
.footer-brand { grid-column: 1 / -1; }
/* The footer runs on charcoal, so the black monogram is inverted rather than
   shipping a second asset that could be used on the wrong ground. */
.footer-brand img { height: 28px; margin-bottom: 14px; filter: invert(1); }
.footer-brand p { color: rgba(252, 250, 245, 0.6); font-size: 0.88rem; line-height: 1.8; }
.footer-track {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  padding-bottom: 4px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--champagne);
  border-bottom: 1px solid rgba(227, 211, 176, 0.35);
  transition: gap var(--med) var(--ease);
}
.footer-track:hover { gap: 15px; }
.footer-track svg { width: 17px; height: 17px; fill: none; stroke: currentColor; }
.footer-col h4 { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--champagne); margin-bottom: 13px; }
.footer-col li { margin-bottom: 9px; }
.footer-col a { position: relative; font-size: 0.86rem; color: rgba(252, 250, 245, 0.72); transition: color var(--fast) var(--ease), padding-left var(--med) var(--ease); }
.footer-col a:hover { color: var(--ivory); padding-left: 6px; }
/* Divider that draws itself in. */
.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-block: 18px;
  border-top: 1px solid rgba(252, 250, 245, 0.14);
  font-size: 0.72rem;
  color: rgba(252, 250, 245, 0.45);
}

/* Build credit. Centred on its own line rather than squeezed in as a third
   item in the row above, which on a phone would have stacked into an
   indistinguishable third line of small print. No second divider either — the
   one on .footer-bottom already closes the footer, and a rule above this too
   would fence off six words. */
.footer-powered {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding-top: 10px;
  padding-bottom: max(24px, calc(var(--tabbar-h) + 16px));
  text-align: center;
}
.footer-powered span {
  font-size: 0.64rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(252, 250, 245, 0.4);
}
.footer-powered b {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: 0.03em;
  color: var(--champagne);
}

/* ============================= CART SHEET =============================== */
.cart-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-cart-overlay);
  background: rgba(30, 28, 24, 0.4);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--med) var(--ease);
}
.cart-overlay.is-open { opacity: 1; pointer-events: auto; }

/* On mobile the WHOLE sheet scrolls as one page — the pattern quick-commerce
   apps use. An inner scroller inside a sheet means two nested scrollers
   fighting under one thumb. */
.cart-drawer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-cart);
  display: flex;
  flex-direction: column;
  height: 92dvh;
  background: var(--ivory);
  border-radius: 22px 22px 0 0;
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  transform: translateY(101%);
  transition: transform var(--med) var(--ease-out);
}
.cart-drawer.is-open { transform: none; }
.cart-drawer.is-loading { opacity: 0.6; pointer-events: none; }
.cart-drawer::before {
  content: "";
  position: absolute;
  top: 8px; left: 50%;
  width: 40px; height: 4px;
  transform: translateX(-50%);
  border-radius: 4px;
  background: var(--line-2);
}
.cart-drawer__head { position: sticky; top: 0; z-index: 2; background: var(--ivory); display: flex; align-items: center; justify-content: space-between; padding: 20px 18px 12px; border-bottom: 1px solid var(--line); }
.cart-drawer__foot { position: sticky; bottom: 0; z-index: 2; padding: 14px 18px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--paper); }
.cart-drawer__head h3 { font-family: var(--display); font-size: 1.45rem; font-weight: 500; }
.cart-drawer__close { width: 38px; height: 38px; display: grid; place-items: center; font-size: 1.6rem; line-height: 1; color: var(--muted); border-radius: 50%; transition: all var(--fast) var(--ease); }
.cart-drawer__close:hover { color: var(--charcoal); background: var(--sand); transform: rotate(90deg); }

.cart-ship-progress { padding: 12px 18px; border-bottom: 1px solid var(--line); }
.cart-ship-progress__track { height: 4px; background: var(--sand); border-radius: 4px; overflow: hidden; }
.cart-ship-progress__track span { display: block; height: 100%; background: var(--gold-grad); transform: scaleX(0); transform-origin: left; transition: transform var(--slow) var(--ease); }
.cart-ship-progress p { margin-top: 7px; font-size: 0.74rem; color: var(--muted); }
.cart-ship-progress.is-complete p { color: var(--ok); font-weight: 500; }

.cart-items { flex: 0 0 auto; padding: 2px 18px; }
.cart-line { display: grid; grid-template-columns: 58px 1fr auto; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--hair); animation: line-in 380ms var(--ease-out) backwards; }
@keyframes line-in { from { opacity: 0; transform: translateX(16px); } }
.cart-line__media { width: 58px; height: 68px; border-radius: 8px; overflow: hidden; background: var(--paper); }
.cart-line__media img { width: 100%; height: 100%; object-fit: contain; padding: 4px; mix-blend-mode: multiply; }
.cart-line__info { min-width: 0; }
.cart-line__name { font-family: var(--display); font-size: 1.05rem; font-weight: 500; }
.cart-line__price { font-size: 0.74rem; color: var(--muted); }
.cart-line__end { text-align: right; display: flex; flex-direction: column; justify-content: space-between; }
.cart-line__total { font-family: var(--display); font-size: 1.05rem; font-weight: 500; }
.cart-line__remove { font-size: 0.68rem; color: var(--faint); }
.cart-line__remove:hover { color: var(--danger); }

.qty-stepper { display: inline-flex; align-items: center; margin-top: 8px; border: 1px solid var(--line-2); border-radius: 100px; overflow: hidden; background: var(--paper); }
.qty-stepper__btn { width: 32px; height: 32px; display: grid; place-items: center; color: var(--charcoal-2); font-size: 1rem; }
.qty-stepper__btn:active { background: var(--sand); }
.qty-stepper__val { min-width: 26px; text-align: center; font-size: 0.88rem; font-weight: 500; }
.qty-stepper--lg .qty-stepper__btn { width: var(--tap); height: var(--tap); font-size: 1.2rem; }

.cart-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 44px 18px; text-align: center; color: var(--muted); }
.cart-empty svg { width: 42px; height: 42px; fill: none; stroke: var(--line-2); }

.cart-coupon { display: flex; gap: 8px; margin-bottom: 12px; }
.cart-coupon input { flex: 1; min-width: 0; min-height: 40px; padding: 10px 15px; background: var(--ivory); border: 1px solid var(--line-2); border-radius: 100px; color: var(--charcoal); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.cart-summary > div { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; font-size: 0.85rem; }
.cart-summary dt { color: var(--muted); }
.cart-summary dd { margin: 0; }
.cart-summary__total { margin-top: 8px; padding-top: 12px !important; border-top: 1px solid var(--line); }
.cart-summary__total dt { color: var(--charcoal) !important; font-size: 0.95rem; font-weight: 600; }
.cart-summary__total dd { font-family: var(--display); font-size: 1.5rem; font-weight: 500; }
.cart-shipping-note { margin: -4px 0 12px; font-size: 0.7rem; color: var(--faint); text-align: right; }
.cart-note { margin-top: 10px; font-size: 0.7rem; color: var(--faint); text-align: center; line-height: 1.55; }

/* Pulse when a total changes, so a number is never seen to move silently. */
.is-ticked { animation: tick 420ms var(--spring); }
@keyframes tick { 0% { transform: scale(1); } 40% { transform: scale(1.14); color: var(--gold-deep); } 100% { transform: scale(1); } }
.cart-summary dd, .cart-line__total { display: inline-block; transform-origin: right center; }

/* ============================ PRODUCT PAGE ============================== */
.pdp { padding-top: 14px; }
.breadcrumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.7rem; color: var(--faint); margin-bottom: 16px; }
.breadcrumb a:hover { color: var(--gold-deep); }

.pdp__grid { display: flex; flex-direction: column; gap: 20px; margin-bottom: 34px; }
.pdp-gallery__main {
  position: relative;
  aspect-ratio: 1;
  max-height: 44vh;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--glass);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-sm);
}
.pdp-gallery__main img { width: 100%; height: 100%; object-fit: contain; padding: 6%; mix-blend-mode: multiply; transition: transform var(--slow) var(--ease); }
.pdp-gallery__main.is-zoomed img { transform: scale(1.9); }
.pdp-gallery__hint { display: none; }

.pdp-info__family { font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 10px; }
.pdp-badge { padding: 3px 10px; border-radius: 100px; background: var(--gold-grad); color: #241d10; font-size: 0.54rem; font-weight: 700; }
.pdp-info__name { font-family: var(--display); font-size: clamp(2.1rem, 9vw, 3.4rem); font-weight: 300; line-height: 1.02; letter-spacing: -0.02em; margin-bottom: 8px; }
.pdp-info__tagline { font-family: var(--display); font-style: italic; font-size: 1.15rem; color: var(--muted); margin-bottom: 16px; }
.pdp-rating { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.pdp-rating span { font-size: 0.8rem; color: var(--muted); }
.stars { display: inline-flex; gap: 2px; }
.star { color: var(--line-2); font-size: 0.95rem; }
.star.is-on { color: var(--gold); }

.pdp-info__price { font-family: var(--display); font-size: clamp(1.8rem, 7vw, 2.5rem); font-weight: 500; margin-bottom: 14px; }
.pdp-info__mrp { font-family: var(--body); font-size: 0.42em; font-weight: 400; color: var(--faint); text-decoration: line-through; margin-left: 10px; }
.pdp-info__save { font-family: var(--body); font-size: 0.28em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ok); margin-left: 8px; vertical-align: middle; }

.stock-notice { display: flex; align-items: center; gap: 9px; font-size: 0.84rem; font-weight: 500; margin-bottom: 18px; }
.stock-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.stock-notice--in { color: var(--ok); }
.stock-notice--low { color: var(--warn); }
.stock-notice--out { color: var(--danger); }

.qty-row { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; margin-bottom: 20px; }
.qty-row .qty-stepper { margin-top: 0; }
.qty-row .btn--grow { min-width: 150px; }

.pdp-info__desc { color: var(--muted); line-height: 1.85; margin-bottom: 20px; }
.pdp-info__diffusion { padding: 18px; background: var(--glass); backdrop-filter: blur(10px); border: 1px solid var(--glass-line); border-radius: var(--radius); margin-bottom: 18px; }
.pdp-info__projection { font-size: 0.78rem; color: var(--muted); margin-top: 10px; }
.tag-row { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 20px; }
.tag { padding: 7px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 100px; font-size: 0.7rem; color: var(--charcoal-2); transition: all var(--fast) var(--ease); }
.tag:hover { border-color: var(--gold); color: var(--gold-deep); }

.pdp-assurances { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 18px; border-top: 1px solid var(--line); }
.pdp-assurances li { position: relative; padding-left: 16px; font-size: 0.76rem; color: var(--muted); }
.pdp-assurances li::before { content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-grad); transform: translateY(-50%); }

.restock-form { padding: 20px; background: var(--glass); backdrop-filter: blur(10px); border: 1px solid var(--glass-line); border-radius: var(--radius); }
.restock-form label { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--charcoal-2); margin-bottom: 10px; }
.restock-form__row { display: flex; flex-direction: column; gap: 8px; }
.restock-form input { min-height: var(--tap); padding: 14px 16px; background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--radius-sm); color: var(--charcoal); }

.pdp-tabs { display: flex; flex-direction: column; gap: 30px; padding-block: 30px; border-top: 1px solid var(--line); }
.pdp-block h3 { font-family: var(--display); font-size: 1.7rem; font-weight: 400; margin-bottom: 6px; }
.pdp-block .hint { margin-bottom: 18px; }

.pyramid { display: flex; flex-direction: column; gap: 12px; }
.pyramid__tier { padding: 18px; background: var(--glass); backdrop-filter: blur(8px); border: 1px solid var(--glass-line); border-left: 3px solid var(--gold); border-radius: var(--radius-sm); transition: transform var(--med) var(--ease); }
.pyramid__tier:hover { transform: translateX(6px); }
.pyramid__tier b { display: block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 10px; }
.pyramid__notes { display: flex; gap: 6px; flex-wrap: wrap; }
.pyramid__notes span { padding: 5px 12px; background: var(--ivory-2); border-radius: 100px; font-size: 0.74rem; color: var(--charcoal-2); }

.steps { display: flex; flex-direction: column; gap: 14px; }
.step { display: grid; grid-template-columns: 38px 1fr; gap: 12px; }
.step__num { font-family: var(--display); font-size: 1.5rem; line-height: 1; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.step__text { color: var(--muted); line-height: 1.75; font-size: 0.9rem; }

.related { padding-block: 34px; border-top: 1px solid var(--line); }
.related .section-heading { margin-bottom: 20px; }

.reviews { display: grid; gap: 12px; }
.review { padding: 20px; background: var(--glass); backdrop-filter: blur(8px); border: 1px solid var(--glass-line); border-radius: var(--radius); }
.review header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.review__verified { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ok); }
.review header time { margin-left: auto; font-size: 0.72rem; color: var(--faint); }
.review p { color: var(--muted); font-size: 0.88rem; line-height: 1.75; }

.sticky-buy {
  position: fixed;
  left: 0; right: 0;
  bottom: var(--tabbar-h);
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  background: rgba(252, 250, 245, 0.97);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 28px -14px rgba(60, 48, 28, 0.35);
  transform: translateY(120%);
  transition: transform var(--med) var(--ease-out);
}
.sticky-buy.is-visible { transform: none; }
.sticky-buy__info { display: flex; flex-direction: column; min-width: 0; }
.sticky-buy__info b { font-family: var(--display); font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-buy__info span { font-size: 0.82rem; font-weight: 600; color: var(--gold-deep); }
@media (min-width: 900px) { .sticky-buy { display: none; } }

/* ============================= SCROLL TOP =============================== */
.scroll-top {
  position: fixed;
  right: 14px;
  bottom: calc(var(--tabbar-h) + 14px);
  z-index: var(--z-sticky);
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  background: var(--glass);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-line);
  border-radius: 50%;
  color: var(--gold-deep);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translateY(14px) scale(0.85);
  pointer-events: none;
  transition: all var(--med) var(--spring);
}
.scroll-top svg { width: 17px; height: 17px; fill: none; stroke: currentColor; }
.scroll-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }

/* =========================================================================
   BREAKPOINTS
   ========================================================================= */

@media (min-width: 480px) {
  :root { --pad: 24px; }
  .restock-form__row, .newsletter__form { flex-direction: row; }
  .newsletter__form input { flex: 1; text-align: left; }
  .footer-bottom { flex-direction: row; justify-content: space-between; }
}

@media (min-width: 700px) {
  :root { --pad: 32px; }
  .product-rail, .product-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .trustbar__list { grid-template-columns: repeat(4, 1fr); }
  .form-row { grid-template-columns: 1fr 1fr; gap: 0 20px; }
  .form-row--three { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .footer-brand { grid-column: auto; }
  .pcard__name { font-size: 1.28rem; }
  .pcard__price { font-size: 1.22rem; }
  .quiz-banner__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; }
}

@media (min-width: 900px) {
  :root { --pad: 44px; --header-h: 76px; --announce-h: 38px; }

  .hero { padding-top: 40px; padding-bottom: 70px; }
  .hero__grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    grid-template-areas: "copy stage" "rest stage";
    align-items: center;
    gap: 0 46px;
  }
  /* 80–100px display type. */
  .hero__title { font-size: clamp(3.6rem, 6.4vw, 6.2rem); line-height: 0.98; margin-bottom: 14px; }
  .hero__rotator { font-size: 1.6rem; margin-bottom: 20px; }
  .hero__tagline { font-size: 1.05rem; max-width: 46ch; line-height: 1.95; }
  .hero__bottle, .hero__reflection { height: 62vh; max-height: 620px; }
  .hero__badge { width: 88px; top: 2%; right: -18px; }
  .hero__badge b { font-size: 1.9rem; }
  .hero__badge span { font-size: 0.46rem; }
  .hero__features { display: flex; gap: 30px; border: none; padding: 0; margin-bottom: 30px; }
  .hero__features li { text-align: left; position: relative; padding-right: 30px; }
  .hero__features li + li::before { content: ""; position: absolute; left: -15px; top: 3px; bottom: 3px; width: 1px; background: var(--line); }
  .hero__features svg { margin: 0 0 8px; width: 25px; height: 25px; }
  .hero__features b { font-size: 0.62rem; }
  .hero__features span { font-size: 0.72rem; }
  .hero__actions .btn { flex: 0 0 auto; }

  .shop { padding-block: 80px; }
  .collection-panel {
    padding: 40px;
    background: var(--glass);
    backdrop-filter: blur(14px);
    border: 1px solid var(--glass-line);
    border-radius: 24px;
    box-shadow: var(--shadow-sm);
  }
  .shop__head { margin-bottom: 26px; }
  .toolbar { flex-direction: row; align-items: center; justify-content: space-between; }
  .toolbar__filters { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; overflow: visible; }
  .toolbar__sort label { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
  .product-rail, .product-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 26px; }

  .story { padding-block: 100px; }
  .story__inner { max-width: 740px; }
  .contact__grid { display: grid; grid-template-columns: 1.3fr 0.85fr; gap: 56px; }
  .newsletter, .quiz-banner, .contact { padding-block: 90px; }

  .pdp { padding-top: 28px; }
  .pdp__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; margin-bottom: 80px; }
  .pdp-gallery { position: sticky; top: calc(var(--chrome-h) + 22px); }
  .pdp-gallery__main { aspect-ratio: 4 / 5; max-height: none; cursor: zoom-in; }
  .pdp-gallery__hint {
    display: block;
    position: absolute;
    bottom: 16px; left: 50%;
    transform: translateX(-50%);
    padding: 7px 16px;
    border-radius: 100px;
    background: rgba(30, 28, 24, 0.8);
    color: var(--champagne);
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity var(--med) var(--ease);
    pointer-events: none;
  }
  .pdp-gallery__main:hover .pdp-gallery__hint { opacity: 1; }
  .pdp-tabs { flex-direction: row; gap: 56px; padding-block: 56px; }
  .pdp-block { flex: 1; }

  /* Desktop side drawer: a fixed-height panel with an inner scroller. */
  .cart-drawer {
    top: 0; left: auto; right: 0; bottom: 0;
    width: min(440px, 100vw);
    height: 100dvh;
    overflow: hidden;
    border-radius: 0;
    border-left: 1px solid var(--line);
    transform: translateX(102%);
  }
  .cart-drawer::before { display: none; }
  .cart-drawer__head, .cart-drawer__foot { position: static; }
  /* `min-height: 0` is load-bearing — a flex child defaults to
     `min-height: auto` and refuses to shrink below its content, which would
     push the totals off the bottom instead of scrolling. */
  .cart-items { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 26px; }
  .cart-drawer__head { padding: 24px 26px; }
  .cart-drawer__foot { padding: 20px 26px 26px; }
  .cart-ship-progress { padding: 16px 26px; }

  .scroll-top { right: 24px; bottom: 24px; width: 48px; height: 48px; }
  .site-footer { padding-top: 80px; }
  .footer-grid { padding-bottom: 50px; }
}

@media (min-width: 1200px) { :root { --pad: 56px; } }