/* ==========================================================================
   Nakkashi — a museum-gallery showcase for Chinioti heritage furniture.

   Ported from the Stitch "Heritage Gallery Narrative" design (design system
   at docs/templates/pending/stitch_68_nakkashi_heritage_e_commerce_showcase/
   …/heritage_gallery_narrative/DESIGN.md; the homepage code.html's RENDERED
   values are authoritative wherever the two disagree): a warm parchment
   canvas that stands in for white, walnut-brown structure and actions,
   carved-gold keylines and eyebrows held back so they keep their value,
   Playfair Display for every narrative element (wordmark, headlines, product
   names) over Inter for navigation, specifications and the `Rs.` price role,
   and a soft 4px radius. Depth is TONAL LAYERING + KEYLINE FRAMING — no
   shadows anywhere; the process photograph wears the "museum inset" (a 1px
   gold frame floating 16px outside the image) and a hovered collection tile
   fades in a gold inner stroke instead of lifting.

   This theme OWNS the hero / collection tiles / archive / new-arrivals /
   collection-index / newsletter home sections (nk-* markup), the centred-
   wordmark header and the child-only "carving-story" process band, and
   INHERITS Modern Retail's footer, trust strip, journal, brands strip,
   product card and every functional page. This stylesheet therefore has
   three jobs:

     (a) style the NEW `nk-*` markup into the Stitch design;
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
         base neutral tokens at the parchment palette, which carries the
         restyle into shop / PDP / cart / checkout / account / blog for free;
         and
     (c) carve out the template's two DARK surfaces (the espresso "New From
         the Workshop" band and the walnut announcement bar + footer) inside
         an otherwise light theme — the inverse of a dark-canvas theme, so
         only those components get literal light-on-dark overrides while the
         shared tokens stay light-canvas-safe.

   Everything is scoped under `body.nk-theme` and reads the 5 customizer
   tokens (--bs-primary, --bs-primary-rgb, --ll-accent, --ll-font-headings,
   --ll-font-body, --bs-border-radius) with theme.json-default fallbacks, so
   the customizer + live preview keep working: change the primary colour and
   every walnut surface follows.

   -------------------------------------------------------------------------
   CONTRAST (measured against the FIXED tokens — primary #4a2f1e /
   accent #b8863b / parchment canvas #fff8f5 — never simplify these back to
   raw --ll-accent):

     - Walnut Brown (primary) is DARK, so it is safe as text AND as a
       white-text fill everywhere the base already uses it: 11.65:1 on
       parchment, 12.23:1 on white, 12.23:1 white-on-walnut, 11.08:1 on the
       low band #fff1ea, 10.01:1 on the warm band #ffe3d3. Verified and NOT
       overridden: .mr-btn--primary / --outline, .mr-badge, .mr-card__quick,
       .mr-filter__link, .mr-page.is-active, .mr-step__dot, .mr-acct-avatar,
       .mr-rail-btn:hover, .mr-gallery__thumb.is-active, the two round
       product-card overlay controls' rest ink, Bootstrap .btn-primary (the
       shared PDP "Submit review" button) and .btn-link. There is NO
       light-primary trap on this theme.
       --bs-link-color-rgb IS set below: theme-vars.blade.php never emits it,
       so bare anchors (CMS pages, blog-post body, quick-view "Category"
       link) would otherwise hover toward Bootstrap's factory blue. A bare
       `body.nk-theme a { color: … }` catch-all is deliberately NOT used — it
       would out-specify `.mr-btn--primary { color:#fff }` and blank the hero
       CTA's label on a dark walnut fill.
     - Carved Gold (accent) FAILS as text on every light surface: 3.07:1 on
       parchment, 3.23:1 on white, 2.92:1 on the low band, 2.64:1 on the warm
       band, and 3.23:1 white-on-gold. The export ships gold eyebrows and a
       white-on-gold chip at those ratios, so a darker sibling carries every
       light-surface FOREGROUND role: --nk-gold-ink (color-mix 66% gold /
       34% black = #795827, with the export's own `secondary` #80560b as the
       static fallback, deliberately matched to within 0.05 of it) measures
       6.18:1 on parchment, 6.49:1 on white, 5.87:1 on the low band and
       5.31:1 on the warm band (fallback: 6.15 / 6.45 / 5.85 / 5.28). It inks
       .mr-eyebrow,
       .mr-ulink:hover, .mr-icon-btn:hover, .mr-card__wish.is-active,
       .mr-card__title / .mr-article__title / .mr-crumbs / .mr-cart-row__title
       hovers, .mr-tabs .nav-link.active, .mr-trust svg, --mr-gold (star
       ratings), the focus ring and .nk-keyline-link:hover.
       RAW --nk-gold stays for purely decorative, non-informational chrome —
       the museum-inset frames, tile keylines, the process-band numerals, the
       gold rules — and as TEXT only on the ESPRESSO band, where it measures
       5.05:1 (the export's own "VIEW ALL NEW" link + dark-band prices).
     - The espresso band (#321a0b; the color-mix that tracks a merchant's
       primary resolves to #2e1d13, within 0.05 of every ratio below) is a
       THIRD canvas: white 16.30:1, the muted white --nk-on-dark-muted
       9.62:1, raw gold 5.05:1 (and espresso-on-gold 5.05:1 for the filled
       Add-to-Cart), --nk-gold-fixed 9.54:1. Body ink (1.05:1) and gold-ink
       (2.51:1) are never used on it.
     - The walnut announcement bar + footer are a FOURTH: raw gold is only
       3.79:1 there, so their accent role uses --nk-gold-fixed #f5bc6c
       (7.16:1 on walnut, and walnut-on-gold-fixed is 7.16:1 the other way
       for the filled state). Body/link text uses --nk-on-walnut-muted
       (rgba(247,236,227,.80) → composites to #d4c6bc = 7.34:1); headings,
       the brand and social glyphs use --nk-on-walnut #f7ece3 (10.52:1); the
       announcement's warm tan is --nk-on-walnut-warm #e3c3aa (7.37:1 —
       brighter than the export's own #bd967f, which only manages 4.56:1).
     - The SHARED price component's struck "was" grey #9aa0a6 is 2.51:1 on
       parchment (it was tuned for a white canvas) and the shared sale red
       #d6293e is 3.30:1 on the espresso band — both re-inked below
       (--nk-soft 5.95:1 and #ff8a80 7.14:1 respectively). The red stays
       shared #d6293e on light surfaces (4.71:1 on parchment) so it never
       desynchronises from the discount pill.
     - --nk-soft is deliberately DARKENED away from the export's `outline`
       #82746d (4.28:1 on parchment — short of AA for the small breadcrumb /
       card-eyebrow / field-label text it carries) to #6b5e56 (5.95:1). The
       export's #d4c3bb `outline-variant` survives as --nk-keyline, a border
       role only.
   ------------------------------------------------------------------------- */

