/* ==========================================================================
   Little Threads — bright, hard-wearing storefront for kids' clothing
   (ages 2–14).

   Ported from the Stitch "Little Threads" design (the design system lives at
   docs/templates/pending/stitch_62_little_threads_e_commerce_homepage/…):
   a "Reliable Playfulness" narrative — a sunny-cream canvas, deep navy for
   every piece of critical UI infrastructure (buttons, headings, prices),
   sunshine yellow reserved for high-energy accents (badges, quick-add, the
   cart count, the newsletter CTA), pure-white 16px-rounded containers floating
   on the cream via a soft 10%-navy shadow, and fully pill-shaped buttons.
   Poppins (the allowlist stand-in for the export's Plus Jakarta Sans —
   DESIGN.md itself cites Poppins' "geometric, friendly DNA" as the reason it
   picked that face) over Source Sans 3 for body/UI/forms.

   This theme OWNS the hero / age-guide (new) / promo / featured /
   new-arrivals / categories / journal / newsletter home sections (lt-* markup)
   and INHERITS Modern Retail's header, footer, trust strip, brand strip and
   every functional page (product, category, cart, checkout, account, search,
   blog…). This stylesheet therefore has two jobs:

     (a) style the NEW `lt-*` markup into the Stitch design; and
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
         base neutral tokens at the cream/white palette, standardising cards
         and inputs on the 16px/12px/pill shape language, and fixing every
         place the base renders the ACCENT as text or as a white-text fill
         (see the CONTRAST section below).

   Everything is scoped under `body.lt-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 — every ratio below was computed against the WCAG formula for this
   exact palette (do not "simplify" these back to raw tokens without
   re-measuring):

     · primary_color is the export's own rendered button colour, Bright Navy
       #27467a — DARK on purpose. It measures 9.36:1 on white and 8.76:1 on the
       cream canvas as TEXT, and 9.36:1 for the inherited #fff labels on a
       navy FILL. So, unlike the pastel/bright-primary themes, every one of the
       base's ~12 "primary fill + hardcoded white text" rules (.mr-badge,
       .mr-cta, .mr-page.is-active, .mr-step__dot, .mr-acct-avatar,
       .mr-social:hover, .mr-rail-btn:hover, Bootstrap's own .btn-primary…)
       and every "primary as text" rule (.mr-tabs .nav-link.active,
       .mr-filter__link, .mr-gallery__thumb.is-active…) is SAFE as inherited
       and needs no guard block. The bright hue lives in accent_color instead —
       that is the deliberate way round.
     · accent_color, Sunshine Yellow #f7b32b, is very light: 1.84:1 on white
       and 1.72:1 on cream. It is therefore NEVER text on a light surface and
       never carries white label text. It is used ONLY (i) as a FILL paired
       with deep navy #092f62 text — 7.17:1 — which is exactly how the export
       uses it (the "Sale"/cart badges, the quick-add control, the hero eyebrow
       pill, the Subscribe button), and (ii) as text ON the deep-navy footer /
       newsletter bands (7.17:1, and the export's own `text-brand-yellow`
       footer headings). Every base rule that painted --ll-accent as text or as
       an icon on a light surface (.mr-eyebrow, .mr-ulink:hover,
       .mr-nav-link.is-active, .mr-icon-btn:hover, .mr-card__wish.is-active,
       .mr-card__title a:hover, .mr-trust svg, .mr-crumbs a:hover,
       .mr-cart-row__title a:hover, .mr-article__title a:hover, the
       focus-visible outline, .mr-btn--light:hover, .mr-announce) is re-pointed
       below to navy or to --lt-amber-ink.
     · --lt-amber-ink #7e5700 is the FIXED, customizer-independent text-safe
       amber sibling (6.46:1 on white, 6.05:1 on cream) used where the export
       renders yellow TYPE on a light surface — the journal category eyebrows
       being the export's own 1.84:1 bug — and for the "saved" wishlist heart,
       where it also stays visually distinct from the navy rest state.
     · The hero copy is DARK on a frosted card over an arbitrary merchant
       photo, which is the risky direction. The card is therefore a genuinely
       opaque-enough cream wash (0.86 alpha), not the export's `bg-white/10`:
       composited over a PURE BLACK photo the card resolves to rgb(216,212,206),
       on which the navy headline still measures 8.92:1 (deep navy) / 6.34:1
       (navy body + ghost button) and the muted lead 6.31:1 — all AA-passing at
       both photographic extremes.
     · The deep-navy footer/newsletter bands: rgba(255,255,255,.8) body copy
       measures 8.93:1 and rgba(255,255,255,.65) small print 6.41:1 on #092f62.
   ========================================================================== */

