/* ==========================================================================
   Nest & Cradle — calm, tactile storefront for organic newborn/baby
   essentials.

   Ported from the Stitch "Nest & Cradle" design (the design system lives at
   docs/templates/pending/stitch_24_nest_cradle_e_commerce_store/…/DESIGN.md):
   a "tranquility and maternal warmth" narrative — a cloud-ivory canvas, soft
   sage for primary actions/icons, a delicate blush accent reserved for
   fills, full-pill buttons, 16px-rounded cards and perfectly circular
   milestone/category tiles. Lora (the allowlist stand-in for the export's
   Literata) serif headings over Source Sans 3 body/UI/price.

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

     (a) style the NEW `nc-*` markup into the Stitch design; and
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
         base neutral tokens at the ivory palette, rounding cards/inputs to
         the 16px/pill shape language, and fixing every place the base
         renders the brand colours AS TEXT or as a white-text FILL (see the
         CONTRAST section below).

   Everything is scoped under `body.nc-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 via the repo's own App\Support\Theming\ContrastChecker
   (a one-off script against the exact ratio() formula, not a test — do not
   "simplify" these back to raw tokens without re-checking):

     · The customizer's primary_color token is the DESIGN.md-named "Soft Sage
       Green" #6f8b72 — but #6f8b72 on the cloud-ivory canvas (#fdf9f4) is
       only 3.51:1, and white text on a raw #6f8b72 FILL is 3.74:1. Both fail
       WCAG AA for normal text / white-on-fill (4.5:1), though both clear the
       3:1 floor for large/bold text and for icons/UI components. The
       export's OWN rendered CSS never actually paints text or button fills
       with #6f8b72 either — its `.sage-pill` / `.ghost-pill` / `text-primary`
       rules all resolve to the DESIGN.md YAML's darker `primary: #48624b`.
       So a FIXED, customizer-independent sibling, --nc-ink (#48624b),
       carries every TEXT role (links, eyebrows, prices, nav, --bs-link-color)
       and every FILL that carries default white label text (buttons,
       announce bar, badges, quick-add bar, filled pagination/account/step
       states) — measured 6.30:1 on ivory, 6.72:1 on white, 6.72:1 as
       white-on-fill. Raw --nc-sage (the customizer token) is reserved for
       icon glyphs and decorative hover-ring borders, where the 3:1 floor is
       enough (3.51–3.74:1 measured).
     · The accent_color token, blush #e8b4a8, is even lighter: white text on
       it is 1.82:1, and even as a small icon on white/ivory it is only
       1.71–1.82:1 — BELOW the 3:1 icon floor, let alone 4.5:1 for text. Blush
       therefore NEVER appears as text or as a small icon in this stylesheet
       — every base rule that painted `--ll-accent` as text/icon (.mr-eyebrow,
       .mr-ulink, .mr-nav-link.is-active, .mr-icon-btn:hover, .mr-badge--wish,
       .mr-card__wish.is-active, .mr-card__title a:hover, .mr-trust svg,
       .mr-footer a:hover, .mr-crumbs a:hover, .mr-cart-row__title a:hover,
       .mr-tabs .nav-link.active border, the focus-visible outline) is
       re-pointed to --nc-ink. Blush is used only as a FILL paired with dark
       text: the hero eyebrow pill (blush bg + --mr-ink text, 9.37:1) and the
       newsletter Subscribe button (blush bg + --mr-ink text). The base's
       `.mr-announce` band also fills with `--ll-accent` + white text by
       default (1.82:1) — repointed to --nc-ink (6.72:1) below; note the
       shared, non-theme `.mr-card__badge` "Sale" badge is hard-coded red/
       white in storefront::head.theme-vars (platform-wide, not
       theme-driven), so it needed no fix here.
     · `.mr-promo:hover .mr-promo__cta` (the promo-tile hover caption) swaps
       to `--ll-accent` as TEXT over a photo dimmed by a semi-transparent
       scrim. Modelled against the scrim's own darkest stop (rgba(0,0,0,.6))
       blush measures a comfortable 11.53:1 on a black photo but only 3.15:1
       on a near-white one — an arbitrary merchant photo can legitimately be
       bright, so (mirroring the platform rule that a hero overlay is never
       `background: none`) the hover colour is kept at the caption's own safe
       rest-state white instead of gambling on an accent swap.
   ========================================================================== */

