/* ==========================================================================
   oud-noir — "Apothecary at Dusk" brand layer over modern-retail.

   Ported from the Google Stitch export
   (docs/templates/stitch_16_oud_noir_e_commerce_store — the "Apothecary at
   Dusk" DESIGN.md is the design-system source).
   The design system: a deep aubergine canvas, smoked amber used for 1px
   structural rules + interactive elements + prices, blush-parchment ink,
   ZERO shadows (depth comes from amber keylines + tonal layering) and
   perfectly sharp corners. Unlike aurume's restrained gold accent, this
   design's amber rule is the PRIMARY decorative device — nearly every major
   section and grid cell is separated by a 1px amber line (DESIGN.md
   "Layout & Spacing" + "Components").

   This stylesheet has two jobs:
     (a) style oud-noir's OWN sections (on-* — header, featured, arrivals,
         scent-notes, categories, newsletter);
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
         base neutral tokens at the aubergine palette, flattening every
         radius and shadow, and drawing the amber keyline structure. This is
         the only reason shop / PDP / cart / checkout / account / blog turn
         dark without a single page override.

   Everything is scoped under `body.on-theme` and reads the 5 customizer
   tokens (--bs-primary, --bs-primary-rgb, --ll-accent, --ll-font-headings,
   --ll-font-body, --ll-btn-radius) with theme.json-default fallbacks, so the
   customizer + live preview keep working: change the primary colour and
   every amber surface follows. The canvas/surface/ink triad below is
   deliberately NOT bound to a customizer token (there is no "ink" or
   "canvas" token in the 5-token contract) — they are CSS literals lifted
   straight from DESIGN.md, exactly like aurume's charcoal/ivory pair.

   Contrast notes (measured against the aubergine canvas #231523):
     - amber #b8834a on aubergine ≈ 4.85:1 (passes AA for text/links).
     - white on an amber #b8834a FILL ≈ 3.4:1 (fails AA) — so every
       amber-filled surface (buttons, badges, hover states on the card's
       round overlay controls) prints DEEP AUBERGINE ink instead, per
       DESIGN.md's own component spec ("Primary buttons are filled with
       Smoked Amber with Deep Aubergine text").
   ========================================================================== */