body.lt-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --lt-navy: var(--bs-primary, #27467a);
    --lt-navy-rgb: var(--bs-primary-rgb, 39, 70, 122);
    --lt-amber: var(--ll-accent, #f7b32b);
    --lt-amber-rgb: var(--bs-warning-rgb, 247, 179, 43);
    --lt-radius: var(--ll-btn-radius, 2rem);
    --lt-font-head: var(--ll-font-headings, "Poppins"), system-ui, -apple-system, sans-serif;
    --lt-font-body: var(--ll-font-body, "Source Sans 3"), system-ui, -apple-system, sans-serif;

    /* Little Threads palette (DESIGN.md + the export's own brand-* scale) */
    --lt-navy-deep: #092f62; /* DESIGN.md `primary` — footer/newsletter bands, on-amber text */
    --lt-amber-ink: #7e5700; /* DESIGN.md `secondary` — the text-safe amber sibling */
    --lt-cream: #fbf7ef; /* brand-cream — the page canvas ("Sunny Cream") */
    --lt-white: #ffffff; /* Elevation Level 1 — cards, panels, header */
    --lt-lavender: #f4f2fd; /* surface-container-low — the "New This Week" band */
    --lt-ink: #1a1b22; /* on-surface — body/heading ink */
    --lt-muted: #43474f; /* on-surface-variant — lead/secondary copy */
    --lt-soft: #63666e; /* darkened `outline` (#747780 was 4.19:1 on cream) */
    --lt-tint: #f4f0e6; /* warm tonal shift — media wells, footer-adjacent chrome */
    --lt-fill: #eeeae0; /* warm neutral fill — status pills, placeholders */
    --lt-border: #e6e1d6;
    --lt-border-strong: #c9c3b6;

    /* Re-point the inherited base neutrals at the cream/white palette so every
       inherited mr-* surface (bands, borders, fills, muted text) follows —
       this single block restyles all ~24 inherited pages. --mr-surface stays
       WHITE on purpose: DESIGN.md's Level-1 elevation is "Pure White"
       containers, and the base uses --mr-surface for cards/panels/header. The
       cream canvas is set as an explicit background-color below instead. */
    --mr-ink: var(--lt-ink);
    --mr-muted: var(--lt-muted);
    --mr-soft: var(--lt-soft);
    --mr-surface: var(--lt-white);
    --mr-band: var(--lt-white);
    /* NOT white: `--mr-band-alt` is also read by an INLINE style on the
       checkout-payment method circles (which CSS cannot override), and a white
       circle on a white .mr-panel would simply vanish. The trust strip's WHITE
       band — which the export does want — is set on the `.mr-band--alt` CLASS
       further down instead, so the two roles are decoupled. */
    --mr-band-alt: var(--lt-tint);
    --mr-fill: var(--lt-fill);
    --mr-border: var(--lt-border);
    --mr-border-strong: var(--lt-border-strong);
    --mr-radius: 1rem; /* DESIGN.md: cards & containers standardise on 16px */
    --mr-gold: var(--lt-amber-ink); /* star ratings — raw amber is 1.84:1 on white */
    /* DESIGN.md Level 1: "a very soft, 10% opacity Navy shadow (Blur 20, Y 4)" —
       the export's own .soft-card-shadow. */
    --mr-shadow: 0 20px 25px -5px rgba(var(--lt-navy-rgb), 0.08), 0 8px 10px -6px rgba(var(--lt-navy-rgb), 0.06);

    /* Bootstrap 5.3's `a` rule reads --bs-link-color-RGB, not --bs-link-color,
       and theme-vars.blade.php never emits the triplet — without this, bare
       anchors (CMS pages, blog body copy, the quick-view "Category" link) and
       .btn-link fall through to Bootstrap's factory blue. Setting the triplet
       is the RIGHT fix: a bare `body.lt-theme a { color: … }` catch-all would
       out-specify `.mr-btn--primary { color:#fff }` and repaint the hero CTA's
       label navy-on-navy, i.e. an invisible button. */
    --bs-link-color: var(--lt-navy);
    --bs-link-color-rgb: var(--bs-primary-rgb, 39, 70, 122);

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

/* --------------------------------------------------------------------------
   Typography — Poppins carries every heading (semibold for section H2s, bold
   for the display sizes, per DESIGN.md); ink stays neutral because the export
   never tints its headings with the accent.
   -------------------------------------------------------------------------- */
body.lt-theme h1, body.lt-theme h2, body.lt-theme h3,
body.lt-theme h4, body.lt-theme h5, body.lt-theme h6,
body.lt-theme .mr-display, body.lt-theme .mr-headline {
    font-family: var(--lt-font-head);
    color: var(--lt-ink);
    font-weight: 600;
    letter-spacing: -0.01em;
}

body.lt-theme .mr-display {
    color: var(--lt-navy-deep);
    font-weight: 700;
    font-size: clamp(1.75rem, 3.4vw, 2.25rem);
}

/* Prices render in the headline face at bold weight ("Rs." + comma value) —
   DESIGN.md's price-display role. */
body.lt-theme .mr-card__price,
body.lt-theme .mr-price {
    font-family: var(--lt-font-head);
    font-weight: 700;
    color: var(--lt-navy);
}

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

/* Eyebrows: --lt-amber-ink, never raw amber (1.72:1 on cream). */
body.lt-theme .mr-eyebrow {
    font-family: var(--lt-font-body);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--lt-amber-ink);
}

body.lt-theme .mr-ulink { color: var(--lt-navy); }
body.lt-theme .mr-ulink:hover { color: var(--lt-navy-deep); border-color: var(--lt-navy-deep); }

/* --------------------------------------------------------------------------
   Buttons — "All primary and secondary buttons must be Pill-shaped"
   (DESIGN.md). Navy fill / navy keyline; the accent is never a button fill
   with white text.
   -------------------------------------------------------------------------- */
body.lt-theme .mr-btn {
    font-family: var(--lt-font-head);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: none;
    font-size: 0.85rem;
    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.lt-theme .mr-btn--primary {
    background-color: var(--lt-navy);
    border-color: var(--lt-navy);
    box-shadow: 0 10px 20px -6px rgba(var(--lt-navy-rgb), 0.45);
}

body.lt-theme .mr-btn--primary:hover {
    filter: none;
    background-color: var(--lt-navy-deep);
    border-color: var(--lt-navy-deep);
    transform: translateY(-2px);
}

body.lt-theme .mr-btn--outline { border-width: 2px; border-color: var(--lt-navy); color: var(--lt-navy); }
body.lt-theme .mr-btn--outline:hover { background-color: var(--lt-navy); color: #fff; }

/* Base hover was `--ll-accent` fill + #fff text (1.84:1). */
body.lt-theme .mr-btn--light { color: var(--lt-navy); }
body.lt-theme .mr-btn--light:hover { background-color: var(--lt-navy); color: #fff; }

body.lt-theme .mr-btn--on-dark:hover { color: var(--lt-navy-deep); }
body.lt-theme .mr-btn--ghost { color: var(--lt-navy); }

body.lt-theme .lt-btn-pill { padding: 1.05rem 2.4rem; }

/* Navy keyline pill — the hero's secondary action ("Shop Boys"), mirroring the
   export's `border-2 border-brand-navy text-brand-navy` button. */
body.lt-theme .lt-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: calc(1.05rem - 2px) calc(2.4rem - 2px);
    border: 2px solid var(--lt-navy);
    border-radius: var(--lt-radius);
    background: transparent;
    color: var(--lt-navy);
    font-family: var(--lt-font-head);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

body.lt-theme .lt-btn-ghost:hover {
    background-color: rgba(var(--lt-navy-rgb), 0.08);
    transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Inputs — DESIGN.md: 12px radius (a touch less rounded than the 16px cards),
   48px minimum height, always-visible labels. NEVER a padding shorthand on
   .form-select (it eats Bootstrap's 2.25rem caret gutter — the base already
   restores it via padding-inline-end, left untouched here).
   -------------------------------------------------------------------------- */
body.lt-theme .form-control,
body.lt-theme .form-select {
    background-color: var(--lt-white);
    border: 1px solid var(--lt-border-strong);
    border-radius: 0.75rem;
    color: var(--lt-ink);
    min-height: 48px;
}

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

/* The border-colour override above is (0,2,1) and would otherwise BEAT
   Bootstrap's own (0,2,0) `.form-control.is-invalid` rule, silently swallowing
   the red validation state on every checkout / address / auth form. Re-assert
   it (and the valid state) explicitly. */
body.lt-theme .form-control.is-invalid,
body.lt-theme .form-select.is-invalid,
body.lt-theme .was-validated .form-control:invalid,
body.lt-theme .was-validated .form-select:invalid {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
}

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

body.lt-theme .form-control.is-valid,
body.lt-theme .form-select.is-valid,
body.lt-theme .was-validated .form-control:valid,
body.lt-theme .was-validated .form-select:valid {
    border-color: var(--bs-form-valid-border-color, #198754);
}

body.lt-theme .form-label { font-family: var(--lt-font-body); font-weight: 600; }

/* Base outline was the raw accent (1.84:1 against a light page). */
body.lt-theme a:focus-visible,
body.lt-theme button:focus-visible,
body.lt-theme input:focus-visible,
body.lt-theme select:focus-visible,
body.lt-theme textarea:focus-visible {
    outline-color: var(--lt-navy-deep);
}

/* --------------------------------------------------------------------------
   Announcement + header — the inherited chrome is already the export's
   structure (logo left, inline nav, search + account/wishlist/cart icons on a
   single sticky row), so there is no header override; it is restyled in place.
   The announce band is deep navy + white (13.17:1); the base default was
   color-mix(accent 62%, #000) + white, which on a yellow accent is a muddy
   olive.
   -------------------------------------------------------------------------- */
body.lt-theme .mr-announce {
    background-color: var(--lt-navy-deep);
    background-image: none;
    color: #fff;
    font-family: var(--lt-font-body);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: none;
    padding: 0.62rem 1rem;
}

body.lt-theme .mr-header {
    background-color: var(--lt-white);
    border-bottom: 1px solid var(--lt-border);
    box-shadow: 0 1px 3px rgba(var(--lt-navy-rgb), 0.06);
}

body.lt-theme .mr-logo {
    font-family: var(--lt-font-head);
    font-weight: 700;
    color: var(--lt-navy-deep);
    letter-spacing: -0.02em;
}

body.lt-theme .mr-nav-link {
    font-family: var(--lt-font-body);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.98rem;
    color: var(--lt-muted);
}

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

/* The export's active link: navy bold type with a 2px SUNSHINE underline. The
   underline is decorative chrome, so the accent is fine there; the TYPE must
   not be (1.72:1 on cream). */
body.lt-theme .mr-nav-link.is-active {
    color: var(--lt-navy-deep);
    border-bottom-color: var(--lt-amber);
    border-bottom-width: 2px;
}

body.lt-theme .mr-search input {
    background-color: var(--lt-cream);
    border-color: var(--lt-border);
    border-radius: 0.75rem;
}

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

body.lt-theme .mr-icon-btn { color: var(--lt-muted); }
body.lt-theme .mr-icon-btn:hover { color: var(--lt-navy-deep); }

/* Cart / wishlist counters: the export's `bg-brand-yellow text-primary`
   pill (7.17:1). The base gave .mr-badge a navy fill with white text and
   .mr-badge--wish the raw accent WITH the inherited white text (1.84:1). */
body.lt-theme .mr-badge,
body.lt-theme .mr-badge--wish {
    background-color: var(--lt-amber);
    color: var(--lt-navy-deep);
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Hero — the export's full-bleed lifestyle photograph with a frosted cream
   copy card floated over its left third. See the CONTRAST note: the card
   alpha (0.86) is chosen so the navy copy passes AA over a pure-black photo,
   because the photo is the merchant's and can be anything.
   -------------------------------------------------------------------------- */
body.lt-theme .lt-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(520px, 70vh, 700px);
    overflow: hidden;
    background-color: var(--lt-fill);
}

body.lt-theme .lt-hero__img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The export's `bg-gradient-to-r from-brand-cream/40` sunlit wash. Purely
   decorative — the copy's legibility comes from the card, not from this. */
body.lt-theme .lt-hero__wash {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(251, 247, 239, 0.55) 0%, rgba(251, 247, 239, 0.18) 52%, rgba(251, 247, 239, 0) 100%);
}

body.lt-theme .lt-hero__shell { position: relative; z-index: 2; width: 100%; }

body.lt-theme .lt-hero__card {
    max-width: 40rem;
    padding: clamp(1.75rem, 3.6vw, 3rem);
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background-color: rgba(251, 247, 239, 0.86);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 24px 48px -20px rgba(9, 47, 98, 0.28);
}

/* Amber pill + deep-navy type (7.17:1) — the export's own combination. */
body.lt-theme .lt-hero__eyebrow {
    display: inline-block;
    margin-bottom: 1rem;
    padding: 0.4rem 1.1rem;
    border-radius: 9999px;
    background-color: var(--lt-amber);
    color: var(--lt-navy-deep);
    font-family: var(--lt-font-body);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* (0,2,1) beats `body.lt-theme h1` (0,1,2) so the headline keeps its navy. */
body.lt-theme .lt-hero__title {
    font-family: var(--lt-font-head);
    color: var(--lt-navy-deep);
    font-size: clamp(2.05rem, 4.4vw, 3rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}

body.lt-theme .lt-hero__lead {
    color: var(--lt-muted);
    font-size: 1.08rem;
    line-height: 1.65;
    max-width: 44ch;
    margin-bottom: 1.75rem;
}

body.lt-theme .lt-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* --------------------------------------------------------------------------
   Trust strip (inherited markup) — the export stacks a navy glyph inside a
   cream circle ABOVE a bold navy caption, centred, on a WHITE band; the base
   renders an icon-left / text-right row with an uppercase-tracked title.
   -------------------------------------------------------------------------- */
body.lt-theme .mr-band--alt { background-color: var(--lt-white); }

body.lt-theme .mr-trust {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
}

body.lt-theme .mr-trust svg {
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    padding: 12px;
    border-radius: 50%;
    background-color: var(--lt-cream);
    color: var(--lt-navy);
}

body.lt-theme .mr-trust strong {
    font-family: var(--lt-font-head);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--lt-navy-deep);
}

body.lt-theme .mr-trust span { display: block; color: var(--lt-muted); }

/* --------------------------------------------------------------------------
   Shop by Age — little-threads-ONLY child section: a heading row with a
   size-guide link, over four square 16px-rounded photo tiles with a bottom-up
   scrim and a white bold label pinned bottom-left.
   -------------------------------------------------------------------------- */
body.lt-theme .lt-ages__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

body.lt-theme .lt-ages__link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--lt-navy);
    font-family: var(--lt-font-head);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
}

body.lt-theme .lt-ages__link:hover { color: var(--lt-navy-deep); text-decoration: underline; }
body.lt-theme .lt-ages__link svg { width: 18px; height: 18px; }

body.lt-theme .lt-age {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border-radius: 1rem;
    background-color: var(--lt-fill);
    text-decoration: none;
    box-shadow: var(--mr-shadow);
}

body.lt-theme .lt-age__img,
body.lt-theme .lt-age__placeholder {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

body.lt-theme .lt-age__placeholder {
    background: linear-gradient(135deg, var(--lt-fill), var(--lt-border-strong));
}

body.lt-theme .lt-age:hover .lt-age__img { transform: scale(1.08); }

body.lt-theme .lt-age__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(9, 47, 98, 0) 40%, rgba(0, 0, 0, 0.62) 100%);
}

body.lt-theme .lt-age__label {
    position: absolute;
    left: 1.25rem;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 2;
    color: #fff;
    font-family: var(--lt-font-head);
    font-weight: 700;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
}

/* --------------------------------------------------------------------------
   Collection tiles — the export's asymmetric promo block (wide + narrow, then
   a full-width band), navy scrim, white copy, a white pill button on the tall
   tiles. Navy-on-white pill = 9.36:1.
   -------------------------------------------------------------------------- */
body.lt-theme .lt-promo {
    position: relative;
    display: block;
    overflow: hidden;
    height: 100%;
    border-radius: 1rem;
    background-color: var(--lt-fill);
    text-decoration: none;
    box-shadow: var(--mr-shadow);
}

body.lt-theme .lt-promo--tall { min-height: clamp(300px, 32vw, 400px); }
body.lt-theme .lt-promo--band { min-height: clamp(240px, 24vw, 300px); }

body.lt-theme .lt-promo__img,
body.lt-theme .lt-promo__placeholder {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

body.lt-theme .lt-promo__placeholder {
    background: linear-gradient(135deg, var(--lt-fill), var(--lt-border-strong));
}

body.lt-theme .lt-promo:hover .lt-promo__img { transform: scale(1.05); }

body.lt-theme .lt-promo__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(9, 47, 98, 0.12) 0%, rgba(9, 47, 98, 0.55) 100%);
}

body.lt-theme .lt-promo__cap {
    position: absolute;
    left: clamp(1.25rem, 2.5vw, 2rem);
    right: clamp(1.25rem, 2.5vw, 2rem);
    bottom: clamp(1.25rem, 2.5vw, 2rem);
    z-index: 2;
    display: block;
    color: #fff;
}

body.lt-theme .lt-promo__title {
    display: block;
    font-family: var(--lt-font-head);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.6vw, 2.25rem);
    line-height: 1.15;
    color: #fff;
    margin-bottom: 0.5rem;
}

body.lt-theme .lt-promo__text {
    display: block;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.98rem;
    margin-bottom: 1rem;
}

body.lt-theme .lt-promo__btn {
    display: inline-block;
    padding: 0.72rem 1.6rem;
    border-radius: 9999px;
    background-color: #fff;
    color: var(--lt-navy);
    font-family: var(--lt-font-head);
    font-weight: 700;
    font-size: 0.85rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover must override the base's `.mr-promo:hover .mr-promo__cta` habit of
   swapping to the accent — here the pill simply deepens. */
body.lt-theme .lt-promo:hover .lt-promo__btn {
    background-color: var(--lt-amber);
    color: var(--lt-navy-deep);
}

/* --------------------------------------------------------------------------
   Product cards (inherited mr-card) — DESIGN.md Level 1: the MEDIA WELL is a
   pure-white 16px-rounded box with the soft navy float shadow, and the name +
   price sit BELOW it, flush on the cream canvas (exactly the export's markup).
   The card itself therefore gains no border or background, so no inset-text
   padding is required.
   -------------------------------------------------------------------------- */
body.lt-theme .mr-card__media {
    background-color: var(--lt-white);
    border-radius: 1rem;
    box-shadow: var(--mr-shadow);
}

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

body.lt-theme .mr-card__title a:hover { color: var(--lt-navy); }
body.lt-theme .mr-card__eyebrow { color: var(--lt-soft); }

/* The two round overlay controls are SIBLINGS — restyle together and check
   BOTH states. Rest: navy on a near-white circle (9.36:1). Hover: the theme's
   own ink-on-surface pair, which is guaranteed legible. */
body.lt-theme .mr-card__wish,
body.lt-theme .mr-card__quickview {
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--lt-navy);
}

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

/* Saved heart: --lt-amber-ink (6.46:1 on the white circle) — raw amber is
   1.84:1, and it also stays visually distinct from the navy rest state. */
body.lt-theme .mr-card__wish.is-active { color: var(--lt-amber-ink); }

/* The export's quick-add is a SUNSHINE control with navy glyph (7.17:1); the
   base slide-up bar keeps its machinery and just takes that colour pair. */
body.lt-theme .mr-card__quick {
    background-color: var(--lt-amber);
    color: var(--lt-navy-deep);
    font-family: var(--lt-font-head);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: none;
    font-size: 0.82rem;
}

/* Legacy accent-fill sale flag (superseded by the shared, platform-red
   .mr-card__badge, but styled for safety): amber fill + navy type. */
body.lt-theme .mr-card__sale {
    background-color: var(--lt-amber);
    color: var(--lt-navy-deep);
    border-radius: 9999px;
}

/* --------------------------------------------------------------------------
   Featured ("Parent Favourites") + New This Week — the first sits on the
   cream canvas, the second on the export's soft lavender band with the
   heading left and the chevron rail nav right.
   -------------------------------------------------------------------------- */
body.lt-theme .lt-new { background-color: var(--lt-lavender); }

body.lt-theme .lt-new__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

body.lt-theme .mr-rail-btn { border-radius: 9999px; border-color: var(--lt-border-strong); color: var(--lt-navy); }
body.lt-theme .mr-rail-btn:hover { background-color: var(--lt-navy); border-color: var(--lt-navy); color: #fff; }

/* --------------------------------------------------------------------------
   Shop by Category — circular portraits with a thick white keyline and the
   soft navy float shadow, bold navy label centred beneath (the export's
   `rounded-full border-4 border-white shadow-md`). Still fully data-driven.
   -------------------------------------------------------------------------- */
body.lt-theme .lt-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
}

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

body.lt-theme .lt-cat:hover .lt-cat__frame {
    transform: translateY(-4px);
    box-shadow: 0 18px 30px -10px rgba(var(--lt-navy-rgb), 0.28);
}

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

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

body.lt-theme .lt-cat__label {
    font-family: var(--lt-font-head);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--lt-navy-deep);
    text-align: center;
}