body.nk-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --nk-walnut: var(--bs-primary, #4a2f1e);
    --nk-walnut-rgb: var(--bs-primary-rgb, 74, 47, 30);
    --nk-gold: var(--ll-accent, #b8863b);
    --nk-radius: var(--bs-border-radius, 0.25rem);
    --nk-font-head: var(--ll-font-headings, "Playfair Display"), Georgia, "Times New Roman", serif;
    --nk-font-body: var(--ll-font-body, "Inter"), system-ui, -apple-system, sans-serif;

    /* Text-safe darker sibling of the gold accent — see the CONTRAST note.
       Recomputed from whatever accent the merchant picks so it never goes
       stale, with a static fallback for browsers without color-mix. */
    --nk-gold-ink: #80560b;
    --nk-gold-ink: color-mix(in srgb, var(--ll-accent, #b8863b) 66%, #000 34%);

    /* The deep espresso the export uses for the "New From the Workshop" band
       (#321a0b) — derived from the customizer primary so it tracks a
       merchant's brand colour instead of freezing the demo's. */
    --nk-espresso: #321a0b;
    --nk-espresso: color-mix(in srgb, var(--bs-primary, #4a2f1e) 62%, #000 38%);

    /* Heritage Gallery Narrative palette (DESIGN.md YAML + the rendered
       code.html — the canvas is the export's own `surface` parchment, which
       the prose calls out as the replacement for harsh white). */
    --nk-parchment: #fff8f5;
    --nk-white: #ffffff;
    --nk-band: #fff1ea;      /* surface-container-low  — the archive band  */
    --nk-band-alt: #ffe3d3;  /* surface-container-high — newsletter band   */
    --nk-fill: #faddcc;      /* surface-variant — placeholder / media well */
    --nk-keyline: #d4c3bb;   /* outline-variant — hairline structure       */
    --nk-keyline-strong: #b3a099;
    --nk-ink: #27180e;       /* on-surface                                 */
    --nk-muted: #50443e;     /* on-surface-variant                         */
    --nk-soft: #6b5e56;      /* darkened `outline` — see CONTRAST note     */

    /* Light-on-dark roles for the espresso band and the walnut announcement
       bar + footer — the only dark surfaces in this light theme. */
    --nk-on-dark: #ffffff;
    --nk-on-dark-muted: rgba(255, 255, 255, 0.75);
    --nk-on-walnut: #f7ece3;
    --nk-on-walnut-muted: rgba(247, 236, 227, 0.8);
    --nk-on-walnut-warm: #e3c3aa;
    --nk-on-walnut-border: rgba(247, 236, 227, 0.2);
    --nk-gold-fixed: #f5bc6c;

    /* Re-point the inherited base neutrals at the parchment palette so every
       inherited mr-* surface (bands, borders, fills, muted text, radii)
       follows across shop / PDP / cart / checkout / account / blog. Depth
       stays FLAT — the design system forbids drop shadows. */
    --mr-ink: var(--nk-ink);
    --mr-muted: var(--nk-muted);
    --mr-soft: var(--nk-soft);
    --mr-surface: var(--nk-parchment);
    --mr-band: var(--nk-band);
    --mr-band-alt: var(--nk-band-alt);
    --mr-fill: var(--nk-fill);
    --mr-border: var(--nk-keyline);
    --mr-border-strong: var(--nk-keyline-strong);
    --mr-radius: 0.25rem;
    --mr-gold: var(--nk-gold-ink);
    --mr-shadow: none;

    /* Bootstrap's own neutral surfaces (NOT covered by the --mr-* re-point):
       .bg-light backs the shared review card and the category facet
       headings, and the cool factory grey clashes with the parchment. */
    --bs-body-bg: var(--nk-parchment);
    --bs-secondary-bg: var(--nk-band);
    --bs-link-color-rgb: var(--nk-walnut-rgb);

    background-color: var(--nk-parchment);
    color: var(--nk-ink);
    font-family: var(--nk-font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Shape & depth discipline — the design system's "Soft (4px)" radius on
   cards, inputs and image containers (the customizer button_radius default
   IS 0.25rem, so .mr-btn already inherits it via --bs-border-radius), and
   ZERO elevation: keyline framing and tonal layers only.
   -------------------------------------------------------------------------- */
body.nk-theme .mr-card__media,
body.nk-theme .mr-article__media,
body.nk-theme .mr-article__media img,
body.nk-theme .mr-tile,
body.nk-theme .mr-promo,
body.nk-theme .form-control,
body.nk-theme .form-select,
body.nk-theme .dropdown-menu,
body.nk-theme .offcanvas,
body.nk-theme .nk-tile__frame {
    border-radius: var(--mr-radius);
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   Typography — "Serif for Soul, Sans for Utility": Playfair narrative
   headlines with a touch of negative tracking, Inter body, and tracked
   gold-ink label-caps eyebrows.
   -------------------------------------------------------------------------- */
body.nk-theme h1, body.nk-theme h2, body.nk-theme h3,
body.nk-theme h4, body.nk-theme h5, body.nk-theme h6,
body.nk-theme .mr-display,
body.nk-theme .mr-headline {
    font-family: var(--nk-font-head);
    color: var(--nk-ink);
    letter-spacing: -0.02em;
}

/* Section headings sit at the design's headline-md scale — calmer than the
   base's editorial display size, which is reserved for the hero + process. */
body.nk-theme .mr-display {
    font-weight: 600;
    font-size: clamp(1.6rem, 2.8vw, 2rem);
    line-height: 1.3;
}

body.nk-theme .mr-eyebrow {
    font-family: var(--nk-font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--nk-gold-ink);
}

/* Prices carry the export's `price-lg` role: Inter medium, faintly tightened,
   inked walnut so they read as the page's most confident number. */
body.nk-theme .mr-card__price {
    font-family: var(--nk-font-body);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--nk-walnut);
}

/* The SHARED price component's struck "was" price ships a cool grey
   (#9aa0a6) tuned for a white canvas — only 2.51:1 on parchment and 2.39:1
   on the low band, i.e. unreadable here. Re-ink it to the theme's own soft
   role (5.95:1 / 5.66:1). The sale red stays the platform-shared #d6293e on
   light surfaces (4.71:1); the espresso band overrides it below. */
body.nk-theme .ll-price-compare,
body.nk-theme .mr-card__price del {
    color: var(--nk-soft);
}

/* --------------------------------------------------------------------------
   Buttons — solid walnut primary (hover deepens toward the espresso rather
   than the base's brightness filter, matching the export's `hover:bg-primary`)
   plus the walnut-keyline secondary and the tracked keyline link.
   -------------------------------------------------------------------------- */
/* NOTE: no `padding` here on purpose. `body.nk-theme .mr-btn` (0,2,1) would
   out-specify the base's `.mr-btn--hero` (0,1,0) and silently shrink every
   large CTA. The base's 0.95rem/2rem already matches the export's py-4 px-10
   closely enough. */
body.nk-theme .mr-btn {
    font-family: var(--nk-font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

body.nk-theme .mr-btn--primary {
    background-color: var(--nk-walnut);
    border-color: var(--nk-walnut);
    color: #fff;
}

body.nk-theme .mr-btn--primary:hover {
    filter: none;
    background-color: var(--nk-espresso);
    border-color: var(--nk-espresso);
    color: #fff;
}

/* The export's secondary: transparent with a 1px Walnut border and walnut
   label, filling walnut on hover. */
body.nk-theme .nk-btn--keyline {
    border: 1px solid var(--nk-walnut);
    color: var(--nk-walnut);
    background-color: transparent;
}

body.nk-theme .nk-btn--keyline:hover {
    background-color: var(--nk-walnut);
    border-color: var(--nk-walnut);
    color: #fff;
}

/* Outline button on the espresso band — a gold keyline under a gold label. */
body.nk-theme .nk-btn--on-dark {
    border: 1px solid var(--nk-gold);
    color: var(--nk-gold);
    background-color: transparent;
}

body.nk-theme .nk-btn--on-dark:hover {
    background-color: var(--nk-gold);
    border-color: var(--nk-gold);
    color: var(--nk-espresso);
}

/* `.mr-btn--light` fills white and the base hovers it to the raw accent with
   white text (3.23:1). Gold-ink keeps the gold identity at 6.49:1. */
body.nk-theme .mr-btn--light:hover {
    background-color: var(--nk-gold-ink);
    color: #fff;
}

/* The design system's "Text Link": tracked label-caps over a 1px underline. */
body.nk-theme .nk-keyline-link {
    display: inline-block;
    font-family: var(--nk-font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--nk-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--nk-ink);
    padding-bottom: 0.3rem;
    transition: color 0.2s ease, border-color 0.2s ease;
}

body.nk-theme .nk-keyline-link:hover {
    color: var(--nk-gold-ink);
    border-color: var(--nk-gold-ink);
}

/* Same link on the espresso band — raw gold is text-safe there (5.05:1). */
body.nk-theme .nk-keyline-link--gold {
    color: var(--nk-gold);
    border-bottom-color: var(--nk-gold);
}

body.nk-theme .nk-keyline-link--gold:hover {
    color: var(--nk-gold-fixed);
    border-color: var(--nk-gold-fixed);
}

body.nk-theme .mr-ulink:hover {
    color: var(--nk-gold-ink);
    border-color: var(--nk-gold-ink);
}

/* --------------------------------------------------------------------------
   Inputs — DESIGN.md: 4px radius, a 1px Walnut Brown border and a warm field.
   NOTE the base sets a padding SHORTHAND on `.form-control, .form-select` and
   then hands selects their 2.25rem caret gutter back; nothing here touches
   padding, so that stays intact.
   -------------------------------------------------------------------------- */
body.nk-theme .form-control,
body.nk-theme .form-select {
    border-color: var(--nk-keyline);
    background-color: var(--nk-white);
    color: var(--nk-ink);
}

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

body.nk-theme .form-control:focus,
body.nk-theme .form-select:focus {
    border-color: var(--nk-walnut);
    box-shadow: 0 0 0 3px rgba(var(--nk-walnut-rgb), 0.14);
}

/* The border override above out-specifies Bootstrap's own
   `.form-control.is-invalid` (0,0,2,0), which would silently swallow the red
   validation state on every checkout / address / auth form. Re-assert it. */
body.nk-theme .form-control.is-invalid,
body.nk-theme .form-select.is-invalid,
body.nk-theme .was-validated .form-control:invalid,
body.nk-theme .was-validated .form-select:invalid {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
}

body.nk-theme .form-control.is-invalid:focus,
body.nk-theme .form-select.is-invalid:focus {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.18);
}

/* Focus ring — the base leans on the raw accent (3.07:1 on parchment, below
   the 3:1 floor once it lands on the warm band). Gold-ink clears it. */
body.nk-theme a:focus-visible,
body.nk-theme button:focus-visible,
body.nk-theme input:focus-visible {
    outline-color: var(--nk-gold-ink);
}

/* --------------------------------------------------------------------------
   Announcement bar + header — the walnut whisper band (the base's default is
   an auto-darkened accent, a muddy olive here), then the parchment header
   split into three equal columns with the wide-tracked serif wordmark
   centred and significantly larger than the nav links.
   -------------------------------------------------------------------------- */
body.nk-theme .mr-announce {
    background-color: var(--nk-walnut);
    color: var(--nk-on-walnut-warm);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    padding-block: 0.7rem;
}

body.nk-theme .mr-announce a { color: var(--nk-on-walnut-warm); }

body.nk-theme .nk-header {
    background-color: var(--nk-parchment);
    border-bottom: 1px solid var(--nk-keyline);
}

body.nk-theme .nk-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 78px;
}

body.nk-theme .nk-header__side {
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
}

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

body.nk-theme .nk-nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 1.6rem);
}

body.nk-theme .nk-nav .dropdown-menu {
    border-radius: var(--mr-radius);
    border-color: var(--nk-keyline);
    margin-top: 0.5rem;
}

body.nk-theme .nk-logo {
    font-family: var(--nk-font-head);
    font-weight: 600;
    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
    letter-spacing: 0.3em;
    text-indent: 0.3em; /* balance the trailing tracking so it reads centred */
    text-transform: uppercase;
    color: var(--nk-walnut);
    text-align: center;
    white-space: nowrap;
}

body.nk-theme .mr-nav-link {
    font-family: var(--nk-font-body);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--nk-muted);
}

body.nk-theme .mr-nav-link:hover { color: var(--nk-walnut); }

/* The base inks the current section with the raw accent (3.07:1). Walnut is
   both faithful to the export and safe. */
body.nk-theme .mr-nav-link.is-active {
    color: var(--nk-walnut);
    border-bottom-color: var(--nk-walnut);
}

body.nk-theme .mr-icon-btn:hover { color: var(--nk-gold-ink); }

/* Wishlist count pill — the base fills it with the raw accent under white
   text (3.23:1). Walnut is the same pair the cart pill already uses. */
body.nk-theme .mr-badge--wish { background-color: var(--nk-walnut); }

body.nk-theme .nk-search input {
    width: 13rem;
    background: var(--nk-band);
    border-color: var(--nk-keyline);
}

body.nk-theme .mr-search input:focus {
    background: var(--nk-white);
    border-color: var(--nk-walnut);
    box-shadow: 0 0 0 3px rgba(var(--nk-walnut-rgb), 0.1);
}

/* --------------------------------------------------------------------------
   Hero (nk-hero) — the export's asymmetric gallery hero: copy over bare
   parchment on the left, the photograph bleeding off the right edge across
   two thirds of the frame. Stacks to photo-over-copy on narrow viewports.
   -------------------------------------------------------------------------- */
body.nk-theme .nk-hero {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    background-color: var(--nk-band);
    overflow: hidden;
}

/* The photograph is FIRST in the DOM (it is the LCP element) but sits on the
   right of the frame; `order` keeps the visual layout without reshuffling
   the markup. */
body.nk-theme .nk-hero__panel {
    order: 1;
    flex: 1 1 38%;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: clamp(2.5rem, 6vw, 6rem) clamp(1.25rem, 5vw, 5rem);
}

body.nk-theme .nk-hero__copy { max-width: 34rem; }

body.nk-theme .nk-hero__media {
    order: 2;
    flex: 1 1 62%;
    min-width: 0;
    position: relative;
    overflow: hidden;
    min-height: clamp(320px, 46vw, 640px);
    background-color: var(--nk-fill);
}

body.nk-theme .nk-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s ease;
}

body.nk-theme .nk-hero:hover .nk-hero__img { transform: scale(1.03); }

body.nk-theme .nk-hero__eyebrow {
    letter-spacing: 0.25em;
    margin-bottom: 1.25rem;
}

body.nk-theme .nk-hero__title {
    font-family: var(--nk-font-head);
    font-weight: 700;
    font-size: clamp(2.25rem, 4.6vw, 4rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--nk-ink);
    margin-bottom: 2rem;
}

body.nk-theme .nk-hero__lead {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--nk-muted);
    max-width: 34ch;
    margin-bottom: 2.5rem;
}

body.nk-theme .nk-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

/* --------------------------------------------------------------------------
   Trust strip (inherited, data-driven) — the export centres each item as a
   gold glyph stacked over a tracked walnut label on the parchment canvas
   under a single hairline. `.mr-band--alt.border-bottom` is the trust
   strip's OWN combination in the base (its other `.mr-band--alt` consumers
   never pair it with `.border-bottom`), so this cannot leak elsewhere.
   -------------------------------------------------------------------------- */
body.nk-theme .mr-band--alt.border-bottom {
    background-color: var(--nk-parchment);
    border-bottom-color: var(--nk-keyline) !important;
}

body.nk-theme .mr-trust {
    flex-direction: column;
    text-align: center;
    gap: 0.65rem;
}

body.nk-theme .mr-trust svg {
    width: 26px;
    height: 26px;
    color: var(--nk-gold-ink);
}

body.nk-theme .mr-trust strong {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--nk-ink);
}

/* --------------------------------------------------------------------------
   Collection tiles (nk-tile) — the export's three 3:4 gallery photographs
   with the caption BELOW the image on bare parchment, and the "museum inset"
   gold frame fading in 16px outside the photo on hover (never a lift).
   -------------------------------------------------------------------------- */
body.nk-theme .nk-tile {
    display: block;
    text-decoration: none;
    color: inherit;
}

body.nk-theme .nk-tile__frame {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background-color: var(--nk-fill);
}

/* DESIGN.md's hover state: "the appearance of a thin gold inner-stroke".
   The export's own `museum-inset` draws the keyline 16px OUTSIDE the photo
   but pairs it with `overflow-hidden` on the same element, which clips it —
   so the stroke is drawn INSIDE here, where it actually renders. (The
   process band, which has no clipping, keeps the true outside double-matte.) */
body.nk-theme .nk-tile__frame::after {
    content: '';
    position: absolute;
    inset: 14px;
    border: 1px solid var(--nk-gold);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

body.nk-theme .nk-tile:hover .nk-tile__frame::after,
body.nk-theme .nk-tile:focus-visible .nk-tile__frame::after { opacity: 1; }

body.nk-theme .nk-tile__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

body.nk-theme .nk-tile:hover .nk-tile__img { transform: scale(1.05); }

body.nk-theme .nk-tile__img--placeholder {
    background: linear-gradient(150deg, var(--nk-band), var(--nk-fill) 60%, var(--nk-keyline));
}

body.nk-theme .nk-tile__cap {
    display: block;
    margin-top: 2rem;
}

body.nk-theme .nk-tile__eyebrow {
    display: block;
    font-size: 0.64rem;
    margin-bottom: 0.5rem;
}

body.nk-theme .nk-tile__title {
    display: block;
    font-family: var(--nk-font-head);
    font-weight: 600;
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--nk-ink);
    margin-bottom: 1rem;
}

body.nk-theme .nk-tile__cta {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--nk-gold-ink);
    border-bottom: 1px solid var(--nk-gold-ink);
    padding-bottom: 0.3rem;
    transition: color 0.2s ease, border-color 0.2s ease;
}

