/* ==========================================================================
   Slumber Co — a mattress, foam & sleep-essentials storefront
   (extends modern-retail).

   Ported from the Stitch "Slumber Co | Engineered for Deep Sleep" export
   (docs/templates/pending/stitch_67_slumber_co_e_commerce_homepage; the
   "Serene Sleep System" DESIGN.md is the design-system source). This theme
   INHERITS every modern-retail page + partial and ships only its own brand
   layer plus seven home partials with `sc-*` markup. This stylesheet therefore
   has two jobs:

     (a) RE-POINT the base neutral tokens (--mr-*) at the Dawn Light palette so
         every inherited page (shop / PDP / cart / checkout / account / blog)
         reads on-brand, and finish the inherited chrome (buttons, forms,
         header, trust, promo, card, category tiles, footer);

     (b) style the theme's own `sc-*` sections — the split hero island, the
         "Best Sleepers" grid, the midnight-blue firmness band, the dream-sky
         trial-promise banner, the New Arrivals keyline link, the journal cards
         and the "Better Mornings" newsletter panel.

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

   Palette (from the export's rendered code.html + DESIGN.md prose):
     Midnight blue  #071e3a (rendered `primary` — announcement bar, display
                    headlines, CTAs, the firmness band, the footer; the
                    theme.json primary_color; 16.7:1 on white)
     Navy mid       #1f3350 (rendered `primary-container` — DESIGN.md's button
                    navy; button + link hover)
     Dream sky ink  #2c6485 (rendered `secondary` — the accent_color: eyebrows,
                    trust glyphs, keyline links. 6.4:1 on white / 5.9:1 on the
                    canvas, so it is safe as TEXT, not only as a fill)
     Dream sky      #a4d8fe (rendered `secondary-container` — the trial banner,
                    sale badges and the firmness glyphs; always carries
                    midnight ink, never white: 11.0:1)
     Canvas         #f4f6f8 calm grey-blue base · #ffffff content islands ·
                    #f5f3f6 / #efedf0 tonal bands
     Ink            #1b1b1e · muted #44474d · soft #74777e · lines #e4e9ef

   Shape: DESIGN.md "Soft Precision" — a 12px (0.75rem) radius on buttons,
   inputs and cards, 8px on nested chips. Depth is tonal layering plus an
   ambient midnight-tinted shadow, never a heavy drop shadow.
   ========================================================================== */