/* --------------------------------------------------------------------------
   Journal — the inherited card structure on a WHITE band, with the export's
   supporting line under the centred heading.
   -------------------------------------------------------------------------- */
body.lt-theme .lt-journal { background-color: var(--lt-white); }

body.lt-theme .lt-journal__sub { color: var(--lt-muted); margin-top: 0.75rem; }

body.lt-theme .mr-article__media { border-radius: 1rem; }

body.lt-theme .mr-article__title { font-family: var(--lt-font-head); }
body.lt-theme .mr-article__title a { color: var(--lt-navy-deep); }
body.lt-theme .mr-article__title a:hover { color: var(--lt-navy); }

/* --------------------------------------------------------------------------
   Newsletter ("The Growing List") — a solid deep-navy band, copy left, a
   single-row pill form right: white email field + sunshine Subscribe pill
   with deep-navy type (7.17:1).
   -------------------------------------------------------------------------- */
body.lt-theme .lt-newsletter {
    background-color: var(--lt-navy-deep);
    padding: clamp(3rem, 7vw, 4.5rem) 0;
}

body.lt-theme .lt-newsletter__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
}

body.lt-theme .lt-newsletter__copy { flex: 1 1 20rem; }
body.lt-theme .lt-newsletter__side { flex: 1 1 22rem; max-width: 32rem; }