body.nk-theme .nk-tile:hover .nk-tile__cta {
    color: var(--nk-ink);
    border-color: var(--nk-ink);
}

/* --------------------------------------------------------------------------
   The Archive (nk-archive) + the inherited product card — the export frames
   each photograph in a white square that grows a 1px carved-gold keyline on
   hover, then leaves the name, the uppercase material meta and the price
   flush below it on the low parchment band. Bordering the MEDIA rather than
   the card is what keeps the base's flush text correct — a border on
   `.mr-card` itself would need the text inset.
   -------------------------------------------------------------------------- */
body.nk-theme .nk-archive { background-color: var(--nk-band); }

body.nk-theme .mr-card__media {
    aspect-ratio: 1 / 1;
    background-color: var(--nk-white);
    border: 1px solid transparent;
    transition: border-color 0.3s ease;
}

body.nk-theme .mr-card:hover .mr-card__media { border-color: var(--nk-gold); }

body.nk-theme .mr-card__eyebrow {
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--nk-soft);
}

body.nk-theme .mr-card__title {
    font-family: var(--nk-font-body);
    font-weight: 400;
    font-size: 0.98rem;
    color: var(--nk-ink);
}

body.nk-theme .mr-card__title a:hover { color: var(--nk-gold-ink); }

/* The two round overlay controls are SIBLINGS with different names; their
   rest ink (--bs-primary on a near-white circle) is walnut at 12.23:1 and
   their hover pair (--mr-surface / --mr-ink) is 16.35:1 — both already safe,
   so only the wishlist ACTIVE state (raw accent, 3.23:1 on white) needs
   re-inking. */
