/* ==========================================================================
   Nine Moons — warm, unhurried storefront for maternity & nursing wear.

   Ported from the Stitch "Nine Moons" design (the design system lives at
   docs/templates/pending/stitch_74_nine_moons_e_commerce_store/…/DESIGN.md):
   a "Gentle Empowerment" narrative — a soft-cream canvas that replaces pure
   white, deep plum-rose for typography and primary actions, a bronze-gold
   accent used sparingly for labels and highlights, full-pill buttons, 16px
   floating white cards with centred captions and ambient plum-tinted
   shadows. Lora (the allowlist stand-in for the export's Source Serif 4 —
   whose own DESIGN.md calls it a substitution for Lora) serif headings over
   Source Sans 3 body/UI/labels/price.

   This theme OWNS the hero / featured / trimester-guide (new) / new-arrivals
   / categories / journal / newsletter home sections (nn-* markup) and
   INHERITS Modern Retail's header, functional pages (product, category,
   cart, checkout, account, search, blog…) and the trust / promo / brands
   home partials. This stylesheet therefore has two jobs:

     (a) style the NEW `nn-*` markup into the Stitch design; and
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
         base neutral tokens at the cream palette, rounding cards to the 16px
         shape language, turning the product card into the export's floating
         boutique card, and inverting the FOOTER to the export's plum band
         (which the base assumes is a light surface — see FOOTER below).

   Everything is scoped under `body.nn-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.

   ---------------------------------------------------------------------------
   CONTRAST — measured against the WCAG relative-luminance formula on this
   theme's own canvas (#fdf9f4). Do not "simplify" these back to raw tokens
   without re-checking:

     · primary_color, Plum Rose #724350 (the export's own `primary`), is DARK:
       7.61:1 as text on the cream canvas, 7.97:1 on white, and 7.97:1 for the
       inherited white label on a plum FILL. It therefore carries every text
       and fill role directly — this theme needs no darker "-ink" sibling and
       hits none of the light-primary traps that bite pastel palettes (the
       base hard-codes `color:#fff` on ~12 primary fills).
     · accent_color, Soft Gold #735a33 (the export's `secondary`, its journal
       category labels and hero eyebrow), is also dark: 6.18:1 as text on
       cream, 6.48:1 on white, 6.48:1 white-on-fill. So every inherited base
       rule that paints --ll-accent as text (.mr-eyebrow, .mr-ulink:hover,
       .mr-nav-link.is-active, .mr-icon-btn:hover, .mr-card__title a:hover,
       .mr-trust svg, .mr-footer a:hover, .mr-crumbs a:hover, the
       focus-visible outline …) is already safe and is left alone except
       where the DESIGN wants a different colour.
     · The ONE accent rule that is re-pointed is
       `.mr-promo:hover .mr-promo__cta` — accent as TEXT over an arbitrary
       merchant photo behind a translucent scrim. Bronze measures fine on a
       dark photo and poorly on a bright one, so (mirroring the platform rule
       that a hero overlay is never `background: none`) the hover colour
       stays the caption's own safe rest-state white.
     · The announcement bar takes the export's primary-container fill
       #8d5a68 with pale-rose text lightened from the export's #ffe2e7
       (4.56:1) to #ffeaee — 4.81:1, comfortably over AA for small tracked
       uppercase type.
     · The peach "Sale" chip (#fddba9 fill / #785f37 text, the export's
       secondary-container pair) measures 4.55:1.
     · FOOTER: the export's footer is a solid plum band, but the BASE footer
       partial is written for a light surface — it ships .mr-muted / .mr-soft
       copy, an .mr-divider, a .form-control and a .mr-btn--primary that all
       resolve to dark-on-light. Every one of them is inverted in the FOOTER
       block below; white at 78–82% opacity over #724350 measures 5.4–6.0:1.
   ========================================================================== */

