/* =========================================================
   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;

  /* 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__idx {
  right: auto;
  left: 26px;
}
[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 image sits top-right by default —
   in RTL, keep it on the reading-end side (top-left). */
[dir="rtl"] .fam__product {
  right: auto;
  left: 18px;
}

/* --- Fragrance-family card mirroring (RTL) ------------------------
   Three 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__product — the bottle image, fixed at `right: 18px` (LTR)
                     → mirrored to `left: 18px` above.
     .fam__mono    — the decorative SVG icon, fixed at `right: 22px` (LTR).

   Without an RTL override, .fam__mono STAYS at top-right in RTL and
   collides with .fam__idx which now sits there too — visible in the
   Arabic screenshot as the SVG rendering behind the chip. Mirror it
   to the reading-end corner (TOP-LEFT). */
[dir="rtl"] .fam__mono {
  right: auto;
  left: 22px;
}

/* .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);
}

/* Nav bag pill — the count chip should sit on the reading-end side. */
[dir="rtl"] .nav__bag {
  flex-direction: row-reverse;
}

/* Ghost link / CTA arrow chips — mirror the arrow itself, not the
   whole flex row (order is handled by RTL flow). */
[dir="rtl"] .ghost-link .arrow,
[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 {
  padding: 4px 22px 4px 4px;
}
[dir="rtl"] .picks__all {
  padding: 4px 20px 4px 4px;
}
[dir="rtl"] .picks__cta b,
[dir="rtl"] .picks__all b {
  transform: scaleX(-1);
}
[dir="rtl"] .picks__cta:hover b,
[dir="rtl"] .picks__all:hover 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 {
  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,
[dir="rtl"] .ghost-link:hover .arrow {
  transform: translate(-3px, -3px) scaleX(-1);
}

/* Home hero CTA row — force LTR-style horizontal ordering so the
   primary "Shop the line" pill stays on the reading-start side
   (visual right in RTL) and the secondary ghost link sits after.
   `flex-wrap: wrap` in the base already handles overflow. */
[dir="rtl"] .hero__cta {
  flex-direction: row;
  justify-content: flex-start;
}

/* Ghost-link underline uses `left: 0; right: 0` which is symmetric —
   no change needed. But its trailing arrow needs the same
   translate-mirror when hovered (handled above). */

/* Hero sound pill — anchored to bottom-right in LTR via physical
   `right:`. In RTL the reading-end corner is bottom-LEFT, so mirror
   the anchor. Also flip the asymmetric pill padding so the icon
   circle cushion (14px) stays on the icon's side and the text
   breathing room (18px) stays on the text's side after the flex
   row reversal. 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);
  padding: 10px 14px 10px 18px;
}

/* ==========================================================
   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"] .manifesto,
  [dir="rtl"] .manifesto p,
  [dir="rtl"] .picks,
  [dir="rtl"] .picks__head,
  [dir="rtl"] .picks__lede,
  [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 {
    text-align: right;
  }

  /* 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 {
  --loader-fill: 0;
  position: fixed;
  inset: 0;
  z-index: 300;
  overflow: hidden;
  background: #ffffff;
  color: #000;
  transform: translateY(0);
  transition: transform 1.2s cubic-bezier(0.76, 0, 0.24, 1);
  will-change: transform;
  isolation: isolate;
}

.loader__corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 0 solid #000;
  pointer-events: none;
}
.loader__corner--tl { top: 22px; left: 22px;   border-top-width: 1.5px; border-left-width: 1.5px; }
.loader__corner--tr { top: 22px; right: 22px;  border-top-width: 1.5px; border-right-width: 1.5px; }
.loader__corner--bl { bottom: 22px; left: 22px;  border-bottom-width: 1.5px; border-left-width: 1.5px; }
.loader__corner--br { bottom: 22px; right: 22px; border-bottom-width: 1.5px; border-right-width: 1.5px; }

.loader__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  padding: clamp(28px, 4vw, 48px);
}

.loader__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.loader__row--mid {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: clamp(20px, 2.6vw, 34px);
}

.loader__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.loader__brand img {
  height: 32px;
  width: auto;
  object-fit: contain;
}

.loader__meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-geist-sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #000;
}

.loader__meta i {
  font-style: normal;
  color: #000;
  opacity: 0.4;
}

.loader__stage {
  width: clamp(120px, 17vw, 190px);
  aspect-ratio: 140 / 260;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
}

.loader__bottle {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.loader__liquid-group {
  transform: translateY(calc(140px * (1 - var(--loader-fill, 0))));
  transition: transform 0.18s linear;
  transform-box: fill-box;
}

.loader__wave {
  transform-origin: 50% 100%;
  animation: loaderWave 3.4s ease-in-out infinite;
}

@keyframes loaderWave {
  0%, 100% { transform: translateX(-6px); }
  50%      { transform: translateX(6px); }
}

.loader__wisp {
  fill: none;
  opacity: 0;
  transform-origin: 50% 100%;
  transform-box: fill-box;
  animation: loaderWisp 3.6s ease-in-out infinite;
}

.loader__wisp--2 { animation-delay: 1.2s; }
.loader__wisp--3 { animation-delay: 2.4s; }

@keyframes loaderWisp {
  0%   { opacity: 0;   transform: translateY(6px)  scale(0.9); }
  30%  { opacity: 0.7; }
  75%  { opacity: 0.2; }
  100% { opacity: 0;   transform: translateY(-22px) scale(1.05); }
}

.loader__status {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-geist-sans);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #000;
}

.loader__status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #000;
  animation: loaderPulse 1.6s ease-in-out infinite;
}

@keyframes loaderPulse {
  0%, 100% { opacity: 0.2; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

.loader__num {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font-geist-sans);
  font-size: clamp(4.5rem, 13vw, 8.5rem);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.88;
  color: #000;
}

.loader__num i {
  font-family: var(--font-geist-sans);
  font-style: normal;
  font-size: 0.28em;
  font-weight: 800;
  letter-spacing: 0;
  color: #000;
  margin-top: 0.4em;
}

.loader__track {
  width: 100%;
  height: 2px;
  background: rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-bottom: 14px;
}

.loader__track span {
  display: block;
  height: 100%;
  width: 0;
  background: #000;
  transition: width 0.16s linear;
}

.loader__foot {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-geist-sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #000;
}

.loader.is-leave {
  transform: translateY(-100%);
  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,
.mrq,
.families,
.hgallery,
.manifesto,
.picks,
.cinema,
.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;
  gap: 4px;
}

.drop > button span {
  font-size: 0.6rem;
  color: rgba(17, 17, 17, 0.55);
  transition: transform 0.3s var(--ease);
}

.drop:hover > button span { transform: rotate(180deg); }

.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);
}

.nav__bag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 4px 0 14px;
  border-radius: 999px;
  color: #111;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: 0.3s var(--ease);
}

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

.nav__bag 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;
  transition: background 0.25s var(--ease);
}

/* Empty state — JS toggles .is-empty on #cartCount when cart is 0.
   Soft grey pill so an empty bag doesn't scream in brand copper.
   Mirrors the existing pattern in .nav__bag-link b.is-empty. */
.nav__bag b.is-empty {
  background: rgba(17, 17, 17, 0.14);
  color: rgba(17, 17, 17, 0.6);
}

.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 stays generous for the grid. */
  padding: 14px clamp(24px, 5vw, 80px) 24px;
  /* 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: 62vh. Wide desktop (≥1440px) tightens to 52vh.
     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: 62vh;
  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: 54vh;
  }
}

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 flexible list columns + one CAPPED feature accent:
       col-1  list     →  1fr  (grows to fill remaining space, min 140 px)
       col-2  list     →  1fr  (matched)
       col-3  feature  →  minmax(240 px, 320 px)  — capped so the
                          image at 4/5 aspect never exceeds ~400 px
                          tall, safely within the panel's 62vh height
                          budget on 720p laptops.
     Previously fixed maxes on all three columns + `justify-content:
     start` clumped every column at the left of the row and left a
     large empty patch on the right of 1440 px+ screens. Using `1fr`
     on the two lists lets them absorb the extra row width so the
     composition stays balanced from 900 px up to 4K without an
     ultra-wide media query. Combined with `.mega__body {
     max-width: 1440px; margin-inline: auto; }` above, ultra-wide
     monitors center the body inside the full-bleed panel
     background instead of stretching it. */
  grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) minmax(240px, 320px);
  grid-template-rows: auto;
  grid-auto-rows: auto; /* undo the search-mode height-0 clip */
  gap: clamp(28px, 3vw, 48px);
  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 fourth column. Tall-ish 4:5 aspect anchors
   the panel visually, with a subtle bottom gradient to make the
   overlay text legible over any product photo. */
.mega__feature {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  min-height: 220px;
  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);
}