body.nc-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --nc-sage: var(--bs-primary, #6f8b72);
    --nc-sage-rgb: var(--bs-primary-rgb, 111, 139, 114);
    --nc-blush: var(--ll-accent, #e8b4a8);
    --nc-blush-rgb: var(--bs-warning-rgb, 232, 180, 168);
    --nc-radius: var(--ll-btn-radius, 2rem);
    --nc-font-head: var(--ll-font-headings, "Lora"), Georgia, "Times New Roman", serif;
    --nc-font-body: var(--ll-font-body, "Source Sans 3"), system-ui, -apple-system, sans-serif;

    /* Text-safe sage sibling — FIXED, independent of the customizer token.
       See the CONTRAST note above: 6.30:1 on the ivory canvas vs raw sage's
       3.51:1. This is also the export's OWN literal button/price colour. */
    --nc-ink: #48624b;

    /* Nest & Cradle palette (DESIGN.md's Material tonal scale) */
    --nc-dark: #1c1c19; /* on-surface — near-black body/heading ink */
    --nc-muted: #424842; /* on-surface-variant — nav/muted copy */
    --nc-soft: #6b7169; /* darkened outline (#737971 was 4.26:1, under 4.5:1) */
    --nc-ivory: #fdf9f4; /* surface/background — the canvas the export renders */
    --nc-white: #ffffff;
    --nc-band: #f7f3ee; /* surface-container-low */
    --nc-band-alt: #f1ede8; /* surface-container */
    --nc-fill: #ebe8e3; /* surface-container-high */
    --nc-border: #e6e2dd; /* surface-container-highest / surface-variant */
    --nc-border-strong: #c2c8c0; /* outline-variant */

    /* Re-point the inherited base neutrals at the ivory palette so every
       inherited mr-* surface (bands, borders, fills, muted text) follows —
       this single block restyles all ~24 inherited pages. */
    --mr-ink: var(--nc-dark);
    --mr-muted: var(--nc-muted);
    --mr-soft: var(--nc-soft);
    --mr-surface: var(--nc-ivory);
    --mr-band: var(--nc-band);
    --mr-band-alt: var(--nc-band-alt);
    --mr-fill: var(--nc-fill);
    --mr-border: var(--nc-border);
    --mr-border-strong: var(--nc-border-strong);
    --mr-radius: 1rem; /* DESIGN.md: cards standardise on 16px */
    --mr-gold: var(--nc-ink); /* star ratings — blush fails even the 3:1 icon floor */
    /* DESIGN.md: "Surface Level 1: white containers with a subtle 10%
       opacity Sage tint in the shadow." */
    --mr-shadow: 0 10px 20px rgba(var(--nc-sage-rgb), 0.1);

    /* 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. */
    --bs-link-color: var(--nc-ink);
    --bs-link-color-rgb: 72, 98, 75;

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

/* --------------------------------------------------------------------------
   Typography — Lora authority for headings, kept neutral ink (the export
   never tints its section H2s sage — only buttons/prices/links carry
   colour). Bare anchors (no .mr-* class) fall through to --bs-link-color,
   reasserted here belt-and-suspenders alongside the --bs-link-color-rgb fix.
   -------------------------------------------------------------------------- */
body.nc-theme h1, body.nc-theme h2, body.nc-theme h3,
body.nc-theme h4, body.nc-theme h5, body.nc-theme h6,
body.nc-theme .mr-display {
    font-family: var(--nc-font-head);
    color: var(--nc-dark);
    font-weight: 600;
    letter-spacing: -0.01em;
}

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

body.nc-theme .nc-eyebrow--on-dark { color: rgba(255, 255, 255, 0.85); }

body.nc-theme a { color: var(--nc-ink); }
body.nc-theme a:hover { color: var(--nc-dark); }

/* --------------------------------------------------------------------------
   Buttons — fully pill-shaped (button_radius token), ink fill primary,
   ink-keyline outline/ghost. Raw sage is never a button fill/text colour —
   see the CONTRAST note.
   -------------------------------------------------------------------------- */
body.nc-theme .mr-btn {
    font-weight: 600;
    letter-spacing: 0.08em;
    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.nc-theme .mr-btn--primary {
    background: var(--nc-ink);
    border-color: var(--nc-ink);
    box-shadow: 0 10px 20px rgba(var(--nc-sage-rgb), 0.22);
}

body.nc-theme .mr-btn--primary:hover {
    filter: none;
    background: #334d37; /* the export's own .sage-pill:hover darken */
    border-color: #334d37;
    transform: translateY(-1px);
}

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

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

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

body.nc-theme .nc-btn-pill { padding: 1.05rem 2.2rem; font-size: 0.85rem; }
/* Re-assert the primary button's light label. The bare `body.nc-theme a`
   link-colour rule above (needed so prose links aren't Bootstrap-blue) is
   specificity (0,1,2) and would otherwise repaint every <a>-based
   .mr-btn--primary — e.g. the hero CTA — to sage-ink, making the label vanish
   on the ink fill. (0,2,1) wins it back to white (6.7:1 on --nc-ink). */
body.nc-theme .mr-btn--primary { color: #fff; }

/* Sage ghost-outline pill — the hero's secondary "Build a Gift Box" action;
   mirrors the export's own .ghost-pill (border/text #48624b, hover tint
   #f6fff3 = primary-fixed, a very light mint). */
body.nc-theme .nc-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: calc(1.05rem - 2px) calc(2.2rem - 2px);
    border: 2px solid var(--nc-ink);
    border-radius: var(--nc-radius);
    color: var(--nc-ink);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

body.nc-theme .nc-btn-ghost:hover {
    background: #f6fff3;
    transform: translateY(-1px);
}

/* Bootstrap's own `.btn-primary` (the shared reviews.blade.php "Submit
   review" button) — theme-vars.blade.php sets --bs-btn-bg to the raw
   customizer primary but never --bs-btn-color, which stays Bootstrap's
   compiled #fff -> the same white-on-raw-sage 3.74:1 failure as above. */
body.nc-theme .btn-primary {
    --bs-btn-bg: var(--nc-ink);
    --bs-btn-border-color: var(--nc-ink);
    --bs-btn-hover-bg: #334d37;
    --bs-btn-hover-border-color: #334d37;
    --bs-btn-active-bg: #334d37;
    --bs-btn-active-border-color: #334d37;
    --bs-btn-disabled-bg: var(--nc-ink);
    --bs-btn-disabled-border-color: var(--nc-ink);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #fff;
}

/* --------------------------------------------------------------------------
   Inputs — soft ivory fill, sage border on focus, 12px radius. NEVER a
   padding shorthand on .form-select (eats Bootstrap's 2.25rem caret gutter —
   the base already restores it via padding-inline-end, untouched here).
   -------------------------------------------------------------------------- */
body.nc-theme .form-control,
body.nc-theme .form-select {
    background-color: var(--nc-white);
    border-color: var(--nc-border);
    border-radius: 0.75rem;
    color: var(--nc-dark);
}

body.nc-theme .form-control:focus,
body.nc-theme .form-select:focus {
    border-color: var(--nc-ink);
    box-shadow: 0 0 0 3px rgba(var(--nc-sage-rgb), 0.16);
}

body.nc-theme a:focus-visible,
body.nc-theme button:focus-visible,
body.nc-theme input:focus-visible {
    outline-color: var(--nc-ink);
}

/* --------------------------------------------------------------------------
   Announcement + header — inherited logo-left single-row chrome (matches
   the export's structure: logo, inline nav, search/account/cart icons — no
   header override needed), restyled in place.
   -------------------------------------------------------------------------- */
/* Fill is --nc-ink, not raw blush: rgba(255,255,255,.95) on #e8b4a8 measures
   well under 2:1 (fails 4.5:1); on #48624b it is a safe 6.72:1-class ratio. */
body.nc-theme .mr-announce {
    background-color: var(--nc-ink);
    background-image: none;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.1em;
    font-size: 0.72rem;
}

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

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

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

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

body.nc-theme .mr-icon-btn { color: var(--nc-dark); }
body.nc-theme .mr-icon-btn:hover { color: var(--nc-ink); }
body.nc-theme .mr-badge { background-color: var(--nc-ink); }
body.nc-theme .mr-badge--wish { background-color: var(--nc-ink); }

/* --------------------------------------------------------------------------
   Hero — split layout adapted from paws-whiskers'/lumiere's pattern with the
   export's own column order: soft rounded photo left, copy right. Rose-pink
   eyebrow pill uses the blush accent (a genuine, safe, customizer-tied use
   of --nc-blush) with dark ink text (9.37:1).
   -------------------------------------------------------------------------- */
body.nc-theme .nc-hero { padding: clamp(2rem, 5vw, 3.5rem) 0; }

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

body.nc-theme .nc-hero__img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 1.25rem;
    box-shadow: 0 24px 48px -20px rgba(var(--nc-sage-rgb), 0.3);
}

body.nc-theme .nc-hero__eyebrow {
    display: inline-block;
    background: var(--nc-blush);
    color: var(--nc-dark);
    font-family: var(--nc-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.4rem 1.1rem;
    border-radius: 9999px;
    margin-bottom: 1.5rem;
}

body.nc-theme .nc-hero__title {
    font-size: clamp(2.25rem, 4.6vw, 3rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
}

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

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

/* --------------------------------------------------------------------------
   Trust strip (inherited markup) — the export stacks icon-over-caption,
   centred, not the base's icon-left/text-right row; captions are regular
   case, not the base's uppercase-tracked title. Icons use raw sage (3.51–
   3.74:1, clears the 3:1 icon floor).
   -------------------------------------------------------------------------- */
body.nc-theme .mr-trust {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
}

body.nc-theme .mr-trust svg { color: var(--nc-sage); width: 28px; height: 28px; }

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

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

/* --------------------------------------------------------------------------
   Shop by Milestone — nest-cradle-ONLY child section: circular stage tiles
   ringed in sage on hover, muted labels beneath swapping to ink (matches the
   export's group-hover:border-primary-container / group-hover:text-primary).
   -------------------------------------------------------------------------- */
body.nc-theme .nc-stages {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(1.5rem, 4vw, 3rem);
}

body.nc-theme .nc-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
}

body.nc-theme .nc-stage__circle {
    display: block;
    width: clamp(96px, 12vw, 152px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    padding: 4px;
    border: 2px solid transparent;
    overflow: hidden;
    background: var(--nc-band);
    transition: border-color 0.25s ease, transform 0.25s ease;
}

body.nc-theme .nc-stage:hover .nc-stage__circle {
    border-color: var(--nc-sage);
    transform: translateY(-3px);
}

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

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

body.nc-theme .nc-stage__label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--nc-muted);
    transition: color 0.2s ease;
}

body.nc-theme .nc-stage:hover .nc-stage__label { color: var(--nc-ink); }

/* --------------------------------------------------------------------------
   Inherited promo tiles — radius already follows --mr-radius (1rem). The
   hover caption swap is kept at the rest-state's safe white rather than the
   accent — see the CONTRAST note (blush measured as low as 3.15:1 against a
   bright merchant photo under the scrim's lightest stop).
   -------------------------------------------------------------------------- */
body.nc-theme .mr-promo:hover .mr-promo__cta {
    color: #fff;
    border-color: #fff;
}

/* --------------------------------------------------------------------------
   Featured / New Arrivals — "View All" text links (heading left, link
   right, per the export), reusing the base's product-card grid.
   -------------------------------------------------------------------------- */
body.nc-theme .nc-view-all {
    color: var(--nc-ink);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

body.nc-theme .nc-view-all:hover { color: var(--nc-dark); }

/* --------------------------------------------------------------------------
   Essential Collections — bare circular tiles (white 4px keyline + soft
   shadow, no card box), centred uppercase-tracked label beneath. Still
   fully data-driven (see the partial) — no static tile list.
   -------------------------------------------------------------------------- */
body.nc-theme .nc-categories { background-color: var(--nc-fill); }

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

body.nc-theme .nc-cat__frame {
    display: block;
    width: clamp(120px, 14vw, 192px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--nc-white);
    box-shadow: var(--mr-shadow);
    transition: box-shadow 0.25s ease;
}

body.nc-theme .nc-cat:hover .nc-cat__frame {
    box-shadow: 0 16px 32px rgba(var(--nc-sage-rgb), 0.2);
}

body.nc-theme .nc-cat__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

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

body.nc-theme .nc-cat__label {
    font-family: var(--nc-font-body);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nc-muted);
}

/* --------------------------------------------------------------------------
   Journal (inherited) — colour follows the --mr-* re-point; only the
   accent-as-text hover needs fixing.
   -------------------------------------------------------------------------- */
body.nc-theme .mr-article__title a:hover { color: var(--nc-ink); }

/* --------------------------------------------------------------------------
   Newsletter — "The Nightlight": solid ink band (the export's bg-primary,
   which itself resolves to #48624b), white Lora heading, white pill email
   field, blush pill Subscribe button with dark ink text (see CONTRAST note).
   -------------------------------------------------------------------------- */
body.nc-theme .nc-newsletter {
    background: var(--nc-ink);
    padding: clamp(3.5rem, 8vw, 5.5rem) 0;
}

body.nc-theme .nc-newsletter__title {
    color: #fff;
    font-size: clamp(2rem, 4.2vw, 3rem);
}

body.nc-theme .nc-newsletter__body {
    color: rgba(255, 255, 255, 0.85);
    max-width: 52ch;
    margin-inline: auto;
    font-size: 1.05rem;
}

body.nc-theme .nc-newsletter__form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    max-width: 28rem;
    margin-inline: auto;
}

body.nc-theme .nc-newsletter__form input {
    flex: 1 1 14rem;
    border: 0;
    border-radius: var(--nc-radius);
    padding: 0.95rem 1.5rem;
    color: var(--nc-dark);
    background: #fff;
}

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

body.nc-theme .nc-newsletter__form input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--nc-blush-rgb), 0.55);
}