body.sc-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --sc-navy: var(--bs-primary, #071e3a);
    --sc-navy-rgb: var(--bs-primary-rgb, 7, 30, 58);
    --sc-sky-ink: var(--ll-accent, #2c6485);
    --sc-radius: var(--ll-btn-radius, 0.75rem);
    --sc-font-head: var(--ll-font-headings, "Poppins"), system-ui, sans-serif;
    --sc-font-body: var(--ll-font-body, "Inter"), system-ui, -apple-system, sans-serif;

    /* Literal palette */
    --sc-navy-mid: #1f3350;
    --sc-sky: #a4d8fe;
    --sc-sky-soft: #c8e6ff;
    --sc-canvas: #f4f6f8;
    --sc-white: #ffffff;
    --sc-tonal: #f5f3f6;
    --sc-tonal-2: #efedf0;
    --sc-tonal-3: #e3e2e5;
    --sc-ink: #1b1b1e;
    --sc-muted: #44474d;
    /* DESIGN.md's `outline` #74777e is a HAIRLINE colour and measures only
       4.48:1 on white / 3.85:1 on the newsletter panel — it fails AA in the
       text roles the base gives --mr-soft (card sub-line, small print). Ship a
       fractionally darker sibling instead: 5.34 / 4.93 / 4.59:1. */
    --sc-soft: #686b72;
    --sc-line: #e4e9ef;
    --sc-line-2: #c4c6ce;

    /* Depth — DESIGN.md "Ambient Shadow": 0 offset, wide blur, 4% midnight */
    --sc-shadow: 0 0 20px rgba(31, 51, 80, 0.05);
    --sc-shadow-lg: 0 10px 30px rgba(31, 51, 80, 0.09);

    /* Re-point the inherited base neutrals at the Dawn Light palette so every
       inherited mr-* surface (bands, borders, fills, muted text, radius) reads
       on-brand across every inherited page. */
    --mr-ink: var(--sc-ink);
    --mr-muted: var(--sc-muted);
    --mr-soft: var(--sc-soft);
    --mr-surface: var(--sc-white);
    --mr-band: var(--sc-tonal);
    --mr-band-alt: var(--sc-canvas);
    --mr-fill: var(--sc-tonal-3);
    --mr-border: var(--sc-line);
    --mr-border-strong: var(--sc-line-2);
    --mr-radius: var(--sc-radius);
    --mr-gold: var(--sc-sky-ink);
    --mr-shadow: var(--sc-shadow);

    /* Bare prose links read midnight rather than Bootstrap blue. Set the RGB
       token (NOT a bare `body.sc-theme a` rule — that out-specifies
       .mr-btn--primary's white label and blanks the hero CTA). */
    --bs-link-color-rgb: var(--sc-navy-rgb);
    --bs-link-hover-color-rgb: 31, 51, 80;

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

/* ===== Typography ======================================================== */
/* DESIGN: display-lg / headline-lg / headline-md are the geometric headline
   face at 600 with tight tracking; body copy is Inter 400 at 1.6. */
body.sc-theme h1, body.sc-theme h2, body.sc-theme h3,
body.sc-theme h4, body.sc-theme h5, body.sc-theme h6 {
    font-family: var(--sc-font-head);
    color: var(--sc-ink);
    font-weight: 600;
    letter-spacing: -0.01em;
}
body.sc-theme .mr-display {
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--sc-navy);
}
body.sc-theme .mr-headline { font-weight: 600; }
body.sc-theme .sc-section-title { font-size: clamp(1.6rem, 3vw, 2rem); }

/* label-sm: Inter 500, 12px, 0.05em — routed through the dream-sky INK, which
   clears AA on both the white islands (6.4:1) and the canvas (5.9:1). */
body.sc-theme .mr-eyebrow,
body.sc-theme .sc-eyebrow {
    font-family: var(--sc-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--sc-sky-ink);
}

/* Decorative arrows on the template's "Explore →" / "Read More ↗" links
   (theme chrome, never merchant data). */
body.sc-theme .sc-arrow::after { content: " \2192"; }
body.sc-theme .sc-arrow-ne::after { content: " \2197"; }

/* ===== Buttons (12px "Soft Precision" corners) =========================== */
/* DESIGN: Primary = Midnight Blue fill + white label (16.7:1); Secondary =
   transparent with a 1px midnight border and midnight label. */
body.sc-theme .mr-btn {
    font-family: var(--sc-font-body);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    border-radius: var(--sc-radius);
    padding: 0.85rem 1.75rem;
    transition: background-color 0.22s, color 0.22s, border-color 0.22s, opacity 0.22s;
}
body.sc-theme .mr-btn--hero { padding: 1rem 2rem; }
body.sc-theme .mr-btn--primary { background-color: var(--sc-navy); color: #fff; }
body.sc-theme .mr-btn--primary:hover { background-color: var(--sc-navy-mid); color: #fff; filter: none; }
body.sc-theme .mr-btn--outline { border-color: var(--sc-navy); color: var(--sc-navy); }
body.sc-theme .mr-btn--outline:hover { background-color: var(--sc-navy); color: #fff; }
body.sc-theme .mr-btn--light { background-color: #fff; color: var(--sc-navy); }
body.sc-theme .mr-btn--light:hover { background-color: var(--sc-sky); color: var(--sc-navy); }
body.sc-theme .mr-btn--on-dark { border-color: rgba(255, 255, 255, 0.75); color: #fff; }
body.sc-theme .mr-btn--on-dark:hover { background-color: #fff; color: var(--sc-navy); }
body.sc-theme .mr-btn--ghost { color: var(--sc-navy); }
body.sc-theme .mr-btn--ghost:hover { color: var(--sc-sky-ink); }
body.sc-theme .mr-ulink:hover { color: var(--sc-sky-ink); border-color: var(--sc-sky-ink); }
body.sc-theme .mr-rail-btn:hover { background: var(--sc-navy); border-color: var(--sc-navy); color: #fff; }

/* Known-defect guard: re-assert the primary label so no anchor-colour rule
   can ever repaint it (the hero CTA is an <a>, not a <button>). */
body.sc-theme .mr-btn.mr-btn--primary { color: #fff; }

/* ===== Forms (white field, 1px blue-grey keyline, 12px radius) =========== */
body.sc-theme .form-control,
body.sc-theme .form-select {
    border-radius: var(--sc-radius);
    border-color: #d1d9e0;
    background-color: var(--sc-white);
    color: var(--sc-ink);
}
/* DESIGN "Input Fields": focus = a 2px Midnight Blue border. */
body.sc-theme .form-control:focus,
body.sc-theme .form-select:focus {
    border-color: var(--sc-navy);
    box-shadow: 0 0 0 3px rgba(var(--sc-navy-rgb), 0.14);
}
/* Never a padding shorthand on the select — it eats Bootstrap's caret gutter. */
body.sc-theme .form-select { padding-inline-end: 2.25rem; }
/* A border-color override silently swallows Bootstrap's red validation state,
   so re-assert it explicitly on every checkout / auth form. */
body.sc-theme .form-control.is-invalid,
body.sc-theme .form-select.is-invalid,
body.sc-theme .was-validated .form-control:invalid,
body.sc-theme .was-validated .form-select:invalid {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
}
body.sc-theme .form-control.is-invalid:focus,
body.sc-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);
}
body.sc-theme .form-check-input:checked { background-color: var(--sc-navy); border-color: var(--sc-navy); }
body.sc-theme .form-label { color: var(--sc-ink); }

/* ===== Announcement ribbon (midnight, matches the export's top bar) ====== */
body.sc-theme .mr-announce {
    background-color: var(--sc-navy);
    color: #fff;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: none;
    font-size: 0.75rem;
}
body.sc-theme .mr-announce a { color: var(--sc-sky); }

/* ===== Header ============================================================ */
body.sc-theme .mr-header {
    background-color: var(--sc-white);
    border-bottom-color: var(--sc-line);
    box-shadow: 0 1px 2px rgba(31, 51, 80, 0.04);
}
body.sc-theme .mr-logo {
    font-family: var(--sc-font-head);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--sc-navy);
}
body.sc-theme .mr-nav-link { font-weight: 400; color: var(--sc-muted); }
body.sc-theme .mr-nav-link:hover { color: var(--sc-navy); }
/* The export marks the current section with a midnight label + 2px keyline. */
body.sc-theme .mr-nav-link.is-active { color: var(--sc-navy); font-weight: 500; border-bottom-color: var(--sc-navy); }
body.sc-theme .mr-icon-btn { color: var(--sc-navy); }
body.sc-theme .mr-icon-btn:hover { color: var(--sc-navy-mid); }
body.sc-theme .mr-search input { border-radius: var(--sc-radius); background-color: var(--sc-tonal); border-color: var(--sc-line); }
body.sc-theme .mr-search input:focus { background-color: var(--sc-white); }
/* Cart / wishlist counters: dream-sky pill with midnight digits (11.0:1). */
body.sc-theme .mr-badge,
body.sc-theme .mr-badge--wish { background-color: var(--sc-sky); color: var(--sc-navy); }

/* ===== sc-hero — the split white island on the calm canvas ================ */
body.sc-theme .sc-hero { padding-block: clamp(1.5rem, 3vw, 2rem) 0; }
body.sc-theme .sc-hero__island {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    min-height: clamp(420px, 46vw, 600px);
    background-color: var(--sc-white);
    border-radius: calc(var(--sc-radius) * 1.34);
    box-shadow: var(--sc-shadow);
}
body.sc-theme .sc-hero__media { position: relative; min-height: 260px; }
body.sc-theme .sc-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
body.sc-theme .sc-hero__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 5vw, 5rem);
    background-color: var(--sc-tonal);
}
body.sc-theme .sc-hero__title {
    font-family: var(--sc-font-head);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--sc-navy);
    margin-bottom: 1.5rem;
}
body.sc-theme .sc-hero__lead {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--sc-muted);
    max-width: 30rem;
    margin-bottom: 2.5rem;
}
body.sc-theme .sc-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ===== Trust strip (four dream-sky glyphs on the canvas) ================= */
body.sc-theme .mr-trust svg { color: var(--sc-sky-ink); }
body.sc-theme .mr-trust strong {
    color: var(--sc-ink);
    text-transform: none;
    letter-spacing: 0;
    font-size: 1rem;
    font-weight: 500;
}
body.sc-theme .mr-trust span { color: var(--sc-soft); font-size: 0.85rem; }
/* The export keeps the trust strip on the canvas with no rule beneath it. */
body.sc-theme .mr-band--alt.border-bottom { border-bottom-color: transparent !important; }

/* ===== Promo tiles (inherited mr-promo) ================================== */
body.sc-theme .mr-promo {
    border-radius: calc(var(--sc-radius) * 1.34);
    box-shadow: var(--sc-shadow);
}
body.sc-theme .mr-promo__scrim {
    background: linear-gradient(180deg, rgba(7, 30, 58, 0.05) 25%, rgba(7, 30, 58, 0.82) 100%);
}
body.sc-theme .mr-promo:hover .mr-promo__scrim {
    background: linear-gradient(180deg, rgba(7, 30, 58, 0.2) 15%, rgba(7, 30, 58, 0.88) 100%);
}
body.sc-theme .mr-promo__title {
    font-family: var(--sc-font-head);
    font-weight: 600;
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    margin-bottom: 0.25rem;
}
body.sc-theme .sc-promo__text {
    display: block;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    margin-bottom: 0.85rem;
}
/* Also override the base's `:hover` DESCENDANT selector (0,0,3,0) or it wins
   and repaints the label to the accent — an invisible caption. */
body.sc-theme .mr-promo__cta,
body.sc-theme .mr-promo:hover .mr-promo__cta {
    font-family: var(--sc-font-body);
    color: var(--sc-sky);
    border: 0;
    padding-bottom: 0;
    letter-spacing: 0.02em;
    text-transform: none;
    font-weight: 500;
    font-size: 0.9rem;
}
body.sc-theme .mr-promo:hover .mr-promo__cta { color: var(--sc-sky-soft); }

/* ===== Product card (inherited) — white island, keyline, inset text ====== */
/* DESIGN "Cards": white surface, 12px radius, no heavy border. The base card
   is borderless with FLUSH text, so adding a border/background means the text
   must be inset (recurring gotcha). */
body.sc-theme .mr-card {
    background-color: var(--sc-white);
    border: 1px solid var(--sc-line);
    border-radius: calc(var(--sc-radius) * 1.34);
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
body.sc-theme .mr-card:hover { box-shadow: var(--sc-shadow-lg); transform: translateY(-4px); }
body.sc-theme .mr-card__media {
    margin-bottom: 0;
    border-radius: 0;
    aspect-ratio: 4 / 3;
    background-color: var(--sc-tonal);
}
body.sc-theme .mr-card__eyebrow,
body.sc-theme .mr-card__title,
body.sc-theme .mr-card__price,
body.sc-theme .mr-card [data-testid="card-rating"] { padding-inline: 1rem; }
body.sc-theme .mr-card__media + * { padding-top: 1rem; }
body.sc-theme .mr-card__eyebrow {
    color: var(--sc-soft);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.85rem;
}
body.sc-theme .mr-card__title {
    font-family: var(--sc-font-body);
    font-weight: 500;
    font-size: 0.98rem;
    color: var(--sc-ink);
    margin-bottom: 0.35rem;
}
body.sc-theme .mr-card__title a:hover { color: var(--sc-navy); }
body.sc-theme .mr-card__price {
    padding-bottom: 1.15rem;
    font-family: var(--sc-font-body);
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--sc-navy);
}
body.sc-theme .mr-card__price del { color: var(--sc-soft); font-weight: 400; font-size: 0.9rem; }

/* SALE / demo badge — the export's dream-sky tag with a midnight label
   (11.0:1). The base styles .mr-card__sale but the partial emits
   .mr-card__badge. */
body.sc-theme .mr-card__badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2;
    background-color: var(--sc-sky);
    color: var(--sc-navy);
    font-family: var(--sc-font-body);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.25rem 0.6rem;
    border-radius: 9999px;
}

/* Overlay controls — restyled TOGETHER, contrast-checked in BOTH states.
   Midnight on near-white = 16.0:1; navy-mid on white = 12.3:1 — both clear
   the 3:1 WCAG minimum for UI components by a wide margin. */
body.sc-theme .mr-card__wish,
body.sc-theme .mr-card__quickview {
    color: var(--sc-navy);
    background-color: rgba(255, 255, 255, 0.9);
}
body.sc-theme .mr-card__wish:hover,
body.sc-theme .mr-card__quickview:hover {
    color: var(--sc-navy-mid);
    background-color: #fff;
}
body.sc-theme .mr-card__wish.is-active { color: var(--sc-navy-mid); }
/* Slide-up Add to Cart — midnight fill, white label (16.7:1). */
body.sc-theme .mr-card__quick {
    background-color: var(--sc-navy);
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.06em;
}
body.sc-theme .mr-card__quick:hover { background-color: var(--sc-navy-mid); color: #fff; }

/* ===== sc-keyline-link — the "View All" text link ======================== */
body.sc-theme .sc-keyline-link {
    font-family: var(--sc-font-body);
    font-weight: 500;
    font-size: 0.92rem;
    color: var(--sc-sky-ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: color 0.2s, border-color 0.2s;
}
body.sc-theme .sc-keyline-link:hover { color: var(--sc-navy); border-bottom-color: var(--sc-navy); }

/* ===== sc-firmness — the midnight firmness-scale band ==================== */
body.sc-theme .sc-firmness {
    background-color: var(--sc-navy);
    color: #fff;
    padding-block: clamp(48px, 8vw, 72px);
}
body.sc-theme .sc-firmness__title {
    font-family: var(--sc-font-head);
    font-size: clamp(1.5rem, 2.8vw, 2rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #fff;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}
body.sc-theme .sc-firmness__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
body.sc-theme .sc-firmness__glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 9999px;
    background-color: rgba(164, 216, 254, 0.16);
    color: var(--sc-sky);
}
body.sc-theme .sc-firmness__glyph svg { width: 28px; height: 28px; }
body.sc-theme .sc-firmness__name {
    font-family: var(--sc-font-head);
    font-size: 1.15rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
}
body.sc-theme .sc-firmness__text {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.78);
    max-width: 22rem;
}

/* ===== sc-trial — the dream-sky trial-promise banner ===================== */
body.sc-theme .sc-trial-wrap { padding-block: clamp(32px, 5vw, 48px); }
body.sc-theme .sc-trial {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.5rem, 4vw, 3rem);
    flex-wrap: wrap;
    background-color: var(--sc-sky);
    border-radius: calc(var(--sc-radius) * 1.34);
    padding: clamp(1.75rem, 4vw, 2.75rem);
}
body.sc-theme .sc-trial__copy { flex: 1 1 24rem; min-width: 0; }
body.sc-theme .sc-trial__title {
    font-family: var(--sc-font-head);
    font-size: clamp(1.1rem, 2.2vw, 1.5rem);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--sc-navy);
    margin-bottom: 0.75rem;
}
body.sc-theme .sc-trial__body {
    font-size: 0.95rem;
    line-height: 1.6;
    /* Midnight at 82% over the dream-sky fill still measures ~8:1. */
    color: rgba(var(--sc-navy-rgb), 0.82);
    max-width: 44rem;
}
body.sc-theme .sc-trial__btn { flex: 0 0 auto; white-space: nowrap; }

/* ===== Category tiles (inherited mr-tile--cat) — white pill captions ===== */
body.sc-theme .mr-tile { border-radius: calc(var(--sc-radius) * 1.34); }
body.sc-theme .mr-tile--cat { height: 300px; }
body.sc-theme .mr-tile--cat .mr-tile__scrim { background: rgba(7, 30, 58, 0.22); }
body.sc-theme .mr-tile--cat:hover .mr-tile__scrim { background: rgba(7, 30, 58, 0.34); }
/* Midnight label on a solid white pill = 16.7:1. */
body.sc-theme .mr-tile--cat .mr-tile__cap {
    font-family: var(--sc-font-body);
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--sc-navy);
    background-color: var(--sc-white);
    border-radius: 9999px;
    padding: 0.5rem 1.5rem;
    box-shadow: var(--sc-shadow);
}