.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.4rem, 4.2vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.98;
  color: #000;
  text-shadow: none;
  margin-bottom: 18px;
}

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

.hero__lede {
  max-width: 40ch;
  font-size: 1.02rem;
  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;
}


.ghost-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 60px;
  padding: 0;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #000;
  transition: color 0.3s;
}

.ghost-link span {
  position: relative;
  padding-bottom: 4px;
}

.ghost-link span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.55);
  transition: background 0.3s;
}

.ghost-link .arrow {
  font-size: 1rem;
}

.ghost-link:hover { color: var(--accent); }
.ghost-link:hover span::after { background: var(--accent); }
.ghost-link:hover .arrow { transform: translate(3px, -3px); }

.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 — sits at the bottom-right of the hero, on the same
   vertical rail as the nav bar. Two icons live inside the pill: a play
   triangle (default, muted state) and an animated equaliser (live state).
   Visibility is swapped by the .is-live class, toggled from main.js. */
.hero__sound {
  position: absolute;
  right: var(--section-pad);
  bottom: clamp(24px, 3vw, 40px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(12, 12, 12, 0.5);
  backdrop-filter: blur(14px);
  color: #fff;
  font-family: var(--font-geist-sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s;
}

.hero__sound:hover {
  background: rgba(12, 12, 12, 0.75);
  border-color: rgba(255, 255, 255, 0.32);
}

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

.hero__sound-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--accent);
}

/* Idle state: show play triangle, hide EQ. */
.hero__sound-ic--live { display: none; }

/* Live state: hide play triangle, show pulsing EQ. */
.hero__sound.is-live .hero__sound-ic--play { display: none; }
.hero__sound.is-live .hero__sound-ic--live { display: inline-flex; }

.hero__eq {
  align-items: flex-end;
  gap: 2px;
  height: 10px;
}

.hero__eq i {
  width: 2px;
  height: 4px;
  background: var(--accent);
}

.hero__sound.is-live .hero__eq i {
  animation: eq 0.7s ease-in-out infinite;
  background: var(--accent);
}

.hero__sound.is-live .hero__eq i:nth-child(2) { animation-delay: 0.1s; }
.hero__sound.is-live .hero__eq i:nth-child(3) { animation-delay: 0.2s; }

@keyframes eq {
  50% { height: 10px; }
}

.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 {
  padding: clamp(90px, 11vw, 140px) var(--pad) clamp(80px, 10vw, 120px);
  background: #fff;
  color: var(--ink);
}

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

.shop__head {
  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.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(2.2rem, 4.2vw, 3.6rem);
}

/* 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) {
  .shop h2,
  .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: 1rem;
  line-height: 1.55;
}

.shop__all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ink);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}

.shop__all .arrow { color: var(--accent); }

.shop__rail {
  --card-w: clamp(240px, 22vw, 320px);
  --edge-pad: 0px;
  position: relative;
  display: flex;
  gap: 22px;
  margin: 48px calc(var(--pad) * -1) 0;
  padding: 6px var(--pad) 44px;
  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 {
  flex: 0 0 var(--card-w);
  width: var(--card-w);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

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

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

/* 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: 22px;
  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: 22px 22px 22px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 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: 1.08rem;
  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: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.card__notes {
  font-family: var(--font-geist-sans);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.55;
  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: 10px;
  flex: 1 1 auto;
  min-height: 42px;
  padding: 0 6px 0 18px;
  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.66rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background 0.35s var(--ease),
    color 0.35s var(--ease),
    border-color 0.35s var(--ease);
}

.card__add .arrow {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  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.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  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.98rem;
  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;
  }
}

/* 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: 22px 16px 16px;
  }
  .card__overlay-name {
    font-size: 1.02rem;
    font-weight: 700;
  }
  .card__overlay-add {
    width: 44px;
    height: 44px;
    font-size: 1.4rem;
  }
  /* 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: 20px 14px 14px;
  }
  .card__overlay-name {
    font-size: 0.96rem;
  }
  .card__overlay-add {
    width: 42px;
    height: 42px;
    font-size: 1.3rem;
  }
}

/* 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(3rem, 8vw, 7.5rem);
  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; }
}

/* ==========================================================
   Fragrance Families — bento showcase of scent categories
   ========================================================== */
.families {
  padding: clamp(90px, 11vw, 140px) var(--pad) clamp(80px, 10vw, 120px);
  background: #f9f6f0;
  color: var(--ink);
}

.families__head {
  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);
}

/* 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: clamp(2.2rem, 4.2vw, 3.6rem);
  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: 1rem;
  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: 18px;
  min-height: 360px;
  padding: 26px 26px 26px;
  border-radius: 24px;
  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;
}

.fam::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background: var(--fam-bg);
  transition: transform 1.2s var(--ease);
}

.fam::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  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: 2;
  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__product {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 42%;
  height: calc(100% - 36px);
  padding: 0;
  background: transparent;
  border-radius: 0;
  object-fit: contain;
  object-position: center;
  z-index: 2;
  opacity: 0;
  transform: translateX(24px);
  transition:
    opacity 0.55s var(--ease),
    transform 0.75s var(--ease);
  pointer-events: none;
  /* Product PNGs ship with a white studio background baked into the pixels
     (no alpha channel). `multiply` blends every white pixel into whatever
     gradient sits behind it, effectively knocking the white out while the
     bottle's darker colored pixels (cap, label, liquid) stay fully visible.

     No `filter: drop-shadow` here — because these PNGs have no alpha,
     drop-shadow casts off the full rectangular image bounds and reads as
     a visible rounded-rectangle frame behind the bottle. If we ever need
     to re-ground the bottle on lighter gradients (Floral, Fresh), do it
     with a radial-gradient bloom on the .fam card background, not with
     a filter on the img. */
  mix-blend-mode: multiply;
}