/* Blush fill + dark ink text — white text on blush is 1.82:1 (fails even the
   3:1 icon floor); --mr-ink (near-black) on blush measures 9.37:1. */
body.nc-theme .nc-newsletter__submit {
    border: 0;
    border-radius: var(--nc-radius);
    padding: 0.95rem 2rem;
    background: var(--nc-blush);
    color: var(--mr-ink);
    font-weight: 600;
    cursor: not-allowed; /* stub form — always disabled */
}

body.nc-theme .nc-newsletter__note {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.78rem;
}

/* --------------------------------------------------------------------------
   Product cards (inherited mr-card) — the export shows NO card box (just the
   media well + flush text below, exactly the base's default borderless
   shape), so no inset-text padding is needed. Media well tints to the ivory
   band; price renders in ink per the export's text-primary price role.
   -------------------------------------------------------------------------- */
body.nc-theme .mr-card__media { background: var(--nc-band); }

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

body.nc-theme .mr-card__price { color: var(--nc-ink); font-weight: 600; }
body.nc-theme .mr-card__price del { color: var(--nc-soft); }

/* Wish + quickview are SIBLINGS — restyle together, both states. Rest state
   uses ink (headroom over the raw-sage floor-only pass); hover uses the
   theme's own ink-on-surface pair (guaranteed safe). The "active" (saved)
   heart uses ink rather than DESIGN.md's literal blush — raw blush on a
   near-white circle measures ~1.82:1, well below the 3:1 icon floor. */