/* Raw amber ON the deep-navy band is a safe 7.17:1 — the export's own
   `text-brand-yellow` eyebrow role. */
body.lt-theme .lt-newsletter__eyebrow { color: var(--lt-amber); }

body.lt-theme .lt-newsletter__title {
    font-family: var(--lt-font-head);
    color: #fff;
    font-weight: 700;
    font-size: clamp(1.85rem, 3.4vw, 2.5rem);
    line-height: 1.15;
    margin-bottom: 0.5rem;
}

body.lt-theme .lt-newsletter__body { color: rgba(255, 255, 255, 0.8); font-size: 1.05rem; }

body.lt-theme .lt-newsletter__form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

body.lt-theme .lt-newsletter__form input {
    flex: 1 1 14rem;
    min-height: 52px;
    border: 0;
    border-radius: 9999px;
    padding: 0.95rem 1.5rem;
    background-color: #fff;
    color: var(--lt-ink);
    font-family: var(--lt-font-body);
}

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

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

body.lt-theme .lt-newsletter__submit {
    min-height: 52px;
    border: 0;
    border-radius: 9999px;
    padding: 0.95rem 2.1rem;
    background-color: var(--lt-amber);
    color: var(--lt-navy-deep);
    font-family: var(--lt-font-head);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: not-allowed; /* stub form — always disabled */
}

