/* GENERATED by scripts/build-css.mjs — do not edit.
   Edit the sources listed below, then run: npm run build
   storefront: 29 stylesheets, in cascade order. */
/* ═══ src/styles/tokens.css ═══ */
/* ============================================================
   SORA LIFE — DESIGN TOKENS
   Botanical evergreen + warm ivory + honey accent.
   Premium, natural, modern, warm. Not generic-organic.
   ============================================================ */
:root {
  /* ---- Brand color scales ---- */
  --forest-900: #14261C;
  --forest-800: #1A3226;
  --forest-700: #1E3A2F; /* primary brand ink-green */
  --forest-600: #2C5341;
  --forest-500: #3B6E56;
  --forest-400: #578D72;
  --forest-300: #85B49F;
  --forest-200: #BEDACD;
  --forest-100: #E1EEE7;
  --forest-50:  #F0F6F2;

  --honey-700: #B4761F;
  --honey-600: #D08E2C;
  --honey-500: #E8B04B; /* accent / highlights */
  --honey-400: #F0C169;
  --honey-300: #F6D79A;
  --honey-200: #FBE9C8;
  --honey-100: #FDF4E4;

  --clay-600: #B4552E;
  --clay-500: #C56A45; /* warm secondary / sale */
  --clay-100: #F7E7DF;

  /* ---- Neutrals (warm-tinted) ---- */
  --ivory:     #FBF8F1; /* page background */
  --cream:     #F4EEE1;
  --sand:      #EDE6D6;
  --paper:     #FFFFFF; /* cards */
  --ink-900:   #16211B;
  --ink-700:   #2C3A32;
  --ink-500:   #55655B; /* muted text */
  --ink-400:   #7A897F;
  --line:      #E7DFD0; /* borders */
  --line-soft: #F0EADD;

  /* ---- Semantic ---- */
  --color-bg: var(--ivory);
  --color-surface: var(--paper);
  --color-surface-2: var(--cream);
  --color-primary: var(--forest-700);
  --color-primary-hover: var(--forest-800);
  --color-accent: var(--honey-500);
  --color-accent-strong: var(--honey-700);
  /* Gold that is legible as TEXT on light surfaces (>=4.5:1 on ivory).
     --color-accent-strong is tuned for accents/borders, not body copy. */
  --color-accent-text: #866419;

  /* ---- Commerce price system ----
     Selling price reads as a calm, trustworthy green rather than a
     discount-store red/orange; MRP is a refined muted red, never louder
     than the price the customer actually pays. Gold stays reserved for
     brand accents and is deliberately NOT used for prices. */
  --price-now: #5F8A63;      /* selling price - AA on cream/white */
  --price-now-strong: #4E7452;
  --price-mrp: #A94F4F;      /* struck-through MRP - AA on cream at 12px */
  --price-save: #4E7452;     /* "you save" messaging */
  --color-sale: var(--clay-500);
  --color-text: var(--ink-900);
  --color-text-muted: var(--ink-500);
  --color-on-primary: #FBF8F1;
  --color-border: var(--line);
  --color-ring: var(--forest-400);
  --color-success: #2F855A;
  --color-danger: #C0392B;
  --color-star: #E8B04B;

  /* ---- Typography ---- */
  --font-display: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-5xl: 3.75rem;

  /* ---- Spacing scale (8pt-based, warm-density) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* ---- Radius ---- */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* ---- Shadows (Soft UI Evolution: soft, layered, low-contrast) ---- */
  --shadow-xs: 0 1px 2px rgba(20, 38, 28, 0.06);
  --shadow-sm: 0 2px 8px rgba(20, 38, 28, 0.06);
  --shadow-md: 0 8px 24px rgba(20, 38, 28, 0.08);
  --shadow-lg: 0 18px 48px rgba(20, 38, 28, 0.12);
  --shadow-focus: 0 0 0 3px rgba(87, 141, 114, 0.35);

  /* ---- Motion ----
     Premium/luxury motion language: slow, calm deceleration curves and
     generous durations for anything the eye lingers on (hero, reveals,
     galleries); quick, quiet feedback for anything the hand touches
     (buttons, toggles, badges). Never bounce, never spin. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-luxury: cubic-bezier(0.19, 1, 0.22, 1);   /* long, elegant deceleration */
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);      /* gentle, for micro-interactions */
  --t-fast: 140ms;
  --t: 240ms;
  --t-slow: 420ms;
  --t-slower: 700ms;
  --t-cinematic: 9000ms;

  /* ---- Layout ---- */
  --container: 1240px;
  --container-wide: 1440px;
  --header-h: 116px;
  --header-h-scrolled: 72px;
}

@media (max-width: 900px) {
  :root { --header-h: 60px; --header-h-scrolled: 60px; }
}

/* ---- Storefront theme: controlled typography scales (admin customizer) ----
   Default 'normal' has NO rule, so the tokens above apply unchanged. */
:root[data-heading-scale="compact"] { --text-xl: 1.2rem;  --text-2xl: 1.5rem; --text-3xl: 1.95rem; --text-4xl: 2.5rem; --text-5xl: 3.1rem; }
:root[data-heading-scale="large"]   { --text-xl: 1.55rem; --text-2xl: 2rem;   --text-3xl: 2.6rem;  --text-4xl: 3.5rem; --text-5xl: 4.3rem; }
:root[data-body-scale="compact"]    { --text-sm: 0.78rem; --text-base: 0.88rem; --text-md: 0.94rem; --text-lg: 1.05rem; }
:root[data-body-scale="large"]      { --text-sm: 0.86rem; --text-base: 1rem;    --text-md: 1.08rem; --text-lg: 1.22rem; }

/* ═══ src/styles/base.css ═══ */
/* ============================================================
   BASE / RESET / PRIMITIVES
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; letter-spacing: -0.01em; color: var(--color-text); }
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); }

::selection { background: var(--forest-200); color: var(--forest-900); }

:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--r-xs); }

/* ---- Layout helpers ---- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-6); }
.container-wide { max-width: var(--container-wide); }
@media (max-width: 640px) { .container { padding-inline: var(--sp-4); } }

.section { padding-block: var(--sp-24); }
.section-sm { padding-block: var(--sp-16); }
@media (max-width: 900px) { .section { padding-block: var(--sp-16); } .section-sm { padding-block: var(--sp-12); } }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}
.serif { font-family: var(--font-display); }
.muted { color: var(--color-text-muted); }
.center { text-align: center; }

/* ---- Reveal-on-scroll system ----
   One shared vocabulary of entrance motion, all subtle: opacity + a small
   translate/scale, never large distances, never bounce. `.reveal` alone
   is the default (fade-up); add a variant class to change the motion. */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s var(--ease-luxury), transform 0.8s var(--ease-luxury), filter 0.8s var(--ease-luxury); }
.reveal.is-in { opacity: 1; transform: none; }

.reveal-fade { transform: none; }
.reveal-scale { transform: scale(0.97) translateY(10px); }
.reveal-scale.is-in { transform: none; }
.reveal-left { transform: translateX(-24px); }
.reveal-left.is-in { transform: none; }
.reveal-right { transform: translateX(24px); }
.reveal-right.is-in { transform: none; }
.reveal-soft { transform: translateY(10px); filter: blur(4px); }
.reveal-soft.is-in { transform: none; filter: blur(0); }

/* Mobile: shorter travel distances, same subtle character */
@media (max-width: 640px) {
  .reveal { transform: translateY(12px); }
  .reveal-scale { transform: scale(0.985) translateY(6px); }
  .reveal-left { transform: translateX(-14px); }
  .reveal-right { transform: translateX(14px); }
}

/* Scrollbar */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--forest-200); border-radius: 999px; border: 3px solid var(--cream); }
::-webkit-scrollbar-thumb:hover { background: var(--forest-300); }

/* Utility */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hide-mobile { }
.only-mobile { display: none; }
@media (max-width: 900px) { .hide-mobile { display: none !important; } .only-mobile { display: revert; } }
/* Phones: tighten the tall desktop section rhythm so products surface sooner. */
@media (max-width: 640px) { .section { padding-block: var(--sp-10); } .section-sm { padding-block: var(--sp-8); } }

/* ═══ src/styles/components.css ═══ */
/* ============================================================
   COMPONENTS
   ============================================================ */

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--st-btn-primary-bg, var(--color-primary));
  --btn-fg: var(--st-btn-primary-text, var(--color-on-primary));
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-sans); font-weight: 600; font-size: var(--text-base);
  line-height: 1; letter-spacing: 0.01em;
  padding: 14px 24px; border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: transform var(--t) var(--ease-luxury), background var(--t) var(--ease), box-shadow var(--t) var(--ease-luxury), color var(--t) var(--ease);
  will-change: transform;
}
.btn:hover { background: var(--st-btn-hover, var(--color-primary-hover)); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0) scale(0.98); transition-duration: var(--t-fast); }
.btn svg { width: 18px; height: 18px; transition: transform var(--t) var(--ease-soft); }

.btn-accent { --btn-bg: var(--color-accent); --btn-fg: var(--forest-900); }
/* Aligned to the Add-to-Cart interaction (honey-600 hover / honey-700 active,
   forest-900 text) so Pay online / Place order use the exact same gold. */
.btn-accent:hover, .btn-accent:focus-visible { background: var(--honey-600); color: var(--forest-900); }
.btn-accent:active { background: var(--honey-700); color: var(--forest-900); }

.btn-outline { --btn-bg: transparent; --btn-fg: var(--color-primary); border-color: var(--color-primary); }
.btn-outline:hover { background: var(--color-primary); color: var(--color-on-primary); }

.btn-ghost { --btn-bg: transparent; --btn-fg: var(--color-text); }
.btn-ghost:hover { background: var(--forest-50); box-shadow: none; transform: none; }

.btn-light { --btn-bg: var(--st-btn-secondary-bg, var(--paper)); --btn-fg: var(--st-btn-secondary-text, var(--color-primary)); border-color: var(--line); }
.btn-light:hover { background: #fff; border-color: var(--forest-300); }

/* ---- Primary (dark-green) buttons: adopt the Add-to-Cart gold on interaction.
   Reuses the same honey tokens as .pcard__quickadd (the single source of truth)
   — no new colour. Scoped to primary only: outline/ghost/light/accent keep
   their own states. The lift/box-shadow from `.btn:hover` still applies, so
   only colour changes (no layout shift). The global :focus-visible ring
   (base.css) is preserved for keyboard users. ---- */
.btn:not(.btn-outline):not(.btn-ghost):not(.btn-light):not(.btn-accent):hover,
.btn:not(.btn-outline):not(.btn-ghost):not(.btn-light):not(.btn-accent):focus-visible {
  background: var(--honey-600);
  color: var(--forest-900);
}
.btn:not(.btn-outline):not(.btn-ghost):not(.btn-light):not(.btn-accent):active {
  background: var(--honey-700);
  color: var(--forest-900);
}

/* Opt-in gold interaction for a light/link button that should behave like a
   primary CTA on hover (e.g. Purchase Passport "View Passport", which is a
   <Link> styled as .btn-light). Same honey tokens — not a parallel colour. */
.btn-goldhover:hover, .btn-goldhover:focus-visible {
  background: var(--honey-600); color: var(--forest-900); border-color: var(--honey-600);
}
.btn-goldhover:active {
  background: var(--honey-700); color: var(--forest-900); border-color: var(--honey-700);
}

.btn-block { width: 100%; }
.btn-lg { padding: 17px 30px; font-size: var(--text-md); }
.btn-sm { padding: 10px 16px; font-size: var(--text-sm); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* Icon button */
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--r-pill);
  color: var(--color-text); background: transparent; position: relative;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), transform var(--t-fast) var(--ease-soft);
}
.iconbtn:hover { background: var(--forest-50); }
.iconbtn:active { transform: scale(0.9); }
.iconbtn svg { width: 22px; height: 22px; transition: transform var(--t) var(--ease-soft); }
.iconbtn:hover svg { transform: scale(1.06); }
.iconbtn .count {
  position: absolute; top: 3px; right: 2px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--color-accent); color: var(--forest-900);
  font-size: 11px; font-weight: 700; font-family: var(--font-sans);
  border-radius: 999px; display: grid; place-items: center; line-height: 1;
  border: 2px solid var(--color-bg);
  animation: countpop 0.45s var(--ease-soft);
}
@keyframes countpop { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--r-pill);
  background: var(--forest-100); color: var(--forest-700);
}
.badge-sale { background: var(--clay-100); color: var(--clay-600); }
.badge-new { background: var(--st-new-bg, var(--forest-700)); color: var(--st-new-text, var(--forest-50)); }
.badge-best { background: var(--honey-200); color: var(--honey-700); }
.badge-soft { background: var(--paper); color: var(--color-text-muted); border: 1px solid var(--line); }
.badge-out { background: #EEE9E0; color: var(--ink-400); }

/* ---------- Star rating ---------- */
.stars { display: inline-flex; align-items: center; gap: 2px; }
.stars svg { width: 15px; height: 15px; }
.stars .s-full { color: var(--color-star); }
.stars .s-empty { color: var(--line); }
.rating-row { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---------- Price ---------- */
.price { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price .now { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--color-text); }
.price .was { font-size: var(--text-sm); color: var(--price-mrp); text-decoration: line-through; }
.price .off { font-size: var(--text-xs); font-weight: 700; color: var(--clay-600); }

/* ---------- Product image (branded SVG placeholder) ---------- */
/* Product image "stage".
   Every product photo is shown COMPLETE — never cropped, never stretched.
   Source images vary a lot (tall bottles, wide cartons, square soaps), so
   instead of cropping to force uniformity we give every product a fixed,
   identical stage and centre the whole image inside it with object-fit:
   contain. Different aspect ratios then read as intentionally aligned
   rather than ragged, and it works automatically for any future image. */
.pimg { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--cream); }
.pimg svg { width: 100%; height: 100%; }
.pimg img {
  width: 100%; height: 100%;
  object-fit: contain;     /* show the whole product — never crop */
  object-position: center; /* centred both axes */
  display: block;
}
.pimg.square { aspect-ratio: 1 / 1; }

/* ---------- Product card ---------- */
/* Cards are wrapped in a scroll-reveal <div class="reveal"> which becomes the
   actual grid/rail item. The grid stretches that wrapper to the row height,
   but the card inside kept its own content height — so cards in one row ended
   at different heights. Making the wrapper a flex column and the card fill it
   restores equal-height rows without touching the grid definitions. */
.pgrid > .reveal, .rail > .reveal { display: flex; flex-direction: column; }
.pgrid > .reveal > .pcard, .rail > .reveal > .pcard { flex: 1; }

.pcard {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: var(--st-card-bg, var(--paper)); border: 1px solid var(--line-soft);
  /* Retain the theme's border hue without a harsh outline on light cards. */
  border-color: color-mix(in srgb, var(--st-card-border, var(--line-soft)) 15%, var(--line-soft));
  border-radius: 2px; overflow: hidden;
  transition: transform var(--t-slow) var(--ease-luxury), box-shadow var(--t-slow) var(--ease-luxury), border-color var(--t) var(--ease);
}
.pcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--line); }
.pcard__media { position: relative; overflow: hidden; border-radius: 0; }
.pcard__media .pimg { border-radius: 0; }
/* Keep every edge of the packaging visible, including on hover. */
.pcard__media .pimg img { object-fit: contain; }
.pcard__badges { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.pcard__badges .badge { border-radius: 4px; }
.pcard__wish {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 40px; height: 40px; border-radius: 999px;
  background: rgba(255,255,255,0.9); backdrop-filter: blur(4px);
  display: grid; place-items: center; color: var(--ink-500);
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-fast) var(--ease), color var(--t) var(--ease), background var(--t) var(--ease);
}
/* Touch devices get a comfortable ~44px tap target for the wishlist heart. */
@media (hover: none), (max-width: 640px) {
  .pcard__wish { width: 44px; height: 44px; }
}
.pcard__wish svg { width: 20px; height: 20px; transition: transform var(--t) var(--ease-soft); }
.pcard__wish:hover { color: var(--color-sale); }
.pcard__wish:hover svg { transform: scale(1.1); }
.pcard__wish.active { color: var(--color-sale); }
.pcard__wish.active svg { fill: currentColor; animation: heartpop 0.55s var(--ease-soft); }
@keyframes heartpop { 0% { transform: scale(1); } 45% { transform: scale(1.16); } 100% { transform: scale(1); } }

.pcard__quick {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2;
  display: flex; gap: 8px;
  transform: translateY(14px); opacity: 0;
  transition: transform var(--t-slow) var(--ease-luxury), opacity var(--t-slow) var(--ease-luxury);
}
.pcard:hover .pcard__quick { transform: none; opacity: 1; }
@media (hover: none) { .pcard__quick { transform: none; opacity: 1; position: static; margin: 12px; } }

/* Quick Add only — warm gold accent, scoped so it never touches .btn-accent
   (Buy now / Place order / Subscribe) or any other button. */
.pcard__quickadd { --btn-bg: var(--honey-500); --btn-fg: var(--forest-900); }
.pcard__quickadd:hover { background: var(--honey-600); color: var(--forest-900); }
.pcard__quickadd:active { background: var(--honey-700); }

.pcard__body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
/* Small meta label (category · size). Kept to a single line so every card's
   title starts at the same baseline — long values ellipsize rather than
   wrapping and pushing the rest of the card down. */
.pcard__cat {
  font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-text-muted); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Reserve two lines for the name so one- and two-line product titles start
   and end at the same baseline, keeping the price row aligned across a row.
   Longer names clamp to two lines instead of pushing the card taller. */
.pcard__name {
  font-family: var(--font-display); font-size: var(--text-md); font-weight: 600;
  line-height: 1.35; color: var(--color-text);
  min-height: calc(2 * 1.35em);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pcard__name a:hover { color: var(--color-primary); }
.pcard__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 4px; }
.pcard__foot .price { column-gap: 6px; row-gap: 4px; }

/* Compact desktop cards without changing any grid/rail widths or controls.
   The square stage contains the complete image; PDP imagery is unaffected. */
@media (min-width: 901px) {
  .pcard__media .pimg { aspect-ratio: 1 / 1; }
  .pcard__body { padding: 11px 14px 12px; gap: 7px; }
  .pcard__foot { padding-top: 0; }
}

/* ---------- Cards / surfaces ---------- */
.surface { background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-lg); }
.pad { padding: var(--sp-6); }
.pad-lg { padding: var(--sp-8); }

/* ---------- Inputs ---------- */
.field { display: flex; flex-direction: column; gap: 7px; }
.label { font-size: var(--text-sm); font-weight: 600; color: var(--ink-700); }
.input, .select, .textarea {
  width: 100%; padding: 13px 15px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: var(--text-base); color: var(--color-text);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-400); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--color-ring); box-shadow: var(--shadow-focus); }
.textarea { min-height: 110px; resize: vertical; }
.field-error .input { border-color: var(--color-danger); }
.error-text { font-size: var(--text-xs); color: var(--color-danger); }
.hint { font-size: var(--text-xs); color: var(--color-text-muted); }

/* Search box */
.searchbox { position: relative; display: flex; align-items: center; }
.searchbox svg { position: absolute; left: 15px; width: 19px; height: 19px; color: var(--ink-400); pointer-events: none; }
.searchbox input { padding-left: 44px; border-radius: var(--r-pill); background: var(--color-surface-2); border-color: transparent; }
.searchbox input:focus { background: var(--paper); }

/* Quantity stepper */
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--paper); overflow: hidden; }
.qty button { width: 42px; height: 44px; flex-shrink: 0; display: grid; place-items: center; color: var(--color-text); transition: background var(--t) var(--ease), transform var(--t-fast) var(--ease-soft); }
.qty button:hover { background: var(--forest-50); }
.qty button:active { transform: scale(0.88); }
.qty button:disabled { color: var(--line); cursor: not-allowed; }
.qty span { min-width: 40px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; transition: opacity var(--t-fast) var(--ease-soft); }

/* Chips / pills */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--paper);
  font-size: var(--text-sm); font-weight: 500; color: var(--ink-700);
  transition: background var(--t) var(--ease-soft), border-color var(--t) var(--ease-soft), color var(--t) var(--ease-soft), transform var(--t-fast) var(--ease-soft);
  white-space: nowrap;
}
.chip:hover { border-color: var(--forest-300); background: var(--forest-50); transform: translateY(-1px); }
.chip:active { transform: translateY(0) scale(0.97); }
.chip.active { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }

/* ---------- Section header ---------- */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-6); margin-bottom: var(--sp-10); }
.sec-head .sec-title { font-size: var(--text-3xl); }
.sec-head p { color: var(--color-text-muted); max-width: 52ch; margin-top: 8px; }
.sec-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--color-primary); white-space: nowrap; transition: gap var(--t) var(--ease); }
.sec-link:hover { gap: 11px; }
.sec-link svg { width: 17px; height: 17px; }
@media (max-width: 640px) { .sec-head { flex-direction: column; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-8); } .sec-head .sec-title { font-size: var(--text-2xl); } }

/* ---------- Product grid ---------- */
.pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); }
@media (max-width: 1100px) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); } }

/* Horizontal rail (mobile scroll) */
.rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); }
@media (max-width: 900px) {
  .rail {
    grid-auto-flow: column; grid-auto-columns: 74%;
    grid-template-columns: none; overflow-x: auto;
    scroll-snap-type: x mandatory; padding-bottom: 8px;
    margin-inline: calc(-1 * var(--sp-4)); padding-inline: var(--sp-4);
  }
  .rail > * { scroll-snap-align: start; }
}
@media (max-width: 520px) { .rail { grid-auto-columns: 80%; } }

/* ---------- Toast ---------- */
.toast-wrap { position: fixed; z-index: 200; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 10px; max-width: 360px; }
@media (max-width: 640px) { .toast-wrap { left: 12px; right: 12px; bottom: calc(72px + env(safe-area-inset-bottom)); max-width: none; } }
.toast {
  display: flex; align-items: center; gap: 12px;
  background: var(--forest-800); color: var(--forest-50);
  padding: 14px 16px; border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  animation: toastin 0.35s var(--ease);
}
.toast .t-ic { width: 34px; height: 34px; border-radius: 999px; background: var(--forest-600); display: grid; place-items: center; flex-shrink: 0; }
.toast .t-ic svg { width: 18px; height: 18px; color: var(--honey-400); }
.toast .t-body { font-size: var(--text-sm); line-height: 1.35; }
.toast .t-body strong { color: #fff; }
@keyframes toastin { from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: none; } }

/* ---------- Modal ---------- */
.modal-scrim {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(20, 38, 28, 0.42); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: var(--sp-6);
  animation: fade 0.25s var(--ease);
}
.modal {
  background: var(--paper); border-radius: var(--r-xl);
  width: 100%; max-width: 880px; max-height: 90vh; overflow: hidden;
  box-shadow: var(--shadow-lg); position: relative;
  animation: modalin 0.32s var(--ease);
}
.modal__close { position: absolute; top: 14px; right: 14px; z-index: 4; background: var(--paper); box-shadow: var(--shadow-sm); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalin { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ---------- Skeleton / loading ---------- */
.skeleton { background: linear-gradient(100deg, var(--sand) 30%, var(--cream) 50%, var(--sand) 70%); background-size: 200% 100%; animation: shimmer 1.3s infinite; border-radius: var(--r-sm); }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.spinner { width: 22px; height: 22px; border: 2.5px solid var(--forest-100); border-top-color: var(--color-primary); border-radius: 999px; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Empty / error states ---------- */
.state { text-align: center; max-width: 460px; margin: 0 auto; padding: var(--sp-16) var(--sp-4); }
.state .state-ic { width: 76px; height: 76px; margin: 0 auto var(--sp-5); border-radius: 999px; background: var(--forest-50); display: grid; place-items: center; color: var(--forest-400); }
.state .state-ic svg { width: 34px; height: 34px; }
.state h3 { font-size: var(--text-2xl); margin-bottom: 10px; }
.state p { color: var(--color-text-muted); margin-bottom: var(--sp-6); }

/* ---------- Divider ---------- */
.hr { height: 1px; background: var(--line); border: 0; }

/* ---------- Tag list ---------- */
.taglist { display: flex; flex-wrap: wrap; gap: 8px; }

/* ============================================================
   MOBILE TOUCH TARGETS
   Sizes below are hit-area only — nothing changes visually on
   desktop, and the type/iconography stays exactly as designed.
   ============================================================ */
@media (max-width: 900px) {
  /* Wishlist toggle and the quick-add row sat 1-17px under the 44px
     minimum; the compact icon button beside "Quick add" was worst at 27px. */
  .pcard__wish { width: 46px; height: 46px; }
  .pcard__quick .btn-sm { min-height: 44px; }
  .pcard__quick .btn-light { min-width: 46px; }
  .pcard__foot .iconbtn { width: 44px; height: 44px; }

  /* Product name is the primary target in a grid card — give the link a
     comfortable band without changing the type. */
  .pcard__name a { display: block; padding-block: 6px; }

  /* Filters pill and breadcrumb links. */
  .browser__tools .chip { min-height: 44px; }
  .crumbs { gap: 4px; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 40px; padding-inline: 2px; }
}

/* Add-to-cart button on a product card. This was an inline style
   (width/height 40) on the element, which no stylesheet could override —
   so it stayed at 40px on touch devices. As a class it can respond. */
.pcard__add { width: 40px; height: 40px; background: var(--forest-50); }
@media (hover: none), (max-width: 900px) {
  .pcard__add { width: 44px; height: 44px; }
}

/* Safety net for very long product names in narrow grid cards. */
.pcard__name, .pcard__name a { overflow-wrap: anywhere; }

/* ============================================================
   COMMERCE PRICE HIERARCHY
   The price the customer pays leads; the struck MRP supports it and must
   never out-shout it. Colours come from tokens so cart, PDP, checkout and
   invoice all render the same money the same way.
   ============================================================ */
.price .now { color: var(--st-price, var(--price-now-strong)); font-weight: 600; }
.price .was { color: var(--st-mrp, var(--price-mrp)); opacity: 0.9; }
.price .was-lbl { color: var(--price-mrp); opacity: 0.75; font-weight: 600; }
.price .off {
  color: var(--price-save);
  background: rgba(95, 138, 99, 0.10);
  border-radius: var(--r-xs);
  padding: 2px 7px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
/* On the deep-green product hero the same tokens would sink into the
   background, so the sale price lifts to the light end of the scale. */
.pdp__buybox .price .now { color: var(--price-now); }

/* ============================================================
   MOBILE-FIRST PRODUCT CARDS  (<= 768px)  [reconciled onto ec8d78a]
   ec8d78a compacted desktop cards (>=901px square stage) and set the
   sharp 2px card radius; phones kept the tall 4:5 image + full body
   (~461px). This block adds the mobile compaction: the redundant hover
   quick-add pill + quick-view eye are dropped (tap the card for the PDP;
   the foot carries a compact filled add button), the size suffix and
   star row are trimmed so every card shares one structure, and the price
   sits right under the title. The card radius is left at ec8d78a's 2px.
   Desktop (>=901px) and the announcement ticker are untouched.
   ============================================================ */
@media (max-width: 768px) {
  /* Drop the hover quick-add row (pill + eye) — redundant on touch. */
  .pcard__quick { display: none; }
  /* Wishlist: smaller visible circle, ~46px invisible tap area. */
  .pcard__wish { width: 32px; height: 32px; top: 8px; right: 8px; }
  .pcard__wish svg { width: 16px; height: 16px; }
  .pcard__wish::before { content: ''; position: absolute; inset: -7px; border-radius: inherit; }
  /* Badges: compact, corner-tucked; theme-driven colours preserved. */
  .pcard__badges { top: 8px; left: 8px; gap: 5px; }
  .pcard .badge { font-size: 10px; padding: 3px 8px; letter-spacing: 0.04em; }
  /* Body: tight rhythm, single-line meta, 2-line title, price pulled up. */
  .pcard__body { padding: 9px 10px 11px; gap: 3px; }
  .pcard__cat { font-size: 10.5px; letter-spacing: 0.02em; }
  .pcard__cat-form { display: none; }             /* drop the size suffix — no ugly truncation */
  .pcard__name { font-size: 0.875rem; line-height: 1.2; min-height: calc(2 * 1.2em); }
  .pcard__name a { padding-block: 2px; }
  .pcard__body .rating-row { display: none; }      /* uniform heights; rating lives on the PDP */
  .pcard__foot { margin-top: 6px; padding-top: 0; gap: 8px; }
  .pcard__foot .price { row-gap: 0; column-gap: 6px; line-height: 1.15; }
  .pcard__foot .price .now { line-height: 1.1; }
  .pcard__foot .price .was { line-height: 1.05; }
  /* The foot add button is the mobile quick-add: compact, filled, obvious. */
  .pcard__add { width: 40px; height: 40px; background: var(--color-primary); color: var(--color-on-primary); box-shadow: var(--shadow-xs); }
  .pcard__add:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }
  .pcard__add svg { width: 18px; height: 18px; }
  /* Tighter grid gap so the 2-up scans quickly without feeling cramped. */
  .pgrid { gap: 10px; }
}

/* ═══ src/styles/layout.css ═══ */
/* ============================================================
   LAYOUT — header, nav, hero, footer, drawers, tabbar
   ============================================================ */
.page-main { min-height: 60vh; animation: pagein 0.5s var(--ease-luxury); }
/* Opacity only. The 8px rise was a transform on .page-main, and a transformed
   ancestor becomes the containing block for every position:fixed descendant —
   so for the first 500ms of every navigation the PDP purchase bar, the cart
   dock and the toasts all resolved against .page-main instead of the viewport
   and were drawn in the wrong place. The rise was worth less than that cost. */
@keyframes pagein { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 900px) { .page-main { padding-bottom: 76px; } } /* room for tabbar */

/* ---------- Announcement bar ---------- */
.annbar { background: var(--st-annbar-bg, var(--forest-800)); color: var(--st-annbar-text, var(--forest-50)); font-size: var(--text-sm); }
.annbar__in { display: flex; align-items: center; justify-content: space-between; height: 40px; }
.annbar__nav { color: var(--st-annbar-accent, var(--honey-400)); display: inline-flex; }
.annbar__msg { flex: 1; text-align: center; animation: annfade 0.5s var(--ease); font-weight: 500; }
@keyframes annfade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.annbar__links { display: flex; gap: 10px; align-items: center; opacity: 0.85; }
.annbar__links a:hover { color: var(--honey-300); }
@media (max-width: 760px) { .annbar__nav, .annbar__links { display: none; } .annbar__in { justify-content: center; } }

/* ---------- Header ---------- */
.hdr { position: sticky; top: 0; z-index: 90; background: var(--st-header-bg, rgba(251,248,241,0.86)); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: box-shadow var(--t-slow) var(--ease-luxury), border-color var(--t-slow) var(--ease-luxury), background var(--t-slow) var(--ease-luxury); }
.hdr.is-scrolled { box-shadow: var(--shadow-sm); border-color: var(--line-soft); background: rgba(251,248,241,0.96); }
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); height: 76px; transition: height var(--t) var(--ease); }
.hdr__left { display: flex; align-items: center; gap: 8px; }
.hdr__actions { display: flex; align-items: center; gap: 2px; }
.hdr__actions .iconbtn { color: var(--st-header-icon, var(--color-text)); }
@media (max-width: 900px) { .hdr__in { height: 60px; } }

.hdr__nav { display: flex; align-items: center; gap: 4px; }
.hdr__link { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 10px 14px; border-radius: var(--r-pill); font-weight: 500; color: var(--st-header-text, var(--ink-700)); transition: color var(--t) var(--ease-soft), background var(--t) var(--ease-soft); }
.hdr__link:hover, .hdr__link.active { color: var(--color-primary); background: var(--forest-50); }
.hdr__link::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--t) var(--ease-luxury); opacity: 0.55;
}
.hdr__link:hover::after, .hdr__link.active::after { transform: scaleX(1); }
.hdr__navitem { position: relative; }

/* Mega menu */
.mega { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(8px); width: min(760px, 92vw); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: var(--sp-6); opacity: 0; visibility: hidden; transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); }
.has-mega:hover .mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.mega::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.mega__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mega__cell { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--r-md); transition: background var(--t) var(--ease); }
.mega__cell:hover { background: var(--forest-50); }
.mega__name { font-weight: 600; color: var(--color-text); }
.mega__tag { font-size: var(--text-xs); color: var(--color-text-muted); }
.mega__all { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-soft); font-weight: 600; color: var(--color-primary); }
.mega__all:hover { gap: 12px; }

/* ---------- Search overlay ---------- */
.search-overlay { position: fixed; inset: 0; z-index: 120; background: rgba(20,38,28,0.4); backdrop-filter: blur(3px); animation: fade 0.2s var(--ease); display: flex; justify-content: center; align-items: flex-start; padding: 0 var(--sp-4); }
.search-panel { width: 100%; max-width: 680px; margin-top: 8vh; background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: var(--sp-5); animation: modalin 0.3s var(--ease); }
.search-panel__box { align-items: center; }
.search-panel__box .input { padding-right: 46px; }
.search-panel__box .iconbtn { position: absolute; right: 4px; }
.search-results { margin-top: 14px; display: flex; flex-direction: column; gap: 2px; }
.search-result { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: var(--r-md); transition: background var(--t) var(--ease); }
.search-result:hover { background: var(--forest-50); }
.search-thumb { width: 52px; height: 52px; border-radius: var(--r-sm); overflow: hidden; flex-shrink: 0; }
.search-thumb .pimg { aspect-ratio: 1; }
.search-meta { flex: 1; display: flex; flex-direction: column; }
.search-name { font-weight: 600; }
.search-suggest { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------- Mobile drawer ---------- */
.drawer { position: fixed; inset: 0; z-index: 130; pointer-events: none; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(20,38,28,0.4); opacity: 0; transition: opacity var(--t) var(--ease); }
.drawer__panel { position: absolute; top: 0; left: 0; height: 100%; width: min(380px, 86vw); background: var(--paper); box-shadow: var(--shadow-lg); transform: translateX(-100%); transition: transform var(--t-slow) var(--ease); display: flex; flex-direction: column; }
.drawer.open { pointer-events: auto; }
.drawer.open .drawer__scrim { opacity: 1; }
.drawer.open .drawer__panel { transform: none; }
.drawer:not(.open) .drawer__panel { box-shadow: none; } /* parked off-screen, its 48px shadow would show down the left edge of every page */
.drawer__top { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line-soft); }
.drawer__nav { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-3); }
.drawer__link { display: block; padding: 13px 16px; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; border-radius: var(--r-md); }
.drawer__link:hover { background: var(--forest-50); }
.drawer__sec { padding: 18px 16px 8px; font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 700; }
/* Secondary drawer links: smaller and quieter than the shopping routes above
   them, so Company reads as a footnote rather than a third nav tier. */
.drawer__minor { display: block; padding: 12px 16px; min-height: 44px; border-radius: var(--r-md); font-size: var(--text-sm); color: var(--color-text-muted); }
.drawer__minor:hover { color: var(--color-primary); background: var(--forest-50); }
.drawer__cat { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-radius: var(--r-md); color: var(--ink-700); }
.drawer__cat:hover { background: var(--forest-50); color: var(--color-primary); }
.drawer__foot { padding: var(--sp-4) var(--sp-5) calc(var(--sp-5) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-soft); }

/* ---------- Mobile bottom tab bar ---------- */
.tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 95; display: none; grid-template-columns: repeat(5, 1fr); background: rgba(251,248,241,0.95); backdrop-filter: blur(12px); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
@media (max-width: 900px) { .tabbar { display: grid; } }
.tabbar__item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 0 8px; color: var(--ink-500); font-size: 10.5px; font-weight: 600; transition: color var(--t) var(--ease); }
.tabbar__item.active { color: var(--color-primary); }
.tabbar__ic { position: relative; }
.tabbar__badge { position: absolute; top: -6px; right: -10px; min-width: 17px; height: 17px; padding: 0 4px; background: var(--color-accent); color: var(--forest-900); border-radius: 999px; font-size: 10px; display: grid; place-items: center; border: 2px solid var(--color-bg); animation: countpop 0.45s var(--ease-soft); }
.tabbar__dot { position: absolute; top: -2px; right: -3px; width: 8px; height: 8px; background: var(--color-sale); border-radius: 999px; border: 2px solid var(--color-bg); animation: countpop 0.45s var(--ease-soft); }

/* ---------- HERO ---------- */
.hero { position: relative; overflow: hidden; background:
  radial-gradient(120% 80% at 85% 0%, var(--forest-100) 0%, transparent 55%),
  radial-gradient(90% 70% at 0% 100%, var(--honey-100) 0%, transparent 50%),
  var(--ivory);
}
.hero__in { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--sp-16); align-items: center; padding-block: var(--sp-20); }
.hero__title { font-size: clamp(2.6rem, 5.4vw, 4.4rem); line-height: 1.02; letter-spacing: -0.02em; margin-bottom: var(--sp-5); }
.serif-i { font-style: italic; font-weight: 500; color: var(--forest-600); }
.hero__lead { font-size: var(--text-lg); color: var(--ink-700); max-width: 46ch; margin-bottom: var(--sp-8); }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__stats { display: flex; align-items: center; gap: var(--sp-6); margin-top: var(--sp-10); }
.hero__stats strong { display: block; font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-primary); line-height: 1.1; }
.hero__stats span { font-size: var(--text-sm); color: var(--color-text-muted); }
.hero__statdiv { width: 1px; height: 34px; background: var(--line); }

.hero__stage { position: relative; aspect-ratio: 1 / 1; }
.hero__blob { position: absolute; inset: 6% 6% 6% 6%; background: linear-gradient(150deg, var(--forest-600), var(--forest-800)); border-radius: 46% 54% 55% 45% / 52% 44% 56% 48%; opacity: 0.96; animation: blobmorph 14s ease-in-out infinite; }
@keyframes blobmorph { 0%,100% { border-radius: 46% 54% 55% 45% / 52% 44% 56% 48%; } 50% { border-radius: 56% 44% 42% 58% / 44% 56% 44% 56%; } }
.hero__cards { position: absolute; inset: 0; }
.hero__pcard { position: absolute; width: 46%; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--paper); border: 3px solid var(--paper); transition: transform var(--t-slow) var(--ease); }
.hero__pcard .pimg { aspect-ratio: 3 / 4; }
.hero__pcard-tag { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 10px 12px; background: linear-gradient(to top, rgba(20,38,28,0.82), transparent); color: #fff; font-size: var(--text-xs); font-weight: 600; opacity: 0; transition: opacity var(--t) var(--ease); }
.hero__pcard:hover { transform: translateY(-8px) rotate(0deg) !important; }
.hero__pcard:hover .hero__pcard-tag { opacity: 1; }
.hero__pcard--0 { top: 4%; left: 8%; transform: rotate(-5deg); z-index: 3; }
.hero__pcard--1 { top: 30%; right: 4%; transform: rotate(4deg); z-index: 2; width: 42%; }
.hero__pcard--2 { bottom: 4%; left: 22%; transform: rotate(-2deg); z-index: 4; width: 40%; }
.hero__pill { position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; background: var(--paper); border-radius: var(--r-pill); box-shadow: var(--shadow-md); font-size: var(--text-sm); font-weight: 600; color: var(--forest-700); z-index: 5; }
.hero__pill--a { top: 12%; right: 2%; animation: floaty 5s ease-in-out infinite; }
.hero__pill--b { bottom: 16%; left: 0%; animation: floaty 6s ease-in-out infinite reverse; }
.hero__pill svg { color: var(--honey-600); }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

@media (max-width: 960px) {
  .hero__in { grid-template-columns: 1fr; gap: var(--sp-10); padding-block: var(--sp-12); }
  .hero__stage { max-width: 460px; margin: 0 auto; width: 100%; }
}
@media (max-width: 520px) {
  .hero__stats { gap: var(--sp-4); flex-wrap: wrap; }
  .hero__statdiv { display: none; }
}

/* ---------- Trust strip ---------- */
.trustbar { border-block: 1px solid var(--line-soft); background: var(--paper); }
.trustbar__in { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); padding-block: var(--sp-5); }
.trustbar__item { display: flex; align-items: center; gap: 12px; justify-content: center; }
.trustbar__ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-pill); background: var(--forest-50); color: var(--forest-600); flex-shrink: 0; }
.trustbar__item strong { display: block; font-size: var(--text-sm); }
.trustbar__item em { font-style: normal; font-size: var(--text-xs); color: var(--color-text-muted); }
@media (max-width: 760px) {
  .trustbar__in { grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-2); }
  .trustbar__item { justify-content: flex-start; }
}

/* ---------- Footer ---------- */
.ftr { background: var(--st-footer-bg, var(--forest-800)); color: var(--st-footer-text, rgba(251,248,241,0.72)); margin-top: var(--sp-8); }
.ftr__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-10); padding-block: var(--sp-16) var(--sp-12); }
.ftr__brand p { margin: var(--sp-4) 0; max-width: 34ch; font-size: var(--text-sm); line-height: 1.7; }
.ftr__social { display: flex; gap: 6px; }
.ftr__social .iconbtn { color: var(--forest-50); background: rgba(251,248,241,0.08); }
.ftr__social .iconbtn:hover { background: var(--honey-500); color: var(--forest-900); }
.ftr__col h4 { color: #fff; font-family: var(--slv2-sans); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 10px; font-weight: 750; }
.ftr__col a { display: block; padding: 6px 0; font-size: var(--text-sm); transition: color var(--t) var(--ease); }
.ftr__col a:hover { color: var(--st-footer-accent, var(--honey-300)); }
.ftr__trust { display: flex; flex-wrap: wrap; gap: var(--sp-6); padding-block: var(--sp-6); border-top: 1px solid rgba(251,248,241,0.12); }
.ftr__trust span { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); }
.ftr__trust svg { color: var(--st-footer-accent, var(--honey-400)); }
.ftr__bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-5); border-top: 1px solid rgba(251,248,241,0.12); font-size: var(--text-xs); }
.ftr__legal { display: flex; align-items: center; gap: var(--sp-4); }
.ftr__legal a:hover { color: var(--honey-300); }
.ftr__admin-link { margin-left: var(--sp-2); padding-left: var(--sp-4); border-left: 1px solid rgba(251,248,241,0.3); color: rgba(251,248,241,0.78); font-size: 11px; font-weight: 500; letter-spacing: 0.02em; white-space: nowrap; }
.ftr__admin-link:hover { color: var(--honey-300); }
@media (max-width: 900px) {
  /* A tighter, even rhythm on a phone: the columns are short, so 64px of lead
     air and a 32px row gap left the groups floating rather than grouped. */
  .ftr__top { grid-template-columns: 1fr 1fr; gap: var(--sp-7) var(--sp-6); padding-block: var(--sp-10) var(--sp-8); }
  .ftr__brand { grid-column: 1 / -1; margin-bottom: var(--sp-2); }
  .ftr__brand p { margin: var(--sp-3) 0 0; }
  .ftr__bottom { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* The mobile tab bar is fixed at the bottom, so the last ~60px of the page
     sat underneath it — which is exactly where the footer's legal row and the
     Admin Login link live, making Admin unreachable on mobile. Reserve that
     height (plus the safe-area inset) at the end of the footer. */
  .ftr { padding-bottom: calc(60px + env(safe-area-inset-bottom) + var(--sp-4)); }

  /* Give Admin a clear, comfortably tappable presence on mobile instead of a
     tiny inline separator link. Desktop styling is untouched. */
  .ftr__legal { flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); }
  .ftr__admin-link {
    margin-left: 0; padding: 9px 16px;
    border: 1px solid rgba(251,248,241,0.32); border-radius: var(--slv2-r-ui);
    font-size: var(--text-xs); display: inline-flex; align-items: center; min-height: 38px;
  }
}
@media (max-width: 480px) { .ftr__top { grid-template-columns: 1fr; } }

/* ============================================================
   MOBILE PRODUCTION POLISH
   Focus containment for the closed drawer, and comfortable tap
   targets for the small text links that phones have to hit.
   ============================================================ */

/* The closed drawer was aria-hidden but still keyboard-focusable, so tabbing
   through a page walked into an invisible menu. Containment is handled by the
   `inert` attribute in Header.jsx (deterministic, and hides it from assistive
   tech too) — a visibility transition proved unreliable here. */
.drawer[inert] { pointer-events: none; }
.drawer__scrim { transition: opacity var(--t) var(--ease); }

@media (max-width: 900px) {
  /* Footer + inline text links: keep the type size, grow the tap area. */
  .ftr__col a { padding: 11px 0; }
  .ftr__legal a { padding: 8px 0; display: inline-block; }
  .ftr__admin-link { min-height: 44px; display: inline-flex; align-items: center; }

  /* Header logo is a primary target back to home. */
  .logo--img { min-height: 44px; display: inline-flex; align-items: center; }

  /* Small buttons stay visually small but remain comfortably tappable. */
  .btn-sm { min-height: 44px; }
  .sec-link { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
}

/* PDP shows a fixed ~82px buy bar (and hides the tab bar). Reserve that height
   at the end of the footer so its last row never sits under the buy bar. */
@media (max-width: 900px) {
  body:has(.buybar) .ftr { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
}

/* ═══ src/styles/pages.css ═══ */
/* ============================================================
   PAGE STYLES
   ============================================================ */

/* ---------- Shared page head / breadcrumbs ---------- */
.pagehead { padding-block: var(--sp-10) 0; }
.pagehead h1 { font-size: clamp(2rem, 4vw, 2.9rem); margin: 10px 0 8px; }
.crumbs { display: flex; align-items: center; gap: 7px; font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.crumbs a:hover { color: var(--color-primary); }
.crumbs span { color: var(--ink-700); font-weight: 500; }
.inline-link { color: var(--color-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Category tone backgrounds */
.tone-forest { --tone: var(--forest-500); --tone-tint: var(--forest-100); }
.tone-lime { --tone: #5B8C3A; --tone-tint: #EAF3DD; }
.tone-amber { --tone: #C98A32; --tone-tint: #FDF4E4; }
.tone-clay { --tone: #C56A45; --tone-tint: #F7E7DF; }
.tone-moss { --tone: #586E3A; --tone-tint: #E9EEDD; }
.tone-plum { --tone: #7A5476; --tone-tint: #EEE4EC; }
.tone-rose { --tone: #C57389; --tone-tint: #F6E6EA; }
.tone-honey { --tone: #D9A441; --tone-tint: #FBF1DD; }
.tone-teal { --tone: #2E7D74; --tone-tint: #DDEEEB; }
.tone-sky { --tone: #4E82A8; --tone-tint: #E1ECF3; }

/* ---------- Category grid (home) ---------- */
.catgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.catcard { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.catcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.catcard__art { position: relative; overflow: hidden; }
.catcard__art .pimg { aspect-ratio: 16 / 10; background: var(--tone-tint); }
.catcard__art .pimg svg { transition: transform var(--t-slow) var(--ease); }
.catcard:hover .catcard__art .pimg svg { transform: scale(1.05); }
.catcard__body { padding: var(--sp-5) var(--sp-5) var(--sp-6); }
.catcard__body h3 { font-size: var(--text-xl); }
.catcard__body p { color: var(--color-text-muted); font-size: var(--text-sm); margin: 4px 0 12px; }
.catcard__go { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--tone); font-size: var(--text-sm); transition: gap var(--t) var(--ease); }
.catcard:hover .catcard__go { gap: 11px; }
@media (max-width: 900px) { .catgrid { grid-template-columns: 1fr 1fr; gap: var(--sp-3); } }
@media (max-width: 520px) { .catgrid { grid-template-columns: 1fr 1fr; } .catcard__body { padding: var(--sp-4); } .catcard__body h3 { font-size: var(--text-md); } }

/* ---------- Promo split ---------- */
.promo { display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--sp-12); align-items: center; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-xl); overflow: hidden; padding: var(--sp-8); }
.promo--reverse { grid-template-columns: 1.05fr 1fr; }
.promo--reverse .promo__media { order: 2; }
.promo__media { border-radius: var(--r-lg); overflow: hidden; background: var(--cream); }
.promo__media .pimg { aspect-ratio: 4 / 3.4; }
.promo__copy h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 10px 0 14px; }
.promo__copy > p { color: var(--ink-700); max-width: 48ch; margin-bottom: var(--sp-5); }
.promo__list { display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--sp-6); }
.promo__list li { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.promo__list svg { color: var(--color-success); flex-shrink: 0; }
.promo__mini { display: flex; gap: 12px; margin-bottom: var(--sp-6); }
.promo__minicard { flex: 1; max-width: 160px; }
.promo__minicard .pimg { border-radius: var(--r-md); aspect-ratio: 1; margin-bottom: 6px; box-shadow: var(--shadow-xs); }
.promo__minicard span { font-size: var(--text-xs); font-weight: 600; color: var(--ink-700); }
@media (max-width: 860px) {
  .promo, .promo--reverse { grid-template-columns: 1fr; gap: var(--sp-6); padding: var(--sp-5); }
  .promo--reverse .promo__media { order: 0; }
}

/* ---------- CTA banner ---------- */
.cta-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); background: linear-gradient(120deg, var(--forest-700), var(--forest-800)); color: #fff; border-radius: var(--r-xl); padding: var(--sp-12); position: relative; overflow: hidden; }
.cta-banner::after { content: ''; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; background: radial-gradient(circle, rgba(232,176,75,0.28), transparent 70%); }
.cta-banner__text { position: relative; z-index: 1; }
.cta-banner h2 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 8px 0 8px; max-width: 24ch; }
.cta-banner p { color: rgba(251,248,241,0.82); }
.cta-banner .btn { position: relative; z-index: 1; flex-shrink: 0; }
@media (max-width: 760px) { .cta-banner { flex-direction: column; align-items: flex-start; padding: var(--sp-8); } }

/* ---------- Reviews (home) ---------- */
.reviews { background: var(--cream); }
.reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.review { background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: var(--sp-6); display: flex; flex-direction: column; gap: 14px; }
.review blockquote { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.5; color: var(--ink-900); }
.review figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.review__avatar { width: 42px; height: 42px; border-radius: 999px; background: var(--forest-600); color: var(--forest-50); display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; flex-shrink: 0; }
.review figcaption strong { display: block; font-size: var(--text-sm); }
.review figcaption em { font-style: normal; font-size: var(--text-xs); color: var(--color-text-muted); }
@media (max-width: 900px) { .reviews__grid { grid-template-columns: 1fr; } }

/* ---------- Newsletter ---------- */
.nl__card { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--forest-700), var(--forest-900)); border-radius: var(--r-xl); padding: var(--sp-16); }
.nl__deco { position: absolute; right: -30px; top: 50%; transform: translateY(-50%); width: 340px; opacity: 0.9; pointer-events: none; }
.nl__body { position: relative; z-index: 1; max-width: 560px; }
.nl__form { display: flex; gap: 12px; margin-top: var(--sp-6); }
.nl__input { flex: 1; }
.nl__input .input { background: rgba(251,248,241,0.95); border: none; }
.nl__done { display: inline-flex; align-items: center; gap: 12px; margin-top: var(--sp-6); color: #fff; font-weight: 500; background: rgba(251,248,241,0.1); padding: 14px 18px; border-radius: var(--r-md); }
@media (max-width: 640px) { .nl__card { padding: var(--sp-8); } .nl__form { flex-direction: column; } .nl__deco { opacity: 0.4; } }

/* ============================================================
   PRODUCT BROWSER (Shop / Category)
   ============================================================ */
.browser { display: grid; grid-template-columns: 264px 1fr; gap: var(--sp-8); align-items: start; }
.browser__aside { position: sticky; top: calc(76px + var(--sp-4)); }
.filters { background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: var(--sp-5); }
.filters__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line-soft); }
.filters__clear { font-size: var(--text-sm); color: var(--color-sale); font-weight: 600; }
.filters__group { padding-block: var(--sp-4); border-bottom: 1px solid var(--line-soft); }
.filters__group:last-child { border-bottom: none; }
.filters__title { display: block; font-size: var(--text-sm); font-weight: 700; margin-bottom: 12px; }
.filters__opts { display: flex; flex-direction: column; gap: 10px; }
.filters__range-lbl { display: flex; justify-content: space-between; margin-top: 10px; font-size: var(--text-sm); color: var(--color-text-muted); }
.filters__range-lbl strong { color: var(--color-text); }

.check { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--text-base); }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box { width: 20px; height: 20px; border: 1.6px solid var(--line); border-radius: 6px; display: grid; place-items: center; color: transparent; transition: all var(--t) var(--ease); flex-shrink: 0; }
.check input:checked + .check__box { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.check input:focus-visible + .check__box { box-shadow: var(--shadow-focus); }

.range { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 999px; background: var(--line); outline: none; }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 999px; background: var(--color-primary); cursor: pointer; border: 3px solid var(--paper); box-shadow: var(--shadow-sm); }
.range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 999px; background: var(--color-primary); cursor: pointer; border: 3px solid var(--paper); }

.browser__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.browser__count { font-size: var(--text-base); color: var(--color-text-muted); }
.browser__count strong { color: var(--color-text); }
.browser__tools { display: flex; align-items: center; gap: 10px; }
.sortsel { display: inline-flex; align-items: center; gap: 8px; position: relative; font-size: var(--text-sm); color: var(--color-text-muted); }
.sortsel .select { appearance: none; padding: 10px 34px 10px 14px; border-radius: var(--r-pill); background: var(--paper); font-weight: 600; color: var(--color-text); cursor: pointer; }
.sortsel svg { position: absolute; right: 12px; pointer-events: none; color: var(--ink-500); }

/* Mobile filter drawer */
.fdrawer { position: fixed; inset: 0; z-index: 130; pointer-events: none; }
.fdrawer__panel { position: absolute; bottom: 0; left: 0; right: 0; max-height: 88vh; background: var(--paper); border-radius: var(--r-xl) var(--r-xl) 0 0; transform: translateY(100%); transition: transform var(--t-slow) var(--ease); display: flex; flex-direction: column; }
.fdrawer.open { pointer-events: auto; }
.fdrawer.open .drawer__scrim { opacity: 1; }
.fdrawer.open .fdrawer__panel { transform: none; }
.fdrawer__scroll { overflow-y: auto; padding: 0 var(--sp-4); }
.fdrawer__scroll .filters { border: none; padding: 0; }
.fdrawer__foot { display: flex; gap: 12px; padding: var(--sp-4) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-soft); }
.fdrawer__foot .btn:last-child { flex: 1; }

@media (max-width: 900px) { .browser { grid-template-columns: 1fr; } }

/* ---------- Category hero ---------- */
.cathero { background: linear-gradient(160deg, var(--tone-tint), var(--ivory)); border-bottom: 1px solid var(--line-soft); }
.cathero__in { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-8); padding-block: var(--sp-10) var(--sp-12); }
.cathero__title { font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 8px 0 12px; }
.cathero__blurb { color: var(--ink-700); max-width: 52ch; font-size: var(--text-lg); }
.cathero__count { display: inline-block; margin-top: 14px; font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 600; }
.cathero__chips { display: flex; flex-wrap: wrap; gap: 8px; max-width: 380px; justify-content: flex-end; }
@media (max-width: 860px) { .cathero__in { flex-direction: column; align-items: flex-start; gap: var(--sp-5); } .cathero__chips { justify-content: flex-start; } }

/* ============================================================
   PRODUCT DETAIL
   ============================================================ */
.pdp { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--sp-12); padding-block: var(--sp-6) var(--sp-10); align-items: start; }
.pdp__gallery { position: sticky; top: calc(76px + var(--sp-4)); display: grid; grid-template-columns: 84px 1fr; gap: 14px; }
.pdp__gallery--single { grid-template-columns: minmax(0, 1fr); }
.pdp__gallery--single .pdp__main { order: 1; }
.pdp__main { position: relative; order: 2; border-radius: var(--r-xl); overflow: hidden; background: var(--cream); box-shadow: var(--shadow-sm); }
.pdp__main .pimg { aspect-ratio: 1; }
.pdp__frame-fade { animation: pdpFrameIn 550ms var(--ease-luxury); }
@keyframes pdpFrameIn { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: none; } }
.pdp__wish { top: 16px; right: 16px; width: 46px; height: 46px; }
.pdp__thumbs { order: 1; display: flex; flex-direction: column; gap: 10px; }
.pdp__thumb { border: 2px solid var(--line-soft); border-radius: var(--r-md); overflow: hidden; transition: border-color var(--t) var(--ease); }
.pdp__thumb .pimg { aspect-ratio: 1; }
.pdp__thumb.active { border-color: var(--color-primary); }
/* Mobile swipe: keep vertical scrolling, capture horizontal drags for the gallery. */
.pdp__main { touch-action: pan-y; }
/* Swipe dot indicators — shown on mobile only (desktop uses the thumb rail). */
.pdp__dots { display: none; }
@media (max-width: 900px) {
  .pdp__dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 7px; z-index: 2; }
  .pdp__dot { width: 7px; height: 7px; border-radius: 999px; background: rgba(20, 38, 28, 0.28); border: none; padding: 0; cursor: pointer; transition: background var(--t) var(--ease), transform var(--t) var(--ease); }
  .pdp__dot.active { background: var(--color-primary); transform: scale(1.25); }
}

.pdp__title { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin: 8px 0 12px; }
.pdp__rate { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: var(--sp-4); }
.pdp__reviewlink { font-size: var(--text-sm); color: var(--color-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.pdp__lead { font-size: var(--text-lg); color: var(--ink-700); line-height: 1.6; margin-bottom: var(--sp-5); }
.pdp__price { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: var(--sp-5); }
.pdp__block { margin-bottom: var(--sp-5); }
.pdp__stock { margin-bottom: var(--sp-4); }
.pdp__buy { display: flex; gap: 12px; margin-bottom: 10px; }
.pdp__addbtn { transition: transform var(--t) var(--ease-luxury), background var(--t-slow) var(--ease-soft), box-shadow var(--t) var(--ease-luxury); }
.pdp__addbtn.is-added { background: var(--color-success); }
.pdp__buynow { margin-bottom: var(--sp-6); }
.pdp__assure { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: var(--sp-4); background: var(--forest-50); border-radius: var(--r-md); margin-bottom: var(--sp-5); }
.pdp__assure-item { display: flex; align-items: center; gap: 10px; }
.pdp__assure-item svg { color: var(--forest-600); flex-shrink: 0; }
.pdp__assure-item strong { display: block; font-size: var(--text-sm); }
.pdp__assure-item em { font-style: normal; font-size: var(--text-xs); color: var(--color-text-muted); }
.pdp__deliver { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px dashed var(--line); border-radius: var(--r-md); font-size: var(--text-sm); color: var(--ink-700); margin-bottom: var(--sp-6); }
.pdp__deliver svg { color: var(--color-primary); flex-shrink: 0; margin-top: 2px; }

/* Accordion */
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 18px 2px; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; text-align: left; }
.accordion__head svg { color: var(--color-primary); flex-shrink: 0; }
.accordion__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t) var(--ease); }
.accordion__item.open .accordion__body { grid-template-rows: 1fr; }
.accordion__inner { overflow: hidden; padding-bottom: 4px; }
.accordion__item.open .accordion__inner { padding-bottom: 20px; }
.ticklist { display: flex; flex-direction: column; gap: 10px; }
.ticklist li { display: flex; align-items: flex-start; gap: 10px; }
.ticklist svg { color: var(--color-success); flex-shrink: 0; margin-top: 3px; }

@media (max-width: 900px) {
  .pdp { grid-template-columns: 1fr; gap: var(--sp-6); }
  .pdp__gallery { position: static; grid-template-columns: 1fr; }
  .pdp__main { order: 0; }
  .pdp__thumbs { order: 1; flex-direction: row; overflow-x: auto; }
  .pdp__thumb { width: 74px; flex-shrink: 0; }
  .pdp__assure { grid-template-columns: 1fr; gap: 12px; }
}

/* Frequently bought together */
.fbt { display: grid; grid-template-columns: 1fr 280px; gap: var(--sp-8); align-items: center; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-xl); padding: var(--sp-8); }
.fbt__items { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.fbt__item { width: 130px; text-align: center; }
.fbt__item .pimg { border-radius: var(--r-md); aspect-ratio: 1; margin-bottom: 8px; box-shadow: var(--shadow-xs); }
.fbt__name { display: block; font-size: var(--text-sm); font-weight: 600; line-height: 1.3; }
.fbt__price { display: block; font-size: var(--text-sm); color: var(--color-text-muted); }
.fbt__plus { color: var(--ink-400); }
.fbt__buy { text-align: center; padding: var(--sp-5); background: var(--forest-50); border-radius: var(--r-lg); }
.fbt__buy .muted { font-size: var(--text-sm); }
.fbt__total { display: block; font-size: var(--text-2xl); margin: 4px 0 14px; }
@media (max-width: 760px) { .fbt { grid-template-columns: 1fr; } .fbt__items { justify-content: center; } }

/* Reviews block (PDP) */
.reviews-block { display: grid; grid-template-columns: 280px 1fr; gap: var(--sp-10); }
.reviews-block__summary { position: sticky; top: 100px; align-self: start; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: var(--sp-6); text-align: center; }
.reviews-block__score { font-size: 3.4rem; line-height: 1; color: var(--color-primary); }
.reviews-block__bars { margin-top: var(--sp-5); display: flex; flex-direction: column; gap: 8px; }
.rbar { display: flex; align-items: center; gap: 10px; font-size: var(--text-xs); color: var(--color-text-muted); }
.rbar span { width: 22px; text-align: right; }
.rbar__track { flex: 1; height: 7px; background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.rbar__fill { height: 100%; background: var(--color-star); border-radius: 999px; }
.rbar em { width: 32px; text-align: right; font-style: normal; }
.reviews-block__list { display: flex; flex-direction: column; gap: var(--sp-5); }
.rev { border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: var(--sp-5); background: var(--paper); }
.rev__top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.rev__top strong { font-size: var(--text-sm); }
.rev__verified { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); color: var(--color-success); margin-left: 8px; }
.rev__date { margin-left: auto; font-size: var(--text-xs); }
.rev__title { font-size: var(--text-md); margin: 8px 0 6px; }
@media (max-width: 760px) { .reviews-block { grid-template-columns: 1fr; } .reviews-block__summary { position: static; } }

/* Sticky mobile buy bar */
.buybar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 96; display: none; align-items: center; gap: 10px; padding: 12px var(--sp-4) calc(12px + env(safe-area-inset-bottom)); background: rgba(251,248,241,0.96); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
@media (max-width: 900px) { .buybar { display: flex; } .page-main { padding-bottom: 0; } .buybar ~ * {} }
.buybar__price { flex: 1; }
.buybar .btn { flex-shrink: 0; }
@media (max-width: 900px) { body:has(.buybar) .tabbar { display: none; } }

/* ---------- QuickView ---------- */
.qv__grid { display: grid; grid-template-columns: 1fr 1fr; }
.qv__media { background: var(--cream); }
.qv__media .pimg { aspect-ratio: 1; height: 100%; }
.qv__info { padding: var(--sp-8); overflow-y: auto; max-height: 90vh; }
.qv__actions { display: flex; gap: 10px; margin: var(--sp-5) 0; }
.qv__benefits { display: flex; flex-direction: column; gap: 8px; margin: var(--sp-4) 0; }
.qv__benefits li { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); }
.qv__benefits svg { color: var(--color-success); }
@media (max-width: 720px) { .qv__grid { grid-template-columns: 1fr; } .qv__media .pimg { aspect-ratio: 16/10; } .qv__info { padding: var(--sp-5); } }

/* ============================================================
   CART
   ============================================================ */
.cartlayout { display: grid; grid-template-columns: 1fr 380px; gap: var(--sp-8); align-items: start; }
.cartlist { display: flex; flex-direction: column; gap: var(--sp-4); }
.cartrow { display: grid; grid-template-columns: 120px 1fr; gap: var(--sp-4); background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: var(--sp-4); }
.cartrow__media { border-radius: var(--r-md); overflow: hidden; background: var(--cream); }
.cartrow__media .pimg { aspect-ratio: 1; }
.cartrow__top { display: flex; justify-content: space-between; gap: 12px; }
.cartrow__name { display: block; font-size: var(--text-md); font-weight: 600; }
.cartrow__name:hover { color: var(--color-primary); }
.cartrow__variant { display: inline-block; margin-top: 4px; font-size: var(--text-xs); background: var(--forest-50); color: var(--forest-700); padding: 3px 9px; border-radius: 999px; }
.cartrow__form { display: block; font-size: var(--text-xs); margin-top: 4px; }
.cartrow__price { text-align: right; font-family: var(--font-display); font-weight: 600; white-space: nowrap; }
.cartrow__price s { display: block; font-family: var(--font-sans); font-size: var(--text-xs); color: var(--ink-400); font-weight: 400; }
.cartrow__actions { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-4); flex-wrap: wrap; }
.qty--sm button { width: 34px; height: 36px; }
.qty--sm span { min-width: 32px; }
/* Touch devices: keep the compact stepper visually small but give it a
   comfortable ~44px tap target. */
@media (hover: none), (max-width: 640px) {
  .qty--sm button { width: 44px; height: 44px; }
  .qty--sm span { min-width: 36px; }
}
.linkbtn { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); transition: color var(--t) var(--ease); }
.linkbtn:hover { color: var(--color-primary); }
.linkbtn--danger:hover { color: var(--color-sale); }

.summary { position: sticky; top: 100px; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: var(--sp-6); }
.summary h3 { font-size: var(--text-xl); margin-bottom: var(--sp-5); }
.summary__coupon { display: flex; gap: 8px; margin-bottom: 10px; }
.summary__applied { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--color-success); font-weight: 600; margin-bottom: 10px; }
.summary__lines { display: flex; flex-direction: column; gap: 12px; padding-block: var(--sp-5); border-top: 1px solid var(--line-soft); margin-top: var(--sp-4); }
.summary__lines > div { display: flex; justify-content: space-between; font-size: var(--text-base); }
.summary__lines dt { color: var(--color-text-muted); }
.summary__lines dd { font-weight: 600; }
.summary__lines .is-save dd { color: var(--color-success); }
.free { color: var(--color-success); font-weight: 700; }
.summary__ship-hint { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); color: var(--honey-700); background: var(--honey-100); padding: 10px 12px; border-radius: var(--r-sm); margin-bottom: var(--sp-4); }
.summary__total { display: flex; justify-content: space-between; align-items: baseline; padding-block: var(--sp-4); border-top: 2px solid var(--forest-700); margin-bottom: var(--sp-5); }
.summary__total span:first-child { font-weight: 600; font-size: var(--text-lg); }
.summary__total span:last-child { font-size: var(--text-2xl); color: var(--color-primary); }
.summary__continue { display: block; text-align: center; margin-top: 12px; font-size: var(--text-sm); color: var(--color-text-muted); }
.summary__continue:hover { color: var(--color-primary); }
.summary__badges { display: flex; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line-soft); }
.summary__badges span { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); color: var(--color-text-muted); }

.savedlist__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.savedcard { display: grid; grid-template-columns: 88px 1fr; gap: 14px; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 12px; }
.savedcard__media { border-radius: var(--r-sm); overflow: hidden; }
.savedcard__media .pimg { aspect-ratio: 1; }
.savedcard__name { font-weight: 600; font-size: var(--text-sm); }
.savedcard__body { display: flex; flex-direction: column; gap: 6px; }
.savedcard__actions { display: flex; align-items: center; gap: 10px; margin-top: auto; }

@media (max-width: 900px) {
  .cartlayout { grid-template-columns: 1fr; }
  .summary { position: static; }
  .savedlist__grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .cartrow { grid-template-columns: 92px 1fr; }
  .cartrow__actions { gap: 12px; }
}

/* ============================================================
   CHECKOUT
   ============================================================ */
.checkout { background: var(--ivory); min-height: 100vh; }
.checkout__bar { border-bottom: 1px solid var(--line-soft); background: var(--paper); }
.checkout__bar-in { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.checkout__secure { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--color-success); font-weight: 600; }
.checkout__grid { display: grid; grid-template-columns: 1fr 400px; gap: var(--sp-10); padding-block: var(--sp-10); align-items: start; }
.checkout__main { max-width: 640px; }

.stepper { display: flex; align-items: center; gap: 8px; margin-bottom: var(--sp-8); }
.stepper__item { display: flex; align-items: center; gap: 8px; color: var(--ink-500); font-size: var(--text-sm); font-weight: 600; }
.stepper__item:not(:last-child)::after { content: ''; width: 24px; height: 1.5px; background: var(--line); margin-left: 4px; }
.stepper__num { width: 26px; height: 26px; border-radius: 999px; background: var(--sand); display: grid; place-items: center; font-size: var(--text-xs); }
.stepper__item.active { color: var(--color-primary); }
.stepper__item.active .stepper__num { background: var(--color-primary); color: #fff; }
.stepper__item.done .stepper__num { background: var(--color-success); color: #fff; }
.stepper__lbl { display: none; }
@media (min-width: 560px) { .stepper__lbl { display: inline; } }

.cform { background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-4); }
.cform h2 { font-size: var(--text-2xl); }
.cform > .muted { margin-top: -8px; }
.cform .btn { align-self: flex-start; margin-top: 8px; }
.cform__nav { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.cform__nav .btn { margin-top: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 560px) { .grid2, .grid3 { grid-template-columns: 1fr; } .cform { padding: var(--sp-5); } }

.optlist { display: flex; flex-direction: column; gap: 10px; }
.opt { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1.5px solid var(--line); border-radius: var(--r-md); cursor: pointer; transition: border-color var(--t) var(--ease), background var(--t) var(--ease); }
.opt:hover { border-color: var(--forest-300); }
.opt.active { border-color: var(--color-primary); background: var(--forest-50); }
.opt input { position: absolute; opacity: 0; }
.opt__radio { width: 20px; height: 20px; border-radius: 999px; border: 2px solid var(--line); flex-shrink: 0; position: relative; transition: border-color var(--t) var(--ease); }
.opt.active .opt__radio { border-color: var(--color-primary); }
.opt.active .opt__radio::after { content: ''; position: absolute; inset: 3px; border-radius: 999px; background: var(--color-primary); }
.opt__body { flex: 1; }
.opt__body strong { display: block; font-size: var(--text-base); }
.opt__body em { font-style: normal; font-size: var(--text-sm); color: var(--color-text-muted); }
.opt__price { font-weight: 600; }
.opt svg { color: var(--forest-600); }
.paycard { margin-top: 6px; padding: var(--sp-5); background: var(--forest-50); border-radius: var(--r-md); display: flex; flex-direction: column; gap: var(--sp-4); }

/* Payment failure / cancellation states — calm and premium, never alarming */
.paystate { margin-top: var(--sp-4); padding: var(--sp-5); border-radius: var(--r-md); border: 1px solid var(--line); background: var(--paper); }
.paystate strong { display: block; font-family: var(--font-display); font-size: var(--text-md); margin-bottom: 6px; }
.paystate p { font-size: var(--text-sm); margin-bottom: 4px; }
.paystate--error { border-color: var(--clay-500); background: var(--clay-100); }
.paystate--error strong { color: var(--clay-600); }
.paystate--notice { border-color: var(--honey-300); background: var(--honey-100); }
.paystate--notice strong { color: var(--honey-700); }
.paystate__actions { display: flex; gap: 10px; margin-top: var(--sp-4); flex-wrap: wrap; }
/* Inline spinner inside the Pay button */
.btn .spinner { width: 16px; height: 16px; border-width: 2px; border-color: rgba(255,255,255,0.35); border-top-color: currentColor; }

.checkout__aside .summary { top: var(--sp-6); }
.checkout__items { display: flex; flex-direction: column; gap: 14px; margin-bottom: var(--sp-4); max-height: 320px; overflow-y: auto; }
.checkout__item { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; }
.checkout__thumb { position: relative; width: 52px; height: 52px; border-radius: var(--r-sm); overflow: hidden; }
.checkout__thumb .pimg { aspect-ratio: 1; }
.checkout__qty { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; background: var(--forest-700); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; display: grid; place-items: center; font-style: normal; border: 2px solid var(--paper); }
.checkout__meta strong { display: block; font-size: var(--text-sm); line-height: 1.3; }
.checkout__meta em { font-style: normal; font-size: var(--text-xs); color: var(--color-text-muted); }
.checkout__lp { font-weight: 600; font-size: var(--text-sm); white-space: nowrap; }
@media (max-width: 900px) { .checkout__grid { grid-template-columns: 1fr; } .checkout__aside { order: -1; } .checkout__aside .summary { position: static; } }

/* Order confirmation */
.confirm { max-width: 560px; margin: 0 auto; text-align: center; padding-block: var(--sp-10); }

/* ---- Order-confirmed celebration ----------------------------------
   Timeline (all CSS, transform/opacity only):
     0ms   container settles in
     100ms success icon scales up
     ~250ms checkmark finishes drawing
     300ms glow + particle burst
     400ms "Order confirmed"
     550ms headline / supporting copy
     700ms action buttons
     ~1.9s celebration finishes and particle DOM unmounts
   The container's own entrance is defined on .confirm__enter below. */
/* SAFETY: the confirmation content — including the CTAs — is fully
   visible and interactive by DEFAULT. The entrance animations only apply
   while the parent carries .confirm--celebrate, which is added on mount
   and removed once the sequence finishes. So if animations are disabled,
   stalled or unsupported for any reason, the user still sees a complete,
   clickable confirmation instead of a blank screen. Order confirmation is
   too important to gate behind an animation completing. */
.confirm--celebrate.confirm__enter { animation: confirmIn 760ms var(--ease-luxury) both; }
@keyframes confirmIn {
  from { opacity: 0; transform: translateY(20px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

/* Staggered reveal for the confirmation content; each element sets --d */
.confirm--celebrate .confirm__reveal { animation: confirmReveal 700ms var(--ease-luxury) both; animation-delay: var(--d, 0ms); }
@keyframes confirmReveal {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.confirm--celebrate .confirm__reveal--btn { animation-name: confirmRevealBtn; }
@keyframes confirmRevealBtn {
  from { opacity: 0; transform: translateY(15px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.confirm__celebrate { position: relative; width: 84px; height: 84px; margin: 0 auto var(--sp-5); }

.confirm__tick {
  position: relative; z-index: 2;
  width: 84px; height: 84px; border-radius: 999px;
  background: var(--color-success); color: #fff;
  display: grid; place-items: center;
}
.confirm--celebrate .confirm__tick { animation: tickIn 620ms var(--ease-luxury) 100ms both; }
/* 0.5 -> 1.08 -> 1: a soft settle, never an excessive bounce */
@keyframes tickIn {
  0%   { opacity: 0; transform: scale(0.5); }
  55%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

/* Checkmark draws itself (default state: already drawn) */
.confirm__check-path { stroke-dasharray: 44; stroke-dashoffset: 0; }
.confirm--celebrate .confirm__check-path { animation: checkDraw 420ms var(--ease-luxury) 180ms both; }
@keyframes checkDraw { from { stroke-dashoffset: 44; } to { stroke-dashoffset: 0; } }

/* Ring expands and settles around the icon (default: settled) */
.confirm__ring {
  position: absolute; inset: -6px; z-index: 1; border-radius: 999px;
  border: 2px solid var(--forest-300); opacity: 0.45;
}
.confirm--celebrate .confirm__ring { animation: ringIn 760ms var(--ease-luxury) 140ms both; }
@keyframes ringIn {
  0%   { opacity: 0; transform: scale(0.8); }
  60%  { opacity: 0.85; transform: scale(1.05); }
  100% { opacity: 0.45; transform: scale(1); }
}

/* Warm radial glow — subtle, expands then fades away entirely */
.confirm__glow {
  position: absolute; inset: -46px; z-index: 0; border-radius: 999px; pointer-events: none;
  background: radial-gradient(circle, rgba(232,176,75,0.42) 0%, rgba(232,176,75,0.16) 42%, rgba(232,176,75,0) 70%);
  opacity: 0; /* purely decorative: ends invisible, so default is invisible */
}
.confirm--celebrate .confirm__glow { animation: glowPulse 1500ms var(--ease-luxury) 300ms both; }
@keyframes glowPulse {
  0%   { opacity: 0; transform: scale(0.7); }
  35%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.15); }
}

/* ---- Particles ---- */
.confirm__particles { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.confirm__p {
  position: absolute; top: 50%; left: 50%; width: var(--sz); height: var(--sz);
  margin: calc(var(--sz) / -2) 0 0 calc(var(--sz) / -2);
  opacity: 0; will-change: transform, opacity;
  animation: particleBurst 1200ms var(--ease-luxury) both;
}
.confirm__p--dot { border-radius: 999px; }
.confirm__p--leaf { border-radius: 60% 0 60% 0; }
.confirm__p--spark { border-radius: 1px; transform: rotate(45deg); }
.confirm__p.tone-gold { background: var(--honey-500); }
.confirm__p.tone-gold-soft { background: var(--honey-300); }
.confirm__p.tone-green { background: var(--forest-400); }
.confirm__p.tone-green-soft { background: var(--forest-300); }
.confirm__p.tone-cream { background: var(--cream); }

@keyframes particleBurst {
  0%   { opacity: 0; transform: translate(0, 0) scale(0); }
  22%  { opacity: 1; transform: translate(calc(var(--tx) * 0.5), calc(var(--ty) * 0.5)) scale(1); }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0.6); }
}

/* Ambient upward drift, finishes and stops (no infinite loop) */
.confirm__p--drift { animation: particleDrift 1500ms var(--ease-luxury) both; }
@keyframes particleDrift {
  0%   { opacity: 0; transform: translate(var(--tx), 10px) scale(0.6); }
  30%  { opacity: 0.9; transform: translate(var(--tx), -18px) scale(1); }
  100% { opacity: 0; transform: translate(var(--tx), -64px) scale(0.7); }
}

@media (max-width: 640px) {
  .confirm__glow { inset: -30px; }
}
@keyframes pop { 0% { transform: scale(0); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.confirm h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 10px 0; }
.confirm__card { text-align: left; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: var(--sp-5); margin: var(--sp-6) 0; }
.confirm__row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.confirm__row:last-child { border-bottom: none; }
.confirm__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   ACCOUNT + AUTH
   ============================================================ */
.auth { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 116px); }
.auth__art { background: linear-gradient(150deg, var(--forest-700), var(--forest-900)); display: grid; place-items: center; padding: var(--sp-16); position: relative; overflow: hidden; }
.auth__art::after { content: ''; position: absolute; right: -80px; bottom: -80px; width: 320px; height: 320px; background: radial-gradient(circle, rgba(232,176,75,0.22), transparent 70%); }
.auth__art-in { max-width: 400px; position: relative; z-index: 1; }
.auth__perks { margin-top: var(--sp-6); display: flex; flex-direction: column; gap: 12px; }
.auth__perks li { display: flex; align-items: center; gap: 10px; color: rgba(251,248,241,0.9); }
.auth__perks svg { color: var(--honey-400); }
.auth__form { display: grid; place-items: center; padding: var(--sp-12) var(--sp-6); }
.auth__card { width: 100%; max-width: 420px; }
.auth__tabs { display: flex; gap: 4px; padding: 5px; background: var(--cream); border-radius: var(--r-pill); margin-bottom: var(--sp-6); }
.auth__tabs button { flex: 1; padding: 11px; border-radius: var(--r-pill); font-weight: 600; color: var(--color-text-muted); transition: all var(--t) var(--ease); }
.auth__tabs button.active { background: var(--paper); color: var(--color-primary); box-shadow: var(--shadow-xs); }
.auth__card form { display: flex; flex-direction: column; gap: var(--sp-4); }
.auth__forgot { font-size: var(--text-sm); color: var(--color-primary); font-weight: 600; align-self: flex-end; margin-top: -8px; }
.auth__or { display: flex; align-items: center; gap: 14px; margin: var(--sp-5) 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.auth__or::before, .auth__or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.auth__social { display: flex; flex-direction: column; gap: 10px; }

/* Social sign-in button. Neutral white surface with a real border, so the
   provider mark carries the recognition rather than a coloured fill — what
   Google's brand guidance asks for, and it keeps the card calm next to the
   primary CTA. */
.btn-social {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 48px; padding: 0 18px;
  background: #fff; color: var(--color-text);
  border: 1px solid var(--line); border-radius: var(--r-md);
  font-weight: 600; font-size: var(--text-sm); line-height: 1;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.btn-social:hover:not(:disabled) {
  border-color: var(--forest-300);
  box-shadow: 0 2px 10px rgba(30, 58, 47, .09);
  transform: translateY(-1px);
}
.btn-social:active:not(:disabled) { transform: translateY(0); box-shadow: none; }
.btn-social:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.btn-social:disabled { opacity: .55; cursor: not-allowed; }
.btn-social__mark { flex: 0 0 auto; display: block; }

.auth__guest { text-align: center; margin-top: var(--sp-5); }
.auth__guest a { font-weight: 600; color: var(--color-text-muted); }
.auth__guest a:hover { color: var(--color-primary); }
@media (max-width: 860px) { .auth { grid-template-columns: 1fr; } .auth__art { display: none; } }

.acct { display: grid; grid-template-columns: 240px 1fr; gap: var(--sp-8); align-items: start; }
.acct__nav { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 4px; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: var(--sp-3); }
.acct__navitem { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); font-weight: 500; color: var(--ink-700); text-align: left; transition: background var(--t) var(--ease), color var(--t) var(--ease); }
.acct__navitem:hover { background: var(--forest-50); }
.acct__navitem.active { background: var(--forest-700); color: var(--forest-50); }
.acct__badge { margin-left: auto; min-width: 20px; height: 20px; background: var(--honey-500); color: var(--forest-900); border-radius: 999px; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.acct__navitem.active .acct__badge { background: var(--honey-400); }
.acct__logout { margin-top: 6px; border-top: 1px solid var(--line-soft); border-radius: 0 0 var(--r-md) var(--r-md); color: var(--color-sale); }
.acct__logout:hover { background: var(--clay-100); }
.acct__h { font-size: var(--text-2xl); margin-bottom: var(--sp-5); }
.acct__panelhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-5); }
@media (max-width: 860px) {
  .acct { grid-template-columns: 1fr; }
  .acct__nav { position: static; flex-direction: row; overflow-x: auto; }
  .acct__navitem { white-space: nowrap; }
  .acct__logout { border-top: none; }
}

.orderlist { display: flex; flex-direction: column; gap: var(--sp-4); }
.ordercard { background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: var(--sp-5); }
.ordercard__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line-soft); }
.ordercard__body { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.ordercard__thumbs { display: flex; }
.ordercard__thumb { width: 56px; height: 56px; border-radius: var(--r-sm); overflow: hidden; border: 2px solid var(--paper); margin-left: -12px; box-shadow: var(--shadow-xs); }
.ordercard__thumb:first-child { margin-left: 0; }
.ordercard__thumb .pimg { aspect-ratio: 1; }
.ordercard__meta { display: flex; flex-direction: column; }
.ordercard__meta strong { font-family: var(--font-display); font-size: var(--text-lg); }
.ordercard__actions { margin-left: auto; display: flex; gap: 8px; }
.track { display: flex; justify-content: space-between; margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--line-soft); position: relative; }
.track::before { content: ''; position: absolute; top: calc(var(--sp-5) + 11px); left: 11px; right: 11px; height: 2px; background: var(--line); }
.track__step { display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; z-index: 1; flex: 1; }
.track__dot { width: 24px; height: 24px; border-radius: 999px; background: var(--paper); border: 2px solid var(--line); display: grid; place-items: center; color: #fff; }
.track__step.done .track__dot { background: var(--color-success); border-color: var(--color-success); }
.track__lbl { font-size: var(--text-xs); text-align: center; color: var(--color-text-muted); }
.track__step.done .track__lbl { color: var(--color-text); font-weight: 600; }
@media (max-width: 560px) { .ordercard__actions { margin-left: 0; width: 100%; } .track__lbl { font-size: 10px; } }

.acct__wishgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.acct__wishcard { background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 12px; transition: box-shadow var(--t) var(--ease); }
.acct__wishcard:hover { box-shadow: var(--shadow-md); }
.acct__wishcard .pimg { border-radius: var(--r-sm); aspect-ratio: 1; margin-bottom: 10px; }
.acct__wishname { display: block; font-weight: 600; font-size: var(--text-sm); margin-bottom: 4px; }
@media (max-width: 640px) { .acct__wishgrid { grid-template-columns: 1fr 1fr; } }

.addrgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.addrcard { position: relative; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: var(--sp-5); }
.addrcard.default { border-color: var(--forest-300); }
.addrcard .badge { position: absolute; top: var(--sp-4); right: var(--sp-4); }
.addrcard strong { display: block; margin-bottom: 8px; }
.addrcard p { font-size: var(--text-sm); line-height: 1.7; margin-bottom: 14px; }
.addrcard__actions { display: flex; gap: var(--sp-4); }
@media (max-width: 640px) { .addrgrid { grid-template-columns: 1fr; } }

.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.toggle-row strong { display: block; font-size: var(--text-base); }
.toggle-row em { font-style: normal; font-size: var(--text-sm); color: var(--color-text-muted); }
.switch { width: 46px; height: 26px; border-radius: 999px; background: var(--line); position: relative; transition: background var(--t) var(--ease); flex-shrink: 0; cursor: pointer; }
.switch i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-xs); transition: transform var(--t) var(--ease); }
.switch.on { background: var(--color-success); }
.switch.on i { transform: translateX(20px); }

.wishhead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }

/* Auth helper links were 18-21px tall on phones — comfortable tap bands,
   same type and alignment. */
@media (max-width: 900px) {
  .auth__forgot { min-height: 44px; display: inline-flex; align-items: center; margin-top: -14px; }
  .auth__guest a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 8px; }
}

/* The price slider's hit area was the height of its 5px track, which is
   effectively undraggable on a touch screen. Padding (with the background
   clipped to the content box) keeps the thin track look while giving the
   control a full-height touch band. */
.range {
  box-sizing: content-box;
  padding-block: 19px;
  background-clip: content-box;
}
@media (max-width: 900px) {
  .ftr__legal a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 2px; }
}

/* Remaining critical-flow polish (cart / checkout).
   - Struck-through MRP in the cart line was ink-400 (3.68:1); ink-500 clears AA.
   - "Save for later" / "Remove" / "Continue shopping" were 21-23px tall on
     phones — comfortable tap bands without changing the type or alignment. */
.cartrow__price s { color: var(--ink-500); }
@media (max-width: 900px) {
  .linkbtn { min-height: 44px; }
  .summary__continue { min-height: 44px; display: flex; align-items: center; justify-content: center; }
}

/* ============================================================
   VARIANT (PACK SIZE) SELECTOR
   A size is a purchase decision, not a tag: each option shows what that
   pack actually costs so the customer compares price per size directly.
   ============================================================ */
.variantlist { display: flex; flex-wrap: wrap; gap: 10px; }
.variantchip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  min-width: 104px; padding: 10px 14px;
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  background: var(--paper); cursor: pointer; text-align: left;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease),
              transform var(--t-fast) var(--ease-soft), box-shadow var(--t) var(--ease);
}
.variantchip:hover:not(:disabled) { border-color: var(--forest-300); transform: translateY(-1px); }
.variantchip:active:not(:disabled) { transform: translateY(0) scale(0.985); }
.variantchip.active {
  border-color: var(--color-primary);
  background: var(--forest-50);
  box-shadow: 0 0 0 1px var(--color-primary) inset;
}
.variantchip__label { font-weight: 600; font-size: var(--text-sm); color: var(--color-text); }
.variantchip__price {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: var(--text-sm); font-weight: 700; color: var(--price-now-strong);
}
.variantchip__price s { font-weight: 500; font-size: 0.85em; color: var(--price-mrp); opacity: 0.85; }
.variantchip.is-out { opacity: 0.5; cursor: not-allowed; }
.variantchip__out { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--price-mrp); text-transform: uppercase; }
@media (max-width: 900px) {
  .variantchip { min-height: 56px; flex: 1 1 calc(50% - 5px); }
}

/* ============================================================
   DETAILED PRICE SUMMARY
   Financial transparency without visual noise: quiet label/value rows,
   savings in the price-green, one strong total. Tabular figures so the
   rupee columns align down the right edge.
   ============================================================ */
.psum { display: flex; flex-direction: column; gap: 9px; }
.psum--compact { gap: 7px; }
.psum__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: var(--text-sm); }
.psum__label { color: var(--color-text-muted); }
.psum__note { color: var(--ink-400); font-weight: 500; }
.psum__value { font-variant-numeric: tabular-nums; color: var(--color-text); font-weight: 500; white-space: nowrap; }
.psum__row--save .psum__label,
.psum__row--save .psum__value { color: var(--price-save); font-weight: 600; }
.psum__row.is-strong { font-size: var(--text-md); padding-top: 2px; }
.psum__row.is-strong .psum__label { color: var(--color-text); font-family: var(--font-display); font-weight: 600; }
.psum__row.is-strong .psum__value { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--color-text); }
.psum__rule { height: 1px; background: var(--line); margin: 4px 0 2px; }
.psum__hint { font-size: var(--text-xs); color: var(--ink-500); margin-top: 2px; }
.psum__save {
  margin-top: 6px; padding: 8px 12px; border-radius: var(--r-sm);
  background: rgba(95, 138, 99, 0.10); color: var(--price-save);
  font-size: var(--text-sm); font-weight: 600;
}
@media (max-width: 900px) {
  .psum__row { font-size: var(--text-base); }
  .psum__row.is-strong .psum__value { font-size: 1.35rem; }
}
.cartrow__unit { display: block; font-size: var(--text-xs); margin-top: 2px; }
.cartrow__unit s { color: var(--price-mrp); margin-left: 6px; opacity: 0.8; }
.cartrow__price s { color: var(--price-mrp); }
.checkout__unit { display: block; font-size: var(--text-xs); color: var(--ink-500); font-style: normal; margin-top: 1px; }

/* Line prices use the same money language as everywhere else: the amount
   charged in price-green, the struck MRP in the muted red. */
.cartrow__price { color: var(--price-now-strong); }
.checkout__lp { color: var(--price-now-strong); }

/* ============================================================
   CUSTOMER INVOICE / RECEIPT
   Reads as a real tax invoice: quiet paper surface, one strong total,
   money in the same green/red language as the rest of the store.
   ============================================================ */
.inv-page { background: var(--ivory); min-height: 100vh; padding-bottom: var(--sp-12); }

.inv__toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-5); flex-wrap: wrap; }
.inv__back { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--color-text-muted); }
.inv__back:hover { color: var(--color-primary); }
.inv__toolbar-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.inv {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-8);
  max-width: 860px;
}
.inv__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; padding-bottom: var(--sp-6); border-bottom: 1px solid var(--line-soft); }
.inv__logo { height: 46px; width: auto; display: block; }
.inv__brand-sub { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-text-muted); margin-top: 6px; }
.inv__ident { text-align: right; }
.inv__title { font-size: var(--text-2xl); margin-bottom: 8px; }
.inv__idlist { display: flex; flex-direction: column; gap: 3px; }
.inv__idlist > div { display: flex; gap: 10px; justify-content: flex-end; font-size: var(--text-sm); }
.inv__idlist dt { color: var(--color-text-muted); }
.inv__idlist dd { font-weight: 600; font-variant-numeric: tabular-nums; }
.inv__idlist--wide > div { justify-content: flex-start; gap: 14px; }
.inv__idlist--wide dt { min-width: 132px; }
.inv__mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; word-break: break-all; }

.inv__parties { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); padding-block: var(--sp-6); border-bottom: 1px solid var(--line-soft); }
.inv__party-h { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 700; margin-bottom: 8px; }
.inv__party p { font-size: var(--text-sm); line-height: 1.55; }
.inv__contact { color: var(--color-text-muted); }

.inv__items { padding-block: var(--sp-6); }
.inv__table { width: 100%; border-collapse: collapse; }
.inv__table th { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); text-align: left; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-weight: 700; }
.inv__table th.num, .inv__table td.num { text-align: right; }
.inv__table td { padding-block: 12px; border-bottom: 1px solid var(--line-soft); font-size: var(--text-sm); vertical-align: top; font-variant-numeric: tabular-nums; }
.inv__item-name { display: block; font-weight: 600; }
.inv__item-variant { display: inline-block; margin-top: 3px; margin-right: 8px; font-size: var(--text-xs); font-weight: 600; color: var(--color-primary); background: var(--forest-50); border-radius: var(--r-xs); padding: 2px 8px; }
.inv__item-sku { display: inline-block; margin-top: 3px; margin-right: 8px; font-size: 11px; color: var(--ink-500); }
.inv__table s { color: var(--price-mrp); }
.inv__price { color: var(--price-now-strong); font-weight: 600; }
.inv__amount { font-weight: 700; }

.inv__totals { display: flex; justify-content: flex-end; padding-block: var(--sp-5); }
.inv__totals-inner { width: min(360px, 100%); display: flex; flex-direction: column; gap: 8px; }
.inv__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: var(--text-sm); }
.inv__row-label { color: var(--color-text-muted); }
.inv__row-label em { font-style: normal; color: var(--ink-400); }
.inv__row-value { font-variant-numeric: tabular-nums; font-weight: 500; }
.inv__row--save .inv__row-label, .inv__row--save .inv__row-value { color: var(--price-save); font-weight: 600; }
.inv__row.is-strong .inv__row-label { font-family: var(--font-display); font-weight: 600; color: var(--color-text); font-size: var(--text-md); }
.inv__row.is-strong .inv__row-value { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; }
.inv__rule { height: 1px; background: var(--line); margin: 4px 0 2px; }
.inv__note { font-size: var(--text-xs); color: var(--ink-500); }
.inv__save { margin-top: 6px; padding: 8px 12px; border-radius: var(--r-sm); background: rgba(95,138,99,0.10); color: var(--price-save); font-size: var(--text-sm); font-weight: 600; text-align: center; }

.inv__payment { padding-block: var(--sp-6); border-top: 1px solid var(--line-soft); }
.inv__paid { color: var(--price-save); font-weight: 700; }
.inv__due { color: var(--clay-600); font-weight: 700; }
.inv__foot { padding-top: var(--sp-6); border-top: 1px solid var(--line-soft); text-align: center; font-size: var(--text-sm); }
.inv__empty-h { font-size: var(--text-xl); margin-bottom: 8px; }

@media (max-width: 760px) {
  .inv { padding: var(--sp-5); border-radius: var(--r-md); }
  .inv__head { flex-direction: column; }
  .inv__ident { text-align: left; }
  .inv__idlist > div { justify-content: flex-start; }
  .inv__parties { grid-template-columns: 1fr; gap: var(--sp-5); }
  .inv__totals-inner { width: 100%; }
  /* The MRP column is the first thing to sacrifice on a narrow screen —
     the struck price still appears under the item name context. */
  .inv__table th:nth-child(2), .inv__table td:nth-child(2) { display: none; }
  .inv__toolbar-actions { width: 100%; }
  .inv__toolbar-actions .btn { flex: 1; min-height: 44px; }
}

/* Printed / saved-as-PDF invoice: drop the app chrome, keep the document. */
@media print {
  .no-print, .hdr, .annbar, .ftr, .tabbar, .drawer { display: none !important; }
  .inv-page { background: #fff; padding: 0; }
  .inv { border: none; box-shadow: none; max-width: none; padding: 0; }
  .inv__item-variant { background: none; padding: 0; color: var(--color-text); }
  a[href]::after { content: none !important; }
}
/* Order card actions wrap to two comfortable buttons on a phone. */
.ordercard__actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .ordercard__actions { width: 100%; }
  .ordercard__actions .btn { flex: 1 1 calc(50% - 4px); min-height: 44px; justify-content: center; }
}

/* ============================================================
   MOBILE-FIRST PAGE POLISH  (Shop / Cart / Checkout) — reconciled
   ============================================================ */
@media (max-width: 900px) {
  .cartrow__media { align-self: start; }   /* square thumbnail, no stretched blank space */
  .browser__bar { margin-bottom: var(--sp-4); gap: 8px 12px; }
  .browser__count { font-size: var(--text-sm); }
  .browser__tools { gap: 8px; }
}
@media (max-width: 640px) {
  .input, .select, .textarea { font-size: 16px; }   /* stop iOS focus auto-zoom */
  .summary__total span:last-child { font-size: var(--text-xl); }
}

/* Cart: an item that cannot be paid for blocks checkout and says why. */
.summary__blocked {
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--color-sale, #A94F4F);
  border-radius: var(--r-xs, 4px);
  background: color-mix(in srgb, var(--color-sale, #A94F4F) 7%, transparent);
  color: var(--color-sale, #A94F4F);
  font-size: 13px;
  line-height: 1.5;
}

/* ============================================================================
   ACCOUNT + WISHLIST — alignment with the V2 storefront system
   ----------------------------------------------------------------------------
   These two surfaces were the last customer pages still wearing the original
   design language: pill buttons, 14-20px card radii and a serif page heading,
   sitting one click away from a Shop and a Homepage that are sharp, 2px and
   sans. Nothing below is a new design — every value is an existing --slv2-*
   token, pulled onto the pages that had not caught up.

   Deliberately scoped to .auth / .acct / the wishlist head. Cart, Checkout,
   the Creator Program and Admin share .btn / .input / .state and are NOT part
   of this pass, so their appearance is unchanged.
   ========================================================================== */

/* -- page heading: the same Inter scale as .v2-shop__title and .hd-title --- */
.pagehead .crumbs { font-size: 11px; letter-spacing: .03em; color: var(--slv2-ink-4); margin-bottom: 6px; }
.pagehead .crumbs span { color: var(--slv2-ink-2); font-weight: 600; }
.wishhead h1.serif {
  font-family: var(--slv2-sans);
  font-size: 26px; font-weight: 700; letter-spacing: -.022em; line-height: 1.15;
  margin: 0; color: var(--slv2-ink);
}
.wishhead .muted { margin: 6px 0 0; font-size: 13px; color: var(--slv2-ink-3); }
@media (min-width: 768px) { .wishhead h1.serif { font-size: 34px; } }

/* -- controls: 2px geometry, one control height, one focus ring ------------ */
.auth .btn, .acct .btn, .wishhead .btn {
  border-radius: var(--slv2-r-ui);
  padding: 0 22px; height: 44px; font-size: 13px; letter-spacing: .005em;
  /* the legacy lift-and-shadow hover reads as a different interaction model
     from the flat background change every V2 control uses */
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.auth .btn:hover, .acct .btn:hover, .wishhead .btn:hover { transform: none; box-shadow: none; }
.auth .btn:active, .acct .btn:active, .wishhead .btn:active { transform: scale(.985); }
.auth .btn-sm, .acct .btn-sm { height: 36px; padding: 0 16px; font-size: 12px; }
.auth .input, .auth .select, .acct .input, .acct .select {
  border-radius: var(--slv2-r-ui); border-color: var(--slv2-line);
  min-height: 44px; padding: 11px 14px; font-size: 14px;
}
.auth .textarea, .acct .textarea { border-radius: var(--slv2-r-ui); border-color: var(--slv2-line); }
.auth .input:focus, .auth .select:focus, .acct .input:focus, .acct .select:focus,
.acct .textarea:focus, .auth .textarea:focus {
  border-color: var(--slv2-f500); box-shadow: none;
  outline: 2px solid var(--slv2-f500); outline-offset: -1px;
}
.auth :is(button, a):focus-visible, .acct :is(button, a):focus-visible {
  outline: 2px solid var(--slv2-f500); outline-offset: 3px; border-radius: var(--slv2-r-ui);
}

/* -- sign-in / create-account switch: a segmented control, not a pill ------ */
.auth__tabs {
  padding: 0; gap: 0; background: none; border-radius: 0;
  border-bottom: 1px solid var(--slv2-line); margin-bottom: var(--sp-5);
}
.auth__tabs button {
  border-radius: 0; padding: 12px 4px; min-height: 44px;
  font-size: 13px; letter-spacing: .01em;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .18s ease, border-color .18s ease;
}
.auth__tabs button.active {
  background: none; box-shadow: none;
  color: var(--slv2-ink); border-bottom-color: var(--slv2-accent-primary);
}

/* -- the form is top-aligned on a phone: vertical centring in a 100vh grid
      pushed the first field a long way down an otherwise empty screen ------ */
.auth__form { padding: var(--sp-8) var(--sp-5) var(--sp-10); }
@media (max-width: 860px) {
  .auth { min-height: 0; }
  .auth__form { align-content: start; padding-top: var(--sp-6); }
}

/* -- account shell: sharp panels instead of 20px cards -------------------- */
.acct__nav { border-radius: var(--slv2-r-ui); border-color: var(--slv2-line); }
.acct__navitem { border-radius: var(--slv2-r-ui); font-size: 13.5px; }
.acct__logout { border-radius: 0; }
.acct__h {
  font-family: var(--slv2-sans); font-size: 20px; font-weight: 700;
  letter-spacing: -.018em; color: var(--slv2-ink);
}
.acct__wishcard { border-radius: var(--slv2-r-ui); border-color: var(--slv2-line); }
.acct__wishcard:hover { box-shadow: none; border-color: var(--slv2-ink-4); }
.acct__wishcard .pimg { border-radius: var(--slv2-r-ui); }

/* -- empty states on these two pages: no 76px circle, no pill CTA --------- */
.acct .state, .page-main > .container > .state {
  padding-block: var(--sp-10);
}
.acct .state .state-ic, .page-main > .container > .state .state-ic {
  width: 52px; height: 52px; border-radius: var(--slv2-r-ui);
  background: var(--slv2-f50); color: var(--slv2-f500); margin-bottom: var(--sp-4);
}
.acct .state .state-ic svg, .page-main > .container > .state .state-ic svg { width: 24px; height: 24px; }
.acct .state h3, .page-main > .container > .state h3 {
  font-family: var(--slv2-sans); font-size: 19px; font-weight: 700; letter-spacing: -.015em;
}
.page-main > .container > .state .btn {
  border-radius: var(--slv2-r-ui); height: 44px; padding: 0 22px; font-size: 13px;
}
.page-main > .container > .state .btn:hover { transform: none; box-shadow: none; }
.auth__h1 {
  font-family: var(--slv2-sans);
  font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2;
  margin: 0 0 var(--sp-4); color: var(--slv2-ink);
}

/* ═══ src/styles/pdp.css ═══ */
/* ============================================================
   PRODUCT DETAIL PAGE — premium mobile-first upgrade (Part 1)
   Loaded AFTER pages.css so it can refine the existing .pdp* rules.
   Presentation only — no new tokens. SORA LIFE cream / forest / honey,
   subtle borders, restrained shadows, soft-square geometry.
   ============================================================ */

/* ---------- Top bar: breadcrumb + back ---------- */
.pdp-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-top: var(--sp-4); }
.pdp-top .crumbs { margin-bottom: 0; min-width: 0; }
.pdp-back { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); padding: 6px 2px; }
.pdp-back svg { flex-shrink: 0; }
@media (min-width: 901px) { .pdp-back { display: none; } }

/* ---------- Buying section refinements ---------- */
.pdp__meta { display: inline-flex; align-items: center; gap: 4px; }
.pdp__meta-sep { color: var(--ink-400); font-weight: 500; }
/* Tighten the lead paragraph on mobile — it should orient, not dominate. */
.pdp .pdp__lead { font-size: var(--text-base); line-height: 1.55; color: var(--ink-700); margin: 8px 0 14px; max-width: 46ch; }
.pdp__price { margin-bottom: var(--sp-4); }
.pdp__tax { font-size: var(--text-xs); }

/* Rating teaser chip */
.pdp-rating { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px; margin-bottom: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--paper); font-size: var(--text-sm); color: var(--color-text-muted); transition: border-color var(--t) var(--ease), background var(--t) var(--ease); }
.pdp-rating:hover { border-color: var(--forest-300); background: var(--forest-50); }
.pdp-rating__score { color: var(--color-text); font-size: var(--text-base); font-weight: 700; }
.pdp-rating__stars { display: inline-flex; align-items: center; gap: 1px; }
.pdp-rating__stars .s-full { color: var(--color-star); }
.pdp-rating__stars .s-empty { color: var(--line); }
.pdp-rating__count { position: relative; padding-left: 9px; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line); }
.pdp-rating__count::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 3px; margin-top: -1px; border-radius: 999px; background: var(--ink-400); }

/* Offers teaser */
.pdp-offers { margin-bottom: var(--sp-5); border: 1px solid var(--honey-300); border-radius: var(--r-md); background: linear-gradient(180deg, var(--honey-100), var(--paper)); overflow: hidden; }
.pdp-offers__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); width: 100%; min-height: 54px; padding: 11px 14px; text-align: left; }
.pdp-offers__lead { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pdp-offers__lead > svg { color: var(--honey-700); flex-shrink: 0; }
.pdp-offers__lead strong { display: block; font-size: var(--text-sm); color: var(--color-text); }
.pdp-offers__lead em { display: block; font-style: normal; font-size: var(--text-xs); color: var(--color-text-muted); }
.pdp-offers__toggle { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; font-size: var(--text-sm); font-weight: 600; color: var(--color-accent-text); }
.pdp-offers__panel { padding: 2px 14px 12px; }
.pdp-offers__list { display: flex; flex-direction: column; }
.pdp-offers__row { display: flex; align-items: flex-start; gap: 10px; padding: 11px 0; font-size: var(--text-sm); border-top: 1px dashed var(--honey-300); }
.pdp-offers__row > svg { color: var(--honey-700); flex-shrink: 0; margin-top: 2px; }
.pdp-offers__row strong { display: block; font-weight: 600; color: var(--color-text); }
.pdp-offers__row em { display: block; font-style: normal; font-size: var(--text-xs); color: var(--color-text-muted); }
.pdp-offers__soon { flex-shrink: 0; align-self: center; margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 7px; border-radius: var(--r-pill); background: var(--paper); color: var(--color-accent-text); border: 1px solid var(--honey-300); }

/* Delivery / service */
.pdp-deliver { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; margin-bottom: var(--sp-6); border: 1px solid var(--forest-100); border-radius: var(--r-md); background: var(--forest-50); }
.pdp-deliver__row { display: flex; align-items: flex-start; gap: 10px; font-size: var(--text-sm); color: var(--ink-700); }
.pdp-deliver__row > svg { color: var(--color-primary); flex-shrink: 0; margin-top: 2px; }
.pdp-deliver__row strong { font-weight: 600; color: var(--color-text); }
.pdp-deliver__row em { display: block; font-style: normal; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 1px; }

/* ---------- Scroll flow: section rhythm (compact on mobile) ---------- */
.pdp-flow { max-width: 960px; }
.pdp-sec { padding-block: var(--sp-6); border-top: 1px solid var(--line-soft); }
.pdp-flow > .pdp-sec:first-child { border-top: none; padding-top: var(--sp-4); }
.pdp-sec__head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--sp-3); }
.pdp-sec__head .pdp-sec__title { margin-bottom: 0; }
.pdp-sec__title { font-size: var(--text-xl); line-height: 1.15; margin-bottom: var(--sp-3); }

/* Placeholder tag ("Coming soon" on the reviews seat) */
.pdp-preview-tag { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--r-pill); background: var(--honey-100); color: var(--honey-700); border: 1px solid var(--honey-300); }

/* ---------- Benefits: "Why you'll love it" (tight, editorial) ---------- */
.pdp-benefits__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pdp-benefits__card { display: flex; flex-direction: column; gap: 3px; padding: 12px; border: 1px solid var(--forest-100); border-radius: var(--r-md); background: var(--forest-50); }
.pdp-benefits__ic { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 3px; border-radius: var(--r-sm); background: var(--paper); color: var(--forest-600); }
.pdp-benefits__card strong { font-size: var(--text-sm); color: var(--color-text); line-height: 1.2; }
.pdp-benefits__card span { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.35; }

/* ---------- Key ingredients (real data only) ---------- */
.pdp-ingredients__list { display: grid; gap: 10px; }
.pdp-ingredients__list.is-single { max-width: 520px; }
.pdp-ingredients__card { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); }
.pdp-ingredients__ic { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--r-pill); background: var(--forest-50); color: var(--forest-600); }
.pdp-ingredients__body strong { display: block; font-size: var(--text-base); color: var(--color-text); }
.pdp-ingredients__body p { margin-top: 3px; font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.55; }

/* ---------- How to use (real product.usage only; capped width) ---------- */
.pdp-howto__body { display: flex; gap: 12px; padding: 14px 16px; max-width: 620px; border: 1px solid var(--forest-100); border-radius: var(--r-md); background: var(--forest-50); }
.pdp-howto__ic { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--r-pill); background: var(--paper); color: var(--color-primary); }
.pdp-howto__text { font-size: var(--text-sm); color: var(--ink-700); line-height: 1.6; white-space: pre-line; }

/* ---------- Product information accordion ---------- */
.pdp-acc { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); overflow: hidden; }
.pdp-acc__item + .pdp-acc__item { border-top: 1px solid var(--line); }
.pdp-acc__h { margin: 0; font: inherit; letter-spacing: 0; }
.pdp-acc__btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 54px; padding: 15px 14px; text-align: left; font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); color: var(--color-text); }
.pdp-acc__title { display: inline-flex; align-items: center; gap: 10px; }
.pdp-acc__title svg { color: var(--color-primary); flex-shrink: 0; }
.pdp-acc__sign { display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--color-primary); transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease); }
.pdp-acc__item.is-open .pdp-acc__sign { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.pdp-acc__panel { padding: 0 14px 16px; }
.pdp-acc__inner { animation: pdpAccIn var(--t) var(--ease-soft); }
@keyframes pdpAccIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.pdp-acc__p { font-size: var(--text-sm); color: var(--ink-700); line-height: 1.65; }
.pdp-acc__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.pdp-acc .ticklist { gap: 9px; }
.pdp-acc .ticklist li { font-size: var(--text-sm); }
.pdp-faq dt { font-weight: 600; font-size: var(--text-sm); color: var(--color-text); margin-bottom: 4px; }
.pdp-faq dd { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; margin-bottom: 14px; }
.pdp-faq dd:last-child { margin-bottom: 0; }

/* ---------- Trust / assurance (compact 2-up grid, no dividers) ---------- */
.pdp-trust__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.pdp-trust__item { display: flex; align-items: flex-start; gap: 10px; padding: 0; border: 0; }
.pdp-trust__ic { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--r-pill); background: var(--forest-50); color: var(--forest-600); }
.pdp-trust__ic svg { width: 17px; height: 17px; }
.pdp-trust__txt strong { display: block; font-size: var(--text-sm); color: var(--color-text); line-height: 1.2; }
.pdp-trust__txt em { display: block; font-style: normal; font-size: 11px; color: var(--color-text-muted); line-height: 1.35; margin-top: 1px; }

/* ---------- Ratings & reviews ---------- */
.pdp-reviews-soon { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--color-surface-2); }
.pdp-reviews-soon__ic { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--r-pill); background: var(--paper); color: var(--color-primary); }
.pdp-reviews-soon p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; }
.pdp-reviews { display: grid; gap: var(--sp-5); }
.pdp-reviews__summary { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: var(--sp-5); border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--paper); text-align: center; }
.pdp-reviews__score { font-size: 2.6rem; line-height: 1; color: var(--color-primary); }
.pdp-reviews__stars { display: inline-flex; gap: 2px; }
.pdp-reviews__stars .s-full { color: var(--color-star); }
.pdp-reviews__stars .s-empty { color: var(--line); }
.pdp-reviews__cta { margin-top: 8px; }
.pdp-reviews__list { display: flex; flex-direction: column; gap: var(--sp-4); }
.pdp-reviewcard { border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: var(--sp-5); background: var(--paper); }
.pdp-reviewcard__top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pdp-reviewcard__avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-pill); background: var(--forest-100); color: var(--forest-700); font-weight: 700; font-size: var(--text-sm); }
.pdp-reviewcard__top strong { font-size: var(--text-sm); }
.pdp-reviewcard__verified { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); color: var(--color-success); margin-left: 8px; }
.pdp-reviewcard__title { font-size: var(--text-md); margin: 8px 0 6px; }
.pdp-reviews__all { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--text-sm); color: var(--color-primary); }

/* ---------- Gallery overlay controls ---------- */
.pdp__galactions { position: absolute; top: 14px; right: 14px; z-index: 3; display: flex; flex-direction: column; gap: 8px; }
.pdp__galbtn { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid var(--line); color: var(--ink-700); box-shadow: var(--shadow-xs); transition: transform var(--t-fast) var(--ease-soft), color var(--t) var(--ease); }
.pdp__galbtn:hover { transform: translateY(-1px); }
.pdp__galbtn:active { transform: scale(0.92); }
.pdp__galbtn.is-active { color: var(--color-sale); }

/* ---------- Sticky mobile buy bar refinements ---------- */
.buybar { gap: 8px; }
.buybar .btn { min-height: 44px; }
.buybar__price { flex: 1 1 auto; min-width: 0; }
.buybar__price .price--lg, .buybar__price .price { flex-wrap: wrap; row-gap: 0; }
.buybar__add { flex: 0 0 auto; padding: 12px 16px; background: var(--paper); color: var(--color-primary); border: 1px solid var(--color-primary); }
.buybar__add:hover { background: var(--forest-50); color: var(--color-primary); }
.buybar__buy { flex: 0 0 auto; padding: 12px 18px; }
/* Keep the last section clear of the fixed bar (the bar replaces the tab bar). */
@media (max-width: 900px) { body:has(.buybar) .page-main { padding-bottom: calc(74px + env(safe-area-inset-bottom)); } }
@media (max-width: 360px) {
  .buybar { gap: 6px; padding-inline: 10px; }
  .buybar__add { padding: 11px 12px; }
  .buybar__buy { padding: 11px 14px; }
}

/* ---------- Desktop: keep the redesign, don't blow it up ---------- */
@media (min-width: 901px) {
  .pdp-sec { padding-block: var(--sp-8); }
  .pdp-sec__title { font-size: var(--text-2xl); }
  .pdp-benefits__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .pdp-ingredients__list:not(.is-single) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdp-trust__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-8); }
  .pdp-reviews { grid-template-columns: 260px 1fr; gap: var(--sp-8); align-items: start; }
  .pdp-reviews__summary { position: sticky; top: 96px; }
}

/* ═══ src/styles/home.css ═══ */
/* ============================================================
   HOMEPAGE (screenshot-matched) + header refinements
   ============================================================ */

/* ---------- Announcement ticker (CSS-only, fixed-height, full content) ---------- */
.annbar { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 44px; height: 40px; }
.annbar__viewport { grid-area: 1 / 1; min-width: 0; height: 40px; overflow: clip; }
.annbar__track { display: flex; width: max-content; animation: announcement-ticker 52s linear infinite; }
.annbar__group { display: flex; flex: none; align-items: center; justify-content: space-around; min-width: calc(100vw - 44px); height: 40px; padding-left: 24px; }
.annbar__notices { display: flex; flex: none; align-items: center; flex-wrap: nowrap; }
.annbar__notice { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; white-space: nowrap; }
.annbar__notice svg { color: var(--st-annbar-accent, var(--honey-400)); flex-shrink: 0; }
.annbar__sep { flex-shrink: 0; width: 1px; height: 13px; background: currentColor; opacity: 0.3; margin: 0 18px; }
.annbar__links { display: flex; flex: none; align-items: center; gap: 0; white-space: nowrap; opacity: 0.92; }
.annbar__links a { display: inline-flex; align-items: center; min-height: 40px; }
.annbar__links a:hover { color: var(--st-annbar-accent, var(--honey-300)); }
.annbar__links .annbar__sep { margin: 0 12px; }
.annbar__pause { position: absolute; top: 0; right: 0; width: 44px; height: 40px; margin: 0; opacity: 0; z-index: 2; cursor: pointer; }
.annbar__control { grid-area: 1 / 2; display: grid; place-items: center; height: 40px; border-left: 1px solid currentColor; color: var(--st-annbar-text, var(--forest-50)); }
.annbar__control-icon { width: 11px; height: 12px; border-inline: 3px solid currentColor; }
.annbar__pause:checked + .annbar__control .annbar__control-icon { width: 0; height: 0; border: 6px solid transparent; border-right: 0; border-left: 9px solid currentColor; }
.annbar__pause:focus-visible + .annbar__control { outline: 2px solid currentColor; outline-offset: -4px; }
.annbar__pause:checked ~ .annbar__viewport .annbar__track { animation-play-state: paused; }
@keyframes announcement-ticker { to { transform: translateX(-50%); } }
@media (hover: hover) {
  .annbar:hover .annbar__track { animation-play-state: paused; }
}
/* Focusing the region resets it for keyboard reading; subsequent link focus
   pauses in place so pointer clicks never move their target before activation. */
.annbar__viewport:focus-within { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; outline: 2px solid currentColor; outline-offset: -3px; }
.annbar__viewport::-webkit-scrollbar { display: none; }
.annbar__viewport:focus-within .annbar__track { animation-play-state: paused; }
.annbar__viewport:focus .annbar__track { animation: none; transform: none; }
.annbar__viewport:focus .annbar__group[aria-hidden="true"] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .annbar { grid-template-columns: minmax(0, 1fr); }
  .annbar__pause, .annbar__control { display: none; }
  .annbar__viewport { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .annbar__track { animation: none; transform: none; }
  .annbar__group { min-width: 100vw; }
  .annbar__group[aria-hidden="true"] { display: none; }
}

/* ---------- Header layout with inline search ---------- */
.hdr__in { gap: var(--sp-6); }
.hdr__nav { gap: 2px; flex: 1; justify-content: center; }
.hdr__link { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; padding: 9px 11px; }
.hdr__right { display: flex; align-items: center; gap: var(--sp-4); }
.hdr__search { position: relative; width: 260px; }
.hdr__search .searchbox { transition: transform var(--t-slow) var(--ease-luxury); transform-origin: left center; }
.hdr__search:focus-within .searchbox { transform: scale(1.035); }
.hdr__search .searchbox .input { padding: 11px 44px 11px 16px; border: 1px solid var(--line); background: var(--paper); border-radius: var(--r-pill); font-size: var(--text-sm); transition: border-color var(--t) var(--ease-soft), box-shadow var(--t) var(--ease-soft); }
.hdr__search .searchbox .input:focus { border-color: var(--forest-300); box-shadow: 0 0 0 4px rgba(87, 141, 114, 0.12); }
.hdr__search-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center; border-radius: 999px; color: var(--forest-700); }
.hdr__search-btn:hover { background: var(--forest-50); }
.hdr__suggest { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg); overflow: hidden; z-index: 30; }
.hdr__suggest-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.hdr__suggest-item:hover { background: var(--forest-50); }
.hdr__suggest-thumb { width: 40px; height: 40px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.hdr__suggest-thumb .pimg { aspect-ratio: 1; }
.hdr__suggest-name { flex: 1; font-size: var(--text-sm); font-weight: 500; }
.hdr__suggest-price { font-weight: 600; font-size: var(--text-sm); }
@media (max-width: 1160px) { .hdr__search { width: 180px; } .hdr__link { padding: 9px 8px; font-size: 0.78rem; } }
@media (max-width: 1040px) { .hdr__nav { display: none; } }

/* Card image sits in a soft frame. object-fit: contain is now the global
   default on .pimg img (see components.css), so the previous `!important`
   override is gone — only the breathing room is set here. */
.pcard__media .pimg img { padding: 10px; }

/* ============ OFFICIAL LOGO (raster) ============ */
.logo--img { display: inline-flex; align-items: center; }
.logo__img { height: 50px; width: auto; max-width: 175px; object-fit: contain; display: block; }
@media (max-width: 900px) { .logo__img { height: 36px; max-width: 128px; } }

/* ============ PREMIUM PRICING ============ */
.price { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price .now { font-family: var(--font-display); font-weight: 600; color: var(--price-now-strong); }
.price .was { font-size: var(--text-sm); color: var(--price-mrp); text-decoration: line-through; text-decoration-thickness: 1px; }
.price .was-lbl { text-decoration: none; display: inline-block; font-size: 0.72em; letter-spacing: 0.03em; color: var(--price-mrp); opacity: 0.85; margin-right: 1px; }
.price .off { font-size: var(--text-xs); font-weight: 700; color: var(--clay-600); }
.price--lg .now { font-size: 1.9rem; }
.price-tbd { font-weight: 600; font-size: var(--text-sm); }

/* Premium discount badge — SORA honey accent (--honey-500 = --color-accent),
   dark text for high contrast (~7.7:1). Only the % OFF (.badge-sale) changes;
   the NEW badge (.badge-new) is a separate class and is untouched. */
.badge-sale { background: var(--st-discount-bg, var(--honey-500)); color: var(--st-discount-text, var(--forest-900)); letter-spacing: 0.08em; box-shadow: var(--shadow-xs); font-weight: 700; }

/* The header search was a fixed 260px. Combined with non-shrinking 44px icon
   buttons (needed for tap targets) the header row could not fit at ~1280px —
   a very common laptop width — and pushed the page into horizontal scroll.
   The search now absorbs the squeeze instead of the buttons. */
.hdr__right { min-width: 0; }
.hdr__search { width: 260px; flex: 0 1 260px; min-width: 0; }
.hdr__search .searchbox, .hdr__search .input { min-width: 0; width: 100%; }
@media (max-width: 1400px) { .hdr__search { flex-basis: 200px; } }
@media (max-width: 1180px) { .hdr__search { flex-basis: 150px; } }

/* ============================================================
   PRICE HIERARCHY — final authority.
   home.css is the last storefront sheet index.html loads (tokens, base,
   components, layout, pages, then here), so these declarations settle the
   money language for every surface: the price the customer pays leads in
   green, the MRP supports it in a muted red with a strikethrough — never
   grey, and never louder than the selling price.
   ============================================================ */
.price .now,
.pdp__price .now,
.cartrow__price,
.cartrow__unitprice,
.checkout__lp,
.inv__price { color: var(--price-now-strong); font-weight: 600; }

.price .was,
.pdp__price .was,
.cartrow__price s,
.cartrow__unit s,
.variantchip__price s,
.inv__table s { color: var(--price-mrp); text-decoration: line-through; }

.price .was-lbl { color: var(--price-mrp); }

/* Selling price must stay visually dominant over the MRP. */
.pdp__price .now { font-weight: 700; }
.pdp__price .was { font-weight: 500; }

/* components.css scopes `.pdp__buybox .price .now` at a higher specificity,
   which would otherwise reintroduce a second green. Match it here so the
   buybox uses the same strong green as every other surface. */
.pdp__buybox .price .now { color: var(--price-now-strong); }

/* Order summary money follows the same two-colour language: the MRP line is
   the struck red, the amount actually charged is the green. Neutral rows in
   between stay ink so the two ends of the story stand out. */
.psum__row--mrp .psum__value { color: var(--price-mrp); text-decoration: line-through; }
.psum__row.is-strong .psum__value { color: var(--price-now-strong); }
.inv__row--mrp .inv__row-value { color: var(--price-mrp); text-decoration: line-through; }
.inv__row.is-strong .inv__row-value { color: var(--price-now-strong); }
.adm-bill__row.is-mrp > span:last-child { color: var(--price-mrp); text-decoration: line-through; }

/* ============================================================
   MOBILE-FIRST HOMEPAGE POLISH  (<= 768px / <= 560px)
   Trim the blank space around card product images and the tall section
   rhythm so a phone user reaches products quickly. Ticker untouched.
   ============================================================ */
@media (max-width: 768px) {
  .pcard__media .pimg img { padding: 6px; }
}

/* ═══ src/styles/promotions.css ═══ */
/* ============================================================
   SORA LIFE — PROMOTIONS (campaign posters & offer cards)
   Loaded after home.css. Presentation only.

   Design language: editorial wellness campaign creative.
   Modest radii, hairline rules, tonal layering, one dominant offer figure,
   restrained botanical decoration. Palette stays inside the SORA family
   (forest / ivory-cream / honey-orange / clay). No pink, no cheesy
   gradients, no oversized bubble cards, no heavy shadows.
   ============================================================ */

/* ------------------------------------------------------------
   1. THEME PRESETS — each produces a genuinely different campaign look.
   Every custom property is consumed by both the poster and the offer card.
   ------------------------------------------------------------ */

/* FOREST — deep green ground, cream type, honey accent, botanical feel */
.promo-poster--forest, .promo-offer--forest {
  --pp-solid: #1A3226;
  --pp-bg:
    radial-gradient(105% 130% at 86% 8%, rgba(232, 176, 75, 0.17) 0%, transparent 58%),
    linear-gradient(152deg, #1E3A2F 0%, #14261C 100%);
  --pp-fg: #FBF8F1;
  --pp-dim: rgba(225, 238, 231, 0.80);
  --pp-accent: #F0C169;
  --pp-line: rgba(240, 193, 105, 0.20);
  --pp-deco: rgba(240, 193, 105, 0.26);
  --pp-badge-bg: #E8B04B;
  --pp-badge-fg: #14261C;
  --pp-cta-bg: #E8B04B;
  --pp-cta-fg: #14261C;
  --pp-cta-border: transparent;
  --pp-tile: rgba(251, 248, 241, 0.12);
}

/* WARM CREAM — ivory ground, forest type, warm orange accent, elegant */
.promo-poster--cream, .promo-offer--cream {
  --pp-solid: #F4EEE1;
  --pp-bg:
    radial-gradient(100% 125% at 90% 6%, rgba(232, 176, 75, 0.26) 0%, transparent 60%),
    linear-gradient(150deg, #FBF8F1 0%, #EDE6D6 100%);
  --pp-fg: #1A3226;
  --pp-dim: #55655B;
  --pp-accent: #B4761F;
  --pp-line: #E7DFD0;
  --pp-deco: rgba(30, 58, 47, 0.11);
  --pp-badge-bg: #1E3A2F;
  --pp-badge-fg: #F0F6F2;
  --pp-cta-bg: #1E3A2F;
  --pp-cta-fg: #FBF8F1;
  --pp-cta-border: transparent;
  --pp-tile: rgba(30, 58, 47, 0.08);
}

/* ORANGE ACCENT — burnt honey ground, forest type, energetic sale campaign */
.promo-poster--orange, .promo-offer--orange {
  --pp-solid: #E3A63F;
  --pp-bg:
    radial-gradient(110% 130% at 8% 92%, rgba(197, 106, 69, 0.42) 0%, transparent 62%),
    linear-gradient(146deg, #F0C169 0%, #D08E2C 100%);
  --pp-fg: #14261C;
  --pp-dim: rgba(20, 38, 28, 0.74);
  --pp-accent: #14261C;
  --pp-line: rgba(20, 38, 28, 0.16);
  --pp-deco: rgba(20, 38, 28, 0.16);
  --pp-badge-bg: #14261C;
  --pp-badge-fg: #F6D79A;
  --pp-cta-bg: #14261C;
  --pp-cta-fg: #F6D79A;
  --pp-cta-border: transparent;
  --pp-tile: rgba(20, 38, 28, 0.12);
}

/* DARK LUXE — near-black forest, hairline gold, premium minimal */
.promo-poster--dark, .promo-offer--dark {
  --pp-solid: #16211B;
  --pp-bg:
    radial-gradient(100% 120% at 78% 12%, rgba(240, 193, 105, 0.13) 0%, transparent 56%),
    linear-gradient(155deg, #1B2A22 0%, #121C16 100%);
  --pp-fg: #FBF8F1;
  --pp-dim: rgba(190, 218, 205, 0.72);
  --pp-accent: #F0C169;
  --pp-line: rgba(240, 193, 105, 0.28);
  --pp-deco: rgba(240, 193, 105, 0.18);
  --pp-badge-bg: transparent;
  --pp-badge-fg: #F0C169;
  --pp-badge-border: rgba(240, 193, 105, 0.55);
  --pp-cta-bg: transparent;
  --pp-cta-fg: #F0C169;
  --pp-cta-border: rgba(240, 193, 105, 0.55);
  --pp-tile: rgba(240, 193, 105, 0.12);
}

/* MINIMAL — paper, thin rule, editorial type, product-first */
.promo-poster--minimal, .promo-offer--minimal {
  --pp-solid: #FFFFFF;
  --pp-bg: #FFFFFF;
  --pp-fg: #16211B;
  --pp-dim: #55655B;
  --pp-accent: #B4761F;
  --pp-line: #E7DFD0;
  --pp-deco: rgba(30, 58, 47, 0.07);
  --pp-badge-bg: #F0F6F2;
  --pp-badge-fg: #1E3A2F;
  --pp-cta-bg: transparent;
  --pp-cta-fg: #1E3A2F;
  --pp-cta-border: #1E3A2F;
  --pp-tile: #F0F6F2;
}

/* ------------------------------------------------------------
   2. SECTION WRAPPER
   ------------------------------------------------------------ */
.promo-section { padding-block: var(--sp-8); }
.promo-section__head { margin-bottom: var(--sp-4); }
.promo-section__head .eyebrow { display: block; }
.promo-section__title { font-size: var(--text-xl); line-height: 1.12; margin-top: 5px; }
.promo-section__grid { display: grid; gap: 12px; }

/* ------------------------------------------------------------
   3. POSTER
   ------------------------------------------------------------ */
.promo-poster {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 248px;                    /* ~1.44:1 at a 358px content width */
  display: flex;
  border-radius: var(--r-md);
  border: 1px solid var(--pp-line);
  background: var(--pp-bg);
  color: var(--pp-fg);
}
.promo-poster--minimal { box-shadow: var(--shadow-xs); }

/* --- art layer: image, or the CSS botanical composition --- */
.promo-poster__art { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.promo-poster__img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; display: block; }
.promo-poster__scrim { position: absolute; inset: 0; }
.promo-poster.has-image .promo-poster__scrim {
  background: linear-gradient(
    176deg,
    color-mix(in srgb, var(--pp-solid) 28%, transparent) 0%,
    color-mix(in srgb, var(--pp-solid) 78%, transparent) 48%,
    color-mix(in srgb, var(--pp-solid) 95%, transparent) 100%);
}

/* Botanical decoration — two fine arcs + one leaf silhouette. */
.promo-poster__deco { position: absolute; inset: 0; }
.promo-poster__deco::before,
.promo-poster__deco::after {
  content: ""; position: absolute; border-radius: 50%;
  border: 1px solid var(--pp-deco);
}
.promo-poster__deco::before { width: 78%; aspect-ratio: 1; right: -20%; top: -34%; }
.promo-poster__deco::after  { width: 46%; aspect-ratio: 1; right: 2%;   top: 14%; opacity: 0.75; }
.promo-poster__leaf {
  position: absolute; right: 6%; bottom: -14%;
  width: 46%; aspect-ratio: 1 / 1.18;
  border-radius: 62% 0 62% 0;
  background: linear-gradient(150deg, var(--pp-deco), transparent 72%);
  transform: rotate(-16deg);
}

/* --- text column --- */
.promo-poster__body {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  padding: 18px 16px;
  width: 100%;
}
.promo-poster.is-center .promo-poster__body { align-items: center; text-align: center; }

.promo-poster__badge {
  display: inline-flex; align-items: center;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--r-xs);
  background: var(--pp-badge-bg); color: var(--pp-badge-fg);
  border: 1px solid var(--pp-badge-border, transparent);
}
.promo-poster__title {
  font-size: clamp(1.32rem, 5.6vw, 1.75rem);
  line-height: 1.1; letter-spacing: -0.015em;
  color: var(--pp-fg); max-width: 18ch;
}
.promo-poster.is-center .promo-poster__title { max-width: 22ch; }
.promo-poster__sub {
  font-size: var(--text-sm); line-height: 1.5; color: var(--pp-dim); max-width: 34ch;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* --- the dominant offer figure --- */
.promo-poster__callout { display: flex; flex-direction: column; gap: 5px; margin-top: 1px; }
.promo-poster.is-center .promo-poster__callout { align-items: center; }
.promo-poster__callout-rule { width: 26px; height: 2px; border-radius: 2px; background: var(--pp-accent); }
.promo-poster__callout-val {
  font-family: var(--font-sans);
  font-size: clamp(1.6rem, 7.4vw, 2.1rem);
  font-weight: 800; letter-spacing: -0.025em; line-height: 0.98;
  color: var(--pp-accent);
}

/* --- actions --- */
.promo-poster__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.promo-poster.is-center .promo-poster__actions { justify-content: center; }
.promo-poster__cta {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  min-height: 44px; padding: 11px 13px;
  border-radius: var(--r-pill); font-weight: 700; font-size: 12.5px;
  background: var(--pp-cta-bg); color: var(--pp-cta-fg);
  border: 1px solid var(--pp-cta-border);
  transition: transform var(--t) var(--ease-luxury), box-shadow var(--t) var(--ease);
}
.promo-poster__cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.promo-poster__cta:active { transform: translateY(0) scale(0.985); }

/* ------------------------------------------------------------
   4. COUPON TICKET
   ------------------------------------------------------------ */
.promo-code { display: inline-flex; flex-direction: column; gap: 4px; }
.promo-code__label {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--pp-dim, var(--color-text-muted));
}
.promo-code__row {
  position: relative;
  display: inline-flex; align-items: stretch; gap: 2px;
  min-height: 44px; padding: 3px 3px 3px 10px;
  border: 1px dashed color-mix(in srgb, currentColor 42%, transparent);
  border-radius: var(--r-xs);
  background: color-mix(in srgb, currentColor 9%, transparent);
}
/* perforation notches */
.promo-code__row::before,
.promo-code__row::after {
  content: ""; position: absolute; top: 50%; width: 8px; height: 8px;
  margin-top: -4px; border-radius: 50%;
  background: var(--pp-solid, var(--color-bg));
  border: 1px dashed color-mix(in srgb, currentColor 42%, transparent);
}
.promo-code__row::before { left: -5px; }
.promo-code__row::after  { right: -5px; }
.promo-code__value {
  display: inline-flex; align-items: center;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-weight: 700; font-size: 12px; letter-spacing: 0.04em;
  color: inherit; white-space: nowrap;
}
.promo-code__btn {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  padding: 0 9px; margin-left: 6px; border-radius: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
  background: color-mix(in srgb, currentColor 17%, transparent); color: inherit;
  transition: background var(--t) var(--ease);
}
.promo-code__btn:hover { background: color-mix(in srgb, currentColor 28%, transparent); }
.promo-code.is-copied .promo-code__row { border-style: solid; }

/* ------------------------------------------------------------
   5. COMPACT OFFER CARD
   ------------------------------------------------------------ */
.promo-offers-rail { display: flex; gap: 10px; }
.promo-offers-rail > li { display: flex; }

.promo-offer {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px;
  width: 100%; padding: 14px;
  border: 1px solid var(--pp-line);
  border-radius: var(--r-md);
  background: var(--pp-bg);
  color: var(--pp-fg);
}
.promo-offer--minimal, .promo-offer--cream { box-shadow: var(--shadow-xs); }
/* one restrained corner arc so a card still reads as creative, not an alert */
.promo-offer::after {
  content: ""; position: absolute; right: -34px; top: -34px;
  width: 96px; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid var(--pp-deco); pointer-events: none;
}
.promo-offer__top { display: flex; align-items: center; gap: 9px; }
.promo-offer__ic {
  display: grid; place-items: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: var(--r-xs);
  background: var(--pp-tile); color: var(--pp-fg); overflow: hidden;
}
.promo-offer__ic img { width: 100%; height: 100%; object-fit: cover; }
.promo-offer__badge {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--pp-accent);
}
.promo-offer__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.promo-offer__title { font-size: var(--text-base); font-weight: 700; line-height: 1.22; color: var(--pp-fg); }
.promo-offer__sub { font-size: var(--text-xs); line-height: 1.45; color: var(--pp-dim); }
.promo-offer__foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: auto; padding-top: 10px;
  border-top: 1px solid var(--pp-line);
}
.promo-offer__foot .promo-code__row { min-height: 36px; padding: 2px 2px 2px 10px; }
.promo-offer__cta {
  display: inline-flex; align-items: center; gap: 4px; min-height: 32px;
  font-size: var(--text-xs); font-weight: 700; color: var(--pp-accent);
}

/* Mobile: swipe rail under the hero poster. */
@media (max-width: 900px) {
  .promo-offers-rail {
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--sp-4)); padding: 2px var(--sp-4) 6px;
    -webkit-overflow-scrolling: touch;
  }
  .promo-offers-rail > li { flex: 0 0 78%; scroll-snap-align: start; }
}

/* ------------------------------------------------------------
   6. CART — compact "available offers"
   ------------------------------------------------------------ */
.promo-compact {
  margin-top: var(--sp-4); padding: 12px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--forest-50);
}
.promo-compact__lbl {
  display: block; margin-bottom: 9px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--forest-700);
}
.promo-compact__list { display: flex; flex-direction: column; gap: 8px; }
.promo-compact__note { margin-top: 9px; font-size: 11px; line-height: 1.45; color: var(--color-text-muted); }

/* ------------------------------------------------------------
   7. PDP "Offers & payment benefits" drawer — compact, not a poster
   ------------------------------------------------------------ */
.pdp-offers__row--promo { align-items: flex-start; }
.pdp-offers__row--promo strong { display: block; }
.pdp-offers__code { margin-top: 7px; color: var(--color-primary); }
.pdp-offers__code .promo-code__row {
  min-height: 36px; padding: 2px 2px 2px 10px;
  border-color: var(--honey-300);
  background: var(--paper);
}
.pdp-offers__code .promo-code__row::before,
.pdp-offers__code .promo-code__row::after { background: var(--honey-100); border-color: var(--honey-300); }
.pdp-offers__code .promo-code__btn { background: var(--forest-50); color: var(--color-primary); }
.pdp-offers__code .promo-code__btn:hover { background: var(--forest-100); }

/* ------------------------------------------------------------
   8. DESKTOP COMPOSITION
   ------------------------------------------------------------ */
@media (min-width: 901px) {
  .promo-section { padding-block: var(--sp-10); }
  .promo-section__title { font-size: var(--text-2xl); }
  /* hero ~65% + a stacked offers column */
  .promo-section__grid.has-poster { grid-template-columns: 1.85fr 1fr; gap: 14px; align-items: stretch; }

  .promo-poster { min-height: 300px; }
  .promo-poster__body { padding: 30px 34px; gap: 11px; justify-content: center; max-width: 560px; }
  .promo-poster__title { font-size: var(--text-2xl); max-width: 16ch; }
  .promo-poster__sub { -webkit-line-clamp: 3; max-width: 38ch; }
  .promo-poster__callout-val { font-size: 2.35rem; }

  /* image-right: the art becomes a real column of the composition */
  .promo-poster.has-image { display: grid; grid-template-columns: minmax(0, 1fr) 40%; }
  .promo-poster.has-image .promo-poster__art { position: relative; inset: auto; grid-column: 2; }
  .promo-poster.has-image .promo-poster__body { grid-column: 1; grid-row: 1; }
  .promo-poster.has-image .promo-poster__scrim {
    background: linear-gradient(90deg, var(--pp-solid) 0%, color-mix(in srgb, var(--pp-solid) 40%, transparent) 46%, transparent 82%);
  }
  .promo-poster.has-image .promo-poster__img { object-position: center 32%; }

  /* offers fill the poster height evenly, so there is no dead column */
  .promo-offers-rail { flex-direction: column; }
  .promo-offers-rail > li { flex: 1 1 0; }
  .promo-offer { justify-content: center; }
}

/* ------------------------------------------------------------
   9. ADMIN live preview
   ------------------------------------------------------------ */
.adm-promo-preview { max-width: 560px; }
.adm-promo-preview .promo-offers-rail { flex-direction: column; }
.adm-promo-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.adm-promo-chip {
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--r-pill);
  background: var(--forest-100); color: var(--forest-700);
}
/* Uploaded poster — compact landscape banner */
.promo-poster--image-only {
  display: block;
  width: 58%;
  max-width: 520px;
  min-height: 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
}

.promo-poster__fullimg {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  border-radius: 16px;
}

@media (max-width: 767px) {
  .promo-poster--image-only {
    width: 82%;
    max-width: 330px;
    margin-inline: auto;
    border-radius: 12px;
  }

  .promo-poster__fullimg {
    width: 100%;
    height: auto;
    border-radius: 12px;
  }
}
/* ---- Uploaded artwork: click target + coupon ------------------------
   The image-first look is unchanged — nothing is drawn over the artwork.
   These rules only give the poster a real click target and a place for the
   coupon ticket BELOW the image. Shared by PromoPoster's image branch and
   the homepage offers rail (see src/components/promo/PromoArtwork.jsx). */
.promo-artwork__link {
  display: block;
  width: 100%;
  border-radius: inherit;
  /* The artwork is the button; no colour or spacing is added over it. */
  text-decoration: none;
  color: inherit;
}
.promo-artwork__link img { display: block; width: 100%; height: auto; }

/* Keep the artwork's own corner radius on focus rather than the global
   --r-xs, and make the ring clearly visible against any uploaded image. */
.promo-artwork__link:focus-visible {
  outline: 2px solid var(--color-primary, #1E3A2F);
  outline-offset: 3px;
  box-shadow: none;
  border-radius: inherit;
}

/* Only applied when a coupon actually renders, so a poster without one keeps
   its existing layout byte-for-byte. */
.promo-artwork--has-code {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.promo-artwork__code { align-self: flex-start; }
@media (max-width: 767px) {
  .promo-artwork--has-code { gap: 8px; }
}

/* ═══ src/styles/v2-foundation.css ═══ */
/* ============================================================================
   SORA LIFE V2 — FOUNDATION
   Phase 1. Storefront-scoped by NAMESPACE, not by DOM subtree.

   Two rules make this file incapable of restyling anything outside the
   storefront:
     1. Every custom property is prefixed --slv2-. The namespace has no other
        consumer in src/, so declaring it on :root cannot restyle anything —
        restyling requires a consumer. Declaring on :root (rather than a
        wrapper element) also means React portals — drawer, search overlay,
        toasts — inherit correctly with no extra work.
     2. Every class is prefixed v2-. No existing selector in tokens.css,
        components.css, pages.css, home.css, layout.css or base.css is edited.
        V2 components stop using the old classes; the old rules stop matching.

   tokens.css is deliberately NOT modified: --r-* has 39 references outside the
   storefront (passport.css, admin.css) and --price-* has 26 (creator.css,
   admin.css, admin/pages/Variants.jsx). Aliasing them would resquare Passport
   and Admin and repaint creator earnings.
   ========================================================================= */
:root {
  /* ---- forest: CTA, active state, trust anchor. Never a price. ---- */
  --slv2-f900:#14261C; --slv2-f800:#1A3226; --slv2-f700:#1E3A2F; --slv2-f600:#2C5341;
  --slv2-f500:#3B6E56; --slv2-f400:#578D72; --slv2-f300:#85B49F;
  --slv2-f100:#E1EEE7; --slv2-f50:#F0F6F2;

  /* ---- botanical support ---- */
  --slv2-olive:#4A5A3C; --slv2-olive-2:#7C8C68; --slv2-olive-50:#EDF0E4;

  /* ---- honey: spent two or three times per screen, never more ---- */
  --slv2-gold:#C79A45; --slv2-gold-2:#E4C482; --slv2-gold-ink:#866419;
  --slv2-gold-100:#F4E9D2; --slv2-gold-50:#FBF5E8;

  /* ---- warm neutrals ---- */
  --slv2-ivory:#FBF8F1; --slv2-cream:#F4EEE1; --slv2-sand:#EFE7D8; --slv2-paper:#FFFDF8;
  --slv2-stone:#E7DCC7; --slv2-stone-2:#D9CBB0;

  /* ---- ink ---- */
  --slv2-ink:#16211B; --slv2-ink-2:#3B4A41; --slv2-ink-3:#5F6D64; --slv2-ink-4:#8A958C;

  /* ---- commerce price system ----
     Selling price is green, compare/original price is red, and the discount
     remains restrained gold. Both price colors retain readable contrast. */
  --slv2-price:#277249;      /* selling price: premium marketplace green */
  --slv2-price-mrp:#B44343;  /* compare/original price: clear sale red */
  --slv2-price-off:#866419;  /* 5.1:1 on gold-100 */
  --slv2-save:#2C5341;       /* 7.4:1 on forest-50 */
  --slv2-alert:#9A3F33;

  /* ---- structure ---- */
  --slv2-line:#E5DCCB; --slv2-line-2:#F0E9DB; --slv2-star:#D9A441;

  /* ---- GEOMETRY — sharp editorial. Three values, no exceptions. ----
     r-ui   every structural surface and control
     r-art  image-led campaign and editorial surfaces ONLY
     0      anything meeting an edge
     2px is anti-aliasing, not softening: at a 1px hairline a true 0 corner
     stair-steps on non-integer device pixel ratios. */
  --slv2-r-ui:2px;
  --slv2-r-art:4px;

  /* ---- shadows: pulled back, not up. The hairline plus paper-on-ivory
     does the separating a radius used to do. ---- */
  --slv2-sh-card:none;
  --slv2-sh-hover:0 2px 6px -4px rgba(20,38,28,.16);
  --slv2-sh-up:0 -1px 0 rgba(20,38,28,.06), 0 -8px 20px -18px rgba(20,38,28,.24);

  /* ---- rhythm ---- */
  --slv2-gutter:16px;
  --slv2-sec-gap:32px;
  --slv2-container:1240px;

  --slv2-sans:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --slv2-disp:'Playfair Display', Georgia, 'Times New Roman', serif;

  /* ---- existing Admin Appearance bridge ----
     These V2-only aliases consume the established --st-* theme variables.
     Their fallbacks are the frozen V2 colours, so an absent/default theme is
     pixel-identical and no legacy/Admin/Creator/Passport token is redefined. */
  --slv2-accent-primary:var(--st-brand-primary, var(--slv2-f700));
  --slv2-accent-primary-hover:var(--st-brand-secondary, var(--slv2-f700));
  --slv2-accent-gold:var(--st-brand-accent, var(--slv2-gold));
  --slv2-accent-gold-hover:var(--st-brand-highlight, #BB8D3A);
  --slv2-cta-primary-bg:var(--st-btn-primary-bg, var(--slv2-f700));
  --slv2-cta-primary-text:var(--st-btn-primary-text, #FBF8F1);
  --slv2-cta-primary-hover:var(--st-btn-hover, var(--slv2-f800));
  --slv2-cta-secondary-bg:var(--st-btn-secondary-bg, var(--slv2-cream));
  --slv2-cta-secondary-text:var(--st-btn-secondary-text, var(--slv2-ink));
  --slv2-discount-bg:var(--st-discount-bg, var(--slv2-gold-100));
  --slv2-discount-text:var(--st-discount-text, var(--slv2-gold-ink));
}

@media (max-width: 359px) { :root { --slv2-gutter:12px; } }
@media (min-width: 360px) and (max-width: 389px) { :root { --slv2-gutter:14px; } }
@media (min-width: 768px) { :root { --slv2-gutter:24px; --slv2-sec-gap:48px; } }
@media (min-width: 1024px) { :root { --slv2-sec-gap:56px; } }

/* ---------------------------------------------------------------- layout */
.v2-wrap { width:100%; max-width:var(--slv2-container); margin-inline:auto; padding-inline:var(--slv2-gutter); }
.v2-sec { margin-top:var(--slv2-sec-gap); }
.v2-sec--tight { margin-top:24px; }
.v2-bleed { margin-inline:calc(-1 * var(--slv2-gutter)); }

/* ------------------------------------------------------------ typography */
.v2-disp { font-family:var(--slv2-disp); }
.v2-num { font-variant-numeric:tabular-nums; }

.v2-eyebrow {
  font-family:var(--slv2-sans);
  font-size:9.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--slv2-gold-ink); margin:0 0 5px; line-height:1.3;
}
.v2-h2 {
  font-family:var(--slv2-disp);
  font-size:19px; font-weight:500; letter-spacing:-.008em; line-height:1.15;
  margin:0; color:var(--slv2-ink); text-wrap:balance;
}
.v2-sechead { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:12px; }
.v2-sechead > div { min-width:0; }
.v2-more {
  font-family:var(--slv2-sans);
  font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--slv2-ink-3); display:inline-flex; align-items:center; gap:4px;
  white-space:nowrap; text-decoration:none; padding-bottom:2px;
}
.v2-more:hover { color:var(--slv2-accent-primary-hover); }

@media (min-width: 768px) {
  .v2-eyebrow { font-size:11px; }
  .v2-h2 { font-size:24px; }
  .v2-sechead { margin-bottom:18px; }
  .v2-more { font-size:12px; }
}
@media (min-width: 1024px) {
  .v2-h2 { font-size:30px; }
  .v2-sechead { margin-bottom:22px; }
}

/* ---------------------------------------------------------------- rails */
.v2-rail {
  display:flex; gap:12px; overflow-x:auto; padding-bottom:2px;
  scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none;
  margin-inline:calc(-1 * var(--slv2-gutter));
  padding-inline:var(--slv2-gutter);
}
.v2-rail::-webkit-scrollbar { display:none; }
.v2-rail > * { scroll-snap-align:start; flex:0 0 auto; }

/* -------------------------------------------------------------- buttons */
.v2-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:44px; padding:0 22px; border-radius:var(--slv2-r-ui);
  font-family:var(--slv2-sans); font-size:13px; font-weight:600; letter-spacing:.005em;
  background:var(--slv2-cta-primary-bg); color:var(--slv2-cta-primary-text); border:1px solid var(--slv2-cta-primary-bg);
  text-decoration:none; cursor:pointer; transition:background .18s ease, border-color .18s ease;
}
.v2-btn:hover { background:var(--slv2-cta-primary-hover); border-color:var(--slv2-cta-primary-hover); }
.v2-btn:active { transform:scale(.985); }
.v2-btn--gold { background:var(--slv2-accent-gold); border-color:var(--slv2-accent-gold); color:var(--slv2-f900); }
.v2-btn--gold:hover { background:var(--slv2-accent-gold-hover); border-color:var(--slv2-accent-gold-hover); }
.v2-btn--out { background:transparent; color:var(--slv2-accent-primary); border-color:var(--slv2-accent-primary); }
.v2-btn--out:hover { background:var(--slv2-f50); }
.v2-btn--ghost { background:var(--slv2-cta-secondary-bg); color:var(--slv2-cta-secondary-text); border-color:var(--slv2-line); }
.v2-btn--sm { height:36px; padding:0 16px; font-size:12px; }
.v2-btn--xs { height:30px; padding:0 12px; font-size:11px; }
.v2-btn--block { display:flex; width:100%; }
.v2-btn[disabled], .v2-btn[aria-disabled="true"] { opacity:.5; cursor:not-allowed; }
@media (min-width: 1024px) { .v2-btn { height:52px; padding:0 32px; font-size:14px; } .v2-btn--sm { height:44px; font-size:13px; } }

/* Icon control: a compact square, never a bubble. The visible box is 28px;
   the touch target is extended to 44px with a transparent inset. */
.v2-iconbtn {
  position:relative; width:28px; height:28px; border-radius:var(--slv2-r-ui);
  display:inline-grid; place-items:center; cursor:pointer;
  background:rgba(251,248,241,.88); border:1px solid var(--slv2-line);
  color:var(--slv2-ink-2); padding:0;
}
.v2-iconbtn::after { content:""; position:absolute; top:50%; left:50%; width:44px; height:44px; transform:translate(-50%,-50%); }
.v2-iconbtn.is-on { color:#A8443D; border-color:#E6CFC9; background:#FCF2F0; }
/* over open artwork or in the header, where a container would be noise */
.v2-iconbtn--bare { background:transparent; border-color:transparent; color:var(--slv2-ink-2); }
.v2-iconbtn--bare:hover { color:var(--slv2-accent-primary-hover); }

/* --------------------------------------------------- labels & tab chips */
.v2-badge {
  display:inline-flex; align-items:center; height:18px; padding:0 6px;
  border-radius:var(--slv2-r-ui);
  font-family:var(--slv2-sans);
  font-size:9.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  background:var(--slv2-discount-bg); color:var(--slv2-discount-text); white-space:nowrap;
}
.v2-badge--forest { background:var(--slv2-f700); color:#F1EADB; }
.v2-badge--soft   { background:var(--slv2-f100); color:var(--slv2-f600); }
.v2-badge--out    { background:rgba(22,33,27,.72); color:#F4EFE4; }

.v2-chip {
  display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 13px;
  border-radius:var(--slv2-r-ui);
  font-family:var(--slv2-sans); font-size:12px; font-weight:500;
  background:var(--slv2-cream); border:1px solid var(--slv2-line);
  color:var(--slv2-ink-2); white-space:nowrap; text-decoration:none; cursor:pointer;
}
.v2-chip.is-on { background:var(--slv2-accent-primary); border-color:var(--slv2-accent-primary); color:#FBF8F1; }

/* ---------------------------------------------------------------- price */
.v2-price { display:inline-flex; align-items:baseline; gap:6px; flex-wrap:wrap; font-variant-numeric:tabular-nums; }
.v2-price .v2-price__now { font-size:15px; font-weight:700; letter-spacing:-.015em; color:var(--slv2-price); }
.v2-price .v2-price__mrp { font-size:11.5px; font-weight:500; color:var(--slv2-price-mrp); text-decoration:line-through; }
.v2-price .v2-price__mrp-lbl { text-decoration:none; display:inline-block; margin-right:2px; }
.v2-price .v2-price__off { font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--slv2-price-off); }
.v2-price .v2-price__tbd { font-size:12px; font-weight:600; color:var(--slv2-ink-3); }
.v2-price--lg .v2-price__now { font-size:26px; letter-spacing:-.026em; }
.v2-price--lg .v2-price__mrp { font-size:13px; }
@media (min-width: 1024px) {
  .v2-price .v2-price__now { font-size:20px; }
  .v2-price .v2-price__mrp { font-size:14px; }
  .v2-price .v2-price__off { font-size:12px; }
}

/* --------------------------------------------------------- focus & motion */
.v2-btn:focus-visible,
.v2-iconbtn:focus-visible,
.v2-chip:focus-visible,
.v2-more:focus-visible,
.v2-rail a:focus-visible {
  outline:2px solid var(--slv2-f500); outline-offset:2px; border-radius:var(--slv2-r-ui);
}

@media (prefers-reduced-motion: reduce) {
  .v2-btn, .v2-iconbtn { transition:none; }
  .v2-btn:active { transform:none; }
}

/* The live catalogue, settings and campaign state land in one bootstrap pass.
   Keep data-shaped routes in the layout but out of paint until that pass is
   complete, so their bundled fallback geometry cannot shift the visible page.
   The fixed status does not reserve or alter document flow. */
.page-main--settling {
  visibility:hidden;
  min-height:calc(100vh - 88px);
  min-height:calc(100svh - 88px);
}
.v2-data-settle {
  position:fixed; inset:50% auto auto 50%; z-index:55;
  display:flex; align-items:center; gap:9px;
  transform:translate(-50%, -50%);
  color:var(--slv2-ink-3); pointer-events:none;
  font:600 11px/1 var(--slv2-sans); letter-spacing:.08em;
  text-transform:uppercase; white-space:nowrap;
}
.v2-data-settle em { font:inherit; font-style:normal; }
.v2-data-settle > span {
  width:16px; height:16px; border:2px solid var(--slv2-line);
  border-top-color:var(--slv2-f600); border-radius:50%;
  animation:v2-data-settle-spin .7s linear infinite;
}
@keyframes v2-data-settle-spin { to { transform:rotate(1turn); } }
@media (prefers-reduced-motion: reduce) {
  .v2-data-settle > span { animation:none; }
}

/* ═══ src/styles/v2-header.css ═══ */
/* ============================================================================
   SORA LIFE V2 — ANNOUNCEMENT + HEADER
   Sharp geometry: the announcement bar and the header are edge-attached, so
   both are radius 0. Header icons are bare thin-line glyphs — no bubbles.
   ========================================================================= */

/* --------------------------------------------------------- announcement */
.v2-ann {
  background:var(--slv2-f800); color:#EFE7D6;
  border-radius:0;
  display:flex; align-items:center; justify-content:center;
  height:32px; padding:0 10px; overflow:hidden;
}
.v2-ann__viewport { display:flex; align-items:center; gap:10px; min-width:0; }
.v2-ann__item {
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--slv2-sans);
  font-size:10px; font-weight:600; letter-spacing:.085em; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  opacity:0; transform:translateY(4px);
  animation:v2-ann-in .5s ease forwards;
}
.v2-ann__item svg { color:var(--slv2-gold-2); flex:0 0 auto; }
.v2-ann__dots { display:none; }
@keyframes v2-ann-in { to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) {
  .v2-ann__item { animation:none; opacity:1; transform:none; }
}
@media (min-width: 768px) {
  .v2-ann { height:38px; }
  .v2-ann__viewport { gap:26px; }
  .v2-ann__item { font-size:11.5px; letter-spacing:.11em; }
}

/* --------------------------------------------------------------- header */
.v2-hdr {
  background:var(--slv2-ivory);
  border-bottom:1px solid var(--slv2-line-2);
  border-radius:0;
  position:sticky; top:0; z-index:60;
}
.v2-hdr__bar {
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  height:56px; gap:8px;
  width:100%; max-width:var(--slv2-container); margin-inline:auto;
  padding-inline:var(--slv2-gutter);
}
.v2-hdr__left  { display:flex; align-items:center; gap:16px; min-width:0; }
.v2-hdr__right { display:flex; align-items:center; justify-content:flex-end; gap:16px; min-width:0; }
.v2-hdr__brand { display:flex; align-items:center; justify-content:center; min-width:0; }

/* The Logo component is untouched; V2 only constrains its box here. */
.v2-hdr__brand .logo,
.v2-hdr__brand .logo--img { display:inline-flex; align-items:center; text-decoration:none; }
.v2-hdr__brand .logo__img { height:30px; width:auto; display:block; }
@media (min-width: 768px) { .v2-hdr__brand .logo__img { height:39px; } }
@media (min-width: 1024px) { .v2-hdr__brand .logo__img { height:46px; } }
@media (max-width: 359px) { .v2-hdr__brand .logo__img { height:25px; } }

/* Bare icon actions — square hit area, no container */
.v2-hdr__act {
  position:relative; display:inline-grid; place-items:center;
  width:28px; height:28px; color:var(--slv2-ink-2);
  background:none; border:0; padding:0; cursor:pointer; text-decoration:none;
  border-radius:var(--slv2-r-ui);
}
.v2-hdr__act::after { content:""; position:absolute; top:50%; left:50%; width:44px; height:44px; transform:translate(-50%,-50%); }
.v2-hdr__act:hover { color:var(--slv2-f700); }
.v2-hdr__act:focus-visible { outline:2px solid var(--slv2-f500); outline-offset:2px; }
/* V2-scoped responsive utilities. The legacy .only-mobile/.hide-mobile pair
   is single-class and loses to .v2-hdr__act's own display, so the header
   carries its own two-class versions instead. */
.v2-hdr__act.v2-only-mobile { display:inline-grid; }
.v2-hdr__act.v2-hide-mobile { display:none; }
@media (min-width: 901px) {
  .v2-hdr__act.v2-only-mobile { display:none; }
  .v2-hdr__act.v2-hide-mobile { display:inline-grid; }
}

.v2-hdr__count {
  position:absolute; top:-5px; right:-7px; min-width:15px; height:15px; padding:0 3px;
  background:var(--slv2-f700); color:var(--slv2-ivory);
  border-radius:var(--slv2-r-ui);            /* rectangular label, not a bubble */
  font-family:var(--slv2-sans);
  font-size:9px; font-weight:700; line-height:1;
  display:grid; place-items:center; font-variant-numeric:tabular-nums;
}

/* ---- desktop search field, sits in the left utility slot ---- */
.v2-hdr__search { display:none; position:relative; }
.v2-hdr__searchbox {
  display:flex; align-items:center; gap:9px;
  width:270px; height:40px; padding:0 12px;
  background:var(--slv2-cream); border:1px solid var(--slv2-line);
  border-radius:var(--slv2-r-ui);
}
.v2-hdr__searchbox input {
  flex:1; min-width:0; border:0; background:none; outline:none;
  font-family:var(--slv2-sans); font-size:12.5px; color:var(--slv2-ink);
}
.v2-hdr__searchbox input::placeholder { color:var(--slv2-ink-4); }
.v2-hdr__searchbox button { background:none; border:0; padding:0; display:grid; place-items:center; color:var(--slv2-ink-3); cursor:pointer; }
.v2-hdr__suggest {
  position:absolute; top:calc(100% + 6px); left:0; width:320px; z-index:70;
  background:var(--slv2-paper); border:1px solid var(--slv2-line);
  border-radius:var(--slv2-r-ui); overflow:hidden;
  box-shadow:var(--slv2-sh-hover);
}
.v2-hdr__suggest-item {
  display:grid; grid-template-columns:38px 1fr auto; gap:10px; align-items:center;
  padding:8px 12px; text-decoration:none; color:var(--slv2-ink);
  border-bottom:1px solid var(--slv2-line-2);
}
.v2-hdr__suggest-item:last-child { border-bottom:0; }
.v2-hdr__suggest-item:hover { background:var(--slv2-cream); }
.v2-hdr__suggest-thumb { width:38px; height:38px; overflow:hidden; border:1px solid var(--slv2-line-2); border-radius:var(--slv2-r-ui); }
.v2-hdr__suggest-name { font-size:12.5px; font-weight:500; line-height:1.3; }
.v2-hdr__suggest-price { font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; }
.v2-hdr__suggest-empty { padding:14px; font-size:12.5px; color:var(--slv2-ink-3); }

/* ---- desktop nav row ---- */
.v2-hdr__nav { display:none; }
@media (min-width: 901px) {
  .v2-hdr__bar { height:74px; }
  .v2-hdr__search { display:block; }
  .v2-hdr__nav {
    display:flex; justify-content:center; gap:30px;
    border-top:1px solid var(--slv2-line-2);
    padding:13px var(--slv2-gutter);
    max-width:var(--slv2-container); margin-inline:auto;
  }
  .v2-hdr__navitem { position:relative; }
  .v2-hdr__link {
    display:inline-flex; align-items:center; gap:5px;
    font-family:var(--slv2-sans);
    font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
    color:var(--slv2-ink-2); text-decoration:none;
    padding-bottom:2px; border-bottom:2px solid transparent; border-radius:0;
  }
  .v2-hdr__link:hover { color:var(--slv2-f700); }
  .v2-hdr__link.active { color:var(--slv2-f700); border-bottom-color:var(--slv2-f700); }
  .v2-hdr__mega {
    position:absolute; top:calc(100% + 13px); left:50%; transform:translateX(-50%);
    width:min(760px, 90vw); background:var(--slv2-paper);
    border:1px solid var(--slv2-line); border-radius:var(--slv2-r-ui);
    padding:20px; z-index:70; box-shadow:var(--slv2-sh-hover);
    opacity:0; visibility:hidden; transition:opacity .16s ease;
  }
  .v2-hdr__navitem:hover .v2-hdr__mega,
  .v2-hdr__navitem:focus-within .v2-hdr__mega { opacity:1; visibility:visible; }
  .v2-hdr__mega-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:2px 20px; }
  .v2-hdr__mega-cell { display:block; padding:9px 10px; text-decoration:none; border-radius:var(--slv2-r-ui); }
  .v2-hdr__mega-cell:hover { background:var(--slv2-cream); }
  .v2-hdr__mega-name { display:block; font-size:13px; font-weight:600; color:var(--slv2-ink); }
  .v2-hdr__mega-tag  { display:block; font-size:11px; color:var(--slv2-ink-4); margin-top:2px; }
  .v2-hdr__mega-all {
    display:inline-flex; align-items:center; gap:6px; margin-top:14px;
    font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
    color:var(--slv2-f700); text-decoration:none;
  }
}
@media (prefers-reduced-motion: reduce) { .v2-hdr__mega { transition:none; } }

/* Below the desktop breakpoint the mega panel must never paint. */
@media (max-width: 900px) { .v2-hdr__mega { display:none; } }
/* Mobile header: move brand from centered column toward the left */
@media (max-width:900px) {
  .v2-hdr__bar {
    grid-template-columns:auto 1fr auto;
  }

  .v2-hdr__brand {
    justify-content:flex-start;
    margin-left:8px;
  }
}

/* ---- the other storefronts: a quiet text link at the right of the bar,
   as the fashion header links back here (.fs-hdr__back). Desktop only —
   the drawer's "Stores" section carries them below 1100px (three short
   labels beside the search box, the logo and three icons need the room). ---- */
.v2-hdr__stores { display:none; }
@media (min-width: 1100px) {
  .v2-hdr__stores { display:inline-flex; align-items:center; gap:14px; padding-right:16px; border-right:1px solid var(--slv2-line); }
  .v2-hdr__store { display:inline-flex; align-items:center; gap:3px; font-family:var(--slv2-sans); font-size:12.5px; font-weight:600; color:var(--slv2-ink-3); text-decoration:none; white-space:nowrap; }
  .v2-hdr__store:hover { color:var(--slv2-f700); }
  .v2-hdr__store:focus-visible { outline:2px solid var(--slv2-f500); outline-offset:2px; }
}

/* Nav placeholder: holds a link's exact slot while the category list settles,
   so hydration cannot reflow the row or swap a label under the cursor. */
.v2-hdr__link--ph {
  position: relative;
  color: transparent;          /* reserves the label's exact width, unseen */
  pointer-events: none;
  user-select: none;
}
.v2-hdr__link--ph::after {     /* the visible "loading" bar */
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 11px;
  transform: translateY(-50%);
  border-radius: 2px;
  background: rgba(22, 33, 27, 0.11);
}
@media (prefers-reduced-motion: no-preference) {
  .v2-hdr__link--ph { transition: opacity .2s ease; }
}

/* ═══ src/styles/v2-card.css ═══ */
/* ============================================================================
   SORA LIFE V2 — PRODUCT MEDIA, PRODUCT CARD, COMPACT CARD
   Square-shouldered throughout. No resting shadow: separation is the hairline
   plus the surface step (paper #FFFDF8 on ivory #FBF8F1).
   ========================================================================= */

/* ---------------------------------------------------------- media frame */
/* The frame is square and sharp. `contain` is deliberate for TODAY's assets:
   the current catalogue is largely plain-background product photography and
   `cover` would crop real labels. The warm ground below is what makes a mixed
   catalogue read as one shoot without faking photography.
   When a product receives upgraded editorial imagery (stone plinth, warm cream
   environment, botanical context), add .v2-pimg--cover to that instance to
   switch it to full-bleed. Nothing else needs to change. */
.v2-pimg {
  position:relative; width:100%; aspect-ratio:1 / 1; overflow:hidden;
  border-radius:0;
  background:
    radial-gradient(118% 92% at 66% 10%, #FDFAF3 0%, #F6EFE1 46%, #EFE6D5 100%);
}
.v2-pimg img,
.v2-pimg picture { width:100%; height:100%; display:block; }
.v2-pimg img {
  object-fit: contain;
  object-position: center;
  padding: 0;
}
.v2-pimg--cover img { object-fit:cover; padding:0; }

/* Neutral fallback: warm ground + category wordmark. Never a grey box, never
   a broken-image glyph, never invented packaging. */
.v2-pimg__fallback {
  position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  padding:14px; color:var(--slv2-f600);
}
.v2-pimg__fallback b {
  display:block; font-family:var(--slv2-disp);
  font-size:13px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  opacity:.62;
}
.v2-pimg__fallback span {
  display:block; margin-top:5px; font-family:var(--slv2-sans);
  font-size:9px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--slv2-ink-4);
}

/* ---------------------------------------------------------- product card */
.v2-pc {
  position:relative; display:flex; flex-direction:column; height:100%;
  background:var(--slv2-paper);
  border:1px solid var(--slv2-line-2);
  border-radius:var(--slv2-r-ui);
  overflow:hidden;
  box-shadow:var(--slv2-sh-card);
  transition:border-color .2s ease, box-shadow .2s ease;
}
@media (hover: hover) {
  .v2-pc:hover { border-color:var(--slv2-line); box-shadow:var(--slv2-sh-hover); }
}

.v2-pc__media { position:relative; background:var(--slv2-cream); }
.v2-pc__media > a { display:block; }

.v2-pc__badges { position:absolute; top:8px; left:8px; z-index:4; display:flex; flex-direction:column; gap:4px; align-items:flex-start; }
.v2-pc__wish { position:absolute; top:8px; right:8px; z-index:4; width:26px; height:26px; }

.v2-pc__soldout {
  position:absolute; inset:auto 0 0; z-index:5;
  background:rgba(22,33,27,.74); color:#F2EDE1;
  font-family:var(--slv2-sans);
  font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  text-align:center; padding:5px 0;
}
.v2-pc.is-out .v2-pimg { filter:grayscale(.5) opacity(.66); }
.v2-pc.is-out .v2-pc__name { color:var(--slv2-ink-3); }

.v2-pc__body { padding:10px 10px 11px; display:flex; flex-direction:column; flex:1; }
.v2-pc__meta {
  font-family:var(--slv2-sans);
  font-size:9.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--slv2-ink-4); margin:0 0 5px; line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.v2-pc__name {
  font-family:var(--slv2-sans);
  font-size:12.5px; font-weight:600; line-height:1.32; letter-spacing:-.004em;
  margin:0 0 6px; color:var(--slv2-ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:33px;             /* keeps grid baselines aligned */
}
.v2-pc__name a { color:inherit; text-decoration:none; }
.v2-pc__name a:hover { color:var(--slv2-accent-primary-hover); }

.v2-pc__vars { display:flex; gap:4px; margin-bottom:7px; flex-wrap:wrap; }
.v2-pc__var {
  font-family:var(--slv2-sans);
  font-size:9.5px; font-weight:600; letter-spacing:.02em; padding:2px 6px;
  border-radius:var(--slv2-r-ui); border:1px solid var(--slv2-line);
  color:var(--slv2-ink-3); background:var(--slv2-ivory);
}
.v2-pc__note {
  font-family:var(--slv2-sans);
  font-size:9.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:#9A5A2E; margin-bottom:6px;
}

.v2-pc__foot { margin-top:auto; display:flex; flex-direction:column; gap:8px; padding-top:2px; }
.v2-pc__cta {
  display:flex; align-items:center; justify-content:center; gap:6px;
  width:100%; height:34px; border-radius:var(--slv2-r-ui);
  background:var(--slv2-cta-primary-bg); color:var(--slv2-cta-primary-text);
  border:1px solid var(--slv2-cta-primary-bg);
  font-family:var(--slv2-sans); font-size:12px; font-weight:600; letter-spacing:.005em;
  cursor:pointer; transition:background .18s ease;
}
.v2-pc__cta:hover { background:var(--slv2-cta-primary-hover); border-color:var(--slv2-cta-primary-hover); }
.v2-pc__cta:focus-visible { outline:2px solid var(--slv2-f500); outline-offset:2px; }
.v2-pc__cta--out { background:transparent; color:var(--slv2-ink-3); border-color:var(--slv2-line); }
.v2-pc__cta--out:hover { background:var(--slv2-cream); }

@media (min-width: 768px) {
  .v2-pc__body { padding:14px 14px 15px; }
  .v2-pc__meta { font-size:10px; margin-bottom:6px; }
  .v2-pc__name { font-size:14px; min-height:37px; margin-bottom:8px; }
  .v2-pc__cta { height:42px; font-size:13px; }
  .v2-pc__wish { width:32px; height:32px; top:10px; right:10px; }
  .v2-pc__badges { top:10px; left:10px; }
}
@media (min-width: 1024px) {
  .v2-pc__body { padding:16px 16px 17px; }
  .v2-pc__name { font-size:15px; min-height:40px; }
  .v2-pc__cta { height:46px; font-size:14px; }
}

/* ------------------------------------------- compact horizontal card
   Home recommendations now; PDP "Goes well with" and the cart upsell reuse
   this in later phases. */
.v2-cc {
  display:flex; flex-direction:row; gap:10px; padding:8px; align-items:center; height:100%;
  background:var(--slv2-paper);
  border:1px solid var(--slv2-line-2);
  border-radius:var(--slv2-r-ui);
  text-decoration:none; color:inherit;
  transition:border-color .2s ease;
}
@media (hover: hover) { .v2-cc:hover { border-color:var(--slv2-line); } }
.v2-cc__m { width:54px; height:54px; flex:0 0 auto; overflow:hidden; border-radius:var(--slv2-r-ui); }
.v2-cc__m .v2-pimg img { padding:0; }
.v2-cc__b { min-width:0; flex:1; }
.v2-cc__brand { font-family:var(--slv2-sans); font-size:8.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--slv2-ink-4); }
.v2-cc__n {
  font-family:var(--slv2-sans); font-size:11.5px; font-weight:600; line-height:1.3;
  margin:2px 0 4px; color:var(--slv2-ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.v2-cc__add {
  width:26px; height:26px; flex:0 0 auto; position:relative;
  display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--slv2-f500); color:var(--slv2-f600);
  background:transparent; border-radius:var(--slv2-r-ui); padding:0;
}
.v2-cc__add::after { content:""; position:absolute; top:50%; left:50%; width:44px; height:44px; transform:translate(-50%,-50%); }
.v2-cc__add:hover { background:var(--slv2-f50); }
.v2-cc__add:focus-visible { outline:2px solid var(--slv2-f500); outline-offset:2px; }
@media (min-width: 768px) {
  .v2-cc { padding:12px; gap:14px; }
  .v2-cc__m { width:76px; height:76px; }
  .v2-cc__n { font-size:14px; }
  .v2-cc__add { width:32px; height:32px; }
}

@media (prefers-reduced-motion: reduce) {
  .v2-pc, .v2-cc, .v2-pc__cta { transition:none; }
}

/* ═══ src/styles/v2-home.css ═══ */
/* ============================================================================
   SORA LIFE V2 — HOMEPAGE
   Product rails, editorial, story, trust strip.
   Image-led surfaces get --slv2-r-art (4px). Everything structural is 2px.
   ========================================================================= */

.v2-home { background:var(--slv2-ivory); padding-bottom:40px; }

/* ------------------------------------------------------------ promo slot */
@media (max-width: 767px) {
  .v2-home .v2-promo-slot .promo-section { padding-top:24px; }
}

/* ------------------------------------------------------- bestsellers grid */
.v2-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px 12px; }
.v2-grid > * { display:flex; flex-direction:column; }
@media (min-width: 768px) { .v2-grid { grid-template-columns:repeat(3, 1fr); gap:24px 20px; } }
@media (min-width: 1024px) { .v2-grid { grid-template-columns:repeat(4, 1fr); gap:24px; } }

/* The Bestsellers rail shows 2.2 cards so the partial card advertises the
   scroll. Above 768 it becomes a real grid. */
.v2-rail--cards > * { width:calc(50% - 26px); min-width:150px; }
@media (min-width: 560px) { .v2-rail--cards > * { width:calc(33.333% - 20px); } }
@media (min-width: 768px) {
  .v2-rail--cards { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; overflow:visible; margin-inline:0; padding-inline:0; }
  .v2-rail--cards > * { width:auto; min-width:0; }
}
@media (min-width: 1024px) { .v2-rail--cards { grid-template-columns:repeat(4, 1fr); gap:24px; } }

.v2-rail--compact > * { width:214px; }
@media (min-width: 768px) {
  .v2-rail--compact { display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; overflow:visible; margin-inline:0; padding-inline:0; }
  .v2-rail--compact > * { width:auto; }
}
@media (min-width: 1024px) { .v2-rail--compact { grid-template-columns:repeat(4, 1fr); } }

/* --------------------------------------------------------- editorial card */
.v2-ed {
  position:relative; width:214px; overflow:hidden;
  border:1px solid var(--slv2-line); border-radius:var(--slv2-r-art);
  background:var(--slv2-cream); text-decoration:none; display:block;
}
.v2-ed__media { position:relative; width:100%; aspect-ratio:214 / 134; overflow:hidden; }
.v2-ed__media .v2-pimg { height:100%; aspect-ratio:auto; }
.v2-ed__scrim {
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(90deg, rgba(247,242,232,.96) 4%, rgba(247,242,232,.7) 48%, rgba(247,242,232,0) 88%);
}
.v2-ed__ui { position:absolute; inset:0; z-index:3; padding:12px; display:flex; flex-direction:column; justify-content:space-between; width:76%; }
.v2-ed__k { font-family:var(--slv2-sans); font-size:9px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--slv2-ink-4); }
.v2-ed__h {
  font-family:var(--slv2-disp);
  font-size:16px; font-weight:500; line-height:1.13; letter-spacing:-.01em;
  margin:3px 0 0; color:var(--slv2-f900);
}
.v2-ed__note {
  font-family:var(--slv2-sans); font-size:10.5px; font-weight:600;
  color:var(--slv2-gold-ink); margin:4px 0 0;
}
.v2-ed__cta {
  font-family:var(--slv2-sans);
  font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--slv2-f700); display:inline-flex; align-items:center; gap:5px;
}
@media (min-width: 768px) {
  .v2-ed { width:auto; }
  .v2-ed__media { aspect-ratio:381 / 230; }
  .v2-ed__ui { padding:24px; width:70%; }
  .v2-ed__h { font-size:26px; margin-top:6px; }
  .v2-ed__k { font-size:11px; }
  .v2-ed__note {
  font-family:var(--slv2-sans); font-size:10.5px; font-weight:600;
  color:var(--slv2-gold-ink); margin:4px 0 0;
}
.v2-ed__cta { font-size:12px; }
}

/* -------------------------------------------------------------- story block */
.v2-story {
  display:grid; grid-template-columns:1fr 122px; overflow:hidden;
  border:1px solid var(--slv2-line); border-radius:var(--slv2-r-art);
  background:var(--slv2-cream); text-decoration:none; color:inherit;
}
.v2-story__b { padding:16px 4px 16px 16px; display:flex; flex-direction:column; justify-content:center; }
.v2-story__h {
  font-family:var(--slv2-disp);
  font-size:19px; font-weight:500; line-height:1.14; letter-spacing:-.012em;
  margin:5px 0 7px; color:var(--slv2-f900);
}
.v2-story__p { font-family:var(--slv2-sans); font-size:11.5px; line-height:1.55; color:var(--slv2-ink-3); margin:0 0 12px; }
.v2-story__lk {
  font-family:var(--slv2-sans);
  font-size:9.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--slv2-f700); display:inline-flex; align-items:center; gap:6px;
}
.v2-story__m { position:relative; overflow:hidden; }
.v2-story__m .v2-pimg { height:100%; aspect-ratio:auto; }
@media (min-width: 768px) {
  .v2-story { grid-template-columns:1fr 300px; }
  .v2-story__b { padding:32px 24px 32px 32px; }
  .v2-story__h { font-size:28px; }
  .v2-story__p { font-size:14px; max-width:46ch; }
}
@media (min-width: 1024px) {
  .v2-story { grid-template-columns:1fr 480px; }
  .v2-story__b { padding:44px 48px; }
  .v2-story__h { font-size:36px; line-height:1.12; letter-spacing:-.018em; margin:8px 0 12px; }
  .v2-story__p { font-size:15px; line-height:1.62; margin-bottom:22px; }
  .v2-story__lk { font-size:12px; }
}

/* -------------------------------------------------------------- trust strip */
.v2-trust {
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; overflow:hidden;
  background:var(--slv2-cream); border:1px solid var(--slv2-line);
  border-radius:var(--slv2-r-ui);
}
.v2-trust__it {
  display:flex; gap:9px; align-items:center; padding:13px 12px;
  border-bottom:1px solid var(--slv2-line); border-right:1px solid var(--slv2-line);
}
.v2-trust__it:nth-child(2n) { border-right:0; }
.v2-trust__it:nth-last-child(-n+2) { border-bottom:0; }
.v2-trust__it svg { color:var(--slv2-f500); flex:0 0 auto; }
.v2-trust__t { display:block; font-family:var(--slv2-sans); font-size:10.5px; font-weight:600; line-height:1.3; color:var(--slv2-ink); }
.v2-trust__s { display:block; font-family:var(--slv2-sans); font-size:9.5px; line-height:1.3; color:var(--slv2-ink-4); margin-top:1px; }
@media (min-width: 768px) {
  .v2-trust { grid-template-columns:repeat(4, 1fr); }
  .v2-trust__it { padding:22px 20px; gap:13px; border-bottom:0; }
  .v2-trust__it:nth-child(2n) { border-right:1px solid var(--slv2-line); }
  .v2-trust__it:last-child { border-right:0; }
  .v2-trust__t { font-size:14px; }
  .v2-trust__s { font-size:12px; margin-top:2px; }
}

/* --------------------------------------------------- promo slot on Home */
/* The promotions runtime, its components and promotions.css are all untouched.
   V2 only frames whatever the engine renders on THIS slot: it collapses the
   slot when nothing renders, and brings the promo chrome onto the locked
   geometry so Home has no rounded/pill leak. Scoped to .v2-promo-slot, so
   every other placement (PDP, Cart, Offers) keeps its current V1 look until
   its own phase. */
.v2-promo-slot:empty { display:none; }

.v2-promo-slot .promo-poster { border-radius:var(--slv2-r-art); }   /* image-led campaign */
.v2-promo-slot .promo-offer  { border-radius:var(--slv2-r-ui); }    /* structural card */
.v2-promo-slot .promo-poster__badge,
.v2-promo-slot .promo-poster__cta,
.v2-promo-slot .promo-offer__ic,
.v2-promo-slot .promo-code__row,
.v2-promo-slot .promo-code__copy,
.v2-promo-slot .promo-offer__cta { border-radius:var(--slv2-r-ui); }
/* .promo-poster__leaf is decorative artwork, not UI — its organic shape stays. */

/* ============================================================
   The homepage top (HomeStorefront.jsx): white with an orange accent — a
   palette of its own, scoped to .hx. No --slv2-* token is redefined and no
   rule here reaches outside .hx, so no other page or storefront changes.
   Orange and text, measured (WCAG 2.x): white on the deep orange #C2500A is
   4.72:1 (the buttons); the deep orange on white is 4.72:1 (the highlighted
   headline line); near-black #1D1D1B on the bright orange #F47B20 is 6.19:1
   (the Fashion tile). The bright orange never carries white text. The page is a very slight
   warm white (#FDFBF8), not flat pure white; the deep orange on it is 4.57:1.
   ============================================================ */
.hx { --hx-orange: #F47B20; --hx-orange-deep: #C2500A; --hx-ink: #1D1D1B; --hx-muted: #5C5853; --hx-soft: #F5F4F2; --hx-line: #ECE8E2; --hx-page: #FDFBF8; background: var(--hx-page); color: var(--hx-ink); }
.hx *, .hx *::before, .hx *::after { box-sizing: border-box; }
.hx a { color: inherit; text-decoration: none; }
.hx-wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 28px; }
.hx .hx-eyebrow { margin: 0 0 14px; font: 600 11px/1.6 var(--slv2-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--hx-ink); }
.hx .hx-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 26px; border-radius: 999px; background: var(--hx-orange-deep); color: #fff; font: 600 15px/1.2 var(--slv2-sans); white-space: nowrap; }
.hx .hx-btn--light { background: #fff; color: var(--hx-ink); }
.hx-btn svg { flex: none; transition: transform .3s ease; }
.hx :focus-visible { outline: 2px solid var(--hx-orange-deep); outline-offset: 3px; }

/* ---- the hero: the photograph right-aligned on white, its left edge feathered
   into the white; the copy over the empty left. Height from the width. ---- */
.hx-hero { position: relative; overflow: hidden; }
.hx-hero__viewport { overflow: hidden; touch-action: pan-y; }
.hx-hero__track { display: flex; transition: transform .6s ease; }
.hx-hero__slide { position: relative; display: flex; align-items: center; flex: 0 0 100%; min-width: 0; height: clamp(440px, 40vw, 600px); overflow: hidden; background: var(--hx-page); }
.hx-hero__image { position: absolute; top: 0; right: 0; width: auto; height: 100%; max-width: none; mix-blend-mode: multiply; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%); mask-image: linear-gradient(90deg, transparent 0, #000 14%); }
.hx-hero__copy { position: relative; z-index: 1; }
.hx-hero__copy > * { max-width: min(46%, 520px); }
.hx-hero__slide--biosash .hx-hero__copy > * { max-width: min(32%, 400px); }
.hx-hero__title { margin: 0 0 28px; font-family: var(--slv2-disp); font-size: clamp(38px, 4.4vw, 60px); font-weight: 500; line-height: 1.06; letter-spacing: -.02em; color: var(--hx-ink); }
.hx-hero__title span { display: block; }
.hx .hx-hl { color: var(--hx-orange-deep); }
.hx-hero__dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 4px; }
.hx-hero__dot { position: relative; width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.hx-hero__dot::after { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: #CFCAC3; }
.hx-hero__dot.is-on::after { background: var(--hx-orange); }

/* ---- the trust strip: four facts in a row ---- */
.hx-trust { border-block: 1px solid var(--hx-line); }
.hx-trust__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-block: 0; padding-block: 18px; list-style: none; }
.hx-trust__list li { display: flex; justify-content: center; min-width: 0; border-right: 1px solid var(--hx-line); }
.hx-trust__list li:last-child { border-right: 0; }
.hx-trust__list a, .hx-trust__item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 12px; }
.hx-trust svg { flex: none; color: var(--hx-orange-deep); }
.hx-trust strong { display: block; font: 600 14px/1.3 var(--slv2-sans); }
.hx-trust small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.3; color: var(--hx-muted); }

/* ---- the tiles: Fashion, large, beside two stacked ---- */
.hx-tiles { padding-block: 32px 8px; }
.hx-tiles__grid { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: repeat(2, minmax(208px, auto)); gap: 16px; }
.hx-tile { position: relative; isolation: isolate; display: block; min-width: 0; overflow: hidden; border-radius: 16px; background: var(--hx-soft); }
.hx-tile__h { margin: 0; font-family: var(--slv2-disp); font-weight: 500; letter-spacing: -.01em; color: var(--hx-ink); }
.hx-tile__h span { display: block; }
.hx-tile__image { transition: transform .5s ease; }
/* The panel is the portrait's own orange — sampled down its left edge (it darkens a little toward
   the foot) — so the photograph, used exactly as supplied, meets it without a line. */
.hx-tile--fashion { grid-row: 1 / 3; display: grid; grid-template-columns: 46% 54%; min-height: 432px; background: linear-gradient(180deg, #F17B24 0%, #F37F27 21%, #F27D25 52%, #EF771F 73%, #ED731B 94%, #EB7019 100%); }
.hx-tile__panel { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 26px; padding: 32px; }
.hx-tile--fashion .hx-tile__h { font-size: clamp(30px, 3.2vw, 46px); line-height: 1.06; }
.hx-tile__art { position: relative; display: block; overflow: hidden; }
.hx-tile__art .hx-tile__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right top; }
.hx-tile--small { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 24px; min-height: 208px; }
.hx-tile--small .hx-tile__image { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.hx-tile--small .hx-tile__h { font-size: clamp(22px, 2vw, 28px); line-height: 1.15; }
.hx-tile__go { display: grid; place-items: center; width: 42px; height: 42px; border: 1.5px solid var(--hx-ink); border-radius: 50%; transition: transform .3s ease; }

/* ---- explore the stores: six circles ---- */
.hx-stores { padding-block: 44px 16px; }
.hx-stores__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.hx-stores__h { margin: 0; font-family: var(--slv2-disp); font-size: clamp(26px, 2.6vw, 34px); font-weight: 500; line-height: 1.15; color: var(--hx-ink); }
.hx-stores__h::after { content: ''; display: block; width: 44px; height: 3px; margin-top: 10px; border-radius: 2px; background: var(--hx-orange); }
.hx .hx-more { display: inline-flex; align-items: center; gap: 6px; padding-block: 4px; font: 600 15px/1.2 var(--slv2-sans); color: var(--hx-orange-deep); white-space: nowrap; }
.hx-stores__row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.hx-store { display: grid; justify-items: center; gap: 12px; text-align: center; }
.hx-store__art { display: block; width: min(100%, 160px); aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: #F1EFEC; }
/* The shots are on white: multiplied onto the disc, the white takes the disc's grey and the circle reads. */
.hx-store__image { display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transition: transform .5s ease; }
.hx-store__name { font: 500 15px/1.3 var(--slv2-sans); }

/* ---- the promo strip: the copy in the photograph's clear centre ---- */
.hx-promo { padding-block: 28px 44px; }
.hx-promo__card { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; height: clamp(220px, 22vw, 300px); overflow: hidden; border-radius: 16px; background: #F6EFE6; text-align: center; }
.hx-promo__image { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hx-promo__copy { display: grid; justify-items: center; gap: 10px; max-width: 46%; padding: 20px; }
.hx-promo__h { margin: 0; font-family: var(--slv2-disp); font-size: clamp(28px, 3vw, 42px); font-weight: 500; line-height: 1.1; color: var(--hx-ink); }
.hx-promo__text { margin: 0 0 8px; font-size: 15px; line-height: 1.5; color: var(--hx-muted); }

/* ---- the jewellery banner, under the fashion category strip: full-bleed and square-edged like
   the Lifestyle banner above it — the photograph fills it and every word sits on its empty ivory,
   in near-black: the copy over the plain left 45% of the wide shot. The height comes from the width
   at the photograph's own 1891:831 (no aspect-ratio with a min/max height), so it is never cropped
   between 683px and 1548px and the copy never reaches the jewellery. ---- */
.hx-jewel { background: #F4EEE4; }
.hx-jewel__link { position: relative; isolation: isolate; display: flex; align-items: center; height: clamp(300px, 43.94vw, 680px); overflow: hidden; }
.hx-jewel__art { position: absolute; inset: 0; z-index: -1; display: block; overflow: hidden; }
.hx-jewel__art picture { display: block; width: 100%; height: 100%; }
.hx-jewel__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right center; transition: transform .6s ease; }
.hx-jewel__copy { width: min(40%, 470px); margin-left: max(28px, calc((100% - 1240px) / 2)); }
.hx-jewel__eyebrow { margin: 0 0 16px; font-size: 11px; font-weight: 500; line-height: 1.5; letter-spacing: .18em; text-transform: uppercase; color: var(--hx-ink); }
.hx-jewel__h { margin: 0; font-family: 'Inter', sans-serif; font-size: clamp(28px, 4.2vw, 62px); font-weight: 400; line-height: 1.04; letter-spacing: -.01em; text-transform: uppercase; color: var(--hx-ink); }
.hx-jewel__h span { display: block; }
.hx-jewel__text { max-width: 340px; margin: 22px 0 28px; font-size: 14px; line-height: 1.65; color: var(--hx-muted); }
.hx-jewel__cta { display: inline-flex; align-items: center; gap: 12px; min-height: 46px; padding: 12px 26px; background: var(--hx-ink); color: #fff; font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: .02em; }
.hx-jewel__cta svg { flex: none; transition: transform .3s ease; }
.hx .hx-jewel__link:focus-visible { outline: 2px solid var(--hx-ink); outline-offset: -6px; }

@media (hover: hover) and (pointer: fine) {
  .hx .hx-btn:hover svg, .hx-tile:hover .hx-tile__go { transform: translateX(3px); }
  .hx-tile:hover .hx-tile__image, .hx-store:hover .hx-store__image { transform: scale(1.04); }
  .hx-jewel__link:hover .hx-jewel__image { transform: scale(1.02); }
  .hx-jewel__link:hover .hx-jewel__cta svg { transform: translateX(4px); }
}
@media (min-width: 701px) and (max-width: 1023px) {
  /* At these widths the wide lineup (slide 1) reaches further left than the copy: the headline
     wraps ("everyday / wellbeing.") and stays clear of its props. */
  .hx-hero__slide--everyday .hx-hero__copy > .hx-hero__title { max-width: 40%; }
}
@media (max-width: 700px) {
  .hx-wrap { padding-inline: 16px; }
  /* The hero, as in the mockup: ONE compact block. Eyebrow, headline and button in the left
     45%; the lineup fills the right of the same block to its edge (the photograph's empty
     white runs under the copy); the dots at its foot, over the photograph. */
  .hx-hero__slide { height: clamp(190px, 51vw, 340px); }
  /* The narrower lineup (slide 2) a little larger, anchored at the foot, so it starts at the 45%
     line; the wide lineup (slide 1) stays at the block's height, its props clear of the copy. */
  .hx-hero__slide--biosash .hx-hero__image { top: auto; bottom: 0; height: 116%; }
  .hx-hero__copy > *, .hx-hero__slide--biosash .hx-hero__copy > * { max-width: 46%; }
  .hx-hero__copy > .hx-eyebrow { max-width: 64%; }
  .hx-hero__slide--biosash .hx-hero__copy > .hx-hero__title { max-width: 36%; }
  .hx .hx-eyebrow { margin-bottom: 8px; font-size: 9.5px; line-height: 1.45; letter-spacing: .1em; }
  .hx-eyebrow > span { display: block; }
  .hx-eyebrow__dot { display: none; }
  .hx-hero__title { margin-bottom: 12px; font-size: clamp(18px, 5.2vw, 30px); line-height: 1.12; }
  .hx .hx-btn { min-height: 34px; gap: 6px; padding: 7px 14px; font-size: 12.5px; }
  .hx .hx-btn svg { width: 14px; height: 14px; }
  .hx-hero__dots { left: 50%; right: auto; bottom: 0; gap: 0; }
  .hx-hero__dot { width: 22px; height: 22px; }
  .hx-hero__dot::after { inset: 7px; }
  /* One row of four across the full width, as in the mockup: each item its icon and two short
     lines beside it (a title in two parts drops its note). Where four cannot fit (under about
     340px) the row scrolls, the cut item at the edge its cue. */
  .hx-trust { border-block: 0; }
  .hx-trust__list { display: flex; justify-content: space-between; padding-block: 8px; overflow-x: auto; scrollbar-width: none; }
  .hx-trust__list li { flex: 1 1 auto; }
  .hx-trust__list li:first-child { justify-content: flex-start; }
  .hx-trust__list li:last-child { justify-content: flex-end; }
  .hx-trust__list a, .hx-trust__item { gap: 5px; min-height: 34px; padding: 0 5px; }
  .hx-trust__list li:first-child > * { padding-left: 0; }
  .hx-trust__list li:last-child > * { padding-right: 0; }
  .hx-trust svg { width: 19px; height: 19px; }
  .hx-trust strong, .hx-trust small { margin: 0; font: 500 clamp(8.5px, 2.5vw, 11px)/1.3 var(--slv2-sans); color: var(--hx-ink); white-space: nowrap; }
  .hx-trust strong > span { display: block; }
  .hx-trust--split small { display: none; }
  .hx-tiles { padding-block: 8px 0; }
  /* Side by side, as in the mockup: Fashion the wider left tile at full height, the two others
     stacked to its right, each half its height. */
  .hx-tiles__grid { grid-template-columns: minmax(0, 1.17fr) minmax(0, 1fr); grid-template-rows: repeat(2, clamp(72px, 19.5vw, 140px)); gap: 8px; }
  .hx-tile { border-radius: 10px; }
  /* Fashion is ONE tile: the portrait (shot on orange) fills it from the right with her head at
     its top edge; the headline and the white button over the orange on the left. */
  .hx-tile--fashion { display: block; min-height: 0; background: linear-gradient(180deg, #F17B24 0%, #F37F27 30%, #F37E26 60%, #F27D25 75%, #F17B22 90%, #F07920 100%); }
  .hx-tile--fashion .hx-tile__art { position: absolute; inset: 0; }
  .hx-tile__art .hx-tile__image { inset: 0 0 auto auto; width: auto; max-width: none; height: 150%; }
  .hx-tile__panel { position: relative; z-index: 1; height: 100%; justify-content: center; gap: 10px; padding: 12px; }
  .hx-tile--fashion .hx-tile__h { font-size: clamp(17px, 4.9vw, 28px); line-height: 1.05; }
  .hx .hx-tile--fashion .hx-btn { min-height: 30px; gap: 5px; padding: 6px 11px; font-size: 11.5px; }
  /* Each photograph whole, at the tile's height on the right, its white multiplied into the
     tile's grey; the label at the top left, the round arrow under it. */
  .hx-tile--small { min-height: 0; padding: 8px 10px; }
  .hx-tile--small .hx-tile__image { inset: -8% 0 auto auto; width: auto; height: 116%; mix-blend-mode: multiply; }
  .hx-tile--small .hx-tile__h { position: relative; font-size: clamp(13px, 3.6vw, 20px); line-height: 1.12; }
  .hx-tile__go { position: relative; width: 24px; height: 24px; border-width: 1.2px; }
  .hx-tile__go svg { width: 12px; height: 12px; }
  /* Six circles in one row, the heading and "View All" on one line above them. */
  .hx-stores { padding-block: 18px 2px; }
  .hx-stores__head { margin-bottom: 12px; }
  .hx-stores__h { font-size: 19px; }
  .hx-stores__h::after { width: 26px; height: 2.5px; margin-top: 6px; }
  .hx .hx-more { gap: 4px; font-size: 12.5px; }
  .hx-stores__row { gap: 8px; }
  /* Each circle its column's width. Six columns leave a two-word name no room on one line, so it
     breaks between its words (Personal / Care, Home / Textiles) and no two names run together. */
  .hx-store { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; }
  .hx-store__name { font-size: clamp(9.5px, 2.75vw, 13px); line-height: 1.25; }
  /* The whole photograph, uncropped at its own 3:1: the gift box on the left, the diya and
     marigolds on the right, the copy in the clear centre between them. */
  .hx-promo { padding-block: 14px 26px; }
  .hx-promo__card { height: auto; aspect-ratio: 3 / 1; border-radius: 10px; text-align: left; }
  .hx-promo__copy { position: absolute; inset: 0 19% 0 31%; max-width: none; align-content: center; justify-items: start; gap: 4px; padding: 0; }
  .hx-promo__h { font-size: clamp(16px, 4.7vw, 26px); }
  .hx-promo__text { margin: 0 0 4px; font-size: clamp(9.5px, 2.7vw, 13px); line-height: 1.35; }
  .hx.hx-promo .hx-btn { min-height: 28px; gap: 5px; padding: 5px 12px; font-size: 11.5px; }
  /* The jewellery banner: the 4:5 portrait whole, the copy over its clear upper half. */
  .hx-jewel__link { align-items: flex-start; height: auto; aspect-ratio: 4 / 5; }
  .hx-jewel__copy { width: auto; margin: 0; padding: 22px 16px 0; }
  .hx-jewel__eyebrow { margin-bottom: 8px; }
  .hx-jewel__h { font-size: clamp(26px, 7.4vw, 34px); }
  .hx-jewel__text { max-width: 32ch; margin: 10px 0 16px; font-size: 13px; line-height: 1.55; }
  .hx-jewel__cta { min-height: 44px; padding: 10px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-hero__track, .hx-tile__image, .hx-store__image, .hx-btn svg, .hx-tile__go, .hx-jewel__image, .hx-jewel__cta svg { transition: none; }
  .hx .hx-btn:hover svg, .hx-tile:hover .hx-tile__go, .hx-tile:hover .hx-tile__image, .hx-store:hover .hx-store__image, .hx-jewel__link:hover .hx-jewel__image, .hx-jewel__link:hover .hx-jewel__cta svg { transform: none; }
}

/* ═══ src/styles/v2-shop.css ═══ */
/* ============================================================================
   SORA LIFE V2 — SHOP / PRODUCT LISTING (Phase 2)
   Same namespace rules as Phase 1: --slv2-* tokens, v2-* classes, no existing
   selector edited, no !important. Geometry is the locked 0 / 2 / 4.

   Header, ProductCard, price hierarchy and the media contract are frozen and
   reused as-is — this sheet only styles the listing chrome around them.
   ========================================================================= */

.v2-shop { background:var(--slv2-ivory); padding-bottom:40px; }

/* ------------------------------------------------------------- page head
   Deliberately compact: on a phone the job is to get products above the fold,
   so the head carries a breadcrumb, the title and nothing else. */
.v2-shop__head { padding-top:14px; }
.v2-crumbs {
  display:flex; align-items:center; gap:6px;
  font-family:var(--slv2-sans); font-size:11px; letter-spacing:.03em;
  color:var(--slv2-ink-4); margin:0 0 6px;
}
.v2-crumbs a { color:var(--slv2-ink-4); text-decoration:none; }
.v2-crumbs a:hover { color:var(--slv2-accent-primary-hover); }
.v2-crumbs svg { opacity:.6; }
.v2-crumbs strong { color:var(--slv2-ink-2); font-weight:600; }
/* Sans, matching .hd-title on the Homepage and the About/Legal headings.
   The display serif is now reserved for the wordmark; every page heading is Inter, so
   Shop no longer reads as a different site from the page that links to it. */
.v2-shop__title {
  font-family:var(--slv2-sans);
  font-size:26px; font-weight:700; letter-spacing:-.022em; line-height:1.15;
  margin:0; color:var(--slv2-ink);
}
.v2-shop__lede { display:none; }
.v2-shop__eyebrow { margin-bottom:3px; }
/* The concern count. Unlike the lede this stays visible on a phone: it is the
   page's whole promise ("Acne Care — 4 products"), not supporting copy. */
.v2-shop__count {
  margin:6px 0 0; font-family:var(--slv2-sans); font-size:13px;
  letter-spacing:.01em; color:var(--slv2-ink-3);
}

@media (min-width: 768px) {
  .v2-shop__head { padding-top:22px; }
  .v2-shop__title { font-size:34px; }
  .v2-shop__count { font-size:14px; margin-top:8px; }
  .v2-shop__lede {
    display:block; font-family:var(--slv2-sans);
    font-size:14.5px; line-height:1.6; color:var(--slv2-ink-3);
    margin:10px 0 0; max-width:62ch;
  }
}

/* ---------------------------------------------------------------- search
   Expanded field on phone/tablet only — from 901px the V2 header carries the
   270px search, so a second field would be duplication. */
.v2-shop__search { margin-top:12px; }
.v2-searchbox {
  display:flex; align-items:center; gap:9px;
  height:44px; padding:0 12px;
  background:var(--slv2-cream); border:1px solid var(--slv2-line);
  border-radius:var(--slv2-r-ui);
}
.v2-searchbox:focus-within { border-color:var(--slv2-f500); }
.v2-searchbox svg { color:var(--slv2-ink-3); flex:0 0 auto; }
.v2-searchbox input {
  flex:1; min-width:0; border:0; background:none; outline:none;
  font-family:var(--slv2-sans); font-size:13px; color:var(--slv2-ink);
}
.v2-searchbox input::placeholder { color:var(--slv2-ink-4); }
.v2-searchbox__clear {
  flex:0 0 auto; display:grid; place-items:center; width:24px; height:24px;
  border:0; background:none; padding:0; cursor:pointer; color:var(--slv2-ink-4);
  border-radius:var(--slv2-r-ui);
}
.v2-searchbox__clear:hover { color:var(--slv2-ink-2); }
.v2-searchbox__clear:focus-visible,
.v2-searchbox input:focus-visible { outline:2px solid var(--slv2-f500); outline-offset:2px; }
@media (min-width: 901px) { .v2-shop__search { display:none; } }

/* -------------------------------------------------- category navigation
   Rectangular tabs on a scroll rail. No pills, no bubbles. */
.v2-shop__cats { margin-top:12px; }
.v2-shop__cats .v2-chip { text-decoration:none; }
.v2-shop__cats .v2-chip:focus-visible { outline:2px solid var(--slv2-f500); outline-offset:2px; }

/* -------------------------------------------------- filter | count | sort
   Sticky under the frozen V2 header. Edge-attached, so radius 0. */
.v2-flt {
  position:sticky; top:57px; z-index:40;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px;
  height:44px; border-radius:0;
  background:var(--slv2-ivory);
  border-top:1px solid var(--slv2-line-2);
  border-bottom:1px solid var(--slv2-line-2);
  margin-top:14px;
}
/* Both controls fill the 44px row rather than sitting as a 19px text run in
   the middle of it — the row was already the right size, the hit areas were
   not, so a thumb could miss the control it was clearly aiming at. */
.v2-flt__btn {
  display:inline-flex; align-items:center; gap:6px; height:100%;
  background:none; border:0; padding:0 2px; cursor:pointer;
  font-family:var(--slv2-sans); font-size:12px; font-weight:600; letter-spacing:.02em;
  color:var(--slv2-ink-2); border-radius:var(--slv2-r-ui);
}
.v2-flt__btn svg { color:var(--slv2-ink-3); }
.v2-flt__btn:hover { color:var(--slv2-accent-primary-hover); }
.v2-flt__btn:focus-visible { outline:2px solid var(--slv2-f500); outline-offset:3px; }
.v2-flt__n {
  display:inline-grid; place-items:center; min-width:16px; height:16px; padding:0 4px;
  background:var(--slv2-accent-primary); color:var(--slv2-ivory);
  border-radius:var(--slv2-r-ui);
  font-size:9px; font-weight:700; font-variant-numeric:tabular-nums;
}
.v2-flt__count {
  text-align:center; font-family:var(--slv2-sans); font-size:11.5px;
  color:var(--slv2-ink-4); letter-spacing:.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-variant-numeric:tabular-nums;
}
.v2-flt__count strong { color:var(--slv2-ink-2); font-weight:700; }
.v2-flt__sort { position:relative; display:inline-flex; align-items:center; gap:6px; justify-self:end; height:100%; }
.v2-flt__sort select {
  appearance:none; -webkit-appearance:none; height:100%;
  border:0; background:none; padding:0 18px 0 0; margin:0; cursor:pointer;
  font-family:var(--slv2-sans); font-size:12px; font-weight:600; color:var(--slv2-ink-2);
  border-radius:var(--slv2-r-ui);
}
.v2-flt__sort svg { position:absolute; right:0; pointer-events:none; color:var(--slv2-ink-3); }
.v2-flt__sort select:focus-visible { outline:2px solid var(--slv2-f500); outline-offset:3px; }

/* ------------------------------------------------------------ promo slot
   The promotions runtime is untouched. This renders only when the engine
   returns a real, active, in-window promotion for this surface — and nothing
   at all otherwise. */
.v2-shop__promo:empty { display:none; }
.v2-shop__promo { margin-top:16px; }
.v2-shop__promo .promo-section { padding:0; }
.v2-shop__promo .promo-section .container { padding-inline:0; max-width:none; }
.v2-shop__promo .promo-poster { border-radius:var(--slv2-r-art); }
.v2-shop__promo .promo-offer { border-radius:var(--slv2-r-ui); }
.v2-shop__promo .promo-poster__badge,
.v2-shop__promo .promo-poster__cta,
.v2-shop__promo .promo-offer__ic,
.v2-shop__promo .promo-code__row,
.v2-shop__promo .promo-code__copy,
.v2-shop__promo .promo-offer__cta { border-radius:var(--slv2-r-ui); }

/* ------------------------------------------------------------------ grid */
.v2-shop__grid { display:grid; grid-template-columns:1fr 1fr; gap:16px 12px; margin-top:16px; }
.v2-shop__grid > * { display:flex; flex-direction:column; }
@media (max-width: 359px) { .v2-shop__grid { gap:14px 10px; } }

/* ------------------------------------------------------------ empty state */
.v2-shop__empty {
  margin-top:24px; padding:36px 20px; text-align:center;
  background:var(--slv2-cream); border:1px solid var(--slv2-line);
  border-radius:var(--slv2-r-ui);
}
.v2-shop__empty svg { color:var(--slv2-f500); opacity:.7; }
.v2-shop__empty h2 {
  font-family:var(--slv2-sans);
  font-size:19px; font-weight:700; margin:12px 0 6px; color:var(--slv2-ink);
}
.v2-shop__empty p { font-family:var(--slv2-sans); font-size:13px; color:var(--slv2-ink-3); margin:0 0 18px; }

/* ==========================================================================
   DESKTOP — persistent filter rail + wider grid
   ========================================================================= */
.v2-shop__body { display:block; }

@media (min-width: 901px) {
  .v2-flt { top:136px; }                       /* clears the complete V2 header */
  /* the persistent rail IS the filter UI on desktop, so the drawer trigger
     would be a second control for the same job */
  .v2-flt { grid-template-columns:1fr auto; }
  .v2-flt__btn { display:none; }
  .v2-flt__count { text-align:left; }
  .v2-shop__body {
    display:grid; grid-template-columns:264px 1fr; gap:36px;
    align-items:start; margin-top:20px;
  }
  .v2-shop__rail {
    position:sticky; top:196px;
    max-height:calc(100vh - 212px);
    max-height:calc(100dvh - 212px);
    overflow-y:auto; overscroll-behavior:contain;
  }
  .v2-shop__grid { grid-template-columns:repeat(3, 1fr); gap:24px 20px; margin-top:0; }
  .v2-flt { margin-top:12px; }
}
@media (min-width: 1200px) {
  .v2-shop__grid { grid-template-columns:repeat(4, 1fr); gap:24px; }
}
@media (min-width: 768px) and (max-width: 900px) {
  .v2-shop__grid { grid-template-columns:repeat(3, 1fr); gap:24px 20px; }
}

/* --------------------------------------------------------- filter panel */
.v2-fp { border:1px solid var(--slv2-line); border-radius:var(--slv2-r-ui); background:var(--slv2-paper); overflow:hidden; }
.v2-fp__head {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:13px 16px; border-bottom:1px solid var(--slv2-line-2);
}
.v2-fp__head h2 {
  font-family:var(--slv2-sans); font-size:11.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; margin:0; color:var(--slv2-ink);
}
.v2-fp__clear {
  background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--slv2-sans); font-size:11px; font-weight:600;
  color:var(--slv2-f600); text-decoration:underline; text-underline-offset:2px;
  border-radius:var(--slv2-r-ui);
}
.v2-fp__clear:focus-visible { outline:2px solid var(--slv2-f500); outline-offset:2px; }
.v2-fp__g { padding:15px 16px; border-bottom:1px solid var(--slv2-line-2); }
.v2-fp__g:last-child { border-bottom:0; }
.v2-fp__t {
  display:block; font-family:var(--slv2-sans); font-size:12px; font-weight:700;
  color:var(--slv2-ink); margin-bottom:11px;
}
.v2-check {
  display:flex; align-items:center; gap:10px; cursor:pointer;
  min-height:44px; padding:5px 0;
  font-family:var(--slv2-sans); font-size:13px; color:var(--slv2-ink-2);
}
.v2-check input { position:absolute; opacity:0; width:0; height:0; }
.v2-check__box {
  width:15px; height:15px; flex:0 0 auto; display:grid; place-items:center;
  border:1px solid var(--slv2-line); background:var(--slv2-ivory);
  border-radius:var(--slv2-r-ui); color:transparent;
}
.v2-check input:checked + .v2-check__box {
  background:var(--slv2-accent-primary); border-color:var(--slv2-accent-primary); color:var(--slv2-ivory);
}
.v2-check input:focus-visible + .v2-check__box { outline:2px solid var(--slv2-f500); outline-offset:2px; }
.v2-fp__prices { display:grid; grid-template-columns:1fr; }
.v2-fp__price {
  min-height:44px; padding:7px 0; text-align:left; cursor:pointer;
  border:0; border-bottom:1px solid var(--slv2-line-2); background:none;
  font-family:var(--slv2-sans); font-size:12.5px; color:var(--slv2-ink-2);
}
.v2-fp__price:last-child { border-bottom:0; }
.v2-fp__price::before {
  content:''; display:inline-block; width:14px; height:14px; margin-right:10px;
  vertical-align:-2px; border:1px solid var(--slv2-line); background:var(--slv2-ivory);
  border-radius:var(--slv2-r-ui);
}
.v2-fp__price.is-on { color:var(--slv2-ink); font-weight:700; }
.v2-fp__price.is-on::before { background:var(--slv2-accent-primary); border-color:var(--slv2-accent-primary); box-shadow:inset 0 0 0 3px var(--slv2-ivory); }
.v2-fp__price:focus-visible { outline:2px solid var(--slv2-f500); outline-offset:2px; }

/* ------------------------------------------------------- filter drawer */
.v2-fd {
  position:fixed; inset:0; z-index:80; visibility:hidden;
  /* The closed panel is translated one full panel-width beyond the right
     edge. Clip that intentional off-canvas state so it cannot enlarge the
     document scrollport; the inner filter rail remains independently scrollable. */
  overflow:hidden;
}
.v2-fd.is-open { visibility:visible; }
.v2-fd__scrim {
  position:absolute; inset:0; background:rgba(22,33,27,.44);
  opacity:0; transition:opacity .22s ease;
}
.v2-fd.is-open .v2-fd__scrim { opacity:1; }
.v2-fd__panel {
  position:absolute; inset:0 0 0 auto; width:min(360px, 88vw);
  display:flex; flex-direction:column;
  background:var(--slv2-ivory); border-left:1px solid var(--slv2-line);
  border-radius:0;                                  /* edge-attached */
  transform:translateX(100%); transition:transform .26s ease;
}
.v2-fd.is-open .v2-fd__panel { transform:none; }
.v2-fd__top {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--slv2-line-2); flex:0 0 auto;
}
.v2-fd__top h2 {
  font-family:var(--slv2-sans); font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; margin:0;
}
.v2-fd__scroll { flex:1; overflow-y:auto; padding:14px 16px; overscroll-behavior:contain; }
.v2-fd__scroll .v2-fp { border:0; }
.v2-fd__scroll .v2-fp__head { display:none; }
.v2-fd__scroll .v2-fp__g { padding-inline:0; }
.v2-fd__foot {
  flex:0 0 auto; display:grid; grid-template-columns:auto 1fr; gap:10px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--slv2-line); background:var(--slv2-ivory);
}
.v2-fd__foot .v2-btn { min-height:44px; }
@media (prefers-reduced-motion: reduce) {
  .v2-fd__scrim, .v2-fd__panel { transition:none; }
}
@media (min-width: 901px) { .v2-fd { display:none; } }

/* ═══ src/styles/v2-pdp.css ═══ */
/* ============================================================================
   SORA LIFE V2 — PRODUCT DETAIL
   PDP-only namespace. Existing commerce callbacks and data contracts remain in
   Product.jsx; this sheet supplies the approved cream / forest presentation.
   Geometry is the V2 0 / 2 / 4 system and all configurable colour touchpoints
   consume the existing Admin-to---slv2 bridge from v2-foundation.css.
   ========================================================================= */

.v2-pdp-root {
  min-height:100vh;
  background:var(--slv2-ivory);
  color:var(--slv2-ink);
  font-family:var(--slv2-sans);
  padding-bottom:18px;
}
.v2-pdp-loading {
  padding-block:32px 72px;
  background:var(--slv2-ivory);
}

/* --------------------------------------------------------------- page trail */
.v2-pdp-root .pdp-top {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-top:10px; padding-bottom:9px;
}
.v2-pdp-root .v2-crumbs {
  flex:1; min-width:0; margin:0;
  white-space:nowrap; overflow:hidden;
}
.v2-pdp-root .v2-crumbs span {
  min-width:0; overflow:hidden; text-overflow:ellipsis;
  color:var(--slv2-ink-2); font-weight:600;
}
.v2-pdp-root .pdp-back {
  min-width:44px; min-height:40px; padding:0 7px;
  border:1px solid var(--slv2-line); border-radius:var(--slv2-r-ui);
  color:var(--slv2-ink-2); background:var(--slv2-paper);
  font-family:var(--slv2-sans); font-size:11px; letter-spacing:.02em;
}

/* ---------------------------------------------------------- gallery + buy */
.v2-pdp-root .pdp.v2-wrap {
  display:grid; grid-template-columns:minmax(0, 1fr); gap:0;
  align-items:start; padding-block:0 24px;
}
.v2-pdp-root .pdp__gallery,
.v2-pdp-root .pdp__gallery--single {
  position:static; display:block; min-width:0;
  margin-inline:calc(-1 * var(--slv2-gutter));
}
.v2-pdp-root .pdp__main {
  position:relative; order:0; overflow:hidden; touch-action:pan-y;
  border:0; border-radius:0; box-shadow:none;
  background:var(--slv2-cream);
}
.v2-pdp-root .pdp__main .v2-pimg { border-radius:0; }
.v2-pdp-root .pdp__main .v2-pimg img { padding:0; }
.v2-pdp-root .pdp__frame-fade { animation:pdpV2FrameIn .34s ease; }
.v2-pdp-root .pdp__zoom-trigger {
  position:relative; display:block; width:100%; padding:0; overflow:hidden;
  color:inherit; text-align:inherit; border:0; border-radius:0; background:transparent;
  cursor:zoom-in;
}
.v2-pdp-root .pdp__zoom-trigger > .v2-pimg { width:100%; }
.v2-pdp-root .pdp__zoom-label {
  position:absolute; left:12px; bottom:12px; z-index:2;
  display:inline-flex; min-height:34px; align-items:center; gap:6px;
  padding:0 10px; color:var(--slv2-ink-2); background:rgba(255,253,248,.92);
  border:1px solid var(--slv2-line); border-radius:var(--slv2-r-ui);
  font:650 10.5px/1 var(--slv2-sans); letter-spacing:.02em;
}
.v2-pdp-root .pdp__zoom-label > span { font-size:15px; line-height:1; }
@keyframes pdpV2FrameIn { from { opacity:.5; } to { opacity:1; } }

.v2-pdp-root .pdp__galactions {
  position:absolute; top:12px; right:12px; z-index:3;
  display:flex; flex-direction:column; gap:8px;
}
.v2-pdp-root .pdp__galbtn {
  width:40px; height:40px; border-radius:var(--slv2-r-ui);
  background:rgba(255,253,248,.92); color:var(--slv2-ink-2);
  border:1px solid var(--slv2-line); box-shadow:none;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.v2-pdp-root .pdp__galbtn:hover { transform:none; color:var(--slv2-accent-primary-hover); }
.v2-pdp-root .pdp__galbtn:active { transform:scale(.98); }
.v2-pdp-root .pdp__galbtn.is-active {
  color:#A8443D; border-color:#E6CFC9; background:#FCF2F0;
}
.v2-pdp-root .pdp__dots {
  position:absolute; left:0; right:0; bottom:12px; z-index:2;
  display:flex; justify-content:center; gap:5px;
}
/* A position indicator, not a control (see ProductGallery.jsx). It carries no
   hit area on purpose: twelve to fifteen 44px targets cannot tile across a
   375px screen without overlapping, so selection lives on the thumbnail rail
   instead and these only show where you are. */
.v2-pdp-root .pdp__dot {
  width:14px; height:2px; padding:0; border:0; border-radius:0;
  background:rgba(22,33,27,.25); transition:background .16s ease, width .16s ease;
}
.v2-pdp-root .pdp__dot.active { width:24px; transform:none; background:var(--slv2-accent-primary); }
.v2-pdp-root .pdp__thumbs {
  order:1; display:flex; flex-direction:row; gap:8px; overflow-x:auto;
  padding:8px var(--slv2-gutter) 0; scrollbar-width:none;
}
.v2-pdp-root .pdp__thumbs::-webkit-scrollbar { display:none; }
.v2-pdp-root .pdp__thumb {
  flex:0 0 64px; width:64px; overflow:hidden;
  border:1px solid var(--slv2-line-2); border-radius:var(--slv2-r-ui);
  background:var(--slv2-cream); box-shadow:none;
}
.v2-pdp-root .pdp__thumb.active { border-color:var(--slv2-accent-primary); }
.v2-pdp-root .pdp__thumb .v2-pimg { border-radius:var(--slv2-r-ui); }

.v2-pdp-root .pdp__info { min-width:0; padding-top:22px; }
.v2-pdp-root .pdp__meta {
  display:inline-flex; align-items:center; gap:4px;
  margin:0 0 7px; font-size:9.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--slv2-gold-ink);
}
.v2-pdp-root .pdp__meta-sep { color:var(--slv2-ink-4); font-weight:600; }
/* Sans, like every other page heading in the storefront. The product name is
   commerce information a customer scans, not editorial display type — and the
   serif made the PDP read as a different site from the grid that opened it. */
.v2-pdp-root .pdp__title {
  margin:0; max-width:22ch;
  font-family:var(--slv2-sans);
  font-size:clamp(24px, 7vw, 30px); font-weight:700;
  line-height:1.18; letter-spacing:-.024em; text-wrap:balance;
  color:var(--slv2-ink);
}
.v2-pdp-root .pdp .pdp__lead {
  max-width:60ch; margin:12px 0 0;
  font-size:13px; line-height:1.65; color:var(--slv2-ink-3);
}

/* ------------------------------------------------------- rating + pricing */
.v2-pdp-root .pdp-rating {
  display:inline-flex; align-items:center; gap:7px;
  min-height:36px; padding:6px 9px; margin:14px 0 0;
  border:1px solid var(--slv2-line); border-radius:var(--slv2-r-ui);
  background:var(--slv2-paper); color:var(--slv2-ink-3); font-size:12px;
}
.v2-pdp-root .pdp-rating:hover { border-color:var(--slv2-stone-2); background:var(--slv2-cream); }
.v2-pdp-root .pdp-rating__score { color:var(--slv2-ink); font-size:13px; }
.v2-pdp-root .pdp-rating__stars .s-full { color:var(--slv2-star); }
.v2-pdp-root .pdp-rating__stars .s-empty { color:var(--slv2-line); }
.v2-pdp-root .pdp-rating__count::before { border-radius:0; background:var(--slv2-ink-4); }

.v2-pdp-root .pdp__price {
  display:grid; justify-items:start; gap:3px;
  margin:17px 0 16px; padding:15px 0;
  border-top:1px solid var(--slv2-line-2); border-bottom:1px solid var(--slv2-line-2);
}
.v2-pdp-root .pdp__price .v2-price { gap:8px; }
.v2-pdp-root .pdp__price .v2-price__now { font-size:29px; }
.v2-pdp-root .v2-price__off {
  padding:3px 6px; border-radius:var(--slv2-r-ui);
  background:var(--slv2-discount-bg); color:var(--slv2-discount-text);
}
.v2-pdp-root .pdp__tax {
  font-size:10px; color:var(--slv2-ink-4); letter-spacing:.025em;
}

/* --------------------------------------------------------------- offers */
.v2-pdp-root .pdp-offers {
  margin:0 0 17px; overflow:hidden;
  border:1px solid var(--slv2-stone); border-radius:var(--slv2-r-ui);
  background:var(--slv2-gold-50);
}
.v2-pdp-root .pdp-offers__bar {
  width:100%; min-height:55px; padding:10px 12px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  text-align:left;
}
.v2-pdp-root .pdp-offers__lead { gap:9px; }
.v2-pdp-root .pdp-offers__lead > svg,
.v2-pdp-root .pdp-offers__row > svg { color:var(--slv2-gold-ink); }
.v2-pdp-root .pdp-offers__lead strong,
.v2-pdp-root .pdp-offers__row strong { color:var(--slv2-ink); font-size:12px; }
.v2-pdp-root .pdp-offers__lead em,
.v2-pdp-root .pdp-offers__row em { color:var(--slv2-ink-3); font-size:10.5px; }
.v2-pdp-root .pdp-offers__toggle { color:var(--slv2-gold-ink); font-size:11px; }
.v2-pdp-root .pdp-offers__panel { padding:0 12px 10px; }
.v2-pdp-root .pdp-offers__row {
  gap:9px; padding:10px 0; border-top:1px solid var(--slv2-stone);
}
.v2-pdp-root .pdp-offers .promo-code__row,
.v2-pdp-root .pdp-offers .promo-code__copy { border-radius:var(--slv2-r-ui); }

/* ----------------------------------------------------------- pack + stock */
.v2-pdp-root .pdp__block { margin:0 0 16px; }
.v2-pdp-root .pdp__block > .label {
  font-family:var(--slv2-sans); font-size:10.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--slv2-ink-3);
}
.v2-pdp-root .variantlist { gap:8px; }
.v2-pdp-root .variantchip {
  min-width:104px; min-height:54px; padding:9px 11px; gap:2px;
  border:1px solid var(--slv2-line); border-radius:var(--slv2-r-ui);
  background:var(--slv2-paper); box-shadow:none; transform:none;
}
.v2-pdp-root .variantchip:hover:not(:disabled) { border-color:var(--slv2-accent-primary); transform:none; }
.v2-pdp-root .variantchip.active {
  border-color:var(--slv2-accent-primary); background:var(--slv2-f50);
  box-shadow:inset 3px 0 0 var(--slv2-accent-primary);
}
.v2-pdp-root .variantchip__label { color:var(--slv2-ink); font-size:12px; }
.v2-pdp-root .variantchip__price { color:var(--slv2-price); font-size:11.5px; }
.v2-pdp-root .variantchip__price s { color:var(--slv2-price-mrp); }
.v2-pdp-root .variantchip__out { color:var(--slv2-alert); }
.v2-pdp-root .pdp__stock { margin:0 0 12px; }
.v2-pdp-root .pdp__stock .v2-badge { gap:4px; height:22px; padding-inline:7px; }

/* --------------------------------------------------------------- purchase */
.v2-pdp-root .pdp__buy { display:flex; gap:8px; margin:0 0 8px; }
.v2-pdp-root .qty {
  flex:0 0 auto; display:inline-flex; align-items:center; overflow:hidden;
  height:44px; border:1px solid var(--slv2-line); border-radius:var(--slv2-r-ui);
  background:var(--slv2-paper);
}
.v2-pdp-root .qty button {
  width:40px; height:42px; color:var(--slv2-ink-2);
  border-radius:0; background:transparent;
}
.v2-pdp-root .qty button:first-child { border-right:1px solid var(--slv2-line-2); }
.v2-pdp-root .qty button:last-child { border-left:1px solid var(--slv2-line-2); }
.v2-pdp-root .qty button:hover { background:var(--slv2-cream); }
.v2-pdp-root .qty button:active { transform:scale(.98); }
/* Minus is disabled at qty 1 rather than silently doing nothing. Kept subtle:
   the control still reads as part of the stepper, just clearly inactive. */
.v2-pdp-root .qty button:disabled { color:var(--slv2-ink-4); cursor:not-allowed; }
.v2-pdp-root .qty button:disabled:hover { background:transparent; }
.v2-pdp-root .qty button:disabled:active { transform:none; }
.v2-pdp-root .qty span { min-width:34px; color:var(--slv2-ink); font-size:13px; }
.v2-pdp-root .pdp__addbtn { flex:1; min-width:0; }
.v2-pdp-root .pdp__addbtn.is-added {
  background:var(--slv2-save); border-color:var(--slv2-save); color:#FBF8F1;
}
.v2-pdp-root .pdp__buynow {
  margin:0 0 18px;
  border-color:var(--slv2-accent-primary);
}
.v2-pdp-root .v2-btn--ghost:hover {
  background:var(--slv2-cta-secondary-bg); color:var(--slv2-cta-secondary-text);
  border-color:var(--slv2-accent-primary-hover); filter:brightness(.985);
}

/* --------------------------------------------------------------- delivery */
.v2-pdp-root .pdp-deliver {
  display:flex; flex-direction:column; gap:0;
  margin:0; padding:0;
  border:0; border-top:1px solid var(--slv2-line); border-bottom:1px solid var(--slv2-line);
  border-radius:0; background:transparent;
}
.v2-pdp-root .pdp-deliver__row {
  display:flex; align-items:flex-start; gap:10px;
  padding:11px 2px; color:var(--slv2-ink-2); font-size:11.5px;
}
.v2-pdp-root .pdp-deliver__row + .pdp-deliver__row { border-top:1px solid var(--slv2-line-2); }
.v2-pdp-root .pdp-deliver__row > svg {
  flex:0 0 auto; margin-top:1px; color:var(--slv2-accent-primary);
}
.v2-pdp-root .pdp-deliver__row strong { color:var(--slv2-ink); font-size:11.5px; }
.v2-pdp-root .pdp-deliver__row em {
  display:block; margin-top:1px; color:var(--slv2-ink-4); font-size:10.5px; line-height:1.45;
}

/* ------------------------------------------------------ information flow */
.v2-pdp-root .pdp-flow { max-width:920px; }
.v2-pdp-root .pdp-sec {
  padding-block:24px; border-top:1px solid var(--slv2-line-2);
}
.v2-pdp-root .pdp-flow > .pdp-sec:first-child { border-top:0; padding-top:10px; }
.v2-pdp-root .pdp-sec__head { gap:8px; margin-bottom:11px; }
.v2-pdp-root .pdp-sec__title {
  margin:0 0 13px;
  font-family:var(--slv2-disp);
  font-size:21px; font-weight:500; line-height:1.15; letter-spacing:-.01em;
  color:var(--slv2-ink);
}
.v2-pdp-root .pdp-preview-tag {
  padding:3px 6px; border:1px solid var(--slv2-stone);
  border-radius:var(--slv2-r-ui); background:var(--slv2-gold-50);
  color:var(--slv2-gold-ink); font-size:9px;
}

.v2-pdp-root .pdp-benefits__grid { gap:8px; }
.v2-pdp-root .pdp-benefits__card,
.v2-pdp-root .pdp-ingredients__card,
.v2-pdp-root .pdp-howto__body {
  border:1px solid var(--slv2-line); border-radius:var(--slv2-r-ui);
  background:var(--slv2-paper); box-shadow:none;
}
.v2-pdp-root .pdp-benefits__card { padding:12px; }
.v2-pdp-root .pdp-benefits__ic,
.v2-pdp-root .pdp-ingredients__ic,
.v2-pdp-root .pdp-howto__ic {
  border-radius:var(--slv2-r-ui); background:var(--slv2-f50); color:var(--slv2-accent-primary);
}
.v2-pdp-root .pdp-benefits__card strong,
.v2-pdp-root .pdp-ingredients__body strong { color:var(--slv2-ink); }
.v2-pdp-root .pdp-benefits__card span,
.v2-pdp-root .pdp-ingredients__body p,
.v2-pdp-root .pdp-howto__text { color:var(--slv2-ink-3); }

/* Divider-led accordion: no marketplace card shell. */
.v2-pdp-root .pdp-acc {
  overflow:visible; border:0; border-top:1px solid var(--slv2-line);
  border-bottom:1px solid var(--slv2-line); border-radius:0; background:transparent;
}
.v2-pdp-root .pdp-acc__item + .pdp-acc__item { border-top:1px solid var(--slv2-line-2); }
.v2-pdp-root .pdp-acc__btn {
  min-height:56px; padding:14px 2px;
  font-family:var(--slv2-sans); font-size:13px; font-weight:600;
  color:var(--slv2-ink); letter-spacing:.005em;
}
.v2-pdp-root .pdp-acc__title { gap:9px; }
.v2-pdp-root .pdp-acc__title svg { color:var(--slv2-accent-primary); }
.v2-pdp-root .pdp-acc__sign {
  width:27px; height:27px; border:1px solid var(--slv2-line);
  border-radius:var(--slv2-r-ui); color:var(--slv2-accent-primary);
}
.v2-pdp-root .pdp-acc__item.is-open .pdp-acc__sign {
  background:var(--slv2-accent-primary); border-color:var(--slv2-accent-primary); color:#FBF8F1;
}
.v2-pdp-root .pdp-acc__panel { padding:0 2px 17px; }
.v2-pdp-root .pdp-acc__p,
.v2-pdp-root .pdp-faq dd { color:var(--slv2-ink-3); font-size:12.5px; line-height:1.7; }
.v2-pdp-root .pdp-faq dt { color:var(--slv2-ink); font-size:12.5px; }
.v2-pdp-root .pdp-acc__tags { gap:6px; }
.v2-pdp-root .pdp-acc__tags .v2-chip { height:29px; padding-inline:9px; font-size:11px; }
.v2-pdp-root .pdp-acc .ticklist { gap:8px; }
.v2-pdp-root .pdp-acc .ticklist li { color:var(--slv2-ink-3); font-size:12px; }
.v2-pdp-root .pdp-acc .ticklist svg { color:var(--slv2-accent-primary); }

.v2-pdp-root .pdp-trust__list {
  display:grid; grid-template-columns:1fr; gap:0;
  border-top:1px solid var(--slv2-line); border-bottom:1px solid var(--slv2-line);
}
.v2-pdp-root .pdp-trust__item { gap:11px; padding:12px 2px; }
.v2-pdp-root .pdp-trust__item + .pdp-trust__item { border-top:1px solid var(--slv2-line-2); }
.v2-pdp-root .pdp-trust__ic {
  width:30px; height:30px; border-radius:var(--slv2-r-ui);
  background:var(--slv2-f50); color:var(--slv2-accent-primary);
}
.v2-pdp-root .pdp-trust__txt strong { color:var(--slv2-ink); font-size:12px; }
.v2-pdp-root .pdp-trust__txt em { color:var(--slv2-ink-4); font-size:10.5px; }

/* ------------------------------------------------ real catalogue imagery */
.v2-pdp-root .pdp-catalogue { padding-block:30px 6px; }
.v2-pdp-root .pdp-catalogue__head { margin-bottom:14px; }
.v2-pdp-root .pdp-catalogue__head .pdp-sec__title { margin-bottom:0; }
.v2-pdp-root .pdp-catalogue__grid {
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:10px;
}
.v2-pdp-root .pdp-catalogue__image {
  width:100%;
  aspect-ratio:1 / 1;
  border:1px solid var(--slv2-line-2);
  border-radius:var(--slv2-r-art);
  background:var(--slv2-cream);
}
.v2-pdp-root .pdp-catalogue__image img { object-fit:contain; padding:0; }

/* --------------------------------------------------------- image lightbox */
.pdp-lightbox {
  position:fixed; inset:0; z-index:180; display:grid; grid-template-rows:auto minmax(0, 1fr) auto;
  padding:max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  color:#FFFFFF; background:rgba(8, 15, 12, .96); overscroll-behavior:contain;
}
.pdp-lightbox__topbar { display:flex; min-height:44px; align-items:center; justify-content:flex-end; gap:16px; }
.pdp-lightbox__topbar > span { color:rgba(255,255,255,.72); font:650 11px/1 var(--slv2-sans); letter-spacing:.08em; }
.pdp-lightbox__close,
.pdp-lightbox__nav {
  display:grid; width:44px; height:44px; place-items:center; flex:0 0 44px;
  color:#FFFFFF; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.3); border-radius:2px;
}
.pdp-lightbox__close:hover,
.pdp-lightbox__nav:hover { background:rgba(255,255,255,.15); }
.pdp-lightbox__stage { display:grid; min-width:0; min-height:0; grid-template-columns:44px minmax(0, 1fr) 44px; align-items:center; gap:12px; }
.pdp-lightbox__image { width:100%; height:100%; max-height:calc(100vh - 116px); border:0; background:transparent; }
.pdp-lightbox__image img { width:100%; height:100%; object-fit:contain; padding:0; }
.pdp-lightbox__hint { margin:8px 0 0; color:rgba(255,255,255,.6); text-align:center; font:500 10px/1.3 var(--slv2-sans); }

@media (max-width:599px) {
  .pdp-lightbox { padding-inline:8px; }
  .pdp-lightbox__stage { grid-template-columns:1fr; position:relative; }
  .pdp-lightbox__nav { position:absolute; top:50%; z-index:2; transform:translateY(-50%); background:rgba(8,15,12,.58); }
  .pdp-lightbox__nav--prev { left:0; }
  .pdp-lightbox__nav--next { right:0; }
  .pdp-lightbox__image { max-height:calc(100dvh - 118px); }
}

/* --------------------------------------------------------- configured promos */
.v2-pdp-root .v2-pdp__promos { margin-top:10px; }
.v2-pdp-root .v2-pdp__promos .promo-section { padding-block:26px; }
.v2-pdp-root .v2-pdp__promos .promo-section .container {
  max-width:var(--slv2-container); padding-inline:var(--slv2-gutter);
}
.v2-pdp-root .v2-pdp__promos .promo-poster { border-radius:var(--slv2-r-art); }
.v2-pdp-root .v2-pdp__promos .promo-offer,
.v2-pdp-root .v2-pdp__promos .promo-offer__ic,
.v2-pdp-root .v2-pdp__promos .promo-code__row,
.v2-pdp-root .v2-pdp__promos .promo-code__copy,
.v2-pdp-root .v2-pdp__promos .promo-offer__cta,
.v2-pdp-root .v2-pdp__promos .promo-poster__badge,
.v2-pdp-root .v2-pdp__promos .promo-poster__cta { border-radius:var(--slv2-r-ui); }

/* ------------------------------------------------ frequently bought together */
.v2-pdp-root .v2-pdp__fbt-section { margin-top:28px; }
.v2-pdp-root .v2-pdp__fbt-section .v2-h2 { margin-bottom:0; }
.v2-pdp-root .fbt {
  display:grid; grid-template-columns:minmax(0, 1fr); gap:18px;
  align-items:center; margin-top:14px; padding:18px 0 0;
  background:transparent; border:0; border-top:1px solid var(--slv2-line);
  border-radius:0;
}
.v2-pdp-root .fbt__items {
  display:flex; align-items:flex-start; flex-wrap:nowrap; gap:9px;
  overflow-x:auto; padding:0 1px 5px; scrollbar-width:none;
  scroll-snap-type:x proximity;
}
.v2-pdp-root .fbt__items::-webkit-scrollbar { display:none; }
.v2-pdp-root .fbt__item {
  flex:0 0 104px; width:104px; text-align:left; scroll-snap-align:start;
  color:var(--slv2-ink); text-decoration:none;
}
.v2-pdp-root .fbt__item .v2-pimg {
  margin:0 0 7px; border:1px solid var(--slv2-line-2);
  border-radius:var(--slv2-r-art); box-shadow:none;
}
.v2-pdp-root .fbt__name {
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:31px; font-size:11.5px; font-weight:600; line-height:1.35;
}
.v2-pdp-root .fbt__price {
  display:block; margin-top:3px; color:var(--slv2-price); font-size:11.5px; font-weight:700;
}
.v2-pdp-root .fbt__plus { flex:0 0 16px; align-self:42px; color:var(--slv2-ink-4); }
.v2-pdp-root .fbt__buy {
  padding:14px; text-align:left;
  border:1px solid var(--slv2-line); border-radius:var(--slv2-r-ui);
  background:var(--slv2-cream);
}
.v2-pdp-root .fbt__label {
  display:block; color:var(--slv2-ink-3); font-size:10.5px; letter-spacing:.03em;
}
.v2-pdp-root .fbt__total {
  display:block; margin:3px 0 12px; color:var(--slv2-ink); font-size:24px; font-weight:500;
}

/* ---------------------------------------------------------------- reviews */
.v2-pdp-root #reviews.section-sm { padding-block:0; margin-top:34px; }
.v2-pdp-root #reviews > .container {
  max-width:var(--slv2-container); padding-inline:var(--slv2-gutter);
}
.v2-pdp-root .pdp-reviews-soon {
  gap:11px; padding:14px 2px;
  border:0; border-top:1px solid var(--slv2-line); border-bottom:1px solid var(--slv2-line);
  border-radius:0; background:transparent;
}
.v2-pdp-root .pdp-reviews-soon__ic {
  width:34px; height:34px; border-radius:var(--slv2-r-ui);
  background:var(--slv2-f50); color:var(--slv2-accent-primary);
}
.v2-pdp-root .pdp-reviews-soon p { color:var(--slv2-ink-3); font-size:12px; line-height:1.6; }
.v2-pdp-root .pdp-reviews__summary,
.v2-pdp-root .pdp-reviewcard {
  border:1px solid var(--slv2-line); border-radius:var(--slv2-r-ui);
  background:var(--slv2-paper); box-shadow:none;
}
.v2-pdp-root .pdp-reviewcard__avatar { border-radius:var(--slv2-r-ui); }
.v2-pdp-root .pdp-reviews__cta { border-radius:var(--slv2-r-ui); }
.v2-pdp-root .pdp-reviews__all { color:var(--slv2-accent-primary); }

/* PDP recommendations are a vertical shopping grid, never a mobile rail. */
.v2-pdp-root > .v2-sec { margin-top:34px; }
.v2-pdp-root .pdp-recommendations__grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

/* ----------------------------------------------------------- sticky mobile */
.v2-pdp-root .buybar {
  position:fixed; inset:auto 0 0; z-index:96;
  display:flex; align-items:center; gap:7px;
  min-height:68px; padding:9px var(--slv2-gutter) calc(9px + env(safe-area-inset-bottom));
  background:rgba(251,248,241,.97); border-top:1px solid var(--slv2-line);
  box-shadow:var(--slv2-sh-up); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.v2-pdp-root .buybar__price { flex:1 1 auto; min-width:0; }
.v2-pdp-root .buybar__price .v2-price { display:flex; flex-direction:column; gap:0; }
.v2-pdp-root .buybar__price .v2-price__now { font-size:15px; white-space:nowrap; }
.v2-pdp-root .buybar__price .v2-price__mrp { font-size:9.5px; white-space:nowrap; }
.v2-pdp-root .buybar .v2-btn {
  flex:0 0 auto; height:44px; min-height:44px; padding:0 13px; font-size:12px;
}
.v2-pdp-root .buybar__add {
  background:var(--slv2-cta-primary-bg); color:var(--slv2-cta-primary-text);
  border-color:var(--slv2-cta-primary-bg);
}
.v2-pdp-root .buybar__buy { border-color:var(--slv2-accent-primary); }
body:has(.v2-pdp-root .buybar) .page-main {
  padding-bottom:calc(70px + env(safe-area-inset-bottom));
}
@media (max-width:900px) {
  /* Keep the final footer row scrollable above the fixed purchase bar. The
     margin is exactly the bar reserve; it adds no blank PDP section. */
  body:has(.v2-pdp-root .buybar) .ftr {
    margin-bottom:calc(68px + env(safe-area-inset-bottom));
  }
}

@media (max-width:359px) {
  .v2-pdp-root .pdp__title { font-size:24px; }
  .v2-pdp-root .pdp__galactions { top:10px; right:10px; }
  .v2-pdp-root .pdp__galbtn { width:38px; height:38px; }
  .v2-pdp-root .buybar { gap:5px; }
  .v2-pdp-root .buybar .v2-btn { padding-inline:10px; font-size:11.5px; }
  .v2-pdp-root .buybar__price .v2-price__mrp { display:none; }
}

/* ========================================================================== 
   DESKTOP — dominant gallery + calm purchase column
   ========================================================================== */
@media (min-width:901px) {
  .v2-pdp-root { padding-bottom:48px; }
  .v2-pdp-root .pdp-top { padding-top:17px; padding-bottom:13px; }
  .v2-pdp-root .pdp-back { display:none; }
  .v2-pdp-root .pdp.v2-wrap {
    grid-template-columns:minmax(0, 1.18fr) minmax(390px, .82fr);
    gap:64px; padding-block:0 44px;
  }
  .v2-pdp-root .pdp__gallery,
  .v2-pdp-root .pdp__gallery--single {
    position:sticky; top:136px; margin-inline:0;
  }
  .v2-pdp-root .pdp__gallery:not(.pdp__gallery--single) {
    display:grid; grid-template-columns:72px minmax(0, 1fr); gap:12px;
  }
  .v2-pdp-root .pdp__main {
    order:2; border:1px solid var(--slv2-line-2); border-radius:var(--slv2-r-art);
  }
  .v2-pdp-root .pdp__main .v2-pimg { border-radius:var(--slv2-r-art); }
  .v2-pdp-root .pdp__thumbs {
    order:1; display:flex; flex-direction:column; gap:9px; overflow-y:auto;
    max-height:620px; padding:0; scrollbar-width:none;
  }
  .v2-pdp-root .pdp__thumb { flex:0 0 72px; width:72px; }
  .v2-pdp-root .pdp__dots { display:none; }
  .v2-pdp-root .pdp__galactions { top:14px; right:14px; }
  .v2-pdp-root .pdp__info {
    padding-top:20px; border-top:2px solid var(--slv2-accent-gold);
  }
  .v2-pdp-root .pdp__meta { margin-bottom:10px; font-size:10.5px; }
  .v2-pdp-root .pdp__title { max-width:17ch; font-size:36px; line-height:1.12; }
  .v2-pdp-root .pdp .pdp__lead { font-size:14px; }
  .v2-pdp-root .pdp__price { margin-top:20px; padding-block:17px; }
  .v2-pdp-root .pdp__price .v2-price__now { font-size:32px; }
  .v2-pdp-root .pdp__buy { gap:10px; }
  .v2-pdp-root .qty { height:52px; }
  .v2-pdp-root .qty button { width:43px; height:50px; }
  .v2-pdp-root .qty span { min-width:38px; font-size:14px; }
  .v2-pdp-root .pdp__buynow { margin-bottom:20px; }
  .v2-pdp-root .pdp-flow { padding-top:12px; }
  .v2-pdp-root .pdp-sec { padding-block:32px; }
  .v2-pdp-root .pdp-sec__title { font-size:26px; }
  .v2-pdp-root .pdp-benefits__grid { grid-template-columns:repeat(4, minmax(0,1fr)); }
  .v2-pdp-root .pdp-trust__list { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .v2-pdp-root .pdp-trust__item { padding:15px 13px; }
  .v2-pdp-root .pdp-trust__item + .pdp-trust__item {
    border-top:0; border-left:1px solid var(--slv2-line-2);
  }
  .v2-pdp-root .pdp-catalogue { padding-block:48px 8px; }
  .v2-pdp-root .pdp-catalogue__grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
  .v2-pdp-root .pdp-catalogue__grid--single { grid-template-columns:minmax(0, 620px); }
  .v2-pdp-root .pdp-recommendations__grid { grid-template-columns:repeat(4, minmax(0, 1fr)); gap:24px; }
  .v2-pdp-root .v2-pdp__fbt-section { margin-top:48px; }
  .v2-pdp-root .fbt {
    grid-template-columns:minmax(0, 1fr) 260px; gap:36px; padding-top:24px;
  }
  .v2-pdp-root .fbt__items { overflow:visible; gap:14px; }
  .v2-pdp-root .fbt__item { flex-basis:136px; width:136px; }
  .v2-pdp-root .fbt__plus { flex-basis:20px; align-self:center; }
  .v2-pdp-root .fbt__name { font-size:12.5px; min-height:34px; }
  .v2-pdp-root .fbt__price { font-size:13px; }
  .v2-pdp-root .fbt__buy { padding:20px; }
  .v2-pdp-root #reviews.section-sm,
  .v2-pdp-root > .v2-sec { margin-top:48px; }
  .v2-pdp-root .buybar { display:none; }
}

@media (min-width:600px) and (max-width:900px) {
  .v2-pdp-root .pdp-catalogue__grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
  .v2-pdp-root .pdp-recommendations__grid { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; }
}

@media (min-width:1200px) {
  .v2-pdp-root .pdp.v2-wrap { grid-template-columns:minmax(0, 1.25fr) minmax(420px, .75fr); gap:76px; }
  .v2-pdp-root .pdp__title { font-size:40px; }
}

@media (prefers-reduced-motion:reduce) {
  .v2-pdp-root .pdp__frame-fade { animation:none; }
  .v2-pdp-root .pdp__dot { transition:none; }
}
/* PDP lead description: compact by default, expandable on demand */
.v2-pdp-root .pdp__leadwrap {
  margin-top:12px;
}

.v2-pdp-root .pdp__leadwrap .pdp__lead {
  margin:0;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
}

.v2-pdp-root .pdp__leadwrap.is-open .pdp__lead {
  display:block;
  overflow:visible;
}

.v2-pdp-root .pdp__leadmore {
  margin-top:5px;
  padding:0;
  border:0;
  background:none;
  color:var(--slv2-accent-primary);
  font-family:var(--slv2-sans);
  font-size:11.5px;
  font-weight:600;
  cursor:pointer;
}

.v2-pdp-root .pdp__leadmore:hover {
  text-decoration:underline;
}
/* Buy Now — muted honey brown */
.v2-pdp-root .pdp__buynow {
  background:#B8893B;
  border-color:#B8893B;
  color:#fff;
  font-weight:600;
}

.v2-pdp-root .pdp__buynow:hover {
  background:#9F742F;
  border-color:#9F742F;
  color:#fff;
}

/* ==========================================================================
   RUN 1 — PREMIUM PDP
   Carries the shipped CategorySpotlight's language onto the product page:
   the same curved ground, the same display serif for a product's name, the
   same flat surfaces. Overrides sit at the end of the sheet so the rules they
   replace stay readable above rather than being deleted piecemeal.
   ========================================================================== */

.v2-pdp-root {
  /* The media frame's ground. Set per product from its category tone in
     Product.jsx, with the neutral cream as the fallback for a product whose
     category has no tone. */
  --pdp-ground: var(--slv2-cream);
  /* Vertical radius of the frame's bottom edge, as a % of its height. The
     spotlight gets its gentle arc by drawing the field wider than the screen
     and showing only the shallow middle; a frame cannot exceed its own box, so
     the same softness comes from a much smaller radius instead. */
  --pdp-arc: 12%;
  /* Purchase-bar reserve. Every rule that keeps content clear of the bar
     measures from here, so the bar's height is stated once.

     The bar sits at bottom:0 and the bottom navigation is not under it: an
     existing rule in pages.css hides .tabbar on any page carrying a .buybar,
     so the PDP deliberately swaps global navigation for buy actions while you
     are looking at a product. Stacking the bar above a nav that is not there
     was measured and only produced a 55px band of empty page. */
  --pdp-buybar-h: 66px;
}

/* ----------------------------------------------------------- media frame */
/* The product sits on its category's colour and the ground curves away
   beneath it. The catalogue's photography is not cut out — most shots carry
   their own white ground — so the curve is applied to the FRAME rather than
   to a colour field behind a transparent packshot, which is what the
   spotlight does with its processed art. Same shape, honest about the assets. */
.v2-pdp-root .pdp__main {
  background:var(--pdp-ground);
  border-radius:0 0 50% 50% / 0 0 var(--pdp-arc) var(--pdp-arc);
}
.v2-pdp-root .pdp__main .v2-pimg { background:transparent; }
/* Centred, not in the bottom-left corner.
   The frame's bottom edge is an ellipse, so its LOWEST point is the horizontal
   centre and its highest are the two corners — which is exactly where a
   corner-anchored label ends up being clipped. At 768px the arc's vertical
   radius is 92px and the label was cut in half. Centred, it sits in the one
   place on that edge that never rises, at every width. */
.v2-pdp-root .pdp__zoom-label {
  left:50%;
  bottom:10px;
  transform:translateX(-50%);
}

/* -------------------------------------------------------------- brand line */
/* First in the reading order because Sora Life is a marketplace: whose
   product this is comes before what it is. It is a link, and it looks like
   one — a customer who reads a brand name here will try to tap it. */
.v2-pdp-root .pdp__brand {
  display:inline-flex; align-items:center; gap:3px;
  margin:0 0 6px; padding:0;
  color:var(--slv2-accent-primary); text-decoration:none;
  font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.v2-pdp-root .pdp__brand > svg { margin-top:1px; opacity:.7; }
.v2-pdp-root .pdp__brand:hover { text-decoration:underline; text-underline-offset:3px; }
.v2-pdp-root .pdp__brand:focus-visible {
  outline:2px solid var(--slv2-accent-primary); outline-offset:3px;
}

/* ------------------------------------------------------------------ title */
/* The display serif, matching the shipped spotlight. This sheet previously argued for
   sans, because at the time the serif made the PDP read as a different site
   from the grid that opened it. That grid changed: CategorySpotlight now sets
   the product's name in the display serif, so a customer arriving from the
   category hero sees the same string twice — and sans here is now the
   inconsistency the original note was trying to avoid. The PDP's own section
   headings have been the display serif all along. */
.v2-pdp-root .pdp__title {
  margin:0; max-width:20ch;
  font-family:var(--slv2-disp);
  font-size:clamp(25px, 7.2vw, 31px); font-weight:600;
  line-height:1.14; letter-spacing:-.014em; text-wrap:balance;
  color:var(--slv2-ink);
}

/* ------------------------------------------------------------- price line */
/* One line. Price, struck MRP and the discount used to stack into three
   competing weights with the tax note under them; they are one fact about
   one product and they read as one row. */
.v2-pdp-root .pdp__price {
  display:flex; align-items:baseline; flex-wrap:wrap; gap:9px;
  margin:13px 0 0; padding:0; border:0; background:none;
}
.v2-pdp-root .pdp__price .v2-price {
  display:inline-flex; align-items:baseline; flex-wrap:wrap; gap:9px;
}
.v2-pdp-root .pdp__price .v2-price__now {
  font-size:28px; font-weight:700; letter-spacing:-.02em; line-height:1.1;
}
.v2-pdp-root .pdp__price .v2-price__mrp { font-size:14px; }
.v2-pdp-root .pdp__price .v2-price__off {
  padding:2px 7px; border-radius:var(--slv2-r-ui);
  background:var(--slv2-discount-bg); color:var(--slv2-discount-text);
  font-size:11.5px; font-weight:700; letter-spacing:.01em;
}
.v2-pdp-root .pdp__tax {
  flex:0 0 100%; margin:0; color:var(--slv2-ink-4); font-size:11px;
}

/* ------------------------------------------------------------- facts row */
/* Rating and net quantity share one quiet line under the price. Both are
   optional; the row collapses completely when neither exists, rather than
   leaving the gap a missing rating used to leave. */
.v2-pdp-root .pdp__facts {
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px;
  margin:11px 0 0;
}
.v2-pdp-root .pdp__facts:empty { display:none; }
.v2-pdp-root .pdp__size {
  padding:3px 9px;
  border:1px solid var(--slv2-line); border-radius:var(--slv2-r-ui);
  color:var(--slv2-ink-2); font-size:11.5px; font-weight:600;
  letter-spacing:.03em;
}
.v2-pdp-root .pdp__facts .pdp-rating { margin:0; }
.v2-pdp-root .pdp__leadwrap { margin-top:14px; }

/* --------------------------------------------------------------- delivery */
/* The three methods a customer can actually pick, each with the fee it
   actually costs. Flat at every basket size — there is no threshold, and no
   row here may imply one. */
.v2-pdp-root .pdp-deliver {
  margin:0; padding:0;
  border:0; border-top:1px solid var(--slv2-line);
  border-radius:0; background:transparent;
}
.v2-pdp-root .pdp-deliver__head {
  display:flex; align-items:flex-start; gap:9px; padding:13px 0 10px;
}
.v2-pdp-root .pdp-deliver__head > svg { flex:0 0 auto; margin-top:2px; color:var(--slv2-accent-primary); }
.v2-pdp-root .pdp-deliver__head strong {
  display:block; color:var(--slv2-ink); font-size:12.5px; font-weight:700;
}
.v2-pdp-root .pdp-deliver__head em {
  display:block; margin-top:2px;
  color:var(--slv2-ink-4); font-size:11px; font-style:normal; line-height:1.45;
}
.v2-pdp-root .pdp-deliver__methods {
  margin:0; padding:0 0 14px; list-style:none;
  display:grid; gap:7px;
}
.v2-pdp-root .pdp-deliver__method {
  display:grid; grid-template-columns:minmax(72px, auto) minmax(0, 1fr) auto;
  align-items:baseline; gap:10px;
}
.v2-pdp-root .pdp-deliver__label { color:var(--slv2-ink); font-size:12px; font-weight:600; }
.v2-pdp-root .pdp-deliver__eta { color:var(--slv2-ink-4); font-size:11px; }
.v2-pdp-root .pdp-deliver__fee {
  color:var(--slv2-ink-2); font-size:12px; font-weight:600;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.v2-pdp-root .pdp-deliver__fee.is-free {
  color:var(--slv2-save); letter-spacing:.04em; text-transform:uppercase; font-size:11px;
}

/* --------------------------------------------------------- purchase bar */
/* Above the bottom navigation, not on top of it. The tab bar owns the very
   bottom of the screen and its own safe-area padding; this bar stacks on it. */
@media (max-width:900px) {
  .v2-pdp-root .buybar {
    inset:auto 0 0 0;
    min-height:var(--pdp-buybar-h);
    padding:8px var(--slv2-gutter) calc(8px + env(safe-area-inset-bottom));
    /* No blur. The bar is an opaque shelf; a translucent one over moving
       product photography is the glassmorphism this design does not use. */
    background:var(--slv2-paper);
    -webkit-backdrop-filter:none; backdrop-filter:none;
    border-top:1px solid var(--slv2-line);
    box-shadow:var(--slv2-sh-up);
  }
  /* Reserve the bar's full height so the last content block scrolls clear of
     it rather than ending underneath.

     The reserve sits on the PDP root itself, not on a body:has(...) rule
     targeting .page-main. Three sheets already aim overlapping :has() rules at
     that one shared element — layout.css, pdp.css and v2-mobile-cart.css each
     set a different padding-bottom on it — and the measured result on this
     page was 0px from all of them. The PDP owns its own bottom spacing here,
     which is one rule, local, and verifiable by looking at the page. */
  .v2-pdp-root {
    padding-bottom:calc(var(--pdp-buybar-h) + env(safe-area-inset-bottom));
  }
  body:has(.v2-pdp-root .buybar) .ftr {
    padding-bottom:calc(var(--pdp-buybar-h) + env(safe-area-inset-bottom) + var(--sp-4, 16px));
    margin-bottom:0;
  }
  html:has(.v2-pdp-root .buybar) {
    scroll-padding-bottom:calc(var(--pdp-buybar-h) + env(safe-area-inset-bottom));
  }
}

/* ------------------------------------------------------------- desktop */
@media (min-width:901px) {
  .v2-pdp-root { --pdp-arc:8%; }
  /* The gold rule over the buying column was the only thing separating it
     from the gallery, and it read as a divider looking for a section. The
     column is separated by space now. */
  .v2-pdp-root .pdp__info { padding-top:6px; border-top:0; }
  .v2-pdp-root .pdp__title { max-width:16ch; font-size:38px; }
  .v2-pdp-root .pdp__price { margin-top:16px; padding-block:0; }
  .v2-pdp-root .pdp__price .v2-price__now { font-size:33px; }
  .v2-pdp-root .pdp__main { border:0; }
}

@media (prefers-reduced-motion:reduce) {
  .v2-pdp-root .pdp__frame-fade { animation:none; }
}

/* ---------------------------------------------------- buy-action hierarchy */
/* Add to cart is the primary action and must look like it. "Buy it now" was
   rendering as a filled gold block — the storefront theme maps the secondary
   button background to the brand accent — so the secondary action was the
   loudest thing in the buying column and the two read as equals competing.
   Scoped to the PDP: the filled treatment is right elsewhere, where it is the
   only button on screen. */
.v2-pdp-root .pdp__buynow,
.v2-pdp-root .pdp__buynow:hover {
  background:transparent;
  color:var(--slv2-accent-primary);
  border:1px solid var(--slv2-accent-primary);
  filter:none;
}
.v2-pdp-root .pdp__buynow:hover { background:var(--slv2-f50); }
.v2-pdp-root .buybar__buy,
.v2-pdp-root .buybar__buy:hover {
  background:transparent;
  color:var(--slv2-accent-primary);
  border:1px solid var(--slv2-accent-primary);
}

/* -------------------------------------------------- cross-sell row at 390 */
/* Three items plus their two separators came to ~389px inside a 358px content
   width, so the first card was always cut off at the left edge and the row
   read as broken rather than as scrollable. */
@media (max-width:430px) {
  .v2-pdp-root .fbt__item { flex:0 0 92px; width:92px; }
  .v2-pdp-root .fbt__items { gap:7px; }
}

/* --------------------------------------------------------- desktop flow */
@media (min-width:901px) {
  /* The information column was centred in the 1240px wrap while the hero above
     it started at the wrap's left edge, so the page stepped inwards halfway
     down for no reason.

     Zeroing the inline margin fixed the symptom and introduced a worse one:
     .pdp-flow IS a .v2-wrap, so removing its auto margins dropped it to the
     container's padding edge at x=24 while the hero stayed at x=100 — it now
     stepped OUT instead of in. The right fix is to stop narrowing it at all
     and let it be the same wrap the hero is; the reading measure is capped on
     the text itself, which is where a measure belongs. */
  .v2-pdp-root .pdp-flow { max-width:var(--slv2-container); margin-inline:auto; }
}

/* ==========================================================================
   RUN A — content-led PDP
   The page finally has benefits, ingredients, directions and specifications
   to show. These rules are about making that content readable, and about
   keeping it out of bordered boxes: spacing, rules and type weight do the
   separating.
   ========================================================================== */

/* --------------------------------------------------------------- title */
.v2-pdp-root .pdp__net {
  color: var(--slv2-ink-4);
  font-family: var(--slv2-sans);
  font-size: .52em;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
}

/* Stars, score, count — one quiet line under the name. Four of 164 products
   have a rating, so this is absent far more often than present and must not
   leave a gap behind. */
.v2-pdp-root .pdp-rating {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 9px 0 0; padding: 0;
  border: 0; background: none;
  color: var(--slv2-ink-2); text-decoration: none; font-size: 12.5px;
}
.v2-pdp-root .pdp-rating__stars { display: inline-flex; gap: 1px; }
.v2-pdp-root .pdp-rating__stars .s-full { color: var(--slv2-star); }
.v2-pdp-root .pdp-rating__stars .s-empty { color: var(--slv2-line); }
.v2-pdp-root .pdp-rating__score { color: var(--slv2-ink); font-weight: 700; }
.v2-pdp-root .pdp-rating__score span { color: var(--slv2-ink-4); font-weight: 500; }
.v2-pdp-root .pdp-rating__count { color: var(--slv2-ink-4); }
.v2-pdp-root .pdp-rating__count::before { content: none; }
.v2-pdp-root .pdp-rating:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The discount reads as a saving, so it is the one green thing in the row. */
.v2-pdp-root .pdp__price .v2-price__off {
  background: var(--slv2-f100);
  color: var(--slv2-save);
}

/* ------------------------------------------------------------- claims */
.v2-pdp-root .pdp-claims {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 12px 0 0; padding: 0; list-style: none;
}
.v2-pdp-root .pdp-claims__pill {
  padding: 4px 9px;
  border: 1px solid var(--slv2-line);
  border-radius: 999px;
  background: var(--slv2-paper);
  color: var(--slv2-ink-2);
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
}

/* ------------------------------------------------------ variant cards */
.v2-pdp-root .variantlist {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  margin-top: 8px;
}
.v2-pdp-root .variantchip {
  position: relative;
  display: grid; gap: 2px; justify-items: start;
  padding: 10px 11px 10px 30px;
  border: 1px solid var(--slv2-line);
  border-radius: var(--slv2-r-art);
  background: var(--slv2-paper);
  text-align: left;
  transition: border-color .16s ease, background .16s ease;
}
.v2-pdp-root .variantchip.active {
  border-color: var(--slv2-accent-primary);
  box-shadow: inset 0 0 0 1px var(--slv2-accent-primary);
  background: var(--slv2-f50);
}
/* The tick is always in the layout, empty when unselected, so choosing a pack
   cannot shift the card's text sideways. */
.v2-pdp-root .variantchip__tick {
  position: absolute; left: 10px; top: 11px;
  display: grid; place-items: center;
  width: 14px; height: 14px;
  border: 1px solid var(--slv2-line-2); border-radius: 999px;
  color: #FBF8F1;
}
.v2-pdp-root .variantchip.active .variantchip__tick {
  border-color: var(--slv2-accent-primary);
  background: var(--slv2-accent-primary);
}
.v2-pdp-root .variantchip__label { color: var(--slv2-ink); font-size: 12.5px; font-weight: 700; }
.v2-pdp-root .variantchip__price {
  display: flex; align-items: baseline; gap: 5px;
  color: var(--slv2-price); font-size: 13px; font-weight: 600;
}
.v2-pdp-root .variantchip__price s { color: var(--slv2-price-mrp); font-size: 11px; font-weight: 500; }
.v2-pdp-root .variantchip__off { color: var(--slv2-save); font-size: 10.5px; font-weight: 700; }
.v2-pdp-root .variantchip__unit { color: var(--slv2-ink-4); font-size: 10.5px; font-variant-numeric: tabular-nums; }
/* Out of stock stays visible and readable — greying it into illegibility hides
   the fact that the pack exists at all, which is information. */
.v2-pdp-root .variantchip.is-out {
  border-style: dashed; background: transparent; cursor: not-allowed;
}
.v2-pdp-root .variantchip.is-out .variantchip__label,
.v2-pdp-root .variantchip.is-out .variantchip__price { color: var(--slv2-ink-4); }
.v2-pdp-root .variantchip.is-out .variantchip__price s { text-decoration-color: var(--slv2-ink-4); }
.v2-pdp-root .variantchip__out {
  color: var(--slv2-alert); font-size: 10px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}

/* ------------------------------------------------------------ pincode */
.v2-pdp-root .pdp-deliver__pin { display: flex; gap: 8px; margin: 0 0 10px; }
.v2-pdp-root .pdp-deliver__pininput {
  flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 11px;
  border: 1px solid var(--slv2-line); border-radius: var(--slv2-r-ui);
  background: var(--slv2-paper);
  color: var(--slv2-ink); font-family: var(--slv2-sans); font-size: 13px;
  letter-spacing: .06em;
}
.v2-pdp-root .pdp-deliver__pininput:focus-visible {
  outline: 2px solid var(--slv2-accent-primary); outline-offset: 1px;
}
.v2-pdp-root .pdp-deliver__pinbtn {
  flex: 0 0 auto; height: 40px; padding: 0 16px;
  border: 1px solid var(--slv2-accent-primary); border-radius: var(--slv2-r-ui);
  background: transparent; color: var(--slv2-accent-primary);
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  cursor: pointer;
}
.v2-pdp-root .pdp-deliver__pinbtn:disabled { opacity: .45; cursor: not-allowed; }
.v2-pdp-root .pdp-deliver__pinmsg { margin: 0 0 10px; font-size: 11.5px; line-height: 1.5; }
.v2-pdp-root .pdp-deliver__pinmsg.is-ok { color: var(--slv2-save); }
.v2-pdp-root .pdp-deliver__pinmsg.is-bad { color: var(--slv2-alert); }

/* -------------------------------------------------------------- about */
.v2-pdp-root .pdp-about__text {
  max-width: 68ch; margin: 0;
  color: var(--slv2-ink-2); font-size: 14px; line-height: 1.72;
  /* The ingest stores the description with its paragraph breaks intact as
     blank lines. Without pre-line a thousand-character description arrives as
     one unbroken slab. */
  white-space: pre-line;
}

/* ----------------------------------------------------------- benefits */
/* A list with hairlines, not a grid of bordered cards. */
.v2-pdp-root .pdp-benefits__list { margin: 0; padding: 0; list-style: none; }
.v2-pdp-root .pdp-benefits__row {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px;
  padding: 12px 0;
}
.v2-pdp-root .pdp-benefits__row + .pdp-benefits__row { border-top: 1px solid var(--slv2-line-2); }
.v2-pdp-root .pdp-benefits__ic {
  display: grid; place-items: center;
  width: 22px; height: 22px; margin-top: 1px;
  border-radius: 999px; background: var(--slv2-f50); color: var(--slv2-accent-primary);
}
.v2-pdp-root .pdp-benefits__body strong {
  display: block; color: var(--slv2-ink); font-size: 13px; font-weight: 700; line-height: 1.35;
}
.v2-pdp-root .pdp-benefits__body p {
  margin: 3px 0 0; color: var(--slv2-ink-3); font-size: 12.5px; line-height: 1.6;
}

/* -------------------------------------------------------- ingredients */
.v2-pdp-root .pdp-ingredients__list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  margin: 0; padding: 0; list-style: none;
}
.v2-pdp-root .pdp-ingredients__list.is-single { grid-template-columns: minmax(0, 1fr); }
.v2-pdp-root .pdp-ingredients__card {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 9px; align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--slv2-line-2); border-radius: var(--slv2-r-art);
  background: var(--slv2-paper);
}
.v2-pdp-root .pdp-ingredients__ic {
  display: grid; place-items: center; overflow: hidden;
  width: 34px; height: 34px;
  border-radius: 999px; background: var(--slv2-f50); color: var(--slv2-accent-primary);
}
.v2-pdp-root .pdp-ingredients__ic img { width: 100%; height: 100%; object-fit: cover; }
.v2-pdp-root .pdp-ingredients__body strong {
  display: block; color: var(--slv2-ink); font-size: 12px; font-weight: 600; line-height: 1.3;
}
.v2-pdp-root .pdp-ingredients__body p {
  margin: 2px 0 0; color: var(--slv2-ink-4); font-size: 11px; line-height: 1.45;
}

/* --------------------------------------------------------- how to use */
.v2-pdp-root .pdp-howto__steps {
  margin: 0; padding: 0; list-style: none;
  counter-reset: pdp-step;
}
.v2-pdp-root .pdp-howto__step {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 11px;
  padding: 11px 0;
}
.v2-pdp-root .pdp-howto__step + .pdp-howto__step { border-top: 1px solid var(--slv2-line-2); }
.v2-pdp-root .pdp-howto__num {
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: 999px;
  background: var(--slv2-accent-primary); color: #FBF8F1;
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.v2-pdp-root .pdp-howto__step p {
  margin: 2px 0 0; color: var(--slv2-ink-2); font-size: 13px; line-height: 1.6;
}

/* ----------------------------------------------------- specifications */
/* Two columns and a hairline. No panel, no border around the block. */
.v2-pdp-root .pdp-specs__table { margin: 0; }
.v2-pdp-root .pdp-specs__row {
  display: grid; grid-template-columns: minmax(90px, 38%) minmax(0, 1fr); gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--slv2-line-2);
}
.v2-pdp-root .pdp-specs__row:first-child { border-top: 0; }
.v2-pdp-root .pdp-specs__table dt { color: var(--slv2-ink-4); font-size: 12px; }
.v2-pdp-root .pdp-specs__table dd {
  margin: 0; color: var(--slv2-ink); font-size: 12.5px; font-weight: 600;
}

/* ------------------------------------------------------------ desktop */
@media (min-width: 901px) {
  .v2-pdp-root .pdp-about__text { font-size: 15px; }
  .v2-pdp-root .pdp-ingredients__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .v2-pdp-root .variantlist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v2-pdp-root .pdp-specs__row { grid-template-columns: minmax(140px, 26%) minmax(0, 1fr); }
}

/* ═══ src/styles/v2-cart-checkout.css ═══ */
/* ============================================================================
   SORA LIFE V2 — CART + CHECKOUT
   Presentation-only layer. The legacy selectors remain in place for logic and
   shared components; every rule here is scoped to a V2 route root.
   ============================================================================ */

.v2-cart-root,
.v2-checkout-root {
  --v2-surface: var(--slv2-paper, #FFFDF8);
  --v2-ground: var(--slv2-ivory, #FBF8F1);
  --v2-line: var(--slv2-line, #E5DCCB);
  --v2-line-soft: var(--slv2-line-2, #F0E9DB);
  --v2-ink: var(--slv2-ink, #16211B);
  --v2-muted: var(--slv2-ink-3, #5F6D64);
  --v2-primary: var(--slv2-accent-primary, #1E3A2F);
  --v2-primary-hover: var(--slv2-cta-primary-hover, #1A3226);
  --v2-gold: var(--slv2-accent-gold, #C79A45);
  --v2-discount-bg: var(--slv2-discount-bg, #F4E9D2);
  --v2-discount-text: var(--slv2-discount-text, #866419);
  background: var(--v2-ground);
  color: var(--v2-ink);
  min-width: 0;
}

.v2-cart-root *,
.v2-checkout-root * { box-sizing: border-box; }

.v2-cart-root a,
.v2-checkout-root a { color: inherit; }

/* ----------------------------------------------- cart frame + heading */
.v2-cart-root .v2-cart-head {
  background: var(--v2-ground);
  border-bottom: 1px solid var(--v2-line);
}
.v2-cart-root .v2-cart-head > .v2-wrap { padding-top: 20px; padding-bottom: 22px; }
.v2-cart-root .v2-cart-head h1 {
  margin: 10px 0 3px;
  color: var(--v2-ink);
  font-family: var(--slv2-disp, Georgia, serif);
  font-size: clamp(28px, 5vw, 42px);
  line-height: 1.08;
  letter-spacing: -.02em;
}
.v2-cart-root .v2-cart-head p { margin: 0; color: var(--v2-muted); font-size: 13px; }
.v2-cart-root .v2-crumbs {
  display: flex; align-items: center; gap: 5px;
  margin: 0; color: var(--v2-muted); font-size: 11px;
}
.v2-cart-root .v2-crumbs a { text-decoration: none; }
.v2-cart-root .v2-crumbs a:hover { color: var(--v2-primary); }
.v2-cart-body { padding-top: 28px; padding-bottom: 44px; }
.v2-cart-root .cartlayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: clamp(22px, 4vw, 56px);
  align-items: start;
}
.v2-cart-root .cartlayout__main,
.v2-cart-root .cartlayout__aside,
.v2-cart-root .cartlist { min-width: 0; }

/* ----------------------------------------------- cart rows */
.v2-cart-root .cartlist {
  background: var(--v2-surface);
  border-top: 1px solid var(--v2-line);
  border-bottom: 1px solid var(--v2-line);
}
.v2-cart-root .cartrow {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 18px;
  padding: 14px 0;
  background: var(--v2-surface);
  border: 0;
  border-bottom: 1px solid var(--v2-line-soft);
  border-radius: 0;
}
.v2-cart-root .cartrow:last-child { border-bottom: 0; }
.v2-cart-root .cartrow__media {
  display: block;
  align-self: start;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--v2-line-soft);
  border-radius: var(--slv2-r-art, 4px);
  background: var(--slv2-cream, #F4EEE1);
}
.v2-cart-root .cartrow__media .v2-pimg { width: 100%; }
.v2-cart-root .cartrow__info { min-width: 0; display: flex; flex-direction: column; }
.v2-cart-root .cartrow__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
}
.v2-cart-root .cartrow__top > div:first-child { min-width: 0; }
.v2-cart-root .cartrow__name {
  display: block;
  max-width: 34em;
  color: var(--v2-ink);
  font-family: var(--slv2-sans, system-ui, sans-serif);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.35;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.v2-cart-root .cartrow__name:hover { color: var(--v2-primary); }
.v2-cart-root .cartrow__variant {
  display: inline-block;
  margin-top: 7px;
  padding: 3px 7px;
  border: 1px solid var(--v2-line);
  border-radius: var(--slv2-r-ui, 2px);
  background: var(--slv2-cream, #F4EEE1);
  color: var(--v2-muted);
  font-size: 10px;
  line-height: 1.2;
}
.v2-cart-root .cartrow__unit {
  display: block;
  margin-top: 9px;
  color: var(--v2-muted);
  font-size: 11px;
}
.v2-cart-root .cartrow__unitprice { color: var(--slv2-price, var(--v2-ink)); font-weight: 700; }
.v2-cart-root .cartrow__unit s { margin-left: 7px; color: var(--slv2-price-mrp, var(--v2-muted)); }
.v2-cart-root .cartrow__price {
  color: var(--slv2-price, var(--v2-ink));
  font-family: var(--slv2-disp, Georgia, serif);
  font-size: 18px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
  text-align: right;
}
.v2-cart-root .cartrow__price s {
  display: block;
  margin-top: 4px;
  color: var(--slv2-price-mrp, var(--v2-muted));
  font-family: var(--slv2-sans, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 500;
}
.v2-cart-root .cartrow__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 20px;
  flex-wrap: wrap;
}
.v2-cart-root .qty.qty--sm {
  display: inline-flex;
  height: 34px;
  border: 1px solid var(--v2-line);
  border-radius: var(--slv2-r-ui, 2px);
  background: var(--v2-ground);
}
.v2-cart-root .qty.qty--sm button {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 0; border-radius: 0; background: transparent; color: var(--v2-ink); cursor: pointer;
}
.v2-cart-root .qty.qty--sm button:hover { background: var(--slv2-cream, #F4EEE1); }
.v2-cart-root .qty.qty--sm span {
  width: 30px; display: grid; place-items: center;
  border-inline: 1px solid var(--v2-line); color: var(--v2-ink); font-size: 12px; font-weight: 700;
}
.v2-cart-root .linkbtn {
  min-height: 34px;
  gap: 5px;
  color: var(--v2-muted);
  font-size: 11px;
}
.v2-cart-root .linkbtn:hover { color: var(--v2-primary); }
.v2-cart-root .linkbtn--danger:hover { color: var(--slv2-alert, #9A3F33); }

/* ------------------------------------------------ order summary */
.v2-cart-root .v2-summary,
.v2-checkout-root .v2-summary {
  position: sticky;
  top: 88px;
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--v2-line);
  border-radius: var(--slv2-r-ui, 2px);
  background: var(--v2-surface);
  box-shadow: none;
}
.v2-cart-root .v2-summary h3,
.v2-checkout-root .v2-summary h3 {
  margin: 0 0 18px;
  color: var(--v2-ink);
  font-family: var(--slv2-disp, Georgia, serif);
  font-size: 22px;
  line-height: 1.15;
}
/* No markup uses these right now: the cart's coupon field was removed because
   it applied codes the server had never heard of (see Cart.jsx). The styling
   is kept so restoring the field, once a validated coupon path exists, is a
   JSX change and not a re-design. */
.v2-cart-root .summary__coupon { align-items: stretch; gap: 7px; margin-bottom: 12px; }
.v2-cart-root .v2-coupon {
  min-width: 0;
  display: flex; align-items: center; gap: 7px;
  border: 1px solid var(--v2-line);
  border-radius: var(--slv2-r-ui, 2px);
  background: var(--v2-ground);
}
.v2-cart-root .v2-coupon .input {
  min-width: 0; height: 40px; padding-inline: 0; border: 0; background: transparent; box-shadow: none;
}
.v2-cart-root .v2-coupon > svg { flex: 0 0 auto; margin-left: 10px; color: var(--v2-muted); }
.v2-cart-root .summary__coupon > button {
  height: 40px; min-width: 66px; padding: 0 12px;
  border: 1px solid var(--v2-primary); border-radius: var(--slv2-r-ui, 2px);
  background: transparent; color: var(--v2-primary); font-weight: 650;
}
.v2-cart-root .summary__coupon > button:hover { background: var(--slv2-f50, #F0F6F2); }
.v2-cart-root .summary__applied { color: var(--slv2-save, var(--v2-primary)); font-size: 11px; }
.v2-cart-root .error-text { margin: 0 0 10px; font-size: 11px; }
.v2-cart-root .v2-summary .psum,
.v2-checkout-root .v2-summary .psum { margin-top: 16px; padding-block: 14px; border-top: 1px solid var(--v2-line-soft); }
.v2-cart-root .v2-summary .psum__row,
.v2-checkout-root .v2-summary .psum__row { display: flex; justify-content: space-between; gap: 12px; min-width: 0; padding: 5px 0; color: var(--v2-muted); font-size: 12px; }
.v2-cart-root .v2-summary .psum__value,
.v2-checkout-root .v2-summary .psum__value { color: var(--v2-ink); font-weight: 650; white-space: nowrap; }
.v2-cart-root .v2-summary .psum__row--save .psum__value,
.v2-checkout-root .v2-summary .psum__row--save .psum__value { color: var(--slv2-save, var(--v2-primary)); }
.v2-cart-root .v2-summary .psum__row--mrp .psum__value,
.v2-checkout-root .v2-summary .psum__row--mrp .psum__value { color: var(--slv2-price-mrp, var(--v2-muted)); }
.v2-cart-root .v2-summary .psum__rule,
.v2-checkout-root .v2-summary .psum__rule { margin: 10px 0 6px; border-top: 1px solid var(--v2-line); }
.v2-cart-root .v2-summary .psum__row.is-strong,
.v2-checkout-root .v2-summary .psum__row.is-strong { padding-top: 10px; color: var(--v2-ink); font-size: 15px; }
.v2-cart-root .v2-summary .psum__row.is-strong .psum__value,
.v2-checkout-root .v2-summary .psum__row.is-strong .psum__value { color: var(--slv2-price, var(--v2-ink)); font-size: 20px; }
.v2-cart-root .v2-summary .psum__hint,
.v2-checkout-root .v2-summary .psum__hint { margin: 8px 0 0; color: var(--v2-muted); font-size: 10px; line-height: 1.45; }
.v2-cart-root .v2-summary .psum__save,
.v2-checkout-root .v2-summary .psum__save { margin: 10px 0 0; color: var(--slv2-save, var(--v2-primary)); font-size: 11px; font-weight: 650; }
.v2-cart-root .summary__ship-hint {
  display: flex; align-items: flex-start; gap: 7px;
  margin: 0 0 14px; padding: 10px;
  border: 1px solid var(--slv2-gold-2, #E4C482);
  border-radius: var(--slv2-r-ui, 2px);
  background: var(--v2-discount-bg); color: var(--v2-discount-text);
  font-size: 11px; line-height: 1.35;
}
.v2-cart-root .v2-summary > .btn-block {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; min-height: 48px; padding: 0 18px;
  border: 1px solid var(--slv2-cta-primary-bg, var(--v2-primary));
  border-radius: var(--slv2-r-ui, 2px);
  background: var(--slv2-cta-primary-bg, var(--v2-primary)); color: var(--slv2-cta-primary-text, #FBF8F1);
  font-size: 13px; font-weight: 700;
}
.v2-cart-root .v2-summary > .btn-block:hover { background: var(--v2-primary-hover); }
.v2-cart-root .summary__continue { min-height: 40px; margin-top: 8px; color: var(--v2-muted); font-size: 11px; }
.v2-cart-root .summary__badges {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--v2-line-soft);
}
.v2-cart-root .summary__badges span {
  display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0;
  color: var(--v2-muted); font-size: 9px; line-height: 1.3; text-align: center;
}
.v2-cart-root .summary__badges svg { color: var(--v2-primary); }

/* ----------------------------------------------- saved + recommendations */
.v2-cart-root .savedlist { margin-top: 30px; }
.v2-cart-root .savedlist > h3 { margin: 0 0 12px !important; color: var(--v2-ink); }
.v2-cart-root .savedlist__grid { gap: 12px; }
.v2-cart-root .savedcard {
  grid-template-columns: 88px minmax(0, 1fr);
  min-width: 0; padding: 10px;
  border: 1px solid var(--v2-line-soft); border-radius: var(--slv2-r-ui, 2px); background: var(--v2-surface);
}
.v2-cart-root .savedcard__media { border-radius: var(--slv2-r-art, 4px); }
.v2-cart-root .savedcard__media .v2-pimg { width: 100%; }
.v2-cart-root .savedcard__name { color: var(--v2-ink); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.v2-cart-root .savedcard__actions { gap: 8px; }
.v2-cart-root .savedcard__actions .btn { min-height: 34px; border: 1px solid var(--v2-line); border-radius: var(--slv2-r-ui, 2px); background: var(--slv2-cream); color: var(--v2-ink); font-size: 10px; }
.v2-cart-root .v2-cart-empty { padding-top: 32px; padding-bottom: 44px; }
.v2-cart-root .v2-cart-empty .state { max-width: 480px; margin-inline: auto; padding: 36px 18px; border: 1px solid var(--v2-line); border-radius: var(--slv2-r-ui, 2px); background: var(--v2-surface); }
.v2-cart-root .v2-cart-empty .state .btn { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; border-radius: var(--slv2-r-ui, 2px); background: var(--slv2-cta-primary-bg, var(--v2-primary)); color: var(--slv2-cta-primary-text, #FBF8F1); }

/* ----------------------------------------------- checkout frame */
.v2-checkout-root.checkout { background: var(--v2-ground); }
.v2-checkout-root .checkout__bar { background: var(--v2-surface); border-bottom: 1px solid var(--v2-line); }
.v2-checkout-root .checkout__bar-in { min-height: 64px; height: auto; padding-top: 10px; padding-bottom: 10px; }
.v2-checkout-root .checkout__secure { color: var(--v2-primary); font-size: 11px; }
.v2-checkout-root .checkout__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: clamp(22px, 5vw, 64px);
  align-items: start;
  padding-top: 30px; padding-bottom: 48px;
}
.v2-checkout-root .checkout__main,
.v2-checkout-root .checkout__aside { min-width: 0; }
.v2-checkout-root .checkout__main { max-width: none; }
.v2-checkout-root .stepper { gap: 8px; margin: 0 0 20px; min-width: 0; }
.v2-checkout-root .stepper__item { gap: 7px; color: var(--v2-muted); font-size: 11px; }
.v2-checkout-root .stepper__item:not(:last-child)::after { width: clamp(16px, 4vw, 52px); height: 1px; background: var(--v2-line); }
.v2-checkout-root .stepper__num {
  width: 26px; height: 26px; border: 1px solid var(--v2-line); border-radius: var(--slv2-r-ui, 2px);
  background: var(--slv2-cream, #F4EEE1); color: var(--v2-muted); font-size: 10px;
}
.v2-checkout-root .stepper__item.active .stepper__num { border-color: var(--v2-primary); background: var(--v2-primary); color: #FBF8F1; }
.v2-checkout-root .stepper__item.done .stepper__num { border-color: var(--slv2-save, var(--v2-primary)); background: var(--slv2-save, var(--v2-primary)); color: #FBF8F1; }
.v2-checkout-root .stepper__item.active { color: var(--v2-primary); }
.v2-checkout-root .cform {
  gap: 16px; padding: clamp(20px, 4vw, 32px);
  border: 1px solid var(--v2-line); border-radius: var(--slv2-r-ui, 2px); background: var(--v2-surface);
}
.v2-checkout-root .cform h2 { margin: 0; color: var(--v2-ink); font-family: var(--slv2-disp, Georgia, serif); font-size: 27px; line-height: 1.12; }
.v2-checkout-root .cform > .muted { margin: -3px 0 2px; color: var(--v2-muted); font-size: 12px; line-height: 1.55; }
.v2-checkout-root .field { gap: 6px; min-width: 0; }
.v2-checkout-root .label { color: var(--v2-muted); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.v2-checkout-root .input {
  width: 100%; min-width: 0; height: 42px; padding: 0 11px;
  border: 1px solid var(--v2-line); border-radius: var(--slv2-r-ui, 2px);
  background: var(--v2-ground); color: var(--v2-ink); font-size: 13px;
}
.v2-checkout-root textarea.input { min-height: 80px; padding-top: 10px; }
.v2-checkout-root .input:focus { border-color: var(--v2-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--v2-primary) 16%, transparent); outline: 0; }
.v2-checkout-root .check { align-items: center; color: var(--v2-muted); font-size: 11px; }
.v2-checkout-root .check__box { border-radius: var(--slv2-r-ui, 2px); }
.v2-checkout-root .cform .btn,
.v2-checkout-root .cform__nav .btn {
  min-height: 44px; border-radius: var(--slv2-r-ui, 2px); font-size: 12px; font-weight: 700;
}
.v2-checkout-root .cform .v2-btn,
.v2-checkout-root .cform__nav .v2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--slv2-cta-primary-bg, var(--v2-primary));
  background: var(--slv2-cta-primary-bg, var(--v2-primary)); color: var(--slv2-cta-primary-text, #FBF8F1);
}
.v2-checkout-root .cform .v2-btn:hover { border-color: var(--v2-primary-hover); background: var(--v2-primary-hover); }
.v2-checkout-root .cform .v2-btn--ghost { border: 1px solid var(--v2-line); background: transparent; color: var(--v2-muted); }
.v2-checkout-root .cform .v2-btn--ghost:hover { background: var(--slv2-cream); color: var(--v2-ink); }
.v2-checkout-root .cform .v2-btn--out { border: 1px solid var(--v2-primary); background: transparent; color: var(--v2-primary); }
.v2-checkout-root .cform .v2-btn--sm { min-height: 36px; border: 1px solid var(--v2-primary); border-radius: var(--slv2-r-ui, 2px); background: var(--v2-primary); color: #FBF8F1; }
.v2-checkout-root .optlist { gap: 8px; }
.v2-checkout-root .opt {
  min-width: 0; padding: 14px;
  border: 1px solid var(--v2-line); border-radius: var(--slv2-r-ui, 2px); background: var(--v2-surface);
}
.v2-checkout-root .opt:hover { border-color: var(--slv2-f400, #578D72); }
.v2-checkout-root .opt.active { border-color: var(--v2-primary); background: var(--slv2-f50, #F0F6F2); }
.v2-checkout-root .opt__radio { width: 18px; height: 18px; border: 1px solid var(--v2-line); border-radius: var(--slv2-r-ui, 2px); }
.v2-checkout-root .opt.active .opt__radio { border-color: var(--v2-primary); }
.v2-checkout-root .opt.active .opt__radio::after { inset: 3px; border-radius: 0; background: var(--v2-primary); }
.v2-checkout-root .opt__body { min-width: 0; }
.v2-checkout-root .opt__body strong { color: var(--v2-ink); font-size: 13px; overflow-wrap: anywhere; }
.v2-checkout-root .opt__body em { color: var(--v2-muted); font-size: 11px; overflow-wrap: anywhere; }
.v2-checkout-root .opt__price { color: var(--v2-ink); font-size: 12px; white-space: nowrap; }
.v2-checkout-root .opt svg { color: var(--v2-primary); flex: 0 0 auto; }
.v2-checkout-root .paystate { border-radius: var(--slv2-r-ui, 2px); border: 1px solid var(--v2-line); font-size: 12px; }
.v2-checkout-root .paystate--error { border-color: color-mix(in srgb, var(--slv2-alert, #9A3F33) 35%, var(--v2-line)); }
.v2-checkout-root .paystate__actions { flex-wrap: wrap; }

/* ----------------------------------------------- checkout summary */
.v2-checkout-root .checkout__aside .v2-summary { top: 84px; }
.v2-checkout-root .checkout__items { gap: 12px; max-height: 330px; margin-bottom: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--v2-line-soft); overflow-y: auto; }
.v2-checkout-root .checkout__item { grid-template-columns: 54px minmax(0, 1fr) auto; gap: 11px; min-width: 0; }
.v2-checkout-root .checkout__thumb { width: 54px; height: 54px; border: 1px solid var(--v2-line-soft); border-radius: var(--slv2-r-art, 4px); background: var(--slv2-cream); }
.v2-checkout-root .checkout__thumb .v2-pimg { width: 100%; height: 100%; }
.v2-checkout-root .checkout__qty { top: -6px; right: -6px; min-width: 20px; height: 20px; border: 2px solid var(--v2-surface); border-radius: var(--slv2-r-ui, 2px); background: var(--v2-primary); font-size: 10px; }
.v2-checkout-root .checkout__meta { min-width: 0; }
.v2-checkout-root .checkout__meta strong { display: block; color: var(--v2-ink); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.v2-checkout-root .checkout__meta em { color: var(--v2-muted); font-size: 10px; overflow-wrap: anywhere; }
.v2-checkout-root .checkout__lp { color: var(--slv2-price, var(--v2-ink)); font-size: 12px; }

/* ----------------------------------------------- confirmation + empty */
.v2-checkout-confirm-root { min-height: 70vh; }
.v2-checkout-confirm-root .confirm { max-width: 680px; margin-inline: auto; padding: 30px 0 44px; }
.v2-checkout-confirm-root .confirm__card { border-radius: var(--slv2-r-ui, 2px); border-color: var(--v2-line); background: var(--v2-surface); }
.v2-checkout-root:not(.checkout) .v2-wrap > .state { max-width: 480px; margin-inline: auto; padding: 36px 18px; border: 1px solid var(--v2-line); border-radius: var(--slv2-r-ui, 2px); background: var(--v2-surface); }

/* ----------------------------------------------- responsive constraints */
@media (min-width: 901px) {
  /* Stick the grid item, not its same-height child. Clear the V2 desktop
     header; long carts/offers must still allow access to every summary CTA. */
  .v2-cart-root .cartlayout__aside,
  .v2-checkout-root .checkout__aside {
    position: sticky;
    top: 136px;
    align-self: start;
    max-height: calc(100vh - 152px);
    max-height: calc(100dvh - 152px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .v2-cart-root .cartlayout__aside .v2-summary,
  .v2-checkout-root .checkout__aside .v2-summary { position: static; }
}
@media (max-width: 900px) {
  .v2-cart-root .cartlayout { grid-template-columns: 1fr; }
  .v2-cart-root .cartlayout__aside { order: 2; }
  .v2-cart-root .v2-summary,
  .v2-checkout-root .v2-summary { position: static; }
  .v2-checkout-root .checkout__grid { grid-template-columns: 1fr; }
  .v2-checkout-root .checkout__aside { order: -1; }
}
@media (max-width: 560px) {
  .v2-cart-root .v2-cart-head > .v2-wrap { padding-top: 16px; padding-bottom: 18px; }
  .v2-cart-body { padding-top: 18px; padding-bottom: 34px; }
  .v2-cart-root .cartrow { grid-template-columns: 82px minmax(0, 1fr); gap: 12px; padding: 12px 0; }
  .v2-cart-root .cartrow__top { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .v2-cart-root .cartrow__name { font-size: 13px; }
  .v2-cart-root .cartrow__price { font-size: 15px; }
  .v2-cart-root .cartrow__actions { gap: 9px; padding-top: 14px; }
  .v2-cart-root .cartrow__actions .linkbtn { min-height: 34px; font-size: 10px; }
  .v2-cart-root .v2-summary { padding: 18px 14px; }
  .v2-cart-root .summary__badges { gap: 4px; }
  .v2-cart-root .summary__badges span { font-size: 8px; }
  .v2-cart-root .savedlist__grid { grid-template-columns: 1fr; }
  .v2-checkout-root .checkout__grid { padding-top: 18px; padding-bottom: 28px; }
  .v2-checkout-root .checkout__bar-in { min-height: 58px; }
  .v2-checkout-root .cform { padding: 18px 14px; }
  .v2-checkout-root .cform h2 { font-size: 24px; }
  .v2-checkout-root .cform__nav { gap: 10px; }
  .v2-checkout-root .cform__nav > .btn:last-child { min-width: 0; flex: 1; }
  .v2-checkout-root .stepper__lbl { display: none; }
  .v2-checkout-root .stepper__item:not(:last-child)::after { width: 28px; }
}
@media (max-width: 359px) {
  .v2-cart-root .cartrow { grid-template-columns: 72px minmax(0, 1fr); gap: 10px; }
  .v2-cart-root .cartrow__name { font-size: 12px; }
  .v2-cart-root .cartrow__price { font-size: 14px; }
  .v2-cart-root .cartrow__actions { column-gap: 7px; }
  .v2-cart-root .cartrow__actions .linkbtn { font-size: 9px; }
  .v2-checkout-root .stepper__item:not(:last-child)::after { width: 18px; }
  .v2-checkout-root .cform__nav .btn { padding-inline: 10px; font-size: 10px; }
}
@media (min-width: 901px) {
  .v2-cart-root .cartrow { min-height: 156px; }
  .v2-checkout-root .checkout__aside { min-width: 0; }
}

/* ============================================================
   Cart line: unavailable state, and mobile touch targets.

   TOUCH TARGETS — pages.css already raises the cart stepper and the
   Save/Remove links to 44px on phones, with a comment explaining why
   ("were 21-23px tall on phones"). Those rules were still in the codebase
   but had stopped applying: every rule in THIS file is scoped under
   .v2-cart-root, which outranks them, so the redesign silently pinned the
   controls back to 32-34px. The originals are left untouched; these
   restore the same intent at the same specificity the override needs.

   The stepper stays visually 34px tall — the taller hit area comes from
   padding on the button, so the design does not change, only the target.
   ============================================================ */
.v2-cart-root .cartrow__unavailable {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 8px 0 0;
  color: var(--color-sale, #A94F4F);
  font-size: 11px;
  line-height: 1.45;
}
.v2-cart-root .cartrow__unavailable svg { flex: 0 0 auto; margin-top: 1px; }
/* Dimmed, not hidden: the customer still has to recognise the item to act
   on it. The warning text and the controls stay at full contrast. */
.v2-cart-root .cartrow--blocked .cartrow__media,
.v2-cart-root .cartrow--blocked .cartrow__name { opacity: 0.62; }

.v2-cart-root .savedcard__variant {
  align-self: flex-start;
  padding: 2px 6px;
  border: 1px solid var(--v2-line);
  border-radius: var(--slv2-r-ui, 2px);
  color: var(--v2-muted);
  font-size: 10px;
  letter-spacing: 0.02em;
}

/* The empty cart's heading is an <h1> so the page has one; it keeps the
   size the .state block was designed around. */
.v2-cart-root .v2-cart-empty .state__h {
  margin: 0 0 10px;
  font-size: var(--text-2xl);
  font-weight: 600;
}

/* Minus is disabled at qty 1 rather than silently doing nothing — matching
   the PDP stepper. Kept subtle: still part of the control, clearly inactive. */
.v2-cart-root .qty.qty--sm button:disabled { color: var(--slv2-ink-4, var(--v2-muted)); cursor: not-allowed; }
.v2-cart-root .qty.qty--sm button:disabled:hover { background: transparent; }

@media (max-width: 900px) {
  /* The stepper grows to 44px on phones and keeps its 34px density from
     901px up, so desktop is untouched. The container carries a fixed height,
     so it has to be raised with the buttons or it would clip them —
     everything here is border-box. 44 + 34 + 44 = 122px wide, comfortably
     inside the ~330px content column at 390px. */
  .v2-cart-root .qty.qty--sm { height: 44px; }
  .v2-cart-root .qty.qty--sm button { width: 44px; height: 44px; }
  .v2-cart-root .qty.qty--sm span { width: 34px; }
  /* Remove is destructive and was the smallest target on the row. Matched at
     .cartrow__actions depth on purpose: a narrower rule below pins these to
     34px at 560px and would otherwise outrank a plainer .v2-cart-root
     .linkbtn selector on exactly the phone widths this is for. */
  .v2-cart-root .cartrow__actions .linkbtn,
  .v2-cart-root .savedlist .linkbtn { min-height: 44px; }
  .v2-cart-root .savedcard__actions .btn { min-height: 44px; }
}

/* ═══ src/styles/v2-mobile-cart.css ═══ */
/* The existing navigation keeps its design and safe-area padding. Only on
   eligible populated-cart routes do the two bars share a fixed stack. */
.v2-cart-dock { display:contents; }
.v2-mobile-cart { display:none; }

@media screen and (max-width:900px) {
  :root:has(.v2-cart-dock--active) { --slv2-mobile-cart-height:60px; }

  .v2-cart-dock--active {
    display:flex; flex-direction:column;
    position:fixed; inset-inline:0; bottom:0; z-index:95;
  }
  .v2-cart-dock--active > .tabbar { position:static; }
  /* The full-screen filter drawer owns its bottom action area while open. */
  body:has(.v2-fd.is-open) .v2-cart-dock { visibility:hidden; }

  .v2-mobile-cart {
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    height:var(--slv2-mobile-cart-height); padding:8px var(--slv2-gutter);
    padding-left:max(var(--slv2-gutter), env(safe-area-inset-left));
    padding-right:max(var(--slv2-gutter), env(safe-area-inset-right));
    background:var(--slv2-cta-primary-bg); color:var(--slv2-cta-primary-text);
    border-radius:0; box-shadow:none;
    font-family:var(--slv2-sans);
  }
  /* One baseline: amount first, count as a quiet suffix beside it. */
  .v2-mobile-cart__totals {
    display:flex; align-items:baseline; gap:8px;
    min-width:0; font-variant-numeric:tabular-nums;
  }
  .v2-mobile-cart__count {
    font-size:11px; line-height:16px; font-weight:500;
    letter-spacing:.08em; text-transform:uppercase; opacity:.82; white-space:nowrap;
  }
  .v2-mobile-cart__subtotal { font-size:18px; line-height:24px; font-weight:600; }
  .v2-mobile-cart__link {
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    flex-shrink:0; min-height:44px; padding:0 4px;
    color:inherit; text-decoration:none; border-radius:var(--slv2-r-ui);
    font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  }
  .v2-mobile-cart__link:focus-visible { outline:2px solid currentColor; outline-offset:2px; }

  /* Reserve the extra bar at the end of content and the footer. Anchor/focus
     scrolling and add-to-cart notifications also stay clear of the dock. */
  body:has(.v2-cart-dock--active) .page-main { padding-bottom:var(--slv2-mobile-cart-height); }
  body:has(.v2-cart-dock--active) .ftr {
    padding-bottom:calc(60px + env(safe-area-inset-bottom) + var(--sp-4) + var(--slv2-mobile-cart-height));
  }
  html:has(.v2-cart-dock--active) {
    scroll-padding-bottom:calc(76px + env(safe-area-inset-bottom) + var(--slv2-mobile-cart-height));
  }
  body:has(.v2-cart-dock--active) .toast-wrap {
    bottom:calc(72px + env(safe-area-inset-bottom) + var(--slv2-mobile-cart-height));
  }
}

/* ═══ src/styles/coupons.css ═══ */
/* ============================================================
   COUPONS — tickets, the cart's offers panel, and the celebration

   ONE TICKET SHAPE. `.ticket` draws the notched sides; a `__stub` child
   draws the dashed perforation. The notches are radial-gradient cut-outs
   painted in the colour of whatever the ticket sits on, which is why each
   context sets --ticket-cut: the PDP panel is --color-surface, the cart
   summary is --v2-surface, the admin card is --paper. No images, no extra
   elements, no clip-path (which would take the box-shadow with it).

   Every colour is an existing token. The one derived tint — the diagonal
   texture on an applied ticket — is honey at low alpha via color-mix, which
   this stylesheet set already uses (components.css, pages.css).

   MOTION RULES for the celebration: transform and opacity only. Nothing
   here animates a layout property, a filter, or a shadow, and the scrim has
   no backdrop-filter — at 4× CPU on a phone, blurring the whole page behind
   thirty-six moving particles is exactly the cost that drops frames.
   ============================================================ */

/* ---- The ticket ------------------------------------------------ */

.ticket {
  --notch: 11px;
  --ticket-cut: var(--color-surface);
  position: relative;
  display: flex;
  align-items: stretch;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-xs);
  background-image:
    radial-gradient(circle at left  50%, var(--ticket-cut) var(--notch), transparent calc(var(--notch) + 0.5px)),
    radial-gradient(circle at right 50%, var(--ticket-cut) var(--notch), transparent calc(var(--notch) + 0.5px));
  background-repeat: no-repeat;
  background-size: var(--notch) 100%, var(--notch) 100%;
  background-position: left center, right center;
}

/* ---- PDP: collapsible offers ----------------------------------- */

.pdp-coupons {
  margin: var(--sp-4) 0 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--color-surface);
  overflow: hidden;
}

.pdp-coupons__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: var(--color-text);
  text-align: left;
  min-height: 44px;
}
.pdp-coupons__head:hover { background: var(--honey-100); }
.pdp-coupons__head:focus-visible { outline: none; box-shadow: inset var(--shadow-focus); }

.pdp-coupons__icon { display: inline-flex; color: var(--color-accent-strong); }

.pdp-coupons__label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 1;
  font-size: var(--text-base);
  font-weight: 600;
}

.pdp-coupons__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--color-accent-strong);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pdp-coupons__chev { display: inline-flex; color: var(--ink-400); transition: transform 180ms ease; }
.pdp-coupons__chev.is-open { transform: rotate(180deg); }

.pdp-coupons__list {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  list-style: none;
  border-top: 1px solid var(--line-soft);
}

.pdp-coupon { background-color: var(--honey-100); }

.pdp-coupon__body {
  flex: 1;
  min-width: 0;
  padding: var(--sp-3) var(--sp-3) var(--sp-3) calc(var(--notch) + var(--sp-2));
}
.pdp-coupon__title { margin: 0; font-size: var(--text-base); font-weight: 700; color: var(--forest-800); }
.pdp-coupon__desc { margin: 2px 0 0; font-size: var(--text-xs); color: var(--ink-500); }

.pdp-coupon__stub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--sp-3) calc(var(--notch) + var(--sp-2)) var(--sp-3) var(--sp-3);
  border-left: 1px dashed var(--honey-400);
}
.pdp-coupon__code {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-accent-text);
}
.pdp-coupon__apply {
  border: 0;
  background: none;
  padding: 4px 2px;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--forest-700);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  min-height: 24px;
}
.pdp-coupon__apply:disabled { color: var(--color-success); text-decoration: none; cursor: default; }
.pdp-coupon.is-applied { background-color: var(--forest-100); }
.pdp-coupon.is-applied .pdp-coupon__stub { border-left-color: var(--forest-300); }

/* ---- Cart: coupons and offers ---------------------------------- */

.cartcoupon {
  margin: var(--sp-4) 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-soft);
}
.cartcoupon .ticket { --ticket-cut: var(--v2-surface, var(--paper)); }

.cartcoupon__h {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-500);
}
.cartcoupon__h svg { color: var(--color-accent-strong); }

/* Applied — the ticket in ink-green with a honey ribbon. The diagonal
   texture is honey at 7% over the gradient, so it reads as paper grain
   rather than a stripe. */
.cartcoupon__applied {
  color: var(--color-on-primary);
  background-color: var(--forest-700);
  background-image:
    radial-gradient(circle at left  50%, var(--ticket-cut) var(--notch), transparent calc(var(--notch) + 0.5px)),
    radial-gradient(circle at right 50%, var(--ticket-cut) var(--notch), transparent calc(var(--notch) + 0.5px)),
    repeating-linear-gradient(
      -45deg,
      color-mix(in srgb, var(--honey-500) 7%, transparent) 0 6px,
      transparent 6px 14px
    ),
    linear-gradient(135deg, var(--forest-600), var(--forest-800));
  background-size: var(--notch) 100%, var(--notch) 100%, auto, auto;
  background-position: left center, right center, 0 0, 0 0;
  box-shadow: var(--shadow-sm);
}

.cartcoupon__appliedbody {
  flex: 1;
  min-width: 0;
  padding: var(--sp-3) var(--sp-3) var(--sp-3) calc(var(--notch) + var(--sp-3));
}

.cartcoupon__ribbon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
  padding: 3px 9px 3px 7px;
  border-radius: var(--r-pill);
  background: var(--honey-500);
  color: var(--forest-900);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cartcoupon__appliedcode {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
  line-height: 1.1;
}
.cartcoupon__appliedtitle {
  margin: 3px 0 0;
  font-size: var(--text-xs);
  color: var(--forest-200);
}

.cartcoupon__appliedstub {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  padding: var(--sp-3) calc(var(--notch) + var(--sp-3)) var(--sp-3) var(--sp-3);
  border-left: 1px dashed var(--forest-300);
}
.cartcoupon__savedlabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--forest-200);
}
.cartcoupon__saved {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--honey-400);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.cartcoupon__remove {
  border: 0;
  background: none;
  padding: var(--sp-1) 0;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  color: inherit;
  opacity: 0.8;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  min-height: 32px;
}
.cartcoupon__remove:hover { opacity: 1; }
.cartcoupon__refused .cartcoupon__remove { color: var(--color-danger); opacity: 1; text-decoration: none; padding: var(--sp-1) var(--sp-2); }
.cartcoupon__refused .cartcoupon__remove:hover { text-decoration: underline; }

/* Refused */
.cartcoupon__refused {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding: var(--sp-3);
  border: 1px solid var(--clay-500);
  border-radius: var(--r-sm);
  background: var(--clay-100);
}
.cartcoupon__refusedcode { font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.05em; color: var(--clay-600); }
.cartcoupon__refusedmsg { flex: 1; min-width: 0; font-size: var(--text-xs); color: var(--ink-700); }

/* Entry */
.cartcoupon__form { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.cartcoupon__input {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--color-surface);
  font: inherit;
  font-size: var(--text-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text);
}
.cartcoupon__input::placeholder { text-transform: none; letter-spacing: 0; color: var(--ink-400); }
.cartcoupon__input:focus-visible { outline: none; border-color: var(--color-ring); box-shadow: var(--shadow-focus); }
.cartcoupon__submit {
  flex: none;
  height: 42px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--color-primary);
  border-radius: var(--r-xs);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}
.cartcoupon__submit:disabled { opacity: 0.45; cursor: default; }

/* Offers — the honey ticket, same as the PDP */
.cartcoupon__offers { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-2); }

.cartcoupon__offer { background-color: var(--honey-100); }
.cartcoupon__offer.is-locked { background-color: var(--color-surface-2); box-shadow: none; }

.cartcoupon__offerbody {
  flex: 1;
  min-width: 0;
  padding: var(--sp-2) var(--sp-3) var(--sp-2) calc(var(--notch) + var(--sp-2));
}
.cartcoupon__offertitle { margin: 0; font-size: var(--text-sm); font-weight: 700; color: var(--forest-800); }
.cartcoupon__offerdesc { margin: 1px 0 0; font-size: var(--text-xs); color: var(--ink-500); }

.cartcoupon__offerstub {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  flex: none;
  padding: var(--sp-2) calc(var(--notch) + var(--sp-2)) var(--sp-2) var(--sp-3);
  border-left: 1px dashed var(--honey-400);
}
.cartcoupon__offer.is-locked .cartcoupon__offerstub { border-left-color: var(--line); }
.cartcoupon__offersave {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--price-save);
  font-variant-numeric: tabular-nums;
}
.cartcoupon__offerapply {
  border: 0;
  background: none;
  padding: 2px;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--forest-700);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  min-height: 24px;
}
.cartcoupon__offerapply:disabled { color: var(--ink-400); text-decoration: none; cursor: default; }

/* While a re-quote is in flight the figures stay put and dim. */
.is-requoting { opacity: 0.55; transition: opacity 120ms ease; }

/* ---- Celebration ------------------------------------------------ */

.celebrate {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  /* Flat. No backdrop-filter — see the note at the top. */
  background: rgba(20, 38, 28, 0.55);
  animation: celebrate-fade 200ms ease-out both;
}

.celebrate__card {
  position: relative;
  width: 100%;
  max-width: 340px;
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  border-radius: var(--r-xl);
  background: var(--paper);
  box-shadow: var(--shadow-lg);
  text-align: center;
  /* Clips the shower to the card. Particles never paint over the page. */
  overflow: hidden;
  animation: celebrate-pop 420ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

.celebrate__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-400);
  cursor: pointer;
}
.celebrate__close:hover { color: var(--ink-700); background: var(--cream); }

.celebrate__badge {
  position: relative;
  z-index: 2;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--sp-4);
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--color-primary);
  color: var(--honey-400);
  box-shadow: 0 0 0 8px var(--forest-100);
  animation: celebrate-badge 520ms cubic-bezier(0.2, 0.9, 0.3, 1.3) 120ms both;
}

.celebrate__eyebrow {
  position: relative;
  z-index: 2;
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}
.celebrate__code {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  letter-spacing: 0.04em;
  color: var(--forest-800);
}
.celebrate__title {
  position: relative;
  z-index: 2;
  margin: 4px 0 0;
  font-size: var(--text-sm);
  color: var(--ink-500);
}

.celebrate__saved {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: var(--sp-5) 0 var(--sp-3);
}
.celebrate__savedlabel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.celebrate__savedamt {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1;
  font-weight: 700;
  color: var(--price-save);
  font-variant-numeric: tabular-nums;
}
.celebrate__total {
  position: relative;
  z-index: 2;
  margin: 0 0 var(--sp-5);
  font-size: var(--text-sm);
  color: var(--ink-500);
}
.celebrate__total strong { color: var(--forest-800); font-variant-numeric: tabular-nums; }

.celebrate__ok {
  position: relative;
  z-index: 2;
  min-height: 44px;
  padding: 0 var(--sp-6);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
}
.celebrate__ok:hover { background: var(--color-primary-hover); }

/* The shower. Each bit is positioned by its own custom properties, set once
   at mount; the keyframes are shared and the compositor does the rest. */
.celebrate__confetti {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.celebrate__bit {
  position: absolute;
  top: -12px;
  left: var(--x);
  display: block;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0) rotate(0) scale(var(--s));
  animation: celebrate-fall var(--dur) cubic-bezier(0.25, 0.1, 0.5, 1) var(--delay) both;
}
.celebrate__bit.is-dot { width: 8px; height: 8px; border-radius: 50%; }
.celebrate__bit.is-honey       { background: var(--honey-500); }
.celebrate__bit.is-honey-light { background: var(--honey-300); }
.celebrate__bit.is-forest      { background: var(--forest-300); }
.celebrate__bit.is-clay        { background: var(--clay-500); }
.celebrate__bit.is-cream       { background: var(--sand); }

/* Two ribbon curls that unfurl behind the badge. */
.celebrate__ribbons {
  position: absolute;
  top: 46px;
  left: 50%;
  z-index: 1;
  width: 0;
  height: 0;
  pointer-events: none;
}
.celebrate__ribbon {
  position: absolute;
  top: 0;
  width: 14px;
  height: 92px;
  border-radius: 7px;
  background: linear-gradient(180deg, var(--honey-400), var(--honey-600));
  opacity: 0;
  will-change: transform, opacity;
  transform-origin: 50% 0;
}
.celebrate__ribbon.is-left  { left: -70px; animation: celebrate-ribbon-l 900ms cubic-bezier(0.2, 0.8, 0.3, 1) 80ms both; }
.celebrate__ribbon.is-right { left:  56px; animation: celebrate-ribbon-r 900ms cubic-bezier(0.2, 0.8, 0.3, 1) 80ms both; }

@keyframes celebrate-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes celebrate-pop {
  from { opacity: 0; transform: translate3d(0, 24px, 0) scale(0.94); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes celebrate-badge {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes celebrate-fall {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(0) scale(var(--s)); }
  8%   { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--spin)) scale(var(--s)); }
}
@keyframes celebrate-ribbon-l {
  0%   { opacity: 0; transform: rotate(-70deg) scaleY(0.2); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(-34deg) translate3d(-40px, 120px, 0) scaleY(1); }
}
@keyframes celebrate-ribbon-r {
  0%   { opacity: 0; transform: rotate(70deg) scaleY(0.2); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(34deg) translate3d(40px, 120px, 0) scaleY(1); }
}

/* ---- Reduced motion --------------------------------------------
   Particles and ribbons are not rendered at all (the component checks the
   media query), so these rules only need to calm what remains. */
@media (prefers-reduced-motion: reduce) {
  .pdp-coupons__chev { transition: none; }
  .is-requoting { transition: none; }
  .celebrate { animation: celebrate-fade 150ms ease-out both; }
  .celebrate__card { animation: celebrate-fade 150ms ease-out both; }
  .celebrate__badge { animation: none; }
  .celebrate__bit, .celebrate__ribbon { animation: none; opacity: 0; }
}
.celebrate.is-reduced .celebrate__card { animation: celebrate-fade 150ms ease-out both; }
.celebrate.is-reduced .celebrate__badge { animation: none; }

/* ---- Phones ---------------------------------------------------- */
@media (max-width: 640px) {
  .cartcoupon__remove { min-height: 44px; }
  .cartcoupon__input,
  .cartcoupon__submit { height: 44px; }
  .pdp-coupon__apply,
  .cartcoupon__offerapply { min-height: 44px; display: inline-flex; align-items: center; }

  /* Stubs get a fixed footprint on narrow screens so a long title cannot
     squeeze the code into a wrap. */
  .cartcoupon__offerstub,
  .cartcoupon__appliedstub { min-width: 108px; }
  .cartcoupon__appliedcode { font-size: var(--text-md); }
  .cartcoupon__saved { font-size: var(--text-lg); }
}

/* ═══ src/styles/info.css ═══ */
/* ========================================================================
   SORA LIFE — company, help and policy surfaces
   Modern editorial marketplace layer. Scoped to .info plus the footer/admin
   hooks introduced with these pages; no Homepage or commerce component rules.
   ======================================================================== */

/* These pages had their own palette and their own page ground: a cool
   #f7f8f6 (and pure #fff on the policy pages) against the warm ivory every
   other route sits on, with cool grey rules against the storefront's warm
   ones. Navigating Home -> About -> Privacy changed the background twice.
   The local names are kept — they read well in the rules below — but each one
   now resolves to the shared token, so this layer inherits the storefront's
   colour instead of competing with it. */
.info {
  --info-ink:var(--slv2-ink);
  --info-muted:var(--slv2-ink-3);
  --info-line:var(--slv2-line);
  --info-paper:var(--slv2-paper);
  --info-soft:var(--slv2-f50);
  --info-green:var(--slv2-f700);
  min-height:60vh;
  padding:18px 0 64px;
  background:transparent;
  color:var(--info-ink);
  font-family:var(--slv2-sans, 'Inter', system-ui, sans-serif);
}
.info *, .info *::before, .info *::after { box-sizing:border-box; }
.info .v2-crumbs { margin:0 0 18px; }
.info .v2-crumbs a { color:var(--info-muted); }

.info-hero {
  position:relative;
  display:grid;
  align-content:end;
  min-height:280px;
  padding:clamp(28px, 5vw, 68px);
  overflow:hidden;
  border:1px solid #244437;
  border-radius:2px;
  background:var(--info-green);
  color:#f8fbf8;
}
.info-hero::after {
  content:'';
  position:absolute;
  inset:18px 18px auto auto;
  width:84px;
  height:84px;
  border-top:1px solid rgba(255,255,255,.25);
  border-right:1px solid rgba(255,255,255,.25);
  pointer-events:none;
}
.info-eyebrow {
  position:relative;
  z-index:1;
  margin:0 0 13px;
  color:#cde0d5;
  font:700 11px/1.2 var(--slv2-sans, 'Inter', sans-serif);
  letter-spacing:.16em;
  text-transform:uppercase;
}
.info-title {
  position:relative;
  z-index:1;
  max-width:900px;
  margin:0;
  color:inherit;
  font:700 clamp(32px, 4.4vw, 52px)/1.03 var(--slv2-sans, 'Inter', sans-serif);
  letter-spacing:-.034em;
  text-wrap:balance;
}
.info-lede {
  position:relative;
  z-index:1;
  max-width:720px;
  margin:24px 0 0;
  color:rgba(248,251,248,.78);
  font-size:clamp(15px, 1.45vw, 18px);
  line-height:1.65;
}
.info-hero__cta { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.info-hero .v2-btn { background:#f5f8f5; border-color:#f5f8f5; color:var(--info-green); }
.info-hero .v2-btn:hover { background:#dfeae4; border-color:#dfeae4; }
.info-hero .v2-btn--out { background:transparent; color:#f5f8f5; border-color:rgba(255,255,255,.55); }
.info-hero .v2-btn--out:hover { background:rgba(255,255,255,.08); border-color:#fff; }

.info-sec { margin-top:clamp(44px, 6vw, 78px); }
.info-sechead { display:flex; align-items:end; justify-content:space-between; gap:24px; padding-bottom:16px; border-bottom:1px solid var(--info-line); }
.info-h2 { margin:0; color:var(--info-ink); font:700 clamp(20px, 2.1vw, 26px)/1.15 var(--slv2-sans, 'Inter', sans-serif); letter-spacing:-.024em; }
.info-sub { max-width:620px; margin:0; color:var(--info-muted); font-size:14px; line-height:1.65; }
.info-sub--wide { margin-top:14px; }

.info-grid { display:grid; border-left:1px solid var(--info-line); border-top:1px solid var(--info-line); }
.info-grid--2 { grid-template-columns:repeat(2, minmax(0,1fr)); }
.info-card { min-width:0; padding:28px; border-right:1px solid var(--info-line); border-bottom:1px solid var(--info-line); background:var(--info-paper); }
.info-card__ic { display:grid; place-items:center; width:42px; height:42px; margin-bottom:30px; border:1px solid #bfc9c2; border-radius:2px; color:var(--info-green); }
.info-card__t { margin:0 0 9px; font:700 18px/1.2 var(--slv2-sans, 'Inter', sans-serif); letter-spacing:-.02em; }
.info-card__b { max-width:54ch; margin:0; color:var(--info-muted); font-size:14px; line-height:1.7; }

.info-cats { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); margin:0; padding:0; border-left:1px solid var(--info-line); border-top:1px solid var(--info-line); list-style:none; }
.info-cat { display:flex; min-height:82px; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; border-right:1px solid var(--info-line); border-bottom:1px solid var(--info-line); background:var(--info-paper); font-size:13px; font-weight:650; }
.info-cat:hover { background:var(--info-soft); color:var(--info-green); }

.info-creator { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:42px; padding:clamp(30px, 5vw, 58px); border-radius:2px; background:#111c2b; color:#fff; }
.info-creator .info-h2 { color:#fff; }
.info-creator .info-sub { color:rgba(255,255,255,.68); }
.info-creator .info-eyebrow { color:#a9c2ff; }

.info-more { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); margin-top:24px; border-left:1px solid var(--info-line); border-top:1px solid var(--info-line); }
.info-more__link { display:flex; min-width:0; min-height:86px; align-items:center; justify-content:space-between; gap:20px; padding:18px 20px; border-right:1px solid var(--info-line); border-bottom:1px solid var(--info-line); background:var(--info-paper); }
.info-more__link:hover { background:var(--info-soft); }
.info-more__link > span { min-width:0; }
.info-more__link strong { display:block; font-size:14px; line-height:1.25; }
.info-more__link em { display:block; margin-top:5px; overflow-wrap:anywhere; color:var(--info-muted); font-size:12px; font-style:normal; line-height:1.45; }
.info-more__link svg { flex:0 0 auto; }

.info-channels { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); border-left:1px solid var(--info-line); border-top:1px solid var(--info-line); }
.info-channel { display:flex; min-width:0; align-items:flex-start; gap:16px; padding:24px; border-right:1px solid var(--info-line); border-bottom:1px solid var(--info-line); background:var(--info-paper); }
a.info-channel:hover { background:var(--info-soft); }
.info-channel__ic { display:grid; flex:0 0 38px; width:38px; height:38px; place-items:center; border:1px solid #c6d0c9; border-radius:2px; color:var(--info-green); }
.info-channel__body { min-width:0; }
.info-channel__label { display:block; margin-bottom:5px; color:var(--info-muted); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.info-channel__value { display:block; overflow-wrap:anywhere; color:var(--info-ink); font-size:14px; font-weight:650; line-height:1.5; }
.info-channel__value--multiline { white-space:pre-line; }
.info-social { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.info-social__link { display:inline-flex; min-height:40px; align-items:center; gap:8px; padding:9px 12px; border:1px solid var(--info-line); border-radius:2px; background:var(--info-paper); font-size:12px; font-weight:650; }
.info-social__link:hover { border-color:#96aa9e; background:var(--info-soft); }

.info-faq { border-top:1px solid var(--info-line); }
.info-faq__item { border-bottom:1px solid var(--info-line); background:var(--info-paper); }
.info-faq__q { display:flex; min-height:66px; align-items:center; justify-content:space-between; gap:20px; padding:18px 4px; cursor:pointer; font-size:15px; font-weight:650; list-style:none; }
.info-faq__q::-webkit-details-marker { display:none; }
.info-faq__q svg { flex:0 0 auto; transition:transform .18s ease; }
.info-faq__item[open] .info-faq__q svg { transform:rotate(180deg); }
.info-faq__a { max-width:760px; padding:0 4px 22px; color:var(--info-muted); font-size:14px; line-height:1.7; }
.info-faq__a a { color:var(--info-green); font-weight:650; text-decoration:underline; text-underline-offset:3px; }

.info--legal { background:transparent; }
.info-legal__wrap { max-width:1040px; }
.info-hero--legal { min-height:180px; }
/* Restrained: a policy page is read, not scanned from across the room. */
.info-title--legal, .info--contact .info-title { font-size:clamp(28px, 3.4vw, 40px); letter-spacing:-.028em; }
.info-ship { margin-top:36px; border:1px solid var(--info-line); border-bottom:0; }
.info-ship__row { display:grid; grid-template-columns:1fr 140px 2fr; border-bottom:1px solid var(--info-line); }
.info-ship__row > span { min-width:0; padding:15px 18px; border-right:1px solid var(--info-line); font-size:13px; line-height:1.5; }
.info-ship__row > span:last-child { border-right:0; }
.info-ship__row--head { background:#f0f4f1; color:#4d5b52; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.info-ship__name, .info-ship__fee { font-weight:700; }
.info-ship__note { color:var(--info-muted); }
.info-legal { margin-top:34px; }
.info-legal__block { display:grid; grid-template-columns:minmax(170px, 250px) minmax(0,1fr); gap:clamp(24px, 5vw, 72px); padding:28px 0; border-top:1px solid var(--info-line); }
.info-legal__h { margin:0; font:700 16px/1.35 var(--slv2-sans, 'Inter', sans-serif); letter-spacing:-.015em; }
.info-legal__p { margin:0; color:#3f4d44; font-size:14px; line-height:1.75; }
.info-legal__p + .info-legal__p { margin-top:14px; }
.info-legal__p a, .info-legal__mail { color:var(--info-green); font-weight:650; text-decoration:underline; text-underline-offset:3px; }
.info-address { white-space:pre-line; }
.info-legal__owner { padding:30px; border:1px solid #bfcac2; border-left:3px solid var(--info-green); background:#f7f9f7; }
.info-legal__contact { margin-top:28px; padding:28px; border:0; background:#eef3ef; }

/* Complete marketplace footer: strong structure without changing its palette. */
.ftr__top { grid-template-columns:minmax(250px,1.45fr) repeat(4,minmax(120px,1fr)); gap:clamp(24px,3.4vw,52px); }
.ftr__contact { display:flex; flex-direction:column; align-items:flex-start; gap:5px; margin-top:18px; }
.ftr__contact a { overflow-wrap:anywhere; font-size:12px; color:rgba(255,255,255,.82); }
.ftr__contact a:hover { color:var(--st-footer-accent, var(--honey-300)); }
/* Consumer care, under the brand line on every store's footer. */
.ftr__care { margin-top:18px; }
.ftr__care h4 { margin:0 0 8px; color:#fff; font-family:var(--slv2-sans); font-size:10px; font-weight:750; letter-spacing:.14em; text-transform:uppercase; }
.ftr__brand .ftr__care p, .ftr__care address { margin:0 0 4px; max-width:34ch; color:rgba(255,255,255,.82); font-size:12px; font-style:normal; line-height:1.6; }
.ftr__brand .ftr__care .ftr__care-name { color:#fff; font-weight:650; }
.ftr__care address { white-space:pre-line; }
.ftr__care .ftr__contact { margin:6px 0 4px; }
.ftr__social { margin-top:15px; }
.ftr__social-link { display:grid; width:38px; height:38px; place-items:center; border:1px solid rgba(255,255,255,.24); border-radius:2px; color:#fff; }
.ftr__social-link:hover { border-color:var(--st-footer-accent, var(--honey-300)); color:var(--st-footer-accent, var(--honey-300)); }
.ftr__admin-link { border-radius:2px; }

/* Structured settings groups; remains within the existing Admin system. */
.adm-formgrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; }
.adm-settings-group { margin:26px 0 0; padding-top:22px; border-top:1px solid var(--color-border); }
.adm-settings-group h3 { margin:0 0 6px; font-size:15px; }
.adm-settings-group > .muted { margin:0 0 18px; }

@media (max-width:900px) {
  .info { padding-bottom:56px; }
  .info-hero { min-height:320px; }
  .info-grid--2, .info-channels { grid-template-columns:1fr 1fr; }
  .info-cats { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .info-more { grid-template-columns:1fr 1fr; }
  .info-creator { grid-template-columns:1fr; }
  .ftr__top { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ftr__brand { grid-column:1 / -1; }
}

@media (max-width:600px) {
  .info { padding-top:12px; }
  .info .v2-crumbs { margin-bottom:12px; }
  .info-hero { min-height:286px; padding:25px 20px; }
  .info-hero::after { width:52px; height:52px; inset:12px 12px auto auto; }
  .info-title { font-size:32px; line-height:1.06; letter-spacing:-.03em; }
  .info-lede { margin-top:18px; font-size:14px; line-height:1.58; }
  .info-hero__cta { margin-top:21px; }
  .info-hero__cta .v2-btn { width:100%; }
  .info-sec { margin-top:42px; }
  .info-sechead { display:block; padding-bottom:13px; }
  .info-sechead .info-sub { margin-top:7px; }
  .info-grid--2, .info-channels, .info-more { grid-template-columns:1fr; }
  .info-card { padding:22px 18px; }
  .info-card__ic { margin-bottom:20px; }
  .info-cats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .info-cat { min-height:68px; padding:14px; }
  .info-creator { gap:24px; padding:26px 20px; }
  .info-creator .v2-btn { width:100%; }
  .info-more__link { min-height:76px; padding:15px; }
  .info-channel { padding:18px; }
  .info-faq__q { font-size:14px; }
  .info-hero--legal { min-height:150px; }
  .info-title--legal { font-size:28px; }
  .info-ship { overflow:hidden; }
  .info-ship__row { grid-template-columns:1fr 76px; }
  .info-ship__row > span { padding:12px; }
  .info-ship__row > span:nth-child(2) { border-right:0; text-align:right; }
  .info-ship__row > span:nth-child(3) { grid-column:1 / -1; border-top:1px solid var(--info-line); border-right:0; }
  .info-ship__row--head > span:nth-child(3) { display:none; }
  .info-legal__block { display:block; padding:22px 0; }
  .info-legal__h { margin-bottom:10px; }
  .info-legal__owner, .info-legal__contact { padding:20px; }
  .ftr__top { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ftr__brand { grid-column:1 / -1; }
  .adm-formgrid { grid-template-columns:1fr; }
}

@media (max-width:360px) {
  .info-title, .info-title--legal { font-size:27px; }
  .info-cats { grid-template-columns:1fr; }
  .ftr__top { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce) {
  .info-faq__q svg { transition:none; }
}

/* Shared editable legal documents and structured contact records. */
.legal-markdown { max-width: none; }
.legal-markdown .ck-terms__h { font-family: inherit; font-size: 21px; line-height: 1.35; color: var(--ink, #16211B); margin: 30px 0 12px; }
.legal-markdown .ck-terms__p, .legal-markdown .ck-terms__list { font-size: 15px; line-height: 1.8; color: var(--ink, #16211B); overflow-wrap: anywhere; }
.legal-updated { margin: 16px 0 0; color: #59625C; font-size: 12px; }
.legal-details { margin: 0 0 32px; }
.legal-details > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid #DDDCD4; }
.legal-details dt { font-size: 13px; color: #59625C; }
.legal-details dd { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.legal-help { display: flex; flex-wrap: wrap; gap: 16px 24px; border-top: 1px solid #DDDCD4; margin-top: 32px; padding-top: 24px; font-size: 13px; }
.legal-preserve { white-space: pre-line; }
@media(max-width: 767px) { .legal-details > div { grid-template-columns: 1fr; gap: 6px; } }

.info-hero .legal-updated { color: inherit; opacity: .8; }

/* ═══ src/styles/homepage-appearance.css ═══ */
/* Homepage appearance only: no shared theme, Hero, card or checkout overrides. */
.hp-visual-layers { position:absolute; inset:0; overflow:hidden; border-radius:inherit; pointer-events:none; z-index:0; }
.hp-visual-layer { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.hp-visual-layer--right { left:auto; }
.hp-visual-layer--left { right:auto; }
.hp-visual-layer[hidden] { display:none; }
.hp-offers { min-width:0; }
.hp-offers__heading { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:14px; }
.hp-offers__heading .v2-eyebrow, .hp-offers__heading .v2-h2 { color:var(--hp-offers-accent); }
.hp-offers__heading .v2-eyebrow { margin-bottom:5px; }
.hp-offers__hint { font:11px/1.4 var(--slv2-sans); color:var(--hp-offers-accent); white-space:nowrap; padding-bottom:3px; }
.hp-offers__frame { position:relative; isolation:isolate; overflow:hidden; padding:0; max-width:calc(var(--hp-offers-columns) * 620px); margin-inline:auto; box-shadow:none; }
.hp-offers__gallery { position:relative; z-index:1; display:flex; align-items:flex-start; gap:var(--hp-offers-gap); overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; padding:0; margin:0; list-style:none; }
.hp-offers__gallery::-webkit-scrollbar { display:none; }
.hp-offers__item { min-width:0; flex:0 0 var(--hp-offers-mobile-width); scroll-snap-align:start; scroll-snap-stop:always; }
.hp-offers__poster { display:flex; align-items:flex-start; justify-content:center; margin:0; border-radius:8px; overflow:hidden; background:transparent; }
.hp-offers__poster img { display:block; width:100%; height:auto; max-width:100%; object-fit:contain; border-radius:8px; }
.hp-offers .promo-poster { min-height:0; width:100%; max-width:none; border-radius:8px; }
.hp-offers .promo-poster__body { padding:20px; gap:10px; }
.hp-offers .promo-poster__title { font-size:clamp(24px, 4vw, 32px); }
.hp-offers .promo-offer { height:auto; border-radius:8px; }
.hp-offers__pagination { position:absolute; z-index:2; inset-inline:0; bottom:6px; display:flex; flex-wrap:wrap; justify-content:center; gap:3px; margin:0; pointer-events:none; }
.hp-offers__pagination button { display:grid; place-items:center; width:28px; height:28px; padding:0; background:rgba(255,248,237,.92); border:0; border-radius:2px; cursor:pointer; pointer-events:auto; }
.hp-offers__pagination button span { display:block; width:14px; height:3px; background:var(--hp-offers-accent); opacity:.3; border-radius:1px; }
.hp-offers__pagination button[aria-current] span { opacity:1; }
.hp-offers__pagination button:focus-visible { outline:2px solid var(--hp-offers-accent); outline-offset:1px; }
.hp-offers__gallery--single { justify-content:center; max-width:620px; margin-inline:auto; }
.hp-offers__gallery--single .hp-offers__item { flex-basis:100%; }
/* Adjacent sections each own one modest interval; no reserved promo slot. */
.v2-home .hp-offers + .v2-sec { margin-top:16px; }
@media (max-width:767px) { .hp-visual-layer--mobile-hidden { display:none; } }
@media (min-width:768px) {
  .hp-offers__hint, .hp-offers__pagination { display:none; }
  .hp-offers__gallery { display:grid; grid-template-columns:repeat(var(--hp-offers-columns), minmax(0, 1fr)); overflow:visible; padding:0; max-width:calc(var(--hp-offers-columns) * 620px); margin-inline:auto; }
  .hp-offers__gallery--single { max-width:620px; }
}
/* Editor controls reuse Admin surfaces, scoped so Appearance is unaffected. */
.hp-admin-fields { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap:16px; margin-top:20px; }
.hp-admin-fields .field { min-width:0; margin:0; }
.hp-admin-fields input[type="color"] { width:100%; height:40px; padding:3px; }
.hp-admin-check { display:flex; align-items:center; gap:9px; min-height:40px; font-size:13px; }
.hp-admin-check input { width:17px; height:17px; flex-shrink:0; }
.hp-admin-image { grid-column:1 / -1; }
.hp-admin-image__actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.hp-admin-image__actions label { position:relative; overflow:hidden; cursor:pointer; }
.hp-admin-image__actions input { position:absolute; inset:0; opacity:0; width:100%; cursor:pointer; }
.hp-admin-image__preview { display:block; max-width:100%; width:auto; max-height:140px; object-fit:contain; margin-top:10px; border:1px solid #ded2c4; border-radius:4px; }
/* Mobile offers: full bleed, zero dead gap */
@media (max-width: 767px) {

  .v2-home .hp-offers {
    margin-top: 0 !important;
    padding-top: 0;
  }

  .v2-home .hp-offers .container {
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  .v2-home .hp-offers__heading {
    padding: 18px 16px 0;
  }

  .v2-home .hp-offers__frame {
    width: 100%;
    max-width: none;
    margin: 0;
  }
}
/* FINAL mobile full-bleed Category -> Offers */
@media (max-width: 767px) {
  /* category ke baad zero white gap */
  .v2-home .hp-offers {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* actual wrapper is v2-wrap — remove side gutters */
  .v2-home .hp-offers > .v2-wrap {
    width: 100%;
    max-width: none;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0;
    margin-right: 0;
  }

  /* heading ko sirf andar readable spacing */
  .v2-home .hp-offers__heading {
    margin: 0 !important;
    padding: 14px 16px 10px;
  }

  /* promo gallery/frame edge-to-edge */
  .v2-home .hp-offers__frame,
  .v2-home .hp-offers__gallery {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
}
/* Mobile offers — one complete poster per view, no next-card peek */
@media (max-width: 767px) {
  .v2-home .hp-offers__item {
    flex: 0 0 100%;
    width: 100%;
  }

  .v2-home .hp-offers__gallery {
    gap: 0;
  }

  .v2-home .hp-offers__hint {
    display: none;
  }
}

/* ═══ src/styles/v2-home-marketplace.css ═══ */
/* ============================================================================
   SORA LIFE HOME — MARKETPLACE LAYER
   Homepage-only visual reset. It deliberately does not redefine shared V2
   tokens, ProductCard behavior, or any Shop/PDP/checkout surface.
   ========================================================================== */

.v2-home {
  --hm-bg:#F7F8F6;
  --hm-paper:#FFFFFF;
  --hm-paper-2:#F0F3F0;
  --hm-ink:#101814;
  --hm-muted:#59645E;
  --hm-line:#DCE2DE;
  --hm-green:#14392B;
  --hm-lime:#D7F263;
  --hm-blue:#DCE8FF;
  background:var(--hm-bg);
  color:var(--hm-ink);
  padding-bottom:0;
  font-family:var(--slv2-sans);
}

.v2-home .v2-h2,
.v2-home .hm-brand h3,
.v2-home .hm-collection h3,
.v2-home .hm-mom h2,
.v2-home .hm-creator h2,
.v2-home .hm-trust__number {
  font-family:var(--slv2-sans);
}
.v2-home .v2-h2 {
  color:var(--hm-ink);
  font-size:clamp(22px, 5.6vw, 28px);
  font-weight:750;
  line-height:1.02;
  letter-spacing:-.035em;
}
.v2-home .v2-eyebrow {
  margin-bottom:7px;
  color:#416051;
  font-size:10px;
  font-weight:750;
  letter-spacing:.14em;
}
.v2-home .v2-sechead { margin-bottom:18px; }
.v2-home .v2-more {
  color:var(--hm-ink);
  font-size:10px;
  font-weight:750;
  letter-spacing:.075em;
  border-bottom:1px solid currentColor;
  padding-bottom:4px;
}

/* --------------------------------------------------------- section rhythm */
.v2-home .hm-section,
.v2-home .v2-sec.hm-section { margin-top:0; padding-block:48px; }
.v2-home .hm-heading { align-items:flex-end; }
.v2-home .hm-heading__copy {
  max-width:58ch;
  margin:8px 0 0;
  color:var(--hm-muted);
  font:450 12px/1.55 var(--slv2-sans);
}
.v2-home .hm-product-rail { scroll-padding-inline:var(--slv2-gutter); }
.v2-home [data-home-section="trending"] { background:var(--hm-paper); }
.v2-home [data-home-section="popular"] { background:#EEF3F0; border-block:1px solid var(--hm-line); }
.v2-home .hm-product-rail .v2-pc { background:#FFFFFF; border-color:#D8DEDA; }
.v2-home .hm-product-rail .v2-pc__media { background:#F2F4F1; }

/* ---------------------------------------------------------- current offers */
.v2-home .hp-offers {
  margin:0;
  /* The admin's value, via HomeOffers: a custom property the component sets inline. */
  padding-block:var(--hp-offers-pad, 42px);
  border-bottom:1px solid var(--hm-line);
}
.v2-home .hp-offers__heading { margin-bottom:18px; }
.v2-home .hp-offers__heading .v2-eyebrow,
.v2-home .hp-offers__heading .v2-h2 { color:var(--hm-ink); }
.v2-home .hp-offers__hint { color:var(--hm-muted); }
.v2-home .hp-offers h2,
.v2-home .hp-offers h3 { font-family:var(--slv2-sans); }
.v2-home .hp-offers__frame { border-radius:2px; }
.v2-home .hp-offers__poster,
.v2-home .hp-offers__poster img,
.v2-home .hp-offers .promo-poster,
.v2-home .hp-offers .promo-offer { border-radius:2px; }
.v2-home .hp-offers + .v2-sec { margin-top:0; }

/* ----------------------------------------------------------- brand directory */
.v2-home .hm-section--brands {
  background:#E8EDF0;
  border-block:1px solid #D5DDE1;
}
.v2-home .hm-brands { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.v2-home .hm-brand {
  min-width:0;
  display:grid;
  grid-template-rows:minmax(0, 1fr) auto;
  overflow:hidden;
  color:var(--hm-ink);
  text-decoration:none;
  background:#FFFFFF;
  border:1px solid #D4DDE1;
  border-radius:2px;
}
.v2-home .hm-brand__media { min-height:126px; overflow:hidden; background:#F3F5F6; }
.v2-home .hm-brand__media .v2-pimg { height:100%; aspect-ratio:auto; background:#F3F5F6; }
.v2-home .hm-brand__media img { transition:transform .25s ease; }
.v2-home .hm-brand:hover .hm-brand__media img { transform:scale(1.025); }
.v2-home .hm-brand__body { padding:12px; border-top:1px solid #D4DDE1; }
.v2-home .hm-brand__body > span:first-child,
.v2-home .hm-collection__body > span:first-child {
  display:block;
  color:var(--hm-muted);
  text-transform:uppercase;
  font:700 8.5px/1.3 var(--slv2-sans);
  letter-spacing:.09em;
}
.v2-home .hm-brand h3 {
  margin:5px 0 12px;
  color:var(--hm-ink);
  font-size:20px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.035em;
}
.v2-home .hm-brand__link,
.v2-home .hm-collection__link,
.v2-home .hm-trust__link {
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:#244A3B;
  text-transform:uppercase;
  letter-spacing:.075em;
  font:750 9px/1.2 var(--slv2-sans);
}

/* ---------------------------------------------------------- discovery edit */
.v2-home .hm-section--discover { background:var(--hm-bg); }
.v2-home .hm-discover {
  display:grid;
  grid-template-columns:minmax(0, .92fr) minmax(0, 1.08fr);
  gap:8px;
  align-items:start;
}
.v2-home .hm-discover__lead { min-width:0; align-self:start; }
.v2-home .hm-discover__lead .v2-pc { height:auto; background:#FFFFFF; }
.v2-home .hm-discover__list { min-width:0; display:grid; grid-template-columns:1fr; gap:7px; }
.v2-home .hm-discover__list .v2-cc { min-height:70px; background:#FFFFFF; border-color:var(--hm-line); }

/* ----------------------------------------------------- Mom Trust spotlight */
.v2-home [data-home-section="mom-trust"] { background:#FFFFFF; }
.v2-home .hm-mom {
  display:grid;
  overflow:hidden;
  color:#F4F7F5;
  background:#173A31;
  border:1px solid #173A31;
  border-radius:2px;
}
.v2-home .hm-mom__media { display:block; min-height:250px; background:#F1F4F2; }
.v2-home .hm-mom__media .v2-pimg { height:100%; aspect-ratio:auto; background:#F1F4F2; }
.v2-home .hm-mom__body { padding:24px 20px 26px; }
.v2-home .hm-mom__body .v2-eyebrow { color:#CFEA75; }
.v2-home .hm-mom h2 {
  margin:5px 0 10px;
  color:#FFFFFF;
  font-size:32px;
  font-weight:800;
  line-height:.98;
  letter-spacing:-.045em;
}
.v2-home .hm-mom__body > p:not(.v2-eyebrow) { margin:0; max-width:44ch; color:#D2DDD8; font:450 13px/1.55 var(--slv2-sans); }
.v2-home .hm-mom__products { margin:18px 0; border-top:1px solid rgba(255,255,255,.22); }
.v2-home .hm-mom__products a {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.22);
  color:#FFFFFF;
  text-decoration:none;
  font:650 11px/1.35 var(--slv2-sans);
}
.v2-home .hm-mom .v2-btn { width:max-content; background:var(--hm-lime); border-color:var(--hm-lime); color:#102019; }

/* ----------------------------------------------------- curated collections */
.v2-home [data-home-section="collections"] { background:var(--hm-bg); }
.v2-home .hm-collections {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  grid-auto-rows:1fr;
  gap:8px;
}
.v2-home .hm-collection {
  min-width:0;
  display:grid;
  grid-template-rows:118px minmax(0, 1fr);
  overflow:hidden;
  color:var(--hm-ink);
  text-decoration:none;
  background:#FFFFFF;
  border:1px solid var(--hm-line);
  border-radius:2px;
}
.v2-home .hm-collection__images { display:grid; grid-template-columns:1fr 1fr; height:118px; overflow:hidden; background:#F1F3F0; }
.v2-home .hm-collection__images .v2-pimg { height:100%; aspect-ratio:auto; border-right:1px solid var(--hm-line); background:#F1F3F0; }
.v2-home .hm-collection__images .v2-pimg:nth-child(3) { display:none; }
.v2-home .hm-collection__body {
  display:grid;
  grid-template-rows:auto minmax(37px, auto) auto;
  align-content:start;
  padding:12px;
  border-top:1px solid var(--hm-line);
}
.v2-home .hm-collection h3 { margin:5px 0 13px; color:var(--hm-ink); font-size:17px; font-weight:780; line-height:1.08; letter-spacing:-.025em; }

/* ----------------------------------------------------- creator / community */
.v2-home [data-home-section="creator"] { background:#DDE6FF; }
.v2-home .hm-creator {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:16px;
  align-items:center;
  padding:24px 20px;
  color:#F7F8FF;
  background:#202846;
  border-radius:2px;
  overflow:hidden;
}
.v2-home .hm-creator__mark { width:52px; height:52px; display:grid; place-items:center; color:#DDE6FF; border:1px solid rgba(255,255,255,.24); }
.v2-home .hm-creator__copy { min-width:0; }
.v2-home .hm-creator__copy .v2-eyebrow { color:#BCCBFF; }
.v2-home .hm-creator h2 { margin:5px 0 8px; color:#FFFFFF; font-size:25px; font-weight:800; line-height:1.02; letter-spacing:-.04em; }
.v2-home .hm-creator p:not(.v2-eyebrow) { margin:0; color:#D5DBEF; font:450 12px/1.5 var(--slv2-sans); }
.v2-home .hm-creator > .v2-btn { grid-column:1 / -1; width:100%; background:#FFFFFF; border-color:#FFFFFF; color:#202846; }

/* ------------------------------------------------------------ factual trust */
.v2-home .hm-section--trust { background:#FFFFFF; border-block:1px solid var(--hm-line); }
.v2-home .hm-trust { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--hm-line); }
.v2-home .hm-trust__item {
  position:relative;
  min-width:0;
  padding:16px 12px;
  color:var(--hm-ink);
  text-decoration:none;
  background:#FFFFFF;
  border-right:1px solid var(--hm-line);
  border-bottom:1px solid var(--hm-line);
}
.v2-home .hm-trust__item:nth-child(2n) { border-right:0; }
.v2-home .hm-trust__item:nth-last-child(-n+2) { border-bottom:0; }
.v2-home .hm-trust__number { position:absolute; top:10px; right:10px; color:#C7D0CB; font-size:15px; font-weight:750; line-height:1; }
.v2-home .hm-trust__item > svg { color:#315847; }
.v2-home .hm-trust h3 { margin:14px 0 6px; color:var(--hm-ink); font:750 13px/1.25 var(--slv2-sans); }
.v2-home .hm-trust p { margin:0 0 16px; color:var(--hm-muted); font:450 10.5px/1.5 var(--slv2-sans); }

/* ------------------------------------------------------------- newsletter */
.v2-home .nl { margin:0; padding:48px 0; background:#EDF1EE; }
.v2-home .nl__card { padding:42px; background:#111A16; border:1px solid #111A16; border-radius:2px; box-shadow:none; }
.v2-home .nl__deco { display:none; }
.v2-home .nl__body { max-width:720px; }
.v2-home .nl__body h2 { font-family:var(--slv2-sans) !important; font-weight:780; letter-spacing:-.035em; }
.v2-home .nl__form .btn { border-radius:2px; }
.v2-home .nl__input,
.v2-home .nl__input .input { border-radius:2px; }

@media (max-width: 767px) {

  /* No padding here either: --hp-offers-pad applies (this 32px was dead under
     the inline style, and homepage-appearance.css zeroes the top anyway). */
  .v2-home .hp-offers > .v2-wrap { padding-inline:16px; }
  .v2-home .hp-offers__heading { margin:0 0 14px; padding:0; }
  .v2-home .hp-offers__frame,
  .v2-home .hp-offers__gallery { width:100%; max-width:none; margin:0; }

  .v2-home .hm-section,
  .v2-home .v2-sec.hm-section { padding-block:38px; }
  /* This module already carries its own internal breathing room. The generic
     section padding produced two empty pale-blue bands around real content. */
  .v2-home .v2-sec.hm-section[data-home-section="creator"] { padding-block:0; }
  .v2-home .hm-heading__copy { font-size:11px; }
  .v2-home .hm-product-rail {
    margin-inline:0;
    padding-inline:0;
    scroll-padding-inline:0;
  }
  .v2-home .hm-product-rail > * {
    flex:0 0 calc((100% - 12px) / 2);
    width:calc((100% - 12px) / 2);
    min-width:0;
  }

  .v2-home .hm-discover__list .v2-cc:nth-child(n+4) { display:none; }
  .v2-home .nl { padding:38px 0; }
  .v2-home .nl__card { padding:28px 20px; }
}

@media (max-width: 359px) {
  .v2-home .hm-brands,
  .v2-home .hm-collections { gap:6px; }
  .v2-home .hm-brand__body,
  .v2-home .hm-collection__body { padding:9px; }
  .v2-home .hm-brand h3 { font-size:17px; }
  .v2-home .hm-collection h3 { font-size:15px; }
  .v2-home .hm-discover { grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:6px; }
}

@media (min-width: 768px) {
  .v2-home .v2-h2 { font-size:32px; }
  .v2-home .v2-sechead { margin-bottom:24px; }
  .v2-home .hm-section,
  .v2-home .v2-sec.hm-section { padding-block:58px; }
  .v2-home .hm-heading__copy { font-size:13px; }
  .v2-home .hm-brands { grid-template-columns:repeat(4, 1fr); gap:12px; }
  .v2-home .hm-brand:first-child:nth-last-child(2),
  .v2-home .hm-brand:first-child:nth-last-child(2) ~ .hm-brand { grid-column:span 2; }
  .v2-home .hm-brand__media { min-height:210px; }
  .v2-home .hm-brand__body { padding:17px; }
  .v2-home .hm-brand h3 { font-size:27px; }
  .v2-home .hm-discover { grid-template-columns:minmax(0, .78fr) minmax(0, 1.22fr); gap:16px; }
  .v2-home .hm-discover__list { grid-template-columns:1fr; gap:10px; }
  .v2-home .hm-discover__list { align-self:stretch; grid-template-rows:repeat(4, minmax(0, 1fr)); }
  .v2-home .hm-discover__list .v2-cc { min-height:112px; }
  .v2-home .hm-mom { grid-template-columns:1.08fr .92fr; }
  .v2-home .hm-mom__media { min-height:420px; }
  .v2-home .hm-mom__body { display:flex; flex-direction:column; justify-content:center; padding:38px; }
  .v2-home .hm-mom h2 { font-size:44px; }
  .v2-home .hm-collections { grid-template-columns:repeat(2, 1fr); gap:12px; }
  .v2-home .hm-collection { display:grid; grid-template-columns:1.15fr .85fr; min-height:190px; }
  .v2-home .hm-collection__images { height:auto; }
  .v2-home .hm-collection__body { display:flex; flex-direction:column; justify-content:center; padding:18px; border-top:0; border-left:1px solid var(--hm-line); }
  .v2-home .hm-creator { grid-template-columns:auto 1fr auto; gap:24px; padding:32px; }
  .v2-home .hm-creator > .v2-btn { grid-column:auto; width:auto; }
  .v2-home .hm-trust { grid-template-columns:repeat(4, 1fr); }
  .v2-home .hm-trust__item { padding:22px 18px; border-bottom:0; }
  .v2-home .hm-trust__item:nth-child(2n) { border-right:1px solid var(--hm-line); }
  .v2-home .hm-trust__item:last-child { border-right:0; }
  .v2-home .hm-trust h3 { font-size:15px; }
  .v2-home .hm-trust p { font-size:12px; }
  .v2-home .hm-product-rail > *:nth-child(n+4) { display:none; }
}

@media (min-width: 1024px) {
  .v2-home .v2-h2 { font-size:38px; }

  /* ---- ONE SECTION INTERVAL ---------------------------------------
     Every section on the desktop page carries the same 72px above and
     below. Before this, five regimes coexisted — 72 (product rails), 34/28
     (discovery rails), 48 (newsletter), and 12 and 4 from admin values that
     were tuned for the phone's full-bleed strip and reached the desktop as
     inline padding. The admin range is 0–48, so it sits under the rhythm at
     every setting; below 1024px it is still honoured exactly.

     The two discovery rails are one block, not two sections: they split the
     interval between them (36 + 36 = 72) and carry the full 72 outward. */
  .v2-home .hm-section,
  .v2-home .v2-sec.hm-section,
  .v2-home .hp-offers,
  .v2-home .nl { padding-block:72px; }
  .v2-home .hd-section { padding-block:72px 36px; }
  .v2-home .hd-section + .hd-section { padding-block:36px 72px; }

  /* ---- CURRENT OFFERS, one poster: a proper width under the heading ----
     A single portrait poster used to sit as a 620px column in the middle of
     a 1240px frame, so the frame — not the poster — was the section's shape,
     and it was mostly empty. Now the heading keeps the section's normal
     position and the artwork is centred beneath it at two thirds of the
     container. The frame hugs the artwork rather than stretching behind it.
     A portrait creative is tall at this width; that is the asset, and it is
     shown whole rather than cropped or padded. With two or more posters the
     admin's column grid applies, unchanged. */
  .v2-home .hp-offers--single .hp-offers__heading { margin-bottom:28px; }
  .v2-home .hp-offers--single .hp-offers__frame { width:min(66.66%, 880px); max-width:none; margin-inline:auto; }
  .v2-home .hp-offers--single .hp-offers__gallery { display:block; max-width:none; margin:0; }
  .v2-home .hp-offers--single .hp-offers__item { width:100%; }
  .v2-home .hp-offers--single .hp-offers__poster img { width:100%; height:auto; max-width:none; }

  .v2-home .hm-brands { grid-template-columns:1.4fr repeat(3, 1fr); }
  .v2-home .hm-brand:first-child .hm-brand__media { min-height:275px; }
  .v2-home .hm-brand__media { min-height:225px; }
  .v2-home .hm-discover { grid-template-columns:390px 1fr; }
  .v2-home .hm-collection__images { grid-template-columns:1.15fr .85fr; grid-template-rows:1fr 1fr; }
  .v2-home .hm-collection__images .v2-pimg:first-child { grid-row:1 / -1; }
  .v2-home .hm-collection__images .v2-pimg:nth-child(3) { display:block; }
  .v2-home .hm-creator { padding:40px 44px; }
  .v2-home .hm-creator h2 { font-size:36px; }
  .v2-home .hm-product-rail > *:nth-child(n+4) { display:flex; }
  .v2-home .hm-product-rail > *:nth-child(n+5) { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  .v2-home .hm-brand__media img { transition:none; }
}

/* ---- Newsletter → Footer seam ---------------------------------------
   `.ftr` carries a global `margin-top: var(--sp-8)` to separate it from page
   content. On the homepage the newsletter is a full-bleed tinted band that
   already ends with its own padding, so that margin rendered as a strip of
   bare page background between the band and the dark footer.

   (Production still shows the larger, pre-commit version of this: before the
   band existed, `.section`'s 64px bottom padding sat on the page background
   too, so the strip was ~96px on a phone.)

   Removed for this adjacency only — every other page keeps the separator. */
body:has(.v2-home) .ftr { margin-top: 0; }

/* ═══ src/styles/v2-home-discovery.css ═══ */
/* ============================================================
   HOMEPAGE DISCOVERY RAILS — "Shop by Category" / "Shop by Concerns".

   Editorial discovery, not merchandising. A wide landscape tile with sharp
   corners and no border, a quiet caption underneath, and one control row of
   chevron / centred progress / chevron. Two tiles in view on a phone, four to
   five on a desktop. Scoped to .hd-* so no other homepage section is touched.
   ============================================================ */

/* Phone rhythm. Every homepage section butts against the next at 0px — they
   carry padding, not margins — so on a phone these two rails had only
   16px + 20px between one rail's control row and the next rail's title, and
   the control row sat 14px below the cards against 16px below itself. Equal
   gaps above and below made the controls read as floating between the two
   rails instead of belonging to the one above. Widened to 24/24 so the
   boundary is 48px, and the controls now sit closer to their own cards than
   to the next section. */
.hd-section { background: #fff; padding-block: 24px; }
/* .v2-sec carries a 32px top margin, and .v2-home zeroes it for .hm-section
   but not for these rails — so the FIRST rail was opening with 32px of page
   ground above it, a flat band between the section above and this one. The
   previous rule here only collapsed the margin BETWEEN the two rails, which
   removed the band nobody had noticed and left the one they had.
   Both are zeroed now: sections butt, and storefront-background.css fades
   each scene out at its own top and bottom so nothing collides. */
.v2-home .v2-sec.hd-section { margin-top: 0; }
/* The shared .v2-wrap gutter is wider than these rails want on a phone; this
   keeps the tiles close to the screen edge like the reference. */
.hd-section > .v2-wrap { padding-inline: 16px; }

.hd-title {
  margin: 0 0 16px;
  font-family: var(--slv2-sans, var(--font-sans));
  font-size: clamp(26px, 6.4vw, 34px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text, #16211B);
}

/* ---- rail ------------------------------------------------------------- */
.hd-rail {
  display: grid;
  grid-auto-flow: column;
  /* Two tiles in view, with the next one just breaking the edge so the row
     reads as scrollable without needing a hint. */
  grid-auto-columns: calc((100% - 16px) / 2 - 10px);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.hd-rail::-webkit-scrollbar { display: none; }
.hd-tile { scroll-snap-align: start; scroll-snap-stop: always; min-width: 0; }

/* ---- tile ------------------------------------------------------------- */
.hd-tile__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.hd-tile__link:focus-visible {
  outline: 2px solid var(--color-primary, #1E3A2F);
  outline-offset: 3px;
}

.hd-tile__media {
  position: relative;
  display: block;
  /* Landscape, close to the reference's proportions. */
  aspect-ratio: 4 / 3;
  /* Sharp geometry — the tile is the artwork, not a card. */
  border-radius: 2px;
  overflow: hidden;
  background: var(--ivory, #F2EFE9);
}
.hd-tile__media img,
.hd-tile__media > * {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (hover: hover) {
  .hd-tile__media img { transition: transform .35s ease; }
  .hd-tile__link:hover .hd-tile__media img { transform: scale(1.03); }
}

/* Title set over the artwork (categories). A soft bottom-weighted scrim
   keeps it readable on light and dark photography alike. */
.hd-tile__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  text-align: center;
  color: #fff;
  font-family: var(--slv2-sans, var(--font-sans));
  font-size: clamp(17px, 4.4vw, 22px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .55);
  /* The owned category artwork is pale product photography, so a light
     bottom-gradient could not hold white type. A full, even wash makes the
     tile read as an editorial discovery panel and keeps the label legible
     whatever image an admin assigns. */
  background: linear-gradient(180deg, rgba(16,24,20,.34) 0%, rgba(16,24,20,.46) 100%);
}
@media (hover: hover) {
  .hd-tile__link:hover .hd-tile__overlay { background: linear-gradient(180deg, rgba(16,24,20,.28) 0%, rgba(16,24,20,.40) 100%); }
}

/* One quiet line under the tile. Nothing else. */
.hd-tile__caption {
  display: block;
  margin-top: 10px;
  text-align: center;
  font-family: var(--slv2-sans, var(--font-sans));
  font-size: 14px;
  line-height: 1.35;
  font-weight: 500;
  color: var(--color-text, #16211B);
}

/* ---- controls: chevron / centred progress / chevron -------------------- */
.hd-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  /* Cards -> controls. Deliberately smaller than the 24px section padding
     below it, so the row belongs to the rail it controls rather than sitting
     midway between two rails. */
  margin-top: 18px;
}
.hd-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text, #16211B);
  cursor: pointer;
  transition: opacity .16s ease;
}
.hd-nav__btn:disabled { opacity: .28; cursor: default; }
.hd-nav__btn:focus-visible { outline: 2px solid var(--color-primary, #1E3A2F); outline-offset: 2px; }

.hd-nav__track {
  position: relative;
  flex: 0 1 190px;
  height: 4px;
  border-radius: 4px;
  background: #E6E6E6;
  overflow: hidden;
}
.hd-nav__thumb {
  position: absolute;
  inset-block: 0;
  left: 0;
  display: block;
  border-radius: 4px;
  background: var(--color-text, #16211B);
  transition: transform .12s linear;
}

@media (min-width: 768px) {
  .hd-section { padding-block: 34px 28px; }
  .hd-section > .v2-wrap { padding-inline: 0; }
  .hd-title { margin-bottom: 18px; }
  .hd-rail { grid-auto-columns: calc((100% - 3 * 16px) / 3.4); }
  .hd-tile__caption { font-size: 15px; margin-top: 12px; }
  /* Desktop rhythm is unchanged: the wider padding above already separates
     the rails there, so the control row keeps its original gap. */
  .hd-nav { margin-top: 14px; }
  .hd-nav__track { flex-basis: 240px; }
}

@media (min-width: 1100px) {
  /* Four and a half in view, so the rail still reads as scrollable. */
  .hd-rail { grid-auto-columns: calc((100% - 4 * 16px) / 4.5); }
}

@media (prefers-reduced-motion: reduce) {
  .hd-nav__thumb, .hd-tile__media img { transition: none; }
  .hd-tile__link:hover .hd-tile__media img { transform: none; }
}

/* ═══ src/styles/leaderboard.css ═══ */
/* ============================================================
   SORA LIFE — the dark surface: creator leaderboard + tier tokens
   ------------------------------------------------------------
   The one place the storefront leaves cream. Every colour below is scoped to
   `.sl-dark`, so nothing here leaks into the rest of the page, and the creator
   portal's tier cards (creator-tier.css, deferred bundle) reuse the same root
   so both surfaces read as one system.

   Rank accents are restrained: one colour per rank, used for the position
   numeral, the pill hairline and nothing else. No gradients, no glass,
   no shadows. Motion is transform/opacity only.
   ============================================================ */
.sl-dark {
  --sld-bg: #14261C;                    /* forest-900 */
  --sld-bg-2: #0F1D15;                  /* a shade under it, for the head band */
  --sld-surface: rgba(251, 248, 241, 0.045);
  --sld-surface-2: rgba(251, 248, 241, 0.08);
  --sld-ink: #FBF8F1;                   /* ivory */
  --sld-ink-2: rgba(251, 248, 241, 0.72);
  --sld-ink-3: rgba(251, 248, 241, 0.52);
  --sld-line: rgba(251, 248, 241, 0.10);
  --sld-line-2: rgba(251, 248, 241, 0.18);
  --sld-gold: #C79A45;                  /* slv2-gold */
  --sld-gold-2: #E4C482;
  --sld-r: 2px;

  /* rank accents */
  --rank-rise: #85B49F;      /* forest-300 */
  --rank-premium: #A9B892;
  --rank-elite: #C9D1CC;
  --rank-royale: #D9937A;
  --rank-prime: #E4C482;
  --rank-supreme: #E8B04B;   /* honey-500 */
  --rank-crown: #F0C169;     /* honey-400 */
  --rank-neutral: rgba(251, 248, 241, 0.6);

  background: var(--sld-bg);
  color: var(--sld-ink);
}
.sl-dark [data-rank="rise"]    { --rank: var(--rank-rise); }
.sl-dark [data-rank="premium"] { --rank: var(--rank-premium); }
.sl-dark [data-rank="elite"]   { --rank: var(--rank-elite); }
.sl-dark [data-rank="royale"]  { --rank: var(--rank-royale); }
.sl-dark [data-rank="prime"]   { --rank: var(--rank-prime); }
.sl-dark [data-rank="supreme"] { --rank: var(--rank-supreme); }
.sl-dark [data-rank="crown"]   { --rank: var(--rank-crown); }
.sl-dark [data-rank="neutral"] { --rank: var(--rank-neutral); }

/* ---- Homepage section ----------------------------------------------------
   Last block before the footer. The page's ivory tail and the footer's top
   margin are removed so the dark base runs straight into the dark footer. */
.v2-home .hm-leaderboard { margin: 0; padding-block: 64px 72px; border-top: 1px solid var(--sld-line); }
.v2-home:has(.hm-leaderboard) { padding-bottom: 0; }
.page-main:has(.hm-leaderboard) + .ftr { margin-top: 0; border-top: 1px solid rgba(251, 248, 241, 0.08); }

.hm-leaderboard .v2-eyebrow { color: var(--sld-gold-2); }
.hm-leaderboard .v2-h2 { color: var(--sld-ink); }
.hm-leaderboard__head { display: grid; gap: 10px; margin-bottom: 28px; }
.hm-leaderboard__copy { margin: 0; max-width: 52ch; font-size: 14px; line-height: 1.6; color: var(--sld-ink-2); }
.hm-leaderboard__foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px;
  margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--sld-line);
  font-size: 12.5px; color: var(--sld-ink-3);
}
.hm-leaderboard__foot a { color: var(--sld-gold-2); text-decoration: none; border-bottom: 1px solid transparent; }
.hm-leaderboard__foot a:hover { border-bottom-color: currentColor; }

/* ---- The list (shared with the portal) ----------------------------------- */
.lb { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sld-line-2); }
.lb__row {
  display: grid; grid-template-columns: 3.2ch minmax(0, 1fr) auto; align-items: center; gap: 14px;
  min-height: 52px; padding: 10px 8px 10px 0; border-bottom: 1px solid var(--sld-line);
  transition: transform .16s ease, opacity .16s ease;
}
.lb__row:hover { transform: translateX(4px); }
.lb__pos {
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif); font-variant-numeric: tabular-nums;
  font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--sld-ink-3);
}
.lb__row.is-podium .lb__pos { color: var(--rank); font-size: 15px; font-weight: 700; }
.lb__name {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif); font-size: 17px; font-weight: 500;
  letter-spacing: -.005em; color: var(--sld-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb__row.is-podium .lb__name { font-size: 19px; }
.lb__tier { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.lb__rank {
  display: inline-block; padding: 3px 9px; border: 1px solid var(--rank); border-radius: var(--sld-r);
  color: var(--rank); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.lb__level { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--sld-ink-2); }
.lb__row.is-me { background: var(--sld-surface-2); border-left: 3px solid var(--sld-gold); padding-left: 10px; }
.lb__row.is-me .lb__name::after { content: 'You'; margin-left: 10px; font-family: var(--font-sans, sans-serif); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sld-gold-2); }

/* Two columns from tablet up, filled column-first so #1–#10 sit left. The
   component sets --lb-rows to half the visible count. */
.lb { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) {
  .lb { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-flow: column; grid-template-rows: repeat(var(--lb-rows, 50), auto); column-gap: 48px; }
}
.lb__more {
  margin-top: 18px; padding: 10px 16px; border: 1px solid var(--sld-line-2); border-radius: var(--sld-r);
  background: none; color: var(--sld-ink); font: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; cursor: pointer; transition: transform .16s ease, border-color .16s ease;
}
.lb__more:hover { border-color: var(--sld-gold); transform: translateY(-1px); }
.lb__more:focus-visible { outline: 2px solid var(--sld-gold); outline-offset: 2px; }
.lb__empty { margin: 0; padding: 22px 0; color: var(--sld-ink-3); font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  .lb__row, .lb__more { transition: none; }
  .lb__row:hover, .lb__more:hover { transform: none; }
}
@media (max-width: 759px) {
  .v2-home .hm-leaderboard { padding-block: 44px 52px; }
  /* One column: ten rows before the expander, not twenty. */
  .lb:not(.is-open) .lb__row:nth-child(n+11) { display: none; }
  .lb__name { font-size: 15.5px; }
  .lb__row.is-podium .lb__name { font-size: 17px; }
  .lb__level { display: none; }
}

/* ═══ src/styles/category-spotlight.css ═══ */
/* SORA LIFE / Category edit. Three packshots cross an elliptical colour field;
   product facts and controls sit on the page ground. Saved theme values remain
   authoritative. Only transforms and opacity carry the carousel motion. */
.cspot {
  --cspot-h: 240px;
  --cspot-seat-w: 48%;
  --cspot-shot-h: 88%;
  --cspot-side-scale: 0.55;
  --cspot-side-x: 32cqw;
  --cspot-side-op: 0.88;
  --cspot-active-y: 0px;
  --cspot-side-y: -30px;
  --cspot-item-scale: 1;
  --cspot-item-y: 0px;
  --cspot-dur: 520ms;
  --cspot-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cspot-meta-dur: 360ms;
  --cspot-bg: #F1EDE4;
  --cspot-grad: none;
  --cspot-arc-w: 114%;
  --cspot-arc-h: 218px;
  --cspot-arc-curve: 48%;
  --cspot-name-size: 25px;
  --cspot-ink-mute: #232E26;
  position: relative;
  container-type: inline-size;
  isolation: isolate;
  overflow: hidden;
  padding: 0 0 6px;
  background: transparent;
}

/* Fixed to the art stage, never the height of a wrapping title. The bottom
   of the colour crosses the PACKSHOTS, leaving every metadata row on ivory. */
.cspot__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.cspot__bg {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--cspot-arc-w);
  height: var(--cspot-arc-h);
  transform: translateX(-50%);
  border-radius: 0 0 50% 50% / 0 0 var(--cspot-arc-curve) var(--cspot-arc-curve);
  background-color: var(--cspot-bg);
  background-image: var(--cspot-grad);
  pointer-events: none;
}
.cspot__bg--incoming { animation: cspot-field-in var(--cspot-dur) ease-out both; }
@keyframes cspot-field-in { from { opacity: 0; } to { opacity: 1; } }

.cspot__inner {
  position: relative;
  z-index: 1;
  max-width: var(--wrap, 1200px);
  margin-inline: auto;
  padding-inline: 16px;
  text-align: center;
}
.cspot__eyebrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 36px;
  margin: 0;
  color: var(--cspot-ink-mute);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cspot__eyebrow span:first-child { letter-spacing: 0.18em; }
.cspot__eyebrow span:last-child { text-align: right; }
.cspot__stage {
  position: relative;
  width: 100%;
  height: var(--cspot-h);
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  transform: translate3d(var(--cspot-drag, 0px), 0, 0);
  transition: transform 180ms var(--cspot-ease);
}
.cspot__stage[data-dragging] { transition: none; cursor: grabbing; }
.cspot__stage:focus-visible,
.cspot__shot:focus-visible,
.cspot__cta:focus-visible,
.cspot__arrow:focus-visible,
.cspot__rotation:focus-visible {
  outline: 2px solid var(--slv2-accent-primary, #1E3A2F);
  outline-offset: 4px;
}
.cspot__seat {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--cspot-seat-w);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition:
    transform var(--cspot-dur) var(--cspot-ease),
    opacity var(--cspot-dur) var(--cspot-ease);
  will-change: transform, opacity;
}
.cspot__seat--active {
  transform: translate3d(-50%, var(--cspot-active-y), 0) scale(1);
  opacity: 1;
  z-index: 2;
}
.cspot__seat--prev {
  transform: translate3d(calc(-50% - var(--cspot-side-x)), var(--cspot-side-y), 0) scale(var(--cspot-side-scale));
  opacity: var(--cspot-side-op);
  z-index: 1;
}
.cspot__seat--next {
  transform: translate3d(calc(-50% + var(--cspot-side-x)), var(--cspot-side-y), 0) scale(var(--cspot-side-scale));
  opacity: var(--cspot-side-op);
  z-index: 1;
}
.cspot__shot {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: var(--cspot-shot-h);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.cspot__shot--link { text-decoration: none; }
.cspot__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 9px rgba(24, 32, 26, 0.17));
  transform: translateY(var(--cspot-item-y)) scale(var(--cspot-item-scale));
  transform-origin: center center;
}
.cspot__img--framed { filter: drop-shadow(0 6px 7px rgba(24, 32, 26, 0.1)); }
.cspot__img--empty {
  display: block;
  inset: 0 20%;
  width: auto;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
}
.cspot__sidename {
  position: absolute;
  top: calc(50% + var(--cspot-shot-h) / 2 + 10px);
  width: 128%;
  color: var(--cspot-ink-mute);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.cspot__meta {
  position: relative;
  margin: 0 auto;
  max-width: 470px;
  animation: cspot-meta-in var(--cspot-meta-dur) var(--cspot-ease) both;
}
@keyframes cspot-meta-in {
  from { opacity: 0; transform: translate3d(0, 7px, 0); }
  to { opacity: 1; transform: none; }
}
.cspot__headline {
  margin: 0 0 5px;
  color: var(--cspot-ink-mute);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}
.cspot__name {
  margin: 0;
  color: var(--slv2-ink, #16211B);
  font-family: var(--font-serif, Georgia, serif);
  font-size: var(--cspot-name-size);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.cspot__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 10px;
  row-gap: 4px;
  margin: 9px 0 0;
  color: var(--cspot-ink-mute);
  font-size: 12px;
  line-height: 1.5;
}
.cspot__facts:empty { display: none; }
.cspot__price { font-weight: 700; font-size: 14px; }
.cspot__form { padding-left: 10px; border-left: 1px solid rgba(24, 32, 26, 0.24); }
.cspot__form:first-child { padding-left: 0; border-left: 0; }
.cspot__rating { display: inline-flex; align-items: center; gap: 3px; }
.cspot__rating svg { color: var(--slv2-accent-primary, #1E3A2F); }
.cspot__reviews { color: var(--cspot-ink-mute); }
.cspot__subline {
  margin: 6px 0 0;
  color: var(--cspot-ink-mute);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.cspot__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}
.cspot__cta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  min-height: 44px;
  padding: 0 24px;
  border-radius: var(--slv2-r-ui, 2px);
  background: var(--slv2-cta-primary-bg, #1E3A2F);
  color: var(--slv2-cta-primary-text, #FBF8F1);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
.cspot__cta svg { transition: transform 180ms ease-out; }
.cspot__cta:hover svg { transform: translateX(3px); }
.cspot__arrow {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(24, 32, 26, 0.25);
  border-radius: 50%;
  background: transparent;
  color: var(--slv2-ink, #16211B);
  cursor: pointer;
  transition: background-color 180ms ease-out;
}
.cspot__arrow:hover { background-color: rgba(24, 32, 26, 0.06); }
.cspot__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  min-height: 32px;
  margin-top: 3px;
  color: var(--cspot-ink-mute);
}
.cspot__hint { font-size: 9px; letter-spacing: 0.035em; }
.cspot__pips { display: inline-flex; flex-wrap: nowrap; gap: 4px; max-width: 50%; }
.cspot__pip {
  flex: 0 1 5px;
  width: 5px;
  height: 3px;
  border-radius: 2px;
  background: rgba(24, 32, 26, 0.24);
}
.cspot__pip.is-on { flex-basis: 18px; width: 18px; background: var(--slv2-accent-primary, #1E3A2F); }
.cspot__position { font-size: 10px; font-variant-numeric: tabular-nums; }
.cspot__rotation {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  margin-left: -7px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

/* Container units keep neighbouring seats inside the Admin preview as well
   as the storefront. Breakpoints retain independent art direction. */
@container (min-width: 768px) {
  .cspot__inner, .cspot__backdrop {
    --cspot-h: 344px;
    --cspot-shot-h: 88%;
    --cspot-seat-w: 36%;
    --cspot-side-x: 29cqw;
    --cspot-side-scale: 0.6;
    --cspot-active-y: -12px;
    --cspot-side-y: -40px;
    --cspot-arc-h: 294px;
    --cspot-arc-w: 110%;
    --cspot-arc-curve: 46%;
    --cspot-name-size: 30px;
  }
  .cspot__inner { padding-inline: 32px; }
  .cspot__eyebrow { min-height: 48px; font-size: 10px; }
  .cspot__sidename { width: 110%; font-size: 17px; }
}
@container (min-width: 1100px) {
  .cspot__inner, .cspot__backdrop {
    --cspot-h: 386px;
    --cspot-seat-w: 40%;
    --cspot-shot-h: 88%;
    --cspot-side-scale: 0.57;
    --cspot-side-x: min(17cqw, 225px);
    --cspot-active-y: -12px;
    --cspot-side-y: -30px;
    --cspot-arc-w: 74%;
    --cspot-arc-h: 330px;
    --cspot-arc-curve: 48%;
    --cspot-name-size: 36px;
  }
  .cspot__backdrop { left: 44%; }
  .cspot__bg { width: 120%; }
  .cspot__inner {
    padding-block: 18px 24px;
    display: grid;
    grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: 42px;
    text-align: left;
  }
  .cspot__eyebrow { grid-column: 1; grid-row: 1; align-self: end; justify-content: flex-start; gap: 14px; }
  .cspot__meta { grid-column: 1; grid-row: 2; margin: 0; }
  .cspot__stage { grid-column: 2; grid-row: 1 / span 4; }
  .cspot__actions { grid-column: 1; grid-row: 3; justify-content: flex-start; margin-top: 22px; }
  .cspot__nav { grid-column: 1; grid-row: 4; justify-content: flex-start; align-self: start; }
  .cspot__facts { justify-content: flex-start; }
  .cspot__sidename { font-size: 17px; }
  .cspot__hint { display: none; }
}

/* Reduced motion is immediate, including background and text. */
@media (prefers-reduced-motion: reduce) {
  .cspot *, .cspot *::before, .cspot *::after { animation: none !important; transition: none !important; }
}
.cspot--still * { animation: none !important; transition: none !important; }

/* Category-only density; ProductBrowser continues to own all catalogue logic. */
.v2-shop--spotlit .v2-shop__head--tight { padding-top: 10px; padding-bottom: 8px; }
.v2-shop--spotlit .v2-shop__head--tight .v2-shop__title { font-size: 23px; line-height: 1.15; margin: 0; }
.v2-shop--spotlit .v2-shop__head--tight .v2-shop__lede { margin-top: 4px; font-size: 12.5px; line-height: 1.45; }
.v2-shop--spotlit .v2-shop__cats { margin-top: 8px; margin-bottom: 0; }
.v2-shop--spotlit .v2-shop__search { margin-top: 8px; }
.v2-shop--spotlit .v2-flt { margin-top: 8px; }
.v2-shop--spotlit .v2-pb { padding-top: 0; }
@media (min-width: 768px) {
  .v2-shop--spotlit .v2-shop__head--tight { padding-top: 16px; }
  .v2-shop--spotlit .v2-shop__head--tight .v2-shop__title { font-size: 28px; }
}
@media (min-width: 1100px) {
  .v2-shop--spotlit .v2-shop__head--tight .v2-shop__title { font-size: 32px; }
}

.v2-shop--spotlit .v2-shop__related { padding-top: 24px; padding-bottom: 28px; }
.v2-shop__related-title { margin: 0 0 12px; font-size: 20px; font-weight: 500; font-family: var(--font-serif, Georgia, serif); }

/* The shared mobile category opening. :has follows the actual activation gate,
   including async settings, empty pools and unavailable products. The global
   header and every layout at 768px and above remain unchanged. */
.cspot__category-nav { display: none; }
@media (max-width: 767px) {
  .v2-shop--spotlit:has(> .cspot--category-page) > .v2-shop__head--tight { display: none; }
  .cspot--category-page { --cspot-arc-h: 236px; }
  .cspot--category-page .cspot__eyebrow { display: none; }
  .cspot__category-nav {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
    min-height: 54px;
    padding-block: 5px;
    color: var(--cspot-mobile-ink, #16211B);
    text-align: left;
  }
  .cspot__category-back {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-left: -8px;
    color: inherit;
    text-decoration: none;
  }
  .cspot__category-back:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
  .cspot__category-name {
    color: inherit;
    margin: 0;
    font-family: inherit;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.025em;
    overflow-wrap: anywhere;
  }
  .cspot__category-label { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; }
  .cspot__bg {
    background-color: var(--cspot-mobile-bg, var(--cspot-bg));
    background-image: var(--cspot-mobile-grad, var(--cspot-grad));
  }
  .cspot__eyebrow { color: var(--cspot-mobile-ink, #16211B); }
  .cspot__sidename { top: calc(50% + var(--cspot-shot-h) / 2 + 60px); }
}

/* ═══ src/styles/storefront-motion.css ═══ */
/* Expressive storefront motion. Finite entrances, no new media or layout
   dimensions; transactional pages never receive the sl-motion scope. */
@media (prefers-reduced-motion: no-preference) {
  .sl-motion { --sl-motion-ease: cubic-bezier(.16, 1, .3, 1); }

  .sl-motion .hd-tile.sl-arrived .hd-tile__media {
    animation: sl-art-turn 1s var(--sl-motion-ease);
  }
  .sl-motion .hm-trust__item.sl-arrived > svg {
    animation: sl-icon-orbit 1.1s var(--sl-motion-ease);
  }
  .sl-motion .sl-arrived :is(.v2-h2, .hd-title),
  .sl-motion .hd-title.sl-arrived {
    text-decoration-color: var(--slv2-gold-ink);
    animation: sl-title-focus 1s var(--sl-motion-ease);
  }

  .sl-motion :is(.hd-tile__media, .hm-brand__media, .hm-mom__media, .hm-collection__images) {
    transition: transform .65s var(--sl-motion-ease), box-shadow .65s ease;
    transform-origin: center;
  }
  .sl-motion .sl-tilting {
    transform: perspective(900px) rotateX(var(--sl-tilt-x, 0deg)) rotateY(var(--sl-tilt-y, 0deg));
    box-shadow: 0 20px 35px -24px rgb(17 39 30 / 55%);
  }

  .sl-motion :is(.v2-pc__cta, .v2-more, .hm-collection__link, .hm-brand__link, .v2-btn) svg {
    transition: transform .45s var(--sl-motion-ease);
  }
  .sl-motion :is(.v2-pc__cta, .v2-btn):active:not(:disabled) svg { transform: scale(.8) rotate(-12deg); }
  .sl-motion .v2-pc__wish[aria-pressed="true"] svg { animation: sl-heart-pop .55s var(--sl-motion-ease); }

  @media (hover: hover) and (pointer: fine) {
    .sl-motion :is(.v2-pc__media img, .hm-brand__media img, .hm-collection__images .v2-pimg) {
      transition: transform .8s var(--sl-motion-ease);
    }
    .sl-motion .v2-pc__media:hover img { transform: scale(1.035); }
    .sl-motion .hm-collection:hover .v2-pimg:nth-child(1) { transform: translateY(-8px) rotate(-6deg); }
    .sl-motion .hm-collection:hover .v2-pimg:nth-child(2) { transform: translateY(-14px); }
    .sl-motion .hm-collection:hover .v2-pimg:nth-child(3) { transform: translateY(-8px) rotate(6deg); }
    .sl-motion :is(.v2-more, .hm-collection, .hm-brand, .v2-btn):hover svg { transform: translateX(5px); }
    .sl-motion .v2-pc__cta:hover:not(:disabled) svg { transform: translateY(-2px) rotate(-10deg); }
  }

  @keyframes sl-art-turn { from { transform: perspective(800px) rotateY(-22deg) scale(.94); } to { transform: none; } }
  @keyframes sl-icon-orbit { from { transform: perspective(300px) rotateY(-180deg) scale(.7); } to { transform: none; } }
  @keyframes sl-title-focus { from { opacity: .5; translate: 0 12px; } to { opacity: 1; translate: 0; } }
  @keyframes sl-heart-pop { 0%, 100% { scale: 1; } 40% { scale: 1.3; rotate: -12deg; } 70% { scale: .94; } }
}

/* ═══ src/styles/storefront-background.css ═══ */
/* Independent decorative scenes. Hosts reserve no new space; dialogs and
   sticky purchase bars remain outside these local stacking contexts. */
.sl-bg-host { position:relative; isolation:isolate; }
.sl-bg {
  --sl-bg-a:100 145 72; --sl-bg-b:210 166 77; --sl-bg-c:243 216 161;
  position:absolute; inset:0 0 auto; height:min(100%, 100vh); z-index:-1;
  transform:translateY(var(--sl-bg-y, 0px));
  pointer-events:none; user-select:none; overflow:hidden; contain:strict;
}
.v2-shop__body > .sl-bg { inset-inline:calc(-1 * var(--slv2-gutter)); }
.sl-bg > i { position:absolute; display:block; }
.sl-bg__wash {
  inset:0;
  background:radial-gradient(ellipse at 0 48%, rgb(var(--sl-bg-a) / .58), transparent 56%),
    radial-gradient(ellipse at 100% 68%, rgb(var(--sl-bg-b) / .48), transparent 72%);
  animation:sl-bg-tide 9s ease-in-out infinite alternate paused;
}
.sl-bg > i:where(:not(.sl-bg__wash)) {
  width:clamp(80px, 13vw, 200px); aspect-ratio:1; left:-2%; top:max(75px, 28%);
  animation:sl-bg-float 7s ease-in-out infinite alternate paused;
  animation-delay:calc(var(--sl-shape-index) * -1.1s);
}
.sl-bg > i:nth-child(3) { left:auto; right:-2%; top:48%; rotate:24deg; }
.sl-bg > i:nth-child(4) { left:4%; top:79%; scale:.6; rotate:-28deg; }
.sl-bg > i:nth-child(5) { left:auto; right:5%; top:max(80px, 30%); scale:.5; }
.sl-bg > i:nth-child(6) { left:1%; top:60%; scale:.4; }
/* Herbs: swaying leaves, no oil or pill decoration. */
.sl-bg .sl-bg__sprig {
  aspect-ratio:180 / 260;
  background:url('/public/art/ingredient-sprig.svg') center / contain no-repeat;
  filter:drop-shadow(5px 10px 8px #304e2929); transform-origin:50% 90%;
  animation-name:sl-bg-sway; rotate:-24deg;
}
.sl-bg .sl-bg__leaf {
  width:clamp(44px, 7vw, 90px); aspect-ratio:1.6; border-radius:0 90% 0 90%;
  background:linear-gradient(32deg, #31583e, #75994d 48%, #d9e4a4 50%, #76954b 53%, #a8bd73);
  box-shadow:4px 8px 14px #36573524;
}
/* Citrus: segmented fruit slices rotate around their own centres. */
.sl-bg .sl-bg__citrus {
  background:radial-gradient(circle, transparent 57%, #fff3be 58% 63%, #e9a02c 65% 72%, transparent 73%),
    repeating-conic-gradient(from 12deg, #fff5c6 0deg 3deg, #f3b349 5deg 32deg, #e99125 34deg 36deg);
  border-radius:50%; border:5px solid #efb13c;
  box-shadow:inset 0 0 0 4px #fff4b9, 5px 12px 20px #c37d3229;
  animation-name:sl-bg-turn;
}
/* Hydration: expanding water rings and clear serum pearls. */
.sl-bg .sl-bg__ripple {
  width:clamp(180px, 26vw, 390px); border-radius:50%;
  background:repeating-radial-gradient(ellipse, transparent 0 19px, rgb(var(--sl-bg-a) / .65) 20px 22px, #fff9 23px 25px, transparent 26px 42px);
  transform:perspective(600px) rotateX(52deg); animation-name:sl-bg-ripple;
}
.sl-bg .sl-bg__pearl {
  width:clamp(32px, 6vw, 80px); border-radius:50%;
  background:radial-gradient(circle at 28% 22%, #fffe 0 7%, #fff4 18%, transparent 40%), radial-gradient(circle at 65% 75%, rgb(var(--sl-bg-a) / .82), #ffffff60 60%, rgb(var(--sl-bg-b) / .65));
  box-shadow:inset 2px 3px 5px #fffe, inset -3px -5px 10px rgb(var(--sl-bg-a) / .24), 5px 10px 18px #6b827021;
}
/* Editorial brands: light beams and gold dust, no ingredient arrangement. */
.sl-bg .sl-bg__beam {
  width:clamp(170px, 27vw, 410px); height:130%; top:-15%;
  background:linear-gradient(100deg, transparent 15%, rgb(var(--sl-bg-b) / .34) 48%, #fff6 50%, transparent 75%);
  rotate:25deg; animation-name:sl-bg-light;
}
.sl-bg .sl-bg__mote {
  width:8px; aspect-ratio:1; border-radius:50%; background:rgb(var(--sl-bg-b));
  box-shadow:20px -34px 0 -2px rgb(var(--sl-bg-a) / .5), 52px 28px 0 -1px rgb(var(--sl-bg-b) / .65), -18px 64px 0 -2px rgb(var(--sl-bg-a) / .4), 72px -70px 0 -2px rgb(var(--sl-bg-b) / .5);
}
/* Cosmetic silk: broad flowing cream folds. */
.sl-bg .sl-bg__ribbon {
  width:clamp(280px, 45vw, 700px); aspect-ratio:1.5; left:-20%; top:25%;
  border-radius:48% 52% 35% 65%;
  background:repeating-radial-gradient(ellipse at 10% 15%, transparent 0 24px, rgb(var(--sl-bg-b) / .27) 26px 40px, #ffffffa0 42px 46px, rgb(var(--sl-bg-c) / .5) 48px 64px);
  rotate:-25deg; animation-name:sl-bg-ribbon;
}
.sl-bg .sl-bg__ribbon:nth-child(3) { left:auto; right:-22%; top:50%; rotate:155deg; }
.sl-bg .sl-bg__berries {
  aspect-ratio:200 / 170;
  background:url('/public/art/ingredient-berries.svg') center / contain no-repeat;
  filter:drop-shadow(4px 8px 5px #7c531d29); rotate:-16deg;
}
.sl-bg .sl-bg__droplet {
  width:clamp(36px, 5vw, 72px); border-radius:65% 5% 65% 65%; rotate:-45deg;
  background:radial-gradient(ellipse at 28% 30%, #fff9 0 8%, transparent 23%), radial-gradient(ellipse at 38% 35%, rgb(var(--sl-bg-c)), rgb(var(--sl-bg-b)) 65%, rgb(var(--sl-bg-a)));
  box-shadow:inset 2px 3px 4px #fff8, inset -4px -5px 7px #72591630, 5px 12px 18px #93722a26;
}
/* Ayurveda brand spotlight: coconut halves and a soft oil sheen. */
.sl-bg .sl-bg__coconut {
  border-radius:48% 52% 46% 54%;
  background:radial-gradient(ellipse at 48% 45%, #e2d7bb 0 24%, #fffaf0 28% 57%, #e9e0c8 62%, #735338 64% 72%, #aa8357 74% 82%, #594330 85%);
  box-shadow:inset 3px 4px 5px #fff7, 6px 14px 18px #6851392b;
  transform:perspective(700px) rotateX(35deg); animation-name:sl-bg-turn;
}
/* Collections: floating rose petals; no leaf/capsule motif. */
.sl-bg .sl-bg__petal {
  width:clamp(64px, 10vw, 145px); aspect-ratio:.86; border-radius:65% 40% 70% 25%;
  background:radial-gradient(ellipse at 30% 20%, #fff2e8 0, #ecc6c6 25%, #cc8e9f 67%, #97576d);
  box-shadow:inset 3px 4px 7px #fff9, inset -4px -6px 8px #8b3d591c, 7px 15px 18px #964b6624;
  rotate:-25deg; animation-name:sl-bg-petal;
}
.sl-bg .sl-bg__capsule {
  width:clamp(64px, 9vw, 120px); aspect-ratio:2.45; border-radius:999px;
  background:linear-gradient(180deg, #fff8, transparent 45%, #393c251f), linear-gradient(90deg, rgb(var(--sl-bg-a)) 0 49%, rgb(var(--sl-bg-c)) 50% 100%);
  border:1px solid #aca46e55; box-shadow:inset 0 2px 3px #fffa, inset 0 -3px 4px #555a2926, 5px 9px 12px #59613826;
  rotate:-32deg;
}
.sl-bg .sl-bg__orbit {
  width:clamp(130px, 22vw, 260px); border:1px solid rgb(var(--sl-bg-a) / .5); border-radius:50%;
  box-shadow:inset 12px 0 0 -10px rgb(var(--sl-bg-b)); animation-name:sl-bg-turn;
}
.sl-bg .sl-bg__crystal {
  width:clamp(65px, 11vw, 140px); aspect-ratio:.7;
  clip-path:polygon(50% 0, 92% 25%, 85% 75%, 50% 100%, 8% 74%, 0 26%);
  background:conic-gradient(from 35deg at 50% 40%, #d2e0df, #fff8, #92adae, #e1e9e3, #a6bcbd, #fff9, #d2e0df);
  animation-name:sl-bg-turn;
}
.sl-bg--moving > i { animation-play-state:running; }
@keyframes sl-bg-float { from { transform:perspective(800px) translateY(14px) rotateY(-12deg); } to { transform:perspective(800px) translateY(-20px) rotateY(18deg); } }
@keyframes sl-bg-sway { from { transform:rotate(-7deg) translateY(8px); } to { transform:rotate(8deg) translateY(-12px); } }
@keyframes sl-bg-turn { from { transform:perspective(800px) rotateX(25deg) rotate(-15deg); } to { transform:perspective(800px) rotateX(-10deg) rotate(30deg) translateY(-18px); } }
@keyframes sl-bg-ripple { from { transform:perspective(600px) rotateX(52deg) scale(.8); opacity:.5; } to { transform:perspective(600px) rotateX(52deg) scale(1.2); opacity:1; } }
@keyframes sl-bg-light { to { transform:translateX(45px) skewX(-8deg); opacity:.45; } }
@keyframes sl-bg-ribbon { to { transform:translateY(-24px) rotate(14deg) scale(1.07); } }
@keyframes sl-bg-petal { from { transform:perspective(700px) rotateY(-30deg) rotateX(15deg) translateY(18px); } to { transform:perspective(700px) rotateY(30deg) rotateX(-15deg) translateY(-24px); } }
/* Saturated edge light stays behind the existing content. The wash is not
   masked: only large ingredient motifs fade beneath the central reading area. */
.sl-bg[data-placement="product"], .sl-bg[data-placement="story"] {
  inset-inline:0;
}
.sl-bg[data-placement="product"] > i:not(.sl-bg__wash),
.sl-bg[data-placement="story"] > i:not(.sl-bg__wash) { opacity:.8; }
.sl-bg[data-placement="product"] > .sl-bg__wash,
.sl-bg[data-placement="story"] > .sl-bg__wash {
  background:radial-gradient(ellipse at 0 38%, rgb(var(--sl-bg-a) / .62), transparent 64%),
    radial-gradient(ellipse at 100% 80%, rgb(var(--sl-bg-b) / .56), transparent 62%),
    linear-gradient(135deg, rgb(var(--sl-bg-c) / .42), #fff8 48%, rgb(var(--sl-bg-c) / .32));
}
.sl-bg[data-placement="story"] > i:nth-child(2) { left:auto; right:0; }
.sl-bg[data-placement="story"] > i:nth-child(3) { right:auto; left:0; }
@keyframes sl-bg-tide {
  from { transform:translate(-2%, 1%) scale(1); }
  to { transform:translate(3%, -2%) scale(1.08); }
}
@media (min-width:1280px) {
  .v2-pdp-root > :is(.pdp, .pdp-flow) > .sl-bg { inset-inline:calc((var(--slv2-container) - 100vw) / 2 + 12px); }
}
/* Preserve small-print contrast over the stronger animated colour field. */
.pdp.sl-bg-host :is(.pdp__tax, .pdp-deliver__head em) { color:#405750; }
/* Narrow screens need colour across the section, not just in desktop gutters.
   Keep motifs in the background without resizing any content or image box. */
@media (max-width:1023px) {
  .sl-bg__wash {
    background:radial-gradient(ellipse at 0 24%, rgb(var(--sl-bg-a) / .62), transparent 75%),
      radial-gradient(ellipse at 100% 86%, rgb(var(--sl-bg-b) / .58), transparent 72%);
  }
  .sl-bg > i:nth-child(2) { top:12px; left:-24px; }
  .sl-bg > i:nth-child(3) { top:55%; right:-24px; left:auto; }
  .sl-bg > i:nth-child(4) { top:20%; left:auto; right:12%; scale:.85; }
  .sl-bg > i:nth-child(5) { top:82%; right:4%; scale:.8; }
  .sl-bg .sl-bg__sprig { width:140px; }
  .sl-bg .sl-bg__berries { width:140px; }
  .sl-bg .sl-bg__citrus, .sl-bg .sl-bg__coconut { width:125px; }
  .sl-bg .sl-bg__pearl { width:62px; }
  .sl-bg .sl-bg__ripple { width:260px; }
  .sl-bg .sl-bg__capsule { width:105px; }
  .sl-bg .sl-bg__ribbon { width:420px; }
  .sl-bg .sl-bg__beam { width:240px; top:-15%; }
  .sl-bg .sl-bg__mote { width:8px; }
  .sl-bg[data-placement="product"] > i:nth-child(2),
  .sl-bg[data-placement="story"] > i:nth-child(2) { top:8%; left:-35px; right:auto; }
  .sl-bg[data-placement="product"] > i:nth-child(3),
  .sl-bg[data-placement="story"] > i:nth-child(3) { top:65%; right:-35px; left:auto; }
}
@media (prefers-reduced-motion: reduce) { .sl-bg { display:none; } .sl-bg > i { animation:none; transition:none; } }
@media print { .sl-bg { display:none; } }
/* ------------------------------------------------------------------
   Below the desktop breakpoint the scenes are STATIC.

   src/lib/scrollBackground.js stops writing --sl-bg-y on every scroll frame
   and never applies .sl-bg--moving, so nothing here animates and the scene
   layer's content stops changing — the browser can paint each scene once and
   then only composite it while the user scrolls.

   What is left is that one-time paint, and on a phone it is dominated by two
   things: drop-shadow filters, which force the element through its own filter
   pass, and large blurred box-shadows, which do the same. Both were depth
   cues on decoration sitting behind content at 390px wide, where nobody can
   see them. The colour and the silhouette are what actually read, and those
   are kept exactly as they are.

   Inset shadows stay: they are what give the pearl, droplet, coconut and
   petal their form rather than reading as flat blobs, and they are cheap at
   these sizes. Unblurred offset shadows stay too — .sl-bg__mote DRAWS its
   four extra dots with them.
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  /* No parallax to carry, so do not promote a layer for a transform that
     never changes. */
  .sl-bg {
    transform: none;
    /* Sections butt against each other at 0px, so two scened sections used to
       meet on a razor edge — Shop by Category's pink ended and Shop by
       Concerns' blue began on the same pixel row. Each scene now dissolves
       into its section's own white at top and bottom, so neighbouring colours
       never touch. A fixed length rather than a percentage: these sections
       run from 240px to 670px tall and a percentage would swallow the short
       ones. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26px,
      #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 26px,
      #000 calc(100% - 26px), transparent 100%);
  }
  .sl-bg > i, .sl-bg__wash { animation: none; }

  /* Filters: the two SVG-backed motifs. */
  .sl-bg .sl-bg__sprig,
  .sl-bg .sl-bg__berries { filter: none; }

  /* Outer blurred shadows dropped; inset modelling kept. */
  .sl-bg .sl-bg__leaf { box-shadow: none; }
  .sl-bg .sl-bg__citrus { box-shadow: inset 0 0 0 4px #fff4b9; }
  .sl-bg .sl-bg__pearl {
    box-shadow: inset 2px 3px 5px #fffe, inset -3px -5px 10px rgb(var(--sl-bg-a) / .24);
  }
  .sl-bg .sl-bg__droplet {
    box-shadow: inset 2px 3px 4px #fff8, inset -4px -5px 7px #72591630;
  }
  .sl-bg .sl-bg__coconut { box-shadow: inset 3px 4px 5px #fff7; }
  .sl-bg .sl-bg__petal {
    box-shadow: inset 3px 4px 7px #fff9, inset -4px -6px 8px #8b3d591c;
  }
  .sl-bg .sl-bg__capsule {
    box-shadow: inset 0 2px 3px #fffa, inset 0 -3px 4px #555a2926;
  }
}

/* ═══ src/styles/storefront-refinements.css ═══ */
/* Storefront legibility and brand refinements. Kept separate from commerce logic. */

/* Shared price language: selling price is green, compare/original price is red. */
.page-main .price .now,
.page-main .pdp__price .now,
.page-main .buybar__price .now,
.page-main .cspot__price,
.v2-hdr__suggest-price {
  color: var(--slv2-price, #277249);
}

.page-main .price .was,
.page-main .pdp__price .was,
.page-main .buybar__price .was {
  color: var(--slv2-price-mrp, #B44343);
}

/* Sora Letter: a richer, warm wellness composition with the same content and form. */
.v2-home .nl {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 28%, rgba(255, 190, 74, .28), transparent 24%),
    radial-gradient(circle at 91% 72%, rgba(151, 94, 189, .22), transparent 26%),
    linear-gradient(135deg, #E6F5EB 0%, #FFF0D9 48%, #F0E7F7 100%);
}

.v2-home .nl::before,
.v2-home .nl::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  border-radius: 50%;
  filter: blur(1px);
}

.v2-home .nl::before {
  width: 250px;
  aspect-ratio: 1;
  left: -108px;
  top: -105px;
  border: 34px solid rgba(35, 162, 123, .22);
  box-shadow: 0 0 54px rgba(35, 162, 123, .13);
}

.v2-home .nl::after {
  width: 180px;
  aspect-ratio: 1;
  right: -70px;
  bottom: -92px;
  background: radial-gradient(circle at 35% 30%, #FFD46E, #F18D64 47%, #8E5BA8 100%);
  opacity: .32;
}

.v2-home .nl__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(42px, 5vw, 66px);
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 30px;
  background:
    radial-gradient(circle at 91% 12%, rgba(255, 195, 74, .68), transparent 26%),
    radial-gradient(circle at 10% 100%, rgba(32, 185, 142, .52), transparent 36%),
    radial-gradient(circle at 76% 100%, rgba(148, 90, 187, .38), transparent 34%),
    linear-gradient(128deg, #123B31 0%, #165643 54%, #35345F 100%);
  box-shadow: 0 28px 70px rgba(18, 59, 49, .24), inset 0 1px 0 rgba(255,255,255,.18);
}

.v2-home .nl__card::before {
  content: "";
  position: absolute;
  width: 310px;
  aspect-ratio: 1;
  right: -76px;
  top: -130px;
  z-index: -1;
  border: 44px solid rgba(255,255,255,.14);
  border-radius: 50%;
  box-shadow: 0 0 65px rgba(255, 212, 110, .20);
  animation: sl-newsletter-orbit 11s ease-in-out infinite alternate;
}

.v2-home .nl__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .16;
  background-image: radial-gradient(circle, rgba(255,255,255,.8) 1px, transparent 1px);
  background-size: 20px 20px;
  mask-image: linear-gradient(110deg, transparent 30%, #000 88%);
}

.v2-home .nl__deco {
  display: block;
  width: min(330px, 34vw);
  right: 1%;
  top: 50%;
  z-index: -1;
  opacity: .76;
  transform: translateY(-50%) rotate(8deg);
  filter: drop-shadow(0 20px 30px rgba(0,0,0,.18));
  animation: sl-newsletter-float 7s ease-in-out infinite;
}

.v2-home .nl__body {
  position: relative;
  z-index: 1;
  max-width: 650px;
}

.v2-home .nl__body h2 {
  max-width: 620px;
  margin-top: 10px;
  font-size: clamp(38px, 4.2vw, 58px) !important;
  line-height: .98;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.v2-home .nl__body p {
  max-width: 590px;
  margin-top: 18px;
  color: rgba(255,255,255,.86) !important;
  font-size: 15px;
  line-height: 1.65;
}

.v2-home .nl__form {
  max-width: 610px;
  margin-top: 28px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 15px;
  background: rgba(255,255,255,.12);
  box-shadow: 0 14px 36px rgba(7, 27, 22, .2);
  backdrop-filter: blur(12px);
}

.v2-home .nl__form .nl__input {
  min-height: 50px;
  padding-inline: 17px;
  border: 0;
  border-radius: 10px;
  background: rgba(255,255,255,.96);
  color: #14231D;
  font-size: 14px;
}

.v2-home .nl__form .btn {
  min-height: 50px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #FFD56C, #F4A85E);
  color: #163B31;
  box-shadow: 0 9px 22px rgba(5, 27, 21, .22);
}

.v2-home .nl__form .btn:hover {
  background: linear-gradient(135deg, #FFE08B, #F6B773);
  box-shadow: 0 12px 28px rgba(5, 27, 21, .28);
}

@keyframes sl-newsletter-float {
  0%, 100% { transform: translateY(-50%) rotate(8deg); }
  50% { transform: translateY(calc(-50% - 10px)) rotate(4deg); }
}

@keyframes sl-newsletter-orbit {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to { transform: translate3d(-18px, 18px, 0) rotate(18deg); }
}

@media (max-width: 767px) {
  /* Give the logo enough physical size for its built-in tagline to remain legible. */
  .v2-hdr__bar {
    height: 64px;
    gap: 6px;
  }

  .v2-hdr__brand {
    min-width: 0;
    margin-left: 5px;
  }

  .v2-hdr__brand .logo__img {
    width: auto;
    max-width: 132px;
    height: 40px;
  }

  .v2-hdr__left,
  .v2-hdr__right {
    gap: 11px;
  }

  /* Product cards and compact rails. */
  .v2-pc__meta { color: var(--slv2-ink-3); font-size: 10.5px; line-height: 1.35; }
  .v2-pc__name { min-height: 38px; font-size: 14px; line-height: 1.34; }
  .page-main .v2-pc__price .v2-price__now { font-size: 17px; }
  .page-main .v2-pc__price .v2-price__mrp { font-size: 12.5px; }
  .v2-cc__brand { color: var(--slv2-ink-3); font-size: 9.5px; }
  .v2-cc__n { font-size: 13px; line-height: 1.35; }
  .page-main .v2-cc .v2-price__now { font-size: 16px; }
  .page-main .v2-cc .v2-price__mrp { font-size: 12px; }
  .v2-badge { font-size: 10.5px; }

  /* Section context, supporting copy, and small editorial labels. */
  .v2-eyebrow,
  .v2-home .hm-brand__body > span:first-child,
  .v2-home .hm-collection__body > span:first-child {
    font-size: 10px;
    line-height: 1.35;
  }

  .v2-more { font-size: 11.5px; }
  .v2-home .hm-heading__copy,
  .v2-home .hm-creator p:not(.v2-eyebrow) { font-size: 13px; line-height: 1.5; }
  .v2-home .hm-mom__body > p:not(.v2-eyebrow) { font-size: 14px; }
  .v2-home .hm-mom__products a { font-size: 12.5px; }
  .v2-home .hm-brand__link,
  .v2-home .hm-collection__link,
  .v2-home .hm-trust__link { font-size: 10.5px; }
  .v2-home .hm-trust h3 { font-size: 14px; }
  .v2-home .hm-trust p { font-size: 12px; line-height: 1.5; }

  /* Shop/search/category controls and supporting text. */
  .v2-shop .crumbs { font-size: 12px; }
  .v2-shop .v2-shop__count { font-size: 14px; }
  .v2-shop .v2-searchbox input { font-size: 14px; }
  .v2-shop .v2-flt__btn,
  .v2-shop .v2-flt__sort select { font-size: 13px; }
  .v2-shop .v2-flt__count { font-size: 12.5px; }
  .v2-shop .v2-flt__n { font-size: 11px; }
  .v2-shop .v2-shop__empty p { font-size: 15px; line-height: 1.55; }

  /* PDP detail copy and compact commerce labels. */
  .v2-pdp-root .pdp__brand { font-size: 11px; }
  .v2-pdp-root .pdp .pdp__lead { font-size: 14px; line-height: 1.55; }
  .v2-pdp-root .pdp__tax,
  .v2-pdp-root .pdp-offers__lead em,
  .v2-pdp-root .pdp-offers__row em,
  .v2-pdp-root .pdp-deliver__head em,
  .v2-pdp-root .pdp-deliver__eta { font-size: 12px; line-height: 1.45; }
  .v2-pdp-root .pdp-offers__lead strong,
  .v2-pdp-root .pdp-offers__row strong,
  .v2-pdp-root .pdp-deliver__head strong { font-size: 13.5px; }
  .v2-pdp-root .pdp__block > .label,
  .v2-pdp-root .pdp-deliver__label { font-size: 13px; }
  .v2-pdp-root .pdp-about__text,
  .v2-pdp-root .pdp-acc__p,
  .v2-pdp-root .pdp-acc .ticklist li { font-size: 14px; line-height: 1.6; }
  .v2-pdp-root .pdp-acc__btn { font-size: 14px; }
  .v2-pdp-root .pdp-trust__txt strong { font-size: 13px; }
  .v2-pdp-root .pdp-trust__txt em { font-size: 11.5px; line-height: 1.45; }

  /* Keep every mobile PDP reading and purchase surface inside the same
     viewport-sized containing block. The larger type can increase intrinsic
     widths in the delivery grid and fixed buy bar; without explicit shrink
     boundaries, the global overflow guard clips that spill at an edge. */
  .v2-pdp-root,
  .v2-pdp-root .pdp.v2-wrap,
  .v2-pdp-root .pdp-flow,
  .v2-pdp-root .pdp__info,
  .v2-pdp-root .pdp-sec,
  .v2-pdp-root .pdp-deliver,
  .v2-pdp-root .pdp-deliver__pin,
  .v2-pdp-root .pdp-deliver__methods {
    min-width: 0;
    max-width: 100%;
  }

  .v2-pdp-root .pdp.v2-wrap,
  .v2-pdp-root .pdp-flow {
    width: 100%;
    margin-inline: auto;
  }

  .v2-pdp-root .pdp-deliver__pin > *,
  .v2-pdp-root .pdp-deliver__method > * {
    min-width: 0;
  }

  .v2-pdp-root .pdp-deliver__method {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
    gap: 8px;
  }

  .v2-pdp-root .pdp-about__text {
    overflow-wrap: anywhere;
  }

  .v2-pdp-root .buybar {
    left: 0;
    right: 0;
    width: auto;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    transform: none;
  }

  .v2-pdp-root .buybar > * {
    min-width: 0;
  }

  /* Cart and checkout rows remain compact, but no longer read like fine print. */
  .v2-cart-root .cartrow__name { font-size: 14px; line-height: 1.4; }
  .v2-cart-root .cartrow__price { font-size: 17px; }
  .v2-cart-root .cartrow__variant { font-size: 11px; }
  .v2-cart-root .cartrow__unitprice { font-size: 12px; }
  .v2-cart-root .cartrow__actions .linkbtn { font-size: 11.5px; }
  .v2-cart-root .psum__row,
  .v2-checkout-root .psum__row { font-size: 13px; }
  .v2-cart-root .psum__row.is-strong,
  .v2-checkout-root .psum__row.is-strong { font-size: 21px; }
  .v2-cart-root .v2-cart__hint,
  .v2-checkout-root .v2-checkout__microcopy { font-size: 11.5px; line-height: 1.5; }
  .v2-checkout-root .checkout__meta strong { font-size: 13px; }
  .v2-checkout-root .checkout__meta em { font-size: 11.5px; }

  /* Category spotlight metadata. */
  .cspot__eyebrow,
  .cspot__category-label,
  .cspot__hint { font-size: 10.5px; }
  .cspot__category-name { font-size: 13px; }
  .cspot__headline,
  .cspot__subline { font-size: 13px; line-height: 1.4; }
  .cspot__price { font-size: 17px; }

  .v2-home .nl {
    padding-block: 42px;
  }

  .v2-home .nl__card {
    padding: 32px 22px 26px;
    border-radius: 24px;
    background:
      radial-gradient(circle at 95% 7%, rgba(255, 196, 74, .76), transparent 28%),
      radial-gradient(circle at 2% 100%, rgba(32, 185, 142, .58), transparent 39%),
      radial-gradient(circle at 92% 94%, rgba(153, 89, 190, .42), transparent 38%),
      linear-gradient(142deg, #123B31 0%, #175944 56%, #34345E 100%);
  }

  .v2-home .nl__card::before {
    width: 178px;
    right: -76px;
    top: -72px;
    border-width: 26px;
  }

  .v2-home .nl__deco {
    display: block;
    width: 174px;
    right: -54px;
    top: 24%;
    opacity: .34;
  }

  .v2-home .nl__body h2 {
    max-width: 310px;
    font-size: 31px !important;
    line-height: 1.04;
  }

  .v2-home .nl__body p {
    max-width: 315px;
    font-size: 14px;
    line-height: 1.6;
  }

  .v2-home .nl__form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 7px;
    border-radius: 14px;
  }

  .v2-home .nl__form .nl__input,
  .v2-home .nl__form .btn {
    width: 100%;
    min-height: 52px;
    font-size: 14px;
  }
}

@media (max-width: 359px) {
  .v2-hdr__bar { height: 60px; }
  .v2-hdr__brand { margin-left: 2px; }
  .v2-hdr__brand .logo__img { max-width: 112px; height: 35px; }
  .v2-hdr__left,
  .v2-hdr__right { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .v2-home .nl__card::before,
  .v2-home .nl__deco {
    animation: none !important;
  }
}

/* ------------------------------------------------------------------
   Touch targets — hit area only, never the painted size.

   A pre-launch audit hit-tested every interactive control at 360/390/430.
   The header's menu / search / cart already clear 44x44 through
   .v2-iconbtn::after, and the drawer links are 43px, so this covers the
   ones that genuinely fell short on a phone. Each grows the tappable
   region with a transparent pseudo-element; no control changes size,
   colour or position, so the card grid and hero art direction are
   untouched.
   ------------------------------------------------------------------ */

/* "Add to cart" is 34px tall on phones (42/46 at the larger breakpoints, which
   already pass). The card body's own bottom padding absorbs the 5px, so
   nothing is clipped by .v2-pc's overflow:hidden. */
.v2-pc__cta { position:relative; }
.v2-pc__cta::after { content:""; position:absolute; inset:-6px 0; }

/* The wishlist heart already had a centred 44x44 expander from .v2-iconbtn,
   but the button sits 8px from the card corner, so .v2-pc { overflow:hidden }
   clipped the half that fell outside. Re-anchoring the same 44x44 region to
   the card corner puts all of it inside the card. */
.v2-pc__wish::after {
  top:-8px; right:-8px; left:auto; bottom:auto;
  transform:none; width:44px; height:44px;
}

/* ═══ src/styles/fashion-banner.css ═══ */
/* Homepage store doorway only. Store interiors keep their own styling. */
.fsb {
  padding-block: clamp(30px, 4vw, 56px);
  background: #f5f0e8;
  color: var(--slv2-ink);
}
.fsb > .v2-wrap { max-width: var(--container-wide, 1440px); }
.fsb__intro { max-width: 850px; margin: 0 auto 32px; text-align: center; }
.fsb__eyebrow {
  margin: 0 0 12px; font-family: var(--slv2-sans); font-size: 10px;
  font-weight: 700; letter-spacing: .19em; text-transform: uppercase; line-height: 1.6; color: #454a3d;
}
.fsb__overline { display: flex; align-items: center; justify-content: center; gap: 20px; font-size: 11px; letter-spacing: .28em; }
.fsb__overline::before, .fsb__overline::after { content: ''; width: 80px; height: 1px; background: #b6afa1; }
.fsb__intro h2 {
  margin: 0 0 12px; font-family: var(--font-display, 'Playfair Display', Georgia, serif);
  font-size: clamp(32px, 3.8vw, 52px); font-weight: 400; line-height: 1.12; letter-spacing: -.02em; color: #242921;
}
.fsb__lede { margin: 0; font-size: 16px; line-height: 1.65; color: #50534b; }

/* ---- The card: one photograph, every word on it ---------------------------------
   The two carousel cards (the Lifestyle banner has its own .fsb-lead rules below).
   The photo fills the card; the copy and the badges both sit on it, over a long
   cream wash that fades to nothing with no stop the eye can find — never a
   panel. A card is a size container, so the carousel cards' type is set in cqw
   and scales with the card. ----------------------------------------------------- */
.fsb__card {
  --fsb-cream: #f6efe3;
  --fsb-wash: linear-gradient(90deg, rgba(246, 239, 227, .9) 0%, rgba(246, 239, 227, .8) 20%, rgba(246, 239, 227, .58) 34%, rgba(246, 239, 227, .3) 47%, rgba(246, 239, 227, .1) 56%, rgba(246, 239, 227, 0) 64%);
  position: relative; isolation: isolate; container-type: inline-size;
  display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; overflow: hidden;
  border-radius: 16px; border: 1px solid #d8cbbb; background: var(--fsb-cream); color: #242921; text-decoration: none;
  box-shadow: 0 5px 18px #513c2610;
  transition: transform 400ms cubic-bezier(.2, .65, .3, 1), box-shadow 400ms ease;
}
.fsb__card:focus-visible { outline: 3px solid var(--slv2-f700); outline-offset: 5px; }
.fsb__art { grid-area: 1 / 1; position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--fsb-cream); }
.fsb__art picture { display: block; width: 100%; height: 100%; }
.fsb__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 450ms ease; }
.fsb__art::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--fsb-wash); }
/* The copy column: the copy at the top, the badges pushed to the bottom of the same column, all on the photo. */
.fsb__content {
  grid-area: 1 / 1; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  width: 52%; min-width: 0; padding: 3.4cqw 0 3cqw 3.4cqw;
}
.fsb__copy { display: block; min-width: 0; }
.fsb__card .fsb__eyebrow { margin-bottom: .9cqw; font-size: clamp(9.5px, 1.9cqw, 12px); line-height: 1.4; }
.fsb__h {
  margin: 0 0 1.2cqw; font-family: var(--font-display, 'Playfair Display', Georgia, serif);
  font-size: min(5.4cqw, 44px); font-weight: 400; line-height: 1.02; letter-spacing: -.02em; color: #20261f;
}
.fsb__h span { display: block; }
.fsb__description { max-width: 38ch; margin: 0 0 1.8cqw; font-size: clamp(12px, 2.5cqw, 17px); line-height: 1.4; color: #3f443b; }
.fsb__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 1.6cqw; min-height: clamp(34px, 6.6cqw, 48px); padding: 1.2cqw 3cqw;
  border-radius: 999px; border: 1px solid var(--slv2-f700); background: var(--slv2-f800); color: #fffdf8;
  font-size: clamp(12.5px, 2.4cqw, 15px); font-weight: 600; line-height: 1.3; white-space: nowrap;
}
.fsb__card--living .fsb__cta { border-color: #ae8b66; background: #fffdf5ed; color: #263529; }
.fsb__cta svg { flex: none; width: clamp(14px, 2.6cqw, 18px); height: clamp(14px, 2.6cqw, 18px); transition: transform 400ms ease; }
/* The badges: soft pills on the photo, carried by the wash where it is busy. */
.fsb__details {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4cqw; width: 100%; max-width: 46cqw;
  list-style: none; margin: auto 0 0; padding: 2.4cqw 0 0;
}
.fsb__details li {
  display: flex; flex-direction: column; align-items: center; gap: .7cqw; padding: 1.2cqw .8cqw; border-radius: 12px;
  background: rgba(251, 248, 241, .58); text-align: center; font-size: clamp(10.5px, 2cqw, 13px); line-height: 1.3; color: #444b3f;
}
.fsb__details svg { box-sizing: content-box; width: clamp(18px, 3.6cqw, 22px); height: clamp(18px, 3.6cqw, 22px); padding: min(1.1cqw, 9px); border-radius: 50%; background: #fffcf1d9; }

/* ---- Part A: the Lifestyle banner, in the women's page's language ---------------
   Full-bleed and square-edged, built like the women's hero: the photograph fills the
   banner and every word sits on it — white uppercase Inter over the sky on the left
   of the wide shot, under a navy fade gone before the subject; on a phone, over a
   fade at the foot of the 3:4 portrait. Nothing beneath the image. The height comes
   from the width (aspect-ratio with a min/max height would cap or force the width). */
.fsb-lead { --fsl-ink: #1d1d1b; background: #6c98cc; color: #fff; }
.fsb-lead__link { position: relative; isolation: isolate; display: flex; align-items: center; height: clamp(460px, 43.75vw, 680px); overflow: hidden; color: inherit; text-decoration: none; }
.fsb-lead__art { position: absolute; inset: 0; z-index: -2; display: block; overflow: hidden; }
.fsb-lead__art picture { display: block; width: 100%; height: 100%; }
.fsb-lead__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 75% 20%; transition: transform .6s ease; }
.fsb-lead__link::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(36, 69, 109, .42) 0%, rgba(36, 69, 109, .3) 20%, rgba(36, 69, 109, .16) 34%, rgba(36, 69, 109, .05) 46%, rgba(36, 69, 109, 0) 56%); }
.fsb-lead__copy { width: min(40%, 470px); margin-left: max(28px, calc((100% - 1240px) / 2)); }
.fsb-lead__eyebrow { margin: 0 0 16px; font-size: 11px; font-weight: 500; line-height: 1.5; letter-spacing: .18em; text-transform: uppercase; color: #fff; }
.fsb-lead__h { margin: 0; font-family: 'Inter', sans-serif; font-size: clamp(40px, 4.6vw, 68px); font-weight: 400; line-height: 1.04; letter-spacing: -.01em; text-transform: uppercase; color: #fff; }
.fsb-lead__h span { display: block; }
.fsb-lead__description { max-width: 340px; margin: 22px 0 28px; font-size: 14px; line-height: 1.65; color: #f5f8fc; }
.fsb-lead__cta { display: inline-flex; align-items: center; gap: 12px; min-height: 46px; padding: 12px 26px; border: 1px solid #fff; background: #fff; color: var(--fsl-ink); font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: .02em; }
.fsb-lead__cta svg { flex: none; transition: transform .3s ease; }
.fsb-lead__link:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }

/* ---- The fashion category strip, directly beneath the banner ----------------------
   Women's and men's tiles in turn; --per tiles in view (the component reads it), the
   track stepping one tile at a time on transform only. Square tiles, square arrows. --- */
.fsb-strip { --fss-ink: #1d1d1b; --fss-muted: #66635d; --fss-soft: #f2f1ee; padding-block: 44px 56px; background: #fff; color: var(--fss-ink); }
.fsb-strip__wrap { width: calc(100% - 56px); max-width: 1240px; margin-inline: auto; }
.fsb-strip__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.fsb-strip__eyebrow { margin: 0 0 8px; font-size: 11px; font-weight: 500; line-height: 1.5; letter-spacing: .18em; text-transform: uppercase; color: var(--fss-muted); }
.fsb-strip__head h2 { margin: 0; font-family: 'Inter', sans-serif; font-size: clamp(22px, 2.3vw, 32px); font-weight: 400; line-height: 1.15; letter-spacing: .05em; text-transform: uppercase; color: var(--fss-ink); }
.fsb-strip__arrows { display: flex; flex: none; gap: 8px; }
.fsb-strip__arrows button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--fss-ink); background: #fff; color: var(--fss-ink); cursor: pointer; }
.fsb-strip__arrows button:disabled { opacity: .3; cursor: default; }
.fsb-strip__viewport { overflow: hidden; touch-action: pan-y; }
.fsb-strip__track { --per: 5; --gap: 16px; display: flex; gap: var(--gap); margin: 0; padding: 0; list-style: none; transform: translateX(calc(var(--i, 0) * -1 * ((100% - (var(--per) - 1) * var(--gap)) / var(--per) + var(--gap)))); transition: transform .5s ease; }
.fsb-strip__tile { flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)); min-width: 0; }
.fsb-strip__tile a { display: grid; gap: 4px; color: inherit; text-decoration: none; }
.fsb-strip__art { display: block; aspect-ratio: 600 / 780; margin-bottom: 8px; overflow: hidden; background: var(--fss-soft); }
.fsb-strip__image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.fsb-strip__dept { font-size: 10px; font-weight: 500; line-height: 1.4; letter-spacing: .18em; text-transform: uppercase; color: var(--fss-muted); }
.fsb-strip__name { font-size: 14px; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; }
.fsb-strip :focus-visible { outline: 2px solid var(--fss-ink); outline-offset: 3px; }

/* ---- Part B: the two store cards as one carousel, visibly smaller than the banner ---
   One slide in view; the track moves on transform only. ------------------------------ */
.fsb__carousel { max-width: min(760px, 68%); margin: 0 auto; }
.fsb__viewport { overflow: hidden; border-radius: 16px; touch-action: pan-y; }
.fsb__track { display: flex; transition: transform .5s ease; }
.fsb__slide { flex: 0 0 100%; min-width: 0; }
.fsb__dots { display: flex; justify-content: center; gap: 8px; margin: 14px 0 0; }
.fsb__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(22, 33, 27, .28); cursor: pointer; }
.fsb__dot.is-on { width: 22px; background: var(--slv2-f700); }

@media (hover: hover) and (pointer: fine) {
  .fsb__card:hover { transform: translateY(-3px); box-shadow: 0 10px 25px #513c2618; }
  .fsb__card:hover .fsb__image { transform: scale(1.025); }
  .fsb__card:hover .fsb__cta svg { transform: translateX(4px); }
  .fsb-lead__link:hover .fsb-lead__image { transform: scale(1.02); }
  .fsb-lead__link:hover .fsb-lead__cta svg { transform: translateX(4px); }
  .fsb-strip__tile a:hover .fsb-strip__image { transform: scale(1.04); }
}
@media (max-width: 1000px) {
  .fsb-strip__track { --per: 3; }
}
@media (max-width: 700px) {
  .fsb-lead__link { align-items: flex-end; height: auto; aspect-ratio: 3 / 4; }
  .fsb-lead__image { object-position: center top; }
  .fsb-lead__link::after { background: linear-gradient(0deg, rgba(20, 31, 48, .8) 0%, rgba(20, 31, 48, .62) 20%, rgba(20, 31, 48, .36) 36%, rgba(20, 31, 48, .12) 48%, rgba(20, 31, 48, 0) 58%); }
  .fsb-lead__copy { width: auto; margin: 0; padding: 0 16px 24px; }
  .fsb-lead__eyebrow { margin-bottom: 10px; }
  .fsb-lead__h { font-size: clamp(32px, 9vw, 40px); }
  .fsb-lead__description { max-width: 32ch; margin: 12px 0 18px; font-size: 13px; line-height: 1.55; }
  .fsb-lead__cta { min-height: 44px; padding: 10px 20px; }
  .fsb-strip { padding-block: 32px 44px; }
  .fsb-strip__wrap { width: calc(100% - 32px); }
  .fsb-strip__head { margin-bottom: 18px; }
  .fsb-strip__head h2 { font-size: 21px; }
  .fsb-strip__arrows button { width: 40px; height: 40px; }
  .fsb-strip__track { --per: 2; --gap: 12px; }
  .fsb-strip__name { font-size: 13px; }
}

/* ---- Under 1024 ------------------------------------------------------------------
   Each carousel card is its 4:5 portrait, the copy in the empty upper-left over a
   wash that fades down from the top, the badges at the foot over a wash that fades
   up from the bottom — one photograph, nothing beneath it. The phone scale is pinned
   by test-store-doorway.mjs: on the 344px carousel cards the copy stack ends above
   45% of the card (the sofa begins there). Do not loosen it here. -------------------- */
@media (max-width: 1023px) {
  .fsb__card {
    --fsb-pad: clamp(18px, 5cqw, 32px);
    --fsb-eyebrow: clamp(10px, 2.8cqw, 12px);
    --fsb-h: clamp(25px, 8.4cqw, 44px);
    --fsb-desc: clamp(13px, 3.8cqw, 17px);
    --fsb-cta: clamp(38px, 11cqw, 48px);
    --fsb-wash: linear-gradient(180deg, rgba(246, 239, 227, .86) 0%, rgba(246, 239, 227, .74) 16%, rgba(246, 239, 227, .52) 32%, rgba(246, 239, 227, .26) 46%, rgba(246, 239, 227, .08) 56%, rgba(246, 239, 227, 0) 64%),
                linear-gradient(0deg, rgba(246, 239, 227, .84) 0%, rgba(246, 239, 227, .66) 10%, rgba(246, 239, 227, .44) 20%, rgba(246, 239, 227, .22) 30%, rgba(246, 239, 227, .06) 38%, rgba(246, 239, 227, 0) 44%);
  }
  /* Every rule here is `.fsb__card .x`: it outranks the cards' own desktop rules (same specificity, later) as well as the base. */
  .fsb__card .fsb__art { aspect-ratio: 4 / 5; }
  .fsb__card .fsb__image { object-position: center; }
  .fsb__card .fsb__content { width: 100%; padding: var(--fsb-pad); }
  .fsb__card .fsb__eyebrow { margin-bottom: 4px; font-size: var(--fsb-eyebrow); letter-spacing: .16em; }
  .fsb__card .fsb__h { margin-bottom: 6px; font-size: var(--fsb-h); }
  .fsb__card .fsb__description { max-width: 30ch; margin-bottom: 8px; font-size: var(--fsb-desc); line-height: 1.45; }
  .fsb__card .fsb__cta { gap: 10px; min-height: var(--fsb-cta); padding: 10px 16px; font-size: 13.5px; }
  .fsb__card .fsb__cta svg { width: 16px; height: 16px; }
  .fsb__card .fsb__details { grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 8px; max-width: none; padding-top: 16px; }
  .fsb__card .fsb__details li { flex-direction: row; align-items: center; gap: 10px; padding: 8px 10px; text-align: left; font-size: 12.5px; line-height: 1.3; }
  .fsb__card .fsb__details svg { width: 18px; height: 18px; padding: 8px; }
  /* Part B on a phone: the same card, inset a little so it reads smaller than the banner. */
  .fsb__carousel { max-width: 96%; }
}
@media (max-width: 599px) {
  .fsb__intro { margin-bottom: 26px; }
  .fsb__overline { font-size: 10px; gap: 12px; }
  .fsb__overline::before, .fsb__overline::after { width: 38px; }
  .fsb__intro h2 { max-width: 12ch; margin-inline: auto; }
  .fsb__lede { max-width: 32ch; margin-inline: auto; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .fsb__card, .fsb__image, .fsb__cta svg, .fsb__track { transition: none; }
  .fsb__card:hover, .fsb__card:hover .fsb__image, .fsb__card:hover .fsb__cta svg { transform: none; }
  .fsb-lead__image, .fsb-lead__cta svg, .fsb-strip__track, .fsb-strip__image { transition: none; }
  .fsb-lead__link:hover .fsb-lead__image, .fsb-lead__link:hover .fsb-lead__cta svg, .fsb-strip__tile a:hover .fsb-strip__image { transform: none; }
}

/* ═══ src/styles/fashion-choice.css ═══ */
/* Loaded with the storefront: the banner chooser also opens outside /fashion. */
.fashion-choice { width: min(960px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 1px solid #e5dacf; border-radius: 16px; color: #241e1a; background: #fbf7f1; box-shadow: 0 30px 100px #0005; overflow: auto; }
.fashion-choice::backdrop { background: #171210b8; backdrop-filter: blur(6px); }
.fashion-choice__inner { padding: 44px 30px 26px; position: relative; }
.fashion-choice__close { position: absolute; top: 10px; right: 10px; width: 42px; height: 42px; display: grid; place-items: center; background: transparent; border: 0; color: #332921; cursor: pointer; }
.fashion-choice__eyebrow { margin: 0 0 12px; color: #795942; font: 600 11px/1.5 'Inter', sans-serif; text-transform: uppercase; letter-spacing: .2em; text-align: center; }
.fashion-choice h2 { margin: 0; font: 400 clamp(26px, 4vw, 42px)/1.15 var(--font-display, Georgia, serif); text-align: center; }
.fashion-choice__intro { margin: 12px 0 26px; text-align: center; font: 400 14px/1.5 'Inter', sans-serif; color: #74645a; }
.fashion-choice__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fashion-choice__card { position: relative; display: block; aspect-ratio: 3/4; overflow: hidden; isolation: isolate; border-radius: 8px; text-decoration: none; background: #292825; color: #fff; }
.fashion-choice__card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #18120fef 0%, #18120f80 28%, transparent 65%); z-index: -1; }
.fashion-choice__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .4s ease; }
.fashion-choice__card > span { position: absolute; bottom: 22px; inset-inline: 18px; display: grid; gap: 8px; }
.fashion-choice__card small { font: 500 9px/1.4 'Inter', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #eee0d6; }
.fashion-choice__card strong { display: flex; align-items: center; justify-content: space-between; gap: 6px; font: 400 clamp(20px, 2.4vw, 29px)/1.15 var(--font-display, Georgia, serif); color: #fff; }
.fashion-choice__card em { font: normal 11px/1.4 'Inter', sans-serif; color: #ede3dd; }
.fashion-choice__card--women::after { background: linear-gradient(0deg, #38172ff5, #38172f70 35%, transparent 70%); }
.fashion-choice__card--kids { background: #cfba98; }
.fashion-choice__card--kids img { filter: saturate(.5); }
.fashion-choice__card--kids em { width: fit-content; padding: 5px 10px; border: 1px solid #ffffff70; border-radius: 30px; }
.fashion-choice__all { width: fit-content; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin: 18px auto 0; color: #5b4636; font: 600 12px/1.4 'Inter', sans-serif; text-underline-offset: 4px; }
.fashion-choice :focus-visible { outline: 2px solid #a7753d; outline-offset: 4px; }
@media (hover: hover) { .fashion-choice__card[href]:hover img { transform: scale(1.045); } }
@media (max-width: 600px) {
  .fashion-choice__inner { padding: 46px 18px 16px; }
  .fashion-choice__grid { grid-template-columns: 1fr; gap: 10px; }
  .fashion-choice__card { aspect-ratio: auto; min-height: 132px; }
  .fashion-choice__card img { width: 46%; left: auto; object-position: center 35%; }
  .fashion-choice__card::after { background: linear-gradient(90deg, #211e1b 20%, #211e1bc9 58%, transparent 90%); }
  .fashion-choice__card--women::after { background: linear-gradient(90deg, #3b2134 20%, #3b2134ba 58%, transparent 90%); }
  .fashion-choice__card--kids::after { background: linear-gradient(90deg, #6c553c 20%, #6c553cc4 58%, transparent 90%); }
  .fashion-choice__card > span { inset: 22px auto 20px 18px; width: 62%; align-content: center; }
  .fashion-choice__card strong { font-size: 23px; }
  .fashion-choice__intro { margin-bottom: 20px; }
}
.fashion-choice__card--men img { object-position: 75% center; }
@media (prefers-reduced-motion: reduce) { .fashion-choice__card img { transition: none; transform: none !important; } }

/* ═══ src/styles/storefront-sections.css ═══ */
/* ============================================================
   Storefront sections an admin edits (Storefronts in the admin; storefrontContent.js).

   Two settings change how a section looks, never what it is:
     data-pos   the copy's place over its photograph, from presets — left (built in, no
                attribute), centre, right. Wide screens only: on a phone each section keeps
                the layout it was designed with.
     data-tone  the background colour matched to a photograph the admin replaced, set with
                it (--sf-tone). Where a section's photograph fades into its background, the
                fade takes the same colour; on a dark one (data-tone-dark) the copy turns light.
     data-count / data-without  a row with items hidden closes up (set only when some are).
   With nothing published no element carries these attributes, so no rule here matches and
   every page is exactly as it was. Every selector is scoped to its section's own class.
   ============================================================ */

/* ---- Wellness homepage: the hero ---------------------------------------- */
.hx .hx-hero__slide[data-tone] { background: var(--sf-tone); }
@media (min-width: 701px) {
  .hx-hero__slide[data-pos="right"] .hx-hero__image { right: auto; left: 0; -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 14%); mask-image: linear-gradient(270deg, transparent 0, #000 14%); }
  .hx-hero__slide[data-pos] .hx-hero__copy { display: grid; }
  .hx-hero__slide[data-pos="right"] .hx-hero__copy { justify-content: end; }
  .hx-hero__slide[data-pos="center"] .hx-hero__copy { justify-content: center; text-align: center; }
  .hx-hero__slide[data-pos] .hx-hero__copy > *, .hx-hero__slide[data-pos] .hx-hero__copy > .hx-hero__title { max-width: min(520px, 44vw); justify-self: start; }
  .hx-hero__slide[data-pos="center"] .hx-hero__copy > *, .hx-hero__slide[data-pos="center"] .hx-hero__copy > .hx-hero__title { max-width: min(640px, 70vw); justify-self: center; }
  .hx-hero__slide[data-pos="center"] .hx-hero__image { left: 0; right: 0; width: 100%; object-fit: cover; -webkit-mask-image: none; mask-image: none; }
  .hx-hero__slide[data-pos="center"]::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--sf-tone, #FDFBF8) 72%, transparent) 0%, transparent 72%); }
}

/* ---- Wellness homepage: the trust strip ---------------------------------------- */
/* Fewer than four items: even columns for those left (data-count is set only then). */
.hx-trust__list[data-count] { grid-template-columns: repeat(var(--hx-trust-n), minmax(0, 1fr)); }

/* ---- Wellness homepage: the three store tiles ------------------------------------ */
.hx-tile--fashion[data-tone], .hx-tile--small[data-tone] { background: var(--sf-tone); }
.hx-tile[data-tone-dark] .hx-tile__h { color: #fff; }
.hx-tile--small[data-tone-dark] .hx-tile__go { border-color: #fff; color: #fff; }
/* A hidden tile's place is closed up (data-without names the hidden ones). */
.hx-tiles__grid[data-without~="fashion"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(208px, auto); }
.hx-tiles__grid[data-without~="nutrition"] .hx-tile--small, .hx-tiles__grid[data-without~="living"] .hx-tile--small { grid-row: 1 / 3; }
.hx-tiles__grid[data-without~="fashion"] .hx-tile--small { grid-row: auto; }
.hx-tiles__grid[data-without~="fashion"][data-without~="nutrition"], .hx-tiles__grid[data-without~="fashion"][data-without~="living"], .hx-tiles__grid[data-without~="nutrition"][data-without~="living"] { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 700px) {
  .hx-tiles__grid[data-without~="fashion"] { grid-template-rows: clamp(72px, 19.5vw, 140px); }
}

/* ---- Wellness homepage: the store circles ---------------------------------------- */
.hx-store__art[data-tone] { background: var(--sf-tone); }
/* Fewer than six circles: even columns for those left (data-count is set only then). */
.hx-stores__row[data-count] { grid-template-columns: repeat(var(--hx-stores-n), minmax(0, 1fr)); }

/* ---- Wellness homepage: the festive promo (its copy is centred when built in) ------- */
@media (min-width: 701px) {
  .hx-promo[data-pos="left"] .hx-promo__card { justify-content: flex-start; text-align: left; }
  .hx-promo[data-pos="left"] .hx-promo__copy { justify-items: start; margin-left: 4%; }
  .hx-promo[data-pos="right"] .hx-promo__card { justify-content: flex-end; text-align: left; }
  .hx-promo[data-pos="right"] .hx-promo__copy { justify-items: start; margin-right: 4%; }
}

/* ---- Wellness homepage: the Lifestyle banner -------------------------------- */
@media (min-width: 701px) {
  .fsb-lead[data-pos="right"] .fsb-lead__copy { margin-left: auto; margin-right: max(28px, calc((100% - 1240px) / 2)); }
  .fsb-lead[data-pos="right"] .fsb-lead__image { object-position: 25% 20%; }
  .fsb-lead[data-pos="right"] .fsb-lead__link::after { background: linear-gradient(270deg, rgba(36, 69, 109, .42) 0%, rgba(36, 69, 109, .3) 20%, rgba(36, 69, 109, .16) 34%, rgba(36, 69, 109, .05) 46%, rgba(36, 69, 109, 0) 56%); }
  .fsb-lead[data-pos="center"] .fsb-lead__copy { width: min(60%, 640px); margin-inline: auto; text-align: center; }
  .fsb-lead[data-pos="center"] .fsb-lead__description { margin-inline: auto; }
  .fsb-lead[data-pos="center"] .fsb-lead__image { object-position: center 20%; }
  .fsb-lead[data-pos="center"] .fsb-lead__link::after { background: radial-gradient(ellipse at center, rgba(36, 69, 109, .44) 0%, rgba(36, 69, 109, .18) 45%, rgba(36, 69, 109, 0) 75%); }
}

/* ---- Wellness homepage: the jewellery banner -------------------------------- */
@media (min-width: 701px) {
  .hx-jewel[data-pos="right"] .hx-jewel__copy { margin-left: auto; margin-right: max(28px, calc((100% - 1240px) / 2)); }
  .hx-jewel[data-pos="right"] .hx-jewel__image { object-position: left center; }
  .hx-jewel[data-pos="center"] .hx-jewel__copy { width: min(60%, 640px); margin-inline: auto; text-align: center; }
  .hx-jewel[data-pos="center"] .hx-jewel__text { margin-inline: auto; }
  .hx-jewel[data-pos="center"] .hx-jewel__image { object-position: center; }
}

/* ---- Fashion: the women's hero ---------------------------------------------- */
@media (min-width: 701px) {
  .wm-hero[data-pos="right"] .wm-hero__copy { margin-left: auto; margin-right: max(28px, calc((100% - 1240px) / 2)); }
  .wm-hero[data-pos="right"] .wm-hero__art img { object-position: 30% 15%; }
  .wm-hero[data-pos="right"]::after { background: linear-gradient(270deg, #24456d61, transparent 52%), linear-gradient(180deg, #1b2c4552, transparent 24%); }
  .wm-hero[data-pos="center"] .wm-hero__copy { width: min(60%, 640px); margin-inline: auto; text-align: center; }
  .wm-hero[data-pos="center"] .wm-hero__intro { margin-inline: auto; }
  .wm-hero[data-pos="center"] .wm-hero__art img { object-position: center 15%; }
  .wm-hero[data-pos="center"]::after { background: radial-gradient(ellipse at center, #24456d66 0%, #24456d22 45%, transparent 75%), linear-gradient(180deg, #1b2c4552, transparent 24%); }
}

/* ---- Fashion: the men's hero ------------------------------------------------- */
@media (min-width: 601px) {
  .fd-hero[data-pos="right"] .fd-hero__photo { inset: 0 38% 0 0; }
  .fd-hero[data-pos="right"]::before { background: linear-gradient(270deg, #eeeae3 0%, #eeeae3 32%, #eeeae3ad 44%, #eeeae300 65%); }
  .fd-hero[data-pos="right"] .fd-hero__copy { justify-self: end; }
  .fd-hero[data-pos="right"] .fd-hero__edition { left: auto; right: 48px; }
  .fd-hero[data-pos="right"] .fd-hero__number { right: auto; left: 30px; }
  .fd-hero[data-pos="center"] .fd-hero__photo { inset: 0; }
  .fd-hero[data-pos="center"]::before { background: radial-gradient(ellipse at center, #eeeae3eb 0%, #eeeae3b0 45%, #eeeae300 78%); }
  .fd-hero[data-pos="center"] .fd-hero__copy { justify-self: center; text-align: center; }
  .fd-hero[data-pos="center"] .fd-hero__intro { margin-inline: auto; }
}

/* ---- Fashion: the saree hero ------------------------------------------------- */
@media (min-width: 701px) {
  .sw-hero[data-pos="right"] .sw-hero__copy { margin-left: auto; margin-right: max(28px, calc((100% - 1160px) / 2)); }
  .sw-hero[data-pos="right"]::after { background: linear-gradient(270deg, #1814113b, transparent 63%), linear-gradient(180deg, #1613116b, transparent 24%); }
  .sw-hero[data-pos="center"] .sw-hero__copy { width: min(60%, 640px); margin-inline: auto; text-align: center; }
  .sw-hero[data-pos="center"] .sw-hero__intro { margin-inline: auto; }
  .sw-hero[data-pos="center"]::after { background: radial-gradient(ellipse at center, #18141166 0%, #18141122 50%, transparent 78%), linear-gradient(180deg, #1613116b, transparent 24%); }
}

/* ---- Fashion: the jewellery page's hero -------------------------------------- */
/* A replaced photograph also replaces the blurred copy of it behind the copy. */
.jw-hero[data-art]::before { background-image: var(--jw-hero-art); }
@media (min-width: 701px) {
  .jw-hero[data-pos="right"] .jw-hero__art { right: auto; left: 0; -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 36%); mask-image: linear-gradient(270deg, transparent 0, #000 36%); }
  .jw-hero[data-pos="right"]::after { background: linear-gradient(180deg, #0c020373 0%, #0c020300 26%), linear-gradient(270deg, #0c0203a6 0%, #0c020359 42%, transparent 66%); }
  .jw-hero[data-pos] .jw-hero__copy { display: grid; padding-left: 0; }
  .jw-hero[data-pos="right"] .jw-hero__copy { justify-content: end; padding-right: clamp(0px, 6.25vw, 90px); }
  .jw-hero[data-pos="right"] .jw-hero__copy > * { justify-self: start; }
  .jw-hero[data-pos="center"] .jw-hero__art { left: 0; width: 100%; -webkit-mask-image: none; mask-image: none; }
  .jw-hero[data-pos="center"]::after { background: linear-gradient(180deg, #0c020373 0%, #0c020300 26%), radial-gradient(ellipse at center, #0c0203a6 0%, #0c020340 48%, transparent 78%); }
  .jw-hero[data-pos="center"] .jw-hero__copy { justify-content: center; text-align: center; }
  .jw-hero[data-pos="center"] .jw-hero__copy > * { justify-self: center; }
  .jw-hero[data-pos="center"] .jw-hero__intro { margin-inline: auto; }
}

/* ---- Home & Living: the hero and the promo ----------------------------------- */
.hl-hero__slide[data-tone] { background: var(--sf-tone); }
.hl-hero__slide[data-tone]::before { background: linear-gradient(90deg, color-mix(in srgb, var(--sf-tone) 50%, transparent) 0%, color-mix(in srgb, var(--sf-tone) 42%, transparent) 28%, transparent 50%); }
.hl-promo[data-tone] { background: var(--sf-tone); }
.hl-promo[data-tone] .hl-promo__art::after { background: linear-gradient(90deg, transparent 70%, var(--sf-tone) 100%); }
@media (min-width: 768px) {
  .hl-hero__slide[data-pos="right"] .hl-hero__txt { margin-left: auto; }
  .hl-hero__slide[data-pos="right"]::before { background: linear-gradient(270deg, rgba(251, 248, 241, .5) 0%, rgba(251, 248, 241, .42) 28%, rgba(251, 248, 241, 0) 50%); }
  .hl-hero__slide[data-pos="right"][data-tone]::before { background: linear-gradient(270deg, color-mix(in srgb, var(--sf-tone) 50%, transparent) 0%, color-mix(in srgb, var(--sf-tone) 42%, transparent) 28%, transparent 50%); }
  .hl-hero__slide[data-pos="center"] .hl-hero__txt { max-width: 56%; margin-inline: auto; text-align: center; }
  .hl-hero__slide[data-pos="center"]::before { background: radial-gradient(ellipse at center, rgba(251, 248, 241, .62) 0%, rgba(251, 248, 241, .3) 45%, rgba(251, 248, 241, 0) 75%); }
  .hl-hero__slide[data-pos="center"][data-tone]::before { background: radial-gradient(ellipse at center, color-mix(in srgb, var(--sf-tone) 62%, transparent) 0%, color-mix(in srgb, var(--sf-tone) 30%, transparent) 45%, transparent 75%); }
}
@media (max-width: 767px) {
  .hl-hero__slide[data-tone]::before { background: linear-gradient(180deg, color-mix(in srgb, var(--sf-tone) 8%, transparent) 0%, color-mix(in srgb, var(--sf-tone) 20%, transparent) 38%, transparent 68%); }
  .hl-hero__slide[data-tone] .hl-hero__txt::before { background: linear-gradient(100deg, color-mix(in srgb, var(--sf-tone) 56%, transparent) 0%, color-mix(in srgb, var(--sf-tone) 40%, transparent) 55%, transparent 100%); }
}

/* ---- Grocery: the hero and the promo ------------------------------------------ */
.gs-hero__slide[data-tone] { background: var(--sf-tone); }
.gs-hero__slide[data-tone]::before { background: linear-gradient(90deg, color-mix(in srgb, var(--sf-tone) 92%, transparent) 0%, color-mix(in srgb, var(--sf-tone) 62%, transparent) 40%, transparent 62%); }
.gs-promo[data-tone] { background: var(--sf-tone); }
@media (min-width: 600px) {
  .gs-hero__slide[data-pos="right"] .gs-hero__txt { margin-left: auto; }
  .gs-hero__slide[data-pos="right"]::before { background: linear-gradient(270deg, rgba(251, 248, 241, .92) 0%, rgba(251, 248, 241, .62) 40%, rgba(251, 248, 241, 0) 62%); }
  .gs-hero__slide[data-pos="right"][data-tone]::before { background: linear-gradient(270deg, color-mix(in srgb, var(--sf-tone) 92%, transparent) 0%, color-mix(in srgb, var(--sf-tone) 62%, transparent) 40%, transparent 62%); }
  .gs-hero__slide[data-pos="right"] .gs-hero__note { right: auto; left: 40px; text-align: left; }
  .gs-hero__slide[data-pos="center"] .gs-hero__txt { max-width: 60%; margin-inline: auto; text-align: center; }
  .gs-hero__slide[data-pos="center"]::before { background: radial-gradient(ellipse at center, rgba(251, 248, 241, .9) 0%, rgba(251, 248, 241, .55) 45%, rgba(251, 248, 241, 0) 78%); }
  .gs-hero__slide[data-pos="center"][data-tone]::before { background: radial-gradient(ellipse at center, color-mix(in srgb, var(--sf-tone) 90%, transparent) 0%, color-mix(in srgb, var(--sf-tone) 55%, transparent) 45%, transparent 78%); }
}
@media (max-width: 599px) {
  .gs-hero__slide[data-tone]::before { background: linear-gradient(180deg, color-mix(in srgb, var(--sf-tone) 94%, transparent) 0%, color-mix(in srgb, var(--sf-tone) 80%, transparent) 42%, color-mix(in srgb, var(--sf-tone) 10%, transparent) 100%); }
}