body.on-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --on-amber: var(--bs-primary, #b8834a);
    --on-amber-rgb: var(--bs-primary-rgb, 184, 131, 74);
    --on-amber-bright: var(--ll-accent, #f7bb7c);
    --on-font-head: var(--ll-font-headings, "Playfair Display"), Georgia, serif;
    --on-font-body: var(--ll-font-body, "Inter"), system-ui, -apple-system, sans-serif;

    /* Apothecary at Dusk palette (DESIGN.md prose + YAML; ink follows the
       prose "Blush Parchment #F3E9DD", NOT the YAML's on-surface #f3dcf0 —
       the rendered export uses the prose value). Canvas/surface/ink are
       literals by design (CLAUDE.md: never bound to a customizer token). */
    --on-canvas: #231523;         /* Deep Aubergine — the main page surface */
    --on-surface-deep: #1c0f1c;   /* darker surface — recessed bands (trust strip, footer) */
    --on-surface-mid: #291b29;    /* lifted band / hover fill (new-arrivals, journal, card hover) */
    --on-surface-low: #241725;    /* placeholder / media fills */
    --on-ink: #f3e9dd;            /* Blush Parchment — primary text */
    --on-muted: #cec4ca;          /* DESIGN.md on-surface-variant */
    --on-soft: #978e94;           /* DESIGN.md outline */
    --on-ink-on-amber: #231523;   /* text printed on an amber FILL (button/badge/hover) */
    /* --on-amber is calibrated for amber-ON-DARK (5.31:1 on the aubergine
       canvas) — printing the SAME token on the light parchment scent-notes
       band (below) measures 2.74:1 and fails AA. This darkened sibling is
       for that one light-on-dark inversion ONLY: 4.66:1 on #f3e9dd. */
    --on-amber-ink: #8a5f2e;

    /* The amber "thin rule" is the design's primary structural device, so —
       unlike aurume's muted line — it tracks the primary_color token. A dim
       (40%) tint carries generic chrome (form borders, table rows, filter
       dividers); the full-strength tone marks the design's OWN keylines
       (header, promo frames, grid dividers, card borders). */
    --on-line: rgba(var(--on-amber-rgb), 0.4);
    --on-line-strong: var(--on-amber);

    /* Re-point the inherited base neutrals at the aubergine palette so every
       inherited mr-* surface (bands, borders, fills, muted text) follows. */
    --mr-ink: var(--on-ink);
    --mr-muted: var(--on-muted);
    --mr-soft: var(--on-soft);
    --mr-surface: var(--on-canvas);
    --mr-band: var(--on-surface-deep);
    --mr-band-alt: var(--on-surface-mid);
    --mr-fill: var(--on-surface-low);
    --mr-border: var(--on-line);
    --mr-border-strong: var(--on-line-strong);
    --mr-radius: 0;
    --mr-gold: var(--on-amber-bright);
    --mr-shadow: none;

    background-color: var(--on-canvas);
    color: var(--on-ink);
    font-family: var(--on-font-body);
    font-size: 16px;
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Bootstrap dark-surface tokens (adversarial-review finding #1, BLOCKER).

   The --mr-* re-point above — plus app.css now reading var(--mr-surface)
   instead of a literal #fff on .mr-header/.form-control/.form-select/
   .mr-search input:focus/.mr-page/.mr-step__dot/.mr-acct-link:hover/
   .mr-panel — covers every INHERITED mr-* surface. But Bootstrap's OWN
   components read Bootstrap's OWN custom properties, which nothing above
   ever touches, so they stayed Bootstrap's stock light-mode values:
     - the quick-view modal's `.modal-content` (theme::partials.quick-view-body
       — product name + price both print in var(--on-ink), i.e. parchment)
       sat on Bootstrap's default white --bs-modal-bg — the same ~1.2:1
       failure documented for the mr-* surfaces above;
     - storefront::shared/reviews.blade.php's "Write a review" `.card`
       (`.card-body` text) sat on the same white --bs-card-bg;
     - storefront::shared/product-facets.blade.php's `h6.bg-light` facet
       headings sat on Bootstrap's near-white --bs-light-rgb.
   None of these partials are theme-owned (CLAUDE.md: themes physically
   cannot fork them), so the only fix available here is re-pointing the
   Bootstrap tokens they read.

   Fix: re-point Bootstrap's own root tokens at the aubergine palette so any
   Bootstrap-native surface turns dark for free, plus explicit .modal-content/
   .card/.bg-light rules so the fix doesn't depend on Bootstrap's internal
   derivation chain (--bs-card-bg/--bs-modal-bg default to var(--bs-body-bg)
   inside Bootstrap's OWN .card/.modal-content rules — reading --bs-body-bg
   alone would already cascade through, but every token is set explicitly
   below for clarity).

   Measured (App\Support\Theming\ContrastChecker::ratio, scratchpad script,
   never committed):
     - parchment ink #f3e9dd on --on-surface-mid #291b29  = 13.65:1
     - parchment ink #f3e9dd on --on-surface-low #241725  = 14.30:1
     - parchment ink #f3e9dd on --on-canvas    #231523    = 14.56:1
   All three clear WCAG AA (4.5:1) by a wide margin, so the split between
   --on-surface-mid (cards/modal/bg-light — a "lifted" tone, matching
   .mr-card:hover's existing use of the same variable) and --on-surface-low
   (tertiary — barely lifted, closer to canvas) is about visual hierarchy,
   not legibility. */
body.on-theme {
    --bs-body-bg: var(--on-canvas);
    --bs-body-color: var(--on-ink);
    --bs-modal-bg: var(--on-surface-mid);
    --bs-modal-color: var(--on-ink);
    --bs-card-bg: var(--on-surface-mid);
    --bs-card-color: var(--on-ink);
    --bs-secondary-bg: var(--on-surface-mid);
    --bs-tertiary-bg: var(--on-surface-low);
    --bs-emphasis-color: var(--on-ink);
    --bs-border-color: var(--on-line);
    /* .bg-light reads --bs-light-rgb, not --bs-secondary-bg/--bs-tertiary-bg —
       #291b29 (--on-surface-mid) as an r,g,b triplet. */
    --bs-light-rgb: 41, 27, 41;
}

body.on-theme .modal-content {
    background-color: var(--on-surface-mid);
    color: var(--on-ink);
}

body.on-theme .card {
    background-color: var(--on-surface-mid);
    color: var(--on-ink);
    border-color: var(--on-line);
}

body.on-theme .bg-light {
    /* Bootstrap's own rule carries !important on this declaration; match it
       rather than relying solely on the --bs-light-rgb re-point above. */
    background-color: var(--on-surface-mid) !important;
}

/* --------------------------------------------------------------------------
   Shape discipline — DESIGN.md: zero corner radius, zero shadows. The two
   round overlay controls on the product card are exempt (see the product
   card section below) so the wishlist heart stays circular for signed-in
   shoppers (it is a <button>, unlike the guest <a>).
   -------------------------------------------------------------------------- */
body.on-theme .mr-card,
body.on-theme .mr-card__media,
body.on-theme .mr-btn,
body.on-theme .mr-promo,
body.on-theme .mr-promo__img,
body.on-theme .mr-tile,
body.on-theme .mr-icon-btn,
body.on-theme .mr-article__media,
body.on-theme .form-control,
body.on-theme .form-select,
body.on-theme .dropdown-menu,
body.on-theme .offcanvas,
body.on-theme img,
body.on-theme input,
body.on-theme select,
body.on-theme textarea,
body.on-theme button {
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.on-theme .mr-card__wish,
body.on-theme .mr-card__quickview {
    border-radius: 9999px !important;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
body.on-theme h1,
body.on-theme h2,
body.on-theme h3,
body.on-theme h4,
body.on-theme h5,
body.on-theme h6,
body.on-theme .mr-display,
body.on-theme .mr-logo {
    font-family: var(--on-font-head);
    font-weight: 400;
    color: var(--on-ink);
    letter-spacing: -0.02em;
}

body.on-theme .mr-display {
    font-size: clamp(2rem, 3.4vw, 4rem);
    line-height: 1.125;
}

/* DESIGN.md label-caps is 0.15em, but most eyebrows in the exported markup
   override it to 0.3-0.4em (the render wins — see scent-notes for its own
   0.4em variant). */
body.on-theme .mr-eyebrow,
body.on-theme .on-eyebrow {
    font-family: var(--on-font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--on-amber-bright);
}

body.on-theme a {
    color: var(--on-ink);
}

body.on-theme a:hover {
    color: var(--on-amber-bright);
}

/* A quiet tracked keyline link ("Browse All") */
body.on-theme .on-keyline-link {
    font-family: var(--on-font-body);
    font-size: 0.6875rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--on-amber-bright);
    text-decoration: none;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid rgba(var(--on-amber-rgb), 0.55);
    transition: border-color 0.25s ease, color 0.25s ease;
}

body.on-theme .on-keyline-link:hover {
    color: var(--on-ink);
    border-bottom-color: var(--on-amber-bright);
}

/* --------------------------------------------------------------------------
   Buttons & form controls — amber fill, aubergine text, uppercase, tracked.
   -------------------------------------------------------------------------- */
body.on-theme .mr-btn,
body.on-theme .mr-btn--primary,
body.on-theme .on-btn {
    font-family: var(--on-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 1rem 2.5rem;
    border: 1px solid transparent;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* White-on-amber measures ~3.4:1 (fails AA) — DESIGN.md's own component spec
   prints deep aubergine ink on every amber fill instead (~4.85:1). */
body.on-theme .mr-btn--primary,
body.on-theme .btn-primary {
    background-color: var(--on-amber);
    border-color: var(--on-amber);
    color: var(--on-ink-on-amber);
}

body.on-theme .mr-btn--primary:hover,
body.on-theme .btn-primary:hover,
body.on-theme .btn-primary:focus,
body.on-theme .btn-primary:active {
    background-color: var(--on-amber-bright);
    border-color: var(--on-amber-bright);
    color: var(--on-ink-on-amber);
}

/* White-on-amber survives on every OTHER inherited surface that hardcodes
   `color: #fff` over the amber --bs-primary fill and wasn't covered by the
   .mr-btn--primary/.btn-primary fix above: the mini-cart's cart-count
   bubble (.mr-badge, rendered by this theme's own header), the active
   pagination pill, the account-initial avatar, the active account-nav link,
   and the footer social icon's hover fill. Same measured failure (3.29:1)
   and same fix — aubergine ink instead of white (5.31:1, identical to the
   button treatment above, since it is the same amber fill). */
body.on-theme .mr-badge,
body.on-theme .mr-page.is-active,
body.on-theme .mr-acct-avatar,
body.on-theme .mr-acct-link.is-active {
    color: var(--on-ink-on-amber);
}

/* Ghost button ("The Scent Guide") — amber keyline, amber text, a faint
   amber wash on hover (matches the export's hover:bg-amber-accent/10). */
body.on-theme .mr-btn--outline,
body.on-theme .on-btn {
    background-color: transparent;
    border-color: var(--on-amber);
    color: var(--on-amber-bright);
}

body.on-theme .mr-btn--outline:hover,
body.on-theme .on-btn:hover {
    background-color: var(--on-amber);
    color: var(--on-ink-on-amber);
}

body.on-theme .mr-btn--on-dark {
    background-color: transparent;
    border-color: var(--on-amber);
    color: var(--on-amber-bright);
}

body.on-theme .mr-btn--on-dark:hover {
    background-color: rgba(var(--on-amber-rgb), 0.12);
    color: var(--on-amber-bright);
}

body.on-theme .form-control,
body.on-theme .form-select {
    background-color: var(--on-surface-low);
    border: 1px solid var(--on-line);
    color: var(--on-ink);
}

/* Bootstrap's caret is a background-image with a hard-coded dark stroke
   (#343a40) — invisible on this aubergine field. Re-draw it in parchment. */
body.on-theme .form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f3e9dd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

body.on-theme .form-control::placeholder {
    color: var(--on-soft);
}

body.on-theme .form-control:focus,
body.on-theme .form-select:focus {
    background-color: var(--on-surface-low);
    border-color: var(--on-amber);
    color: var(--on-ink);
    box-shadow: none !important;
}

body.on-theme .dropdown-menu {
    background-color: var(--on-surface-mid);
    border: 1px solid var(--on-line);
}

body.on-theme .dropdown-item {
    color: var(--on-ink);
}

body.on-theme .dropdown-item:hover,
body.on-theme .dropdown-item:focus {
    background-color: var(--on-surface-low);
    color: var(--on-amber-bright);
}

body.on-theme .offcanvas {
    background-color: var(--on-canvas);
    color: var(--on-ink);
}

body.on-theme .btn-close {
    filter: invert(1) grayscale(1) brightness(1.6);
}

body.on-theme .mr-divider {
    border-color: var(--on-line);
}

/* --------------------------------------------------------------------------
   Announcement band + header (split nav around a centered wordmark)
   -------------------------------------------------------------------------- */
body.on-theme .on-announce {
    background-color: var(--on-canvas);
    color: var(--on-amber-bright);
    border-bottom: 1px solid var(--on-line-strong);
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    text-align: center;
    padding: 0.55rem 1rem;
}

body.on-theme .on-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: rgba(28, 15, 28, 0.94);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--on-line-strong);
}

body.on-theme .on-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
}

body.on-theme .on-header__side {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex: 1 1 0;
}

body.on-theme .on-header__side--end {
    justify-content: flex-end;
}

body.on-theme .on-logo {
    font-family: var(--on-font-head);
    font-size: 1.9rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    padding-left: 0.35em; /* optical centering against the tracked right edge */
}

body.on-theme .on-logo img {
    max-height: 44px;
    width: auto;
}

body.on-theme .on-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
}

body.on-theme .mr-nav-link {
    font-family: var(--on-font-body);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--on-muted);
    background: transparent;
    border: 0;
    text-decoration: none;
    transition: color 0.25s ease;
}

body.on-theme .mr-nav-link:hover,
body.on-theme .mr-nav-link.is-active {
    color: var(--on-amber-bright);
}

body.on-theme .mr-icon-btn {
    color: var(--on-ink);
    background: transparent;
    border: 0;
}

body.on-theme .mr-icon-btn:hover {
    color: var(--on-amber-bright);
}

body.on-theme .mr-icon-btn svg {
    width: 22px;
    height: 22px;
}

/* --------------------------------------------------------------------------
   Hero (inherited markup — full-bleed image + overlay + copy). The overlay
   is RE-TINTED in aubergine, never removed — it is the only thing keeping
   the parchment <h1> readable over an arbitrary merchant photo.
   -------------------------------------------------------------------------- */
body.on-theme .mr-hero__overlay {
    background: linear-gradient(90deg, rgba(28, 15, 28, 0.86) 0%, rgba(28, 15, 28, 0.5) 48%, rgba(28, 15, 28, 0.14) 100%);
}

body.on-theme .mr-hero__copy h1,
body.on-theme .mr-hero__copy .mr-display {
    color: var(--on-ink);
}

/* Base hardcodes the hero eyebrow to #fff; the export's hero eyebrow ("THE
   MIDNIGHT COLLECTION") is amber (text-secondary), not white. */
body.on-theme .mr-hero .mr-hero__copy .mr-eyebrow {
    color: var(--on-amber-bright);
}

/* --------------------------------------------------------------------------
   Promo tiles — moody photo inside an amber keyline frame
   -------------------------------------------------------------------------- */
body.on-theme .mr-promo {
    border: 1px solid var(--on-line-strong);
    background-color: var(--on-surface-low);
    transition: border-color 0.3s ease;
}

body.on-theme .mr-promo:hover {
    border-color: var(--on-amber-bright);
}

body.on-theme .mr-promo__title {
    font-family: var(--on-font-head);
    color: var(--on-ink);
}

body.on-theme .mr-promo__cta {
    font-size: 0.6875rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--on-amber-bright);
}