body.nn-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --nn-plum: var(--bs-primary, #724350);
    --nn-plum-rgb: var(--bs-primary-rgb, 114, 67, 80);
    --nn-gold: var(--ll-accent, #735a33);
    --nn-gold-rgb: var(--bs-warning-rgb, 115, 90, 51);
    --nn-radius: var(--ll-btn-radius, 2rem);
    --nn-font-head: var(--ll-font-headings, "Lora"), Georgia, "Times New Roman", serif;
    --nn-font-body: var(--ll-font-body, "Source Sans 3"), system-ui, -apple-system, sans-serif;

    /* Nine Moons palette (DESIGN.md's Material tonal scale) */
    --nn-plum-soft: #8d5a68; /* primary-container — announcement band */
    --nn-plum-deep: #5c3641; /* hover darken for plum fills */
    --nn-plum-pale: #ffeaee; /* lightened on-primary-container */
    --nn-peach: #fddba9; /* secondary-container — chips */
    --nn-peach-ink: #785f37; /* on-secondary-container */
    --nn-dark: #1c1c19; /* on-surface — body/heading ink */
    --nn-muted: #504346; /* on-surface-variant */
    --nn-soft: #6f6367; /* darkened outline (#837376 was 4.28:1, under 4.5:1) */
    --nn-cream: #fdf9f4; /* surface/background — the canvas the export renders */
    --nn-white: #ffffff; /* surface-container-lowest — card fill */
    --nn-band: #f7f3ee; /* surface-container-low */
    --nn-band-alt: #f1ede8; /* surface-container */
    --nn-fill: #ebe8e3; /* surface-container-high */
    --nn-border: #e6e2dd; /* surface-container-highest / surface-variant */
    --nn-border-strong: #d5c2c5; /* outline-variant */

    /* Re-point the inherited base neutrals at the cream palette so every
       inherited mr-* surface (bands, borders, fills, muted text) follows —
       this single block restyles all ~24 inherited pages. */
    --mr-ink: var(--nn-dark);
    --mr-muted: var(--nn-muted);
    --mr-soft: var(--nn-soft);
    --mr-surface: var(--nn-cream);
    --mr-band: var(--nn-band);
    --mr-band-alt: var(--nn-band-alt);
    --mr-fill: var(--nn-fill);
    --mr-border: var(--nn-border);
    --mr-border-strong: var(--nn-border-strong);
    --mr-radius: 1rem; /* DESIGN.md: containers & cards use a 16px radius */
    --mr-gold: var(--nn-gold); /* star ratings — the bronze accent reads warm and is 6.48:1 */
    /* DESIGN.md: "always tint shadows with the Primary Plum Rose colour". */
    --mr-shadow: 0 4px 12px rgba(var(--nn-plum-rgb), 0.09);

    /* Bootstrap's own link-colour token (platform-wide gotcha: Bootstrap 5.3's
       `a` rule reads --bs-link-color-RGB, not --bs-link-color, and
       theme-vars.blade.php never sets the rgb triplet) — without this, bare
       anchors (CMS pages, blog-post body copy, the quick-view "Category"
       link) and .btn-link fall through to Bootstrap's factory blue. Setting
       the token is deliberately preferred over a bare `body.nn-theme a`
       rule, which would out-specify .mr-btn--primary's white label. */
    --bs-link-color: var(--nn-plum);
    --bs-link-color-rgb: 114, 67, 80;

    background-color: var(--nn-cream);
    color: var(--nn-dark);
    font-family: var(--nn-font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Typography — Lora authority for headings, tinted plum (the export sets
   every section H2 and card title in `text-primary`), with a slight negative
   tracking on the display sizes for the editorial look DESIGN.md asks for.
   -------------------------------------------------------------------------- */
body.nn-theme h1, body.nn-theme h2, body.nn-theme h3,
body.nn-theme h4, body.nn-theme h5, body.nn-theme h6,
body.nn-theme .mr-display, body.nn-theme .mr-headline {
    font-family: var(--nn-font-head);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Colour is deliberately NOT applied to `.mr-headline`: that class is also
   worn by the promo tile's caption, which sits white-on-scrim over a photo.
   Tinting it plum would repaint the caption to a colour that is also the
   scrim's own tint — an invisible label. */
body.nn-theme h1, body.nn-theme h2, body.nn-theme h3,
body.nn-theme h4, body.nn-theme h5, body.nn-theme h6,
body.nn-theme .mr-display {
    color: var(--nn-plum);
}

body.nn-theme .mr-display { letter-spacing: -0.02em; }

/* Guard: every inherited surface that puts a heading on a DARK background.
   The plum heading colour above out-specifies the base's own `color: #fff`
   on these (same specificity, later stylesheet), so they are re-asserted. */
body.nn-theme .mr-promo__title,
body.nn-theme .mr-promo__cap .mr-headline,
body.nn-theme .mr-tile__cap,
body.nn-theme .mr-tile__cap h3,
body.nn-theme .mr-cta h2,
body.nn-theme .mr-cta p,
body.nn-theme .mr-hero__copy h1,
body.nn-theme .mr-hero__copy .mr-display {
    color: #fff;
}

body.nn-theme .mr-eyebrow {
    font-family: var(--nn-font-body);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--nn-gold);
}

/* --------------------------------------------------------------------------
   Buttons — full pill (button_radius token), plum fill primary, plum keyline
   ghost. DESIGN.md: "All interactive buttons utilize a Pill-shape".
   -------------------------------------------------------------------------- */
body.nn-theme .mr-btn {
    font-weight: 600;
    letter-spacing: 0.1em;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

body.nn-theme .mr-btn--primary {
    background: var(--nn-plum);
    border-color: var(--nn-plum);
    color: #fff;
    box-shadow: 0 8px 18px rgba(var(--nn-plum-rgb), 0.22);
}

body.nn-theme .mr-btn--primary:hover {
    filter: none;
    background: var(--nn-plum-deep);
    border-color: var(--nn-plum-deep);
    color: #fff;
    transform: translateY(-1px);
}

body.nn-theme .mr-btn--outline {
    border-color: var(--nn-plum);
    color: var(--nn-plum);
}

body.nn-theme .mr-btn--outline:hover {
    background: var(--nn-plum);
    border-color: var(--nn-plum);
    color: #fff;
}

body.nn-theme .mr-btn--light { color: var(--nn-plum); }
body.nn-theme .mr-btn--light:hover { background-color: var(--nn-plum); color: #fff; }
body.nn-theme .mr-btn--on-dark:hover { color: var(--nn-plum); }
body.nn-theme .mr-btn--ghost { color: var(--nn-plum); }

body.nn-theme .nn-btn-pill { padding: 1.05rem 2.3rem; font-size: 0.82rem; }

/* Plum ghost-outline pill — the hero's secondary "Shop Nursing Wear" action;
   mirrors the export's own `border border-primary text-primary rounded-full`
   with its hover tint (primary-fixed, a very pale rose). */
body.nn-theme .nn-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: calc(1.05rem - 1px) calc(2.3rem - 1px);
    border: 1px solid var(--nn-plum);
    border-radius: var(--nn-radius);
    color: var(--nn-plum);
    font-family: var(--nn-font-body);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

body.nn-theme .nn-btn-ghost:hover {
    background: #ffd9e1;
    color: var(--nn-plum);
    transform: translateY(-1px);
}

/* Bootstrap's own `.btn-primary` (the shared reviews.blade.php "Submit
   review" button) — theme-vars sets --bs-btn-bg but never --bs-btn-color;
   plum is dark so the compiled #fff label is safe (7.97:1). Declared anyway
   so the hover/active states darken with the rest of the theme. */
body.nn-theme .btn-primary {
    --bs-btn-bg: var(--nn-plum);
    --bs-btn-border-color: var(--nn-plum);
    --bs-btn-hover-bg: var(--nn-plum-deep);
    --bs-btn-hover-border-color: var(--nn-plum-deep);
    --bs-btn-active-bg: var(--nn-plum-deep);
    --bs-btn-active-border-color: var(--nn-plum-deep);
    --bs-btn-disabled-bg: var(--nn-plum);
    --bs-btn-disabled-border-color: var(--nn-plum);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #fff;
}

/* --------------------------------------------------------------------------
   Inputs — white fill with a soft rose keyline, 8px radius (DESIGN.md keeps
   inputs squarer than the pill buttons). NEVER a padding shorthand on
   .form-select: it would eat Bootstrap's 2.25rem caret gutter (the base
   already restores it via padding-inline-end — untouched here).
   -------------------------------------------------------------------------- */
body.nn-theme .form-control,
body.nn-theme .form-select {
    background-color: var(--nn-white);
    border-color: var(--nn-border-strong);
    border-radius: 0.5rem;
    color: var(--nn-dark);
}

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

/* DESIGN.md: "On focus, the border thickens slightly and transitions to Soft
   Gold." */
body.nn-theme .form-control:focus,
body.nn-theme .form-select:focus {
    border-color: var(--nn-gold);
    box-shadow: 0 0 0 3px rgba(var(--nn-gold-rgb), 0.18);
}

/* Re-assert Bootstrap's validation keyline — the border-color rules above
   would otherwise repaint an invalid field back to the calm rose. */
body.nn-theme .form-control.is-invalid,
body.nn-theme .form-select.is-invalid,
body.nn-theme .was-validated .form-control:invalid,
body.nn-theme .was-validated .form-select:invalid {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
}

body.nn-theme .form-control.is-invalid:focus,
body.nn-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.2);
}

/* --------------------------------------------------------------------------
   Announcement + header — the inherited logo-left single-row chrome already
   matches the export's structure (logo, inline nav, search/account/cart
   icons), so no header override is needed; it is restyled in place.
   -------------------------------------------------------------------------- */
body.nn-theme .mr-announce {
    background-color: var(--nn-plum-soft);
    background-image: none;
    color: var(--nn-plum-pale);
    letter-spacing: 0.12em;
    font-size: 0.72rem;
    text-transform: none;
}

body.nn-theme .mr-header {
    background-color: rgba(253, 249, 244, 0.9);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--nn-border);
}

body.nn-theme .mr-logo {
    font-family: var(--nn-font-head);
    color: var(--nn-plum);
    letter-spacing: 0;
}

body.nn-theme .mr-nav-link { font-family: var(--nn-font-body); color: var(--nn-muted); }
body.nn-theme .mr-nav-link:hover { color: var(--nn-plum); }
body.nn-theme .mr-nav-link.is-active { color: var(--nn-plum); border-bottom-color: var(--nn-plum); }

body.nn-theme .mr-search input { background: var(--nn-band); border-radius: var(--nn-radius); }
body.nn-theme .mr-search input:focus { background: var(--nn-white); border-color: var(--nn-gold); }

body.nn-theme .mr-icon-btn { color: var(--nn-plum); }
body.nn-theme .mr-icon-btn:hover { color: var(--nn-plum-deep); }
body.nn-theme .mr-badge { background-color: var(--nn-plum); }
body.nn-theme .mr-badge--wish { background-color: var(--nn-plum); }

/* --------------------------------------------------------------------------
   Hero — the export's split layout: a soft 16px-rounded lifestyle photo LEFT,
   copy RIGHT. The eyebrow is bare bronze tracked type (no pill), which keeps
   it visually distinct from the pastel-pill heroes elsewhere in the
   catalogue.
   -------------------------------------------------------------------------- */
body.nn-theme .nn-hero { padding: clamp(2rem, 5vw, 3.5rem) 0; }

body.nn-theme .nn-hero__figure { text-align: center; }

body.nn-theme .nn-hero__img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 1rem;
    box-shadow: 0 24px 48px -22px rgba(var(--nn-plum-rgb), 0.35);
}

body.nn-theme .nn-hero__eyebrow {
    color: var(--nn-gold);
    font-family: var(--nn-font-body);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

body.nn-theme .nn-hero__title {
    font-size: clamp(2.35rem, 4.8vw, 3.15rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
}

body.nn-theme .nn-hero__lead {
    color: var(--nn-muted);
    font-size: 1.1rem;
    line-height: 1.75;
    max-width: 46ch;
    margin-bottom: 2rem;
}

body.nn-theme .nn-hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

/* --------------------------------------------------------------------------
   Trust strip (inherited markup) — the export stacks icon-over-caption,
   centred, in regular case, on the surface-container band; the base renders
   an icon-left / uppercase-title-right row.
   -------------------------------------------------------------------------- */
body.nn-theme .mr-trust {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
}

body.nn-theme .mr-trust svg { color: var(--nn-plum); width: 30px; height: 30px; }

body.nn-theme .mr-trust strong {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--nn-muted);
}

body.nn-theme .mr-trust span { display: block; }

/* --------------------------------------------------------------------------
   Inherited promo tiles — the export tints its scrim with the brand plum
   (from-primary/60) rather than neutral black, and shows a title only. The
   hover caption swap stays white; see the CONTRAST note.
   -------------------------------------------------------------------------- */
body.nn-theme .mr-promo { border-radius: 1rem; }

body.nn-theme .mr-promo__scrim {
    background: linear-gradient(0deg, rgba(var(--nn-plum-rgb), 0.72) 0%, rgba(var(--nn-plum-rgb), 0.18) 55%, rgba(var(--nn-plum-rgb), 0) 100%);
}

body.nn-theme .mr-promo:hover .mr-promo__scrim {
    background: linear-gradient(0deg, rgba(var(--nn-plum-rgb), 0.86) 0%, rgba(var(--nn-plum-rgb), 0.34) 62%, rgba(var(--nn-plum-rgb), 0.06) 100%);
}

body.nn-theme .mr-promo__title { font-family: var(--nn-font-head); font-weight: 600; }

body.nn-theme .mr-promo:hover .mr-promo__cta { color: #fff; border-color: #fff; }

/* --------------------------------------------------------------------------
   Section link ("View All" / "Read Journal") — the export's plain underlined
   plum text link at the right of a section header.
   -------------------------------------------------------------------------- */
body.nn-theme .nn-view-all {
    color: var(--nn-plum);
    font-family: var(--nn-font-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

body.nn-theme .nn-view-all:hover { color: var(--nn-plum-deep); }

/* --------------------------------------------------------------------------
   Wardrobe stages band (nine-moons-ONLY child section) — a full-width plum
   band with ringed ordinal marks. Everything on it is white or near-white on
   #724350 (7.97:1 at full opacity).
   -------------------------------------------------------------------------- */
body.nn-theme .nn-stages {
    background: var(--nn-plum);
    padding: clamp(3.5rem, 8vw, 5.5rem) 0;
}

body.nn-theme .nn-stages__title {
    color: #fff;
    font-family: var(--nn-font-head);
    font-size: clamp(1.85rem, 3.4vw, 2.35rem);
    margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}

body.nn-theme .nn-stages__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: clamp(2rem, 4vw, 2.75rem);
}

body.nn-theme .nn-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
}

body.nn-theme .nn-stage__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.38);
    font-family: var(--nn-font-head);
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.92);
}