/* Smoke card previously used `mix-blend-mode: luminosity` to keep the older
   red smoke.png visible on the charcoal gradient. After swapping in
   heat.png (matching card 3 / Oriental), luminosity rendered the PNG's
   baked-in white studio background as a visible light plate behind the
   bottle. Removing the override lets Smoke inherit the default `multiply`
   blend so the presentation matches card 3 exactly — no light plate. The
   bottle reads as a darker silhouette against the charcoal, which is the
   intended visual now that both cards share the same product image. */

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

.fam__mono {
  position: absolute;
  top: 22px;
  right: 22px;
  width: clamp(72px, 6vw, 96px);
  height: clamp(72px, 6vw, 96px);
  z-index: 1;
  opacity: 0.5;
  transition: opacity 0.4s var(--ease), transform 0.7s var(--ease);
}

.fam__mono svg {
  width: 100%;
  height: 100%;
  color: currentColor;
}

.fam:hover .fam__mono {
  opacity: 0;
  transform: scale(0.7);
}

.fam__body {
  position: relative;
  z-index: 2;
  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.8rem, 2.6vw, 2.4rem);
  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: 3;
  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: 340px; }
  .fam__body { max-width: 60%; }
  .fam__product {
    opacity: 1;
    transform: none;
    width: 38%;
  }
  .fam__mono { opacity: 0; }
  .fam__go span { opacity: 1; transform: none; }
}

@media (hover: none) {
  .fam__product {
    opacity: 1;
    transform: none;
  }
  .fam__mono { opacity: 0; }
  .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(90px, 12vh, 140px) 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: clamp(2.4rem, 4.6vw, 4.4rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--obsidian);
  margin: 22px 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;
  border-radius: 22px;
  background: var(--ivory-warm);
  box-shadow: 0 24px 60px -20px rgba(23, 19, 16, 0.28);
}

.hgallery__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  opacity: 0.6;
  filter: blur(6px);
  transition:
    transform 1.2s var(--hg-ease),
    opacity 0.9s var(--hg-ease),
    filter 0.9s var(--hg-ease);
}

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

.hgallery__item:hover .hgallery__frame img {
  transform: scale(1.035);
}

.hgallery__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 19, 16, 0) 55%, rgba(23, 19, 16, 0.35) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--hg-ease);
}

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

.hgallery__discover {
  position: absolute;
  left: 22px;
  bottom: 22px;
  z-index: 2;
  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;
}