/* --------------------------------------------------------------------------
   Product cards (inherited) — flat, amber-keylined, amber price accents
   -------------------------------------------------------------------------- */
body.on-theme .mr-card {
    background-color: transparent;
    border: 1px solid var(--on-line);
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

body.on-theme .mr-card:hover {
    border-color: var(--on-line-strong);
    background-color: var(--on-surface-mid);
}

body.on-theme .mr-card__media {
    background-color: var(--on-surface-low);
}

body.on-theme .mr-card__title {
    font-family: var(--on-font-head);
    font-weight: 400;
    color: var(--on-ink);
}

body.on-theme .mr-card__title a:hover {
    color: var(--on-amber-bright);
}

body.on-theme .mr-card__eyebrow {
    color: var(--on-soft);
}

/* DESIGN.md price-lg: Inter 500 / 0.05em — "Rs. XX,XXX" in amber. */
body.on-theme .mr-card__price,
body.on-theme .ll-price {
    font-family: var(--on-font-body);
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--on-amber-bright);
}

body.on-theme .mr-card__price del,
body.on-theme .mr-card__price s {
    color: var(--on-soft);
}

body.on-theme .mr-card__badge {
    background-color: var(--on-amber);
    color: var(--on-ink-on-amber);
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* The slide-up "Add to Cart" button. */
body.on-theme .mr-card__quick {
    background-color: rgba(28, 15, 28, 0.9);
    color: var(--on-ink);
    border: 1px solid var(--on-line-strong);
}

body.on-theme .mr-card__quick:hover {
    background-color: var(--on-amber);
    color: var(--on-ink-on-amber);
    border-color: var(--on-amber);
}

/* The two floating icon affordances. `__wish` and `__quickview` are SIBLINGS
   with different names — restyle them together or the quick-view eye keeps
   the base's near-white circle + `color: var(--bs-primary)`, which measures
   ~2.8:1 here (a mid amber icon on a near-white badge — below the 3:1 WCAG
   minimum for UI components). Default state prints parchment ink on a dark
   aubergine badge (>10:1); hover fills amber and swaps to aubergine ink,
   matching the button treatment (~4.85:1). They stay circular: the 0-radius
   shape rule is about cards, buttons, inputs and image containers, not
   these round overlay controls (see the shape-discipline exemption above). */
body.on-theme .mr-card__wish,
body.on-theme .mr-card__quickview {
    background-color: rgba(28, 15, 28, 0.82);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: var(--on-ink);
    border: 1px solid var(--on-line-strong);
}

body.on-theme .mr-card__wish:hover,
body.on-theme .mr-card__quickview:hover {
    background-color: var(--on-amber);
    color: var(--on-ink-on-amber);
    border-color: var(--on-amber);
}

body.on-theme .mr-card__wish.is-active {
    color: var(--on-amber-bright);
}

/* Bordered card ⇒ its text must not sit flush against the keyline. The media
   stays full-bleed; only the copy is inset. */
body.on-theme .mr-card > p,
body.on-theme .mr-card > h3 {
    padding-inline: 1rem;
}

body.on-theme .mr-card > *:last-child {
    padding-bottom: 1.15rem;
}

/* --------------------------------------------------------------------------
   oud-noir sections
   -------------------------------------------------------------------------- */
body.on-theme .on-featured {
    background-color: var(--on-canvas);
}

body.on-theme .on-arrivals {
    background-color: var(--on-surface-mid);
}

/* --------------------------------------------------------------------------
   Scent notes ("Anatomy of a Fragrance") — the export's ONE deliberate
   light-on-dark inversion. Every colour here is an explicit literal: the
   inherited --mr-ink/--mr-muted are DARK-canvas values and would be
   unreadable on this parchment band.
   -------------------------------------------------------------------------- */
body.on-theme .on-notes {
    background-color: var(--on-ink); /* Blush Parchment #f3e9dd */
    color: var(--on-canvas);
    padding-block: clamp(64px, 8vw, 120px);
}

/* --on-amber measures 2.74:1 on this parchment band (it's calibrated for
   amber-on-DARK) — below both the 4.5:1 AA text floor this eyebrow needs and
   the 3:1 non-text floor the icon/keylines need. --on-amber-ink is the
   darkened sibling measured for this exact surface (4.66:1 on #f3e9dd). */
body.on-theme .on-notes__eyebrow {
    font-family: var(--on-font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--on-amber-ink);
    margin-bottom: 2.5rem;
}

body.on-theme .on-notes__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--on-amber-ink);
}

