/* =========================================================
   Benton Sans Wide — self-hosted (public/fonts/benton-sans-wide)
   Paths are relative to this stylesheet (css/style.css) so they
   resolve correctly regardless of how the site is mounted.
   ========================================================= */
@font-face {
  font-family: "Benton Sans Wide";
  src: url("../public/fonts/benton-sans-wide/benton-sans-wide-extralight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Benton Sans Wide";
  src: url("../public/fonts/benton-sans-wide/benton-sans-wide-book.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Benton Sans Wide";
  src: url("../public/fonts/benton-sans-wide/benton-sans-wide-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Benton Sans Wide";
  src: url("../public/fonts/benton-sans-wide/benton-sans-wide-medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Benton Sans Wide";
  src: url("../public/fonts/benton-sans-wide/benton-sans-wide-bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Benton Sans Wide";
  src: url("../public/fonts/benton-sans-wide/benton-sans-wide-black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   GESS — self-hosted Arabic type (public/fonts/*.otf)
   ---------------------------------------------------------
   The two OTFs advertise the internal family names
     GESSLight.otf → "GE SS Text Light"
     GESSBold.otf  → "GE SS Text Bold"
   (Verified by parsing the font's `name` table.) In theory
   an `@font-face { font-family: "GESS" }` alias is
   authoritative and the internal name is irrelevant — but
   for COMPLEX SCRIPTS like Arabic, the browser sometimes
   hands text-shaping off to the OS shaper (HarfBuzz on
   Chromium, CoreText on macOS, DirectWrite on Windows).
   Those shapers can match fonts by their internal name,
   and if the alias-only path fails they silently fall back
   to the system Arabic font (Tahoma / Segoe UI Arabic /
   Geeza Pro), producing exactly the "font not rendering"
   symptom this comment exists to prevent.

   Fix: declare BOTH the friendly alias ("GESS") AND the
   exact internal names ("GE SS Text Light" / "GE SS Text
   Bold") as separate @font-face rules pointing at the same
   .otf file. Then the CSS variable stack lists both names,
   so whichever lookup path the shaper takes finds a hit.

   Weight ranges use CSS Fonts Level 4 descriptors so the
   two masters (Light + Bold) cover the full 100–900 scale
   without any per-selector font-weight rewrites:
     • Light face covers 100 – 500 (Thin → Medium)
     • Bold  face covers 600 – 900 (Semibold → Black)

   Path notes:
     • URLs are RELATIVE TO THIS STYLESHEET (css/style.css),
       so `../public/fonts/` walks up to project root and
       into the fonts folder.
     • The `?v=2` cache-buster forces browsers to re-fetch
       past any stale (possibly 404) cached response from
       an earlier session. Bump again if you replace the
       .otf files.
     • `local(...)` hints are intentionally OMITTED — if a
       user has an unrelated font by the same name installed
       system-wide, local() would shadow our web font with
       potentially different glyph coverage.
     • Corresponding `<link rel="preload">` tags on every
       HTML page load the fonts in parallel with the CSS.
       Preload URLs MUST match these @font-face URLs exactly
       (query string included) so the preload cache feeds
       the @font-face request instead of double-fetching.
   ========================================================= */

/* --- Alias name "GESS" (short, used throughout the codebase).

   Firefox-specific compatibility: Firefox's OpenType Sanitizer (OTS)
   is stricter than Chrome's. Certain OTF files (particularly some
   Linotype/Monotype Arabic fonts, GESS included) pass Chrome's
   validation but fail Firefox's OTS silently — no console error,
   just a silent fallback to the OS default Arabic font, producing
   the "font not rendering" symptom. We mitigate that with:
     1. Multiple `src` entries including a `local()` fallback so the
        browser tries an installed copy first (if the user has GESS
        installed system-wide, Firefox will happily use it instead
        of parsing the OTF).
     2. Two `url()` src entries: one with `format("opentype")` and
        one WITHOUT any format hint. Firefox is more permissive when
        no format hint is provided — it sniffs the file magic bytes
        instead of gating on the (sometimes-fussy) format string.
     3. Noto Naskh Arabic (a Google Font with reliable cross-browser
        Arabic rendering) is added to the RTL font stack further
        below as a fallback, so users still see a beautiful
        traditional Naskh Arabic font instead of the OS default if
        Firefox silently rejects GESS.

   Cache-buster: v=4 (bump on font file replacement). --- */
@font-face {
  font-family: "GESS";
  src: local("GE SS Text Light"),
       local("GESSTextLight"),
       local("GESSLight"),
       url("../public/fonts/GESSLight.otf?v=4") format("opentype"),
       url("../public/fonts/GESSLight.otf?v=4");
  font-weight: 100 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GESS";
  src: local("GE SS Text Bold"),
       local("GESSTextBold"),
       local("GESSBold"),
       url("../public/fonts/GESSBold.otf?v=4") format("opentype"),
       url("../public/fonts/GESSBold.otf?v=4");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

/* --- Font's actual internal family names — pointing at the SAME
   .otf files. Necessary so the OS text shaper (used for Arabic)
   can locate the font by its authoritative identity. --- */
@font-face {
  font-family: "GE SS Text Light";
  src: local("GE SS Text Light"),
       local("GESSTextLight"),
       url("../public/fonts/GESSLight.otf?v=4") format("opentype"),
       url("../public/fonts/GESSLight.otf?v=4");
  font-weight: 100 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GE SS Text Bold";
  src: local("GE SS Text Bold"),
       local("GESSTextBold"),
       url("../public/fonts/GESSBold.otf?v=4") format("opentype"),
       url("../public/fonts/GESSBold.otf?v=4");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #ffffff;
  --white: #ffffff;
  --secondary: #e8d7bb;
  --ink: #111111;
  --black: #111111;
  --gray: #7a736c;
  --muted: #7a736c;
  --line: #d8c9ad;
  --accent: #a7604a;
  --home-h2: clamp(1.75rem, 3vw, 2.45rem);

  /* Canonical brand font token. Use --font-benton-sans-wide in all new code. */
  --font-benton-sans-wide: "Benton Sans Wide", sans-serif;
  /* Arabic counterpart — swapped in via [dir="rtl"] / [lang="ar"] below.
     Layered fallback stack so SOMETHING always renders correctly no
     matter what fails. Each tier is a distinct safety net:

       1. "GESS"              — friendly alias, used throughout the app
       2. "GE SS Text Light"  — GESS internal Light family name (some
       3. "GE SS Text Bold"     OS complex-script shapers match by
                                internal name rather than @font-face
                                alias for Arabic)

       ──── Web-font fallback (from Google Fonts CDN) ────
       4. "Noto Naskh Arabic" — Loaded on every page via <link>. Only
                                activates if GESS tiers 1-3 all fail
                                (e.g. Firefox OTS silently rejects the
                                OTF). Traditional Naskh calligraphic
                                style suits the luxury perfumery brand.
                                See https://fonts.google.com/noto/specimen/Noto+Naskh+Arabic

       ──── System-installed Arabic fonts (offline safety net) ────
                                Used when the Google Fonts CDN is
                                unreachable (corporate firewall, ad-
                                blocker, offline dev environment, CSP).
                                Every major OS ships with at least one:
       5. "Segoe UI Arabic"   — Windows 8+
       6. "Segoe UI"          — Windows (has Arabic glyph coverage
                                via linked-font mechanism)
       7. "Geeza Pro"         — macOS / iOS system Arabic
       8. "Damascus"          — macOS fallback Arabic
       9. "Noto Sans Arabic"  — Android / most Linux distros
      10. "Tahoma"            — Older Windows fallback
      11. "Arabic UI Text"    — iOS 13+ system Arabic

       ──── Final generic fallback ────
      12. "Benton Sans Wide"  — Latin glyphs in mixed-script Arabic
                                strings (brand names, numerals)
      13. sans-serif          — generic Arabic if all above fail */
  --font-gess-arabic:
    "GESS",
    "GE SS Text Light",
    "GE SS Text Bold",
    "Noto Naskh Arabic",
    "Segoe UI Arabic",
    "Segoe UI",
    "Geeza Pro",
    "Damascus",
    "Noto Sans Arabic",
    "Tahoma",
    "Arabic UI Text",
    "Benton Sans Wide",
    sans-serif;
  /* Legacy alias — kept so the ~150 existing `var(--font-geist-sans)` references
     resolve to Benton Sans Wide without a project-wide rename. Do not remove.
     When the app switches to Arabic (see [dir="rtl"] override further below),
     this alias is re-pointed to --font-gess-arabic so every existing rule
     picks up the correct family automatically — zero repo-wide font renames. */
  --font-geist-sans: var(--font-benton-sans-wide);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pad: clamp(22px, 5vw, 64px);
  /* Unified horizontal rail used by nav, footer, and product page sections.
     Matches the nav bar's left/right offset so every section aligns edge-to-edge
     with the header/footer on every viewport. */
  --section-pad: max(20px, 4vw);
  /* Content max-width used by product page sections + footer inner grid.
     Wider than the legacy 1440px cap so 1600–2560px viewports actually fill,
     but capped so 4K screens don't stretch cards into billboards. */
  --section-max: 1720px;
}

/* =========================================================
   Font utility classes (Benton Sans Wide)
   .font-geistSans is aliased for backward compatibility with
   existing `<body class="font-geistSans">` markup.
   ========================================================= */
.font-benton,
.font-geistSans {
  font-family: var(--font-benton-sans-wide);
}

.font-benton-extralight { font-weight: 200; }
.font-benton-book       { font-weight: 300; }
.font-benton-regular    { font-weight: 400; }
.font-benton-medium     { font-weight: 500; }
.font-benton-bold       { font-weight: 700; }
.font-benton-black      { font-weight: 900; }

/* =========================================================
   LOCALIZATION — Arabic (ar) / RTL
   ---------------------------------------------------------
   Activated by js/i18n.js which sets:
     <html lang="ar" dir="rtl">
   All rules are additive; English (lang="en" dir="ltr") is
   the default and stays 100% identical to the pre-locale
   baseline. Nothing here changes desktop / tablet / mobile
   breakpoints — RTL simply mirrors the horizontal axis via
   `transform: scaleX(-1)` on decorative arrows and targeted
   overrides on layout components that use physical
   properties (padding-left, margin-right, translateX, etc.).
   ========================================================= */
html[lang="ar"],
[dir="rtl"] {
  /* Repoint the legacy font alias so every existing
     `var(--font-geist-sans)` reference (~150 sites) picks up
     GESS automatically — no per-selector rename. */
  --font-geist-sans: var(--font-gess-arabic);
  --font-benton-sans-wide: var(--font-gess-arabic);
}

/* ─────────────────────────────────────────────────────────────
   NUCLEAR FONT-FAMILY OVERRIDE — Arabic mode only
   ─────────────────────────────────────────────────────────────
   The variable redirect above (`--font-benton-sans-wide` →
   `--font-gess-arabic`) SHOULD cover 100% of the app because
   every hand-written `font-family` in the codebase routes
   through one of those variables. But the cascade can break
   down for elements that:
     • have an inline `style="font-family: ..."`
     • are dynamically injected by a third-party lib
     • inherit from a form control that the UA styles with
       its own default font-family (this is common for
       <input>, <textarea>, <select>, <button>)
     • are inside a shadow root that doesn't inherit CSS vars

   This block guarantees that EVERY text-carrying element in
   RTL mode uses the GESS stack, at maximum specificity and
   with `!important` so nothing downstream can override it.

   The stack lists BOTH the friendly alias ("GESS") AND the
   two font-internal names ("GE SS Text Light" / "GE SS Text
   Bold") because the OS complex-script shaper (HarfBuzz on
   Chromium, DirectWrite on Windows) matches by internal
   name for Arabic — see comment on the @font-face block.
   Weight matching between Light (100-500) and Bold (600-900)
   is still handled automatically by the range descriptors
   on the @font-face rules.

   Deliberately excludes emoji-carrying elements from the
   override so the emoji stack (Apple Color Emoji / Segoe UI
   Emoji / Noto Color Emoji) still wins for those glyphs.
   ───────────────────────────────────────────────────────── */
[dir="rtl"] body,
[dir="rtl"] main,
[dir="rtl"] section,
[dir="rtl"] header,
[dir="rtl"] footer,
[dir="rtl"] nav,
[dir="rtl"] article,
[dir="rtl"] aside,
[dir="rtl"] div,
[dir="rtl"] p,
[dir="rtl"] span,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6,
[dir="rtl"] a,
[dir="rtl"] li,
[dir="rtl"] ol,
[dir="rtl"] ul,
[dir="rtl"] button,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select,
[dir="rtl"] option,
[dir="rtl"] label,
[dir="rtl"] small,
[dir="rtl"] em,
[dir="rtl"] strong,
[dir="rtl"] b,
[dir="rtl"] i,
[dir="rtl"] blockquote,
[dir="rtl"] figcaption,
[dir="rtl"] figure,
[dir="rtl"] th,
[dir="rtl"] td,
[dir="rtl"] dt,
[dir="rtl"] dd,
[dir="rtl"] time,
[dir="rtl"] mark {
  /* Full layered stack — see comment on --font-gess-arabic above for
     tier-by-tier rationale. Mirrored here (rather than referenced via
     var()) so the !important precedence is unambiguous under all
     browsers' cascade resolution. */
  font-family:
    "GESS",
    "GE SS Text Light",
    "GE SS Text Bold",
    "Noto Naskh Arabic",
    "Segoe UI Arabic",
    "Segoe UI",
    "Geeza Pro",
    "Damascus",
    "Noto Sans Arabic",
    "Tahoma",
    "Arabic UI Text",
    "Benton Sans Wide",
    sans-serif !important;
}

/* Root direction — driving <html dir="rtl"> flips text alignment
   and inline-flow direction across every element with a logical
   default. Explicit `text-align` / `float` overrides below. */
[dir="rtl"] body {
  direction: rtl;
  text-align: right;
}

/* Arabic type sits slightly higher than Latin — nudge line-height up
   a hair so descenders don't crowd the baseline in headings, and let
   letter-spacing collapse (tracking is a Latin-typography idiom that
   makes Arabic marks look disconnected). */
[dir="rtl"] {
  letter-spacing: 0 !important;
}
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4 {
  line-height: 1.15;
}

/* Numeric indices, prices, dates, badges — force LTR inside RTL text
   so "01 · Signature", "$128", or "2026" render left-to-right (per
   Unicode BiDi convention for Arabic-embedded Latin/numerics). Any
   element carrying [data-ltr] opts in explicitly. */
[dir="rtl"] [data-ltr],
[dir="rtl"] .foot__idx,
[dir="rtl"] .pyramid__idx,
[dir="rtl"] .fam__idx,
[dir="rtl"] .card__price,
[dir="rtl"] .pcard__price,
[dir="rtl"] .rcard__price,
[dir="rtl"] .cline__price,
[dir="rtl"] .cart__totals dd,
[dir="rtl"] .pdp__price,
[dir="rtl"] #cartCount,
[dir="rtl"] [data-cart-count],
[dir="rtl"] .loader__count,
[dir="rtl"] .hgallery__meter,
[dir="rtl"] .foot__copy {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Mirror decorative arrow glyphs so ↗ / → visually point into the
   reading direction. Applies only to elements marked as visual
   arrows so text-embedded arrows (e.g. crumb "→") also flip. */
[dir="rtl"] .arrow,
[dir="rtl"] .crumbs i,
[dir="rtl"] .foot__select-caret svg,
[dir="rtl"] .fam__go b,
[dir="rtl"] .card__go,
[dir="rtl"] .btn__ic {
  transform: scaleX(-1);
}

/* Nav — the actions cluster (search / bag / burger) sits on the
   right in LTR; mirror it to the left in RTL, keeping the brand
   mark on the reading-start side. Because the .nav is flex, natural
   RTL direction already reverses the order — we just null out any
   physical margin overrides used in the mobile refinements. */
[dir="rtl"] .nav {
  direction: rtl;
}

/* Marquee — infinite Latin text runs LTR by nature. When the app
   is Arabic, the JS driver (main.js initMarquee) reverses the base
   speed and re-mirrors, but the CSS wrapper also needs to flip so
   the visible transform axis is stable. */
[dir="rtl"] .mrq {
  direction: ltr;
}

/* Marquee display type in Arabic mode — drop from font-weight 600
   (which maps to GESS Bold via the @font-face weight range 600-900)
   down to 500 (Medium). Rationale: Arabic display glyphs are
   visually heavier than their Latin counterparts at the same weight
   because of the horizontal baseline strokes, so keeping the marquee
   at Bold in Arabic creates a "shouting" feel that clashes with the
   editorial tone. Medium reads as elegant — closer to the
   perceived visual weight the Latin marquee has at Bold.

   Weight-to-face mapping in Arabic mode:
     • GESS (if rendered)         → weight 500 lands in the Light
                                     face's range (100-500)
     • Noto Naskh Arabic          → true Medium (500) master
     • Segoe UI Arabic / Geeza    → true Medium (500) master
   All three produce a visually consistent "medium" weight. */
[dir="rtl"] .mrq__word {
  font-weight: 500;
}

/* Horizontal editorial gallery — sticky pin with translateX scroll.
   The JS driver handles the physical direction; keep the track
   internal ltr so image sequence order stays intuitive left-to-right
   (like a filmstrip), regardless of doc direction. */
[dir="rtl"] .hgallery,
[dir="rtl"] .hgallery__track {
  direction: ltr;
}
/* Text inside the hgallery MUST read RTL in Arabic even though the
   parent .hgallery / .hgallery__track are forced ltr for the horizontal
   filmstrip flow (see rules above). Set both `direction: rtl` (so mixed
   inline content — Arabic + Latin numerics — bidi-orders correctly)
   AND explicit `text-align: right` (so each line ANCHORS to the reading
   start, giving natural Arabic paragraph flow with a ragged left edge
   instead of the unnatural ragged right edge that inherited ltr text-
   align produces). Applies to:
     • .hgallery__meter-label — meter caption
     • .hgallery__title       — "عطور تترك أثراً."
     • .hgallery__lede        — the paragraph under the title
     • .hgallery__caption     — legacy hgallery caption element (kept
                                for back-compat if reintroduced)
     • .hgallery__item figcaption — the caption BLOCK under every image
                                    (contains the eyebrow, product title
                                    <b>, and notes <em>). */
[dir="rtl"] .hgallery__meter-label,
[dir="rtl"] .hgallery__title,
[dir="rtl"] .hgallery__lede,
[dir="rtl"] .hgallery__caption,
[dir="rtl"] .hgallery__item figcaption {
  direction: rtl;
  text-align: right;
}

/* Push the paragraph's BOX (not just its text) to the right edge of the
   flex column so its right edge aligns with the title above it. Without
   this, the 30ch max-width on .hgallery__lede shrinks the box, and
   because .hgallery__head inherits `direction: ltr` from the forced
   filmstrip flow above, `align-self` defaults to flex-start (LEFT).
   Result before this rule: right-aligned Arabic text sitting inside a
   left-anchored box → the paragraph's right edge falls far short of
   the title's right edge, breaking the vertical text spine.
   `flex-end` in an LTR-direction column = right cross-axis end, which
   is exactly what we want visually for Arabic reading. */
[dir="rtl"] .hgallery__lede {
  align-self: flex-end;
}

/* Cart drawer slides in from the right in LTR; mirror to left in RTL.
   The `.bag.open` transform is set inline in style.css further below;
   these overrides catch the specific translateX values. */
[dir="rtl"] .bag {
  right: auto;
  left: 0;
  /* Mirror the border-radius so the rounded corners sit on the
     drawer's INNER (visible) edge — right side when the drawer
     is docked at the viewport left. */
  border-radius: 0 24px 24px 0;
  transform: translateX(-100%);
}
[dir="rtl"] .bag.open {
  transform: translateX(0);
}
/* Header row inside the drawer uses `justify-content: space-between`
   which respects writing direction — no override needed. Keep the
   close button visually opposite the title. */

/* Toast — bottom-center is symmetrical; only the icon nudge needs a flip. */
[dir="rtl"] .toast__ic {
  transform: translateY(0.5px) scaleX(-1);
}

/* Prevent the sticky sidebar-summary from feeling "flipped" — text stays
   right-aligned in RTL. */
[dir="rtl"] .cart__summary,
[dir="rtl"] .pdp__info,
[dir="rtl"] .checkout__summary {
  text-align: right;
}

/* Numeric list bullets (01 / 02 / 03 …) in the pyramid + families
   sit in a corner. In RTL, flip them from right to left corner. */
[dir="rtl"] .pyramid__tier {
  border-right: 0;
  border-left: 1px solid rgba(17, 17, 17, 0.1);
  padding: 28px 0 8px 32px;
}
[dir="rtl"] .pyramid__tier:last-child {
  padding-left: 0;
  padding-right: 32px;
  border-left: 0;
}
[dir="rtl"] .pyramid__tier:nth-child(2) {
  padding-right: 32px;
  padding-left: 32px;
}
[dir="rtl"] .fam__idx {
  /* fam__idx is centered in the badge — no positional flip needed,
     but ensure the badge itself sits at reading-start (right in RTL). */
}

/* Fragrance-family card product stack sits top-right by default —
   in RTL, keep it on the reading-end side (top-left). */
[dir="rtl"] .fam__media {
  right: auto;
  left: 18px;
}

/* --- Fragrance-family card mirroring (RTL) ------------------------
   Two overlapping absolute anchors live in each .fam card's top row:
     .fam__idx   — the pill chip, positioned via `align-self` (respects
                   writing-direction natively, so it already flips to
                   the reading-start corner = TOP-RIGHT in RTL).
     .fam__media — the bottle stack, fixed at `right: 18px` (LTR)
                   → mirrored to `left: 18px` above. */

/* .fam__go is `position: relative; align-self: flex-start;` so it
   naturally follows writing direction — in RTL it lands at bottom-
   RIGHT. The user wants it on the reading-END side (bottom-LEFT), so
   flip the cross-axis alignment. `left:` on a relative-positioned
   element (the prior workaround) only nudges it — flex-end actually
   re-anchors the row to the opposite edge, which is what we want. */
[dir="rtl"] .fam__go {
  align-self: flex-end;
}

/* The "Discover" label uses `transform: translateX(-6px)` in the
   base so it slides IN from the left toward the icon on hover.
   In RTL the icon is now on the label's left, so the slide should
   come FROM the right (positive X). Mirror both the resting and
   hovered transforms. */
[dir="rtl"] .fam__go span {
  transform: translateX(6px);
}
[dir="rtl"] .fam:hover .fam__go span {
  transform: translateX(0);
}

/* Cart badge uses inset-inline-end, so it already sits on the reading-end. */

/* CTA arrow chips — mirror the arrow itself, not the whole flex
   row (order is handled by RTL flow). */
[dir="rtl"] .btn .arrow {
  transform: scaleX(-1);
}

/* Product cards' "→" go button on families / shop — mirror. */
[dir="rtl"] .card__go svg,
[dir="rtl"] .fam__go svg {
  transform: scaleX(-1);
}

/* ---------------------------------------------------------------
   Pill buttons with an inline icon-circle on ONE side
   (btn.btn--light, btn.btn--send, cart__cta, checkout__place …)
   ---------------------------------------------------------------
   The LTR baseline uses asymmetric physical padding — a big gap on
   the text side and a tiny 6px cushion on the icon-circle side so
   the circle sits flush inside the pill. In RTL the flex row
   reverses, so the circle ends up on the visual LEFT — but the
   physical padding is still weighted for LTR, producing the wide
   "extra gap" the user reported. Mirror the padding, reset the
   flex justification (flex-start honors reading direction, but
   several rules use flex-start ambiguously), and lock the gap so
   the pill looks visually identical to English in mirror. */
[dir="rtl"] .btn.btn--light {
  padding: 6px 26px 6px 6px;
  justify-content: flex-start;
  flex-direction: row;
}
[dir="rtl"] .btn.btn--send {
  padding: 6px 26px 6px 6px;
  justify-content: space-between;
}
/* Shop card "Add to bag" pill — same asymmetric-padding problem as the
   btn variants above. In LTR the arrow-circle sits flush right (6 px)
   and the label breathes on the left (18 px). In RTL, flex row-reverses
   so the arrow-circle ends up on the visual LEFT, but the physical
   padding (still LTR-oriented) puts 18 px of dead air next to it and
   crushes the label against the right edge. Mirror the physical padding
   so the pill reads visually identical in mirror. */
[dir="rtl"] .card__add {
  padding: 0 18px 0 6px;
}

/* "Match my mood" pill in the Fragrance families section — same
   architectural bug as .card__add above. Base padding (8px 8px 8px 22px)
   places a 22 px text cushion on the physical LEFT so the arrow-circle
   can sit flush against the physical RIGHT in LTR. In RTL the flex row
   reverses the visual order (arrow → visual left, label → visual right),
   but physical padding stays LTR-oriented — leaving 22 px of dead air
   outside the arrow-circle and crushing the label against the right
   edge. Mirror the horizontal padding so the pill reads visually
   identical in the mirror. Homepage-only element (verified single
   occurrence in index.html), so no cross-page impact. */
[dir="rtl"] .families__all {
  padding: 8px 22px 8px 8px;
}

/* Top-picks section CTAs — .picks__cta (solid) and .picks__all (outline).
   Both share the same asymmetric icon-pill pattern (icon-circle flush on
   one side, 20–22 px text cushion on the other). LTR base has the text
   cushion on the physical LEFT; in RTL the flex row reverses so the icon
   ends up on the visual LEFT — but the physical padding stays LTR, so
   the icon inherits that 22 px cushion as a giant left-side gap. Mirror
   the padding, mirror the arrow glyph so ↗ points toward the pill's
   visual-left outer edge, and mirror the hover translate so the arrow
   still "flies out" of the pill instead of into the label. */
[dir="rtl"] .picks__cta,
[dir="rtl"] .promo__cta,
[dir="rtl"] .banner__cta {
  padding: 4px 22px 4px 4px;
}
[dir="rtl"] .picks__all {
  padding: 4px 20px 4px 4px;
}
[dir="rtl"] .picks__cta b,
[dir="rtl"] .picks__all b,
[dir="rtl"] .promo__cta b,
[dir="rtl"] .banner__cta b {
  transform: scaleX(-1);
}
[dir="rtl"] .picks__cta:hover b,
[dir="rtl"] .picks__all:hover b,
[dir="rtl"] .promo__link:hover .promo__cta b,
[dir="rtl"] .banner__link:hover .banner__cta b {
  transform: rotate(8deg) translate(-2px, -2px) scaleX(-1);
}

/* Arrow-glyph centering in family-card and picks arrow-circles.
   The base uses `display: grid; place-items: center; line-height: 1`
   which centers ↗ perfectly in LTR. In RTL the doc-level font stack
   cascades Arabic/system-fallback fonts into every element, and the
   ↗ glyph (U+2197) picks up a different baseline offset from the
   fallback — reading as drifted high inside the circle. Isolate the
   arrow's writing context to LTR so its metrics stay stable, and
   swap grid → inline-flex for byte-perfect vertical centering across
   Chrome / Safari / Firefox. Applies to .fam__go b (family cards),
   .picks__cta b (solid picks pill), and .picks__all b (outline pill). */
[dir="rtl"] .fam__go b,
[dir="rtl"] .picks__cta b,
[dir="rtl"] .picks__all b,
[dir="rtl"] .promo__cta b,
[dir="rtl"] .banner__cta b {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
/* The wide/full-width cart CTA + checkout button use their own
   internal flex; ensure the icon slot always sits on the
   reading-END side (visual LEFT in RTL) and the text on the
   reading-START side (visual RIGHT in RTL). */
[dir="rtl"] .cart__cta,
[dir="rtl"] .checkout__place {
  flex-direction: row;
}

/* The rotate-on-hover animation on .btn.btn--light .btn__ic is a
   pure rotate() — safe in RTL. But .btn:hover .arrow and similar
   translate the arrow up-right (`translate(3px, -3px)`) which
   points OUT of the pill in RTL. Mirror the X axis so the arrow
   still "flies out" toward the button's outer edge. */
[dir="rtl"] .btn:hover .arrow,
[dir="rtl"] .card__buy button:hover .arrow {
  transform: translate(-3px, -3px) scaleX(-1);
}

/* Home hero CTA row — keep the remaining "Shop the line" pill on
   the reading-start side (visual right in RTL). */
[dir="rtl"] .hero__cta {
  flex-direction: row;
  justify-content: flex-start;
}

/* Hero sound icon — anchored to bottom-right in LTR via physical
   `right:`. In RTL the reading-end corner is bottom-LEFT, so mirror
   the anchor. Applied at every viewport where the button gets a
   `right:` override — base + small-mobile refinement. */
[dir="rtl"] .hero__sound {
  right: auto;
  left: var(--section-pad);
}

/* ==========================================================
   RTL — mobile text-alignment overrides
   ----------------------------------------------------------
   Several mobile media queries later in this file set
   `text-align: left` on hero / cinema / footer / menu blocks.
   That's fine for the LTR mobile layout but it produces
   left-aligned Arabic on RTL mobile — the reading eye lands
   on the wrong side of the line. These overrides mirror only
   the text-alignment axis, without changing padding, sizing,
   or breakpoint behavior.

   Approach:
     • Base .menu overrides are unconditional (the menu is
       only ever rendered as an overlay on ≤900px, and its
       source rule has no media query).
     • Section-scoped overrides are wrapped in the SAME
       @media boundary as the LTR rule they neutralize so
       they can't leak into desktop.
     • Flexbox `justify-content: flex-start` is intentionally
       NOT overridden — flex honors writing direction, so
       flex-start in RTL already sits on the visual right,
       which is exactly the desired behavior.
   ========================================================== */
[dir="rtl"] .menu a,
[dir="rtl"] .menu button {
  text-align: right;
}

/* Burger dropdown overlay — in LTR it docks under the top-right
   burger toggle. In RTL the toggle sits on the top-left after the
   flex-direction reversal, so anchor the popover panel to the
   left edge as well; keeps the visual "pointer" of the dropdown
   aligned with its trigger. */
[dir="rtl"] .menu {
  right: auto;
  left: max(16px, 4vw);
}

@media (max-width: 900px) {
  [dir="rtl"] .hero,
  [dir="rtl"] .cinema__intro {
    text-align: right;
  }

  /* Products page hero, banner, and dl meta blocks read as
     paragraphs on this breakpoint. Anchor them to the reading
     start so the eyebrow, title, lede, and metadata all begin
     on the right in Arabic. */
  [dir="rtl"] .pvideo__inner,
  [dir="rtl"] .pvideo__eyebrow,
  [dir="rtl"] .pvideo__title,
  [dir="rtl"] .pvideo__lede,
  [dir="rtl"] .pvideo__meta,
  [dir="rtl"] .pbanner__left,
  [dir="rtl"] .pbanner__eyebrow,
  [dir="rtl"] .pbanner__title,
  [dir="rtl"] .pbanner__lede,
  [dir="rtl"] .pbanner__meta {
    text-align: right;
  }

  /* Cart / checkout / PDP editorial columns on mobile —
     force reading-start alignment for headings, ledes, list
     items, and any inline paragraph copy that inherits from
     these containers. */
  [dir="rtl"] .cart__head,
  [dir="rtl"] .cart__head h1,
  [dir="rtl"] .cart__head p,
  [dir="rtl"] .cart__summary,
  [dir="rtl"] .cart__summary h2,
  [dir="rtl"] .cart__hint,
  [dir="rtl"] .cart__empty,
  [dir="rtl"] .cart__empty h2,
  [dir="rtl"] .cart__empty p,
  [dir="rtl"] .checkout__form,
  [dir="rtl"] .cbox,
  [dir="rtl"] .cbox__head,
  [dir="rtl"] .cbox__body,
  [dir="rtl"] .fld,
  [dir="rtl"] .fld > span,
  [dir="rtl"] .checkout__summary,
  [dir="rtl"] .checkout__done,
  [dir="rtl"] .checkout__done h1,
  [dir="rtl"] .checkout__done p,
  [dir="rtl"] .checkout__empty,
  [dir="rtl"] .checkout__legal,
  [dir="rtl"] .pdp__info,
  [dir="rtl"] .pdp__info h1,
  [dir="rtl"] .pdp__info p,
  [dir="rtl"] .pdp__story,
  [dir="rtl"] .pyramid,
  [dir="rtl"] .pyramid__head,
  [dir="rtl"] .pyramid__tier,
  [dir="rtl"] .rail__head {
    text-align: right;
  }

  /* Fragrance-family editorial cards + shop-card meta on mobile.
     Each card holds its own copy so alignment is set per-card
     rather than on the grid. */
  [dir="rtl"] .fam,
  [dir="rtl"] .fam__body,
  [dir="rtl"] .fam__body h3,
  [dir="rtl"] .fam__desc,
  [dir="rtl"] .card__meta,
  [dir="rtl"] .card__meta h3,
  [dir="rtl"] .card__family,
  [dir="rtl"] .pcard__body,
  [dir="rtl"] .pcard__row h3,
  [dir="rtl"] .pcard__family,
  [dir="rtl"] .pcard__notes,
  [dir="rtl"] .rcard__meta,
  [dir="rtl"] .rcard__meta h3 {
    text-align: right;
  }

  /* Home-page editorial sections: manifesto, picks (top of the
     season chart), horizontal gallery captions, and section
     headers. All hold prose that should read right-to-left. */
  [dir="rtl"] .banners,
  [dir="rtl"] .banner__body,
  [dir="rtl"] .banner__body h3,
  [dir="rtl"] .banner__body p,
  [dir="rtl"] .picks,
  [dir="rtl"] .picks__head,
  [dir="rtl"] .picks__lede,
  [dir="rtl"] .promos,
  [dir="rtl"] .promos__head,
  [dir="rtl"] .promo__body,
  [dir="rtl"] .promo__body h3,
  [dir="rtl"] .promo__body p,
  [dir="rtl"] .pick__body,
  [dir="rtl"] .pick__body h3,
  [dir="rtl"] .pick__body p,
  [dir="rtl"] .hgallery__meta,
  [dir="rtl"] .hgallery__title,
  [dir="rtl"] .hgallery__lede,
  [dir="rtl"] .hgallery__caption,
  [dir="rtl"] .hgallery__item figcaption,
  [dir="rtl"] .shop__head,
  [dir="rtl"] .shop__intro,
  [dir="rtl"] .families__head,
  [dir="rtl"] .families__intro,
  [dir="rtl"] .families__title,
  [dir="rtl"] .cinema__intro h2,
  [dir="rtl"] .cinema__intro p,
  [dir="rtl"] .story__head,
  [dir="rtl"] .story__head h2,
  [dir="rtl"] .story__copy,
  [dir="rtl"] .story__slide,
  [dir="rtl"] .story__kicker,
  [dir="rtl"] .story__copy h3,
  [dir="rtl"] .story__copy p,
  [dir="rtl"] .story__foot,
  [dir="rtl"] .subscribe,
  [dir="rtl"] .subscribe h2,
  [dir="rtl"] .subscribe h3,
  [dir="rtl"] .subscribe p,
  [dir="rtl"] .subpage,
  [dir="rtl"] .subpage h1,
  [dir="rtl"] .subpage h2,
  [dir="rtl"] .subpage h3,
  [dir="rtl"] .subpage p,
  [dir="rtl"] .subpage__spread-why,
  [dir="rtl"] .subpage__beat,
  [dir="rtl"] .subpage__pick-head {
    text-align: right;
  }

  /* Stories carousel heading stays centered in both directions —
     it is a display line, not start-aligned editorial prose. */
  [dir="rtl"] .reels__head,
  [dir="rtl"] .reels__head h2,
  [dir="rtl"] .reels__lede {
    text-align: center;
  }

  /* Label eyebrows (icon + kicker) are flex rows; on mobile the
     source rule pins them to flex-start which in RTL becomes the
     visual right side — that's what we want. No override needed
     for .label containers themselves, but the inline text inside
     needs to inherit right-alignment when it flows to a second
     line. */
  [dir="rtl"] .label,
  [dir="rtl"] .label span {
    text-align: right;
  }
}

@media (max-width: 640px) {
  [dir="rtl"] .foot__bot {
    text-align: right;
  }
}

@media (max-width: 400px) {
  [dir="rtl"] .foot__bot {
    text-align: right;
  }
  /* Smallest mobile — re-affirm hero + cinema alignment in case
     any of the 400px rules further down re-declare text-align. */
  [dir="rtl"] .hero,
  [dir="rtl"] .cinema__intro,
  [dir="rtl"] .pvideo__inner {
    text-align: right;
  }
}

/* ==========================================================
   Brand logo variants — derived from a single copper `logo.avif`
   via CSS filters (no extra asset files required).

   Usage on any <img> that renders the Swiss Arabian mark:
     .logo--black  → force pure black silhouette (on light bg)
     .logo--white  → force pure white silhouette (on dark bg)
     .logo--copper → keep original brand copper (primary)
   ========================================================== */
.logo--black  { filter: brightness(0); }
.logo--white  { filter: brightness(0) invert(1); }
.logo--copper { filter: none; }

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-geist-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
}

body.lock,
body.is-loading { overflow: hidden; }

/* ==============================================================
   LOADER — editorial theme (warm cream · ink · accent)
   Consumes: var(--secondary), var(--ink), var(--accent), var(--ease)
   ============================================================== */

.loader {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: #fff;
  opacity: 1;
  transition: opacity 0.45s ease;
}

.loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  width: min(320px, 70vw);
}

.loader__brand {
  height: clamp(64px, 8vw, 88px);
  width: auto;
  object-fit: contain;
}

.loader__track {
  width: 100%;
  height: 1px;
  background: rgba(17, 17, 17, 0.1);
  overflow: hidden;
}

.loader__track span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.16s linear;
}

.loader.is-leave {
  opacity: 0;
  pointer-events: none;
}

.nav,
.hero__left,
.hero__sound {
  opacity: 0;
  transform: translateY(28px);
}

body.is-ready .nav,
body.is-ready .hero__left,
body.is-ready .hero__sound {
  opacity: 1;
  transform: none;
  transition:
    opacity 1s var(--ease) 0.15s,
    transform 1.2s var(--ease) 0.15s;
}

body.is-ready .hero__left { transition-delay: 0.28s, 0.28s; }
body.is-ready .hero__sound { transition-delay: 0.52s, 0.52s; }

img,
video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

a { color: inherit; text-decoration: none; }

button,
input {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}

button { cursor: pointer; }

::selection {
  background: var(--ink);
  color: var(--white);
}

.glow {
  position: fixed;
  width: 42vw;
  height: 42vw;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(80px);
  opacity: 0.4;
}

.glow--a {
  top: -12vw;
  left: -8vw;
  background: #a7604a;
  animation: drift 14s ease-in-out infinite;
}

.glow--b {
  right: -10vw;
  bottom: 10vh;
  background: #a7604a;
  animation: drift 18s ease-in-out infinite reverse;
}

/* Products page (`.shop-page`) is a pure editorial white listing surface.
   Suppress the copper ambience glows here so .pvideo, .shop-toolbar, and
   .collection render on a clean #fff without a warm tint bleeding through.
   Home page keeps the glows for hero ambience. */
body.shop-page .glow {
  display: none;
}

@keyframes drift {
  50% { transform: translate(20px, -16px) scale(1.06); }
}

.nav,
.hero,
.shop,
.types,
.families,
.hgallery,
.banners,
.subscribe,
.picks,
.promos,
.reels,
.cinema,
.story,
.talk-sec,
.foot,
.menu {
  position: relative;
  z-index: 2;
}

.nav {
  position: fixed;
  top: 18px;
  left: var(--section-pad);
  right: var(--section-pad);
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: auto;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  transition: top 0.35s var(--ease);
}

/* Past-hero — subtle position tuck (color/theme is already light by default) */
body.is-past-hero .nav {
  top: 12px;
}

.brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  transition: transform 0.4s var(--ease), filter 0.4s var(--ease);
}

.brand:hover {
  transform: scale(1.06);
  filter: brightness(1.15);
}

.brand img {
  display: block;
  height: 58px;
  width: auto;
  object-fit: contain;
}

.nav__mid {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  max-width: min(860px, 68vw);
  gap: 2px;
  padding: 5px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: background 0.4s var(--ease), border-color 0.4s;
}

.nav__mid > a,
.drop > button {
  position: relative;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.72);
  white-space: nowrap;
  transition: color 0.4s var(--ease), background 0.3s;
}

.nav__mid > a::after,
.drop > button::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #111;
  transform: translate(-50%, 6px);
  opacity: 0;
  transition: 0.3s var(--ease);
}

.nav__mid > a:hover::after,
.drop > button:hover::after,
.drop:hover > button::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.nav__mid > a:hover,
.drop > button:hover,
.drop:hover > button {
  color: #111;
  background: rgba(17, 17, 17, 0.05);
}

.drop { position: relative; }

.drop > button {
  display: inline-flex;
  align-items: center;
}

/* Hide a leftover ▾ caret (not the i18n label) so Perfumes matches
   Oils / Incense / Journal / Gifts. Mega menu still opens on hover.
   Do NOT rotate `button span` — the label is also a span, and a
   blanket hover rotate flipped the word 180°. Hover chrome
   (color, tint, underline-dot) lives on the button itself. */
.drop > button > span:not([data-i18n]) {
  display: none;
}
.drop > button > span[data-i18n],
.drop:hover > button > span[data-i18n],
.drop > button:hover > span[data-i18n] {
  transform: none;
}

.drop__list {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  min-width: 200px;
  padding: 8px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transform: translate(-50%, 8px);
  opacity: 0;
  visibility: hidden;
  transition: 0.28s var(--ease);
}

.drop__list a {
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  color: rgba(17, 17, 17, 0.78);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.drop__list a:hover {
  background: rgba(167, 96, 74, 0.12);
  color: var(--accent);
}

.drop:hover .drop__list,
.drop:focus-within .drop__list {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.nav__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav__actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: background 0.4s var(--ease), border-color 0.4s;
}

.nav__ic {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: rgba(17, 17, 17, 0.75);
  transition: 0.3s var(--ease);
}

.nav__ic:hover {
  background: rgba(17, 17, 17, 0.05);
  color: #111;
}

.nav__ic svg {
  width: 17px;
  height: 17px;
}

.nav__sep {
  width: 1px;
  height: 20px;
  background: rgba(0, 0, 0, 0.1);
}

/* Cart is an icon-only twin of .nav__ic. The count badge sits on the
   reading-end corner and is hidden when the cart is empty (.is-empty /
   [hidden] — both toggled by drawBag() + refreshCartBadge()). */
.nav__bag {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  color: rgba(17, 17, 17, 0.75);
  transition: 0.3s var(--ease);
}

.nav__bag:hover { background: rgba(17, 17, 17, 0.05); color: #111; }

.nav__bag svg {
  width: 17px;
  height: 17px;
}

.nav__bag b {
  position: absolute;
  top: 3px;
  inset-inline-end: 2px;
  display: grid;
  place-items: center;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  font-size: 0.56rem;
  letter-spacing: 0;
  line-height: 1;
  pointer-events: none;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.92);
}

.nav__bag b.is-empty,
.nav__bag b[hidden] {
  display: none;
}

.icon-circle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  color: #111;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  transition: 0.3s var(--ease);
}

.icon-circle svg {
  width: 18px;
  height: 18px;
}

.icon-circle:hover {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.16);
}

.search {
  position: fixed;
  top: 84px;
  right: max(18px, 4vw);
  z-index: 41;
  width: min(360px, calc(100vw - 36px));
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(12, 12, 12, 0.62);
  backdrop-filter: blur(18px);
}

.search input {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.search input::placeholder { color: rgba(255, 255, 255, 0.55); }
.search input:focus { outline: none; }

/* Legacy widgets superseded by the mega-nav panel — but ONLY on pages
   where the mega actually exists. initMega() in main.js sets
   [data-mega-nav] on <body> at startup. On other pages (cart, checkout,
   product, products) the old .drop__list mini-dropdown and #searchBox
   overlay stay wired as before, so no page loses its header nav. */
body[data-mega-nav] .search#searchBox,
body[data-mega-nav] .search#searchBox[hidden] {
  display: none !important;
}
body[data-mega-nav] .drop__list {
  display: none !important;
}

/* ==============================================================
   Mega-nav panel — full-viewport-width dropdown from top
   --------------------------------------------------------------
   Two modes, one component:
     • search — from #searchBtn click OR direct typing in #megaInput
     • menu   — from mouseover on any .nav__mid trigger

   Controller: initMega() in main.js. Body-state attribute
   [data-mega-open] toggles the visible state. Mode is stored on
   the .mega element as [data-mode="search"|"menu"] so CSS can
   theme the aside title/eyebrow if needed later.

   Layout: fixed under the nav, spans full viewport width, slides
   down with translateY + opacity. A tinted veil covers the page
   below to focus attention while search is active. Menu mode uses
   a lighter veil (transient hover), search mode uses a stronger
   one (explicit close).
   ============================================================== */
.mega {
  position: fixed;
  /* Panel butts DIRECTLY against the open-state nav band. When the
     mega opens, body[data-mega-open] .nav switches to
     `top:0; padding:14px`. With a 58px brand logo the nav band
     resolves to 14 + 58 + 14 = 86px tall. Setting --mega-top to
     86px eliminates the previously-visible 6-8px translucent
     see-through strip between nav and panel. Both surfaces share
     the same white frost recipe (see .mega__panel + nav-open bg)
     so the join reads as one unified header band. */
  top: var(--mega-top, 86px);
  left: 0;
  right: 0;
  z-index: 60;
  pointer-events: none;
  /* [hidden] attr is removed by JS the moment open is triggered so
     transitions have a target frame to run against. Base state keeps
     the panel invisible + non-interactive. */
}

/* Scroll-tuck state — nav shrinks from top:18 → top:12 but the
   OPEN-state nav still uses `top:0; padding:14px`, so the band
   height is identical to the hero state. No adjustment needed. */
body.is-past-hero .mega {
  --mega-top: 86px;
}

.mega:not([hidden]) {
  pointer-events: auto;
}

/* Backdrop dimmer — sits behind the panel, covers the rest of the
   viewport. Semi-opaque so headline/nav peek through as reminder. */
.mega__veil {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(17, 17, 17, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  opacity: 0;
  /* Timing matched to the panel transition so the veil and panel
     finish together — before, the veil settled 200ms earlier which
     read as two separate motions. */
  transition:
    background 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    backdrop-filter 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    -webkit-backdrop-filter 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

body[data-mega-open] .mega__veil {
  opacity: 1;
  pointer-events: auto;
  background: rgba(17, 17, 17, 0.28);
  backdrop-filter: blur(6px) saturate(0.95);
  -webkit-backdrop-filter: blur(6px) saturate(0.95);
}

/* Menu-hover mode uses a softer veil so the transient hover doesn't
   feel like a page takeover. */
body[data-mega-open][data-mega-mode="menu"] .mega__veil {
  background: rgba(17, 17, 17, 0.14);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.mega__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  /* Tighter internal rhythm to match the rest of the app's card
     surfaces. Top padding trimmed 22 → 14 so the search bar sits
     ~1cm below the nav join. Bottom inset is larger than top so
     lists + the feature plate sit above the panel edge instead
     of kissing it. Logical properties keep LTR/RTL even. */
  padding-block-start: 14px;
  padding-block-end: 56px;
  padding-inline: clamp(24px, 5vw, 80px);
  /* Solid white — matches the nav pill and drawer surfaces, and
     keeps the two-tone body (cream page ↔ white surfaces) that
     runs through the rest of the app. Fully opaque so no page
     content bleeds through the panel. */
  background: #ffffff;
  backdrop-filter: blur(24px) saturate(1.15);
  -webkit-backdrop-filter: blur(24px) saturate(1.15);
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
  /* Softer, longer shadow — the previous 60px blur pushed a hard
     halo onto the page below. This one lifts the panel while
     staying discreet against the cream body. */
  box-shadow:
    0 1px 0 rgba(17, 17, 17, 0.04) inset,
    0 40px 60px -32px rgba(17, 17, 17, 0.22);
  /* Height cap — the dropdown must never cover the full viewport, so
     there's always a visible gap between its bottom edge and the fold.
     Laptop default: 70vh. Wide desktop (≥1440px) tightens to 62vh.
     Grid is now 2 cols × 3 rows of horizontal cards (see .mega__grid),
     the intrinsic panel height comfortably fits inside both caps and
     NEVER scrolls. overflow: hidden acts as a hard guard against any
     rounding/overshoot — no scrollbar can ever appear in the panel. */
  max-height: 70vh;
  overflow: hidden;
  /* Slide + fade choreography. The panel starts fully translated out
     of the viewport above the nav and eases in with a deep out-expo
     curve — cubic-bezier(0.16, 1, 0.3, 1) — which pulls to a slow,
     silky settle. Duration slightly longer than the previous 0.5s so
     the drop reads as deliberate, not a flash. Same transition rule
     drives BOTH open and close (transitions are bidirectional), so
     the exit animation matches the entrance one-to-one. */
  transform: translateY(-100%);
  opacity: 0;
  transition:
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

@media (min-width: 1440px) {
  .mega__panel {
    max-height: 62vh;
  }
}

body[data-mega-open] .mega__panel {
  transform: translateY(0);
  opacity: 1;
}

/* ==============================================================
   Header visibility while mega is open
   --------------------------------------------------------------
   When the dropdown is out, promote the nav above the mega
   (z:70 > mega z:60) and give it an opaque white surface so
   it reads as a fixed, solid header strip — not a floating
   pill overlaid on the veil. The pill styling on .nav__mid,
   brand, and actions is preserved; only the outer .nav frame
   picks up a background band + a hair border below.

   Scoped strictly to body[data-mega-open], so:
     • Idle state leaves the floating-pill hero look untouched
     • Pages without .mega never trigger this rule
     • Close animation restores the transparent nav via transition
   ============================================================== */
body[data-mega-open] .nav {
  z-index: 70;
  /* Full-bleed white band — matches the panel background exactly so
     the two surfaces read as ONE continuous header block: no color
     step at the join, no border seam. The border-bottom is set
     transparent because the panel's own top edge already carries
     an inset hairline (see .mega__panel box-shadow inset). */
  background: #ffffff;
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  border-bottom: 1px solid transparent;
  /* Widen the nav to full-viewport so the white band spans
     edge-to-edge instead of just the section-padded strip.
     Padding replaces the previous side offsets, preserving the
     brand / pill / actions internal alignment. */
  top: 0;
  left: 0;
  right: 0;
  padding: 14px clamp(24px, 5vw, 80px);
}

/* NOTE on cascade: because this `body[data-mega-open] .nav` rule
   appears LATER in the stylesheet than `body.is-past-hero .nav`,
   with equal specificity (2 selectors + 1 class), it wins for the
   scrolled+open combination too. No separate compound rule needed. */

/* Smooth ease from the transparent-pill state into the opaque
   band. transition on the outer nav already carries `top`; add
   background + padding + border so the swap doesn't snap between
   the two states (idle floating pill ⇄ opaque header band). */
.nav {
  transition:
    top 0.35s var(--ease),
    background 0.3s var(--ease),
    backdrop-filter 0.3s var(--ease),
    -webkit-backdrop-filter 0.3s var(--ease),
    border-color 0.3s var(--ease),
    padding 0.3s var(--ease);
}

/* Top bar: search input hugs the LEADING edge, close button hugs the
   TRAILING edge. `justify-content: space-between` handles both LTR
   (search-left / close-right) and RTL (search-right / close-left)
   without any dir-aware overrides. Prior layout let the search pill
   fill the whole row width, which felt like a form field, not a
   discovery tool — capping to ~440px pulls it back to a chip.
   `max-width` + `margin-inline: auto` centers the topbar content on
   ultra-wide viewports so the search pill and close button stay
   optically aligned with the body content below (see .mega__body). */
.mega__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
  max-width: 1440px;
  margin-inline: auto;
  width: 100%;
}

.mega__search {
  /* Width cap: 440 max, 260 min for narrow-viewport safety. `flex: 0 1`
     prevents the pill from stretching to fill leftover row space —
     any extra width goes to the empty space between search and close
     via justify-content:space-between above. */
  flex: 0 1 440px;
  min-width: 260px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 999px;
  background: #fff;
  transition:
    border-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
  cursor: text;
}

.mega__search:focus-within {
  border-color: rgba(216, 175, 122, 0.7);
  box-shadow: 0 0 0 3px rgba(216, 175, 122, 0.14);
}

.mega__search svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: rgba(17, 17, 17, 0.5);
}

.mega__search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-geist-sans);
  font-size: 0.88rem;
  letter-spacing: -0.005em;
  outline: none;
}

.mega__search input::placeholder {
  color: rgba(17, 17, 17, 0.42);
  letter-spacing: 0;
}

/* Cancel default -webkit-search cancel button since it clashes with
   the panel's clean edge. */
.mega__search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.mega__close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 50%;
  background: transparent;
  color: rgba(17, 17, 17, 0.65);
  cursor: pointer;
  transition:
    background 0.3s var(--ease),
    color 0.3s var(--ease),
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.mega__close:hover {
  background: var(--ink);
  color: #fff;
  transform: rotate(90deg);
}

.mega__close svg {
  width: 13px;
  height: 13px;
}

.mega__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Body: 2-column grid — aside (title/desc/link) left, product grid right.
   On narrower viewports collapse to single column. Padding-top trimmed
   to sit ~1 baseline below the topbar divider. `max-width` + auto
   margins cap the composition at 1440px so the layout stays balanced
   on ultra-wide monitors — the panel background stays full-bleed
   (see .mega__panel) but the content itself centers, keeping the
   aside/grid relationship optically tight instead of stretched. */
.mega__body {
  display: grid;
  grid-template-columns: minmax(200px, 260px) 1fr;
  gap: clamp(24px, 4vw, 56px);
  padding-top: 18px;
  max-width: 1440px;
  margin-inline: auto;
  width: 100%;
}

.mega__aside {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 6px;
}

.mega__eyebrow {
  font-family: var(--font-geist-sans);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

/* Arabic doesn't have case + wide-track eyebrows read as broken
   glyphs. Ease letter-spacing to zero and bump size a hair so
   the label carries the same visual weight as its English peer. */
[dir="rtl"] .mega__eyebrow,
[dir="rtl"] .mega__card-eyebrow {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.68rem;
}

.mega__title {
  font-family: var(--font-benton-sans-wide, var(--font-geist-sans));
  /* Reduced from clamp(1.4-1.9rem). Aside title now reads at ~1.5rem
     max — the previous 30px felt shouty next to the search pill's
     0.88rem input. Line-height also tightened for a compact block. */
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}

.mega__lede {
  font-family: var(--font-geist-sans);
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(17, 17, 17, 0.58);
  margin: 4px 0 10px;
  max-width: 34ch;
}

.mega__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  color: var(--ink);
  font-family: var(--font-geist-sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgba(17, 17, 17, 0.15);
  align-self: flex-start;
  transition:
    color 0.3s var(--ease),
    border-color 0.3s var(--ease);
}

.mega__all:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.mega__all .arrow {
  color: var(--accent);
  font-weight: 400;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.mega__all:hover .arrow {
  transform: translate(3px, -3px);
}

/* ==============================================================
   Search-mode grid (2 columns × 2 rows = 4 cards)
   --------------------------------------------------------------
   The dropdown displays FOUR products in an editorial two-column
   horizontal-row list. Sizing was 6 (2×3) but the third row was
   getting clipped by the panel's max-height + overflow:hidden guard
   on typical 900px viewports, producing a broken half-card at the
   bottom. Reducing to 4 (2×2) gives every card full breathing room
   and leaves the aside CTA visible.
   MEGA_SEARCH_MAX in main.js MUST equal rows × cols. The
   grid-auto-rows: 0 clause is a belt-and-suspenders guard: if JS
   ever yields >4 cards, extra rows collapse to zero-height and
   never spill beyond the panel bounds.
   ============================================================== */
.mega__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, auto);
  grid-auto-rows: 0;
  column-gap: clamp(28px, 3vw, 44px);
  row-gap: 22px;
  align-content: start;
  overflow: hidden;
}

/* Horizontal editorial card — image on the leading side, meta in
   the middle, price stack on the trailing side. No border /
   shadow — the card reads as a list row, not a chip.
   Uses CSS Grid rather than flex so the price column self-sizes
   from its own content without breaking meta wrapping. */
.mega__card {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 8px 6px;
  color: var(--ink);
  text-decoration: none;
  border-radius: 14px;
  transition:
    background-color 0.3s var(--ease),
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.mega__card:hover {
  background: rgba(17, 17, 17, 0.03);
}

/* Square thumbnail plate — subtle warm tint that reads under the
   product PNG's transparent bleed. Fixed width keeps every row
   aligned regardless of image aspect ratio. Slightly larger than
   the previous 72px because the grid is now 2×2 with more room. */
.mega__card-media {
  position: relative;
  width: 84px;
  height: 84px;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: #f7f2e9;
  flex-shrink: 0;
}

/* Cover + center — the product PNGs now fill the plate edge-to-edge
   with the bottle horizontally centered. `object-position: center`
   is the default but stated explicitly so any future PNG with an
   off-center subject can be tuned per-image if needed. Padding
   removed because `cover` needs the full plate to crop against. */
.mega__card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  padding: 0;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.mega__card:hover .mega__card-media img {
  transform: scale(1.06);
}

/* Meta column — vertical stack of eyebrow / name / desc / rating.
   min-width: 0 lets the flex/grid child truncate long names with
   ellipsis instead of forcing the whole card wider. */
.mega__card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mega__card-eyebrow {
  font-family: var(--font-geist-sans);
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 2px;
}

.mega__card-name {
  font-family: var(--font-geist-sans);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.22;
  color: var(--ink);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mega__card-desc {
  font-family: var(--font-geist-sans);
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.35;
  color: rgba(17, 17, 17, 0.55);
  margin: 2px 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Star rating row — 5 flat glyphs + numeric average.
   Stars are static (no partial-fill) so the row stays lightweight
   and legible at small sizes; the numeric value carries the
   precision. Uses inline-flex for perfect baseline alignment
   between glyphs and number. */
.mega__card-rating {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-geist-sans);
  font-size: 0.72rem;
  color: rgba(17, 17, 17, 0.72);
}

.mega__card-stars {
  color: var(--accent);
  letter-spacing: 1px;
  line-height: 1;
  font-size: 0.78rem;
}

.mega__card-ratingval {
  font-weight: 600;
  color: rgba(17, 17, 17, 0.78);
}

/* Price column — current price stacked over "was" price with
   strikethrough. Right-aligned so multiple cards line up in a
   clean vertical price column across the two grid columns. */
.mega__card-pricecol {
  display: flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
  padding-inline-end: 4px;
}

.mega__card-price {
  font-family: var(--font-geist-sans);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.mega__card-oldprice {
  font-family: var(--font-geist-sans);
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(17, 17, 17, 0.4);
  text-decoration: line-through;
}

/* Numeric values stay LTR even in RTL layout — protects "$150" and
   "4.7" from bidi reordering that would otherwise flip them to
   "150$" or "7.4" when the parent inherits dir="rtl". Isolates
   the number from surrounding text without changing paragraph flow. */
.mega__card-price,
.mega__card-oldprice,
.mega__card-ratingval {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Empty-state message when a search truly has no hits AND fallback
   is also empty (rare — only fires if the catalog is empty). */
.mega__empty {
  grid-column: 1 / -1;
  padding: 30px 0;
  text-align: center;
  color: rgba(17, 17, 17, 0.55);
  font-size: 0.9rem;
}

/* Mega is hover-driven, so it stays desktop-only — below 900px the
   nav switches to the burger menu and .mega is display:none. Column
   count is locked to 4 across the whole desktop range (900–∞) so the
   panel layout is predictable and every card gets equal room. */
@media (max-width: 900px) {
  .mega {
    display: none !important;
  }
}

/* ==============================================================
   Mode-specific styling
   --------------------------------------------------------------
   The controller in main.js sets body[data-mega-mode="search"|"menu"]
   when a mode is active. CSS uses that attribute to differentiate
   layout WITHOUT the JS having to touch DOM structure.

   Menu-hover mode: the search bar is hidden. The panel is a pure
   category browser — category title / description / product grid.
   Search mode: full topbar visible (search input focused + close).
   ============================================================== */

/* Hide the search topbar entirely when we're in menu-hover mode.
   The topbar element stays in the DOM so search-mode logic (focus,
   input listener, X-button) is unaffected — CSS just drops it from
   the layout tree with display:none, freeing that vertical space
   for the product grid within the height cap. */
body[data-mega-mode="menu"] .mega__topbar {
  display: none;
}

/* With no topbar, the body no longer needs its top-border separator
   spacing. Trim padding-top so aside/grid sit closer to the panel's
   top edge, respecting the tight height budget. */
body[data-mega-mode="menu"] .mega__body {
  padding-top: 8px;
}

/* Aside column — slightly wider so long titles + count strings
   don't crowd the product grid. In search mode the aside carries
   eyebrow + title + count only (CTA hidden — see below). */
.mega__body {
  grid-template-columns: minmax(220px, 260px) 1fr;
  gap: clamp(24px, 3vw, 56px);
  align-items: start;
}

/* Keep the "see-all" label + arrow inseparable — before this fix
   the arrow was wrapping onto its own line whenever the text broke,
   leaving a stray ↗ dangling in the corner of the aside. */
.mega__all {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Search-mode aside stays minimal — eyebrow / title / count.
   The "See the whole line" CTA belongs to menu mode as a
   category-shop link; in search the count string already
   communicates result scope, so the CTA would be noise. */
body[data-mega-mode="search"] .mega__all {
  display: none;
}

/* Search-mode aside title — bigger, tighter, more editorial.
   Overrides the shared .mega__title clamp so the title reads
   at magazine-scale beside the horizontal card list. */
body[data-mega-mode="search"] .mega__title {
  /* Reduced from clamp(1.6-2.2rem). Search-mode used to bump the
     title back up to display-scale for "Find a fragrance" — that
     read as ad-copy next to the compact card list. Tightened to a
     confident subhead. */
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
}

body[data-mega-mode="search"] .mega__lede {
  font-size: 0.74rem;
  color: rgba(17, 17, 17, 0.55);
  margin-top: 6px;
}

/* ==============================================================
   Menu-hover mode — editorial layout
   --------------------------------------------------------------
   When body[data-mega-mode="menu"] is set (any nav-item hover), the
   .mega__grid container is re-purposed into a THREE-column layout:
     col-1  Top picks — plain-text product list
     col-2  Collections — plain-text sub-category list
     col-3  Feature — image with overlay label + title

   Search mode keeps its 4-col product-card grid (defined above).
   Only the grid template + child styles differ between modes; the
   aside column and panel-frame animations are shared.
   ============================================================== */
body[data-mega-mode="menu"] .mega__grid {
  /* Two readable list columns + a width-capped feature card:
       col-1  list     →  1fr  (min 140 px — keeps names readable)
       col-2  list     →  1fr  (matched)
       col-3  feature  →  minmax(260 px, 340 px)
     Was minmax(300px, 1.6fr), which grew to ~457 px at the
     1440 body max and made the promo plate ~1/3 of the
     dropdown. Width is now hard-capped so leftover row
     space goes to the two lists instead. The 260 px floor
     lets the card shrink a little in the 1050–1200 px band
     so the lists stay above their 140 px min. Height is
     owned by .mega__feature (340 px), not by this track.
     Combined with `.mega__body { max-width: 1440px;
     margin-inline: auto; }`, ultra-wide monitors center the body
     inside the full-bleed panel instead of stretching it. */
  grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) minmax(260px, 340px);
  grid-template-rows: auto;
  grid-auto-rows: auto; /* undo the search-mode height-0 clip */
  gap: clamp(24px, 2.4vw, 40px);
  align-items: start;
  overflow: visible;
}

.mega__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mega__list-heading {
  font-family: var(--font-geist-sans);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}

/* Arabic labels — uppercase + 0.22em tracking are Latin idioms
   that hollow-out Arabic word shapes. Restore natural rendering. */
[dir="rtl"] .mega__list-heading {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.68rem;
}

.mega__list-item {
  display: block;
  padding: 6px 0;
  color: var(--ink);
  font-family: var(--font-geist-sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition:
    color 0.3s var(--ease),
    padding 0.3s var(--ease),
    border-color 0.3s var(--ease);
}

.mega__list-item:hover {
  color: var(--accent);
  padding-left: 6px;
}

/* Reading direction reverses in RTL — nudge the hover offset the
   other way so the item slides toward the reading-end side. */
[dir="rtl"] .mega__list-item:hover {
  padding-left: 0;
  padding-right: 6px;
}

/* Feature image — the trailing-end hero. Width is capped by
   the 340 px grid track (was 1.6fr / ~457 px). Height is
   locked at 340 px — the size the previous 4:3-at-457px card
   actually rendered — so narrowing the column does not squash
   the photo. object-fit: cover crops the image inside. */
.mega__feature {
  position: relative;
  display: block;
  width: 100%;
  max-width: 340px;
  justify-self: end;
  align-self: start;
  height: 340px;
  min-height: 340px;
  max-height: 340px;
  /* White air under the rounded plate — panel padding was clipped
     by overflow:hidden, so the photo still kissed the edge. */
  margin-block-end: 48px;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  background: #f5f0e6;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.mega__feature img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.mega__feature::after {
  /* Bottom-anchored dark gradient — legibility for the white
     overlay text below. Kept subtle so the image reads first. */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(17, 17, 17, 0.72) 0%,
    rgba(17, 17, 17, 0.35) 30%,
    rgba(17, 17, 17, 0) 65%
  );
  z-index: 1;
  pointer-events: none;
}

.mega__feature:hover img {
  transform: scale(1.04);
}

.mega__feature-overlay {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #fff;
}

.mega__feature-label {
  font-family: var(--font-geist-sans);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.9;
}

.mega__feature-title {
  font-family: var(--font-benton-sans-wide, var(--font-geist-sans));
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.01em;
}

/* RTL — overlay text hugs the reading-start (right) edge instead. */
[dir="rtl"] .mega__feature-overlay {
  left: auto;
  right: 22px;
  text-align: right;
}

/* Narrower viewports — collapse to 2 columns (drop feature) so the
   two lists stay readable. Below 1050px the feature would squeeze
   the lists to unreadable widths. */
@media (max-width: 1050px) {
  body[data-mega-mode="menu"] .mega__grid {
    grid-template-columns: 1fr 1fr;
  }
  .mega__feature {
    display: none;
  }
}

/* Tight laptop widths (900–1100px): the 2-col × 3-row horizontal
   grid becomes cramped alongside the 260px aside. Collapse to a
   single column of 6 cards — the panel stays within the 60vh cap
   because horizontal cards are ~92px tall (6 × 92 + 5 × 18 = 642px)…
   Actually 642px overshoots 60vh at 900p (=540px). So instead we
   keep 2 columns but drop the thumb + tighten typography to buy
   width. That's safer than a scroll bar. */
@media (min-width: 900px) and (max-width: 1100px) {
  body[data-mega-mode="search"] .mega__card {
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 12px;
  }
  body[data-mega-mode="search"] .mega__card-media {
    width: 58px;
    height: 58px;
  }
  body[data-mega-mode="search"] .mega__card-name {
    font-size: 0.85rem;
  }
  body[data-mega-mode="search"] .mega__card-desc {
    font-size: 0.72rem;
  }
  body[data-mega-mode="search"] .mega__grid {
    column-gap: 20px;
    row-gap: 14px;
  }
}

/* --------------------------------------------------------------
   RTL support — mirror close-button placement, product grid flow,
   and the "see all" arrow direction. Most of the layout flips
   naturally because it's flexbox / CSS grid, so the overrides
   here are surgical.
   -------------------------------------------------------------- */
[dir="rtl"] .mega__all:hover .arrow {
  transform: translate(-3px, -3px);
}

/* Reduced motion — kill slide and fade transitions; the panel
   snaps open/closed. Preserves the veil transitions since they're
   background changes (visual, not vestibular). */
@media (prefers-reduced-motion: reduce) {
  .mega__panel,
  .mega__card,
  .mega__card-media img,
  .mega__close {
    transition: none !important;
  }
  .mega__close:hover {
    transform: none;
  }
}

.arrow {
  color: var(--accent);
  display: inline-block;
  transition: transform 0.3s var(--ease);
}

.talk:hover .arrow,
.btn:hover .arrow,
.card__buy button:hover .arrow {
  transform: translate(3px, -3px);
}

.nav__burger {
  display: none;
  position: relative;
}

.nav__burger i {
  position: absolute;
  left: 14px;
  width: 16px;
  height: 1.5px;
  /* Match the rest of the nav iconography (search, bag, count) which all render
     in dark ink over the near-white `.icon-circle` pill. Previously #fff, which
     was invisible against the translucent-white button background. */
  background: var(--ink);
  border-radius: 2px;
  transition: 0.3s var(--ease);
}

.nav__burger i:first-child { top: 16px; }
.nav__burger i:last-child { top: 24px; width: 12px; }

.nav__burger.is-open i:first-child {
  top: 20px;
  transform: rotate(45deg);
}

.nav__burger.is-open i:last-child {
  top: 20px;
  width: 16px;
  transform: rotate(-45deg);
}

.menu {
  position: fixed;
  top: 100px;
  right: max(16px, 4vw);
  z-index: 39;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 180px;
  padding: 20px 22px;
  background: rgba(232, 215, 187, 0.92);
  border: 1px solid var(--line);
  border-radius: 18px;
  backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: 0.35s var(--ease);
}

.menu.open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.menu a,
.menu button {
  text-align: left;
  font-size: 1.05rem;
}

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: end;
  padding: 110px var(--pad) 88px;
  overflow: hidden;
  color: #fff;
}

.hero__bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero__bg video {
  transform: scale(1.06);
}

/* Landscape still (herobg.png). Same fixed/cover contract as the
   commented-out film so later opaque z-index:2 sections still mask it. */
.hero__bg img,
.hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__left {
  position: relative;
  z-index: 2;
  max-width: 500px;
}

/* Type scale tuned for laptop viewports (1280–1440px).
   At 1280px this resolves to ~54px (vs ~72px previously) so the h1
   sits over the product photography without overwhelming it. */
.hero h1 {
  font-family: var(--font-geist-sans);
  font-size: clamp(2.05rem, 3.4vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.98;
  color: #000;
  text-shadow: none;
  margin-bottom: 14px;
}

.hero h1 em {
  font-style: normal;
  font-weight: 700;
  color: #000;
}

.hero__lede {
  max-width: 40ch;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.55;
  color: #000;
  text-shadow: none;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  margin-top: 26px;
}

.shop h2,
.talk-sec h2,
.sheet h2 {
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.shop__intro,
.talk-sec__left p,
.sheet > div p:not(.label) {
  color: var(--muted);
  max-width: 36ch;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 24px;
  margin-top: 26px;
  background: var(--ink);
  color: var(--white);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
}

.btn--wide { width: 100%; margin-top: 28px; }

.btn.btn--light {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  min-height: 60px;
  margin-top: 0;
  padding: 6px 6px 6px 26px;
  background: #fff;
  color: #111;
  border-radius: 999px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
  transition: transform 0.3s var(--ease), background 0.3s;
}

.btn.btn--light:hover {
  transform: translateY(-2px);
  background: #f5ede2;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.26);
}

.btn__ic {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #111;
  color: #fff;
  font-size: 1rem;
  font-weight: 400;
  transition: background 0.3s, transform 0.3s var(--ease);
}

.btn.btn--light:hover .btn__ic {
  background: var(--accent);
  transform: rotate(45deg);
}

/* Sound / mute toggle — circular icon-only control, same language as
   .btn__ic / .icon-circle / .bag__close / .rcard__add. Two SVGs live
   inside: speaker-off (muted, default) and speaker (live). Visibility
   is swapped by .is-live, toggled from main.js. */
.hero__sound {
  position: absolute;
  right: var(--section-pad);
  bottom: clamp(24px, 3vw, 40px);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #111;
  color: #fff;
  cursor: pointer;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}

.hero__sound:hover {
  background: var(--accent);
}

.hero__sound:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.65);
  outline-offset: 3px;
}

.hero__sound-ic {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: inherit;
}

.hero__sound-ic svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* Idle (muted): speaker-off. Live: speaker with waves. */
.hero__sound-ic--on { display: none; }
.hero__sound.is-live .hero__sound-ic--off { display: none; }
.hero__sound.is-live .hero__sound-ic--on { display: grid; }

.pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 22px;
}

.pill {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #111;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: 0.25s var(--ease);
}

.pill.plus {
  width: 36px;
  padding: 0;
}

.pill.is-on,
.pill:hover {
  background: var(--ink);
  color: var(--white);
}

.shop {
  isolation: isolate;
  overflow: hidden;
  padding: clamp(72px, 8vw, 104px) var(--pad) clamp(36px, 4vw, 48px);
  background: #fff;
  color: var(--ink);
}

/* Shared copper gooey wash recipe for #types only. New Collection
   (#shop / .shop) stays a clean opaque #fff band — no ::before blob.
   overflow:hidden on .shop is for the product rail, not a glow clip. */
.types::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(230, 118, 58, 0.62) 0%,
    rgba(232, 160, 100, 0.38) 22%,
    rgba(255, 200, 140, 0.18) 46%,
    rgba(255, 220, 180, 0.08) 60%,
    transparent 74%
  );
  filter: blur(55px);
  pointer-events: none;
  z-index: 0;
}

/* .talk-sec layout is fully declared later; base rule kept minimal to avoid clashes. */
.talk-sec {
  background: var(--secondary);
}

.shop__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}

.label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.label i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.label span {
  color: rgba(0, 0, 0, 0.32);
  letter-spacing: 0.22em;
  padding-left: 6px;
  border-left: 1px solid rgba(0, 0, 0, 0.14);
}

/* i18n wrap-through — the first <span> inside a .label is treated as
   the eyebrow text (previously a raw text node) so it must inherit
   the parent's accent color/spacing and NOT show the divider that
   `.label span` uses for the trailing "count" chip.
   The `:first-of-type` guard leaves the count span (second child)
   untouched, preserving the original two-column look everywhere. */
.label > span:first-of-type {
  color: inherit;
  letter-spacing: inherit;
  padding-left: 0;
  border-left: 0;
}

/* RTL — mirror the count chip's divider from the LTR (left) side to
   the RTL (right) side so the vertical hairline still sits between
   the eyebrow text and the count, rather than orphaned at the far
   edge. Also clear the LTR-only left rule/padding so we don't get a
   double divider. Only targets the count span (2nd child); the
   :first-of-type override above already zeroes both sides for the
   eyebrow span, so this rule is additive not contradictory. */
[dir="rtl"] .label span {
  padding-left: 0;
  padding-right: 6px;
  border-left: 0;
  border-right: 1px solid rgba(0, 0, 0, 0.14);
}
[dir="rtl"] .label > span:first-of-type {
  padding-right: 0;
  border-right: 0;
}

.shop h2,
.talk-sec h2 {
  font-size: clamp(1.75rem, 3vw, 2.45rem);
  line-height: 1.12;
}

.shop h2 {
  font-family: var(--font-geist-sans);
  font-size: var(--home-h2);
  letter-spacing: -0.035em;
  font-weight: 700;
  line-height: 1.02;
  color: var(--ink);
}

.shop h2 em {
  font-family: inherit;
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
}

/* Mid-mobile / tablet tier — the shop-rail headline is a long
   two-clause sentence ("Made with intention. Meant to be worn.")
   that wrapped into 3+ lines at 41 px, dominating the section.
   Drop the min floor to 1.5rem (24 px) and the max to 1.9rem
   (30 px) so the headline scales fluidly with the viewport but
   never exceeds the shop rail's visual weight. Kept a tight
   line-height so the wrap remains cohesive. */
@media (max-width: 900px) {
  .talk-sec h2 {
    font-size: clamp(1.5rem, 3.4vw, 1.9rem);
    line-height: 1.1;
  }
}

.shop__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

.shop__intro {
  color: var(--muted);
  max-width: 40ch;
  font-size: 0.88rem;
  line-height: 1.55;
}

.shop__tools {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.shop__all {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}

.shop__nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.shop__arrow {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.shop__arrow svg {
  width: 14px;
  height: 14px;
}

.shop__arrow:hover:not(:disabled) {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.shop__arrow:disabled {
  opacity: 0.28;
  cursor: default;
}

[dir="rtl"] .shop__arrow svg {
  transform: scaleX(-1);
}

.shop__rail {
  /* Catalog density — previous 320 px cap made each bottle read as
     a poster instead of a shoppable SKU. 248 px still shows the
     bottle clearly on laptop/desktop while letting ~4.5 cards peek
     in a 1440 px viewport (e-commerce rail, not editorial billboard). */
  --card-w: clamp(196px, 16.8vw, 248px);
  --edge-pad: 0px;
  position: relative;
  z-index: 1;
  display: flex;
  gap: 16px;
  margin: 48px calc(var(--pad) * -1) 0;
  padding: 6px var(--pad) 20px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  /* Proximity (not mandatory) — mandatory snap fights every wheel frame,
     which turns diagonal trackpad gestures into visible page-scroll jitter
     when the cursor is over the rail. Proximity still snaps when the user
     releases near a card, without the intermediate tug-of-war. */
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--pad);
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
  scroll-behavior: smooth;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--pad), #000 calc(100% - var(--pad)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--pad), #000 calc(100% - var(--pad)), transparent 100%);
}

.shop__rail::-webkit-scrollbar { display: none; }

.shop__rail.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.shop__rail:focus-visible {
  outline: 2px solid rgba(167, 96, 74, 0.4);
  outline-offset: 4px;
  border-radius: 24px;
}

.shop__rail > .card,
.shop__rail > .rcard {
  flex: 0 0 var(--card-w);
  width: var(--card-w);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.shop__rail.is-dragging > .card,
.shop__rail.is-dragging > .rcard {
  pointer-events: none;
}

.shop__rail > .card .card__media img,
.shop__rail > .rcard .rcard__media img {
  -webkit-user-drag: none;
  user-select: none;
}

@media (max-width: 1440px) {
  .shop {
    padding-bottom: 24px;
  }

  .shop__rail {
    padding-bottom: 8px;
  }

  .types {
    padding-top: 28px;
  }
}

/* Register --is-hover as a numeric property so CSS can smoothly
   interpolate the lift/scale/Z-pop that reads var(--is-hover)
   inside the .card__media img transform. Without this, custom
   properties are treated as text and can't be transitioned. */
@property --is-hover {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.card {
  --is-hover: 0;
  position: relative;
  background: #fafaf7;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04);
  perspective: 1000px;
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.45s var(--ease),
    --is-hover 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.card:hover {
  transform: translateY(-6px);
  border-color: rgba(216, 175, 122, 0.5);
  box-shadow:
    0 24px 44px -22px rgba(167, 96, 74, 0.26),
    0 12px 22px -18px rgba(17, 17, 17, 0.14),
    0 0 0 1px rgba(216, 175, 122, 0.14) inset;
}

.card__media {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #f5f1ea;
  transform-style: preserve-3d;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* Anchor-wrapped h3 inherits the h3's typography so the name still looks like
   heading text, not a default blue underlined link. */
.card__meta h3 a {
  color: inherit;
  text-decoration: none;
}

.card__meta h3 a:hover {
  color: var(--accent);
}

.card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(
      120% 70% at 50% 42%,
      rgba(255, 224, 178, 0.4) 0%,
      rgba(232, 215, 187, 0.22) 32%,
      rgba(167, 96, 74, 0.06) 62%,
      rgba(0, 0, 0, 0) 82%
    ),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 62%, rgba(17, 17, 17, 0.1) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.card:hover .card__media::after { opacity: 1; }

.card__media::before {
  content: "";
  position: absolute;
  top: -15%;
  bottom: -15%;
  left: -40%;
  width: 50%;
  z-index: 2;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.04) 30%,
    rgba(255, 240, 210, 0.45) 50%,
    rgba(255, 255, 255, 0.04) 70%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(0) skewX(-16deg);
  opacity: 0;
  pointer-events: none;
  filter: blur(2px);
  transition:
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s var(--ease);
}

.card:hover .card__media::before {
  transform: translateX(300%) skewX(-16deg);
  opacity: 1;
  transition:
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.05s,
    opacity 0.25s var(--ease) 0.08s;
}

.card__media img {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform:
    translate3d(
      calc(var(--tx, 0) * 5px),
      calc(-5px * var(--is-hover, 0) + var(--ty, 0) * 4px),
      calc(var(--is-hover, 0) * 22px)
    )
    rotateY(calc(var(--tx, 0) * 8deg))
    rotateX(calc(var(--ty, 0) * -6deg))
    scale(calc(1 + var(--is-hover, 0) * 0.035));
  transform-origin: center 62%;
  transform-style: preserve-3d;
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.7s var(--ease);
  will-change: transform;
}

.card:hover .card__media img {
  filter: drop-shadow(0 22px 18px rgba(167, 96, 74, 0.22));
}

.card__idx,
.card__tag {
  z-index: 3;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.card:hover .card__idx { transform: translateY(-2px); }
.card:hover .card__tag { transform: translateY(-2px); }

.card h3 { position: relative; }

.card h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(216, 175, 122, 0.9) 100%);
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.card:hover h3::after { width: 38px; }

.card__price { transition: color 0.4s var(--ease); }
.card:hover .card__price { color: var(--accent); }

.card__idx {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.82);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  pointer-events: none;
}

.card__tag {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.82);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  pointer-events: none;
}

.card__meta {
  padding: 14px 16px 16px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Small-caps eyebrow — family + concentration/size on one line.
   <b> segment carries a slightly lower opacity + normal weight to
   read as secondary metadata. */
.card__family {
  font-family: var(--font-geist-sans);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.62);
  margin: 0;
  line-height: 1.4;
}

.card__family b {
  font-weight: 600;
  color: rgba(17, 17, 17, 0.38);
  letter-spacing: 0.22em;
}

.card__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
}

.card h3 {
  font-family: var(--font-geist-sans);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.18;
  color: var(--ink);
  /* Reserve two lines so cards keep uniform heights when longer product
     names (e.g. "Shaghaf Amber Infusion") wrap in narrow slots. */
  min-height: calc(1.18em * 2);
  /* Grow to take remaining row space so long names wrap gracefully
     instead of overflowing next to the price. min-width:0 avoids the
     flex item's implicit min-content floor that prevents wrapping. */
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  overflow-wrap: anywhere;
}

.card__price {
  font-family: var(--font-geist-sans);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.card__notes {
  font-family: var(--font-geist-sans);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(17, 17, 17, 0.62);
  margin: 4px 0 4px;
  /* Clamp to 2 lines so cards keep uniform heights when note lengths differ.
     min-height reserves the vertical space up-front — avoids grid jitter. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.55em * 2);
  transition: color 0.35s var(--ease);
}

.card:hover .card__notes {
  color: rgba(17, 17, 17, 0.88);
}

/* Footer row — hairline divider, CTA on the left, secondary link on the right. */
.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(17, 17, 17, 0.08);
}

.card__add {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 34px;
  padding: 0 4px 0 10px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-geist-sans);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.35s var(--ease),
    color 0.35s var(--ease),
    border-color 0.35s var(--ease);
}

.card__add span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.card__add .arrow {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 0.8rem;
  transition:
    background 0.35s var(--ease),
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.card__add:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.card__add:hover .arrow {
  background: var(--accent);
  transform: translate(3px, -3px) rotate(-4deg);
}

.card__add:active .arrow {
  transform: translate(1px, -1px) scale(0.94);
}

/* "Details" secondary text link — sits at the right edge of the footer.
   Hairline underline draws through the whole word (right-anchored) at rest,
   then re-anchors left on hover to flip direction. */
.card__more {
  position: relative;
  flex: 0 0 auto;
  padding: 4px 2px;
  font-family: var(--font-geist-sans);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(17, 17, 17, 0.55);
  transition: color 0.3s var(--ease);
}

.card__more::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: rgba(17, 17, 17, 0.2);
  transform-origin: right;
  transition: background 0.3s, transform 0.4s var(--ease);
}

.card__more:hover {
  color: var(--ink);
}

.card__more:hover::after {
  background: var(--ink);
  transform: scaleX(1.06);
  transform-origin: left;
}

/* -- .card__go (rounded arrow) --------------------------------------
   Compact circle CTA that sits at the right end of .card__foot next to
   .card__notes. Provides a clear "view this product" affordance without
   competing with the card's other links (media / h3 anchor). Uses the
   same ↗ arrow language and diagonal-translate hover as other CTAs on
   the site (.picks__cta, .fam__go, .card__add .arrow). */
.card__foot .card__notes {
  /* Inside the foot row, notes shares horizontal space with .card__go.
     flex + min-width:0 lets webkit-box line-clamp shrink correctly;
     margin reset removes the vertical rhythm meant for block context. */
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.card__go {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1;
  transition:
    background 0.4s var(--ease),
    transform 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}

.card__go span {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.card__go:hover {
  background: var(--accent);
  transform: scale(1.06);
  box-shadow: 0 8px 22px -12px rgba(17, 17, 17, 0.4);
}

.card__go:hover span {
  transform: translate(3px, -3px);
}

.card__go:active {
  transform: scale(0.97);
}

.card__go:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ==============================================================
   Compact card overlay — laptop viewport only (900–1439 px).
   --------------------------------------------------------------
   Sits as a SIBLING of .card__media (not nested inside its <a>
   element) so the interactive plus/arrow inside it is real
   <button> / <a> markup, not a role="button" hack — no nested-
   interactive HTML issues.

   Position math: .card has `position: relative` + `overflow: hidden`;
   at the laptop breakpoint below, .card__meta is display:none so
   the .card's rendered height collapses to just its .card__media
   (aspect-ratio 4/5 of --card-w). That means `bottom: 0` on the
   overlay lands at the visual bottom of the bottle photo — no
   dependency on any hard-coded height.

   Gradient layer lives on ::before so it can extend UP past the
   overlay's own padding box, fading smoothly into the bottle
   photo without ever showing a hard edge. The name + button
   render on top with pointer-events explicit, so clicks route
   only where they should. Backdrop-filter on ::before gives the
   requested "blurred gradient at the bottom edge only" feel.
   ============================================================== */
.card__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 18px 18px;
  /* Container itself does not capture clicks — only the plus/arrow
     child does. Keeps the underlying .card__media anchor clickable
     for "view product" everywhere the overlay isn't specifically
     the plus icon. */
  pointer-events: none;
}

/* Gradient + blur bg. Sits BEHIND the name/button (negative z-index
   relative to overlay) and extends UP past the padding box so the
   fade to transparent happens well above any text glyphs. Mask
   softens the top edge so the blur transitions smoothly, not hard-cut. */
.card__overlay::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(100% + 60px);
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(255, 255, 255, 0.82) 42%,
    rgba(255, 255, 255, 0.28) 78%,
    rgba(255, 255, 255, 0) 100%
  );
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(to top, black 45%, transparent 100%);
  mask-image: linear-gradient(to top, black 45%, transparent 100%);
  pointer-events: none;
}

.card__overlay-name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-geist-sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  transition: color 0.35s var(--ease);
}

.card:hover .card__overlay-name {
  color: var(--accent);
}

/* Plus / arrow chip — single element covering BOTH the button
   (catalog cards, real <button data-add>) and the link (line-
   extension cards, real <a href>). Both are inline-flex 36px
   circles with the same hover/active choreography. */
.card__overlay-add {
  pointer-events: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-family: inherit;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition:
    background 0.35s var(--ease),
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.card__overlay-add:hover {
  background: var(--accent);
  transform: scale(1.08);
}

.card__overlay-add:active {
  transform: scale(0.94);
}

.card__overlay-add:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Line-extension variant — same shape, uses ↗ arrow instead of +
   so the icon language distinguishes "explore" from "add to bag"
   at a glance. Slightly smaller font since the arrow glyph reads
   larger than "+". */
.card__overlay-add--explore {
  font-size: 1rem;
}

/* Compact-overlay viewport range — anything BELOW the "large desktop"
   comfort zone (≥1440px) uses the compact overlay instead of the full
   .card__meta card body. This unifies the visual across:
     • Laptop  (900–1439 px) — original overlay target range
     • Tablet  (601–900 px)  — swipe carousel
     • Mobile  (≤600 px)     — snap carousel
   Only the >=1440 px desktop tier keeps the full meta card (family,
   price row, "Add to bag" pill, "Details" link) since it has the
   horizontal grid room to justify it. Hover / tilt / glow / shine
   choreography stays untouched — this rule only toggles WHICH body
   region is visible. */
@media (max-width: 1439px) {
  .card__meta {
    display: none;
  }
  .card__overlay {
    display: flex;
  }
}

/* Laptop overlay (901–1439 px) — the compact card is short enough that
   the default 18 px bottom padding + 60 px blur veil hid the bottle
   base and left a dead white band under the name. Pull the name/plus
   flush to the image edge, lighten the veil so the full bottle reads,
   and hide the index/badge chips (they compete with a small card).
   Phones (≤900) keep chips + the larger tap overlay. Wide desktop
   (≥1440) keeps the full meta card with chips. */
@media (min-width: 901px) and (max-width: 1439px) {
  .card__idx,
  .card__tag {
    display: none;
  }
  .card__media img {
    object-fit: cover;
    object-position: center center;
  }
  .card__overlay {
    padding: 8px 12px 8px;
    gap: 8px;
    align-items: flex-end;
  }
  .card__overlay::before {
    height: calc(100% + 22px);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    background: linear-gradient(
      to top,
      rgba(255, 255, 255, 0.86) 0%,
      rgba(255, 255, 255, 0.38) 55%,
      rgba(255, 255, 255, 0) 100%
    );
    -webkit-mask-image: linear-gradient(to top, black 40%, transparent 100%);
    mask-image: linear-gradient(to top, black 40%, transparent 100%);
  }
  .card__overlay-name {
    font-size: 0.78rem;
    padding-bottom:8px;
  }
}

/* Mobile / tablet ergonomics — bump the overlay's tap target and
   glyph legibility for touch. WCAG 2.5.5 asks for ≥44 px tap
   surfaces; the 36 px desktop chip fails that below hover-capable
   viewports. Also up the name size a touch since a mobile card
   fills 78–82 vw and the previous 0.98 rem read too small at that
   scale. Scoped strictly to non-hover pointers so we don't blow up
   the desktop overlay dimensions. */
@media (max-width: 900px) {
  .card__overlay {
    padding: 18px 14px 14px;
  }
  .card__overlay-name {
    font-size: 0.86rem;
    font-weight: 700;
  }
  .card__overlay-add {
    width: 42px;
    height: 42px;
    font-size: 1.25rem;
  }
  /* Disable hover-tint on touch surfaces so the button doesn't
     "stick" in the hover state after a tap. */
  .card__overlay-add:hover {
    background: var(--ink);
    transform: none;
  }
}

@media (max-width: 400px) {
  .card__overlay {
    padding: 16px 12px 12px;
  }
  .card__overlay-name {
    font-size: 0.8rem;
  }
  .card__overlay-add {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
}

/* Reduced-motion — kill the overlay-add scale bounce. Colour /
   background transitions stay as they're not vestibular triggers. */
@media (prefers-reduced-motion: reduce) {
  .card__overlay-add,
  .card__overlay-add:hover,
  .card__overlay-add:active {
    transform: none;
  }
}

/* ==========================================================
   Marquee — bold running band under hero
   ========================================================== */
.mrq {
  overflow: hidden;
  padding: clamp(28px, 5vh, 56px) 0;
  background: #fff;
  border-top: 1px solid rgba(17, 17, 17, 0.06);
  border-bottom: 1px solid rgba(17, 17, 17, 0.06);
}

.mrq__row {
  display: flex;
  width: 100%;
}

.mrq__track {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(28px, 4vw, 60px);
  padding-right: clamp(28px, 4vw, 60px);
  white-space: nowrap;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.mrq__item {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.mrq__word {
  font-family: var(--font-geist-sans);
  font-size: clamp(2.15rem, 5.6vw, 4.8rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--ink);
}

.mrq__ic {
  display: inline-grid;
  place-items: center;
  width: clamp(58px, 6vw, 96px);
  height: clamp(58px, 6vw, 96px);
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 400;
  line-height: 1;
  transform: rotate(-2deg);
}

.mrq__img {
  overflow: hidden;
  width: clamp(120px, 12vw, 200px);
  height: clamp(80px, 8vh, 130px);
  border-radius: 999px;
  background: #f5f1ea;
  border: 1px solid rgba(17, 17, 17, 0.06);
}

.mrq__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .mrq__track { transform: none !important; }
}

/* ==========================================================
   Types — men / women / unisex mosaic
   ----------------------------------------------------------
   MUST sit above the fixed hero film (.hero__bg is position:fixed
   z-index:0). This section is also in the shared z-index:2 list
   with .shop / .families. Opaque paper fill so the hero video
   cannot show through. Default media is a still. Video is injected
   on hover only and never uses commercial.mp4 (the hero file).
   ========================================================== */
.types {
  isolation: isolate;
  overflow: hidden;
  padding: clamp(36px, 4vw, 52px) var(--pad) clamp(56px, 6vw, 80px);
  background: #fff;
  color: var(--ink);
}

/* Bottom-left copper wash on #types only — New Collection has no
   matching orb. left/right, not inline-start, so RTL does not flip. */
.types::before {
  bottom: -20%;
  left: -14%;
  width: min(52vw, 560px);
  height: min(42vw, 440px);
  animation: subscribeGlow 12s ease-in-out infinite alternate-reverse;
}

.types__head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: end;
  gap: 48px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.types__title h2 {
  font-family: var(--font-geist-sans);
  font-size: var(--home-h2);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--ink);
}

.types__title h2 em {
  font-family: inherit;
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
}

.types__lede {
  color: var(--muted);
  max-width: 40ch;
  font-size: 0.88rem;
  line-height: 1.6;
  justify-self: end;
}

.types__mosaic {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  height: min(72vh, 720px);
  min-height: 520px;
  margin-top: 40px;
}

.types__tile {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 20px;
  background: #1a1412;
  min-height: 0;
}

.types__tile--women {
  grid-row: 1 / span 2;
}

.types__img,
.types__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.types__img {
  z-index: 1;
  object-fit: cover;
  object-position: 50% 24%;
  transform: scale(1);
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .types__tile:hover .types__img {
    transform: scale(1.07);
  }

  .types__tile:hover .types__shade {
    background: linear-gradient(180deg, rgba(12, 10, 8, 0) 48%, rgba(0, 0, 0, 0.72) 100%);
  }
}

.types__shade {
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(12, 10, 8, 0.12) 0%, rgba(12, 10, 8, 0.04) 42%, rgba(12, 10, 8, 0.76) 100%);
  transition: background 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.types__meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 28px;
  pointer-events: none;
  color: #fff;
}

.types__idx {
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
}

.types__meta h3 {
  font-family: var(--font-geist-sans);
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.types__meta p {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.64);
}

.types__link {
  position: absolute;
  inset: 0;
  z-index: 5;
}

[dir="rtl"] .types__lede {
  justify-self: start;
}

@media (max-width: 900px) {
  .types__head {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-bottom: 32px;
  }

  .types__lede {
    justify-self: start;
  }

  .shop h2,
  .types__title h2,
  .families__title h2,
  .hgallery__title,
  .picks__title,
  .promos__head h2 {
    font-size: var(--home-h2);
  }

  .types__mosaic {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    height: auto;
    min-height: 0;
    gap: 8px;
    margin-top: 28px;
  }

  .types__tile--women {
    grid-row: auto;
    min-height: 420px;
  }

  .types__tile--men,
  .types__tile--unisex {
    min-height: 260px;
  }

  .types__meta {
    padding: 22px 20px;
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  .types__mosaic {
    grid-template-columns: 1fr 1fr;
  }

  .types__tile--women {
    grid-column: 1 / -1;
    min-height: 400px;
  }

  .types__tile--men,
  .types__tile--unisex {
    min-height: 280px;
  }
}

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

  .types__img {
    transition: none;
    transform: none;
  }
}

/* ==========================================================
   Fragrance Families — bento showcase of scent categories
   ========================================================== */
.families {
  padding: clamp(72px, 8vw, 104px) var(--pad) clamp(64px, 8vw, 96px);
  background: #f9f6f0;
  color: var(--ink);
}

.families__head {
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
  gap: 0;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Section title — matches the marquee (.pbanner__title) and cinema title system:
   Geist sans-serif at 700, non-italic, accent color for emphasis (no serif switch). */
.families__title h2 {
  font-family: var(--font-geist-sans);
  font-size: var(--home-h2);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--ink);
}

.families__title h2 em {
  font-family: inherit;
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: inherit;
}

.families__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

.families__intro {
  color: var(--muted);
  max-width: 44ch;
  font-size: 0.88rem;
  line-height: 1.6;
}

.families__all {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 22px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  transition: 0.3s var(--ease);
}

.families__all .arrow {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  transition: 0.3s var(--ease);
}

.families__all:hover {
  background: var(--ink);
  color: #fff;
}

.families__all:hover .arrow {
  background: var(--accent);
  transform: translate(2px, -2px);
}

.families__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 48px;
}

.fam {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 292px;
  padding: 20px;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.7s var(--ease),
    box-shadow 0.6s var(--ease);
}

.fam:focus-visible {
  outline: 2px solid rgba(167, 96, 74, 0.55);
  outline-offset: 4px;
}

/* Isolated stack so the bottle sits ON the wash, not under it.
   0  ::before  family gradient fill
   1  ::after   highlight / shadow wash
   2  .fam__media  bottle (above wash; title stays left via max-width)
   3  .fam__idx / .fam__body  chip + copy
   4  .fam__go  Discover CTA */
.fam::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--fam-bg);
  transition: transform 1.2s var(--ease);
}