@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: 0 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__frame img {
    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__frame img {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
  .hgallery__item figcaption {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==============================================================
   MANIFESTO — glowing editorial statement w/ scroll-fill type
   ============================================================== */
.manifesto {
  --fill: 0;
  --fill-pct: calc(var(--fill) * 100%);
  --ink-base: rgba(20, 16, 14, 0.13);
  --accent-base: rgba(167, 96, 74, 0.22);
  position: relative;
  padding: clamp(120px, 16vw, 220px) var(--pad);
  background: #ffffff;
  color: var(--ink);
  overflow: hidden;
  text-align: center;
  isolation: isolate;
}

.manifesto__glow {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(80vw, 1000px);
  height: min(60vw, 700px);
  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: manifestoGlow 9s ease-in-out infinite alternate;
}

@keyframes manifestoGlow {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.94; }
  100% { transform: translate(-48%, -47%) scale(1.05); opacity: 1; }
}

.manifesto__arc {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid rgba(20, 16, 14, 0.055);
  pointer-events: none;
  z-index: 1;
}

.manifesto__arc--outer {
  top: 6%;
  width: min(74vw, 940px);
  height: min(74vw, 940px);
}

.manifesto__arc--inner {
  top: 12%;
  width: min(58vw, 740px);
  height: min(58vw, 740px);
  border-color: rgba(20, 16, 14, 0.045);
}

.manifesto__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(20, 16, 14, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 16, 14, 0.025) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(80% 60% at 50% 40%, #000 0%, transparent 82%);
  -webkit-mask-image: radial-gradient(80% 60% at 50% 40%, #000 0%, transparent 82%);
  pointer-events: none;
}

.manifesto__ing {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  opacity: 0.95;
  /* Warm red-tinted shadow anchors the red rose bloom without turning muddy;
     bottle SVG in the opposite corner still reads correctly against it. */
  filter: drop-shadow(0 22px 26px rgba(120, 20, 30, 0.22));
  will-change: transform;
}

.manifesto__ing--tr {
  top: clamp(40px, 6vw, 90px);
  right: clamp(20px, 4vw, 80px);
  width: clamp(120px, 14vw, 220px);
  --rot: 16deg;
  transform: rotate(var(--rot));
  animation: mfIngFloatTR 9s ease-in-out infinite;
}

.manifesto__ing--bl {
  bottom: clamp(40px, 6vw, 90px);
  left: clamp(20px, 4vw, 80px);
  width: clamp(140px, 15vw, 240px);
  --rot: -8deg;
  transform: rotate(var(--rot));
  animation: mfIngFloatBL 11s ease-in-out infinite -2s;
}

@keyframes mfIngFloatTR {
  0%, 100% { transform: rotate(16deg) translateY(0); }
  50%      { transform: rotate(19deg) translateY(-12px); }
}

@keyframes mfIngFloatBL {
  0%, 100% { transform: rotate(-8deg) translateY(0); }
  50%      { transform: rotate(-11deg) translateY(-10px); }
}

/* ==============================================================
   Manifesto — mouse-toss trail (fleeting product photos on move)
   --------------------------------------------------------------
   The section stays completely quiet at rest. When the cursor is
   moving inside .manifesto, initManifestoToss() in main.js spawns
   a small product photo at the cursor every ~70 px of travel. The
   photo lives for ~1s: fade-in + scale-up, drift in the direction
   of the swipe, fade-out. Auto-removed on animationend.

   Per-particle vectors are set as inline CSS custom properties on
   the .manifesto__toss-item element:
     --x     : cursor x within section       (px, positioned via left)
     --y     : cursor y within section       (px, positioned via top)
     --dx    : throw distance x              (px, direction of swipe)
     --dy    : throw distance y              (px, direction of swipe)
     --rot0  : initial rotation              (deg)
     --rot1  : end rotation                  (deg)
     --size  : photo width/height            (px)

   var() inside translate() is resolved at each keyframe boundary,
   so the browser interpolates between two computed transform values
   without needing @property registration. Cheap and portable.

   Accessibility contract:
     • aria-hidden on the toss layer (decorative).
     • pointer-events:none so items never intercept clicks.
     • prefers-reduced-motion + hover:none → JS returns early, so no
       items ever spawn. The container stays empty and inert.
   ============================================================== */
.manifesto__toss {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.manifesto__toss-item {
  position: absolute;
  left: var(--x, 0px);
  top: var(--y, 0px);
  width: var(--size, 80px);
  height: var(--size, 80px);
  /* Anchor the photo's visual center on the cursor. Using margin (not
     translate) so the CSS animation below owns transform exclusively —
     mixing anchor-translate and animate-translate breaks interpolation. */
  margin-left: calc(var(--size, 80px) / -2);
  margin-top: calc(var(--size, 80px) / -2);
  opacity: 0;
  will-change: transform, opacity;
  /* Duration tuned so bottles linger long enough to be read as a photo,
     not a flash. 1.6s ≈ 96 frames at 60fps — enough for the ~18% peak
     hold and a long, lazy tail. Longer than this and the trail feels
     sluggish; shorter and it feels stroboscopic. */
  animation: mfToss 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.manifesto__toss-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* No filter, no mask, no blend mode here on purpose: the <img> src is
     a blob URL produced by initManifestoToss() in main.js that has ALL
     its alpha work baked into the pixel data (studio-white keyed out,
     floor-reflection band zeroed). Compositing this element is a plain
     alpha blit — no cross-browser filter/mask quirks. */
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

@keyframes mfToss {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(var(--rot0, 0deg)) scale(0.4);
  }
  18% {
    opacity: 0.9;
    transform:
      translate(calc(var(--dx, 0px) * 0.18), calc(var(--dy, 0px) * 0.18))
      rotate(var(--rot0, 0deg)) scale(1);
  }
  100% {
    opacity: 0;
    /* Slight upward lift (-20px) at the end reads as buoyant scent
       diffusion rather than a straight-line ballistic throw. */
    transform:
      translate(var(--dx, 0px), calc(var(--dy, 0px) - 20px))
      rotate(var(--rot1, 0deg)) scale(0.85);
  }
}

/* Reduced-motion contract — belt-and-braces alongside the JS guard.
   If an item ever ends up in the DOM, it renders invisibly and does
   not animate. */
@media (prefers-reduced-motion: reduce) {
  .manifesto__toss-item {
    animation: none !important;
    opacity: 0 !important;
  }
}

.manifesto__inner {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 2.2vw, 30px);
}

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

.manifesto__eyebrow i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(167, 96, 74, 0.14);
}

.manifesto__title {
  font-family: var(--font-geist-sans);
  font-style: normal;
  /* Benton Sans Wide reads visually larger than a normal-width sans at the
     same em-size, so this clamp is intentionally smaller than a Geist-tuned
     equivalent. Keeps "From Notes to Second Skin" comfortable across 320–2560px. */
  font-size: clamp(2.4rem, 7.5vw, 6.4rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.92;
  max-width: 20ch;
  margin: 0;

  color: var(--ink-base);
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    to bottom,
    var(--ink) 0%,
    var(--ink) var(--fill-pct),
    var(--ink-base) var(--fill-pct),
    var(--ink-base) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  will-change: background-image;
}

.manifesto__title br { display: inline; }

/* Arabic glyphs at display sizes (up to 6.4 rem) run visually wider
   than Latin at the same em, so the English-tuned 20ch cap forces
   "من النوتات إلى" to wrap BEFORE the intended <br /> break —
   producing 3 lines instead of the intended 2 (see
   home.manifesto.title in js/i18n.js: "من ...النوتات... إلى<br />
   بشرة ثانية"). Widening the cap to 30ch lets the first line stay
   whole so the <br /> becomes the sole line-break point:
     Line 1: من النوتات إلى
     Line 2: بشرة ثانية
   Zero effect on English/LTR; the base 20ch cap above still applies. */
[dir="rtl"] .manifesto__title {
  max-width: 30ch;
}

.manifesto__mark {
  position: relative;
  padding: 0 0.02em;
  font-family: inherit;
  font-style: normal;
  font-weight: 700;
  display: inline-block;

  color: var(--accent-base);
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    to bottom,
    var(--accent) 0%,
    var(--accent) var(--fill-pct),
    var(--accent-base) var(--fill-pct),
    var(--accent-base) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  z-index: 0;
}

.manifesto__mark::after { content: none; }

@supports not (-webkit-background-clip: text) {
  .manifesto__title { color: var(--ink); -webkit-text-fill-color: currentColor; }
  .manifesto__mark { color: var(--accent); -webkit-text-fill-color: currentColor; }
}

.manifesto__lede {
  font-family: var(--font-geist-sans);
  font-size: clamp(0.95rem, 1.35vw, 1.15rem);
  line-height: 1.65;
  color: rgba(20, 16, 14, 0.9);
  max-width: 52ch;
  margin: 4px 0 0;
}

.manifesto__soft {
  color: rgba(20, 16, 14, 0.42);
}

.manifesto__meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  font-family: var(--font-geist-sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(20, 16, 14, 0.5);
}

.manifesto__dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(20, 16, 14, 0.35);
}

/* Laptop tier (981–1280 px) — the two display headings on the
   homepage ("From Notes to Second Skin" and "Watch it move.")
   are intentionally the largest text on the page, but the base
   clamps were pushing them to ~90–96 px at laptop widths, which
   felt over-scaled next to the ~41 px section titles nearby.
   A single shared clamp trims them ~10 % and locks them at
   IDENTICAL sizes so they read as a matched display-heading pair.
   Desktop (>1280 px) and mobile (<900 px) both keep their own
   established scales — this rule is a laptop-only correction. */
@media (min-width: 981px) and (max-width: 1280px) {
  /* NOTE: .cinema__intro h2 handled separately AFTER its base rule
     lower in the file — placing it here loses the cascade to the
     later-declared base. See the cinema-specific block below. */
  .manifesto__title { font-size: clamp(2.4rem, 5.8vw, 4.8rem); }

  /* Marquee headline (`Scent that feels ↗ Made in small lots …`)
     runs at 8vw base which pushed each word to ~96 px on laptop.
     Trim ~14 % here so the band reads as a bold running strip
     without towering over the surrounding sections. The
     surrounding .mrq__ic pills and .mrq__img thumbs are left at
     their base clamps — the ratio shift is minor (icon/word goes
     from 0.75 → 0.87) and preserves the band's rhythmic beat. */
  .mrq__word { font-size: clamp(2.8rem, 6.8vw, 6.4rem); }
}

/* Same laptop-tier trim extended to typical MacBook / mid-laptop
   widths (1281–1440 px). Without this, the display headings and
   marquee snapped back to their base clamps on 1440 px MacBooks,
   undoing the reduction for anyone browsing on those laptops.
   Values match the 981–1280 tier exactly — one visual scale from
   981 px to 1440 px. Above 1440 px is genuine wide-desktop and
   keeps the base clamps for editorial hierarchy. */
@media (min-width: 1281px) and (max-width: 1440px) {
  /* NOTE: .cinema__intro h2 handled separately AFTER its base rule
     lower in the file — see the cinema-specific block below. */
  .manifesto__title { font-size: clamp(2.4rem, 5.8vw, 4.8rem); }
  .mrq__word { font-size: clamp(2.8rem, 6.8vw, 6.4rem); }
}

@media (max-width: 900px) {
  .manifesto { padding: clamp(90px, 14vw, 140px) var(--pad); }
  .manifesto__title { font-size: clamp(2rem, 9vw, 4rem); }

  .manifesto__ing--tr {
    width: clamp(90px, 22vw, 140px);
    top: 24px;
    right: 14px;
  }
  .manifesto__ing--bl {
    width: clamp(100px, 26vw, 160px);
    bottom: 24px;
    left: 14px;
  }
}

@media (max-width: 720px) {
  .manifesto__arc,
  .manifesto__grid { display: none; }
  .manifesto__glow {
    width: 110vw;
    height: 70vw;
    filter: blur(40px);
  }
  .manifesto__ing { opacity: 0.7; }
}

@media (max-width: 480px) {
  .manifesto__ing { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .manifesto { --fill: 1; }
  .manifesto__glow { animation: 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: 1fr 1fr;
  min-height: 100vh;
}

/* ---------- 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: clamp(340px, 44vh, 440px);
  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: clamp(340px, 44vh, 440px);
}

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

.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: clamp(2.2rem, 4vw, 3.4rem);
  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: 1rem;
  line-height: 1.6;
  color: rgba(20, 16, 14, 0.72);
  max-width: 44ch;
}

.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: 18px 0;
  color: inherit;
  text-decoration: none;
  transition: padding 0.5s var(--ease);
}

.pick__link:hover {
  padding-left: 14px;
}

/* 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.5rem, 2.2vw, 2rem);
  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(1.1rem, 1.4vw, 1.35rem);
  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: 1rem;
  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(240px, 22vw, 320px);
  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__product. */
  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; }
  .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; }
}

/* ==============================================================
   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;
  /* 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);
}

.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: 38px;
  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; }

.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: clamp(44px, 5.2vw, 72px);
  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.35rem; 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); }

/* 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;
  border-bottom: 1px solid var(--line);
}
.line:last-child { border-bottom: 0; }

.line img {
  width: 58px;
  height: 74px;
  border-radius: 10px;
  object-fit: cover;
  background: #f7f2e9;
}

/* ==============================================================
   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); }

.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(240px, 34vw, 300px); }
}

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

  /* 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);
  }

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

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

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

  .shop__head { align-items: start; gap: 24px; }

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

  .hero h1 { font-size: clamp(2.6rem, 10vw, 3.4rem); }
  .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
      "Play Sound" 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; }

  .ghost-link { height: 52px; font-size: 0.68rem; }
}

/* ==============================================================
   LOADER — laptop tier (981–1280px)
   ------------------------------------------------------------
   Base loader sizing was tuned for 1440–1920px monitors:
     .loader__stage width caps at 190px (→ ~352px tall via
     aspect-ratio 140/260), .loader__num caps at 8.5rem (~136px),
     mid-row gap caps at 34px, grid padding caps at 48px.
   Total mid-column intrinsic height on a 1280px viewport ~750px,
   which is taller than a 720p laptop, so the "100%" counter was
   being clipped at the fold. Trim each piece proportionally so
   the loader fits comfortably inside 720px height.

   Everything scales through the same clamp() expressions, only
   with tighter caps — the fluid low-end still governs narrower
   laptops (say 1024px) so nothing snaps between viewports.
   ============================================================== */
@media (min-width: 981px) and (max-width: 1280px) {
  .loader__grid { padding: clamp(20px, 2.4vw, 32px); }
  .loader__brand img { height: 28px; }
  .loader__row--mid { gap: clamp(14px, 1.8vw, 22px); }
  .loader__stage { width: clamp(90px, 12vw, 140px); }
  .loader__status { font-size: 0.68rem; }
  .loader__num { font-size: clamp(3.5rem, 9vw, 6rem); }
}

/* ==============================================================
   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:
       .shop h2              — "Made with intention. Meant to be worn."
       .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. */
  .families__title h2,
  .shop h2,
  .talk-sec h2,
  .hgallery__title,
  .picks__title { font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
  /* 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: 300px; padding: 22px; gap: 14px; }
  .fam__idx { font-size: 0.58rem; padding: 5px 10px; letter-spacing: 0.24em; }
  .fam__body h3 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); }
  .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__mono {
    top: 18px;
    right: 18px;
    width: clamp(60px, 5vw, 78px);
    height: clamp(60px, 5vw, 78px);
  }
  .fam__product { top: 14px; right: 14px; width: 40%; }
  /* RTL — re-anchor at this breakpoint after the physical `right:`
     override lands, otherwise the SVG collides with the top-right
     .fam__idx pill in Arabic. */
  [dir="rtl"] .fam__mono   { right: auto; left: 18px; }
  [dir="rtl"] .fam__product { 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) {
  .families__title h2,
  .shop h2,
  .talk-sec h2,
  .hgallery__title,
  .picks__title { font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
}

/* ==============================================================
   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__wordmark-img { height: clamp(38px, 9vw, 56px); }
  .foot__wordmark-sub { letter-spacing: 0.22em; font-size: 0.58rem; }
}

.cinema {
  --cinema-p: 0;
  position: relative;
  height: 240vh;
  background: #ffffff;
  color: #000;
}

.cinema__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: block;
  background: #ffffff;
}

.cinema__grain {
  display: none;
}

.cinema__intro {
  position: absolute;
  top: clamp(80px, 12vh, 140px);
  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(2.6rem, 6.4vw, 5.2rem);
  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%;
  transform:
    translateY(calc((1 - var(--cinema-p)) * -6vh))
    scale(calc(0.32 + var(--cinema-p) * 0.68));
  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.32 + var(--cinema-p) * 0.68)));
  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;
  bottom: clamp(20px, 4vh, 44px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(0, 0, 0, 0.6);
  font-family: var(--font-geist-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: calc(1 - var(--cinema-p) * 3);
  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 (max-width: 900px) {
  .cinema {
    --cinema-p: 1;
    height: auto;
  }

  .cinema__sticky {
    position: relative;
    height: auto;
    padding: clamp(80px, 12vw, 120px) var(--pad) clamp(80px, 12vw, 120px);
  }

  .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; }
}

@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;
  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 {
  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;
}

.pvideo__rule {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--ink);
  margin-left: 12px;
  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 {
  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 24px;
  max-width: 22ch;
}

.pvideo__title em {
  font-style: normal;
  color: var(--accent);
  font-weight: 700;
  -webkit-text-fill-color: currentColor;
}

.pvideo__lede {
  max-width: 62ch;
  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 44px;
}

.pvideo__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px solid rgba(17, 17, 17, 0.08);
}

.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: 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);
}

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

.pvideo__feat-lbl {
  font-family: var(--font-geist-sans);
  font-size: 0.62rem;
  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(245, 239, 229, 0.6);
}

.pvideo__feat-name {
  font-family: var(--font-geist-sans);
  font-size: 0.94rem;
  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: #e5b898;
}

.pvideo__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;
}

.pvideo__feat:hover .pvideo__feat-arrow {
  background: #fff;
  color: var(--ink);
  transform: translate(2px, -2px);
}

@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__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 (filters + sort) ------------------------------- */
.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  /* Same rail as .pvideo__inner and .collection__grid — perfect alignment
     with nav bar edges on every viewport. */
  max-width: calc(var(--section-max) + 2 * var(--section-pad));
  margin: 0 auto;
  padding: clamp(24px, 3vw, 40px) var(--section-pad) clamp(24px, 3vw, 36px);
  background: #fff;
}

/* Filter pill spans the full available width in the toolbar row. On narrow
   viewports where the chips exceed available width, the pill becomes
   horizontally swipe-scrollable — native touch on mobile, 2-finger swipe on
   trackpads — with the scrollbar visually hidden. */
.shop-toolbar__filters {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px) saturate(1.1);
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.03);

  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.shop-toolbar__filters::-webkit-scrollbar {
  display: none;
}

.shop-toolbar .chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(17, 17, 17, 0.65);
  font-family: var(--font-geist-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: 0.28s var(--ease);
  cursor: pointer;
  flex-shrink: 0;
  scroll-snap-align: start;
  white-space: nowrap;
}

.shop-toolbar .chip:hover {
  color: var(--ink);
}

.shop-toolbar .chip.is-on {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 4px 14px -6px rgba(17, 17, 17, 0.28);
}

/* Count badge inside toolbar chips (currently only rendered on "All").

   The generic `.chip i` rule elsewhere on the site styles a 6×6 accent dot
   (used decoratively in the hero pill). Inside the toolbar we're rendering
   a numeric count instead — so we need to fully reset the dot geometry
   (width/height/border-radius/background/box-shadow) that would otherwise
   leak through, then re-style as a proper inline count badge. */
.shop-toolbar .chip i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  margin-left: 2px;
  width: auto;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.08);
  box-shadow: none;
  color: rgba(17, 17, 17, 0.6);
  font-family: var(--font-geist-sans);
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.shop-toolbar .chip.is-on i {
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
}