body.on-theme .on-notes__col {
    padding: 3rem 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 1px solid var(--on-amber-ink);
}

body.on-theme .on-notes__col:last-child {
    border-right: 0;
}

body.on-theme .on-notes__icon {
    width: 34px;
    height: 34px;
    color: var(--on-amber-ink);
    margin-bottom: 1rem;
}

body.on-theme .on-notes__label {
    font-family: var(--on-font-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--on-canvas);
    margin-bottom: 0.5rem;
}

body.on-theme .on-notes__value {
    font-family: var(--on-font-head);
    font-style: italic;
    font-size: 1.4rem;
    color: var(--on-canvas);
    margin-bottom: 0.75rem;
}

body.on-theme .on-notes__text {
    color: var(--on-canvas);
    opacity: 0.72;
    font-size: 0.92rem;
    max-width: 26ch;
}

/* --------------------------------------------------------------------------
   Shop by Category — zero-gutter square tiles, amber dividers, a centered
   plain serif caption (the base's --cat scrim/cap are ALREADY flex-centered;
   only the typography + gutter/aspect need restyling).
   -------------------------------------------------------------------------- */
body.on-theme .on-categories__col {
    border-bottom: 1px solid var(--on-line-strong);
    border-right: 1px solid var(--on-line-strong);
}