.fam::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(80% 60% at 0% 100%, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0) 60%);
  opacity: 0.95;
  pointer-events: none;
}

.fam:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.25);
}

.fam:hover::before {
  transform: scale(1.06);
}

.fam--floral {
  --fam-bg: linear-gradient(155deg, #fce4dc 0%, #f2c1b1 55%, #d99785 100%);
  color: #4a2018;
}

.fam--woody {
  --fam-bg: linear-gradient(155deg, #e8d5b8 0%, #b98d5c 55%, #6b4a2a 100%);
  color: #2f1e10;
}

.fam--oriental {
  --fam-bg: linear-gradient(155deg, #efd39b 0%, #c67338 45%, #5a1218 100%);
  color: #2a0808;
}

.fam--fresh {
  --fam-bg: linear-gradient(155deg, #e5ede0 0%, #b8d3c2 55%, #7ba692 100%);
  color: #17332a;
}

.fam--musk {
  --fam-bg: linear-gradient(155deg, #f3e6d0 0%, #d6bd97 55%, #967651 100%);
  color: #2f2213;
}

.fam--smoke {
  --fam-bg: linear-gradient(155deg, #d6d0c6 0%, #6f685f 55%, #1b1815 100%);
  color: #f3ede2;
}

.fam__idx {
  position: relative;
  z-index: 3;
  align-self: flex-start;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  opacity: 0.78;
  text-transform: uppercase;
  transition: opacity 0.4s var(--ease);
}

.fam__media {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 42%;
  height: calc(100% - 36px);
  z-index: 2;
  isolation: isolate;
  pointer-events: none;
  /* Knock out the baked-in white studio plate against the card
     gradient. Blend lives on the media stack (not each img) so
     the rest/live crossfade does not multiply the two frames. */
  mix-blend-mode: multiply;
}

/* #families-only stacked swap. Mirrors #shop .rcard__media--swap
   timings (rest 0.55s/0.7s, live 0.6s/0.75s, same ease) so the
   bottle is always on the right: rest = bottle-only, hover =
   ingredients. Shop + hgallery selectors are untouched. */
#families .fam__media--swap {
  --hg-ease: cubic-bezier(0.76, 0, 0.24, 1);
}

#families .fam__media--swap .fam__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
  object-fit: contain;
  object-position: center;
}

#families .fam__media--swap .fam__img--rest {
  z-index: 1;
  opacity: 1;
  transform: scale(1);
  transition:
    transform 0.7s var(--hg-ease),
    opacity 0.55s var(--hg-ease);
}

#families .fam__media--swap .fam__img--live {
  z-index: 2;
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
  transition:
    opacity 0.6s var(--hg-ease),
    transform 0.75s var(--hg-ease);
}

@media (hover: hover) and (pointer: fine) {
  #families .fam:hover .fam__media--swap .fam__img--rest {
    opacity: 0;
    transform: scale(1.06);
  }

  #families .fam:hover .fam__media--swap .fam__img--live {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  #families .fam__media--swap .fam__img--rest,
  #families .fam__media--swap .fam__img--live {
    transition: none;
  }
}