body.nk-theme .mr-card__wish.is-active { color: var(--nk-gold-ink); }

body.nk-theme .mr-card__quick {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}

/* --------------------------------------------------------------------------
   The Process band (nk-process, child-only) — a 4:5 workshop photograph
   inside the gold museum frame beside the display headline, the intro and
   the three numbered steps with their large ghosted gold numerals.
   -------------------------------------------------------------------------- */
body.nk-theme .nk-process { padding-block: clamp(3.5rem, 9vw, 7.5rem); }

body.nk-theme .nk-process__frame {
    position: relative;
    display: block;
    max-width: 34rem;
}

body.nk-theme .nk-process__frame::after {
    content: '';
    position: absolute;
    inset: -16px;
    border: 1px solid var(--nk-gold);
    pointer-events: none;
}

body.nk-theme .nk-process__img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

body.nk-theme .nk-process__img--placeholder {
    background: linear-gradient(135deg, var(--nk-band), var(--nk-fill));
}

body.nk-theme .nk-process__copy {
    padding-inline-start: clamp(0px, 5vw, 5rem);
}

body.nk-theme .nk-process__eyebrow {
    letter-spacing: 0.25em;
    margin-bottom: 1.25rem;
}

body.nk-theme .nk-process__title {
    font-family: var(--nk-font-head);
    font-weight: 700;
    font-size: clamp(1.9rem, 3.6vw, 3rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--nk-ink);
    margin-bottom: 2rem;
}