.shop-toolbar__sort {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--font-geist-sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

/* Narrow screens: filter pill takes the full row on its own; sort drops
   below and left-aligns so it doesn't hang alone on the right edge. */
@media (max-width: 640px) {
  .shop-toolbar__filters {
    flex: 1 1 100%;
  }
  .shop-toolbar__sort {
    margin-left: 0;
    flex: 1 1 100%;
    justify-content: flex-start;
  }
}

.shop-toolbar__select {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.shop-toolbar__select select {
  appearance: none;
  padding: 12px 44px 12px 20px;
  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.06em;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.25s;
}

.shop-toolbar__select select:hover {
  border-color: rgba(17, 17, 17, 0.28);
}

.shop-toolbar__caret {
  position: absolute;
  right: 16px;
  color: rgba(17, 17, 17, 0.5);
  pointer-events: none;
  font-size: 0.7rem;
}

/* -- 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 {
  padding: 0 0 clamp(96px, 12vw, 160px);
  background: #fff;
}

.collection__grid {
  display: grid;
  /* Base rule targets ultra-wide displays (≥1600px). All lower breakpoints
     narrow via max-width media queries below (mobile-last cascade). */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 28px);
  max-width: calc(var(--section-max) + 2 * var(--section-pad));
  margin: 0 auto;
  padding: 0 var(--section-pad);
}