.fam__body {
  position: relative;
  z-index: 3;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 58%;
}

/* Card name — matches .pcard__row h3 typography (Geist sans, bold, tight tracking).
   No italic, no serif, no thin weights — same visual system as the marquee cards. */
.fam__body h3 {
  font-family: var(--font-geist-sans);
  font-size: clamp(1.35rem, 1.9vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.02;
  color: inherit;
}

.fam__notes {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.7;
  margin-top: 6px;
}

.fam__desc {
  font-size: 0.86rem;
  line-height: 1.5;
  color: inherit;
  opacity: 0.78;
  max-width: 28ch;
  margin-top: 6px;
}

.fam__go {
  position: relative;
  z-index: 4;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 0;
  color: inherit;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.fam__go span {
  opacity: 0.5;
  transform: translateX(-6px);
  transition:
    opacity 0.4s var(--ease),
    transform 0.4s var(--ease);
}

.fam__go b {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  /* Two-tone circle: the background uses a per-variant light color
     via --fam-go-bg, and the ↗ arrow glyph uses --fam-go-fg (dark
     ink). Previously both used `currentColor` which made the two
     tones collapse to one and the arrow disappeared. Falls back to
     a black disc if the variant hasn't declared its own token. */
  background: var(--fam-go-bg, #0f0f0f);
  color: var(--fam-go-fg, #f7f4ed);
  font-size: 0.98rem;
  font-style: normal;
  line-height: 1;
  transition:
    transform 0.4s var(--ease),
    background 0.4s var(--ease),
    color 0.4s var(--ease);
}

/* Per-variant token pairs — pick a light background matching the
   card gradient (unchanged from the previous single `color:` value)
   plus a matching dark ink so the ↗ reads on any card. */
.fam--floral   { --fam-go-bg: #fce4dc; --fam-go-fg: #4a2018; }
.fam--woody    { --fam-go-bg: #e8d5b8; --fam-go-fg: #2f1e10; }
.fam--oriental { --fam-go-bg: #efd39b; --fam-go-fg: #2a0808; }
.fam--fresh    { --fam-go-bg: #e5ede0; --fam-go-fg: #17332a; }
.fam--musk     { --fam-go-bg: #f3e6d0; --fam-go-fg: #2f2213; }
/* Smoke: the darkest card. Invert the pair so the disc reads as an
   INK-BLACK circle with a cream ↗ — matches the "black circle"
   accent the user requested (this card was the odd one out with
   its near-black background making the ↗ vanish before). */
.fam--smoke    { --fam-go-bg: #1b1815; --fam-go-fg: #f3ede2; }

.fam:hover .fam__go span {
  opacity: 1;
  transform: translateX(0);
}

.fam:hover .fam__go b {
  transform: rotate(-8deg) translate(3px, -3px);
}

@media (max-width: 1100px) {
  .families__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
  .families__head { grid-template-columns: 1fr; align-items: start; gap: 24px; }
}

@media (max-width: 640px) {
  .families__grid { grid-template-columns: 1fr; }
  .fam { min-height: 248px; }
  .fam__body { max-width: 60%; }
  .fam__media { width: 38%; }
  .fam__go span { opacity: 1; transform: none; }
}

@media (hover: none) {
  .fam__go span { opacity: 1; transform: none; }
}

/* ==========================================================
   Horizontal Editorial Gallery — scroll-driven, sticky pin
   Palette: Obsidian / Deep Burgundy / Champagne Gold / Ivory
   ========================================================== */
.hgallery {
  --obsidian: #171310;
  --burgundy: #5a171d;
  --gold: #c6a56b;
  --ivory: #f5f0e8;
  --ivory-warm: #ede4d3;
  --hg-ease: cubic-bezier(0.76, 0, 0.24, 1);

  position: relative;
  min-height: 100vh;
  background: var(--ivory);
  color: var(--obsidian);
  font-family: var(--font-benton-sans-wide);
}

.hgallery__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
}

.hgallery__grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  background:
    radial-gradient(1200px 600px at 12% 20%, rgba(198, 165, 107, 0.22) 0%, rgba(245, 240, 232, 0) 55%),
    radial-gradient(1000px 500px at 90% 80%, rgba(90, 23, 29, 0.14) 0%, rgba(245, 240, 232, 0) 55%);
}

.hgallery__sticky::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(40vw, 560px);
  z-index: 2;
  background: linear-gradient(
    90deg,
    var(--ivory) 0%,
    var(--ivory) 55%,
    rgba(245, 240, 232, 0) 100%
  );
  pointer-events: none;
}

.hgallery__head {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: min(30vw, 460px);
  height: 100%;
  padding: clamp(118px, 15vh, 172px) clamp(28px, 4vw, 60px) clamp(50px, 7vh, 80px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  pointer-events: none;
}

.hgallery__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--burgundy);
}

.hgallery__eyebrow span {
  width: 26px;
  height: 1px;
  background: var(--gold);
}

/* Section title — matches the marquee (.pbanner__title) typography system:
   Geist sans at 700, non-italic. Burgundy accent color preserved for section palette identity. */
.hgallery__title {
  font-family: var(--font-geist-sans);
  font-size: var(--home-h2);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--obsidian);
  margin: 0 0 20px;
}

.hgallery__title em {
  font-family: inherit;
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: inherit;
}

.hgallery__lede {
  max-width: 30ch;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(23, 19, 16, 0.62);
}

.hgallery__meter {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-geist-sans);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--obsidian);
  margin-top: auto;
  pointer-events: auto;
}

.hgallery__meter b {
  font-weight: 600;
  color: var(--obsidian);
  min-width: 1.6em;
  display: inline-block;
}

.hgallery__meter .hgallery__total {
  color: rgba(23, 19, 16, 0.4);
}

.hgallery__meter-bar {
  position: relative;
  flex: 1;
  min-width: 90px;
  height: 1px;
  background: rgba(23, 19, 16, 0.16);
  overflow: hidden;
}

.hgallery__meter-bar i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--obsidian);
  transition: width 0.18s linear;
}

.hgallery__hint {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(23, 19, 16, 0.48);
}

.hgallery__hint-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(198, 165, 107, 0.18);
  animation: hgPulse 2.4s ease-in-out infinite;
}

@keyframes hgPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.7); opacity: 0.6; }
}

.hgallery__track {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 22px);
  height: 100%;
  padding: 0 clamp(60px, 8vw, 140px) 0 min(32vw, 480px);
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.hgallery__item {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.hgallery__item { width: clamp(320px, 32vw, 460px); }

.hgallery__link {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: 22px;
  text-indent: -9999px;
  overflow: hidden;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 0.4s var(--hg-ease);
}

.hgallery__link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ivory-warm), 0 0 0 4px var(--gold);
}

.hgallery__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  height: clamp(440px, 66vh, 620px);
  overflow: hidden;
  isolation: isolate;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 24px 60px -20px rgba(23, 19, 16, 0.28);
}

.hgallery__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center 58%;
}

.hgallery__shot--rest {
  z-index: 1;
  transform: scale(1.06);
  opacity: 0.6;
  filter: blur(6px);
  transition:
    transform 1.2s var(--hg-ease),
    opacity 0.85s var(--hg-ease),
    filter 0.85s var(--hg-ease);
}

.hgallery__shot--live {
  z-index: 2;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
  transition:
    opacity 0.95s var(--hg-ease),
    transform 1.25s var(--hg-ease);
}

.hgallery__item.is-in .hgallery__shot--rest {
  transform: scale(1);
  opacity: 1;
  filter: blur(0);
}

@media (hover: hover) and (pointer: fine) {
  .hgallery__item:hover .hgallery__shot--rest {
    opacity: 0;
    transform: scale(1.06);
  }

  .hgallery__item:hover .hgallery__shot--live {
    opacity: 1;
    transform: scale(1);
  }
}

.hgallery__frame::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46%;
  z-index: 3;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.58) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s var(--hg-ease);
}

.hgallery__item:hover .hgallery__frame::after { opacity: 1; }

.hgallery__discover {
  position: absolute;
  left: 22px;
  bottom: 22px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(245, 240, 232, 0.94);
  color: var(--obsidian);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.5s var(--hg-ease),
    transform 0.5s var(--hg-ease);
  pointer-events: none;
}

.hgallery__discover::after {
  content: "↗";
  color: var(--burgundy);
  font-weight: 500;
}

.hgallery__item:hover .hgallery__discover {
  opacity: 1;
  transform: none;
}

.hgallery__item figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 4px;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.8s var(--hg-ease) 0.15s,
    transform 0.8s var(--hg-ease) 0.15s;
}

.hgallery__item.is-in figcaption {
  opacity: 1;
  transform: none;
}

.hgallery__cap-i {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Card label — matches .pcard__row h3 / .fam__body h3: Geist sans, bold, tight tracking. */
.hgallery__item figcaption b {
  font-family: var(--font-geist-sans);
  font-size: clamp(1.3rem, 1.7vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--obsidian);
  line-height: 1.1;
}

.hgallery__item figcaption em {
  font-style: normal;
  font-size: 0.82rem;
  color: rgba(23, 19, 16, 0.58);
  line-height: 1.4;
  max-width: 34ch;
}

/* Laptop-only card scale (901–1440 px). Base cards are 66 vh / 460 px
   which reads as a full-bleed poster on a 1366×768 / 1440×900 laptop —
   the frame plus caption eat the viewport. Trim width and height here
   so two cards sit comfortably beside the sticky title. Phones (≤900)
   keep their snap-carousel sizes; wide desktop (>1440) keeps the
   editorial poster scale. */
@media (min-width: 901px) and (max-width: 1440px) {
  .hgallery__item {
    width: clamp(220px, 22vw, 300px);
    gap: 14px;
  }
  .hgallery__frame {
    height: clamp(280px, 55vh, 400px);
    border-radius: 16px;
    box-shadow: 0 16px 40px -18px rgba(23, 19, 16, 0.24);
  }
  .hgallery__item figcaption b {
    font-size: clamp(1.05rem, 1.2vw, 1.25rem);
  }
  .hgallery__item figcaption em {
    font-size: 0.74rem;
  }
}

@media (max-width: 1100px) {
  .hgallery__head {
    width: min(34vw, 420px);
  }
  .hgallery__track {
    padding-left: min(36vw, 460px);
  }
}

@media (max-width: 900px) {
  .hgallery {
    height: auto !important;
  }
  .hgallery__sticky {
    position: relative;
    height: auto;
    padding: 80px 0 60px;
  }
  .hgallery__head {
    position: relative;
    width: 100%;
    height: auto;
    padding: 20px var(--pad) 40px;
  }
  .hgallery__meter { max-width: 320px; }
  .hgallery__track {
    height: auto;
    padding: 20px var(--pad) 40px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    transform: none !important;
    scrollbar-width: none;
  }
  .hgallery__track::-webkit-scrollbar { display: none; }
  .hgallery__item {
    scroll-snap-align: start;
    width: 78vw;
  }
  .hgallery__frame { height: 58vh; }
  .hgallery__shot--rest {
    opacity: 1;
    filter: none;
    transform: none;
  }
  .hgallery__item figcaption {
    opacity: 1;
    transform: none;
  }
}

/* Kill the desktop left-side ivory fade on small phones. On desktop this
   ::after gradient sits behind the sticky title so cards blend in from the
   left. Below 900 px the title stacks above the track (see rule above), so
   the fade has nothing to anchor and simply paints a 40 vw ivory bar over
   the first card's caption — visible in QA on ≤ 500 px devices. */
@media (max-width: 500px) {
  .hgallery__sticky::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hgallery__track { transition: none !important; }
  .hgallery__shot--rest {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
  .hgallery__shot--live {
    transition: none;
  }
  .hgallery__item figcaption {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==============================================================
   BANNERS — campaign slider (replaces the old manifesto slot)
   Inset 20px frame, full-bleed photography, promo-style overlay.
   Opaque paper so the fixed hero film cannot show through.
   ============================================================== */
.banners {
  position: relative;
  z-index: 2;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(28px, 3.4vw, 48px) var(--pad);
  background: #fff;
  color: #fff;
}

.banners__inner {
  position: relative;
  max-width: var(--section-max);
  margin: 0 auto;
}

.banners__viewport {
  position: relative;
  overflow: hidden;
  height: clamp(420px, 62vh, 640px);
  border-radius: 20px;
  background: #111;
  touch-action: pan-y;
}

.banners__track {
  display: flex;
  height: 100%;
  will-change: transform;
  transition: transform 0.85s var(--ease);
}

.banner {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
}

.banner__link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  color: #fff;
}

.banner__media,
.banner__shade {
  position: absolute;
  inset: 0;
}

.banner__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.4s var(--ease);
}

.banner--oud .banner__media img { object-position: 78% center; }
.banner--blush .banner__media img { object-position: 50% 42%; }
.banner--toffee .banner__media img { object-position: 86% center; }

.banner--toffee .banner__shade {
  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.12) 40%,
      transparent 70%
    ),
    linear-gradient(
      to right,
      rgba(17, 17, 17, 0.58) 0%,
      rgba(17, 17, 17, 0.18) 40%,
      transparent 64%
    );
}

[dir="rtl"] .banner--toffee .banner__shade {
  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.12) 40%,
      transparent 70%
    ),
    linear-gradient(
      to left,
      rgba(17, 17, 17, 0.58) 0%,
      rgba(17, 17, 17, 0.18) 40%,
      transparent 64%
    );
}

.banner__link:hover .banner__media img {
  transform: scale(1.07);
}

.banner__shade {
  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.74) 0%,
      rgba(0, 0, 0, 0.28) 42%,
      rgba(0, 0, 0, 0.04) 70%,
      transparent 100%
    ),
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.42) 0%,
      transparent 52%
    );
  pointer-events: none;
}

[dir="rtl"] .banner__shade {
  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.74) 0%,
      rgba(0, 0, 0, 0.28) 42%,
      rgba(0, 0, 0, 0.04) 70%,
      transparent 100%
    ),
    linear-gradient(
      to left,
      rgba(0, 0, 0, 0.42) 0%,
      transparent 52%
    );
}

.banner__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: clamp(22px, 2.8vw, 40px);
  max-width: 42rem;
}

[dir="rtl"] .banner__body {
  align-items: flex-end;
}

.banner__eyebrow {
  font-family: var(--font-geist-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #d4a08e;
}

.banner__body h3 {
  margin: 0;
  max-width: 16ch;
  font-family: var(--font-geist-sans);
  font-size: clamp(1.75rem, 3vw, 2.45rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: #fff;
}

.banner__body h3 em {
  font-family: inherit;
  font-style: normal;
  font-weight: 700;
  color: #d4a08e;
}

.banner__body p {
  margin: 0 0 6px;
  max-width: 34ch;
  font-family: var(--font-geist-sans);
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
}

.banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  padding: 4px 4px 4px 22px;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-family: var(--font-geist-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  transition: transform 0.4s var(--ease);
}

.banner__cta b {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #111;
  color: #fff;
  font-style: normal;
  font-size: 0.9rem;
}

.banner__link:hover .banner__cta {
  transform: translateY(-2px);
}

.banner__link:hover .banner__cta b {
  transform: rotate(-8deg) translate(2px, -2px);
}

.banners__ui {
  position: absolute;
  right: clamp(18px, 2vw, 28px);
  bottom: clamp(18px, 2vw, 28px);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
}

[dir="rtl"] .banners__ui {
  right: auto;
  left: clamp(18px, 2vw, 28px);
}

.banners__arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.42);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}