body.nk-theme .nk-process__body {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--nk-muted);
    margin-bottom: 3rem;
}

body.nk-theme .nk-process__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2rem;
}

body.nk-theme .nk-process__step {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

body.nk-theme .nk-process__num {
    flex: 0 0 auto;
    font-family: var(--nk-font-head);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1.1;
    color: var(--nk-gold);
    opacity: 0.45;
}

body.nk-theme .nk-process__step-body { display: block; }

body.nk-theme .nk-process__step-title {
    display: block;
    font-family: var(--nk-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--nk-ink);
    margin-bottom: 0.5rem;
}

body.nk-theme .nk-process__step-text {
    display: block;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--nk-muted);
}

/* --------------------------------------------------------------------------
   New From the Workshop (nk-arrivals) — the export's full-width ESPRESSO
   band. This is a light-on-dark surface inside a light theme, so every role
   riding on it is set explicitly (see the CONTRAST note): the base assumes a
   light canvas for the card's title, meta, price and media well.
   -------------------------------------------------------------------------- */
body.nk-theme .nk-arrivals {
    background-color: var(--nk-espresso);
    color: var(--nk-on-dark);
    padding-block: clamp(3.5rem, 9vw, 7.5rem);
}

body.nk-theme .nk-arrivals .mr-display { color: var(--nk-on-dark); }