body.on-theme .on-categories__col:nth-child(2n) {
    border-right: 0;
}

@media (min-width: 992px) {
    body.on-theme .on-categories__col:nth-child(2n) {
        border-right: 1px solid var(--on-line-strong);
    }

    body.on-theme .on-categories__col:nth-child(4n) {
        border-right: 0;
    }
}

body.on-theme .mr-tile--cat {
    height: auto;
    aspect-ratio: 1 / 1;
}

body.on-theme .mr-tile--cat .mr-tile__media img {
    opacity: 0.55;
    transition: opacity 0.4s ease, transform 0.7s ease;
}

body.on-theme .mr-tile--cat:hover .mr-tile__media img {
    opacity: 0.85;
}

body.on-theme .mr-tile--cat .mr-tile__scrim {
    background: rgba(28, 15, 28, 0.2);
}

body.on-theme .mr-tile--cat .mr-tile__cap {
    font-family: var(--on-font-head);
    font-weight: 400;
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    letter-spacing: 0;
    text-transform: none;
    transition: transform 0.3s ease;
}

body.on-theme .mr-tile--cat:hover .mr-tile__cap {
    transform: scale(1.08);
}

/* --------------------------------------------------------------------------
   Newsletter — centered serif heading, underline email input, amber button
   -------------------------------------------------------------------------- */