.banners__arrow svg {
  width: 14px;
  height: 14px;
}

.banners__arrow:hover {
  background: #fff;
  border-color: #fff;
  color: #111;
}

[dir="rtl"] .banners__arrow svg {
  transform: scaleX(-1);
}

.banners__dots {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
}

.banners__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.38);
  cursor: pointer;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}

.banners__dot.is-on {
  background: #fff;
  transform: scale(1.2);
}

@media (min-width: 981px) and (max-width: 1280px) {
  /* Marquee stays inside the catalog display scale — never larger
     than the 4.8 rem desktop cap set on the base .mrq__word. */
  .mrq__word { font-size: clamp(2.15rem, 4.8vw, 3.6rem); }
}

@media (min-width: 1281px) and (max-width: 1440px) {
  .mrq__word { font-size: clamp(2.15rem, 4.8vw, 3.6rem); }
}

@media (max-width: 900px) {
  .banners { padding: 20px var(--pad); }
  .banners__viewport { height: clamp(380px, 78vw, 520px); }
  .banner__body { max-width: none; padding: 22px 20px 72px; }
  .banner__body h3 { font-size: var(--home-h2); }
  .banners__ui {
    right: 16px;
    bottom: 16px;
  }
  [dir="rtl"] .banners__ui {
    left: 16px;
  }
}

@media (hover: none) {
  .banner__media img,
  .banner__link:hover .banner__media img,
  .banner__link:hover .banner__cta,
  .banner__link:hover .banner__cta b {
    transform: none;
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .banners__track,
  .banner__media img,
  .banner__cta,
  .banners__dot {
    transition: none;
  }
}

/* ==============================================================
   TOP PICKS — split editorial: featured bestseller + chart
   ============================================================== */
.picks {
  --picks-ink: #14100e;
  --picks-warm: #f5f0e8;
  --picks-gold: #c6a56b;
  --picks-burgundy: #4a151a;
  position: relative;
  padding: 0;
  background: var(--picks-warm);
  color: var(--picks-ink);
  overflow: hidden;
}

.picks__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  min-height: clamp(620px, 78vh, 760px);
}

/* ---------- Left: editorial featured product (light) ---------- */
.picks__left {
  position: relative;
  isolation: isolate;
  padding: clamp(24px, 2.8vw, 40px) clamp(28px, 3.6vw, 52px);
  background: #ffffff;
  color: var(--picks-ink);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(12px, 1.4vw, 18px);
  overflow: hidden;
  min-height: 0;
  border-right: 1px solid rgba(20, 16, 14, 0.06);
  perspective: 1000px;
}

.picks__grain { display: none; }

.picks__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(55% 35% at 50% 40%, rgba(198, 165, 107, 0.10) 0%, transparent 72%),
    radial-gradient(80% 60% at 100% 0%, rgba(74, 21, 26, 0.03) 0%, transparent 60%);
  pointer-events: none;
}

.picks__topline {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.picks__eyebrow {
  font-family: var(--font-geist-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(20, 16, 14, 0.62);
}

.picks__stock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-geist-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(20, 16, 14, 0.62);
}

.picks__stock i {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4a9d5a;
  box-shadow: 0 0 0 3px rgba(74, 157, 90, 0.16);
}

.picks__feature {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  flex: 1;
  min-height: 130px;
  transform-style: preserve-3d;
}

.picks__ring {
  position: absolute;
  width: clamp(170px, 20vw, 280px);
  height: clamp(170px, 20vw, 280px);
  border: 1px solid rgba(20, 16, 14, 0.12);
  border-radius: 50%;
  transform:
    translate3d(calc(var(--tx, 0) * -10px), calc(var(--ty, 0) * -10px), 0);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.picks__ring::before,
.picks__ring::after {
  content: "";
  position: absolute;
  inset: 20px;
  border: 1px dashed rgba(20, 16, 14, 0.08);
  border-radius: 50%;
}

.picks__ring::after { inset: 44px; border-style: solid; opacity: 0.8; }

@keyframes picksRing {
  to { transform: rotate(360deg); }
}

.picks__hero {
  position: relative;
  z-index: 2;
  width: clamp(150px, 18vw, 230px);
  height: auto;
  object-fit: contain;
  filter: none;
  transform:
    rotateY(calc(var(--tx, 0) * 22deg))
    rotateX(calc(var(--ty, 0) * -18deg))
    translate3d(calc(var(--tx, 0) * 16px), calc(var(--ty, 0) * 16px), 40px);
  transform-origin: center center;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.picks__watermark {
  position: absolute;
  z-index: 1;
  bottom: -4%;
  left: 50%;
  transform:
    translateX(calc(-50% + var(--tx, 0) * 14px))
    translateY(calc(var(--ty, 0) * 8px));
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  font-family: var(--font-benton-sans-wide);
  font-style: normal;
  font-size: clamp(3.4rem, 6vw, 5.6rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 1px rgba(20, 16, 14, 0.06);
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

.picks__meta {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.picks__name {
  font-family: var(--font-benton-sans-wide);
  font-style: normal;
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.95;
  color: var(--picks-ink);
}

.picks__notes {
  font-family: var(--font-geist-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--picks-burgundy);
}

.picks__blurb {
  font-family: var(--font-geist-sans);
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(20, 16, 14, 0.72);
  max-width: 44ch;
}

.picks__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid rgba(20, 16, 14, 0.1);
  padding-top: 22px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.picks__pricebox {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.picks__priceval {
  font-family: var(--font-benton-sans-wide);
  font-style: normal;
  font-size: clamp(1.7rem, 2.5vw, 2.2rem);
  color: var(--picks-ink);
  line-height: 1;
}

.picks__priceunit {
  font-family: var(--font-geist-sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(20, 16, 14, 0.5);
}

.picks__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 4px 4px 4px 22px;
  border-radius: 999px;
  background: var(--picks-ink);
  color: #ffffff;
  font-family: var(--font-geist-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  transition: transform 0.4s var(--ease), background 0.4s var(--ease);
}

.picks__cta b {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--picks-ink);
  font-style: normal;
  font-size: 0.9rem;
  transition: transform 0.4s var(--ease);
}

.picks__cta:hover { transform: translateY(-2px); }
.picks__cta:hover b { transform: rotate(-8deg) translate(2px, -2px); }

/* ---------- Right: chart list ---------- */
.picks__right {
  position: relative;
  padding: clamp(24px, 2.8vw, 40px) clamp(28px, 3.6vw, 52px);
  background: var(--picks-warm);
  color: var(--picks-ink);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 20px);
  min-height: 0;
  border-left: 1px solid rgba(20, 16, 14, 0.05);
}

.picks__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.picks__label {
  font-family: var(--font-geist-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(20, 16, 14, 0.6);
}

/* Section title — matches the marquee (.pbanner__title) typography system:
   Geist sans at 700. Burgundy accent color on the emphasis for section-palette identity. */
.picks__title {
  font-family: var(--font-geist-sans);
  font-style: normal;
  font-size: var(--home-h2);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--picks-ink);
}

.picks__title em {
  font-family: inherit;
  font-style: normal;
  font-weight: 700;
  color: var(--picks-burgundy);
  letter-spacing: inherit;
}

.picks__lede {
  font-family: var(--font-geist-sans);
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(20, 16, 14, 0.72);
  max-width: 42ch;
}

.picks__list {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pick {
  position: relative;
  border-top: 1px solid rgba(20, 16, 14, 0.14);
}

.pick:last-child {
  border-bottom: 1px solid rgba(20, 16, 14, 0.14);
}

.pick::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  background: var(--picks-burgundy);
  transition: width 0.6s var(--ease);
  pointer-events: none;
}

.pick:hover::after { width: 100%; }

/* Real anchor wrapping row content. Owns the row grid layout so children
   (rank / info / price+arrow) fill columns while the anchor provides link
   semantics (right-click, middle-click, keyboard focus).
   Thumbnails were removed — their visual weight moved to a floating cursor-follow
   image (.picks__cursor) so each row reads as clean chart data. */
.pick__link {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 16px 0;
  color: inherit;
  text-decoration: none;
  transition: padding 0.5s var(--ease), background 0.35s var(--ease);
}

.pick__link:hover {
  padding-left: 14px;
  padding-right: 10px;
  background: rgba(255, 255, 255, 0.28);
}

/* Keyboard-focus visual — compensates for the anchor having no visible box.
   Scoped to :focus-visible so mouse users don't see it. */
.pick:has(.pick__link:focus-visible) {
  outline: 2px solid var(--picks-burgundy);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Chart rank number — Geist sans bold with tabular numerals so 01–04 align
   like real chart data. Higher opacity than before (0.5 → readable authority). */
.pick__rank {
  font-family: var(--font-geist-sans);
  font-style: normal;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  font-weight: 700;
  color: rgba(20, 16, 14, 0.5);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  transition: color 0.4s var(--ease), transform 0.5s var(--ease);
}

.pick:hover .pick__rank {
  color: var(--picks-burgundy);
  transform: translateX(-2px);
}

.pick__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* Product name — matches .pcard__row h3 / .fam__body h3: Geist sans, bold, tight tracking. */
.pick__info h4 {
  font-family: var(--font-geist-sans);
  font-style: normal;
  font-size: clamp(0.92rem, 1.1vw, 1.08rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--picks-ink);
}

.pick__info p {
  font-family: var(--font-geist-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(20, 16, 14, 0.6);
}

.pick__right {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Price — Geist sans bold with tabular numerals so prices align down the column. */
.pick__price {
  font-family: var(--font-geist-sans);
  font-style: normal;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--picks-ink);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.pick__go {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(20, 16, 14, 0.2);
  color: var(--picks-ink);
  font-size: 0.85rem;
  transition:
    background 0.4s var(--ease),
    color 0.4s var(--ease),
    transform 0.5s var(--ease),
    border-color 0.4s var(--ease);
}

.pick:hover .pick__go {
  background: var(--picks-ink);
  color: var(--picks-warm);
  border-color: var(--picks-ink);
  transform: rotate(-8deg) translate(1px, -1px);
}

/* ------------------------------------------------------------------
   Floating cursor-follow image reveal.
   Position (--x, --y) and tilt (--r) are written by JS every RAF frame.
   CSS owns the visual transform so paint stays on the compositor thread.
   Landscape aspect + no plate/shadow — bottle floats "naked" on the
   section background, following the cursor. */
.picks__cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: clamp(300px, 27vw, 420px);
  aspect-ratio: 4 / 3;
  pointer-events: none;
  opacity: 0;
  transform:
    translate3d(var(--x, 0px), var(--y, 0px), 0)
    translate(-50%, -50%)
    rotate(var(--r, 0deg));
  transition: opacity 0.35s var(--ease);
  will-change: transform, opacity;

  /* Product PNGs used for the hover-follow preview carry a baked-in
     white studio background (no alpha channel). Rendered raw on the
     cream .picks__right ground (#f5f0e8), that white plate reads as
     a visible rectangle around the bottle — same issue the families
     cards had.

     Blend mode is placed on the CURSOR itself (not the child img)
     because .picks__cursor already forms its own compositing layer
     via `will-change: transform` + `translate3d(...)`, and has no
     opaque background of its own. Blending the img alone would
     multiply against transparency (no visible effect). Placing the
     blend at the cursor level lets the whole compositing group
     multiply against .picks__right's cream backdrop directly:
        white × cream = cream  → the plate disappears
        colored bottle pixels × cream = slightly warmed color
     Matches the exact treatment used on .fam__media. */
  mix-blend-mode: multiply;
}

.picks__cursor.is-on {
  opacity: 1;
}

.picks__cursor img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.35s var(--ease);
}

.picks__cursor img.is-swapping {
  opacity: 0;
}

/* Reduced-motion contract: image still appears on hover for context but skips
   the physics-driven follow — matches accessibility expectations. */
@media (prefers-reduced-motion: reduce) {
  .picks__cursor {
    transition: opacity 0.2s linear;
  }
  .picks__cursor img {
    transition: opacity 0.2s linear;
  }
}

.picks__all {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  padding: 4px 4px 4px 20px;
  border-radius: 999px;
  border: 1px solid rgba(20, 16, 14, 0.2);
  background: transparent;
  color: var(--picks-ink);
  font-family: var(--font-geist-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}

.picks__all b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--picks-ink);
  color: var(--picks-warm);
  font-style: normal;
  font-size: 0.88rem;
  transition: transform 0.4s var(--ease);
}

.picks__all:hover {
  background: var(--picks-ink);
  color: var(--picks-warm);
}

.picks__all:hover b {
  background: var(--picks-warm);
  color: var(--picks-ink);
  transform: rotate(-8deg) translate(2px, -2px);
}

@media (max-width: 900px) {
  .picks__inner { grid-template-columns: 1fr; }
  .picks__left,
  .picks__right {
    min-height: auto;
    padding: clamp(40px, 7vw, 64px) clamp(24px, 6vw, 44px);
  }
  .picks__left {
    border-right: none;
    border-bottom: 1px solid rgba(20, 16, 14, 0.08);
  }
  .picks__watermark { font-size: 5rem; }
  .picks__lede { display: none; }
  .picks__head { gap: 12px; }
  .pick__link {
    grid-template-columns: 40px 1fr auto;
    gap: 14px;
    padding: 16px 0;
  }
  .pick__right { gap: 12px; }
  .pick__go { display: none; }
  /* Floating cursor image is hidden on touch — no cursor to follow. */
  .picks__cursor { display: none; }
}

@media (hover: none) {
  .picks__hero,
  .picks__ring,
  .picks__watermark {
    transform: none;
    transition: none;
  }
  .picks__watermark { transform: translateX(-50%); }
  .card__media img {
    transform: none;
    transition: filter 0.9s var(--ease);
  }
}

@media (max-width: 520px) {
  .picks__foot { flex-direction: column; align-items: flex-start; }
  .picks__cta { align-self: stretch; justify-content: space-between; }
}

/* ==============================================================
   PROMOS — two campaign tiles (gift + limited drop)
   ============================================================== */
.promos {
  isolation: isolate;
  overflow: hidden;
  background: #fff;
  color: var(--ink);
  padding: clamp(56px, 7vw, 96px) var(--pad);
}

.promos__inner {
  max-width: var(--section-max);
  margin: 0 auto;
}

.promos__head {
  margin: 0 0 clamp(28px, 3.4vw, 44px);
}

.promos__head h2 {
  margin: 0;
  font-family: var(--font-geist-sans);
  font-size: var(--home-h2);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--ink);
}

.promos__head h2 em {
  font-family: inherit;
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
}

.promos__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.promo {
  min-height: 0;
}

.promo__link {
  position: relative;
  display: block;
  height: clamp(520px, 68vh, 680px);
  border-radius: 20px;
  overflow: hidden;
  background: #111;
  color: #fff;
}

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

.promo__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 1.2s var(--ease);
}

.promo__link:hover .promo__media img {
  transform: scale(1.07);
}

.promo__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.28) 42%,
    rgba(0, 0, 0, 0.04) 70%,
    transparent 100%
  );
  pointer-events: none;
  transition: background 0.6s var(--ease);
}

.promo__link:hover .promo__shade {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.82) 0%,
    rgba(0, 0, 0, 0.36) 46%,
    rgba(0, 0, 0, 0.06) 72%,
    transparent 100%
  );
}

.promo__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: clamp(22px, 2.6vw, 36px);
}

.promo__eyebrow {
  font-family: var(--font-geist-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.promo__body h3 {
  margin: 0;
  max-width: 16ch;
  font-family: var(--font-geist-sans);
  font-size: clamp(1.55rem, 2.4vw, 2.15rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: #fff;
}

.promo__body p {
  margin: 0 0 6px;
  max-width: 34ch;
  font-family: var(--font-geist-sans);
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
}

.promo__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  padding: 4px 4px 4px 22px;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-family: var(--font-geist-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  transition: transform 0.4s var(--ease);
}

.promo__cta b {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #111;
  color: #fff;
  font-style: normal;
  font-size: 0.9rem;
}

.promo__link:hover .promo__cta {
  transform: translateY(-2px);
}

.promo__link:hover .promo__cta b {
  transform: rotate(-8deg) translate(2px, -2px);
}

@media (max-width: 900px) {
  .promos__grid { grid-template-columns: 1fr; }
  .promo__link { height: clamp(440px, 72vw, 560px); }
}

@media (hover: none) {
  .promo__media img,
  .promo__link:hover .promo__media img {
    transform: none;
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .promo__media img,
  .promo__link:hover .promo__media img,
  .promo__link:hover .promo__cta,
  .promo__link:hover .promo__cta b {
    transform: none;
    transition: none;
  }
}

/* ==============================================================
   CONTACT — "Let's talk"
   ============================================================== */

.talk-sec {
  position: relative;
  isolation: isolate;
  padding: clamp(80px, 10vw, 130px) var(--pad);
  background: var(--secondary);
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
  overflow: hidden;
}

.talk-sec::before {
  content: "";
  position: absolute;
  top: -18%;
  left: -12%;
  width: 46vw;
  height: 46vw;
  background: radial-gradient(circle, rgba(167, 96, 74, 0.18) 0%, rgba(167, 96, 74, 0) 62%);
  filter: blur(50px);
  pointer-events: none;
  z-index: -1;
  animation: talkGlow 14s ease-in-out infinite;
}

@keyframes talkGlow {
  50% { transform: translate(20px, -14px) scale(1.05); opacity: 0.85; }
}

.talk-sec__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='2'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.4  0 0 0 0 0.3  0 0 0 0.28 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  z-index: -1;
}

/* editorial "SA" monogram watermark — sits behind the left column heading,
   same trick as .picks__watermark, uses site's Benton Sans Wide family */
.talk-sec__mark {
  position: absolute;
  top: clamp(48px, 8vw, 96px);
  left: clamp(24px, 5vw, 96px);
  font-family: var(--font-benton-sans-wide);
  font-size: clamp(9rem, 22vw, 20rem);
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: -0.04em;
  color: var(--ink);
  opacity: 0.055;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  white-space: nowrap;
}

.talk-sec__mark em {
  font-style: italic;
  color: var(--accent);
  opacity: 0.85;
}

.talk-sec__left {
  max-width: 540px;
  position: sticky;
  top: 100px;
  z-index: 1;
}

.talk-sec h2 {
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.talk-sec h2 em,
.form h3 em {
  font-family: var(--font-benton-sans-wide);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: -0.01em;
  font-size: 1.02em;
  text-transform: none;
}

.talk-sec__lede {
  color: var(--muted);
  max-width: 44ch;
  font-size: 1rem;
  line-height: 1.65;
  margin-top: 18px;
}

.talk-sec__list {
  margin: 30px 0 24px;
  padding: 22px 0;
  border-top: 1px solid rgba(17, 17, 17, 0.14);
  border-bottom: 1px solid rgba(17, 17, 17, 0.14);
  display: flex;
  flex-direction: column;
  gap: 14px;
  list-style: none;
}

.talk-sec__list li {
  display: flex;
  align-items: baseline;
  gap: 18px;
  font-size: 0.95rem;
  color: var(--ink);
}

.talk-sec__list li b {
  min-width: 32px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--accent);
}

.talk-sec__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(17, 17, 17, 0.08);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.72);
  backdrop-filter: blur(6px);
}

.chip i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(167, 96, 74, 0.18);
}

.mail {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 6px 6px 22px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  transition: 0.3s var(--ease);
}

.mail .arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  transition: 0.3s var(--ease);
}

.mail:hover { background: var(--ink); color: #fff; }
.mail:hover .arrow { background: var(--accent); }

.talk-sec__meta {
  margin: 30px 0 0;
  padding-top: 22px;
  border-top: 1px dashed rgba(17, 17, 17, 0.22);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.talk-sec__meta > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.talk-sec__meta dt {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.44);
}

.talk-sec__meta dd {
  margin: 0;
  font-size: 0.86rem;
  color: var(--ink);
  line-height: 1.4;
}

/* ==============================================================
   FORM CARD
   ============================================================== */

.form {
  position: relative;
  z-index: 1;
  padding: clamp(28px, 3.4vw, 42px);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 26px;
  backdrop-filter: blur(10px);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.form::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(140deg, rgba(167, 96, 74, 0.3), transparent 42%, rgba(167, 96, 74, 0.14));
  z-index: -1;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}

.form:focus-within::before { opacity: 1; }

.form__head {
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.1);
}

.form__head-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.form__idx {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.5);
}

.form__idx i {
  font-style: normal;
  color: var(--accent);
  margin: 0 6px;
}

.form__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 9px;
  border: 1px solid rgba(17, 17, 17, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.65);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.7);
}

.form__badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2fa77a;
  box-shadow: 0 0 0 3px rgba(47, 167, 122, 0.22);
  animation: pulseDot 2.2s ease-in-out infinite;
}

@keyframes pulseDot {
  50% { box-shadow: 0 0 0 5px rgba(47, 167, 122, 0.06); }
}

.form h3 {
  font-size: clamp(1.7rem, 2.6vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0;
}

.form__hint {
  margin-top: 10px;
  font-size: 0.86rem;
  color: rgba(17, 17, 17, 0.55);
  line-height: 1.5;
}

.form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 22px;
}

/* Floating-label field component */
.field {
  position: relative;
  display: block;
  padding-top: 18px;
}

.field input {
  width: 100%;
  padding: 8px 0 12px;
  border: 0;
  border-bottom: 1px solid rgba(17, 17, 17, 0.24);
  background: transparent;
  font-size: 1rem;
  color: var(--ink);
  transition: border-color 0.3s;
}

.field input:focus { outline: none; border-bottom-color: transparent; }
.field input::placeholder { color: transparent; }

.field__label {
  position: absolute;
  top: 26px;
  left: 0;
  font-size: 1rem;
  color: rgba(17, 17, 17, 0.5);
  letter-spacing: 0;
  text-transform: none;
  transform-origin: left top;
  transition:
    transform 0.28s var(--ease),
    color 0.28s var(--ease),
    top 0.28s var(--ease),
    letter-spacing 0.28s var(--ease);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.field__label i {
  font-style: normal;
  font-size: 0.78rem;
  color: rgba(17, 17, 17, 0.34);
  margin-left: 4px;
}

.field input:not(:placeholder-shown) + .field__label,
.field input:focus + .field__label {
  top: 0;
  transform: scale(0.72);
  color: var(--accent);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.field__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  overflow: hidden;
}

.field__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--accent), var(--ink));
  transition: transform 0.45s var(--ease);
}

.field input:focus ~ .field__bar::before,
.field input:not(:placeholder-shown) ~ .field__bar::before {
  transform: scaleX(1);
}

.field input:required:user-invalid ~ .field__bar::before {
  transform: scaleX(1);
  background: #b3452b;
}

.field--wide {
  grid-column: 1 / -1;
  margin-top: 22px;
}

.form__label {
  margin: 30px 0 14px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.form .pills {
  justify-content: flex-start;
  margin-top: 0;
}

.form .pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(17, 17, 17, 0.22);
  font-weight: 500;
}

.form .pill i {
  font-style: normal;
  font-size: 0.6rem;
  color: var(--accent);
  letter-spacing: 0.1em;
}

.form .pill.is-on,
.form .pill:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.form .pill.is-on i,
.form .pill:hover i { color: var(--accent); }

.btn.btn--send {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 62px;
  margin-top: 30px;
  padding: 6px 6px 6px 26px;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.2);
  transition: 0.3s var(--ease);
}

.btn.btn--send:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.26);
}

.btn.btn--send .btn__ic {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: 1rem;
  transition: 0.3s var(--ease);
}

.btn.btn--send:hover .btn__ic {
  background: var(--accent);
  color: #fff;
  transform: translate(3px, -3px);
}

.ok {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(47, 167, 122, 0.08);
  border: 1px solid rgba(47, 167, 122, 0.24);
  color: #1e6b52;
  font-size: 0.9rem;
  animation: okIn 0.5s var(--ease);
}

@keyframes okIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.ok__ic {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #2fa77a;
  color: #fff;
  flex-shrink: 0;
}

.ok__ic svg { width: 14px; height: 14px; }

.form__policy {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 0.72rem;
  color: rgba(17, 17, 17, 0.5);
}

.form__policy i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  flex-shrink: 0;
}

/* ==============================================================
   FOOTER — Minimal light editorial (reference-matched)
   Tokens used: --bg, --ink, --muted, --accent, --line, --ease, --pad
   ============================================================== */

.foot {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Shared mark size — top-left lockup and the centered wordmark
     must read as the same object. Header / loader logos are untouched. */
  --foot-mark-h: clamp(44px, 5.2vw, 72px);
  /* Horizontal edges match the nav bar so header and footer sit on the same rail. */
  padding: clamp(48px, 6vw, 84px) var(--section-pad) 26px;
  background: var(--bg);
  color: var(--ink);
  border-top: 1px solid rgba(17, 17, 17, 0.08);
}

/* Copper gooey wash — same radial + blur(55px) recipe as
   .subscribe::before / .types::before / .cinema__sticky::before.
   One physical bottom-right blob, opposite the top-left logo lockup
   (and the matching --foot-mark-h wordmark). left/right, not
   inline-start, so RTL does not flip. Sits on the opaque --bg fill
   and under footer content. overflow:hidden clips it so it cannot
   leak into the page above; native country <select> still paints
   in the OS layer and is not clipped. */
.foot::before {
  content: "";
  position: absolute;
  bottom: -8%;
  right: -12%;
  width: min(58vw, 640px);
  height: min(46vw, 500px);
  border-radius: 50%;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(230, 118, 58, 0.62) 0%,
    rgba(232, 160, 100, 0.38) 22%,
    rgba(255, 200, 140, 0.18) 46%,
    rgba(255, 220, 180, 0.08) 60%,
    transparent 74%
  );
  filter: blur(55px);
  pointer-events: none;
  z-index: 0;
  animation: subscribeGlow 10s ease-in-out infinite alternate;
}

.foot__top,
.foot__wordmark,
.foot__bot {
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .foot::before {
    filter: blur(40px);
  }
}

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

.foot__top {
  display: grid;
  grid-template-columns: minmax(280px, 1.15fr) 1fr 1fr;
  gap: clamp(32px, 5vw, 84px);
  padding-bottom: clamp(40px, 5vw, 64px);
}

.foot__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.foot__col--brand { gap: 22px; }

/* brand lockup — logo + tagline */
.foot__logo {
  display: inline-block;
  padding: 0;
  background: none;
  border: 0;
  transition: transform 0.35s var(--ease);
  align-self: flex-start;
}

.foot__logo img {
  display: block;
  height: var(--foot-mark-h);
  width: auto;
  object-fit: contain;
}

.foot__logo:hover { transform: translateY(-1px); }

.foot__lede {
  margin: -6px 0 0;
  max-width: 340px;
  font-size: 0.86rem;
  line-height: 1.55;
  color: rgba(17, 17, 17, 0.62);
}

.foot__lede em {
  font-family: var(--font-benton-sans-wide);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  font-size: 1.05em;
  letter-spacing: -0.005em;
}

/* editorial index tag beside nav headings */
.foot__hd-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 14px;
}

.foot__col--nav .foot__hd-row .foot__hd { margin-bottom: 0; }

/* Discover / Help — copper, no index. Newsletter / region stay ink. */
.foot__col--nav .foot__hd {
  color: var(--accent);
}

.foot__idx {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.foot__hd {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  line-height: 1.3;
}

.foot__hd--sm {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 12px;
}

.foot__col--nav { gap: 10px; }
.foot__col--nav .foot__hd { margin-bottom: 14px; }

.foot__col--nav a {
  position: relative;
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.5;
  width: fit-content;
  transition: color 0.25s var(--ease);
}

.foot__col--nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}

.foot__col--nav a:hover { color: var(--accent); }
.foot__col--nav a:hover::after { transform: scaleX(1); }

/* ---- newsletter ---- */
.foot__news {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 4px 4px 14px;
  border: 1px solid rgba(17, 17, 17, 0.85);
  border-radius: 999px;
  background: var(--bg);
  transition: border-color 0.3s, box-shadow 0.3s;
  max-width: 380px;
}

.foot__news:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.06);
}

.foot__news input {
  flex: 1;
  min-height: 38px;
  background: transparent;
  border: 0;
  color: var(--ink);
  font-size: 0.86rem;
  letter-spacing: 0;
  padding: 0 8px 0 0;
  min-width: 0;
}

.foot__news input:focus { outline: none; }
.foot__news input::placeholder { color: rgba(17, 17, 17, 0.42); font-size: 0.85rem; }

.foot__news button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 0 8px 0 18px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}

.foot__news button .arrow {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 0.78rem;
  transition: 0.3s var(--ease);
}

.foot__news button:hover {
  background: var(--accent);
  transform: translateY(-1px);
}

.foot__news button:hover .arrow {
  background: rgba(255, 255, 255, 0.24);
  transform: translate(2px, -2px);
}

/* ---- socials + cruelty-free badge (inline row) ---- */
.foot__badges {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.foot__social {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(17, 17, 17, 0.3);
  border-radius: 50%;
  color: var(--ink);
  transition: 0.25s var(--ease);
}

.foot__social svg { width: 14px; height: 14px; }

.foot__social:hover {
  background: var(--ink);
  color: var(--bg);
  transform: translateY(-1px);
}

.foot__cf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 12px 2px 4px;
  border-radius: 999px;
}

.foot__cf-ic {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--accent);
}

.foot__cf-ic svg { width: 26px; height: 26px; }

.foot__cf-txt {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.1;
}

/* ---- country select ---- */
.foot__region { margin-top: 4px; }

.foot__select {
  position: relative;
  max-width: 380px;
}

.foot__select select {
  width: 100%;
  min-height: 44px;
  padding: 0 40px 0 18px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid rgba(17, 17, 17, 0.85);
  border-radius: 999px;
  font-family: var(--font-geist-sans);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.foot__select select:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.06);
}

.foot__select-caret {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  pointer-events: none;
  color: var(--ink);
}

.foot__select-caret svg { width: 12px; height: 8px; }

/* ---- centered serif wordmark with flanking hairlines + small-caps sub ---- */
.foot__wordmark {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
  padding: clamp(28px, 3.4vw, 44px) 0 clamp(20px, 2.6vw, 32px);
  user-select: none;
}

.foot__wordmark-rule {
  height: 1px;
  background: linear-gradient(to right, rgba(17, 17, 17, 0), rgba(17, 17, 17, 0.18) 30%, rgba(17, 17, 17, 0.18) 70%, rgba(17, 17, 17, 0));
}

.foot__wordmark-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Big centered footer wordmark — image mark (logo.avif). Sized to visually
   match the height of the previous text lockup; scales with viewport. */
.foot__wordmark-img {
  display: block;
  height: var(--foot-mark-h);
  width: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.foot__wordmark-sub {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.5);
  white-space: nowrap;
}

/* ---- fine legal bar ---- */
.foot__bot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 14px;
  padding-top: 20px;
  border-top: 1px solid rgba(17, 17, 17, 0.06);
  font-size: 0.78rem;
  color: rgba(17, 17, 17, 0.6);
}

.foot__bot a {
  color: rgba(17, 17, 17, 0.72);
  transition: color 0.25s;
}

.foot__bot a:hover { color: var(--accent); }

.foot__sep {
  color: rgba(17, 17, 17, 0.24);
  user-select: none;
}

.foot__copy { color: rgba(17, 17, 17, 0.56); }

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

.hero .reveal:nth-child(1) { transition-delay: 0.05s; }
.hero .reveal:nth-child(2) { transition-delay: 0.16s; }
.hero .reveal:nth-child(3) { transition-delay: 0.28s; }

.veil {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(17, 17, 17, 0.36);
  backdrop-filter: blur(4px) saturate(0.95);
  -webkit-backdrop-filter: blur(4px) saturate(0.95);
  animation: veil-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes veil-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.bag,
.sheet {
  position: fixed;
  z-index: 60;
  background: var(--white);
  visibility: hidden;
  opacity: 0;
}

/* Bag (side drawer) — separated from .sheet's transition rule so it
   can use its own ease + longer duration for a smoother slide. The
   previous 0.4s ease-in-out felt clipped when the drawer had 3+
   line items and the user was tracking the whole panel motion. */
.bag {
  top: 0;
  right: 0;
  width: min(420px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 24px 0 0 24px;
  /* Slide from further off-canvas so the entrance has real anticipation
     — the previous 18 px offset barely moved. */
  transform: translateX(28px);
  /* Depth: a soft, wide shadow lifts the drawer off the veil without
     reading as a hard cutout. Left-only offset because the drawer
     hugs the right edge. */
  box-shadow:
    -32px 0 60px -24px rgba(17, 17, 17, 0.28),
    -1px 0 0 rgba(17, 17, 17, 0.04);
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    opacity   0.4s  cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.4s;
}

.sheet {
  inset: 50% auto auto 50%;
  width: min(840px, calc(100% - 24px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 28px;
  transform: translate(-50%, -48%);
  transition: 0.4s var(--ease);
}

.bag.open,
.sheet.open {
  visibility: visible;
  opacity: 1;
}

/* When the drawer is opening, cancel the delayed visibility flip so
   the panel becomes visible immediately (before transform runs). */
.bag.open { transform: none; transition-delay: 0s; }
.sheet.open { transform: translate(-50%, -50%); }

.bag header,
.sheet__row,
.line {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bag header {
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--line);
  gap: 12px;
}
.bag header h2,
.sheet h2 { font-size: 1.12rem; letter-spacing: -0.01em; }
.bag header button {
  font-family: var(--font-geist-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
  background: transparent;
  border: 0;
  padding: 8px 4px;
  cursor: pointer;
  transition: color 0.25s var(--ease);
}
.bag header button:hover { color: var(--ink); }

/* Higher specificity than `.bag header button` so padding / hover
   color from that rule cannot leak. On hover the parent button
   rule set color to --ink WHILE this rule painted the fill --ink —
   the X vanished (dark on dark). Force white glyph + zero padding
   so the 16 px stroke stays inside the circle. */
.bag header .bag__close {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  letter-spacing: 0;
  text-transform: none;
  line-height: 0;
  overflow: hidden;
  color: var(--ink);
  background: rgba(17, 17, 17, 0.05);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.bag header .bag__close svg {
  position: absolute;
  inset: 0;
  margin: auto;
  display: block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  pointer-events: none;
}
.bag header .bag__close:hover,
.bag header .bag__close:focus-visible {
  background: var(--ink);
  color: #fff;
}

/* Drawer checkout — the global .btn / .btn--wide scale (50 px tall,
   26–28 px top margin, 0.78 rem) is a page CTA, not a drawer
   footer. This override keeps CHECKOUT on one line and sized to
   the drawer at every breakpoint. */
.bag footer .btn.btn--wide,
.bag footer .bag__checkout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  width: 100%;
  margin-top: 0;
  min-height: 44px;
  height: 44px;
  padding: 0 18px;
  gap: 8px;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  white-space: nowrap;
  box-shadow: none;
}
.bag footer .btn.btn--wide .arrow,
.bag footer .bag__checkout .arrow {
  flex: 0 0 auto;
  font-size: 0.85rem;
}
.bag footer .btn.btn--wide:hover {
  transform: none;
  box-shadow: none;
}

/* Internal scroll region — the ONLY element that should scroll when
   the drawer is open. `overscroll-behavior: contain` prevents the
   scroll from chaining back to the body once the user reaches the
   top/bottom of the list (a browser-native safety net that pairs
   with the Lenis stop() in main.js `lock()`). */
.bag__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 4px 24px 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(17, 17, 17, 0.2) transparent;
}
.bag__list::-webkit-scrollbar { width: 6px; }
.bag__list::-webkit-scrollbar-track { background: transparent; }
.bag__list::-webkit-scrollbar-thumb {
  background: rgba(17, 17, 17, 0.14);
  border-radius: 999px;
}
.bag__list::-webkit-scrollbar-thumb:hover {
  background: rgba(17, 17, 17, 0.28);
}

.bag footer { padding: 18px 24px 22px; border-top: 1px solid var(--line); background: #fff; }
.bag footer p {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 0.92rem;
}
.bag footer p b { font-weight: 700; }

.line {
  gap: 14px;
  padding: 14px 0;
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
}
.line:last-child { border-bottom: 0; }

.line img {
  width: 52px;
  height: 66px;
  border-radius: 10px;
  object-fit: cover;
  background: #f7f2e9;
  flex: 0 0 auto;
}

.line__info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.line h3 {
  font-family: var(--font-geist-sans);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
}

.line p {
  font-family: var(--font-geist-sans);
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(17, 17, 17, 0.55);
  line-height: 1.3;
}

.line__badge,
.cline__badge,
.coline__badge {
  display: inline-block;
  margin: 2px 0 0;
  padding: 2px 8px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font-family: var(--font-geist-sans);
  font-size: 0.54rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.4;
}

.line__qty {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-top: 4px;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 999px;
  overflow: hidden;
}

.line__step,
.line__del {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-geist-sans);
  line-height: 1;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.line__step {
  width: 26px;
  height: 26px;
  font-size: 0.95rem;
  font-weight: 500;
}

.line__count {
  min-width: 22px;
  text-align: center;
  font-family: var(--font-geist-sans);
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.line__step:hover { background: rgba(17, 17, 17, 0.06); }
.line__step:active { background: rgba(17, 17, 17, 0.1); }

.line__del {
  flex: 0 0 auto;
  align-self: flex-start;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: rgba(17, 17, 17, 0.45);
}
.line__del:hover {
  background: rgba(167, 96, 74, 0.1);
  color: var(--accent);
}

[dir="rtl"] .line__info { align-items: flex-end; }

@media (min-width: 901px) and (max-width: 1440px) {
  .bag { width: min(360px, 100%); }
  .bag header { padding: 16px 18px 14px; }
  .bag header h2 { font-size: 1rem; }
  .bag__list { padding: 2px 18px 16px; }
  .bag footer { padding: 14px 18px 18px; }
  .bag footer p { font-size: 0.8rem; margin-bottom: 10px; }
  .bag header .bag__close {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
  }
  .bag header .bag__close svg { width: 13px; height: 13px; }
  .bag footer .btn.btn--wide,
  .bag footer .bag__checkout {
    min-height: 40px;
    height: 40px;
    padding: 0 16px;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
  }
  .line { gap: 10px; padding: 12px 0; }
  .line img { width: 46px; height: 58px; border-radius: 8px; }
  .line h3 { font-size: 0.8rem; }
  .line p { font-size: 0.64rem; }
  .line__step { width: 24px; height: 24px; font-size: 0.88rem; }
  .line__count { font-size: 0.66rem; }
  .line__del { width: 28px; height: 28px; }
}

@media (max-width: 900px) {
  .bag header { padding: 18px 20px 16px; }
  .bag header .bag__close {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
  }
  .bag footer { padding: 16px 20px 20px; }
  .bag footer .btn.btn--wide,
  .bag footer .bag__checkout {
    min-height: 46px;
    height: 46px;
    font-size: 0.66rem;
    letter-spacing: 0.14em;
  }
}

@media (max-width: 480px) {
  .bag header .bag__close {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
  }
  .bag footer .btn.btn--wide,
  .bag footer .bag__checkout {
    min-height: 44px;
    height: 44px;
    padding: 0 14px;
    font-size: 0.64rem;
    letter-spacing: 0.12em;
  }
}

/* ==============================================================
   Bag drawer — empty state
   --------------------------------------------------------------
   Renders inside .bag__list when the cart has 0 lines. Full-height
   vertical flex so the block sits vertically centered in whatever
   space the drawer has, then flows a bag icon → eyebrow → title →
   lede → CTA. The CTA is a real <a href="products.html"> so it
   works with right-click / middle-click / cmd-click; click handler
   in drawBag() short-circuits navigation when the user is already
   on the products page and instead closes the drawer smoothly.
   Fully locale-aware: all copy reads via _t() and re-renders on
   sa:locale-change. RTL: the arrow mirrors via [dir="rtl"] rule
   at the bottom of this block; the rest of the layout is
   direction-agnostic (centered vertical stack).
   ============================================================== */
.bag__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  min-height: 100%;
  padding: 40px 8px 24px;
  color: var(--ink);
  animation: bag-empty-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes bag-empty-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.bag__empty-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #f7f2e9;
  color: rgba(17, 17, 17, 0.7);
  margin-bottom: 4px;
}
.bag__empty-ic svg { width: 34px; height: 34px; }

.bag__empty-eyebrow {
  font-family: var(--font-geist-sans);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.5);
  margin: 0;
}

.bag__empty-title {
  font-family: var(--font-geist-sans);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
  max-width: 22ch;
}

.bag__empty-body {
  font-family: var(--font-geist-sans);
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.55;
  color: rgba(17, 17, 17, 0.62);
  margin: 0 0 8px;
  max-width: 30ch;
}

/* Pill CTA — visually matches .pdp__add / checkout button so the
   whole drawer speaks the same button language. Full-width inside
   the drawer padding so it feels intentional, not a floating chip. */
.bag__empty-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 280px;
  height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-geist-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease),
              box-shadow 0.3s var(--ease);
  cursor: pointer;
  box-shadow: 0 8px 22px -12px rgba(17, 17, 17, 0.45);
}
.bag__empty-cta b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  font-size: 0.86rem;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.bag__empty-cta:hover {
  background: #000;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -12px rgba(17, 17, 17, 0.55);
}
.bag__empty-cta:hover b {
  background: rgba(255, 255, 255, 0.22);
  transform: translate(2px, -2px);
}

/* RTL: mirror the arrow so it points to the natural reading
   direction (leftward + up) instead of the LTR rightward + up. */
[dir="rtl"] .bag__empty-cta b { transform: scaleX(-1); }
[dir="rtl"] .bag__empty-cta:hover b { transform: scaleX(-1) translate(2px, -2px); }

/* ==============================================================
   Account sidebar — right-side (inline-end) profile drawer
   --------------------------------------------------------------
   Same house as the bag: paper panel, copper eyebrow, Benton title,
   hairline rules. Slides from the reading-end so RTL docks left.
   z-index 70 sits above the bag/mega (60) and below the loader (300).
   ============================================================== */
.account {
  position: fixed;
  z-index: 70;
  top: 0;
  bottom: 0;
  inset-inline-end: 0;
  inset-inline-start: auto;
  width: min(380px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--white);
  visibility: hidden;
  opacity: 0;
  border-start-start-radius: 24px;
  border-end-start-radius: 24px;
  transform: translateX(28px);
  box-shadow:
    -32px 0 60px -24px rgba(17, 17, 17, 0.28),
    -1px 0 0 rgba(17, 17, 17, 0.04);
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    opacity   0.4s  cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.4s;
}

[dir="rtl"] .account {
  transform: translateX(-28px);
  box-shadow:
    32px 0 60px -24px rgba(17, 17, 17, 0.28),
    1px 0 0 rgba(17, 17, 17, 0.04);
}

.account.open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}

.account header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--line);
}