/* Raw gold measures 5.05:1 on the espresso band — the one surface where the
   design's true accent is text-safe. */
body.nk-theme .nk-arrivals .mr-eyebrow { color: var(--nk-gold); }

body.nk-theme .nk-arrivals .mr-card__media {
    aspect-ratio: 3 / 4;
    background-color: var(--nk-walnut);
    border-color: transparent;
}

body.nk-theme .nk-arrivals .mr-card:hover .mr-card__media { border-color: var(--nk-gold); }

body.nk-theme .nk-arrivals .mr-card__title,
body.nk-theme .nk-arrivals .mr-card__title a { color: var(--nk-on-dark); }

body.nk-theme .nk-arrivals .mr-card__title a:hover { color: var(--nk-gold); }

body.nk-theme .nk-arrivals .mr-card__eyebrow { color: var(--nk-on-dark-muted); }

body.nk-theme .nk-arrivals .mr-card__price { color: var(--nk-gold); }

body.nk-theme .nk-arrivals .mr-card__price del,
body.nk-theme .nk-arrivals .ll-price-compare { color: var(--nk-on-dark-muted); }

/* The shared sale red is 3.30:1 on the espresso band — below AA. A lighter
   sibling keeps the "this is the sale price" signal at 7.14:1 without
   desynchronising the red family from the shared discount pill beside it. */