/* Grid column ladder:
     ≥1600px       → 5 cols (ultra-wide displays)
     1200–1599px  → 4 cols (laptop range; 1280px shows 4 cards per spec)
      900–1199px  → 3 cols
      600–899px   → 2 cols
      <600px       → 1 col
   Each card target width sits near 300–340px at every tier so image,
   title, and CTA never feel cramped. */
@media (max-width: 1599px) {
  .collection__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1199px) {
  .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);
}

.pcard__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: transparent;
  isolation: isolate;
}

.pcard__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.06) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.pcard:hover .pcard__media::after { opacity: 1; }

.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 {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 3;
  font-family: var(--font-geist-sans);
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 700;
  color: rgba(17, 17, 17, 0.65);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(8px);
  border-radius: 4px;
  transition: transform 0.45s var(--ease), color 0.3s;
}

.pcard:hover .pcard__idx {
  color: var(--ink);
  transform: translateY(-2px);
}

.pcard__tag {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 3;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-geist-sans);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  transition: transform 0.45s var(--ease);
}

.pcard:hover .pcard__tag {
  transform: translateY(-2px);
}

.pcard__body {
  padding: 20px 2px 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pcard__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.pcard__row h3 {
  font-family: var(--font-geist-sans);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
  margin: 0;
  position: relative;
  padding-bottom: 4px;
  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: 1.02rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.pcard__family {
  font-family: var(--font-geist-sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
  margin: 6px 0 4px;
}

.pcard__notes {
  font-family: var(--font-geist-sans);
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(17, 17, 17, 0.6);
  margin: 0 0 16px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.5em * 2);
}

.pcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid rgba(17, 17, 17, 0.08);
}

.pcard__add {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  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__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
}

.pyramid__tier {
  position: relative;
  padding: 32px;
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 6px;
  transition: border-color 0.35s var(--ease), transform 0.4s var(--ease);
}

.pyramid__tier:hover {
  border-color: rgba(17, 17, 17, 0.24);
  transform: translateY(-3px);
}

.pyramid__idx {
  position: absolute;
  top: 20px;
  right: 24px;
  font-family: var(--font-geist-sans);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.35);
}

.pyramid__tier h3 {
  font-family: var(--font-geist-sans);
  /* Trimmed 1.05 → 0.95 rem to sit visibly below the pyramid section
     title (26 px). Reads as a proper tier label at ~15 px. */
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 14px;
  color: var(--ink);
}

.pyramid__tier ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pyramid__tier li {
  position: relative;
  padding-left: 18px;
  font-family: var(--font-geist-sans);
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(17, 17, 17, 0.75);
}

.pyramid__tier li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 10px;
  height: 1px;
  background: var(--ink);
  opacity: 0.55;
}

/* -- 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);
}

.rcard__media {
  aspect-ratio: 4 / 5;
  background: transparent;
  overflow: hidden;
  display: block;
  transition: border-color 0.35s var(--ease);
}

.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);
}

.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 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;
}

.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 {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: 0.25s var(--ease);
}

.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 {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding-top: 40px;
    padding-bottom: 28px;
  }
  .shop-toolbar__filters {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .pyramid__grid {
    grid-template-columns: 1fr;
  }
  .cbox__grid {
    grid-template-columns: 1fr;
  }
  .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); }
  .pyramid__tier { padding: 26px; }

  /* Rails — tighter min-track so tablets show 3 cards comfortably
     (was locked to 2 with 220 px min + 32 px gutter at ~720 vw). */
  .rail {
    padding: clamp(48px, 7vw, 72px) clamp(20px, 4vw, 40px);
  }
  /* 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 {
    /* Slightly larger --pvideo-gap in this range so the video breathes on
       mid-desktop viewports. This flows to .pvideo__inner margin-top too,
       preserving the symmetric-margin invariant. */
    --pvideo-gap: clamp(120px, 9vw, 140px);
    padding-bottom: 56px;
  }
  /* Hero typography — trimmed for laptop / mid-desktop screens.
     The previous override boosted the title to clamp(3.2rem, 4.2vw, 4.2rem)
     which read as display-scale ad copy on 1280–1440 px laptops (54–60 px).
     Reduced ~35% so "THE COLLECTION." carries editorial rank without
     dominating the fold. Supporting elements (eyebrow, lede, meta,
     feat pill) tighten proportionally so the hero scales as one system —
     shrinking only the title would leave the meta row visually heavier
     than the heading and break the informational hierarchy.
     Line-height / letter-spacing / max-width inherit from the base rule
     — only font-size is normalized here. */
  .pvideo__title {
    font-size: clamp(2rem, 2.8vw, 3rem);
  }
  .pvideo__eyebrow {
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    margin-bottom: 26px;
  }
  .pvideo__lede {
    font-size: clamp(0.9rem, 1vw, 1.02rem);
    margin-bottom: 36px;
  }
  .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(18px, 1.6vw, 26px);
  }
  /* Tighten card body copy so long product names (e.g. "Shaghaf Amber
     Infusion") stay balanced against price and CTA at both 4-col and
     5-col tiers within this range. */
  .pcard__row h3 { font-size: 1.15rem; }
  .pcard__price { font-size: 0.94rem; }
  .pcard__notes { font-size: 0.78rem; }
  .pcard__add {
    padding: 9px 14px;
    font-size: 0.58rem;
    letter-spacing: 0.2em;
  }
  .pcard__more { font-size: 0.6rem; }
}