.account__intro { min-width: 0; }

.account__eyebrow {
  font-family: var(--font-geist-sans);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 8px;
}

[dir="rtl"] .account__eyebrow {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.68rem;
}

.account header h2 {
  font-family: var(--font-benton-sans-wide, var(--font-geist-sans));
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}

.account__guest {
  font-family: var(--font-geist-sans);
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(17, 17, 17, 0.55);
  margin: 8px 0 0;
}

.account__close {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  line-height: 0;
  overflow: hidden;
  color: var(--ink);
  background: rgba(17, 17, 17, 0.05);
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

.account__close svg {
  position: absolute;
  inset: 0;
  margin: auto;
  display: block;
  width: 14px;
  height: 14px;
  pointer-events: none;
}

.account__close:hover,
.account__close:focus-visible {
  background: var(--ink);
  color: #fff;
}

.account__nav {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 0;
}

.account__nav a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 24px;
  font-family: var(--font-benton-sans-wide, var(--font-geist-sans));
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

.account__nav a:hover,
.account__nav a:focus-visible {
  background: rgba(167, 96, 74, 0.06);
  color: var(--accent);
}

.account__foot {
  padding: 18px 24px 22px;
  border-top: 1px solid var(--line);
}

.account__foot p {
  font-family: var(--font-geist-sans);
  font-size: 0.72rem;
  line-height: 1.5;
  color: rgba(17, 17, 17, 0.42);
  margin: 0;
}

@media (max-width: 480px) {
  .account { width: 100%; border-radius: 0; }
  .account header { padding: 18px 20px 16px; }
  .account__nav a { padding: 0 20px; }
  .account__foot { padding: 16px 20px 20px; }
}

.sheet img { min-height: 440px; }
.sheet > div { padding: 32px; }
.sheet__x { position: absolute; top: 18px; right: 18px; z-index: 2; }
.empty { color: var(--muted); padding: 28px 0; }

@media (max-width: 1180px) {
  .nav__mid,
  .talk { display: none; }
  .nav__burger { display: block; }
}

@media (max-width: 1100px) {
  .shop__rail { --card-w: clamp(196px, 26vw, 232px); }
}

@media (max-width: 900px) {
  .shop__rail { --card-w: clamp(188px, 46vw, 220px); }

  /* Center-snap on touch viewports: the active card sits with equal air on
     the left and right of the viewport rather than hugging the left edge.
     The formula reads --card-w dynamically, so it stays in sync with the
     narrower --card-w overrides at ≤640px / ≤560px / ≤480px without any
     per-breakpoint duplication. Vertical padding stays untouched (only
     padding-inline is overridden). */
  .shop__rail {
    padding-inline: calc((100vw - var(--card-w)) / 2);
    scroll-padding-inline: calc((100vw - var(--card-w)) / 2);
    padding-bottom: 8px;
  }

  .shop {
    padding-bottom: 24px;
  }

  .types {
    padding-top: 28px;
  }

  .shop__rail > .card,
  .shop__rail > .rcard { scroll-snap-align: center; }
}

@media (max-width: 560px) {
  .shop__rail { --card-w: 68vw; }

  .shop__head {
    flex-wrap: wrap;
    row-gap: 14px;
  }

  .shop__tools {
    gap: 0;
  }

  .shop__nav {
    display: none;
  }
}

@media (max-width: 980px) {
  .hero,
  .shop__head,
  .talk-sec,
  .form__grid,
  .sheet,
  .foot__top {
    grid-template-columns: 1fr;
  }

  .shop__head { align-items: center; gap: 16px; }

  .hero {
    padding-top: 100px;
    text-align: left;
  }

  .hero h1 { font-size: clamp(2.1rem, 8vw, 2.8rem); }
  .hero { padding: 120px var(--pad) 100px; }

  .talk-sec__left { position: static; top: auto; }
  .talk-sec__mark {
    top: clamp(24px, 6vw, 48px);
    left: clamp(12px, 4vw, 24px);
    font-size: clamp(7rem, 32vw, 14rem);
    opacity: 0.045;
  }

  /* footer collapses to a single column stack */
  .foot__top {
    grid-template-columns: 1fr;
    gap: 44px;
    padding-bottom: 44px;
  }
  .foot__news,
  .foot__select { max-width: 100%; }
}

/* ==============================================================
   HERO — laptop tier (981–1280px)
   ------------------------------------------------------------
   Desktop >1280px keeps the existing tuning (padding-bottom 88px,
   h1 clamp up to 4.5rem, btn--light 60px tall). On 1280px laptops
   two things need to happen so the hero doesn't feel oversized:

   1) Bottom-align the left-column block with the .hero__sound
      icon button. The sound button uses
      bottom: clamp(24px, 3vw, 40px); the hero's own
      padding-bottom is 88px on desktop — so on a laptop the
      "Scent that feels." block was sitting ~50px higher than
      the sound button. Mirror the exact same clamp on the
      hero's padding-bottom so both baselines resolve to the
      identical pixel at every viewport in this range.

   2) Trim the type + button sizes ~15–20% so the hero doesn't
      read as if it were rendered on a 27" monitor. Tap targets
      still meet the 44px minimum.
   ============================================================== */
@media (min-width: 981px) and (max-width: 1280px) {
  .hero {
    padding: 96px var(--pad) clamp(24px, 3vw, 40px);
  }

  .hero h1 { font-size: clamp(2rem, 3.4vw, 3rem); margin-bottom: 14px; }
  .hero__lede { font-size: 0.92rem; }
  .hero__cta { gap: 18px; margin-top: 20px; }

  .btn.btn--light {
    min-height: 52px;
    padding: 5px 5px 5px 22px;
    gap: 12px;
    font-size: 0.72rem;
  }
  .btn__ic { width: 40px; height: 40px; font-size: 0.9rem; }
}

/* ==============================================================
   FAMILIES — laptop tier (981–1280px)
   ------------------------------------------------------------
   Layers cleanly over the existing column-count breakpoints:
     • >1280px → desktop (3-col, base sizes)
     • 1101–1280 → this tier + 3-col (rules in this block only)
     • 981–1100 → this tier + 2-col (existing 1100px rule wins)
     • ≤980 → head stacks (existing 980px rule)
   Everything here is padding + typography + card intrinsic height,
   orthogonal to grid column count — nothing here interferes with
   the responsive column cascade already in place.
   ============================================================== */
@media (min-width: 981px) and (max-width: 1280px) {
  .families {
    padding: clamp(64px, 8vw, 96px) var(--pad) clamp(56px, 7vw, 84px);
  }
  .families__head { padding-bottom: 32px; gap: 32px; }
  /* Editorial section titles share one scale at the laptop tier.
     Without this pairing, sibling section headings drifted apart
     by 10–18 px between 981–1280 px, which read as a visual
     hierarchy mismatch. Same clamp = same rank across:
       .talk-sec h2          — testimonial section
       .families__title h2   — "The language of scent."
       .hgallery__title      — "Scents that leave a trace."
       .picks__title         — "Top of the season."
     Each section keeps its own colour palette and margins — only
     font-size + clamp is normalized here.
     .shop h2 shares the same scale as Find your wearer. */
  .shop h2,
  .families__title h2,
  .types__title h2,
  .talk-sec h2,
  .hgallery__title,
  .picks__title,
  .promos__head h2 { font-size: var(--home-h2); }
  /* NOTE: identical typography rule is repeated in the 1281–1440 tier
     below — see @media (min-width: 1281px) and (max-width: 1440px). */
  .families__intro { font-size: 0.92rem; }
  .families__grid { gap: 18px; margin-top: 36px; }

  .fam { min-height: 268px; padding: 18px; gap: 12px; }
  .fam__idx { font-size: 0.58rem; padding: 5px 10px; letter-spacing: 0.24em; }
  .fam__body h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
  .fam__notes { font-size: 0.58rem; }
  .fam__desc { font-size: 0.8rem; max-width: 24ch; }
  .fam__go { font-size: 0.62rem; margin-top: 12px; }
  .fam__go b { width: 34px; height: 34px; font-size: 0.86rem; }
  .fam__media { top: 14px; right: 14px; width: 40%; }
  /* RTL — re-anchor the bottle stack after the physical `right:`
     override lands so it stays on the reading-end side. */
  [dir="rtl"] .fam__media { right: auto; left: 14px; }
}

/* ==============================================================
   Editorial section titles — laptop tier extension (1281–1440 px)
   --------------------------------------------------------------
   Modern laptops sit anywhere from 1280 px (13") to 1440 px
   (MacBook 13"/14"). The 981–1280 block above captures the
   lower half but leaves 1281–1440 firing the base clamps, which
   pushed section titles (esp. `.picks__title` "Top of the season")
   back up to ~54 px on typical MacBook screens — a visible
   mismatch against the same headings at ~41 px on a 1200 px
   window. Repeating the exact same clamp here extends the tier
   without disturbing the padding/layout rules that were tuned
   for the 981–1280 column-count range.
   Manifesto / cinema display headings mirror the same trim
   through the .mrq__word / display heading rule further down
   the file — this block owns section-title parity only.
   ============================================================== */
@media (min-width: 1281px) and (max-width: 1440px) {
  .shop h2,
  .families__title h2,
  .types__title h2,
  .talk-sec h2,
  .hgallery__title,
  .picks__title,
  .promos__head h2 { font-size: var(--home-h2); }
}

/* ==============================================================
   Picks section — full-body typography trim (981–1440 px)
   --------------------------------------------------------------
   The section title alone (handled above) reads correctly, but
   its surrounding editorial "chart" content — featured product
   name, watermark, rank numbers, price stat — were sized for
   wide desktop and towered over the reduced title on laptops.
   Every prominent text scales down 15–20% here so the section
   reads as one coherent unit at 981–1440 px.
   Small body copy (`.picks__blurb`, `.picks__lede`, `.picks__notes`,
   `.picks__label`, `.picks__priceunit`, `.pick__info p`, `.pick__price`)
   stays untouched — already sized for the tier.
   ============================================================== */
@media (min-width: 981px) and (max-width: 1440px) {
  /* Featured product name ("Shaghaf Oud Ahmar") — the largest
     heading on the left card. Trimmed from 40–48 px → 33–40 px. */
  .picks__name { font-size: clamp(1.75rem, 2.8vw, 2.5rem); }
  /* Featured price value ("$150"). 30–35 px → 24–29 px. */
  .picks__priceval { font-size: clamp(1.4rem, 2vw, 1.9rem); }
  /* Chart rank numbers (01, 02, 03, 04). 26–32 px → 21–26 px. */
  .pick__rank { font-size: clamp(1.2rem, 1.75vw, 1.7rem); }
  /* Chart row product name ("Shaghaf Oud Elixir" etc.).
     17–20 px → 14–17 px. */
  .pick__info h4 { font-size: clamp(1rem, 1.2vw, 1.2rem); }
  /* Decorative background watermark — trimmed proportionally
     so it still reads as ambient large-scale texture but
     doesn't overpower the compressed featured card. 72–86 → 60–72 px. */
  .picks__watermark { font-size: clamp(2.8rem, 5vw, 4.6rem); }
}

@media (max-width: 640px) {
  .talk-sec__meta { grid-template-columns: 1fr 1fr; }
  .foot__bot { justify-content: flex-start; text-align: left; }
  /* collapse the flanking hairlines on narrow screens */
  .foot__wordmark { grid-template-columns: 1fr; }
  .foot__wordmark-rule { display: none; }
}

@media (max-width: 560px) {
  .foot { padding: clamp(48px, 8vw, 72px) var(--pad) 92px; }
  .foot { --foot-mark-h: clamp(38px, 9vw, 56px); }
  .foot__wordmark-sub { letter-spacing: 0.22em; font-size: 0.58rem; }
}

/* ==============================================================
   Real stories — portrait video carousel (#reels)
   --------------------------------------------------------------
   Sits between #picks and #cinema. Opaque paper + shared
   z-index:2 so the fixed hero still (herobg.png) cannot show
   through. Cards are local films + posters only.

   Horizontal rail matches #story / .nav / .foot:
   --section-pad on the section, --section-max on .reels__inner.
   The track stays inside that rail (cards may peek inside it);
   it must not go edge-to-edge of the viewport.
   ============================================================== */
.reels {
  position: relative;
  z-index: 2;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  padding: clamp(64px, 8vw, 104px) var(--section-pad) clamp(48px, 6vw, 80px);
}

.reels__inner {
  position: relative;
  z-index: 1;
  max-width: var(--section-max);
  margin: 0 auto;
}

.reels__head {
  margin: 0 0 clamp(28px, 3.6vw, 48px);
  padding: 0;
  text-align: center;
}

.reels__head h2 {
  margin: 0;
  font-family: var(--font-geist-sans);
  font-size: var(--home-h2);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--ink);
}

.reels__head h2 em {
  font-family: inherit;
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
}

.reels__lede {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.reels__rail {
  --reel-w: clamp(220px, 22vw, 340px);
  --reel-gap: 14px;
  display: flex;
  gap: var(--reel-gap);
  margin: 0;
  padding: 4px 0 8px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  scroll-behavior: auto;
}

.reels__rail::-webkit-scrollbar { display: none; }

.reels__rail.is-dragging {
  cursor: grabbing;
}

.reels__rail.is-dragging .reel {
  pointer-events: none;
}

.reels__rail:focus-visible {
  outline: 2px solid rgba(167, 96, 74, 0.4);
  outline-offset: 4px;
}

.reel {
  position: relative;
  flex: 0 0 var(--reel-w);
  width: var(--reel-w);
  aspect-ratio: 9 / 14;
  border-radius: 16px;
  overflow: hidden;
  background: #1a1612;
  isolation: isolate;
}

.reel__poster,
.reel__vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

.reel__vid {
  z-index: 1;
  opacity: 0;
}

.reel.is-playing .reel__vid { opacity: 1; }

.reel__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: 56px;
  height: 56px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.32);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: opacity 0.28s ease, background 0.28s ease, transform 0.28s ease;
}

.reel__play:hover {
  background: rgba(17, 17, 17, 0.48);
  transform: translate(-50%, -50%) scale(1.04);
}

.reel.is-playing .reel__play { opacity: 0; }
.reel.is-playing:hover .reel__play,
.reel.is-playing:focus-within .reel__play { opacity: 1; }

.reel__play-ic {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.reel__play-ic svg {
  width: 22px;
  height: 22px;
  display: block;
}

.reel__play-ic--play svg { margin-inline-start: 2px; }

.reel__play-ic--pause { opacity: 0; }
.reel.is-playing .reel__play-ic--play { opacity: 0; }
.reel.is-playing .reel__play-ic--pause { opacity: 1; }

.reel__sound {
  position: absolute;
  bottom: 12px;
  inset-inline-end: 12px;
  z-index: 3;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.32);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
  transition: background 0.28s ease;
}

.reel__sound:hover { background: rgba(17, 17, 17, 0.5); }

.reel__sound-ic {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.reel__sound-ic svg {
  width: 16px;
  height: 16px;
  display: block;
}

.reel__sound-ic--on { opacity: 0; }
.reel.is-live .reel__sound-ic--off { opacity: 0; }
.reel.is-live .reel__sound-ic--on { opacity: 1; }

.reels__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 22px auto 0;
  padding: 0;
}

.reels__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
  transition: background 0.28s ease, transform 0.28s ease;
}

.reels__dot:hover { background: var(--muted); }

.reels__dot.is-on {
  background: var(--ink);
  transform: scale(1.15);
}

.reels__dot:focus-visible {
  outline: 2px solid rgba(167, 96, 74, 0.45);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .reels { padding: 56px var(--section-pad) 48px; }
  .reels__head { margin-bottom: 22px; }
  .reels__rail {
    --reel-w: min(64vw, 280px);
    --reel-gap: 10px;
  }
  .reel { border-radius: 12px; }
  .reel__play { width: 50px; height: 50px; }
}

@media (max-width: 560px) {
  .reels { padding: 48px var(--section-pad) 40px; }
  .reel { border-radius: 10px; }
  .reel__play { width: 46px; height: 46px; }
  .reel__sound { width: 32px; height: 32px; bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .reel__play,
  .reel__sound,
  .reels__dot {
    transition: none;
  }
}

.cinema {
  --cinema-p: 0;
  position: relative;
  isolation: isolate;
  z-index: 2;
  height: 240vh;
  background: #ffffff;
  color: #000;
  /* overflow stays visible on this 240vh runway — hidden here
     would create a scrollport and break position:sticky / expand. */
}

.cinema__sticky {
  position: sticky;
  top: 0;
  isolation: isolate;
  z-index: 1;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: block;
  background: #ffffff;
}

/* Copper gooey wash — same radial + blur(55px) recipe as
   .subscribe::before / .types::before.
   Physical top-left (left/right, not inline-start) so RTL
   does not flip it. Lives on the sticky stage so overflow:hidden
   clips the blob without breaking the 240vh scroll-to-expand.
   z-index:0 sits on the opaque #fff fill, under intro / video. */
.cinema__sticky::before {
  content: "";
  position: absolute;
  top: -18%;
  left: -12%;
  width: min(58vw, 640px);
  height: min(46vw, 500px);
  border-radius: 50%;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(230, 118, 58, 0.62) 0%,
    rgba(232, 160, 100, 0.38) 22%,
    rgba(255, 200, 140, 0.18) 46%,
    rgba(255, 220, 180, 0.08) 60%,
    transparent 74%
  );
  filter: blur(55px);
  pointer-events: none;
  z-index: 0;
  animation: subscribeGlow 10s ease-in-out infinite alternate;
}

.cinema__grain {
  display: none;
}

.cinema__intro {
  position: absolute;
  top: clamp(64px, 8vh, 108px);
  left: 50%;
  transform: translateX(-50%) translateY(calc(var(--cinema-p) * -24px));
  text-align: center;
  z-index: 3;
  width: min(720px, 90vw);
  opacity: calc(1 - var(--cinema-p) * 1.6);
  transition: opacity 0.15s linear;
  pointer-events: none;
}

.cinema__intro .label {
  color: #000;
  justify-content: center;
}

.cinema__intro .label i {
  background: #000;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.08);
}

.cinema__intro .label span {
  color: rgba(0, 0, 0, 0.55);
  border-left-color: rgba(0, 0, 0, 0.14);
}

.cinema__intro h2 {
  font-family: var(--font-geist-sans);
  font-size: clamp(2rem, 4.6vw, 3.8rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  color: #000;
  margin-top: 10px;
}

/* Laptop tier (981–1440 px) — the "Watch it move" display heading
   sits inside a constrained .cinema__intro column (min(720px, 90vw))
   so the base clamp (65–83 px on laptop) forced the two-line
   composition to dominate the frame at typical MacBook widths.
   Trimmed ~30% here so both lines read comfortably above the
   video without overpowering it.
   IMPORTANT: this override MUST sit AFTER the base rule above.
   Equal-specificity duplicates placed above the base declaration
   were silently lost to the cascade — a bug the earlier laptop
   trims for this heading fell into. Do not move this block up. */
@media (min-width: 981px) and (max-width: 1440px) {
  .cinema__intro h2 {
    font-size: clamp(2rem, 4.4vw, 3.6rem);
  }
}

.cinema__intro h2 em {
  font-style: normal;
  color: #000;
  font-weight: 700;
}

.cinema__lede {
  margin-top: 14px;
  color: rgba(0, 0, 0, 0.62);
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  font-weight: 500;
  line-height: 1.55;
}

.cinema__frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform-origin: 50% 100%;
  /* Rest: lifted ~10vh so the intro–video gap tightens and a
     white band remains under the frame for .cinema__hint.
     Scale 0.38 (was 0.32) grows the rest-state frame upward. */
  transform:
    translateY(calc((1 - var(--cinema-p)) * -10vh))
    scale(calc(0.38 + var(--cinema-p) * 0.62));
  border-radius: calc((1 - var(--cinema-p)) * 24px);
  overflow: hidden;
  background: #000;
  box-shadow:
    0 40px 90px -30px rgba(0, 0, 0, 0.28),
    0 20px 40px -20px rgba(0, 0, 0, 0.14),
    0 0 0 1px rgba(0, 0, 0, 0.06) inset;
  will-change: transform, border-radius;
}

.cinema__vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cinema__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none;
  opacity: calc(1 - var(--cinema-p) * 0.55);
  transition: opacity 0.2s linear;
}

.cinema__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: #000;
  font-family: var(--font-geist-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: calc(1 - var(--cinema-p) * 1.4);
  transform: scale(calc(1 / (0.38 + var(--cinema-p) * 0.62)));
  transform-origin: top left;
  transition: opacity 0.2s linear;
}

.cinema__badge b { font-weight: 800; }
.cinema__badge i {
  font-style: normal;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.55);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cinema__hint {
  position: absolute;
  /* Sit in the white band under the rest-state frame (lifted 10vh).
     2.1rem clears the label + arrow so overflow:hidden on the
     sticky stage cannot clip it. */
  bottom: calc((1 - var(--cinema-p)) * 10vh - 2.1rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(17, 17, 17, 0.55);
  font-family: var(--font-geist-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: calc(1 - var(--cinema-p) * 2.2);
  pointer-events: none;
}

.cinema__hint b {
  font-style: normal;
  font-weight: 400;
  font-size: 0.9rem;
  animation: cinemaBob 1.8s ease-in-out infinite;
}

@keyframes cinemaBob {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(4px); opacity: 1; }
}

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

@media (max-width: 900px) {
  .cinema {
    --cinema-p: 1;
    height: auto;
    overflow: hidden;
  }

  .cinema__sticky {
    position: relative;
    height: auto;
    padding: clamp(80px, 12vw, 120px) var(--pad) clamp(80px, 12vw, 120px);
  }

  .cinema__sticky::before {
    filter: blur(40px);
  }

  .cinema__intro {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    opacity: 1;
    margin-bottom: 32px;
    text-align: left;
    width: 100%;
  }

  .cinema__intro .label { justify-content: flex-start; }

  .cinema__frame {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 9 / 14;
    max-height: 80vh;
    transform: none;
    border-radius: 22px;
    box-shadow: 0 24px 60px -22px rgba(0, 0, 0, 0.22);
  }

  .cinema__frame::after { opacity: 0.3; }

  .cinema__badge { transform: none; opacity: 1; }

  .cinema__hint { display: none; }
}

/* ==============================================================
   Our story — homepage chapter before the footer
   --------------------------------------------------------------
   Editorial close after the cinema film. Same rail, copper, and
   Benton display type as the rest of the house — a giant year
   mark, a bottle plate, and three short chapters (house / craft
   / people) that echo the film lede without repeating it.
   ============================================================== */
.story {
  position: relative;
  isolation: isolate;
  z-index: 2;
  overflow: hidden;
  background: #fff;
  color: var(--ink);
  border-top: 1px solid rgba(17, 17, 17, 0.06);
  padding: clamp(64px, 8vw, 104px) var(--section-pad) clamp(72px, 9vw, 120px);
}

.story__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.4vw, 32px);
  max-width: var(--section-max);
  margin: 0 auto;
}

.story__head {
  max-width: 16ch;
  margin: 0;
  padding-bottom: clamp(14px, 1.8vw, 22px);
  border-bottom: 1px solid rgba(17, 17, 17, 0.06);
}

.story__head h2 {
  margin: 0;
  font-family: var(--font-geist-sans);
  font-size: var(--home-h2);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--ink);
}

.story__head h2 em {
  font-family: inherit;
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
}

.story__stage {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

.story__copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  align-self: center;
  max-width: 44ch;
  min-width: 0;
}

/* Chapter fade lives on the text stack only — never on the grid
   item or the photo, or the image column recenters / shears.
   Content-sized: a reserved min-height here punched a hole
   between the lede and the dots/CTA. */
.story__slide {
  flex: 0 0 auto;
  min-height: 0;
  width: 100%;
  transition: opacity 0.4s var(--ease), transform 0.45s var(--ease);
}

.story__slide.is-swap {
  opacity: 0;
  transform: translateY(12px);
}

.story__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  color: var(--accent);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.story__kicker::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(167, 96, 74, 0.1);
}

.story__copy h3 {
  margin: 0 0 12px;
  font-family: var(--font-geist-sans);
  font-size: clamp(1.35rem, 2.1vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: var(--ink);
  min-height: 0;
}

.story__copy h3 em {
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
}

.story__slide > p:not(.story__kicker) {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 42ch;
}

.story__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  margin-top: clamp(20px, 2.4vw, 28px);
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid rgba(17, 17, 17, 0.06);
}

.story__dots {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
  margin: 0;
}

.story__dot {
  display: grid;
  place-items: center;
  min-width: 36px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 999px;
  background: transparent;
  color: rgba(17, 17, 17, 0.45);
  font-family: var(--font-geist-sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}

.story__dot:hover,
.story__dot.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.story__cta {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 12px;
  margin: 0;
  padding: 4px 4px 4px 20px;
  border-radius: 999px;
  border: 1px solid rgba(17, 17, 17, 0.18);
  color: var(--ink);
  font-family: var(--font-geist-sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}

.story__cta b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-style: normal;
  font-size: 0.88rem;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease), color 0.35s var(--ease);
}

.story__cta:hover {
  background: var(--ink);
  color: #fff;
}

.story__cta:hover b {
  background: var(--accent);
  color: #fff;
  transform: rotate(-8deg) translate(2px, -2px);
}

.story__media {
  position: relative;
  align-self: center;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  margin: 0;
  aspect-ratio: 16 / 11;
  max-height: 420px;
  border-radius: 22px;
  overflow: hidden;
  background: #111;
  transform: none;
  box-shadow:
    0 24px 52px -28px rgba(17, 17, 17, 0.2),
    0 0 0 1px rgba(17, 17, 17, 0.04);
}

.story__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: none;
  transition: none;
}

[dir="rtl"] .story__foot,
[dir="rtl"] .story__dots {
  align-items: flex-start;
}

[dir="rtl"] .story__cta {
  padding: 4px 20px 4px 4px;
}

[dir="rtl"] .story__cta b { transform: scaleX(-1); }
[dir="rtl"] .story__cta:hover b {
  transform: scaleX(-1) rotate(8deg) translate(-2px, -2px);
}

@media (min-width: 901px) and (max-width: 1440px) {
  .story { padding: 72px var(--section-pad) 88px; }
  .story__head h2 { font-size: var(--home-h2); }
  .story__media { border-radius: 18px; max-height: 360px; }
}

@media (max-width: 900px) {
  .story { padding: 56px var(--section-pad) 72px; }
  .story__inner { gap: 16px; }
  .story__head {
    max-width: none;
    padding-bottom: 12px;
  }
  .story__stage {
    grid-template-columns: 1fr;
    gap: 22px;
    align-items: start;
  }
  .story__copy {
    max-width: none;
    align-self: start;
  }
  .story__slide,
  .story__copy h3 { min-height: 0; }
  .story__media {
    align-self: start;
    width: 100%;
    min-width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 16px;
  }
  .story__foot {
    margin-top: 18px;
    padding-top: 16px;
  }
}

@media (max-width: 560px) {
  .story { padding: 48px var(--section-pad) 64px; }
  .story__copy h3 { font-size: clamp(1.3rem, 5.5vw, 1.65rem); }
}

@media (prefers-reduced-motion: reduce) {
  .story__slide {
    transition: none;
    transform: none;
  }
}

/* ==========================================================
   Homepage subscription — #subscribe
   Opaque paper so the fixed hero video cannot show through.
   Editorial, not a beige boxed clone: air, ink pills, outline CTA.
   ========================================================== */
.subscribe {
  position: relative;
  isolation: isolate;
  z-index: 2;
  overflow: hidden;
  background: #fff;
  color: var(--ink);
  border-top: 1px solid rgba(17, 17, 17, 0.06);
  padding: clamp(64px, 8vw, 104px) var(--section-pad) clamp(72px, 9vw, 120px);
}

/* Corner washes — same copper radial + blur recipe as .manifesto__glow
   (the white band immediately above). Two physical-corner blobs so this
   section does not read as another plain manifesto. Sit on top of the
   opaque #fff fill (hero cannot punch through) and under .subscribe__inner.
   overflow:hidden already clips them so they cannot leak into neighbors. */
.subscribe::before,
.subscribe::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(230, 118, 58, 0.62) 0%,
    rgba(232, 160, 100, 0.38) 22%,
    rgba(255, 200, 140, 0.18) 46%,
    rgba(255, 220, 180, 0.08) 60%,
    transparent 74%
  );
  filter: blur(55px);
  pointer-events: none;
  z-index: 0;
}

.subscribe::before {
  /* Physical top-right — left/right, not inline-start, so RTL does not flip. */
  top: -18%;
  right: -12%;
  width: min(58vw, 640px);
  height: min(46vw, 500px);
  animation: subscribeGlow 10s ease-in-out infinite alternate;
}

.subscribe::after {
  /* Physical bottom-left. */
  bottom: -20%;
  left: -14%;
  width: min(52vw, 560px);
  height: min(42vw, 440px);
  animation: subscribeGlow 12s ease-in-out infinite alternate-reverse;
}

@keyframes subscribeGlow {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.9; }
  100% { transform: translate(14px, -10px) scale(1.05); opacity: 1; }
}

.subscribe__inner {
  position: relative;
  z-index: 1;
  max-width: 42rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.subscribe h2 {
  margin: 0 0 clamp(22px, 3vw, 32px);
  max-width: 18ch;
  font-family: var(--font-geist-sans);
  font-size: var(--home-h2);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: var(--ink);
}

.subscribe h2 em {
  font-family: inherit;
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
}

.subscribe__seg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(22px, 3vw, 32px);
}

.subscribe__pill {
  min-width: 88px;
  height: 38px;
  padding: 0 20px;
  border: 1px solid rgba(17, 17, 17, 0.18);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-geist-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.subscribe__pill:hover {
  border-color: var(--ink);
}

.subscribe__pill.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.subscribe__plan {
  width: 100%;
  max-width: 22rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
}

.subscribe__plan h3 {
  margin: 0 0 6px;
  font-family: var(--font-geist-sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.subscribe__price {
  margin: 0 0 18px;
  font-family: var(--font-geist-sans);
  font-size: clamp(1.65rem, 3vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
}

.subscribe__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 4px 4px 4px 20px;
  border-radius: 999px;
  border: 1px solid rgba(17, 17, 17, 0.18);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-geist-sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}

.subscribe__cta b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-style: normal;
  font-size: 0.88rem;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease);
}

.subscribe__cta:hover {
  background: var(--ink);
  color: #fff;
}

.subscribe__cta:hover b {
  background: var(--accent);
  transform: rotate(-8deg) translate(2px, -2px);
}

.subscribe__or {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 16rem;
  margin: clamp(22px, 3vw, 32px) 0;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.subscribe__or::before,
.subscribe__or::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}

.subscribe__choose {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--font-geist-sans);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.subscribe__switch {
  position: relative;
  width: 44px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(17, 17, 17, 0.2);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}

.subscribe__switch i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ink);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}

.subscribe__switch.is-on,
.subscribe__switch[aria-checked="true"] {
  background: var(--ink);
  border-color: var(--ink);
}

.subscribe__switch.is-on i,
.subscribe__switch[aria-checked="true"] i {
  transform: translateX(18px);
  background: #fff;
}

[dir="rtl"] .subscribe__inner,
[dir="rtl"] .subscribe h2,
[dir="rtl"] .subscribe__choose {
  text-align: center;
}

[dir="rtl"] .subscribe__cta {
  padding: 4px 20px 4px 4px;
}

[dir="rtl"] .subscribe__cta b {
  transform: scaleX(-1);
}

[dir="rtl"] .subscribe__cta:hover b {
  transform: scaleX(-1) rotate(8deg) translate(-2px, -2px);
}

[dir="rtl"] .subscribe__switch i {
  left: auto;
  right: 2px;
}

[dir="rtl"] .subscribe__switch.is-on i,
[dir="rtl"] .subscribe__switch[aria-checked="true"] i {
  transform: translateX(-18px);
}

@media (min-width: 901px) and (max-width: 1440px) {
  .subscribe { padding: 72px var(--section-pad) 88px; }
}

@media (max-width: 900px) {
  .subscribe { padding: 56px var(--section-pad) 72px; }
  .subscribe h2 { max-width: 16ch; }
  .subscribe::before,
  .subscribe::after {
    filter: blur(40px);
  }
}

@media (max-width: 560px) {
  .subscribe { padding: 48px var(--section-pad) 64px; }
  .subscribe__pill { min-width: 76px; height: 34px; padding: 0 16px; }
  .subscribe__choose { flex-wrap: wrap; font-size: 0.86rem; }
}

@media (prefers-reduced-motion: reduce) {
  .subscribe::before,
  .subscribe::after {
    animation: none;
  }
  .subscribe__pill,
  .subscribe__cta,
  .subscribe__cta b,
  .subscribe__switch,
  .subscribe__switch i {
    transition: none;
  }
}

/* Subscription page ---------------------------------------
   Scoped under .subpage so homepage #subscribe, .rcard on
   products.html, and shop-shell bag lines are untouched.
   Opaque fill + z-index:2 matches other inner-page sections
   that sit under shared chrome / a possible fixed hero. */
.subpage {
  position: relative;
  z-index: 2;
  padding: 0 0 clamp(36px, 5vw, 64px);
  background: #fff;
}