body.lt-theme .lt-newsletter__note { color: rgba(255, 255, 255, 0.65); font-size: 0.8rem; margin-top: 0.75rem; }

/* --------------------------------------------------------------------------
   Footer — the export's deep-navy band with sunshine section headings and
   light body copy (measured 8.93:1 / 6.41:1). The base footer inherits the
   light `--mr-band-alt` surface and dark `.mr-muted` / `.mr-soft` type, both
   of which have to be inverted here.
   -------------------------------------------------------------------------- */
body.lt-theme .mr-footer {
    background-color: var(--lt-navy-deep);
    border-top-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}

body.lt-theme .mr-footer h4 { font-family: var(--lt-font-head); color: var(--lt-amber); letter-spacing: 0.06em; }
body.lt-theme .mr-footer .mr-muted { color: rgba(255, 255, 255, 0.8); }
body.lt-theme .mr-footer .mr-soft { color: rgba(255, 255, 255, 0.65); }
body.lt-theme .mr-footer .mr-divider { background-color: rgba(255, 255, 255, 0.14); }
body.lt-theme .mr-footer a { color: rgba(255, 255, 255, 0.8); }
body.lt-theme .mr-footer a:hover { color: var(--lt-amber); }

body.lt-theme .mr-footer__brand {
    font-family: var(--lt-font-head);
    font-weight: 700;
    color: #fff;
}