body.on-theme .on-cta {
    background-color: var(--on-canvas);
    border-top: 1px solid var(--on-line-strong);
    border-bottom: 1px solid var(--on-line-strong);
    padding: 6rem 0;
}

body.on-theme .on-cta__title {
    color: var(--on-ink);
}

body.on-theme .on-cta__body {
    color: var(--on-muted);
    font-style: italic;
    max-width: 34rem;
}

body.on-theme .on-cta__form {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    max-width: 30rem;
}

body.on-theme .on-cta__form input {
    flex: 1 1 auto;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--on-amber);
    color: var(--on-ink);
    padding: 0.75rem 0.25rem;
    font-size: 0.92rem;
}

body.on-theme .on-cta__form input::placeholder {
    color: var(--on-soft);
}

body.on-theme .on-cta__form input:focus {
    outline: none;
    border-bottom-color: var(--on-amber-bright);
}

body.on-theme .on-cta__btn {
    background-color: var(--on-amber);
    color: var(--on-ink-on-amber);
    border: 0;
    padding: 0.9rem 2.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    white-space: nowrap;
}

body.on-theme .on-cta__btn:disabled {
    opacity: 0.75;
    cursor: not-allowed;
}

body.on-theme .on-cta__note {
    color: var(--on-soft);
    font-size: 0.8rem;
}