/* ==============================================================
   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__head h1 { font-size: clamp(2rem, 3.4vw, 3rem); }
  .cart__lede { font-size: 0.92rem; }

  .cline__row h3 { font-size: 1.02rem; }
  .cline__price { font-size: 0.94rem; }
  /* Small-caps pills — floor at 0.64 rem (~10.2 px) so the
     0.2em tracking stays legible. Anything smaller drops
     below the enterprise readability threshold. */
  .cline__meta   { font-size: 0.64rem; }
  .cline__qty    { font-size: 0.64rem; }
  .cline__remove { font-size: 0.64rem; }

  .cart__summary h2 { font-size: 0.92rem; }
  .cart__totals > div { font-size: 0.84rem; }
  /* .cart__totals-line parent has 1.05rem !important at base — leave
     it, since dt/dd own their sizes and inheritance doesn't reach
     unstyled text nodes here. Override only the children. */
  .cart__totals-line dt { font-size: 0.64rem; }
  .cart__totals-line dd { font-size: 1.1rem; }
  .cart__hint { font-size: 0.76rem; }

  .cart__empty h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
  .cart__empty p  { font-size: 0.9rem; }
}

@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;
}

.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 {
    height: 36px;
    padding: 0 4px 0 10px;
    gap: 8px;
    font-size: 0.66rem;
    letter-spacing: 0.12em;
  }
  .nav__bag b {
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    font-size: 0.68rem;
  }
  .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(2.2rem, 11vw, 2.8rem);
    margin-bottom: 14px;
  }
  .hero__lede { font-size: 0.94rem; }
  .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; }
  .ghost-link { height: 44px; font-size: 0.66rem; gap: 8px; }

  /* Sound pill — smaller and closer to the edge on tiny viewports. */
  .hero__sound {
    padding: 8px 14px 8px 12px;
    font-size: 0.62rem;
    gap: 8px;
    letter-spacing: 0.14em;
  }

  /* -- Marquee ------------------------------------------------ */
  .mrq { padding: clamp(24px, 5vw, 40px) 0; }
  .mrq__track { gap: 22px; padding-right: 22px; }
  .mrq__word { font-size: clamp(2rem, 10vw, 3rem); }
  .mrq__ic {
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
  }
  .mrq__img {
    width: 96px;
    height: 64px;
  }

  /* -- Shop rail --------------------------------------------- */
  .shop { padding: 72px var(--pad) 64px; }
  .shop__head { gap: 20px; padding-bottom: 32px; }
  .shop h2,
  .talk-sec h2 { font-size: clamp(1.75rem, 7.5vw, 2.2rem); line-height: 1.12; }
  .shop__intro { font-size: 0.92rem; }
  .shop__all { font-size: 0.68rem; letter-spacing: 0.16em; }
  .shop__rail {
    --card-w: 82vw;
    gap: 16px;
    margin-top: 32px;
    padding-bottom: 32px;
  }

  .card__meta { padding: 18px 18px 18px; gap: 6px; }
  .card__family { font-size: 0.56rem; letter-spacing: 0.2em; }
  .card h3 { font-size: 1rem; }
  .card__price { font-size: 0.95rem; }
  .card__notes { font-size: 0.78rem; }
  .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; }

  /* -- Families ---------------------------------------------- */
  .families { padding: 72px var(--pad) 64px; }
  .families__head { gap: 20px; padding-bottom: 32px; }
  .families__title h2 { font-size: clamp(1.75rem, 7.5vw, 2.2rem); }
  .families__intro { font-size: 0.9rem; }
  .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: 260px;
    padding: 20px;
    gap: 12px;
    border-radius: 20px;
  }
  .fam__idx {
    font-size: 0.54rem;
    padding: 5px 10px;
    letter-spacing: 0.22em;
  }
  .fam__body { max-width: 66%; }
  .fam__body h3 { font-size: 1.5rem; }
  .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__product { width: 34%; top: 14px; right: 14px; }
  /* RTL at tightest viewport — mirror the product image anchor so
     it doesn't share the top-right corner with the .fam__idx pill. */
  [dir="rtl"] .fam__product { right: auto; left: 14px; }

  /* -- Horizontal gallery ------------------------------------ */
  .hgallery__sticky { padding: 60px 0 40px; }
  .hgallery__head { padding: 0 var(--pad) 28px; gap: 16px; }
  .hgallery__title { font-size: clamp(1.9rem, 8vw, 2.4rem); 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; }

  /* -- Manifesto --------------------------------------------- */
  .manifesto { padding: 80px var(--pad); }
  .manifesto__title { font-size: clamp(1.85rem, 9vw, 2.6rem); }
  .manifesto__lede { font-size: 0.92rem; }
  .manifesto__soft { font-size: 0.86rem; }
  .manifesto__eyebrow {
    font-size: 0.6rem;
    letter-spacing: 0.24em;
    padding: 6px 12px;
  }
  .manifesto__meta-txt {
    font-size: 0.58rem;
    letter-spacing: 0.2em;
  }
  .manifesto__ing--tr {
    width: 78px;
    top: 16px;
    right: 8px;
  }
  .manifesto__ing--bl {
    width: 88px;
    bottom: 16px;
    left: 8px;
  }

  /* -- 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: clamp(1.75rem, 8vw, 2.4rem); line-height: 1.05; }
  .picks__lede { font-size: 0.88rem; line-height: 1.55; max-width: 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 chips + sort) ------------------------
     Filter row is a horizontally scrollable pill on mobile. The visible
     rounded border of the pill contains the scroll, and the last chip
     naturally cuts off at the right edge — that partial-visibility is
     the standard mobile scroll affordance (same pattern as Instagram
     Stories, TikTok filters, native chip UIs). No mask fade because it
     was fading the pill's own border on the right edge and made the
     chips look like they were escaping the container. */
  .shop-toolbar {
    padding: 28px var(--section-pad) 24px;
    gap: 14px 16px;
  }
  /* Filter pill: constrained to 95% of the toolbar row width so it never
     touches the section edges; native horizontal scroll on overflow with
     the scrollbar visually hidden (webkit/gecko/edge all covered by the
     base .shop-toolbar__filters rule higher up in the file). */
  .shop-toolbar__filters {
    padding: 3px;
    max-width: 95%;
  }
  .shop-toolbar .chip {
    min-height: 38px;
    padding: 0 14px;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
  }
  .shop-toolbar .chip i {
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.56rem;
  }
  .shop-toolbar__sort {
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    gap: 10px;
  }
  .shop-toolbar__select select {
    padding: 10px 36px 10px 16px;
    font-size: 0.66rem;
    letter-spacing: 0.04em;
  }
  .shop-toolbar__caret { right: 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: 16px 2px 4px; gap: 6px; }
  .pcard__row { gap: 12px; }
  .pcard__row h3 { font-size: 1.15rem; padding-bottom: 3px; }
  .pcard__price { font-size: 0.96rem; }
  .pcard__family { font-size: 0.56rem; letter-spacing: 0.22em; margin: 4px 0 2px; }
  .pcard__notes { font-size: 0.78rem; margin: 0 0 12px; }
  .pcard__idx { font-size: 0.56rem; padding: 5px 8px; letter-spacing: 0.22em; }
  .pcard__tag { font-size: 0.52rem; padding: 5px 10px; letter-spacing: 0.2em; }

  /* 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: 12px;
  }
  .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 { padding: 22px; border-radius: 4px; }
  .pyramid__idx { top: 18px; right: 20px; font-size: 0.55rem; letter-spacing: 0.2em; }
  .pyramid__tier h3 { font-size: 0.95rem; margin-bottom: 12px; }
  .pyramid__tier li { font-size: 0.8rem; padding-left: 16px; }
  .pyramid__tier li::before { top: 10px; width: 8px; }

  /* Recently viewed / Popular pairings rails — grid already auto-fills.
     Trim padding + heading so rails don't dominate the mobile page. */
  .rail { padding: 48px var(--section-pad); }
  .rail__head { margin-bottom: 22px; }
  /* Aligned with trimmed ≤ 720 rail clamp (max 1.35 rem). */
  .rail__head h2 { font-size: clamp(1rem, 4.6vw, 1.2rem); }
  .rail__track {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 18px;
  }
  .rcard__meta { padding-top: 12px; }
  .rcard__meta h3 { font-size: 0.86rem; }
  .rcard__meta p { font-size: 0.56rem; letter-spacing: 0.18em; margin-bottom: 8px; }
  .rcard__price { font-size: 0.84rem; }

  /* -- Footer ------------------------------------------------ */
  .foot { padding: 56px var(--section-pad) 80px; }
  .foot__top { gap: 36px; padding-bottom: 36px; }
  .foot__col--brand { gap: 18px; }
  .foot__logo img { height: 32px; }
  .foot__lede { font-size: 0.82rem; max-width: none; }
  .foot__hd { font-size: 0.92rem; }
  .foot__hd--sm { font-size: 0.82rem; }
  .foot__col--nav a { font-size: 0.86rem; }

  /* Newsletter row: allow the button to shrink but keep both on one line.
     If email address is long the input flexes; button retains its tap area. */
  .foot__news { padding: 4px 4px 4px 12px; max-width: 100%; }
  .foot__news input { font-size: 0.82rem; }
  .foot__news input::placeholder { font-size: 0.8rem; }
  .foot__news button {
    padding: 0 8px 0 14px;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    gap: 8px;
    min-height: 36px;
  }
  .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-img { height: 40px; }
  .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;
  }
}