.subpage__kicker {
  margin: 0 0 12px;
  color: var(--accent);
  font-family: var(--font-geist-sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Landscape editorial banner — same rail + rounded frame as .pvideo.
   Top padding matches --pvideo-gap so the floating nav clears the card. */
.subpage__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.subpage__banner {
  position: relative;
  z-index: 2;
  padding: clamp(96px, 9vw, 128px) var(--section-pad) 0;
  background: #fff;
}

.subpage__banner-stage {
  position: relative;
  width: 100%;
  max-width: var(--section-max);
  height: clamp(380px, 65vh, 750px);
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
  background: #1a1612;
}

.subpage__banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top;
}

/* Magazine spread: why (quote) + how (timeline) */
.subpage__spread {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
  max-width: var(--section-max);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 96px) var(--section-pad) clamp(48px, 6vw, 80px);
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.subpage__spread-why {
  padding-top: 2px;
}

.subpage__spread-quote {
  max-width: 16ch;
  margin: 0 0 14px;
  font-family: var(--font-geist-sans);
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: var(--ink);
}

.subpage__spread-quote em {
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
}

.subpage__spread-lede {
  max-width: 24ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.subpage__spread-how .subpage__kicker {
  margin-bottom: 18px;
}

.subpage__timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.subpage__timeline::before {
  content: "";
  position: absolute;
  top: 15px;
  inset-inline: 16px;
  height: 1px;
  background: var(--line);
  pointer-events: none;
}

.subpage__beat {
  position: relative;
  padding-inline-end: clamp(14px, 1.8vw, 24px);
}

.subpage__beat:last-child {
  padding-inline-end: 0;
}

.subpage__beat-idx {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 16px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--accent);
  font-family: var(--font-geist-sans);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.subpage__beat-body h3 {
  margin: 0 0 6px;
  font-family: var(--font-geist-sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.035em;
}

.subpage__beat-body p {
  margin: 0;
  max-width: 18ch;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

/* Choose-fragrance block */
.subpage__pick {
  position: relative;
  z-index: 2;
  background: #fff;
}

.subpage__pick-head {
  max-width: var(--section-max);
  margin: 0 auto;
  padding: clamp(40px, 5vw, 64px) var(--section-pad) 8px;
}

.subpage__pick-head h2 {
  margin: 0 0 10px;
  font-family: var(--font-geist-sans);
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--ink);
}

.subpage__pick-lede {
  max-width: 36ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* Homepage #subscribe gender pills — reused, left-aligned to the pick rail.
   Do not restyle .subscribe__pill globally; only place and focus here. */
.subpage__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: var(--section-max);
  margin: 0 auto;
  padding: 20px var(--section-pad) 28px;
}

.subpage__filters.subscribe__seg {
  margin-bottom: 0;
}

.subpage .subscribe__pill:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.subpage .collection {
  padding-bottom: 12px;
}

.subpage__bar {
  position: sticky;
  bottom: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: calc(var(--section-max) + 2 * var(--section-pad));
  margin: 8px auto 0;
  padding: 14px var(--section-pad);
  background: rgba(255, 255, 255, 0.94);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}

.subpage__bar-msg {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.subpage__bar .subscribe__cta[disabled],
.subpage__cta[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Premium pick state — scoped so homepage / catalog cards stay clean */
.subpage .rcard.is-picked .rcard__media {
  box-shadow: inset 0 0 0 1.5px var(--accent);
}

.subpage .rcard.is-picked .rcard__add,
.subpage .rcard__add[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.subpage .rcard.is-picked .rcard__add::after {
  opacity: 0;
  transform: translate(-50%, -50%) scaleY(0);
}

@media (min-width: 901px) and (max-width: 1440px) {
  .subpage__banner { padding-top: 112px; }
  .subpage__banner-stage { height: clamp(360px, 60vh, 650px); }
}

@media (max-width: 900px) {
  .subpage__banner { padding-top: 100px; }
  .subpage__banner-stage {
    height: clamp(310px, 53vh, 480px);
    border-radius: 12px;
  }
  .subpage__banner-img { object-position: top; }

  .subpage__spread {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .subpage__spread-quote { max-width: 16ch; }

  .subpage__timeline {
    grid-template-columns: 1fr;
    padding-inline-start: 0;
  }

  .subpage__timeline::before {
    top: 16px;
    bottom: 16px;
    inset-inline: 15px auto;
    width: 1px;
    height: auto;
  }

  .subpage__beat {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding-inline-end: 0;
    padding-bottom: 16px;
  }

  .subpage__beat:last-child { padding-bottom: 0; }
  .subpage__beat-idx { margin-bottom: 0; }
  .subpage__beat-body p { max-width: none; }

  .subpage__bar { flex-wrap: wrap; justify-content: center; text-align: center; }
}

@media (max-width: 560px) {
  .subpage { padding-bottom: 28px; }
  .subpage__banner { padding-top: 88px; }
  .subpage__banner-stage {
    height: clamp(280px, 46vh, 380px);
    border-radius: 10px;
  }
  .subpage__bar { padding: 12px var(--section-pad) 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .reveal,
  .nav,
  .hero__left,
  .hero__sound { opacity: 1; transform: none; }

  .loader { display: none; }
}

/* ==========================================================
   SHOP PAGES — products / product / cart / checkout
   ----------------------------------------------------------
   Consumes existing tokens: --accent, --ink, --bg, --secondary,
   --gray, --muted, --line, --ease, --pad, --font-geist-sans
   No new palette; layered on top of the home-page system.
   ========================================================== */

/* -- Inner-page nav (shop pages) ---------------------------- */
.nav--inner {
  position: sticky;
  top: 0;
  left: auto;
  right: auto;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px clamp(20px, 4vw, 48px);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid rgba(17, 17, 17, 0.06);
  transition: none;
}

.nav--inner .brand img {
  height: 44px;
  filter: none;
}

.nav__inner-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav__inner-links a {
  position: relative;
  padding: 10px 14px;
  border-radius: 999px;
  color: rgba(17, 17, 17, 0.72);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 0.3s var(--ease), background 0.3s;
}

.nav__inner-links a:hover {
  color: var(--ink);
  background: rgba(17, 17, 17, 0.04);
}

.nav__inner-links a.is-active {
  color: var(--ink);
  background: rgba(17, 17, 17, 0.06);
}

.nav__inner-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.nav__inner-right .nav__ic {
  width: 40px;
  height: 40px;
  color: var(--ink);
  border: 1px solid rgba(17, 17, 17, 0.1);
  background: #fff;
  border-radius: 50%;
}

.nav__inner-right .nav__ic:hover {
  background: rgba(17, 17, 17, 0.04);
}

.nav__bag-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 6px 0 16px;
  border: 1px solid rgba(17, 17, 17, 0.1);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: 0.25s var(--ease);
}

.nav__bag-link:hover {
  background: var(--ink);
  color: #fff;
}

.nav__bag-link b {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0;
}

.nav__bag-link b.is-empty {
  background: rgba(17, 17, 17, 0.14);
}

/* -- Page container shell ----------------------------------- */
.page {
  min-height: calc(100vh - 200px);
  background: var(--bg);
  color: var(--ink);
}

/* ==========================================================
   Products page — cinematic video hero (.pvideo)
   ----------------------------------------------------------
   Structure:
     .pvideo           — outer section; horizontal padding uses --section-pad
                         so the section sits on the same rail as header/footer
     .pvideo__stage    — video wrapper, capped at --section-max, rounded
     .pvideo__media    — the <video> element itself
     .pvideo__grad     — bottom-fade gradient for legibility
     .pvideo__inner    — text column BELOW the video, same rail

   Vertical rhythm — --pvideo-gap is the vertical breathing above AND below
   the video. Same variable drives .pvideo's padding-top and .pvideo__inner's
   margin-top so the video is visually balanced.
   ========================================================== */
.pvideo {
  --pvideo-gap: clamp(96px, 9vw, 128px);
  position: relative;
  background: #fff;
  /* Top = bottom-below-video (both --pvideo-gap). Horizontal matches header rail.
     Section's own padding-bottom is smaller — the "bottom breathing" of the video
     lives on .pvideo__inner's margin-top, not on the section. */
  padding: var(--pvideo-gap) var(--section-pad) clamp(40px, 5vw, 64px);
}

.pvideo__stage {
  position: relative;
  width: 100%;
  /* Follow the same content cap as header/footer/grid — the video is a card,
     not a full-bleed element. */
  max-width: var(--section-max);
  margin: 0 auto;
  aspect-ratio: 21 / 9;
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
  background: #0f0d0b;
}

.pvideo__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.02) contrast(1.02);
  z-index: 1;
}

.pvideo__grad {
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.08) 60%,
    rgba(0, 0, 0, 0.22) 100%
  );
  pointer-events: none;
  z-index: 2;
}

.pvideo__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(40px, 8vw, 140px);
  width: 100%;
  /* Same content cap as .pvideo__stage — video and text sit inside the same rail.
     Parent .pvideo already applies --section-pad horizontal padding, so no
     extra horizontal padding here. */
  max-width: var(--section-max);
  /* margin-top matches .pvideo's padding-top (--pvideo-gap) so the space
     above and below the video is symmetric. */
  margin: var(--pvideo-gap) auto 0;
  padding: 0;
}

.pvideo__eyebrow {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px 8px 4px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 999px;
  background: #fff;
  font-family: var(--font-geist-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
  margin-bottom: 40px;
}

.pvideo__rule {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink);
  margin-left: 10px;
  opacity: 0.55;
}

.pvideo__eyebrow b {
  font-weight: 700;
  color: var(--ink);
}

.pvideo__eyebrow i {
  font-style: normal;
  color: rgba(17, 17, 17, 0.3);
}

.pvideo__title {
  grid-column: 1;
  grid-row: 2;
  font-family: var(--font-geist-sans);
  /* Reduced again — the previous clamp(2.2–4.6rem) still read as
     display-scale ad copy above the compact video hero. Trimmed
     ~30% at the max end so the title carries editorial weight
     without dominating the fold. Line-height nudged to 0.98 to
     keep the tightened glyphs from touching. */
  font-size: clamp(1.8rem, 3.6vw, 3.2rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #000;
  margin: 0 0 32px;
  max-width: 22ch;
}

.pvideo__title em {
  font-style: normal;
  color: var(--accent);
  font-weight: 700;
  -webkit-text-fill-color: currentColor;
}

.pvideo__lede {
  grid-column: 1;
  grid-row: 3;
  max-width: 48ch;
  font-family: var(--font-geist-sans);
  font-size: clamp(0.98rem, 1.2vw, 1.12rem);
  font-weight: 500;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.7);
  margin: 0 0 56px;
}

.pvideo__foot {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  display: flex;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
  padding-top: 8px;
  max-width: 48ch;
  justify-content: flex-end;
}

.pvideo__meta {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 20px 44px;
  margin: 0;
}

.pvideo__meta > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.pvideo__meta dt {
  font-family: var(--font-geist-sans);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.5);
}

.pvideo__meta dd {
  font-family: var(--font-geist-sans);
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}

.pvideo__feat {
  display: grid;
  grid-template-columns: minmax(0, auto) 30px;
  grid-template-areas:
    "label arrow"
    "name arrow";
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  padding: 9px 9px 9px 16px;
  border: 1px solid rgba(17, 17, 17, 0.1);
  border-radius: 14px;
  background: #fafaf8;
  box-shadow: 0 10px 24px -18px rgba(17, 17, 17, 0.3);
  color: var(--ink);
  transition: 0.35s var(--ease);
}

.pvideo__feat:hover {
  background: #fafaf8;
  color: var(--ink);
  border-color: rgba(17, 17, 17, 0.1);
}

.pvideo__feat-lbl {
  grid-area: label;
  font-family: var(--font-geist-sans);
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.5);
  transition: color 0.3s;
}

.pvideo__feat:hover .pvideo__feat-lbl {
  color: rgba(17, 17, 17, 0.5);
}

.pvideo__feat-name {
  grid-area: name;
  font-family: var(--font-geist-sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.pvideo__feat-name i {
  font-style: normal;
  color: var(--accent);
  font-weight: 600;
}

.pvideo__feat:hover .pvideo__feat-name i {
  color: var(--accent);
}

.pvideo__feat-arrow {
  grid-area: arrow;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.06);
  color: var(--ink);
  font-size: 0.9rem;
  transition: transform 0.3s var(--ease), background 0.3s, color 0.3s;
}

.pvideo__feat:hover .pvideo__feat-arrow {
  background: rgba(17, 17, 17, 0.06);
  color: var(--ink);
  transform: none;
}

@media (max-width: 900px) {
  .pvideo {
    /* Tighter vertical rhythm on mobile — --pvideo-gap drives both the
       space above the video and .pvideo__inner's margin-top, so the video
       stays symmetric here too. */
    --pvideo-gap: 88px;
    padding-bottom: 32px;
  }
  .pvideo__inner {
    display: block;
  }
  .pvideo__stage {
    /* Taller aspect on mobile so the video still reads cinematically
       when the viewport narrows. */
    aspect-ratio: 16 / 11;
    border-radius: 12px;
  }
  .pvideo__title {
    font-size: clamp(1.9rem, 7vw, 2.8rem);
  }
  .pvideo__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .pvideo__meta {
    grid-template-columns: repeat(2, auto);
    gap: 16px 32px;
  }
}

@media (max-width: 560px) {
  .pvideo__stage {
    border-radius: 10px;
  }
}

/* -- Editorial banner (products page) — white/black marquee-style hero -- */
.pbanner {
  position: relative;
  isolation: isolate;
  min-height: min(78vh, 720px);
  padding: clamp(120px, 10vw, 168px) clamp(24px, 5vw, 80px) clamp(48px, 6vw, 80px);
  background: #ffffff;
  color: var(--ink);
  overflow: hidden;
  border-bottom: 1px solid rgba(17, 17, 17, 0.06);
}

.pbanner__grain { display: none; }
.pbanner__glow  { display: none; }

.pbanner__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}

/* Left column — editorial copy */
.pbanner__left {
  max-width: 640px;
}

.pbanner__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px 8px 4px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 999px;
  background: #fff;
  font-family: var(--font-geist-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
  margin-bottom: 32px;
}

.pbanner__rule {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--ink);
  margin-left: 12px;
  opacity: 0.55;
}

.pbanner__eyebrow b {
  font-weight: 700;
  color: var(--ink);
}

.pbanner__eyebrow i {
  font-style: normal;
  color: rgba(17, 17, 17, 0.3);
}

.pbanner__title {
  font-family: var(--font-geist-sans);
  /* Kept in lockstep with .pvideo__title so the two collection-page
     hero variants remain visually equivalent. Trimmed ~30% at the
     max end (was clamp 2.4–4.8rem) so the banner reads as a
     collection headline, not a marketing splash. */
  font-size: clamp(1.9rem, 3.8vw, 3.4rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0 0 24px;
  color: #000;
}

.pbanner__title em {
  font-style: normal;
  color: var(--accent);
  font-weight: 700;
  -webkit-text-fill-color: currentColor;
}

.pbanner__lede {
  max-width: 52ch;
  font-family: var(--font-geist-sans);
  font-size: clamp(0.98rem, 1.2vw, 1.12rem);
  font-weight: 500;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.7);
  margin: 0 0 40px;
}

.pbanner__meta {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 28px 40px;
  padding-top: 28px;
  border-top: 1px solid rgba(17, 17, 17, 0.08);
  margin: 0;
}

.pbanner__meta > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.pbanner__meta dt {
  font-family: var(--font-geist-sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.5);
}

.pbanner__meta dd {
  font-family: var(--font-geist-sans);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}

/* Right column — featured signature stage */
.pbanner__right {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.pbanner__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-width: 460px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  overflow: visible;
  isolation: isolate;
}

.pbanner__stage::before {
  content: none;
}

.pbanner__stage-idx {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 3;
  font-family: var(--font-geist-sans);
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.45);
}

.pbanner__stage img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0;
  filter: drop-shadow(0 30px 44px rgba(0, 0, 0, 0.14));
}

.pbanner__stage-plate {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 2%;
  height: 28px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.18) 0%, transparent 70%);
  filter: blur(8px);
  z-index: 1;
  pointer-events: none;
}

.pbanner__feat {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 12px 12px 20px;
  border: 1px solid rgba(17, 17, 17, 0.1);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  transition: 0.35s var(--ease);
}

.pbanner__feat:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.pbanner__feat-lbl {
  font-family: var(--font-geist-sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.5);
  transition: color 0.3s;
}

.pbanner__feat:hover .pbanner__feat-lbl {
  color: rgba(245, 239, 229, 0.6);
}

.pbanner__feat-name {
  font-family: var(--font-geist-sans);
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.pbanner__feat-name i {
  font-style: normal;
  color: var(--accent);
  font-weight: 600;
}

.pbanner__feat:hover .pbanner__feat-name i {
  color: #e5b898;
}

.pbanner__feat-arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.06);
  color: var(--ink);
  font-size: 0.9rem;
  transition: transform 0.3s var(--ease), background 0.3s, color 0.3s;
}

.pbanner__feat:hover .pbanner__feat-arrow {
  background: #fff;
  color: var(--ink);
  transform: translate(2px, -2px);
}

/* Bottom bar under banner */
.pbanner__foot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1400px;
  margin: clamp(40px, 5vw, 72px) auto 0;
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid rgba(17, 17, 17, 0.08);
  font-family: var(--font-geist-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.5);
}

.pbanner__foot-scroll {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}

.pbanner__foot-scroll i {
  display: inline-block;
  font-style: normal;
  color: var(--ink);
  animation: pbanScroll 2.6s ease-in-out infinite;
}

@keyframes pbanScroll {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50% { transform: translateY(4px); opacity: 1; }
}

.pbanner__foot-note {
  color: rgba(17, 17, 17, 0.4);
}

/* -- Toolbar (editorial filters + sort) ---------------------
   z-index: 20 — above .collection (2) so open popovers paint over
   product bottles. Below .nav (40), mega (60–70), bag (60), loader (300).
   A panel z-index of 12 was trapped inside this section's stacking
   context while the grid (later sibling, also z-index: 2) won paint. */
.shop-toolbar {
  position: relative;
  z-index: 20;
  max-width: calc(var(--section-max) + 2 * var(--section-pad));
  margin: 0 auto;
  padding: clamp(20px, 2.6vw, 36px) var(--section-pad) clamp(18px, 2.2vw, 28px);
  background: #fff;
}

.sfilter__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}

.sfilter__count {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35em 0.45em;
  margin: 0;
  min-width: 8.5rem;
  font-family: var(--font-geist-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.46);
}

.sfilter__count b {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.sfilter__count i {
  font-style: normal;
  color: rgba(17, 17, 17, 0.36);
  letter-spacing: 0.14em;
}

.sfilter__triggers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
}

.sfilter__group {
  position: relative;
  z-index: 1;
}

.sfilter__group.is-open {
  z-index: 22;
}

.sfilter__btn,
.sfilter__open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(17, 17, 17, 0.55);
  font-family: var(--font-geist-sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.sfilter__btn:hover,
.sfilter__open:hover,
.sfilter__btn[aria-expanded="true"] {
  color: var(--ink);
  background: rgba(17, 17, 17, 0.04);
}

.sfilter__btn.is-active,
.sfilter__open.is-active {
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(167, 96, 74, 0.34);
}

.sfilter__caret {
  width: 0;
  height: 0;
  border-inline-start: 3.5px solid transparent;
  border-inline-end: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  opacity: 0.42;
  transition: transform 0.25s var(--ease);
}

.sfilter__btn[aria-expanded="true"] .sfilter__caret {
  transform: rotate(180deg);
}

.sfilter__badge {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-geist-sans);
  font-style: normal;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.sfilter__badge.is-on {
  display: inline-flex;
}

.sfilter__open {
  display: none;
}

.sfilter__open svg {
  width: 16px;
  height: 16px;
}

.sfilter__sort {
  position: relative;
  z-index: 21;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-inline-start: auto;
  flex: 0 0 auto;
  font-family: var(--font-geist-sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.48);
}

.sfilter__select {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.sfilter__select select {
  appearance: none;
  padding: 11px 40px 11px 18px;
  border: 1px solid rgba(17, 17, 17, 0.1);
  border-radius: 999px;
  background: #fff;
  font-family: var(--font-geist-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.25s;
}

[dir="rtl"] .sfilter__select select {
  padding: 11px 18px 11px 40px;
}

.sfilter__select select:hover {
  border-color: rgba(17, 17, 17, 0.28);
}

.sfilter__select-caret {
  position: absolute;
  inset-inline-end: 16px;
  color: rgba(17, 17, 17, 0.5);
  pointer-events: none;
  font-size: 0.7rem;
}

.sfilter__panel {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-start: 0;
  z-index: 24;
  min-width: min(320px, 82vw);
  max-width: min(420px, 90vw);
  padding: 20px 20px 18px;
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 20px;
  box-shadow:
    0 28px 56px -24px rgba(17, 17, 17, 0.22),
    0 0 0 1px rgba(17, 17, 17, 0.03);
}

.sfilter__group.is-open .sfilter__panel {
  display: block;
}

.sfilter__group--end .sfilter__panel {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

.sfilter__group.is-open .sfilter__panel--stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sfilter__panel-hd {
  margin: 0 0 12px;
  font-family: var(--font-geist-sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.42);
}

.sfilter__panel--stack .sfilter__panel-hd {
  margin-bottom: 10px;
}

.sfilter [hidden],
.sfilter__badge[hidden],
.sfilter__panel[hidden],
.sfilter__active[hidden] {
  display: none !important;
}

.sfilter__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 36px;
}

.sfilter__group.is-open .sfilter__pills,
.sfilter-drawer .sfilter__pills {
  display: flex !important;
  visibility: visible;
  opacity: 1;
  height: auto;
}

.sfilter__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 999px;
  background: #fff;
  color: #111111;
  font-family: var(--font-geist-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: 0.22s var(--ease);
}

.sfilter__group.is-open .sfilter__pill,
.sfilter-drawer .sfilter__pill {
  display: inline-flex !important;
  visibility: visible;
  opacity: 1;
}

.sfilter__pill i {
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0;
  color: rgba(17, 17, 17, 0.38);
  font-variant-numeric: tabular-nums;
}

.sfilter__pill:hover {
  border-color: rgba(17, 17, 17, 0.28);
  color: var(--ink);
}

.sfilter__pill.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.sfilter__pill.is-on i {
  color: rgba(255, 255, 255, 0.62);
}

.sfilter__active {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding-top: 14px;
}

.sfilter__active.is-on {
  display: flex;
}

.sfilter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

.sfilter__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 8px 0 13px;
  border: 1px solid rgba(167, 96, 74, 0.28);
  border-radius: 999px;
  background: rgba(167, 96, 74, 0.06);
  color: var(--accent);
  font-family: var(--font-geist-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: 0.2s var(--ease);
}

[dir="rtl"] .sfilter__chip {
  padding: 0 13px 0 8px;
}

.sfilter__chip:hover {
  background: rgba(167, 96, 74, 0.12);
}

.sfilter__chip b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--accent);
}

.sfilter__clear,
.sfilter-drawer__clear {
  border: 0;
  background: transparent;
  padding: 6px 2px;
  color: rgba(17, 17, 17, 0.48);
  font-family: var(--font-geist-sans);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(17, 17, 17, 0.18);
}

.sfilter__clear:hover,
.sfilter-drawer__clear:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

.sfilter-veil[hidden],
.sfilter-drawer[hidden] {
  display: none;
}

.sfilter-veil {
  position: fixed;
  inset: 0;
  z-index: 36;
  background: rgba(17, 17, 17, 0.28);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0s linear 0.35s;
}

.sfilter-veil.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.sfilter-drawer {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 38;
  display: flex;
  flex-direction: column;
  max-height: min(88vh, 760px);
  background: #fff;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -24px 60px -28px rgba(17, 17, 17, 0.28);
  transform: translateY(108%);
  transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

.sfilter-drawer.is-open {
  transform: none;
}

.sfilter-drawer__head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 22px 16px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}

.sfilter-drawer__head::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.12);
  transform: translateX(-50%);
}

.sfilter-drawer__eyebrow {
  margin: 0 0 4px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.sfilter-drawer__head h2 {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}

.sfilter-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(17, 17, 17, 0.1);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}

.sfilter-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 22px 24px;
  -webkit-overflow-scrolling: touch;
}

.sfilter-drawer__block {
  padding: 18px 0;
  border-bottom: 1px solid rgba(17, 17, 17, 0.07);
}

.sfilter-drawer__block:last-child {
  border-bottom: 0;
}

.sfilter-drawer__block h3 {
  margin: 0 0 12px;
  font-family: var(--font-geist-sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.42);
}

.sfilter-drawer__foot {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 22px max(20px, env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(17, 17, 17, 0.08);
  background: #fff;
}

.sfilter-drawer__done {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-geist-sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
}

.sfilter-drawer__done b {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}

body.sfilter-lock {
  overflow: hidden;
}

/* Tablet + phone: collapse the six popovers into one Filter control
   that opens the bottom sheet. Desktop (>1100) keeps the editorial bar. */
@media (max-width: 1100px) {
  .sfilter__triggers {
    display: none;
  }
  .sfilter__open {
    display: inline-flex;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid rgba(17, 17, 17, 0.12);
    background: #fff;
  }
  .sfilter__open.is-active {
    border-color: rgba(167, 96, 74, 0.4);
  }
  .sfilter__sort {
    margin-inline-start: 0;
  }
  .sfilter__select select {
    min-height: 44px;
    font-size: 16px;
    letter-spacing: 0.02em;
  }
  [dir="rtl"] .sfilter__select select {
    padding: 11px 18px 11px 40px;
  }
  .sfilter-drawer .sfilter__pill {
    min-height: 44px;
    padding: 0 16px;
    font-size: 0.84rem;
  }
}

@media (max-width: 700px) {
  .sfilter__bar {
    gap: 12px;
  }
  .sfilter__count {
    flex: 1 1 auto;
    min-width: 0;
  }
  .sfilter__sort {
    flex: 1 1 100%;
    justify-content: flex-start;
  }
  .sfilter__active {
    padding-top: 12px;
  }
}

/* -- Product grid (collection) ------------------------------
   Horizontal padding sits on .collection__grid (not .collection) so the
   grid shares the exact same max-width + padding formula as .pvideo__inner
   and .shop-toolbar. Result: cards line up with header/footer edges. */
.collection {
  position: relative;
  z-index: 2;
  padding: 0 0 clamp(96px, 12vw, 160px);
  background: #fff;
}

.collection__grid {
  display: grid;
  /* Base rule targets wide displays (≥1440px). Lower breakpoints
     narrow via max-width media queries below (mobile-last cascade). */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 22px);
  max-width: calc(var(--section-max) + 2 * var(--section-pad));
  margin: 0 auto;
  padding: 0 var(--section-pad);
}

/* Grid column ladder — catalog density, not poster tiles:
     ≥1200px       → 5 cols (laptop + desktop; ~220–260 px cards)
     1100–1199px  → 4 cols
      900–1099px  → 3 cols
      600–899px   → 2 cols
      <600px       → 1 col
   Four columns on a 1280–1440 laptop made each tile ~300 px wide
   and read as a poster, not a SKU. Five columns matches the
   homepage shop-rail card width. */
@media (max-width: 1199px) {
  .collection__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1099px) {
  .collection__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 899px) {
  .collection__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

.collection__empty {
  text-align: center;
  color: var(--muted);
  padding: 100px 20px;
  font-family: var(--font-geist-sans);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* -- Product card (matches home .card language) ------------ */
.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.pcard:hover {
  transform: translateY(-6px);
}

/* Filter / sort swap — outgoing cards fade down, incoming cards
   stagger in. Reduced-motion users skip both. */
.collection__grid.is-swapping .pcard {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.pcard.is-enter {
  animation: pcard-enter 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--pcard-delay, 0ms);
}

@keyframes pcard-enter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .collection__grid.is-swapping .pcard,
  .pcard.is-enter {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
  }
}

.pcard__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: transparent;
  isolation: isolate;
}

/* Glitter sweep — identical to homepage .card__media::before.
   No hover wash / shadow on this card: the collection sits on
   paper-white, and a tinted overlay reads as a dirty patch. */
.pcard__media::before {
  content: "";
  position: absolute;
  top: -15%;
  bottom: -15%;
  left: -40%;
  width: 50%;
  z-index: 4;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.04) 30%,
    rgba(255, 240, 210, 0.45) 50%,
    rgba(255, 255, 255, 0.04) 70%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(0) skewX(-16deg);
  opacity: 0;
  pointer-events: none;
  filter: blur(2px);
  transition:
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s var(--ease);
}

.pcard:hover .pcard__media::before {
  transform: translateX(300%) skewX(-16deg);
  opacity: 1;
  transition:
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.05s,
    opacity 0.25s var(--ease) 0.08s;
}

.pcard__media img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  padding: 0;
  display: block;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center 60%;
}

.pcard:hover .pcard__media img {
  transform: scale(1.04);
}

.pcard__idx,
.pcard__tag {
  display: none;
}

.pcard__body {
  padding: 14px 2px 2px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pcard__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.pcard__row h3 {
  font-family: var(--font-geist-sans);
  /* Catalog scale — matches homepage .card h3 (0.9 rem). The previous
     1.35 rem title made collection tiles read as editorial posters
     instead of shoppable SKUs. */
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.18;
  margin: 0;
  position: relative;
  padding-bottom: 3px;
  color: var(--ink);
}

.pcard__row h3 a {
  color: inherit;
  transition: color 0.35s var(--ease);
}

.pcard__row h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--ink);
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.pcard:hover .pcard__row h3::after {
  width: 34px;
}

.pcard__price {
  font-family: var(--font-geist-sans);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.pcard__family {
  font-family: var(--font-geist-sans);
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.5);
  margin: 2px 0 0;
}

.pcard__notes {
  font-family: var(--font-geist-sans);
  font-size: 0.64rem;
  font-weight: 500;
  color: rgba(17, 17, 17, 0.58);
  margin: 0;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 8px;
  margin-top: 6px;
  border-top: 1px solid rgba(17, 17, 17, 0.08);
}

.pcard__add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-geist-sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
  cursor: pointer;
}

.pcard__add:hover {
  background: #000;
  transform: translateX(2px);
}

.pcard__add .arrow {
  display: inline-block;
  transition: transform 0.3s var(--ease);
}

.pcard__add:hover .arrow {
  transform: translate(2px, -2px);
}

.pcard__add.is-added {
  background: #2f7a5c;
}

.pcard__add.is-added .arrow {
  transform: rotate(90deg);
}

.pcard__more {
  font-family: var(--font-geist-sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
  position: relative;
  padding: 4px 0;
  transition: color 0.3s;
}

.pcard__more::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: rgba(17, 17, 17, 0.2);
  transition: background 0.3s, transform 0.4s var(--ease);
  transform-origin: right;
}

.pcard__more:hover {
  color: var(--ink);
}

.pcard__more:hover::after {
  background: var(--ink);
  transform: scaleX(1.1);
  transform-origin: left;
}

/* -- Product detail page (PDP) — white/black · Geist Sans -- */
.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Top padding clears the fixed nav footprint (~80 px) with a
     comfortable 28-40 px breathing gap so the crumbs never touch
     the pill nav. Excess dead-space above the fold is resolved by
     the auto-scroll on land (see product.html), not by shrinking
     this clearance. */
  padding: clamp(112px, 7.5vw, 128px) clamp(24px, 5vw, 80px) 0;
  font-family: var(--font-geist-sans);
  font-size: 0.54rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.5);
}

.crumbs a {
  color: inherit;
  transition: color 0.25s;
}

.crumbs a:hover {
  color: var(--ink);
}

.crumbs i {
  font-style: normal;
  color: rgba(17, 17, 17, 0.32);
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1;
  transform: translateY(-1px);
}

.crumbs span {
  color: var(--ink);
  font-weight: 700;
}

.pdp__hero {
  display: grid;
  /* Info column gets the slight edge — product name, notes and CTA are the
     money-side of a PDP; the media column is capped separately via
     .pdp__stage max-width so it can't dominate. */
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 6vw, 88px);
  /* Top padding is INTENTIONALLY small (~20 px) — the breadcrumbs
     above already carry the nav-clearance padding. Bottom padding
     stays generous to separate the hero from the pyramid section
     below it. Previously top was 56 px which stacked with the
     crumbs' 128 px = 184 px of pre-content dead space. */
  padding: clamp(16px, 2vw, 28px) clamp(24px, 5vw, 80px) clamp(56px, 8vw, 96px);
  background: #fff;
}

.pdp__media {
  position: relative;
}

.pdp__stage {
  position: relative;
  /* Hard cap so the bottle render stays at a natural product-shot size
     no matter how wide the grid column becomes. */
  max-width: 480px;
  margin: 0 auto;
  aspect-ratio: 4 / 5;
  background: transparent;
  border: 0;
  overflow: visible;
  display: grid;
  place-items: center;
}

.pdp__stage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0;
}

.pdp__thumbs {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  /* Match the .pdp__stage centering + width cap so thumbs sit directly
     under the bottle render, not stretched across the whole column. */
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  justify-content: flex-start;
}

.pdp__thumb {
  width: 72px;
  height: 72px;
  padding: 0;
  border: 1px solid rgba(17, 17, 17, 0.1);
  border-radius: 4px;
  background: transparent;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.25s;
}

.pdp__thumb.is-on,
.pdp__thumb:hover {
  border-color: var(--ink);
}

.pdp__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 15%;
}

.pdp__info {
  position: sticky;
  top: 100px;
  /* Vertically center against the taller bottle image column so the two
     halves feel balanced. Sticky still engages when scrolling: initial
     anchor is the centered position, then pins at top:100px. Mobile
     (≤1100px) turns this into a single column via .pdp__hero override
     and forces .pdp__info back to position: static — so the centered
     alignment is desktop-only, which is the intended behavior. */
  align-self: center;
}

.pdp__idx {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-geist-sans);
  /* Reduced 0.7 → 0.64 rem — was reading heavier than every other
     eyebrow on the site. Now matches the sitewide eyebrow scale. */
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
  margin-bottom: 18px;
}

.pdp__idx i {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--ink);
  opacity: 0.55;
}

.pdp__name {
  font-family: var(--font-geist-sans);
  /* Reduced again for laptop-first (1366 px). vw stop lowered so
     laptop lands ~28 px (2.1vw × 1366 = 28.7 px) instead of hitting
     the max, and max cap dropped to 2 rem = 32 px so 1920+ desktop
     still reads as editorial not display. Benton Sans Wide runs
     ~15 % visually wider than a normal proportional sans, so 32 px
     BSW ≈ 36 px Inter — matches the reference scale exactly. */
  font-size: clamp(1.4rem, 2.1vw, 2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: #000;
  margin: 0 0 12px;
}

.pdp__concentration {
  font-family: var(--font-geist-sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
  margin: 0 0 24px;
}

.pdp__story {
  font-family: var(--font-geist-sans);
  /* Held at 0.88 rem (~14 px) — WCAG-acceptable body copy for
     editorial paragraphs and matches the reference density. Any
     smaller would compromise readability. */
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.7;
  color: rgba(17, 17, 17, 0.75);
  margin: 0 0 26px;
}

.pdp__specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 22px 0;
  border-top: 1px solid rgba(17, 17, 17, 0.08);
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
  margin: 0 0 32px;
}

.pdp__specs dt {
  font-family: var(--font-geist-sans);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.5);
  margin-bottom: 6px;
}

.pdp__specs dd {
  font-family: var(--font-geist-sans);
  /* Reduced 0.9 → 0.82 rem — was reading heavier than the story
     copy above (0.92 rem), inverting the intended hierarchy. */
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.pdp__buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.pdp__price {
  font-family: var(--font-geist-sans);
  /* Trimmed 1.15 → 1.05 rem to sit in proportion with the newly-
     reduced .pdp__name (2 rem = 32 px). At ~17 px the price now
     reads as a strong data point without competing with the h1. */
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.pdp__add {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-geist-sans);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: 0.3s var(--ease);
  cursor: pointer;
}

.pdp__add:hover {
  background: #000;
  transform: translateX(2px);
}

.pdp__add.is-added {
  background: #2f7a5c;
}

.pdp__promise {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-geist-sans);
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(17, 17, 17, 0.65);
}

.pdp__promise b {
  color: var(--ink);
  margin-right: 4px;
  font-weight: 700;
}

.pdp__missing {
  padding: clamp(80px, 12vw, 160px) clamp(24px, 5vw, 80px);
  text-align: center;
  background: #fff;
}

.pdp__missing h1 {
  font-family: var(--font-geist-sans);
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #000;
  margin-bottom: 14px;
}

/* -- Notes pyramid ------------------------------------------ */
.pyramid {
  padding: clamp(56px, 8vw, 100px) clamp(24px, 5vw, 80px);
  background: #fafaf7;
  border-top: 1px solid rgba(17, 17, 17, 0.06);
}

.pyramid__head {
  max-width: 640px;
  margin-bottom: clamp(32px, 5vw, 64px);
}

.pyramid__head h2 {
  font-family: var(--font-geist-sans);
  /* Trimmed again for laptop-first. vw stop 1.8 so 1366 px laptop
     renders ~24.6 px (was 32 px capped). Max 1.65 rem = 26.4 px so
     desktop stays a hair below the trimmed .pdp__name 2 rem (32 px).
     Ladder: pdp__name > pyramid > rail all preserved. */
  font-size: clamp(1.2rem, 1.8vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  line-height: 1.04;
  color: #000;
  margin: 10px 0 0;
}

.pyramid__head h2 em {
  font-style: normal;
  color: var(--accent);
  font-weight: 700;
}

.pyramid__lede {
  max-width: 46ch;
  margin: 14px 0 0;
  font-family: var(--font-geist-sans);
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.55;
  color: rgba(17, 17, 17, 0.62);
}

.pyramid__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(17, 17, 17, 0.1);
}

.pyramid__tier {
  position: relative;
  padding: 28px 32px 8px 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  border-right: 1px solid rgba(17, 17, 17, 0.1);
}

.pyramid__tier:last-child {
  padding-right: 0;
  padding-left: 32px;
  border-right: 0;
}

.pyramid__tier:nth-child(2) {
  padding-left: 32px;
}

.pyramid__idx {
  display: block;
  position: static;
  margin: 0 0 10px;
  font-family: var(--font-geist-sans);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.38);
}

.pyramid__phase {
  margin: 0 0 6px;
  font-family: var(--font-geist-sans);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.pyramid__tier h3 {
  font-family: var(--font-geist-sans);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 4px;
  color: var(--ink);
}

.pyramid__hint {
  margin: 0 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
  font-family: var(--font-geist-sans);
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(17, 17, 17, 0.48);
}

.pyramid__tier ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.pyramid__tier li {
  padding: 11px 0;
  border-bottom: 1px solid rgba(17, 17, 17, 0.07);
  font-family: var(--font-geist-sans);
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(17, 17, 17, 0.78);
}

.pyramid__tier li:last-child { border-bottom: 0; }

.pyramid__tier li::before { display: none; }

/* -- Rail (recently viewed / also-like) --------------------- */
.rail {
  padding: clamp(56px, 8vw, 100px) clamp(24px, 5vw, 80px);
  background: #fff;
  border-top: 1px solid rgba(17, 17, 17, 0.06);
}

.rail__head {
  margin-bottom: clamp(28px, 4vw, 48px);
}

.rail__head h2 {
  font-family: var(--font-geist-sans);
  /* Trimmed for laptop-first. vw stop 1.6 so 1366 laptop renders
     ~21.9 px. Max 1.5 rem = 24 px so desktop stays smallest of the
     three PDP h2 tiers. Final ladder at 1366 px laptop:
     pdp__name 28.7 > pyramid 24.6 > rail 21.9. */
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  line-height: 1.04;
  color: #000;
  margin: 10px 0 0;
}

.rail__head h2 em {
  font-style: normal;
  color: var(--accent);
  font-weight: 700;
}

.rail__track {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(20px, 2.5vw, 32px);
}

.rcard {
  display: flex;
  flex-direction: column;
  color: inherit;
  transition: transform 0.4s var(--ease);
}

.rcard:hover {
  transform: translateY(-3px);
}

.collection__grid.is-swapping .rcard {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.collection__grid .rcard.is-enter,
.rail .rcard.is-enter {
  animation: rcard-enter 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--rcard-delay, 0ms);
}

@keyframes rcard-enter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .collection__grid.is-swapping .rcard,
  .collection__grid .rcard.is-enter,
  .rail .rcard.is-enter,
}