body.nn-theme .nn-stage__label {
    color: #fff;
    font-family: var(--nn-font-head);
    font-size: 1.35rem;
    font-weight: 500;
    margin: 0;
}

body.nn-theme .nn-stage__text {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.98rem;
    max-width: 26ch;
}

/* --------------------------------------------------------------------------
   Shop by Category — large circular tiles sunk into a soft-cream panel, each
   with a plum ring on hover and a serif plum label beneath. Fully
   data-driven (see the partial) — no static tile list.
   -------------------------------------------------------------------------- */
body.nn-theme .nn-categories { background-color: var(--nn-band); }

body.nn-theme .nn-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    text-decoration: none;
}

body.nn-theme .nn-cat__frame {
    display: block;
    width: clamp(120px, 14vw, 190px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    background: var(--nn-fill);
    border: 2px solid transparent;
    box-shadow: var(--mr-shadow);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

body.nn-theme .nn-cat:hover .nn-cat__frame {
    border-color: var(--nn-plum);
    box-shadow: 0 16px 30px rgba(var(--nn-plum-rgb), 0.18);
}

body.nn-theme .nn-cat__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

body.nn-theme .nn-cat__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--nn-band-alt), var(--nn-fill));
}

body.nn-theme .nn-cat__label {
    font-family: var(--nn-font-head);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--nn-plum);
}