/* ===== sc-journal — white story islands ================================== */
body.sc-theme .sc-journal__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--sc-white);
    border-radius: calc(var(--sc-radius) * 1.34);
    overflow: hidden;
    box-shadow: var(--sc-shadow);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
body.sc-theme .sc-journal__card:hover { box-shadow: var(--sc-shadow-lg); transform: translateY(-4px); }
body.sc-theme .sc-journal__media { display: block; border-radius: 0; aspect-ratio: 16 / 10; overflow: hidden; }
body.sc-theme .sc-journal__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.sc-theme .sc-journal__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
body.sc-theme .sc-journal__title {
    font-family: var(--sc-font-head);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--sc-navy);
}
body.sc-theme .sc-journal__title a { color: inherit; text-decoration: none; }
body.sc-theme .sc-journal__title a:hover { color: var(--sc-sky-ink); }
body.sc-theme .sc-journal__link {
    margin-top: auto;
    font-family: var(--sc-font-body);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--sc-sky-ink);
    text-decoration: none;
}
body.sc-theme .sc-journal__link:hover { color: var(--sc-navy); }

/* ===== sc-cta — the "Better Mornings" tonal newsletter panel ============= */
body.sc-theme .sc-cta {
    background-color: var(--sc-tonal-2);
    padding-block: clamp(48px, 8vw, 72px);
}
body.sc-theme .sc-cta__title {
    font-family: var(--sc-font-head);
    font-size: clamp(1.5rem, 2.8vw, 2rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--sc-navy);
}
body.sc-theme .sc-cta__body { max-width: 34rem; color: var(--sc-muted); font-size: 1rem; }
body.sc-theme .sc-cta__form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    max-width: 30rem;
}
body.sc-theme .sc-cta__form input {
    flex: 1;
    min-width: 12rem;
    background-color: var(--sc-white);
    border: 1px solid #d1d9e0;
    border-radius: var(--sc-radius);
    color: var(--sc-ink);
    padding: 0.8rem 1.1rem;
    font-size: 0.95rem;
}
body.sc-theme .sc-cta__form input::placeholder { color: var(--sc-soft); }
body.sc-theme .sc-cta__form input:focus {
    outline: none;
    border-color: var(--sc-navy);
    box-shadow: 0 0 0 3px rgba(var(--sc-navy-rgb), 0.14);
}
body.sc-theme .sc-cta__btn {
    background-color: var(--sc-navy);
    color: #fff;
    border: 0;
    border-radius: var(--sc-radius);
    font-family: var(--sc-font-body);
    font-weight: 600;
    padding: 0.8rem 1.75rem;
    cursor: pointer;
    transition: background-color 0.2s;
}
body.sc-theme .sc-cta__btn:hover { background-color: var(--sc-navy-mid); }
body.sc-theme .sc-cta__note { color: var(--sc-soft); font-size: 0.8rem; }