body.nc-theme .mr-card__wish,
body.nc-theme .mr-card__quickview {
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--nc-ink);
}

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

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

/* Fill is --nc-ink, not raw sage — same white-on-raw-sage failure (3.74:1)
   as every other primary fill above; inherited #fff label text is 6.72:1 on
   #48624b. */
body.nc-theme .mr-card__quick {
    background: var(--nc-ink);
    font-weight: 600;
    letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   Inherited chrome, continued — shop sidebar filters, pagination, account
   sidebar, checkout stepper, cart row title, PDP tabs, breadcrumbs, footer,
   social, gallery thumb. Every one renders raw sage (as text, 3.51–3.74:1;
   fails 4.5:1) or white-on-raw-sage (as a filled "current/done/active"
   state, 3.74:1; fails 4.5:1), or raw blush as text/icon (as low as
   1.71:1). Text/fill roles -> --nc-ink; a handful of purely decorative
   borders are left on the raw customizer sage, which clears the 3:1 floor.
   -------------------------------------------------------------------------- */
body.nc-theme .mr-filter__link:hover,
body.nc-theme .mr-filter__link.is-active { color: var(--nc-ink); }

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

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

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

body.nc-theme .mr-cart-row__title a:hover { color: var(--nc-ink); }

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

body.nc-theme .mr-footer { background: var(--nc-band); }
body.nc-theme .mr-footer__brand { font-family: var(--nc-font-head); color: var(--nc-ink); }
body.nc-theme .mr-footer a:hover { color: var(--nc-ink); }
body.nc-theme .mr-social { color: var(--nc-ink); }
body.nc-theme .mr-social:hover { background: var(--nc-ink); border-color: var(--nc-ink); }

/* --------------------------------------------------------------------------
   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.nc-theme .mr-btn,
    body.nc-theme .nc-btn-ghost,
    body.nc-theme .nc-stage__circle,
    body.nc-theme .nc-cat__frame,
    body.nc-theme .mr-card__media img,
    body.nc-theme .mr-tile__img,
    body.nc-theme .mr-promo__img,
    body.nc-theme .mr-article__media img {
        transition: none;
    }

    body.nc-theme .mr-btn--primary:hover,
    body.nc-theme .nc-btn-ghost:hover,
    body.nc-theme .nc-stage:hover .nc-stage__circle,
    body.nc-theme .nc-cat:hover .nc-cat__frame,
    body.nc-theme .mr-card:hover .mr-card__media img,
    body.nc-theme .mr-tile:hover .mr-tile__img,
    body.nc-theme .mr-promo:hover .mr-promo__img,
    body.nc-theme .mr-article__media:hover img {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Mobile (from the Stitch mobile frame): smaller hero title + tighter
   figure, tighter stage/category circles, stacked newsletter form.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    body.nc-theme .nc-hero { padding: 2rem 0 2.5rem; }
    body.nc-theme .nc-hero__title { font-size: 2rem; }
    body.nc-theme .nc-hero__img { aspect-ratio: 4 / 3; }
    body.nc-theme .nc-stages { gap: 1.25rem; }
    body.nc-theme .nc-stage__circle { width: clamp(72px, 22vw, 96px); }
    body.nc-theme .nc-cat__frame { width: clamp(96px, 24vw, 128px); }
    body.nc-theme .nc-newsletter__form { flex-direction: column; }
    body.nc-theme .nc-newsletter__form input,
    body.nc-theme .nc-newsletter__submit { width: 100%; }
}