/* ==============================================================
   HERO CTA — hide secondary "Explore signatures" link < 500 px
   --------------------------------------------------------------
   On sub-500 px viewports the primary "Shop the line" button is
   sufficient; the secondary ghost link points to the same #shop
   target, so removing it declutters the hero without cost.
   Scoped to `.hero__cta` to avoid affecting any future reuse of
   `.ghost-link` elsewhere in the app.
   ============================================================== */
@media (max-width: 499.98px) {
  .hero__cta .ghost-link { display: none; }
}

/* ==============================================================
   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 { padding: 0 3px 0 6px; gap: 6px; }
  .nav__bag > span { display: none; }
  .nav__bag b { min-width: 22px; height: 22px; font-size: 0.66rem; }
  .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(2rem, 11.5vw, 2.5rem); }
  .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; }
  .ghost-link { height: 40px; font-size: 0.62rem; }
  .hero__sound {
    right: var(--section-pad);
    bottom: 20px;
    padding: 7px 12px 7px 10px;
    font-size: 0.58rem;
  }
  /* RTL: re-anchor + re-mirror the padding 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);
    padding: 7px 10px 7px 12px;
  }

  /* Marquee */
  .mrq__word { font-size: clamp(1.75rem, 11vw, 2.6rem); }
  .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,
  .families__title h2,
  .picks__title,
  .hgallery__title,
  .cinema__intro h2,
  .manifesto__title { font-size: clamp(1.6rem, 8.5vw, 2rem); }

  .shop__rail { --card-w: 86vw; gap: 14px; }
  .card__meta { padding: 16px; }
  .card h3 { font-size: 0.95rem; }
  .card__notes { font-size: 0.74rem; }
  .card__go { width: 36px; height: 36px; }

  /* Families */
  .fam { min-height: 240px; padding: 18px; border-radius: 18px; }
  .fam__body h3 { font-size: 1.35rem; }
  .fam__desc { font-size: 0.74rem; }
  .fam__product { 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; }

  /* Manifesto — decorative SVGs are pure eye-candy on this size,
     shrink further so they never obscure the wordmark. */
  .manifesto { padding: 64px var(--pad); }
  .manifesto__ing--tr { width: 64px; top: 12px; right: 6px; opacity: 0.5; }
  .manifesto__ing--bl { width: 72px; bottom: 12px; left: 6px; opacity: 0.5; }

  /* 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__top { gap: 32px; }
  .foot__logo img { height: 30px; }
  .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-img { height: 34px; }
  .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; }
  .shop-toolbar .chip {
    min-height: 36px;
    padding: 0 12px;
    font-size: 0.58rem;
    letter-spacing: 0.12em;
  }
  .shop-toolbar__select select {
    padding: 9px 32px 9px 14px;
    font-size: 0.62rem;
  }

  .collection__grid { gap: 26px; padding: 0 var(--section-pad); }
  .pcard__row h3 { font-size: 1.05rem; }
  .pcard__price { font-size: 0.9rem; }
  .pcard__notes { font-size: 0.74rem; margin-bottom: 10px; }
  .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 { padding: 18px; }
  .pyramid__tier h3 { font-size: 0.92rem; margin-bottom: 12px; }
  .pyramid__tier li { font-size: 0.78rem; padding-left: 14px; }

  .rail { padding: 40px var(--section-pad); }
  /* Step below ≤ 480 (max 1.2 rem). */
  .rail__head h2 { font-size: clamp(0.95rem, 4.4vw, 1.1rem); }
  .rail__track {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
  }
  .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); }
}