.rcard__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: transparent;
  overflow: hidden;
  display: block;
  isolation: isolate;
  transition: border-color 0.35s var(--ease);
}

.rcard__media::before {
  content: "";
  position: absolute;
  top: -15%;
  bottom: -15%;
  left: -40%;
  width: 50%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.04) 30%,
    rgba(255, 240, 210, 0.45) 50%,
    rgba(255, 255, 255, 0.04) 70%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(0) skewX(-16deg);
  opacity: 0;
  filter: blur(2px);
  transition:
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .rcard:hover .rcard__media::before {
    transform: translateX(300%) skewX(-16deg);
    opacity: 1;
    transition:
      transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.05s,
      opacity 0.25s var(--ease) 0.08s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rcard__media::before {
    display: none;
  }
}

.rcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  padding: 0;
  display: block;
  transition: transform 0.6s var(--ease);
}

.rcard:hover .rcard__media img {
  transform: scale(1.04);
}

/* Homepage New Collection (#shop) only — bottle (no ingredients)
   crossfades + ken-burns to the ingredients shot, cloned from
   .hgallery__item--swap (.hgallery__shot--rest / --live). Other
   grids that reuse .rcard keep a single image.

   Sheen (::before glitter sweep) is independent of that swap.
   Image timings sit mid-range (rest 0.55s/0.7s, live 0.6s/0.75s);
   the sweep keeps the original 0.9s luxury duration shared with
   .card / .pcard / .rcard__media. z-index sits above both shots
   so a fade cannot clip it. */
#shop .rcard__media--swap,
.rail .rcard__media--swap,
.collection .rcard__media--swap {
  --hg-ease: cubic-bezier(0.76, 0, 0.24, 1);
}

/* Subscription picks use the same bottle-to-detail image choreography as
   the homepage rail, while keeping the selection grid's existing layout. */
.subpage .rcard__media--swap {
  --hg-ease: cubic-bezier(0.76, 0, 0.24, 1);
}

#shop .rcard__media--swap::before,
.rail .rcard__media--swap::before,
.collection .rcard__media--swap::before {
  z-index: 3;
  transition:
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s var(--ease);
}

.subpage .rcard__media--swap::before {
  z-index: 3;
  transition:
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  #shop .rcard:hover .rcard__media--swap::before,
  .rail .rcard:hover .rcard__media--swap::before,
  .collection .rcard:hover .rcard__media--swap::before {
    transform: translateX(300%) skewX(-16deg);
    opacity: 1;
    transition:
      transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.05s,
      opacity 0.25s var(--ease) 0.08s;
  }

  .subpage .rcard:hover .rcard__media--swap::before {
    transform: translateX(300%) skewX(-16deg);
    opacity: 1;
    transition:
      transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.05s,
      opacity 0.25s var(--ease) 0.08s;
  }
}

#shop .rcard__media--swap > img:not(.rcard__img--hover),
.rail .rcard__media--swap > img:not(.rcard__img--hover),
.collection .rcard__media--swap > img:not(.rcard__img--hover) {
  z-index: 1;
  transform: scale(1);
  opacity: 1;
  transition:
    transform 0.7s var(--hg-ease),
    opacity 0.55s var(--hg-ease);
}

.subpage .rcard__media--swap > img:not(.rcard__img--hover) {
  z-index: 1;
  transform: scale(1);
  opacity: 1;
  transition:
    transform 0.7s var(--hg-ease),
    opacity 0.55s var(--hg-ease);
}

#shop .rcard__media--swap .rcard__img--hover,
.rail .rcard__media--swap .rcard__img--hover,
.collection .rcard__media--swap .rcard__img--hover {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
  transition:
    opacity 0.6s var(--hg-ease),
    transform 0.75s var(--hg-ease);
}

.subpage .rcard__media--swap .rcard__img--hover {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
  transition:
    opacity 0.6s var(--hg-ease),
    transform 0.75s var(--hg-ease);
}

@media (hover: hover) and (pointer: fine) {
  #shop .rcard:hover .rcard__media--swap > img:not(.rcard__img--hover),
  .rail .rcard:hover .rcard__media--swap > img:not(.rcard__img--hover),
  .collection .rcard:hover .rcard__media--swap > img:not(.rcard__img--hover) {
    opacity: 0;
    transform: scale(1.06);
  }

  #shop .rcard:hover .rcard__media--swap .rcard__img--hover,
  .rail .rcard:hover .rcard__media--swap .rcard__img--hover,
  .collection .rcard:hover .rcard__media--swap .rcard__img--hover {
    opacity: 1;
    transform: scale(1);
  }

  .subpage .rcard:hover .rcard__media--swap > img:not(.rcard__img--hover) {
    opacity: 0;
    transform: scale(1.06);
  }

  .subpage .rcard:hover .rcard__media--swap .rcard__img--hover {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  #shop .rcard__media--swap > img:not(.rcard__img--hover),
  #shop .rcard__media--swap .rcard__img--hover,
  .rail .rcard__media--swap > img:not(.rcard__img--hover),
  .rail .rcard__media--swap .rcard__img--hover,
  .collection .rcard__media--swap > img:not(.rcard__img--hover),
  .collection .rcard__media--swap .rcard__img--hover {
    transition: none;
  }

  .subpage .rcard__media--swap > img:not(.rcard__img--hover),
  .subpage .rcard__media--swap .rcard__img--hover {
    transition: none;
  }
}

.rcard__meta {
  padding-top: 14px;
}

.rcard__meta h3 {
  font-family: var(--font-geist-sans);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 4px;
}

.rcard__meta h3,
.rcard__meta h3 a {
  /* Keep the inherited line-height (body 1.6 / RTL h3 1.15). 2lh
     reserves exactly two lines so one-line names do not collapse
     the card, and longer names clamp with an ellipsis. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: 3.2em; /* 2 × inherited body line-height 1.6 */
  min-height: calc(2lh);
}

.rcard__meta h3 a {
  color: inherit;
  text-decoration: none;
}

.rcard__meta p {
  font-family: var(--font-geist-sans);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.5);
  margin: 0 0 10px;
  /* One-line family/notes row so price/+ stay aligned across cards. */
  min-height: 1lh;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rcard__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rcard__price {
  font-family: var(--font-geist-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.rcard__add {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: 0;
  line-height: 0;
  text-decoration: none;
  cursor: pointer;
  transition: 0.25s var(--ease);
}

.rcard__add::before,
.rcard__add::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.rcard__add::before {
  width: 11px;
  height: 1.25px;
}

.rcard__add::after {
  width: 1.25px;
  height: 11px;
}

.rcard__add:hover {
  background: var(--ink);
  color: #fff;
}

.rcard__add.is-added {
  background: #2f7a5c;
  color: #fff;
  border-color: #2f7a5c;
}

/* ==========================================================
   CART PAGE
   ========================================================== */
.cart {
  padding: clamp(48px, 6vw, 96px) clamp(24px, 5vw, 80px) clamp(80px, 10vw, 140px);
}

.cart__head {
  max-width: 720px;
  margin-bottom: clamp(32px, 5vw, 64px);
}

.cart__head h1 {
  font-family: var(--font-geist-sans);
  font-size: clamp(2.4rem, 5.8vw, 4.8rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  line-height: 0.94;
  color: #000;
  margin: 12px 0 16px;
}

.cart__head h1 em {
  font-style: normal;
  color: var(--accent);
  font-weight: 700;
}

.cart__lede {
  font-family: var(--font-geist-sans);
  font-size: 1rem;
  font-weight: 500;
  color: rgba(17, 17, 17, 0.7);
  max-width: 52ch;
  line-height: 1.6;
}

.cart__body {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

.cart__items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cline {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}

.cline:first-child {
  border-top: 1px solid rgba(17, 17, 17, 0.08);
}

.cline__media {
  display: block;
  aspect-ratio: 1 / 1;
  background: transparent;
  overflow: hidden;
}

.cline__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  padding: 0;
  display: block;
}

.cline__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 0;
}

.cline__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.cline__row h3 {
  font-family: var(--font-geist-sans);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}

.cline__row h3 a {
  color: inherit;
  transition: color 0.25s;
}

.cline__row h3 a:hover {
  color: #000;
}

.cline__price {
  font-family: var(--font-geist-sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.cline__meta {
  font-family: var(--font-geist-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.5);
  margin: 6px 0 14px;
}

.cline__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cline__qty {
  font-family: var(--font-geist-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
  padding: 6px 14px;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 999px;
}

.cline__remove {
  font-family: var(--font-geist-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
  padding: 6px 0;
  border-bottom: 1px solid rgba(17, 17, 17, 0.2);
  transition: color 0.25s, border-color 0.25s;
  cursor: pointer;
  background: transparent;
}

.cline__remove:hover {
  color: var(--ink);
  border-color: var(--ink);
}

/* Cart summary sidebar */
.cart__summary {
  position: sticky;
  top: 100px;
  padding: 32px;
  background: #fafaf7;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 6px;
}

.cart__summary h2 {
  font-family: var(--font-geist-sans);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.12);
}

.cart__totals {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.12);
  margin: 0 0 20px;
}

.cart__totals > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-geist-sans);
  font-size: 0.92rem;
}

.cart__totals dt {
  color: rgba(17, 17, 17, 0.65);
  font-weight: 500;
}

.cart__totals dd {
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.cart__totals-line {
  padding-top: 14px;
  border-top: 1px solid rgba(17, 17, 17, 0.12);
  font-size: 1.05rem !important;
}

.cart__totals-line dt {
  font-family: var(--font-geist-sans);
  font-weight: 700;
  color: var(--ink) !important;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.72rem;
}

.cart__totals-line dd {
  font-family: var(--font-geist-sans);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.cart__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-geist-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background 0.3s var(--ease);
  margin-bottom: 16px;
}

.cart__cta:hover {
  background: #000;
}

.cart__hint {
  font-family: var(--font-geist-sans);
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(17, 17, 17, 0.6);
  margin: 6px 0;
}

.cart__hint b {
  color: var(--ink);
  font-weight: 700;
}

.cart__badges {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(17, 17, 17, 0.12);
  font-family: var(--font-geist-sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.5);
}

.cart__empty {
  padding: clamp(80px, 12vw, 160px) 20px;
  text-align: center;
}

.cart__empty h2 {
  font-family: var(--font-geist-sans);
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: #000;
  margin: 12px 0 12px;
}

.cart__empty h2 em {
  font-style: normal;
  color: var(--accent);
  font-weight: 700;
}

.cart__empty p {
  font-family: var(--font-geist-sans);
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 24px;
}

/* ==========================================================
   CHECKOUT PAGE
   ========================================================== */
.nav--checkout {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 18px clamp(20px, 4vw, 48px);
  background: #fff;
  border-bottom: 1px solid rgba(17, 17, 17, 0.06);
}

.nav--checkout .brand img {
  height: 44px;
  filter: none;
}

.nav__checkout-title {
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
  text-align: center;
}

.nav__checkout-back {
  justify-self: end;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.7);
  transition: color 0.25s;
}

.nav__checkout-back:hover {
  color: var(--accent);
}

.checkout {
  /* Top padding is intentionally larger than the horizontal / bottom values
     so the first cbox ("Contact") clears the fixed nav at any viewport size.
     Nav footprint = top offset (12–18 px) + nav height (~44–56 px) ≈ 60–74 px.
     Matching the .hero / .shop / product-page convention of 90–140 px keeps
     the vertical rhythm consistent across the site. */
  padding: clamp(96px, 11vw, 140px) clamp(24px, 5vw, 80px) clamp(80px, 10vw, 140px);
}

.checkout__layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}

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

.cbox {
  padding: 32px;
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 4px;
}

.cbox__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}

.cbox__num {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-geist-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
}

.cbox__head h2 {
  font-family: var(--font-geist-sans);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}

.cbox__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cbox__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.cbox__ship {
  gap: 8px;
}

.fld {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fld--full {
  grid-column: 1 / -1;
}

.fld > span {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.fld input[type="text"],
.fld input[type="email"],
.fld input[type="tel"] {
  height: 48px;
  padding: 0 16px;
  border: 1px solid rgba(17, 17, 17, 0.16);
  border-radius: 4px;
  background: #fff;
  font-family: inherit;
  font-size: 0.94rem;
  color: var(--ink);
  transition: border-color 0.25s;
}

.fld input:focus {
  outline: none;
  border-color: var(--accent);
}

.fld input.is-err {
  border-color: #b34c3a;
}

.fld--check {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.fld--check input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.fld--check span {
  font-size: 0.86rem;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(17, 17, 17, 0.72);
}

.fld__select {
  position: relative;
  display: block;
}

.fld__select select {
  appearance: none;
  width: 100%;
  height: 48px;
  padding: 0 40px 0 16px;
  border: 1px solid rgba(17, 17, 17, 0.16);
  border-radius: 4px;
  background: #fff;
  font-family: inherit;
  font-size: 0.94rem;
  color: var(--ink);
  cursor: pointer;
}

.fld__select b {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  color: rgba(17, 17, 17, 0.5);
  pointer-events: none;
}

.ship {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s;
}

.ship:hover {
  border-color: rgba(17, 17, 17, 0.28);
}

.ship input {
  accent-color: var(--accent);
}

.ship input:checked ~ .ship__title {
  color: var(--ink);
}

.ship:has(input:checked) {
  border-color: var(--ink);
  background: rgba(17, 17, 17, 0.02);
}

.ship__title {
  font-size: 0.9rem;
  color: rgba(17, 17, 17, 0.7);
}

.ship__price {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--ink);
}

.checkout__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 60px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background 0.3s var(--ease);
  cursor: pointer;
}

.checkout__cta:hover {
  background: var(--accent);
}

.checkout__legal {
  text-align: center;
  font-size: 0.78rem;
  color: rgba(17, 17, 17, 0.5);
  line-height: 1.6;
}

.checkout__legal a {
  color: var(--ink);
  border-bottom: 1px solid rgba(17, 17, 17, 0.2);
}

/* Order summary sidebar */
.checkout__summary {
  position: sticky;
  top: 100px;
  padding: 32px;
  background: #fafaf7;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 6px;
}

.checkout__summary h2 {
  font-family: var(--font-geist-sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.12);
}

.checkout__lines {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.14);
}

.coline {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: center;
}

.coline__media {
  position: relative;
  width: 56px;
  height: 56px;
  background: transparent;
  border-radius: 4px;
  overflow: hidden;
}

.coline__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  padding: 0;
  display: block;
}

.coline__media b {
  position: absolute;
  top: -8px;
  right: -8px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 600;
}

.coline__body h3 {
  font-family: var(--font-geist-sans);
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}

.coline__body p {
  font-family: var(--font-geist-sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.5);
  margin: 2px 0 0;
}

.coline__price {
  font-family: var(--font-geist-sans);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.checkout__totals {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.14);
  margin: 0 0 16px;
}

.checkout__totals > div {
  display: flex;
  justify-content: space-between;
  font-size: 0.92rem;
}

.checkout__totals dt {
  color: rgba(17, 17, 17, 0.7);
}

.checkout__totals dd {
  font-weight: 500;
}

.checkout__totals-line {
  padding-top: 8px;
  border-top: 1px solid rgba(17, 17, 17, 0.14);
}

.checkout__totals-line dt {
  font-family: var(--font-geist-sans);
  font-weight: 700;
  color: var(--ink) !important;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.7rem;
}

.checkout__totals-line dd {
  font-family: var(--font-geist-sans);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.checkout__badges {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.5);
}

.checkout__badges i {
  color: rgba(17, 17, 17, 0.3);
}

.checkout__done {
  max-width: 640px;
  margin: 80px auto;
  text-align: center;
  padding: 20px;
}

.checkout__done h1 {
  font-family: var(--font-geist-sans);
  font-size: clamp(2.4rem, 5.2vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: #000;
  line-height: 0.96;
  margin: 20px 0 16px;
}

.checkout__done h1 em {
  font-style: normal;
  color: var(--accent);
  font-weight: 700;
}

.checkout__done p {
  font-family: var(--font-geist-sans);
  color: rgba(17, 17, 17, 0.7);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  margin-bottom: 32px;
}

.checkout__done b {
  color: var(--ink);
  font-weight: 700;
}

.checkout__empty {
  max-width: 560px;
  margin: 80px auto;
  text-align: center;
  padding: 20px;
}

.checkout__empty h2 {
  font-family: var(--font-geist-sans);
  font-size: clamp(1.8rem, 4.4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: #000;
  margin: 12px 0 24px;
}

/* Slim footer for checkout */
.foot--slim {
  padding: 32px clamp(20px, 4vw, 48px);
  background: #fff;
  border-top: 1px solid rgba(17, 17, 17, 0.06);
}

.foot--slim .foot__bot {
  padding: 0;
  border: 0;
  justify-content: center;
  gap: 12px;
  font-size: 0.72rem;
  color: rgba(17, 17, 17, 0.5);
}

.foot--slim .foot__bot a {
  color: rgba(17, 17, 17, 0.7);
}

.foot--slim .foot__bot a:hover {
  color: var(--accent);
}

/* Locale switcher chip in the slim (checkout) footer. Inline <select>
   styled to match the legal-row typography — no extra chrome, but a
   discreet arrow-caret pseudo-element so users know it's interactive. */
.foot__slim-region {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-inline-start: auto;
}
.foot__slim-region select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  color: rgba(17, 17, 17, 0.7);
  font: inherit;
  font-family: var(--font-geist-sans);
  padding: 2px 18px 2px 4px;
  cursor: pointer;
  outline-offset: 4px;
}
.foot__slim-region::after {
  content: "▾";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-52%);
  pointer-events: none;
  font-size: 0.7rem;
  color: rgba(17, 17, 17, 0.5);
}
[dir="rtl"] .foot__slim-region::after {
  right: auto;
  left: 4px;
}
[dir="rtl"] .foot__slim-region select {
  padding: 2px 4px 2px 18px;
}
.foot__sep--push { display: none; }
@media (min-width: 720px) {
  .foot__sep--push { display: inline; }
}

/* ==========================================================
   Responsive — shop pages
   ========================================================== */
@media (max-width: 1100px) {
  .pdp__hero {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .pdp__info {
    position: static;
  }
  .cart__body,
  .checkout__layout {
    grid-template-columns: 1fr;
  }
  .cart__summary,
  .checkout__summary {
    position: static;
  }
  .pbanner__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .pbanner__right {
    order: -1;
  }
  .pbanner__stage {
    max-width: 340px;
  }
  .pbanner__meta {
    grid-template-columns: repeat(2, auto);
    gap: 20px 32px;
  }
}

@media (max-width: 900px) {
  .nav__inner-links {
    display: none;
  }
  .pbanner {
    min-height: auto;
    padding: 96px 24px 40px;
  }
  .pbanner__title {
    /* Aligned with the trimmed desktop clamp (1.9–3.4rem). Was
       clamp(1.9–2.8rem) which now would render LARGER than
       desktop at the 900 px boundary. Tightened to keep the
       type ladder monotonically decreasing as viewport shrinks. */
    font-size: clamp(1.5rem, 5.5vw, 2.1rem);
  }
  .pbanner__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .shop-toolbar {
    padding-top: 40px;
    padding-bottom: 28px;
  }
  .pyramid__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .pyramid__tier,
  .pyramid__tier:nth-child(2),
  .pyramid__tier:last-child {
    padding: 22px 0;
    border-right: 0;
    border-left: 0;
    border-bottom: 1px solid rgba(17, 17, 17, 0.1);
  }
  .pyramid__tier:last-child { border-bottom: 0; padding-bottom: 0; }
  [dir="rtl"] .pyramid__tier,
  [dir="rtl"] .pyramid__tier:nth-child(2),
  [dir="rtl"] .pyramid__tier:last-child {
    padding: 22px 0;
    border-left: 0;
    border-right: 0;
  }
  .cline {
    grid-template-columns: 96px 1fr;
  }
  .nav--checkout {
    grid-template-columns: 1fr auto;
  }
  .nav__checkout-title {
    display: none;
  }

  /* Prevent iOS Safari's autozoom on input focus. Any <input> with a
     computed font-size < 16px triggers a viewport zoom-in on tap, which
     is jarring in a multi-step checkout. Bumping the checkout form's
     text inputs to 16px on mobile is the standard enterprise fix and
     costs us one pixel of visual density we don't need on a phone. */
  .checkout .fld input[type="text"],
  .checkout .fld input[type="email"],
  .checkout .fld input[type="tel"],
  .checkout .fld__select select {
    font-size: 16px;
  }
}

/* ==============================================================
   PDP mid-tier tuning — small tablet / large phone (≤ 720 px)
   --------------------------------------------------------------
   Bridges the gap between the ≤ 1100 px column-stack and the
   ≤ 480 px full mobile refinement so PDP typography scales
   smoothly across 480–720 px instead of jumping in one step.
   Everything here is PDP-scoped (.crumbs, .pdp__*, .pyramid*,
   .rail*, .rcard*) — no effect on products.html or cart flows.
   ============================================================== */
@media (max-width: 720px) {
  /* Breadcrumbs — small and comfortably clear of the shrunken nav
     footprint. Auto-scroll on land removes the dead-space concern. */
  .crumbs {
    padding-top: clamp(88px, 9vw, 104px);
    font-size: 0.5rem;
    letter-spacing: 0.16em;
    gap: 6px;
    flex-wrap: wrap;
    line-height: 1.4;
  }
  .crumbs i { font-size: 0.68rem; }

  /* Hero — small top gap (crumbs above already carry the nav
     clearance); bottom stays comfortable to space the pyramid below. */
  .pdp__hero {
    padding: clamp(20px, 3vw, 36px) clamp(20px, 4vw, 40px)
             clamp(56px, 7vw, 80px);
    gap: 28px;
  }
  .pdp__stage { max-width: 420px; }

  /* Aligned with trimmed desktop max (2 rem = 32 px). ≤ 720 tier
     must land BELOW desktop max to keep the ladder monotonic across
     the breakpoint. */
  .pdp__name { font-size: clamp(1.35rem, 3.6vw, 1.75rem); }
  .pdp__concentration { margin-bottom: 20px; }
  .pdp__story { font-size: 0.88rem; }

  /* Notes pyramid — 1-col stack already inherited from ≤ 900. Just
     ease the surrounding padding + heading so the section doesn't
     dwarf the story block above it. */
  .pyramid {
    padding: clamp(48px, 7vw, 72px) clamp(20px, 4vw, 40px);
  }
  .pyramid__head { margin-bottom: clamp(24px, 4vw, 40px); }
  /* Aligned with trimmed desktop max (1.65 rem = 26.4 px). */
  .pyramid__head h2 { font-size: clamp(1.15rem, 3.2vw, 1.5rem); }

  /* Aligned with trimmed desktop max (1.5 rem = 24 px). */
  .rail__head h2 { font-size: clamp(1.05rem, 2.8vw, 1.35rem); }
  .rail__track {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: clamp(16px, 2.4vw, 24px);
  }

  /* Not-found state — desktop clamp gave it 12 vw padding which
     eats a phone screen. Bring it into the mobile rhythm. */
  .pdp__missing {
    padding: clamp(56px, 10vw, 96px) clamp(20px, 4vw, 40px);
  }
  .pdp__missing h1 { font-size: clamp(1.9rem, 6vw, 2.6rem); }

  /* ------------------------------------------------------------
     Cart page — mid-tier (≤ 720 px). Two goals: (1) push the head
     below the fixed nav which the desktop clamp fails to clear,
     (2) tune line-item + summary typography for portrait tablet /
     large phone landscape before the ≤ 480 refinement kicks in.
     ------------------------------------------------------------ */
  .cart {
    padding: clamp(96px, 14vw, 120px) clamp(20px, 4vw, 40px)
             clamp(64px, 9vw, 96px);
  }
  .cart__head { margin-bottom: clamp(28px, 4vw, 44px); }
  .cart__head h1 { font-size: clamp(2rem, 6vw, 3.2rem); }
  .cart__lede { font-size: 0.94rem; }
  .cart__body { gap: 28px; }

  .cline { grid-template-columns: 110px 1fr; gap: 20px; padding: 20px 0; }
  .cline__row h3 { font-size: 1.1rem; }
  .cline__actions { flex-wrap: wrap; gap: 12px; }

  .cart__summary { padding: 26px; }
  .cart__summary h2 { font-size: 0.98rem; margin-bottom: 16px; padding-bottom: 14px; }

  .cart__empty { padding: clamp(64px, 10vw, 96px) 20px; }
  .cart__empty h2 { font-size: clamp(1.9rem, 5.5vw, 2.8rem); }
}

/* Tighten pvideo + collection grid at mid-to-wide viewports.
   Range covers 1200–1720px so both the 4-col tier (1200–1599px, laptop
   range including 1280px) and the lower half of the 5-col tier
   (1600–1720px) get consistent card typography and vertical rhythm. */
@media (min-width: 1200px) and (max-width: 1720px) {
  .pvideo {
    /* Laptop — previous 120–140 px gap left a dead band above the
       video and again between video and title. Tightened so the
       hero sits closer to the nav and the copy sits closer to the
       frame. Same token still drives padding-top + inner margin-top. */
    --pvideo-gap: clamp(72px, 6vw, 88px);
    padding-bottom: 32px;
  }
  .pvideo__title {
    font-size: clamp(1.45rem, 2vw, 2rem);
    margin-bottom: 14px;
  }
  .pvideo__eyebrow {
    font-size: 0.56rem;
    letter-spacing: 0.2em;
    margin-bottom: 16px;
  }
  .pvideo__lede {
    font-size: clamp(0.8rem, 0.88vw, 0.9rem);
    margin-bottom: 24px;
  }
  .pvideo__meta { gap: 18px 36px; }
  .pvideo__meta dt { font-size: 0.56rem; letter-spacing: 0.22em; }
  .pvideo__meta dd { font-size: 0.88rem; }
  .pvideo__feat { padding: 10px 10px 10px 18px; gap: 12px; }
  .pvideo__feat-lbl { font-size: 0.58rem; letter-spacing: 0.22em; }
  .pvideo__feat-name { font-size: 0.86rem; }
  .pvideo__feat-arrow { width: 30px; height: 30px; font-size: 0.82rem; }
  .shop-toolbar {
    padding-top: 48px;
    padding-bottom: 32px;
  }
  .collection {
    padding-bottom: clamp(96px, 10vw, 128px);
  }
  .collection__grid {
    gap: clamp(14px, 1.3vw, 20px);
  }
  /* Collection cards stay at the homepage shop-card scale — do not
     re-inflate titles here. The previous 1.15 rem override undid the
     catalog density and made laptop tiles larger than the home rail. */
  .pcard__row h3 { font-size: 0.9rem; }
  .pcard__price { font-size: 0.84rem; }
  .pcard__notes { font-size: 0.62rem; }
  .pcard__add {
    padding: 8px 12px;
    font-size: 0.56rem;
    letter-spacing: 0.2em;
  }
  .pcard__more { font-size: 0.58rem; }
}

/* ==============================================================
   CART PAGE — laptop / mid-desktop typography tier (1200–1720 px)
   --------------------------------------------------------------
   The base .cart__head h1 clamp (2.4–4.8 rem) rendered the page
   title at ~74–77 px on typical MacBook / 1080p laptop screens,
   which read as billboard-scale ad copy for a utilitarian bag
   view. Trimmed ~35% to clamp(2rem, 3.4vw, 3rem) so "The bag."
   still carries editorial weight without dominating the fold.
   Supporting elements (lede, line-item names/prices, summary
   rows, totals, hints, empty-state) all step down proportionally
   so the informational hierarchy stays intact — shrinking only
   the title would leave the "$0" total visually heavier than
   the heading.
   Selectors here are all .cart / .cline scoped — no effect on
   .bag drawer (different namespace), pvideo hero, or product
   grid. Mobile tiers (≤ 720 / ≤ 560 / ≤ 480 / ≤ 400) remain
   authoritative below 900 px; this block only fills the
   untuned 1200–1720 px gap.
   ============================================================== */
@media (min-width: 1200px) and (max-width: 1720px) {
  .cart { padding: clamp(88px, 8vw, 112px) clamp(24px, 4vw, 64px) clamp(64px, 8vw, 104px); }
  .cart__head { margin-bottom: 28px; }
  .cart__head h1 { font-size: clamp(1.65rem, 2.6vw, 2.15rem); margin: 8px 0 12px; }
  .cart__lede { font-size: 0.86rem; }

  .cline { grid-template-columns: 96px 1fr; gap: 18px; padding: 18px 0; }
  .cline__row h3 { font-size: 0.9rem; }
  .cline__price { font-size: 0.84rem; }
  .cline__meta   { font-size: 0.58rem; }
  .cline__qty    { font-size: 0.58rem; }
  .cline__remove { font-size: 0.58rem; }

  .cart__summary { padding: 24px; }
  .cart__summary h2 { font-size: 0.88rem; }
  .cart__totals > div { font-size: 0.82rem; }
  .cart__totals-line dt { font-size: 0.6rem; }
  .cart__totals-line dd { font-size: 1rem; }
  .cart__hint { font-size: 0.74rem; }
  .cart__cta { height: 50px; font-size: 0.66rem; }

  .cart__empty h2 { font-size: clamp(1.65rem, 2.6vw, 2.15rem); }
  .cart__empty p  { font-size: 0.86rem; }

  .checkout__done h1 { font-size: clamp(1.65rem, 2.6vw, 2.15rem); }
  .checkout__done p { font-size: 0.86rem; }
  .checkout__empty h2 { font-size: clamp(1.65rem, 2.6vw, 2.15rem); }
}

/* ==============================================================
   SHOP APP — laptop commerce density (981–1440 px)
   --------------------------------------------------------------
   Mirrors the homepage laptop typography pass across products,
   PDP, and checkout so the storefront reads as one catalog, not
   a magazine on home and a billboard everywhere else.
   Cards, section titles, and form chrome step down 12–20%.
   Colour, typeface, pills, and motion stay identical.
   ============================================================== */
@media (min-width: 981px) and (max-width: 1440px) {
  .pvideo {
    --pvideo-gap: clamp(72px, 6vw, 88px);
    padding-bottom: 32px;
  }
  .pvideo__title {
    font-size: clamp(1.45rem, 2vw, 2rem);
    margin-bottom: 14px;
  }
  .pvideo__eyebrow { font-size: 0.56rem; letter-spacing: 0.2em; margin-bottom: 16px; }
  .pvideo__lede { font-size: clamp(0.8rem, 0.88vw, 0.9rem); margin-bottom: 24px; }

  .pcard__body { padding: 12px 2px 2px; }
  .pcard__media {
    aspect-ratio: 4 / 5;
    max-height: 260px;
  }

  .pdp__name { font-size: clamp(1.25rem, 1.8vw, 1.7rem); }
  .pdp__story { font-size: 0.84rem; margin-bottom: 22px; }
  .pdp__specs { gap: 16px; padding: 18px 0; margin-bottom: 24px; }
  .pdp__price { font-size: 0.98rem; }
  .pdp__add { height: 46px; padding: 0 22px; font-size: 0.6rem; }
  .pdp__stage { max-width: 400px; }
  .pdp__thumbs { max-width: 400px; margin-top: 18px; }
  .pdp__thumb { width: 60px; height: 60px; }

  .pyramid { padding: clamp(48px, 6vw, 80px) clamp(24px, 4vw, 64px); }
  .pyramid__head { margin-bottom: clamp(24px, 4vw, 44px); }
  .pyramid__head h2 { font-size: clamp(1.1rem, 1.6vw, 1.45rem); }
  .pyramid__tier h3 { font-size: 0.88rem; }

  .rail { padding: clamp(48px, 6vw, 80px) clamp(24px, 4vw, 64px); }
  .rail__head { margin-bottom: clamp(22px, 3vw, 36px); }
  .rail__head h2 { font-size: clamp(1rem, 1.4vw, 1.3rem); }
  .rail__track {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: clamp(14px, 1.8vw, 22px);
  }
  .rcard__meta { padding-top: 10px; }
  .rcard__meta h3 { font-size: 0.78rem; }
  .rcard__price { font-size: 0.72rem; }
  .rcard__add { width: 28px; height: 28px; }
  .rcard__add::before { width: 10px; }
  .rcard__add::after { height: 10px; }

  .cart { padding: clamp(88px, 8vw, 112px) clamp(24px, 4vw, 64px) clamp(64px, 8vw, 104px); }
  .cart__head { margin-bottom: 28px; }
  .cart__head h1 { font-size: clamp(1.65rem, 2.6vw, 2.15rem); margin: 8px 0 12px; }
  .cart__lede { font-size: 0.86rem; }
  .cline { grid-template-columns: 96px 1fr; gap: 18px; padding: 18px 0; }
  .cline__row h3 { font-size: 0.9rem; }
  .cline__price { font-size: 0.84rem; }
  .cline__meta,
  .cline__qty,
  .cline__remove { font-size: 0.58rem; }
  .cart__summary { padding: 24px; }
  .cart__summary h2 { font-size: 0.88rem; }
  .cart__totals > div { font-size: 0.82rem; }
  .cart__totals-line dt { font-size: 0.6rem; }
  .cart__totals-line dd { font-size: 1rem; }
  .cart__empty h2 { font-size: clamp(1.65rem, 2.6vw, 2.15rem); }

  .checkout {
    padding: clamp(88px, 9vw, 112px) clamp(24px, 4vw, 64px) clamp(64px, 8vw, 104px);
  }
  .checkout__layout { gap: clamp(28px, 3.5vw, 48px); }
  .cbox { padding: 24px; }
  .cbox__head { gap: 12px; margin-bottom: 16px; padding-bottom: 12px; }
  .cbox__num { width: 28px; height: 28px; font-size: 0.7rem; }
  .cbox__head h2 { font-size: 0.88rem; }
  .fld > span { font-size: 0.62rem; }
  .fld input[type="text"],
  .fld input[type="email"],
  .fld input[type="tel"],
  .fld__select select { height: 44px; font-size: 0.88rem; }
  .ship__title { font-size: 0.82rem; }
  .ship__price { font-size: 0.78rem; }
  .checkout__cta { height: 50px; font-size: 0.66rem; }
  .checkout__summary { padding: 24px; }
  .checkout__summary h2 { font-size: 0.88rem; }
  .checkout__totals > div { font-size: 0.82rem; }
  .checkout__totals-line dd { font-size: 1rem; }
  .coline { grid-template-columns: 48px 1fr auto; gap: 12px; }
  .coline__media { width: 48px; height: 48px; }
  .coline__body h3 { font-size: 0.84rem; }
  .checkout__done h1,
  .checkout__empty h2 { font-size: clamp(1.65rem, 2.6vw, 2.15rem); }
  .checkout__done p { font-size: 0.86rem; }
}

@media (max-width: 560px) {
  .cbox {
    padding: 20px;
  }
  .cart__summary,
  .checkout__summary {
    padding: 24px;
  }
  .cline {
    grid-template-columns: 80px 1fr;
    gap: 16px;
  }
  .cline__row h3 {
    font-size: 1.2rem;
  }

  /* ==========================================================
     Checkout — small-phone refinements (≤ 560 px)
     ----------------------------------------------------------
     Trims the horizontal cushion so the checkout column doesn't
     eat 15%+ of a 360 px viewport, and rebalances typography +
     hit-targets for one-handed use. Every selector below is
     .checkout-scoped so home / catalog / product / cart pages
     are guaranteed unaffected.
     ========================================================== */
  .checkout {
    /* Keep enough top padding to clear the fixed mobile nav (top: 12–18 px
       + hamburger button height ≈ 56–64 px total). 92 px gives 20–30 px of
       breathing room above the first cbox on 360–430 px viewports. */
    padding: 92px 16px clamp(56px, 8vw, 80px);
  }

  /* Section header — smaller num pill + tighter head strip so the form
     fields (which are the actual work) get more room. */
  .cbox__head {
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
  }
  .cbox__num {
    width: 28px;
    height: 28px;
    font-size: 0.72rem;
  }
  .cbox__head h2 {
    font-size: 0.95rem;
    letter-spacing: -0.005em;
  }

  /* Delivery method — on ≤ 560 px the 3-column grid (radio · title ·
     price) can't fit "Standard · 3–5 business days" + "Free over $150"
     on one row without breaking. Reflow into a 2-column grid:
       row 1: [radio] [title]
       row 2: [   ]   [price]
     The radio spans both rows and stays vertically centered. */
  .ship {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    row-gap: 4px;
    padding: 14px;
  }
  .ship input {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
  }
  .ship__title {
    grid-column: 2;
    grid-row: 1;
    font-size: 0.88rem;
    line-height: 1.3;
  }
  .ship__price {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    font-size: 0.8rem;
    color: rgba(17, 17, 17, 0.6);
  }

  /* Order summary — tighter surface + smaller media so the price stays
     comfortably clear of the right edge on 360–390 px viewports. */
  .checkout__summary {
    padding: 22px 18px;
  }
  .checkout__summary h2 {
    font-size: 0.9rem;
    margin-bottom: 16px;
    padding-bottom: 12px;
  }
  .coline {
    grid-template-columns: 48px 1fr auto;
    gap: 12px;
  }
  .coline__media {
    width: 48px;
    height: 48px;
  }
  .coline__body h3 { font-size: 0.88rem; }
  .coline__body p { font-size: 0.6rem; letter-spacing: 0.18em; }
  .coline__price { font-size: 0.86rem; }

  .checkout__totals > div { font-size: 0.88rem; }
  .checkout__totals-line dd { font-size: 1.05rem; }
  .checkout__badges {
    flex-wrap: wrap;
    row-gap: 4px;
    font-size: 0.62rem;
  }

  /* Place-order CTA — same 60 px tap target, but lighter tracking so
     the label doesn't hit the pill edges on the narrowest phones. */
  .checkout__cta {
    height: 56px;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
  }

  /* Confirmation + empty states — cap the display heading so it stops
     towering over the ~360 px viewport. Original clamp() min was
     2.4rem / 1.8rem which reads too heavy on a phone. */
  .checkout__done { margin: 48px auto; }
  .checkout__done h1 {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
    line-height: 1;
    margin: 16px 0 12px;
  }
  .checkout__done p { font-size: 0.94rem; }
  .checkout__empty { margin: 48px auto; }
  .checkout__empty h2 {
    font-size: clamp(1.5rem, 7vw, 2rem);
    margin: 10px 0 20px;
  }
}

/* ==============================================================
   Toast — global bottom-center chip
   --------------------------------------------------------------
   Rendered on demand by shop-shell.js as a single-instance <div>
   appended to <body>. Structure:
     <div class="toast" role="status" aria-live="polite">
       <span class="toast__ic">😊</span>
       <span class="toast__msg">…</span>
     </div>
   Idle: hidden, translated down, opacity 0. Active (.is-show):
   visible, slides up, opacity 1. z-index 200 sits above nav (40)
   and page content, below the loader (300). Position uses
   translate3d for GPU compositing; --toast-lift keeps hover from
   causing layout thrash.
   ============================================================== */
.toast {
  position: fixed;
  left: 50%;
  bottom: clamp(24px, 4vw, 44px);
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px 12px 14px;
  border-radius: 999px;
  background: #0b0b0b;
  color: #fff;
  font-family: var(--font-geist-sans);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1;
  white-space: nowrap;
  max-width: min(92vw, 520px);
  box-shadow:
    0 12px 40px -14px rgba(0, 0, 0, 0.55),
    0 2px 6px -2px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 24px);
  transition:
    transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 260ms ease,
    visibility 0s linear 260ms;
  pointer-events: none;
  will-change: transform, opacity;
}