/* Navy-on-navy would vanish — the footer's "Join" button takes the amber
   pair, matching the newsletter band. */
body.lt-theme .mr-footer .mr-btn--primary {
    background-color: var(--lt-amber);
    border-color: var(--lt-amber);
    color: var(--lt-navy-deep);
    box-shadow: none;
}

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

body.lt-theme .mr-social { border-color: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.85); }
body.lt-theme .mr-social:hover { background-color: #fff; border-color: #fff; color: var(--lt-navy-deep); }

/* --------------------------------------------------------------------------
   Inherited chrome, continued — shop sidebar filters, pagination, account
   sidebar, checkout stepper, cart rows, PDP tabs, breadcrumbs, brand strip.
   The base's PRIMARY-driven states are all safe here (navy is dark), so only
   the ACCENT-as-text hovers, the round shapes and the white-on-white status
   pill need attention.
   -------------------------------------------------------------------------- */
body.lt-theme .mr-crumbs a:hover { color: var(--lt-navy); }
body.lt-theme .mr-cart-row__title a:hover { color: var(--lt-navy); }
body.lt-theme .mr-filter__link.is-active { color: var(--lt-navy-deep); }
body.lt-theme .mr-page { border-radius: 9999px; }
body.lt-theme .mr-tabs .nav-link.active { border-bottom-color: var(--lt-amber); }

/* --mr-band-alt is white here, so the base's white-on-white status pill would
   disappear against a .mr-panel. */
body.lt-theme .mr-status { background-color: var(--lt-fill); color: var(--lt-muted); }

body.lt-theme .mr-summary,
body.lt-theme .mr-acct-nav,
body.lt-theme .mr-panel { box-shadow: var(--mr-shadow); }

body.lt-theme .mr-brandstrip span { font-family: var(--lt-font-head); font-weight: 700; }

/* A pill --bs-border-radius (2rem) is right for buttons but far too round for
   media wells and small chrome, which take the 16px card radius instead. */
body.lt-theme .mr-tile,
body.lt-theme .mr-gallery__main,
body.lt-theme .mr-cart-row__media { border-radius: 1rem; }

body.lt-theme .mr-gallery__thumb { border-radius: 0.6rem; }

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

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

/* --------------------------------------------------------------------------
   Mobile (from the export's mobile frames): headlines scale down ~15%, the
   hero card spans the gutter, age/category tiles tighten to the 2-column
   grid and the newsletter form stacks.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    body.lt-theme .lt-hero { min-height: 0; padding: 2.5rem 0 3rem; }
    body.lt-theme .lt-hero__card { max-width: none; background-color: rgba(251, 247, 239, 0.9); }
    body.lt-theme .lt-hero__title { font-size: 1.85rem; }
    body.lt-theme .lt-hero__lead { font-size: 1rem; }
    body.lt-theme .mr-display { font-size: 1.55rem; }
    body.lt-theme .lt-promo--tall,
    body.lt-theme .lt-promo--band { min-height: 260px; }
    body.lt-theme .lt-cat__frame { width: clamp(96px, 30vw, 140px); }
    body.lt-theme .lt-newsletter__inner { flex-direction: column; align-items: stretch; }
    body.lt-theme .lt-newsletter__side { max-width: none; }
    body.lt-theme .lt-newsletter__form { flex-direction: column; }
    body.lt-theme .lt-newsletter__form input,
    body.lt-theme .lt-newsletter__submit { width: 100%; }
}