/* --------------------------------------------------------------------------
   Inherited component finishing — journal, brands, footer, tables
   -------------------------------------------------------------------------- */

/* Journal category chip ("TECHNIQUE" / "INGREDIENTS" / "HERITAGE") — the
   export boxes it; the base renders a plain eyebrow paragraph immediately
   after the article's cover image, so the adjacent-sibling selector below
   boxes JUST that label without touching every other .mr-eyebrow on the
   page (featured/notes/newsletter eyebrows stay plain text). */
body.on-theme .mr-article__media + .mr-eyebrow {
    display: inline-block;
    border: 1px solid var(--on-amber-bright);
    padding: 0.15rem 0.6rem;
    font-size: 0.6rem;
    letter-spacing: 0.15em;
}

body.on-theme .mr-article__media {
    border: 1px solid var(--on-line);
}

body.on-theme .mr-footer {
    background-color: var(--on-surface-deep);
    border-top: 1px solid var(--on-line-strong);
    color: var(--on-muted);
}

body.on-theme .mr-footer__brand,
body.on-theme .mr-footer h2,
body.on-theme .mr-footer h3 {
    font-family: var(--on-font-head);
    color: var(--on-ink);
}

body.on-theme .mr-ulink,
body.on-theme .mr-footer a {
    color: var(--on-muted);
    text-decoration: none;
}