body.nk-theme .nk-arrivals .ll-price--sale { color: #ff8a80; }

/* The slide-up Add to Cart is a walnut fill on a walnut media well here —
   invert it to the gold-on-espresso pair the band already uses. */
body.nk-theme .nk-arrivals .mr-card__quick {
    background-color: var(--nk-gold);
    color: var(--nk-espresso);
}

body.nk-theme .nk-arrivals *:focus-visible {
    outline: 2px solid var(--nk-gold-fixed);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Collection index (nk-index) — the export's quiet keyline-divided band of
   collection names. No photography: the carved pieces above keep the eye.
   -------------------------------------------------------------------------- */
body.nk-theme .nk-index {
    padding-block: clamp(2.5rem, 5vw, 4rem);
    border-bottom: 1px solid var(--nk-keyline);
}

body.nk-theme .nk-index__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--nk-keyline);
    border-left: 1px solid var(--nk-keyline);
}

@media (min-width: 768px) {
    body.nk-theme .nk-index__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

body.nk-theme .nk-index__cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: clamp(2rem, 4vw, 3rem) 1rem;
    text-align: center;
    text-decoration: none;
    border-right: 1px solid var(--nk-keyline);
    border-bottom: 1px solid var(--nk-keyline);
    transition: background-color 0.3s ease;
}

body.nk-theme .nk-index__cell:hover { background-color: var(--nk-band); }

body.nk-theme .nk-index__rule {
    display: block;
    width: 28px;
    height: 1px;
    background-color: var(--nk-gold);
}

body.nk-theme .nk-index__name {
    font-family: var(--nk-font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--nk-ink);
}

body.nk-theme .nk-index__cell:hover .nk-index__name { color: var(--nk-gold-ink); }

/* --------------------------------------------------------------------------
   Journal (inherited .mr-article) — 16:9 covers, gold-ink category labels,
   Playfair titles that warm to gold-ink on hover.
   -------------------------------------------------------------------------- */
body.nk-theme .mr-article__media { aspect-ratio: 16 / 9; }

body.nk-theme .mr-article__title {
    font-family: var(--nk-font-head);
    font-weight: 600;
    font-size: clamp(1.1rem, 1.8vw, 1.3rem);
    line-height: 1.35;
}

body.nk-theme .mr-article__title a:hover,
body.nk-theme .mr-crumbs a:hover,
body.nk-theme .mr-cart-row__title a:hover { color: var(--nk-gold-ink); }

body.nk-theme .mr-tabs .nav-link.active { border-bottom-color: var(--nk-gold-ink); }

body.nk-theme .mr-brandstrip span {
    font-family: var(--nk-font-head);
    color: var(--nk-soft);
}

body.nk-theme .mr-divider { border-color: var(--nk-keyline); opacity: 1; }

/* --------------------------------------------------------------------------
   Newsletter (nk-cta) — the export's centred column on the warm parchment
   container: gold eyebrow, Playfair heading, calm body, then the
   underline-only field beside the solid walnut Subscribe button.
   -------------------------------------------------------------------------- */
body.nk-theme .nk-cta {
    background-color: var(--nk-band-alt);
    padding-block: clamp(3.5rem, 8vw, 7rem);
}

body.nk-theme .nk-cta__inner { max-width: 620px; }

body.nk-theme .nk-cta__title {
    font-family: var(--nk-font-head);
    font-weight: 600;
    font-size: clamp(1.7rem, 3vw, 2.25rem);
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--nk-ink);
}

body.nk-theme .nk-cta__body {
    color: var(--nk-muted);
    max-width: 52ch;
    line-height: 1.75;
}

body.nk-theme .nk-cta__form {
    display: flex;
    gap: 1rem;
    max-width: 520px;
}

body.nk-theme .nk-cta__form input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--nk-walnut);
    padding: 0.95rem 0;
    font-family: var(--nk-font-body);
    font-size: 0.95rem;
    color: var(--nk-ink);
}

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

body.nk-theme .nk-cta__form input:focus {
    outline: none;
    border-bottom-color: var(--nk-gold-ink);
}