/* --------------------------------------------------------------------------
   Journal — white 16px story cards with the cover bleeding to the top edge,
   a bronze category label and a serif plum title (the export's card).
   -------------------------------------------------------------------------- */
body.nn-theme .nn-story {
    height: 100%;
    background: var(--nn-white);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: var(--mr-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

body.nn-theme .nn-story:hover {
    box-shadow: 0 16px 30px rgba(var(--nn-plum-rgb), 0.14);
    transform: translateY(-2px);
}

body.nn-theme .nn-story__media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

body.nn-theme .nn-story__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

body.nn-theme .nn-story:hover .nn-story__media img { transform: scale(1.05); }

body.nn-theme .nn-story__body { padding: 1.5rem; }

body.nn-theme .nn-story__label {
    color: var(--nn-gold);
    font-family: var(--nn-font-body);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

body.nn-theme .nn-story__title {
    font-family: var(--nn-font-head);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.3;
}

body.nn-theme .nn-story__title a { color: var(--nn-plum); text-decoration: none; }
body.nn-theme .nn-story__title a:hover { color: var(--nn-plum-deep); }

body.nn-theme .nn-story__excerpt { color: var(--nn-muted); font-size: 0.96rem; }

/* --------------------------------------------------------------------------
   Newsletter — the export's inset panel (surface-container-high, 16px
   radius) rather than a full-bleed band: plum display heading, muted lead, a
   white pill field and a plum pill Subscribe button.
   -------------------------------------------------------------------------- */
body.nn-theme .nn-newsletter { padding: 0 0 clamp(3rem, 7vw, 5rem); }

body.nn-theme .nn-newsletter__panel {
    background: var(--nn-fill);
    border-radius: 1rem;
    padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 5vw, 3rem);
}

body.nn-theme .nn-newsletter__title {
    color: var(--nn-plum);
    font-family: var(--nn-font-head);
    font-size: clamp(1.9rem, 4vw, 2.75rem);
    letter-spacing: -0.02em;
}

body.nn-theme .nn-newsletter__body {
    color: var(--nn-muted);
    max-width: 52ch;
    font-size: 1.05rem;
}

body.nn-theme .nn-newsletter__form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    max-width: 30rem;
}

body.nn-theme .nn-newsletter__form input {
    flex: 1 1 15rem;
    border: 1px solid var(--nn-border-strong);
    border-radius: var(--nn-radius);
    padding: 0.9rem 1.5rem;
    color: var(--nn-dark);
    background: var(--nn-cream);
}

body.nn-theme .nn-newsletter__form input::placeholder { color: var(--nn-soft); }

body.nn-theme .nn-newsletter__form input:focus {
    outline: none;
    border-color: var(--nn-gold);
    box-shadow: 0 0 0 3px rgba(var(--nn-gold-rgb), 0.18);
}

body.nn-theme .nn-newsletter__submit {
    border: 0;
    border-radius: var(--nn-radius);
    padding: 0.9rem 2.1rem;
    background: var(--nn-plum);
    color: #fff;
    font-family: var(--nn-font-body);
    font-weight: 600;
    letter-spacing: 0.06em;
    cursor: not-allowed; /* stub form — always disabled */
}

body.nn-theme .nn-newsletter__note {
    color: var(--nn-soft);
    font-size: 0.78rem;
    margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   Product cards (inherited mr-card) — DESIGN.md: "floating White surfaces
   with 16px corners … content inside cards should be center-aligned to
   emphasize the boutique, curated feel". Because the card gains a background
   AND a border, its text MUST be inset — the base card is borderless, so
   .mr-card__title / __price / __eyebrow sit flush by design and would
   otherwise collide with the new edge.
   -------------------------------------------------------------------------- */
body.nn-theme .mr-card {
    height: 100%;
    background: var(--nn-white);
    border: 1px solid var(--nn-border);
    border-radius: 1rem;
    overflow: hidden;
    text-align: center;
    box-shadow: var(--mr-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

body.nn-theme .mr-card:hover {
    box-shadow: 0 16px 30px rgba(var(--nn-plum-rgb), 0.16);
    transform: translateY(-2px);
}

body.nn-theme .mr-card__media {
    border-radius: 0;
    margin-bottom: 1rem;
    background: var(--nn-band);
}

/* Inset the card's own text (see the note above). */
body.nn-theme .mr-card > p,
body.nn-theme .mr-card > h3 { padding-inline: 1rem; }
body.nn-theme .mr-card > *:last-child { padding-bottom: 1.35rem; }

body.nn-theme .mr-card__eyebrow {
    color: var(--nn-soft);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 0.85rem;
}

body.nn-theme .mr-card__title {
    font-family: var(--nn-font-head);
    font-size: 1.08rem;
    font-weight: 500;
}

body.nn-theme .mr-card__title a { color: var(--nn-plum); }
body.nn-theme .mr-card__title a:hover { color: var(--nn-plum-deep); }

body.nn-theme .mr-card__price { color: var(--nn-plum); font-weight: 600; }
body.nn-theme .mr-card__price del { color: var(--nn-soft); font-weight: 400; }

/* The export's peach "Sale" chip (secondary-container fill /
   on-secondary-container text — 4.55:1). */
body.nn-theme .mr-card__sale {
    background-color: var(--nn-peach);
    color: var(--nn-peach-ink);
    border-radius: 9999px;
    padding: 0.3rem 0.65rem;
}

/* Wish + quickview are SIBLINGS — restyle together, both states. Rest state
   is plum on a near-white circle (7.97:1); hover uses the theme's own
   ink-on-surface pair, which is guaranteed safe (>14:1). */
body.nn-theme .mr-card__wish,
body.nn-theme .mr-card__quickview {
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--nn-plum);
}

body.nn-theme .mr-card__wish:hover,
body.nn-theme .mr-card__quickview:hover {
    background-color: var(--mr-surface);
    color: var(--mr-ink);
}

body.nn-theme .mr-card__wish.is-active { color: var(--nn-plum); }

/* Slide-up Add to Cart bar — plum fill, inherited #fff label (7.97:1). */
body.nn-theme .mr-card__quick {
    background: var(--nn-plum);
    font-weight: 600;
    letter-spacing: 0.1em;
}

/* --------------------------------------------------------------------------
   Inherited chrome, continued — shop sidebar filters, pagination, account
   sidebar, checkout stepper, cart row title, PDP tabs, breadcrumbs, rail
   buttons, gallery thumb. Plum is dark enough for all of these as text AND
   as a white-label fill, so they simply follow the brand colour.
   -------------------------------------------------------------------------- */
body.nn-theme .mr-filter__link:hover,
body.nn-theme .mr-filter__link.is-active { color: var(--nn-plum); }

body.nn-theme .mr-page:hover { border-color: var(--nn-plum); color: var(--nn-plum); }
body.nn-theme .mr-page.is-active { background: var(--nn-plum); border-color: var(--nn-plum); }

body.nn-theme .mr-acct-avatar { background: var(--nn-plum); }
body.nn-theme .mr-acct-link:hover { color: var(--nn-plum); }
body.nn-theme .mr-acct-link.is-active { background: var(--nn-plum); }

body.nn-theme .mr-step.is-done::before,
body.nn-theme .mr-step.is-current::before { background: var(--nn-plum); }
body.nn-theme .mr-step.is-done .mr-step__dot { background: var(--nn-plum); border-color: var(--nn-plum); }
body.nn-theme .mr-step.is-current .mr-step__dot { border-color: var(--nn-plum); color: var(--nn-plum); }

body.nn-theme .mr-cart-row__title a:hover { color: var(--nn-plum); }
body.nn-theme .mr-cart-row__media { border-radius: 0.75rem; }

body.nn-theme .mr-tabs .nav-link.active { color: var(--nn-plum); border-bottom-color: var(--nn-plum); }
body.nn-theme .mr-gallery__thumb.is-active { border-color: var(--nn-plum); }
body.nn-theme .mr-crumbs a:hover { color: var(--nn-plum); }
body.nn-theme .mr-rail-btn:hover { background: var(--nn-plum); border-color: var(--nn-plum); }

/* --------------------------------------------------------------------------
   FOOTER — the export inverts to a solid plum band. The BASE footer partial
   assumes a LIGHT surface: it renders .mr-muted / .mr-soft copy, an
   .mr-divider, a .form-control and an .mr-btn--primary, all of which resolve
   dark-on-light and would be near-invisible here. Each is inverted below
   (white at 78–82% over #724350 measures 5.4–6.0:1).
   -------------------------------------------------------------------------- */
body.nn-theme .mr-footer {
    background: var(--nn-plum);
    border-top: 0;
    color: rgba(255, 255, 255, 0.85);
}

body.nn-theme .mr-footer h4 { color: #fff; }
body.nn-theme .mr-footer__brand { font-family: var(--nn-font-head); color: #fff; }
body.nn-theme .mr-footer a { color: rgba(255, 255, 255, 0.82); }
body.nn-theme .mr-footer a:hover { color: #fff; }
body.nn-theme .mr-footer .mr-muted,
body.nn-theme .mr-footer .mr-soft { color: rgba(255, 255, 255, 0.78); }
body.nn-theme .mr-footer .mr-divider { background-color: rgba(255, 255, 255, 0.18); }

body.nn-theme .mr-footer .form-control {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.32);
    color: #fff;
}

body.nn-theme .mr-footer .form-control::placeholder { color: rgba(255, 255, 255, 0.7); }

body.nn-theme .mr-footer .form-control:focus {
    background: rgba(255, 255, 255, 0.2);
    border-color: #fff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}

/* The export's footer "Join" button is a white pill with plum text. */
body.nn-theme .mr-footer .mr-btn--primary {
    background: #fff;
    border-color: #fff;
    color: var(--nn-plum);
    box-shadow: none;
}

body.nn-theme .mr-footer .mr-btn--primary:hover {
    background: var(--nn-plum-pale);
    border-color: var(--nn-plum-pale);
    color: var(--nn-plum);
}

body.nn-theme .mr-footer .mr-social { color: #fff; border-color: rgba(255, 255, 255, 0.35); }
body.nn-theme .mr-footer .mr-social:hover { background: #fff; color: var(--nn-plum); border-color: #fff; }

body.nn-theme .mr-footer a:focus-visible,
body.nn-theme .mr-footer button:focus-visible,
body.nn-theme .mr-footer input:focus-visible { outline-color: #fff; }

/* --------------------------------------------------------------------------
   Respect reduced-motion — neutralise both the transitions AND the hover
   transforms/scales introduced above (a transition:none alone still lets a
   hover transform apply instantly, which is still motion).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.nn-theme .mr-btn,
    body.nn-theme .nn-btn-ghost,
    body.nn-theme .mr-card,
    body.nn-theme .nn-story,
    body.nn-theme .nn-story__media img,
    body.nn-theme .nn-cat__frame,
    body.nn-theme .mr-card__media img,
    body.nn-theme .mr-tile__img,
    body.nn-theme .mr-promo__img,
    body.nn-theme .mr-article__media img {
        transition: none;
    }

    body.nn-theme .mr-btn--primary:hover,
    body.nn-theme .nn-btn-ghost:hover,
    body.nn-theme .mr-card:hover,
    body.nn-theme .nn-story:hover,
    body.nn-theme .nn-story:hover .nn-story__media img,
    body.nn-theme .mr-card:hover .mr-card__media img,
    body.nn-theme .mr-tile:hover .mr-tile__img,
    body.nn-theme .mr-promo:hover .mr-promo__img,
    body.nn-theme .mr-article__media:hover img {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Mobile (from the Stitch mobile frames): the hero copy stacks above the
   photo, tighter circles, a stacked newsletter form.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    body.nn-theme .nn-hero { padding: 1.5rem 0 2.5rem; }
    body.nn-theme .nn-hero__title { font-size: 2.05rem; }
    body.nn-theme .nn-hero__img { aspect-ratio: 4 / 3; }
    body.nn-theme .nn-stages__grid { gap: 2rem; }
    body.nn-theme .nn-cat__frame { width: clamp(96px, 26vw, 132px); }
    body.nn-theme .nn-newsletter__form { flex-direction: column; }
    body.nn-theme .nn-newsletter__form input,
    body.nn-theme .nn-newsletter__submit { width: 100%; }
}