body.on-theme .mr-ulink:hover,
body.on-theme .mr-footer a:hover {
    color: var(--on-amber-bright);
}

/* Selector fix (MINOR #1): `.mr-social a` never matched — `.mr-social` IS
   the anchor in modern-retail/partials/footer.blade.php, not a wrapper
   around one — so the footer social buttons kept the base's plain
   `:hover{background:var(--bs-primary);color:#fff}` (3.29:1) and the amber
   keyline below never applied. Now that the selector matches, the hover
   text also needs the MAJOR #3 fix: reviving the dead rule's own original
   `color: var(--on-amber-bright)` verbatim would have measured 1.94:1 on
   this amber fill — worse than the 3.29:1 it replaces. Aubergine ink is the
   only readable choice here (5.31:1), matching every other amber-filled
   surface above. */
body.on-theme .mr-social {
    border: 1px solid var(--on-line);
    color: var(--on-ink);
}

body.on-theme .mr-social:hover {
    border-color: var(--on-amber);
    color: var(--on-ink-on-amber);
}

/* Tables (orders / account) need explicit ink on the dark canvas. */
body.on-theme .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--on-ink);
    --bs-table-border-color: var(--on-line);
    color: var(--on-ink);
}

/* --------------------------------------------------------------------------
   Motion & responsive
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.on-theme .mr-reveal,
    body.on-theme .mr-card,
    body.on-theme .mr-promo,
    body.on-theme .mr-tile,
    body.on-theme .on-keyline-link {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }

    body.on-theme .mr-card:hover .mr-card__media img,
    body.on-theme .mr-tile:hover .mr-tile__img,
    body.on-theme .mr-tile--cat .mr-tile__media img,
    body.on-theme .mr-tile--cat:hover .mr-tile__cap,
    body.on-theme .mr-promo:hover .mr-promo__img,
    body.on-theme .mr-article__media:hover img {
        transform: none !important;
    }
}

@media (max-width: 991.98px) {
    body.on-theme .on-header__bar {
        gap: 0.75rem;
    }

    body.on-theme .on-header__side {
        flex: 0 0 auto;
    }

    body.on-theme .on-logo {
        font-size: 1.15rem;
        letter-spacing: 0.2em;
        padding-left: 0.2em;
    }

    body.on-theme .mr-display {
        letter-spacing: -0.01em;
    }

    body.on-theme .on-notes__grid {
        grid-template-columns: 1fr;
    }

    body.on-theme .on-notes__col {
        border-right: 0;
        border-bottom: 1px solid var(--on-amber-ink);
    }

    body.on-theme .on-notes__col:last-child {
        border-bottom: 0;
    }

    body.on-theme .on-cta {
        padding: 4rem 0;
    }

    body.on-theme .on-cta__form {
        flex-direction: column;
        align-items: stretch;
    }
}