body.nk-theme .nk-cta__btn {
    border: 0;
    border-radius: var(--nk-radius);
    background: var(--nk-walnut);
    color: #fff;
    padding: 0.95rem 2.75rem;
    font-family: var(--nk-font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

body.nk-theme .nk-cta__btn:hover { background: var(--nk-espresso); }

body.nk-theme .nk-cta__note {
    color: var(--nk-soft);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   Footer (inherited .mr-footer) — the export's WALNUT surface. The base
   assumes a LIGHT footer (--mr-band-alt background, --mr-ink brand,
   --mr-muted links, --ll-accent hover), so every one of those roles needs a
   literal light-on-walnut override here — see the CONTRAST note.
   -------------------------------------------------------------------------- */
body.nk-theme .mr-footer {
    background-color: var(--nk-walnut);
    border-top: 0;
    color: var(--nk-on-walnut-muted);
}

body.nk-theme .mr-footer h4 {
    font-family: var(--nk-font-body);
    color: var(--nk-on-walnut);
}

body.nk-theme .mr-footer a { color: var(--nk-on-walnut-muted); }

body.nk-theme .mr-footer a:hover { color: var(--nk-gold-fixed); }

body.nk-theme .mr-footer__brand {
    font-family: var(--nk-font-head);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-size: 1.4rem;
    color: var(--nk-on-walnut);
}

body.nk-theme .mr-footer .mr-muted,
body.nk-theme .mr-footer .mr-soft { color: var(--nk-on-walnut-muted); }

body.nk-theme .mr-footer .mr-divider {
    border-color: var(--nk-on-walnut-border);
    opacity: 1;
}

body.nk-theme .mr-footer .form-control {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: var(--nk-on-walnut-border);
    color: var(--nk-on-walnut);
}

body.nk-theme .mr-footer .form-control::placeholder { color: var(--nk-on-walnut-muted); }

/* A walnut-filled button on the walnut footer would be invisible; the warm
   gold-fixed fill under walnut ink measures 7.16:1. */
body.nk-theme .mr-footer .mr-btn--primary {
    background-color: var(--nk-gold-fixed);
    border-color: var(--nk-gold-fixed);
    color: var(--nk-walnut);
}

body.nk-theme .mr-footer .mr-btn--primary:hover {
    background-color: #fff;
    border-color: #fff;
    color: var(--nk-walnut);
}

body.nk-theme .mr-footer .mr-social {
    background-color: transparent;
    border-color: var(--nk-on-walnut-border);
    color: var(--nk-on-walnut);
}

body.nk-theme .mr-footer .mr-social:hover {
    background-color: var(--nk-gold-fixed);
    border-color: var(--nk-gold-fixed);
    color: var(--nk-walnut);
}

body.nk-theme .mr-footer *:focus-visible {
    outline: 2px solid var(--nk-gold-fixed);
    outline-offset: 2px;
}

/* Social glyphs on the LIGHT pages (contact / CMS) keep the parchment pair. */
body.nk-theme .mr-social {
    background-color: var(--nk-band);
    border-color: var(--nk-keyline-strong);
    color: var(--nk-ink);
}

body.nk-theme .mr-social:hover {
    background-color: var(--nk-walnut);
    border-color: var(--nk-walnut);
    color: #fff;
}

/* --------------------------------------------------------------------------
   prefers-reduced-motion — the design system asks for slow, intentional
   micro-interactions, which is exactly what a motion-sensitive visitor wants
   switched off. Kill every decorative transform/transition this stylesheet
   adds (the base's own .mr-reveal block already covers its animations).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.nk-theme .nk-hero__img,
    body.nk-theme .nk-tile__img,
    body.nk-theme .nk-tile__frame::after,
    body.nk-theme .nk-tile__cta,
    body.nk-theme .nk-index__cell,
    body.nk-theme .nk-keyline-link,
    body.nk-theme .mr-card__media {
        transition: none;
    }

    /* Neutralise the inherited hover-scale transforms too (the base's
       reduced-motion block only kills their transition). */
    body.nk-theme .nk-hero:hover .nk-hero__img,
    body.nk-theme .nk-tile:hover .nk-tile__img,
    body.nk-theme .mr-card:hover .mr-card__media img,
    body.nk-theme .mr-tile:hover .mr-tile__img,
    body.nk-theme .mr-promo:hover .mr-promo__img {
        transform: none !important;
    }
}

/* --------------------------------------------------------------------------
   Mobile (from the export's mobile frames): margins shrink to 20px but the
   vertical rhythm stays spacious, the split hero stacks photo-over-copy, the
   wordmark shrinks, the process frame drops its outer gold offset so the
   keyline stays on-canvas, and the newsletter form stacks.
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    body.nk-theme .nk-header__side--start { flex: 0 0 auto; }
    body.nk-theme .nk-header__side--end { flex: 0 0 auto; }
}

@media (max-width: 991.98px) {
    body.nk-theme .nk-hero__media,
    body.nk-theme .nk-hero__panel { flex: 1 1 100%; }

    /* The export's mobile frame leads with the photograph. */
    body.nk-theme .nk-hero__media { order: 1; min-height: clamp(260px, 62vw, 420px); }
    body.nk-theme .nk-hero__panel { order: 2; }

    body.nk-theme .nk-hero__panel { padding: clamp(2rem, 8vw, 3rem) 1.25rem; }

    body.nk-theme .nk-process__frame { max-width: none; margin-inline: 16px; }

    body.nk-theme .nk-process__copy { padding-inline-start: 0; }

    body.nk-theme .nk-logo { letter-spacing: 0.18em; text-indent: 0.18em; }
}

@media (max-width: 575.98px) {
    body.nk-theme .nk-cta__form { flex-direction: column; }
    body.nk-theme .nk-cta__btn { width: 100%; }
    body.nk-theme .nk-tile__cap { margin-top: 1.5rem; }
    body.nk-theme .nk-process__step { gap: 1rem; }
}