/* ===== Footer (inherited mr-footer) — deep midnight panel ================ */
/* The base footer is a light band; the export's footer is midnight blue with
   light text. Recolour the surface AND every text token that rides on it, or
   the re-pointed dark --mr-muted / --mr-soft render invisible on the band. */
body.sc-theme .mr-footer {
    background-color: var(--sc-navy);
    border-top-color: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.72);
}
body.sc-theme .mr-footer h4 { color: #fff; letter-spacing: 0.1em; }
body.sc-theme .mr-footer .mr-footer__brand { color: #fff; font-family: var(--sc-font-head); font-weight: 600; }
body.sc-theme .mr-footer a { color: rgba(255, 255, 255, 0.75); }
body.sc-theme .mr-footer a:hover { color: var(--sc-sky); }
body.sc-theme .mr-footer .mr-muted { color: rgba(255, 255, 255, 0.75); }
body.sc-theme .mr-footer .mr-soft { color: rgba(255, 255, 255, 0.55); }
body.sc-theme .mr-footer .mr-divider { background-color: rgba(255, 255, 255, 0.12); }
body.sc-theme .mr-footer .form-control {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}
body.sc-theme .mr-footer .form-control::placeholder { color: rgba(255, 255, 255, 0.45); }
body.sc-theme .mr-social { border-color: rgba(255, 255, 255, 0.24); color: #fff; }
body.sc-theme .mr-social:hover { background-color: var(--sc-sky); border-color: var(--sc-sky); color: var(--sc-navy); }

/* ===== PDP / cart / checkout / account finishing (inherited pages) ======= */
/* The base hovers several light-canvas links to --ll-accent. Dream-sky ink is
   AA-safe as text (6.4:1 on white), so those keep working — but the states
   that pair a fill with white text are re-pointed at midnight explicitly. */
body.sc-theme .mr-crumbs a:hover,
body.sc-theme .mr-cart-row__title a:hover { color: var(--sc-sky-ink); }
body.sc-theme .mr-stars { color: var(--sc-sky-ink); }
body.sc-theme .mr-sale { background-color: var(--sc-sky); color: var(--sc-navy); }
body.sc-theme .mr-tabs .nav-link.active { color: var(--sc-navy); border-bottom-color: var(--sc-navy); }
body.sc-theme .mr-filter__link { color: var(--sc-muted); }
body.sc-theme .mr-filter__link:hover { color: var(--sc-navy); }
body.sc-theme .mr-page.is-active { background-color: var(--sc-navy); border-color: var(--sc-navy); color: #fff; }
body.sc-theme .mr-page:hover { border-color: var(--sc-navy); color: var(--sc-navy); }
body.sc-theme .mr-acct-link.is-active { background-color: var(--sc-navy); color: #fff; }
body.sc-theme .mr-acct-avatar { background-color: var(--sc-navy); color: #fff; }
body.sc-theme .mr-gallery__thumb.is-active { border-color: var(--sc-navy); }
body.sc-theme .mr-step.is-done .mr-step__dot,
body.sc-theme .mr-step.is-current .mr-step__dot { border-color: var(--sc-navy); }
body.sc-theme .mr-step.is-done .mr-step__dot { background-color: var(--sc-navy); color: #fff; }
body.sc-theme .mr-panel { border-radius: calc(var(--sc-radius) * 1.34); }

/* ===== Accessibility — recolour focus outlines, never remove them ======== */
body.sc-theme a:focus-visible,
body.sc-theme button:focus-visible,
body.sc-theme input:focus-visible,
body.sc-theme select:focus-visible,
body.sc-theme textarea:focus-visible {
    outline: 2px solid var(--sc-navy);
    outline-offset: 2px;
}

/* ===== Motion preferences ================================================ */
@media (prefers-reduced-motion: reduce) {
    body.sc-theme .mr-card:hover,
    body.sc-theme .sc-journal__card:hover { transform: none; }
    body.sc-theme .mr-card,
    body.sc-theme .mr-card__media img,
    body.sc-theme .mr-promo__img,
    body.sc-theme .mr-tile__img,
    body.sc-theme .sc-journal__card,
    body.sc-theme .sc-journal__media img { transition: none; }
}

/* ===== Mobile (from the export's single-column mobile frames) ============ */
@media (max-width: 991.98px) {
    body.sc-theme { font-size: 15.5px; }
    body.sc-theme .sc-hero__island { grid-template-columns: 1fr; min-height: 0; }
    body.sc-theme .sc-hero__media { height: 320px; }
    body.sc-theme .sc-hero__lead { margin-bottom: 2rem; }
    body.sc-theme .sc-hero__actions { flex-direction: column; align-items: stretch; }
    body.sc-theme .sc-hero__actions .mr-btn { text-align: center; }
    body.sc-theme .sc-firmness,
    body.sc-theme .sc-cta { padding-block: clamp(40px, 10vw, 56px); }
    body.sc-theme .sc-trial { flex-direction: column; align-items: flex-start; }
    body.sc-theme .sc-trial__btn { width: 100%; text-align: center; }
    body.sc-theme .mr-tile--cat { height: 220px; }
    body.sc-theme .sc-cta__form { flex-direction: column; }
    body.sc-theme .sc-cta__btn { width: 100%; }
}