.toast.is-show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  pointer-events: auto;
  transition:
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 220ms ease,
    visibility 0s linear 0s;
}

/* Mid-viewport confirmation — used by the home rail plus-icon add
   so the user sees the result without the cart drawer stealing
   focus. Same pill chrome as the bottom toast; only the anchor
   changes. */
.toast.toast--mid {
  top: 50%;
  bottom: auto;
  transform: translate(-50%, calc(-50% + 18px));
}
.toast.toast--mid.is-show {
  transform: translate(-50%, -50%);
}

.toast__ic {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  font-size: 1.05rem;
  line-height: 1;
  /* Keep emoji glyphs consistent across platforms. */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", var(--font-geist-sans);
  /* Nudge glyph baseline so 😊 sits centered in the pill. */
  transform: translateY(0.5px);
}

.toast__msg {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(80vw, 440px);
}

.toast[data-tone="soft"] {
  background: #1a1a1a;
  color: rgba(255, 255, 255, 0.92);
}

/* Reduced-motion: instant appear/disappear (still fades a touch for legibility). */
@media (prefers-reduced-motion: reduce) {
  .toast,
  .toast.is-show {
    transition: opacity 120ms ease, visibility 0s;
    transform: translate(-50%, 0);
  }
}

/* Tiny screens: tighten paddings + reduce max-width. */
@media (max-width: 440px) {
  .toast {
    padding: 10px 18px 10px 12px;
    font-size: 0.82rem;
    gap: 10px;
  }
  .toast__ic {
    width: 24px;
    height: 24px;
    font-size: 0.95rem;
  }
}

/* ==============================================================
   MOBILE FINE-TUNE — small phones (≤ 480 px)
   --------------------------------------------------------------
   Layered on top of the existing responsive cascade (1180 → 900
   → 640 → 560 → 520 → 480). Nothing above 480 px is affected.
   Consolidates every home-page section so tiny phones (down to
   the 400 px target requested for enterprise QA) get:
     • rail-tight paddings via --pad / --section-pad tokens
     • tap targets ≥ 40 px preserved on every action
     • no horizontal overflow on nav, wordmark, or legal row
     • fluid typography that never truncates or clips
   ============================================================== */
@media (max-width: 480px) {
  /* Tighten global rails so every section that consumes these
     tokens (nav, hero, shop, families, foot, product pages) breathes
     properly on 375–480 px phones without hard-coding each. */
  :root {
    --pad: 18px;
    --section-pad: 16px;
  }

  body { font-size: 15px; }

  /* -- Nav bar ------------------------------------------------ */
  .nav { top: 12px; gap: 10px; }
  .brand img { height: 42px; }
  .nav__right { gap: 8px; }
  .nav__actions { padding: 4px; gap: 2px; }
  .nav__ic { width: 36px; height: 36px; }
  .nav__ic svg { width: 16px; height: 16px; }
  .nav__sep { height: 18px; }
  .nav__bag { width: 36px; height: 36px; }
  .nav__bag svg { width: 16px; height: 16px; }
  .nav__bag b {
    min-width: 14px;
    height: 14px;
    font-size: 0.52rem;
  }
  .icon-circle { width: 40px; height: 40px; }
  .icon-circle svg { width: 16px; height: 16px; }
  .nav__burger i { left: 12px; width: 14px; }
  .nav__burger i:first-child { top: 15px; }
  .nav__burger i:last-child { top: 22px; width: 10px; }
  .nav__burger.is-open i:first-child,
  .nav__burger.is-open i:last-child { top: 18px; }
  .nav__burger.is-open i:last-child { width: 14px; }

  /* Mobile menu — nudge above the shorter nav & tighten typography. */
  .menu {
    top: 78px;
    right: 12px;
    left: 12px;
    padding: 18px 20px;
    gap: 12px;
  }
  .menu a,
  .menu button { font-size: 1rem; }

  /* -- Hero --------------------------------------------------- */
  .hero {
    padding: 96px var(--pad) 84px;
    gap: 32px;
  }
  .hero h1 {
    font-size: clamp(1.85rem, 9vw, 2.35rem);
    margin-bottom: 12px;
  }
  .hero__lede { font-size: 0.86rem; }
  .hero__cta { gap: 14px; margin-top: 20px; }
  .btn.btn--light {
    min-height: 52px;
    padding: 5px 5px 5px 20px;
    gap: 12px;
    font-size: 0.7rem;
  }
  .btn__ic { width: 40px; height: 40px; font-size: 0.9rem; }

  /* Sound icon — keep the 44px tap target; only tighten if needed. */
  .hero__sound {
    width: 42px;
    height: 42px;
  }

  /* -- Marquee ------------------------------------------------ */
  .mrq { padding: clamp(24px, 5vw, 40px) 0; }
  .mrq__track { gap: 22px; padding-right: 22px; }
  .mrq__word { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .mrq__ic {
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
  }
  .mrq__img {
    width: 96px;
    height: 64px;
  }

  /* -- Shop rail --------------------------------------------- */
  .shop { padding: 56px var(--pad) 20px; }
  .shop__head { gap: 20px; padding-bottom: 32px; }
  .talk-sec h2 { font-size: clamp(1.45rem, 6.4vw, 1.85rem); line-height: 1.12; }
  .shop h2 { font-size: var(--home-h2); }
  .shop__intro { font-size: 0.86rem; }
  .shop__all { font-size: 0.64rem; letter-spacing: 0.16em; }
  .shop__rail {
    --card-w: 70vw;
    gap: 12px;
    margin-top: 22px;
    padding-bottom: 0;
  }

  .card__meta { padding: 14px 14px 14px; gap: 5px; }
  .card__family { font-size: 0.52rem; letter-spacing: 0.2em; }
  .card h3 { font-size: 0.86rem; }
  .card__price { font-size: 0.82rem; }
  .card__notes { font-size: 0.7rem; }
  .card__foot { gap: 10px; padding-top: 12px; margin-top: 8px; }
  .card__go { width: 38px; height: 38px; font-size: 0.9rem; }
  .card__idx,
  .card__tag { font-size: 0.56rem; padding: 6px 10px; letter-spacing: 0.18em; }

  /* -- Types ------------------------------------------------- */
  .types { padding: 24px var(--pad) 56px; }
  .types__head { gap: 16px; padding-bottom: 28px; }
  .types__title h2 { font-size: var(--home-h2); }
  .types__lede { font-size: 0.84rem; }
  .types__tile--women { min-height: 380px; }
  .types__tile--men,
  .types__tile--unisex { min-height: 240px; }

  /* -- Families ---------------------------------------------- */
  .families { padding: 72px var(--pad) 64px; }
  .families__head { gap: 20px; padding-bottom: 32px; }
  .families__title h2 { font-size: var(--home-h2); }
  .families__intro { font-size: 0.84rem; }
  .families__all { font-size: 0.66rem; letter-spacing: 0.16em; }
  .families__all .arrow { width: 28px; height: 28px; }
  .families__grid { gap: 16px; margin-top: 32px; }
  .fam {
    min-height: 232px;
    padding: 16px;
    gap: 10px;
    border-radius: 16px;
  }
  .fam__idx {
    font-size: 0.54rem;
    padding: 5px 10px;
    letter-spacing: 0.22em;
  }
  .fam__body { max-width: 66%; }
  .fam__body h3 { font-size: 1.25rem; }
  .fam__notes { font-size: 0.54rem; letter-spacing: 0.2em; }
  .fam__desc { font-size: 0.78rem; max-width: 22ch; }
  .fam__go { font-size: 0.58rem; margin-top: 8px; letter-spacing: 0.18em; }
  .fam__go b { width: 30px; height: 30px; font-size: 0.8rem; }
  .fam__media { width: 34%; top: 14px; right: 14px; }
  /* RTL at tightest viewport — mirror the bottle stack so it
     doesn't share the top-right corner with the .fam__idx pill. */
  [dir="rtl"] .fam__media { right: auto; left: 14px; }

  /* -- Horizontal gallery ------------------------------------ */
  .hgallery__sticky { padding: 60px 0 40px; }
  .hgallery__head { padding: 24px var(--pad) 28px; gap: 16px; }
  .hgallery__title { font-size: var(--home-h2); margin: 16px 0 12px; }
  .hgallery__lede { font-size: 0.9rem; }
  .hgallery__meter { max-width: 240px; }
  .hgallery__hint { font-size: 0.66rem; letter-spacing: 0.22em; }
  /* Align the first card's left edge with the section's text rail (title +
     lede + meter all use --pad). Product images carry more visual weight
     than text, so we add a small +6 px cushion beyond --pad — the same
     editorial-rail convention used by shop.__rail on desktop — so the card
     reads as intentionally inset rather than flush.
     scroll-padding-left is paired to the same offset so scroll-snap-align:
     start still honors the padding after the user scrolls back to card 01.
     Card width trimmed to 80 vw so the added left cushion doesn't eat into
     the right-side peek that hints at more cards. */
  .hgallery__track {
    padding: 16px var(--pad) 32px calc(var(--pad) + 6px);
    scroll-padding-left: calc(var(--pad) + 6px);
    gap: 16px;
  }
  .hgallery__item { width: 80vw; }
  .hgallery__frame { height: 52vh; border-radius: 16px; }
  .hgallery__item figcaption b { font-size: 1.05rem; }
  .hgallery__item figcaption em { font-size: 0.78rem; }

  /* -- Picks (bestseller + chart) ---------------------------- */
  .picks__left,
  .picks__right { padding: 36px var(--pad); }
  .picks__eyebrow,
  .picks__stock { font-size: 0.62rem; letter-spacing: 0.22em; }
  .picks__hero { width: clamp(140px, 46vw, 200px); }
  .picks__ring { width: 200px; height: 200px; }
  .picks__ring::before { inset: 16px; }
  .picks__ring::after { inset: 34px; }
  .picks__watermark { font-size: 3rem; letter-spacing: -0.03em; }
  .picks__name { font-size: 1.75rem; }
  .picks__notes { font-size: 0.62rem; letter-spacing: 0.22em; }
  .picks__blurb { font-size: 0.88rem; }
  .picks__foot { gap: 16px; padding-top: 18px; }
  .picks__priceval { font-size: 1.5rem; }
  .picks__priceunit { font-size: 0.58rem; letter-spacing: 0.2em; }
  .picks__cta {
    padding: 4px 4px 4px 18px;
    font-size: 0.62rem;
    letter-spacing: 0.2em;
  }
  .picks__cta b { width: 32px; height: 32px; font-size: 0.85rem; }

  /* Editorial chart — tightened vertical rhythm + full-width bottom CTA
     so the section reads as a proper e-commerce mini-shortlist on phones. */
  .picks__right {
    padding: 36px var(--pad) 40px;
    gap: 22px;
  }
  .picks__head { gap: 12px; }
  .picks__label { font-size: 0.62rem; letter-spacing: 0.22em; }
  .picks__title { font-size: var(--home-h2); line-height: 1.05; }
  .picks__lede,
  .pick__info p { display: none; }

  /* Slightly stronger hairline than the desktop 0.14 alpha so rows feel like
     chart data on mobile where scale is smaller. */
  .picks__list { margin-top: 4px; }
  .pick,
  .pick:last-child { border-color: rgba(20, 16, 14, 0.18); }

  /* Compact chart row: rank column at 34 px to match the reduced rank type;
     price/arrow stay right, info column flexes in the middle. */
  .pick__link {
    grid-template-columns: 34px 1fr auto;
    column-gap: 12px;
    padding: 14px 0;
    align-items: center;
  }
  .pick__link:hover { padding-left: 0; }

  /* Touch feedback — subtle tap flash so the row reads as tappable on phones
     where no `:hover` fires. */
  .pick__link:active {
    background: rgba(20, 16, 14, 0.03);
  }

  /* --- List item typography — one step smaller across the board so the
     chart reads more compact / editorial. Adjusted together to preserve
     relative hierarchy (rank > name > price > notes). --- */
  .pick__rank { font-size: 1.2rem; line-height: 1; }
  .pick__info { gap: 4px; min-width: 0; }
  .pick__info h4 {
    font-size: 0.92rem;
    line-height: 1.25;
    /* Prevent narrow phones from breaking long product names in awkward
       places; wrap on token boundaries only. */
    overflow-wrap: anywhere;
  }
  .pick__info p {
    /* Tighter tracking (0.18 → 0.14 em) prevents the "WARM AMBER" orphan
       shown in QA where a 3-word notes line broke to a second line with
       only the last word. */
    font-size: 0.54rem;
    letter-spacing: 0.14em;
    line-height: 1.5;
  }
  .pick__price { font-size: 0.9rem; }
  .pick__right { gap: 10px; }

  /* "See all bestsellers" — full-width, taller CTA so it reads as the
     section's primary action rather than a floating pill. Tap area 48 px
     min-height (WCAG AA target-size). */
  .picks__all {
    align-self: stretch;
    justify-content: space-between;
    margin-top: 18px;
    padding: 6px 6px 6px 22px;
    min-height: 48px;
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    background: transparent;
  }
  .picks__all b { width: 36px; height: 36px; font-size: 0.88rem; }

  /* -- Cinema (film) ----------------------------------------- */
  .cinema__sticky { padding: 64px var(--pad); }
  .cinema__intro h2 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .cinema__intro { margin-bottom: 24px; }
  .cinema__lede { font-size: 0.9rem; }
  .cinema__frame {
    aspect-ratio: 4 / 5;
    max-height: 70vh;
    border-radius: 16px;
  }
  .cinema__badge b { font-size: 0.7rem; letter-spacing: 0.16em; }
  .cinema__badge i { font-size: 0.62rem; }

  /* ==============================================================
     PRODUCTS PAGE — mobile refinements
     --------------------------------------------------------------
     Layered on top of the existing 900/640/599 px rules for
     .pvideo / .shop-toolbar / .collection__grid. Keeps every
     products.html section on the same tight rail (--section-pad)
     as the home page's mobile treatment. Nothing above 480 px
     changes — desktop products.html renders identically.
     ============================================================== */

  /* -- Video hero (top of collection) -----------------------
     Aspect ratio + border-radius intentionally inherit from the existing
     ≤ 900 px rule (16/11 landscape, 12 px radius) — don't override here,
     the previous portrait override was reverted per QA feedback.
     --pvideo-gap sets the top clearance below the fixed nav; 88 px gives
     ~30 px of clean breathing room below a nav that sits at top: 12 px
     with a 42 px brand mark. */
  .pvideo {
    --pvideo-gap: 88px;
    padding-bottom: 24px;
  }
  .pvideo__inner { padding: 0 var(--section-pad); }
  .pvideo__eyebrow {
    padding: 6px 14px;
    gap: 8px;
    font-size: 0.52rem;
    letter-spacing: 0.14em;
    margin-bottom: 20px;
    /* Long eyebrow copy ("THE COLLECTION · 07 SIGNATURES") was pushing the
       pill wider than the viewport at 360 px. Allow the copy to wrap inside
       the pill on very narrow phones so it stays inside the rail. */
    flex-wrap: wrap;
    max-width: 100%;
  }
  /* Hide the small leading rule (—) inside the eyebrow pill on mobile —
     with the smaller pill and centered text it reads as visual clutter. */
  .pvideo__rule { display: none; }
  .pvideo__title {
    /* Reduced clamp so "MADE WITH / INTENTION. MEANT TO BE / WORN." fits
       comfortably on a 375 px viewport without breaking into more than
       four lines. Line-height loosened slightly so the accent-colored
       italic words breathe. */
    font-size: clamp(1.55rem, 8vw, 2rem);
    line-height: 1;
    margin-bottom: 20px;
  }
  .pvideo__lede {
    font-size: 0.88rem;
    line-height: 1.55;
    margin-bottom: 28px;
    max-width: none;
  }
  .pvideo__foot { gap: 18px; padding-top: 20px; }
  .pvideo__meta {
    /* 2×2 grid keeps the four data points visible without wrapping labels. */
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
  }
  .pvideo__meta dt { font-size: 0.54rem; letter-spacing: 0.2em; }
  .pvideo__meta dd { font-size: 0.9rem; }

  /* "Just landed" featured pill — full-width so the long
     "Nectar Blush · $138" copy never overflows the button. */
  .pvideo__feat {
    align-self: stretch;
    justify-content: space-between;
    padding: 10px 10px 10px 16px;
    gap: 10px;
  }
  .pvideo__feat-lbl { font-size: 0.56rem; letter-spacing: 0.2em; }
  .pvideo__feat-name { font-size: 0.88rem; }
  .pvideo__feat-arrow { width: 30px; height: 30px; font-size: 0.85rem; }

  /* -- Toolbar (filter bar + sort) -------------------------- */
  .shop-toolbar {
    padding: 28px var(--section-pad) 24px;
  }
  .sfilter__btn {
    min-height: 38px;
    padding: 0 12px;
    font-size: 0.6rem;
    letter-spacing: 0.14em;
  }
  .sfilter__open {
    min-height: 44px;
    padding: 0 16px;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
  }
  .sfilter__sort {
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    gap: 10px;
  }
  .sfilter__select select {
    padding: 10px 36px 10px 16px;
    font-size: 16px;
  }
  [dir="rtl"] .sfilter__select select {
    padding: 10px 16px 10px 36px;
  }
  .sfilter__select-caret { inset-inline-end: 14px; font-size: 0.65rem; }

  /* -- Collection grid (product cards) ---------------------- */
  .collection { padding-bottom: 72px; }
  .collection__grid {
    /* Same horizontal rail as the toolbar and pvideo hero. */
    padding: 0 var(--section-pad);
    gap: 32px;
  }

  .pcard__body { padding: 14px 2px 2px; gap: 4px; }
  .pcard__row { gap: 12px; }
  .pcard__row h3 { font-size: 0.95rem; padding-bottom: 3px; }
  .pcard__price { font-size: 0.86rem; }
  .pcard__family { font-size: 0.48rem; letter-spacing: 0.14em; margin: 2px 0 0; }
  .pcard__notes { font-size: 0.62rem; margin: 0; }

  /* Card footer: on narrow phones the add-button + Details link were
     wrapping unpredictably. Enforce the exact 2-column split we want. */
  .pcard__foot {
    flex-wrap: nowrap;
    gap: 10px;
    padding-top: 8px;
    margin-top: 6px;
  }
  .pcard__add {
    padding: 10px 14px;
    font-size: 0.58rem;
    letter-spacing: 0.2em;
    gap: 8px;
    /* Grow to fill available space so the button reads as the primary CTA;
       Details link stays intrinsic-width on the right. */
    flex: 1 1 auto;
    justify-content: center;
  }
  .pcard__more { font-size: 0.6rem; letter-spacing: 0.2em; flex-shrink: 0; }

  /* ==============================================================
     PRODUCT DETAIL PAGE (PDP) — mobile refinements
     --------------------------------------------------------------
     Layered on top of the existing ≤ 1100 px rule that already
     stacks .pdp__hero into a single column. All typography scaled
     one step down so long product names + breadcrumbs don't create
     4-line wraps on 375 px phones. Notes pyramid + rails also
     tightened to match the compact PDP typography.
     ============================================================== */

  /* Breadcrumbs — clears the shrunken fixed nav (~54 px) with
     ~30 px breathing so the row doesn't kiss the pill. */
  .crumbs {
    padding: 86px var(--section-pad) 0;
    gap: 5px;
    font-size: 0.46rem;
    letter-spacing: 0.14em;
    flex-wrap: wrap;
    line-height: 1.4;
  }
  .crumbs i { font-size: 0.64rem; }

  /* PDP hero — column stack is already handled by ≤ 1100 rule; this
     tightens the spacing + typography inside the single column. */
  .pdp__hero {
    padding: 18px var(--section-pad) 52px;
    gap: 24px;
  }
  .pdp__stage { max-width: 100%; }
  .pdp__thumbs {
    max-width: 100%;
    margin-top: 16px;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .pdp__thumb { width: 56px; height: 56px; }

  /* Not-found state — enterprise QA edge case (bad ?id= in URL). */
  .pdp__missing { padding: 72px var(--section-pad); }
  .pdp__missing h1 { font-size: clamp(1.7rem, 8vw, 2.2rem); }

  /* ============================================================
     CART PAGE — mobile refinements (≤ 480 px)
     ------------------------------------------------------------
     Fixes the reported bug where the "Your bag" header collided
     with the fixed site nav (desktop clamp of 48 px min was less
     than the ~90 px effective nav bottom edge). Also tightens
     line-item, summary, and empty-state typography for phones.
     ============================================================ */
  .cart {
    padding: 100px var(--section-pad) 64px;
  }
  .cart__head { margin-bottom: 24px; }
  .cart__head .label {
    font-size: 0.58rem;
    letter-spacing: 0.2em;
  }
  .cart__head h1 {
    font-size: clamp(1.9rem, 9vw, 2.4rem);
    margin: 10px 0 12px;
  }
  .cart__lede { font-size: 0.88rem; line-height: 1.55; }

  .cart__body { gap: 24px; }

  /* Line items — smaller media column + wrap-friendly row so a long
     product name never gets crushed against the price. */
  .cline {
    grid-template-columns: 88px 1fr;
    gap: 14px;
    padding: 18px 0;
  }
  .cline__body { padding: 2px 0; gap: 10px; justify-content: flex-start; }
  .cline__row {
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: baseline;
  }
  .cline__row h3 {
    font-size: 1rem;
    overflow-wrap: anywhere;
    flex: 1 1 auto;
  }
  .cline__price {
    font-size: 0.94rem;
    flex-shrink: 0;
  }
  .cline__meta {
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    margin: 4px 0 10px;
  }
  .cline__actions {
    flex-wrap: wrap;
    gap: 10px 14px;
  }
  .cline__qty {
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    padding: 5px 12px;
  }
  .cline__remove {
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    padding: 4px 0;
  }

  /* Summary card — full-width on mobile via the ≤ 1100 stack, so we
     compress padding + type so it doesn't dominate the fold. */
  .cart__summary { padding: 22px; border-radius: 4px; }
  .cart__summary h2 {
    font-size: 0.9rem;
    letter-spacing: 0.16em;
    margin-bottom: 14px;
    padding-bottom: 12px;
  }
  .cart__totals { gap: 8px; padding-bottom: 16px; margin-bottom: 16px; }
  .cart__totals > div { font-size: 0.86rem; }
  .cart__totals-line { font-size: 0.98rem !important; }
  .cart__totals-line dt { font-size: 0.64rem; letter-spacing: 0.16em; }
  .cart__totals-line dd { font-size: 1.15rem; }

  .cart__cta {
    height: 52px;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    gap: 8px;
  }
  .cart__hint { font-size: 0.76rem; margin: 4px 0; }
  .cart__badges {
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    margin-top: 16px;
    padding-top: 16px;
  }

  /* Empty state — same 12 vw padding overflow that .pdp__missing had. */
  .cart__empty { padding: 64px var(--section-pad); }
  .cart__empty h2 { font-size: clamp(1.7rem, 8vw, 2.2rem); }
  .cart__empty p { font-size: 0.9rem; margin-bottom: 20px; }

  .pdp__idx {
    font-size: 0.58rem;
    letter-spacing: 0.22em;
    gap: 8px;
    margin-bottom: 14px;
  }
  .pdp__idx i { width: 20px; }

  /* Aligned with trimmed ≤ 720 chain (max 1.75 rem) — ≤ 480 lands
     a step below. */
  .pdp__name {
    font-size: clamp(1.25rem, 5.8vw, 1.55rem);
    line-height: 1.02;
    margin-bottom: 10px;
  }
  .pdp__concentration {
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    margin-bottom: 20px;
  }
  .pdp__story {
    font-size: 0.86rem;
    line-height: 1.6;
    margin-bottom: 22px;
  }

  /* Specs — 3-col with cramped 0.9 rem dd values felt tight on 375 px.
     Compress padding + typography so the row still reads. */
  .pdp__specs {
    gap: 14px;
    padding: 18px 0;
    margin-bottom: 24px;
  }
  .pdp__specs dt {
    font-size: 0.52rem;
    letter-spacing: 0.2em;
    margin-bottom: 6px;
  }
  .pdp__specs dd { font-size: 0.78rem; }

  /* Buy row — price + CTA. Stack on very narrow phones so the pill
     doesn't collide with the price when it grows to 4 digits. */
  .pdp__buy {
    gap: 14px;
    margin-bottom: 20px;
    flex-wrap: wrap;
  }
  .pdp__price { font-size: 1.15rem; }
  .pdp__add {
    height: 46px;
    padding: 0 22px;
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    gap: 8px;
    flex: 1 1 auto;
    justify-content: center;
  }
  .pdp__promise {
    font-size: 0.74rem;
    gap: 6px;
  }

  /* Notes pyramid — 1-col stack via the pre-existing ≤ 900 rule.
     Tighten padding + type so each tier card doesn't feel oversized. */
  .pyramid { padding: 56px var(--section-pad); }
  .pyramid__head { margin-bottom: 28px; }
  /* Aligned with trimmed ≤ 720 pyramid clamp (max 1.5 rem). */
  .pyramid__head h2 { font-size: clamp(1.1rem, 5.2vw, 1.35rem); }
  .pyramid__tier h3 { font-size: 0.95rem; }
  .pyramid__lede { font-size: 0.82rem; }
  .pyramid__tier li { font-size: 0.76rem; }

  .foot__news button .arrow { width: 20px; height: 20px; font-size: 0.72rem; }

  .foot__badges { gap: 12px; }
  .foot__social { width: 30px; height: 30px; }
  .foot__cf-txt { font-size: 0.56rem; letter-spacing: 0.05em; }
  .foot__select select { min-height: 42px; font-size: 0.84rem; padding: 0 36px 0 16px; }

  /* Centered wordmark — sub tracking was 0.28em (nowrap) which overflowed
     at 400 px. Loosen tracking + allow wrap so the subtitle always fits. */
  .foot__wordmark { padding: 24px 0 18px; }
  .foot__wordmark-sub {
    font-size: 0.56rem;
    letter-spacing: 0.18em;
    white-space: normal;
    text-align: center;
    line-height: 1.4;
  }

  /* Legal row — 4 links + 3 separators overflowed a single row.
     Left-align, allow wrap, hide bullet separators to avoid orphan bullets. */
  .foot__bot {
    justify-content: flex-start;
    text-align: left;
    gap: 6px 12px;
    font-size: 0.72rem;
  }
  .foot__sep { display: none; }
  .foot__copy {
    flex-basis: 100%;
    margin-top: 4px;
    font-size: 0.7rem;
  }
}

/* ==============================================================
   MOBILE FINE-TUNE — very small phones (≤ 400 px)
   --------------------------------------------------------------
   Final tier layered above the ≤480 px block. Targets 360–400 px
   viewports (older iPhone SE, Galaxy Fold outer, budget Androids).
   Only overrides where the 480 px tuning still crowds or clips.
   ============================================================== */
@media (max-width: 400px) {
  :root {
    --pad: 14px;
    --section-pad: 12px;
  }

  body { font-size: 14.5px; }

  /* Nav: keep every action reachable; drop the "Bag" label so the
     bag pill collapses to just the count chip — search icon + count
     + burger still fit comfortably beside a 40 px brand mark. */
  .brand img { height: 38px; }
  .nav__actions { padding: 3px; }
  .nav__ic { width: 34px; height: 34px; }
  .nav__ic svg { width: 15px; height: 15px; }
  .nav__sep { display: none; }
  .nav__bag { width: 34px; height: 34px; }
  .nav__bag svg { width: 15px; height: 15px; }
  .nav__bag b { min-width: 13px; height: 13px; font-size: 0.5rem; }
  .icon-circle { width: 38px; height: 38px; }

  /* Hero: tighter vertical rhythm on 400 px so the CTA + sound pill
     both stay above the fold on a 640 px-tall phone. */
  .hero { padding: 84px var(--pad) 88px; gap: 24px; }
  .hero h1 { font-size: clamp(1.7rem, 10vw, 2.1rem); }
  .hero__lede { font-size: 0.9rem; }
  .btn.btn--light { min-height: 48px; padding: 4px 4px 4px 16px; font-size: 0.66rem; }
  .btn__ic { width: 38px; height: 38px; font-size: 0.85rem; }
  .hero__sound {
    right: var(--section-pad);
    bottom: 20px;
    width: 40px;
    height: 40px;
  }
  /* RTL: re-anchor at this tighter breakpoint so the small-mobile
     override doesn't undo the base RTL fix. */
  [dir="rtl"] .hero__sound {
    right: auto;
    left: var(--section-pad);
  }

  /* Marquee */
  .mrq__word { font-size: clamp(1.5rem, 9vw, 2rem); }
  .mrq__ic { width: 40px; height: 40px; font-size: 1.15rem; }
  .mrq__img { width: 84px; height: 56px; }

  /* Editorial section titles at the tightest breakpoint — one
     unified scale for the shop rail, families, picks, gallery,
     cinema, and manifesto so every chapter reads at the same
     visual rank on a 320–400 px screen. */
  .shop h2,
  .talk-sec h2,
  .types__title h2,
  .families__title h2,
  .picks__title,
  .hgallery__title,
  .cinema__intro h2 { font-size: var(--home-h2); }

  .shop__rail { --card-w: 72vw; gap: 10px; }
  .card__meta { padding: 12px; }
  .card h3 { font-size: 0.82rem; }
  .card__notes { font-size: 0.68rem; }
  .card__go { width: 36px; height: 36px; }

  /* Families */
  .fam { min-height: 216px; padding: 14px; border-radius: 14px; }
  .fam__body h3 { font-size: 1.15rem; }
  .fam__desc { font-size: 0.74rem; }
  .fam__media { width: 32%; }

  /* Horizontal gallery — carry the same left-cushion pattern down to tiny
     phones, but trim card width so the right-side peek stays visible on
     360–400 px viewports where every pixel of the gutter counts. */
  .hgallery__track {
    padding-left: calc(var(--pad) + 4px);
    scroll-padding-left: calc(var(--pad) + 4px);
  }
  .hgallery__item { width: 82vw; }
  .hgallery__frame { height: 46vh; }

  /* Picks */
  .picks__left,
  .picks__right { padding: 32px var(--pad); }
  .picks__hero { width: clamp(130px, 52vw, 180px); }
  .picks__ring { width: 170px; height: 170px; }
  .picks__watermark { font-size: 2.5rem; }
  .picks__name { font-size: 1.55rem; }
  .picks__priceval { font-size: 1.35rem; }
  .pick__link {
    grid-template-columns: 26px 1fr auto;
    gap: 10px;
    padding: 12px 0;
  }
  .pick__rank { font-size: 1.15rem; }
  .pick__info h4 { font-size: 0.94rem; }
  .pick__price { font-size: 0.88rem; }

  /* Cinema */
  .cinema__sticky { padding: 56px var(--pad); }
  .cinema__frame { aspect-ratio: 3 / 4; max-height: 62vh; border-radius: 14px; }

  /* Footer */
  .foot { padding: 48px var(--section-pad) 72px; --foot-mark-h: 34px; }
  .foot__top { gap: 32px; }
  .foot__lede { font-size: 0.8rem; }

  /* Newsletter — button label was still overflowing on 360 px; hide the
     word "Sign up" and lean on the arrow chip (which stays 20 px + tap area
     via the surrounding button's 36 px min-height). */
  .foot__news { padding: 4px 4px 4px 10px; }
  .foot__news input { min-height: 36px; font-size: 0.8rem; }
  .foot__news button {
    padding: 0 10px;
    min-width: 44px;
    gap: 0;
  }
  .foot__news button > span { display: none; }
  .foot__news button .arrow {
    background: transparent;
    width: 18px;
    height: 18px;
  }

  .foot__wordmark { padding: 20px 0 14px; gap: 12px; }
  .foot__wordmark-sub { font-size: 0.52rem; letter-spacing: 0.14em; }

  .foot__bot { font-size: 0.68rem; gap: 4px 10px; }
  .foot__bot a { font-size: 0.7rem; }

  /* -- Products page — tightest tier (≤ 400 px) -------------
     Video aspect intentionally inherits ≤ 900 px rule (16/11), not
     overridden here per QA. Title clamp handled by ≤ 480 rule above.
     Top gap 72 px = ~30 px clearance below the 40 px shrunken brand
     mark used at this tier. */
  .pvideo { --pvideo-gap: 72px; }
  .pvideo__title { font-size: clamp(1.4rem, 8.5vw, 1.75rem); }
  .pvideo__lede { font-size: 0.84rem; }
  .pvideo__meta { grid-template-columns: 1fr 1fr; gap: 12px 16px; }
  .pvideo__meta dt { font-size: 0.5rem; }
  .pvideo__meta dd { font-size: 0.84rem; }
  .pvideo__feat { padding: 10px 8px 10px 14px; }
  .pvideo__feat-name { font-size: 0.8rem; }

  .shop-toolbar { padding: 24px var(--section-pad) 20px; }
  .sfilter__select select {
    padding: 9px 32px 9px 14px;
    font-size: 16px;
  }
  [dir="rtl"] .sfilter__select select {
    padding: 9px 14px 9px 32px;
  }

  .collection__grid { gap: 22px; padding: 0 var(--section-pad); }
  .pcard__row h3 { font-size: 0.9rem; }
  .pcard__price { font-size: 0.84rem; }
  .pcard__notes { font-size: 0.6rem; margin-bottom: 0; }
  .pcard__add {
    padding: 10px 12px;
    font-size: 0.54rem;
    letter-spacing: 0.16em;
  }
  .pcard__more { font-size: 0.56rem; letter-spacing: 0.16em; }

  /* -- PDP page — tightest tier (≤ 400 px) -------------------
     Focus: keep breadcrumbs on a single line, prevent product name
     wrap-cascades, and shrink pyramid + rail typography a final step
     so 3-word note names ("Cambodian Oud Wood") stay on one row. */
  .crumbs {
    padding: 82px var(--section-pad) 0;
    gap: 4px;
    font-size: 0.44rem;
    letter-spacing: 0.12em;
  }
  .crumbs i { font-size: 0.6rem; }

  .pdp__hero { padding: 14px var(--section-pad) 44px; gap: 20px; }
  .pdp__thumb { width: 52px; height: 52px; }

  .pdp__idx { font-size: 0.52rem; letter-spacing: 0.2em; margin-bottom: 12px; }
  /* Tightest tier — step below ≤ 480 (max 1.55 rem). */
  .pdp__name { font-size: clamp(1.15rem, 6vw, 1.4rem); }
  .pdp__concentration { font-size: 0.54rem; letter-spacing: 0.14em; margin-bottom: 16px; }
  .pdp__story { font-size: 0.84rem; line-height: 1.6; margin-bottom: 20px; }

  .pdp__specs { gap: 10px; padding: 12px 0; margin-bottom: 18px; }
  .pdp__specs dt { font-size: 0.46rem; letter-spacing: 0.18em; }
  .pdp__specs dd { font-size: 0.74rem; }

  .pdp__price { font-size: 1.1rem; }
  .pdp__add {
    height: 44px;
    padding: 0 18px;
    font-size: 0.56rem;
    letter-spacing: 0.14em;
  }
  .pdp__promise { font-size: 0.7rem; }

  .pyramid { padding: 48px var(--section-pad); }
  /* Step below ≤ 480 (max 1.35 rem). */
  .pyramid__head h2 { font-size: clamp(1rem, 5vw, 1.2rem); }
  .pyramid__tier h3 { font-size: 0.92rem; }
  .pyramid__tier li { font-size: 0.74rem; }

  .rcard__meta h3 { font-size: 0.82rem; }
  .rcard__meta p { font-size: 0.5rem; letter-spacing: 0.16em; }
  .rcard__price { font-size: 0.76rem; }

  /* -- Cart page — tightest tier (≤ 400 px) ------------------
     Push everything one more step down. Media column shrinks to
     76 px so the body column has room for wraps of "Shaghaf Amber
     Infusion" without truncation. Header still clears the nav via
     92 px top padding (nav shrinks to ~72 px at this tier). */
  .cart { padding: 92px var(--section-pad) 56px; }
  .cart__head { margin-bottom: 20px; }
  .cart__head h1 { font-size: clamp(1.65rem, 8.5vw, 2rem); margin: 8px 0 10px; }
  .cart__lede { font-size: 0.82rem; }

  .cline { grid-template-columns: 76px 1fr; gap: 12px; padding: 16px 0; }
  .cline__row h3 { font-size: 0.94rem; }
  .cline__price { font-size: 0.88rem; }
  .cline__meta { font-size: 0.54rem; letter-spacing: 0.14em; margin: 3px 0 8px; }
  .cline__qty { font-size: 0.54rem; padding: 4px 10px; }
  .cline__remove { font-size: 0.54rem; }

  .cart__summary { padding: 18px; }
  .cart__summary h2 { font-size: 0.84rem; }
  .cart__totals > div { font-size: 0.8rem; }
  .cart__totals-line dt { font-size: 0.6rem; }
  .cart__totals-line dd { font-size: 1.05rem; }

  .cart__cta { height: 48px; font-size: 0.58rem; letter-spacing: 0.12em; }
  .cart__hint { font-size: 0.72rem; }
  .cart__badges { font-size: 0.54rem; letter-spacing: 0.14em; }

  .cart__empty { padding: 56px var(--section-pad); }
  .cart__empty h2 { font-size: clamp(1.5rem, 7.5vw, 1.9rem); }
}

@media (max-width: 560px) {
  .hero h1,
  .hero h1 em,
  .hero__lede {
    color: #fff;
  }
}