/* ==========================================================================
   Little Wonders — playful, trust-forward kids / baby / toys storefront.

   Ported from the Stitch "Little Wonders" design (the design system lives at
   docs/templates/Little_wonders_e_commerce_store/…/DESIGN.md): a "Gentle
   Joy" narrative — warm cream canvas, coral primary actions, teal trust
   accents, sunshine-yellow highlights, soft-navy text, hyper-rounded shapes
   (24px+ cards, full-pill buttons), pastel circle/blob accents, floating
   star whimsy and extremely soft navy-tinted ambient shadows. Poppins
   headings (the allowlist substitute for the export's Plus Jakarta Sans)
   over Source Sans 3 body.

   This theme OWNS its header + the hero / shop-by-age / promo-cards /
   featured / new-arrivals / sale-banner / newsletter home sections (lw-*
   markup) and INHERITS Modern Retail's functional pages (product, category,
   cart, checkout, account, search, blog…). This stylesheet therefore has
   two jobs:

     (a) style the NEW `lw-*` markup into the Stitch design; and
     (b) restyle the INHERITED `mr-*` base pages — chiefly by re-pointing the
         base neutral tokens at the cream palette and rounding cards, buttons
         and forms to the 24px/pill shape language.

   Everything is scoped under `body.lw-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 coral surface follows.
   ========================================================================== */

body.lw-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --lw-coral: var(--bs-primary, #f26b5e);
    --lw-coral-rgb: var(--bs-primary-rgb, 242, 107, 94);
    --lw-teal: var(--ll-accent, #006a65);
    --lw-radius: var(--ll-btn-radius, 2rem);
    --lw-font-head: var(--ll-font-headings, "Poppins"), system-ui, -apple-system, sans-serif;
    --lw-font-body: var(--ll-font-body, "Source Sans 3"), system-ui, -apple-system, sans-serif;

    /* Gentle Joy palette (DESIGN.md prose: cream canvas, blush layering,
       soft navy text, sunshine-yellow accents) */
    --lw-cream: #fdf8f0;
    --lw-white: #ffffff;
    --lw-blush: #fbede4;
    --lw-ink: #0d1a38;
    --lw-navy: #2e3a59;
    --lw-navy-deep: #23304e;
    --lw-muted: #5d534e;
    --lw-soft: #8b7f78;
    --lw-line: #f0e2d8;
    --lw-sun: #f0c03e;
    --lw-teal-soft: #86f5ed;

    /* Pastel cycle — shop-by-age chips, promo cards + product media wells */
    --lw-pastel-1: #fbede4; /* blush */
    --lw-pastel-2: #dcf4f0; /* mint */
    --lw-pastel-3: #fdf2d4; /* butter */
    --lw-pastel-4: #e4e9fb; /* lavender */
    --lw-pastel-5: #fde3de; /* sky-rose */

    /* Shape + depth — hyper-rounded, extremely soft navy-tinted shadows */
    --lw-card-radius: 1.5rem;
    --lw-pill: 999px;
    --lw-shadow-sm: 0 6px 18px rgba(46, 58, 89, 0.06);
    --lw-shadow: 0 10px 30px rgba(46, 58, 89, 0.08);
    --lw-shadow-lg: 0 18px 44px rgba(46, 58, 89, 0.14);

    /* Re-point the inherited base neutrals at the cream palette so every
       inherited mr-* surface (bands, borders, fills, muted text) warms up. */
    --mr-ink: var(--lw-ink);
    --mr-muted: var(--lw-muted);
    --mr-soft: var(--lw-soft);
    --mr-surface: var(--lw-cream);
    --mr-band: #fbf1e6;
    --mr-band-alt: #fffcf6;
    --mr-fill: #f3e7d9;
    --mr-border: var(--lw-line);
    --mr-border-strong: #e2cfc0;
    --mr-radius: var(--lw-card-radius);
    --mr-gold: var(--lw-sun);
    --mr-shadow: var(--lw-shadow);

    background-color: var(--lw-cream);
    color: var(--lw-ink);
    font-family: var(--lw-font-body);
    font-size: 16.5px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Typography — friendly geometric Poppins at SemiBold, never aggressive.
   -------------------------------------------------------------------------- */
body.lw-theme h1, body.lw-theme h2, body.lw-theme h3,
body.lw-theme h4, body.lw-theme h5, body.lw-theme h6,
body.lw-theme .mr-display {
    font-family: var(--lw-font-head);
    color: var(--lw-ink);
    font-weight: 600;
    letter-spacing: -0.01em;
}

body.lw-theme .lw-section-title { font-size: clamp(1.6rem, 3vw, 2rem); }

body.lw-theme .mr-eyebrow,
body.lw-theme .lw-eyebrow {
    font-family: var(--lw-font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lw-teal);
}

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

/* Playful squiggle underline (from the export) on the Bestsellers heading —
   decorative only, hard-coded coral stroke inside the data-URI. */
body.lw-theme .lw-squiggle {
    display: inline-block;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 15C15 15 20 5 35 5C50 5 55 15 70 15C85 15 90 5 98 5' stroke='%23f26b5e' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-position: bottom;
    padding-bottom: 0.7rem;
}

/* --------------------------------------------------------------------------
   Buttons + inputs — everything is a full pill; hovers lift and scale.
   -------------------------------------------------------------------------- */
body.lw-theme .mr-btn {
    border-radius: var(--lw-pill);
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

body.lw-theme .mr-btn--primary {
    background: var(--lw-coral);
    border-color: var(--lw-coral);
    box-shadow: 0 10px 24px rgba(var(--lw-coral-rgb), 0.28);
}

body.lw-theme .mr-btn--primary:hover {
    transform: scale(1.04);
    filter: none;
    box-shadow: 0 14px 30px rgba(var(--lw-coral-rgb), 0.34);
}

body.lw-theme .mr-btn--outline {
    border: 2px solid var(--lw-coral);
    color: var(--lw-coral);
    background: transparent;
}

body.lw-theme .mr-btn--outline:hover {
    background: var(--lw-coral);
    color: #fff;
    transform: scale(1.03);
}

body.lw-theme .lw-btn-pill { padding: 0.85rem 2.3rem; font-size: 1rem; }

/* Teal outline pill — the hero's secondary "Baby Essentials" action. */
body.lw-theme .lw-btn-teal {
    border: 2px solid var(--lw-teal);
    color: var(--lw-teal);
    background: transparent;
    padding: calc(0.85rem - 1px) 2.3rem;
    font-size: 1rem;
}

body.lw-theme .lw-btn-teal:hover {
    background: var(--lw-pastel-2);
    color: var(--lw-teal);
    transform: scale(1.03);
}

body.lw-theme .form-control,
body.lw-theme .form-select {
    background-color: var(--lw-white);
    border-color: var(--lw-line);
    border-radius: 1.25rem;
}

body.lw-theme .form-control:focus,
body.lw-theme .form-select:focus {
    border-color: var(--lw-coral);
    box-shadow: 0 0 0 0.25rem rgba(var(--lw-coral-rgb), 0.12);
}

body.lw-theme .mr-ulink { color: var(--lw-coral); }
body.lw-theme .mr-ulink:hover { color: var(--lw-teal); border-color: var(--lw-teal); }

/* --------------------------------------------------------------------------
   Announcement + header — deep-coral band, then a warm white two-row header:
   bold coral wordmark left, big blush pill search center, icons right, and a
   centered nav row with pill hover states.
   -------------------------------------------------------------------------- */
body.lw-theme .lw-announce {
    background-color: var(--lw-coral);
    /* Deepen the customizer coral toward the export's brick-red band. */
    background-image: linear-gradient(rgba(70, 16, 10, 0.35), rgba(70, 16, 10, 0.35));
    color: rgba(255, 255, 255, 0.95);
    font-weight: 700;
    letter-spacing: 0.1em;
    font-size: 0.72rem;
}

body.lw-theme .lw-header {
    background: var(--lw-white);
    border-bottom: 1px solid var(--lw-line);
    box-shadow: var(--lw-shadow-sm);
}

body.lw-theme .lw-header__bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
}

body.lw-theme .lw-header__side--start { justify-self: start; display: flex; align-items: center; gap: 0.5rem; }
body.lw-theme .lw-header__side--end { justify-self: end; }

body.lw-theme .lw-logo {
    font-family: var(--lw-font-head);
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--lw-coral);
}

body.lw-theme .lw-logo img { max-height: 44px; }

body.lw-theme .lw-search input {
    width: min(34rem, 36vw);
    max-width: none;
    border-radius: var(--lw-pill);
    background: rgba(251, 237, 228, 0.55);
    border-color: transparent;
    padding: 0.75rem 2.8rem 0.75rem 1.4rem;
}

body.lw-theme .lw-search input:focus {
    background: var(--lw-white);
    border-color: var(--lw-coral);
    box-shadow: 0 0 0 0.25rem rgba(var(--lw-coral-rgb), 0.12);
}

body.lw-theme .mr-search--wide.lw-search input { width: 100%; }

body.lw-theme .mr-icon-btn { color: var(--lw-navy); }
body.lw-theme .mr-icon-btn:hover { color: var(--lw-coral); }
body.lw-theme .mr-badge { background-color: var(--lw-coral); }
body.lw-theme .mr-badge--wish { background-color: var(--lw-teal); }

body.lw-theme .lw-nav {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    padding-bottom: 0.7rem;
}

body.lw-theme .lw-nav .mr-nav-link {
    border-bottom: 0;
    border-radius: var(--lw-pill);
    padding: 0.4rem 1.1rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--lw-muted);
}

body.lw-theme .lw-nav .mr-nav-link:hover {
    background: var(--lw-blush);
    color: var(--lw-coral);
}

body.lw-theme .lw-nav .mr-nav-link.is-active {
    background: var(--lw-blush);
    color: var(--lw-coral);
    border-bottom: 0;
}

body.lw-theme .lw-nav .dropdown-menu {
    border-radius: 1.25rem;
    border-color: var(--lw-line);
    box-shadow: var(--lw-shadow);
    padding: 0.5rem;
}

body.lw-theme .lw-nav .dropdown-item { border-radius: var(--lw-pill); padding: 0.45rem 1rem; }
body.lw-theme .lw-nav .dropdown-item:hover { background: var(--lw-blush); color: var(--lw-coral); }

/* --------------------------------------------------------------------------
   Hero — split layout: copy left, image right inside a big soft CSS blob
   with floating decorative circle + star (pure pseudo-elements).
   -------------------------------------------------------------------------- */
body.lw-theme .lw-hero { padding: 3.5rem 0 4.5rem; overflow: hidden; }

body.lw-theme .lw-hero__title {
    font-size: clamp(2.3rem, 5vw, 3.3rem);
    line-height: 1.12;
    margin-bottom: 1.25rem;
}

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

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

body.lw-theme .lw-hero__figure {
    position: relative;
    text-align: center;
    padding: 1.5rem;
}

/* Floating decorations — a mint bubble and a sunshine star. */
body.lw-theme .lw-hero__figure::before {
    content: "";
    position: absolute;
    top: 6%;
    left: 2%;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--lw-pastel-2);
    animation: lw-float 4s ease-in-out infinite;
    z-index: 2;
}

body.lw-theme .lw-hero__figure::after {
    content: "";
    position: absolute;
    top: 12%;
    right: 4%;
    width: 40px;
    height: 40px;
    background: var(--lw-sun);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    animation: lw-float 4s ease-in-out infinite;
    animation-delay: 1.2s;
    z-index: 2;
}

body.lw-theme .lw-blob {
    position: relative;
    z-index: 1;
    width: min(100%, 480px);
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
    background: var(--lw-blush);
    box-shadow: var(--lw-shadow-lg);
}

@keyframes lw-float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   Shop By Age — round pastel chips with an inline star, labels beneath.
   Pastel backgrounds + icon colours cycle by position.
   -------------------------------------------------------------------------- */
body.lw-theme .lw-ages__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(1.25rem, 3.5vw, 2.75rem);
}

body.lw-theme .lw-age {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    text-decoration: none;
}

body.lw-theme .lw-age__circle {
    width: clamp(86px, 9vw, 118px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    box-shadow: var(--lw-shadow-sm);
    transition: transform 0.3s ease;
}

body.lw-theme .lw-age:hover .lw-age__circle { transform: scale(1.1); }

body.lw-theme .lw-age__circle svg { width: 34%; height: 34%; }

body.lw-theme .lw-age__label {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--lw-ink);
}

body.lw-theme .lw-age:nth-child(5n + 1) .lw-age__circle { background: var(--lw-pastel-1); color: var(--lw-coral); }
body.lw-theme .lw-age:nth-child(5n + 2) .lw-age__circle { background: var(--lw-pastel-2); color: var(--lw-teal); }
body.lw-theme .lw-age:nth-child(5n + 3) .lw-age__circle { background: var(--lw-pastel-3); color: #765a00; }
body.lw-theme .lw-age:nth-child(5n + 4) .lw-age__circle { background: var(--lw-pastel-4); color: var(--lw-navy); }
body.lw-theme .lw-age:nth-child(5n + 5) .lw-age__circle { background: var(--lw-pastel-5); color: var(--lw-coral); }

/* --------------------------------------------------------------------------
   Trust strip (inherited markup) — icons sit in soft pastel circles.
   -------------------------------------------------------------------------- */
body.lw-theme .mr-trust svg {
    width: 52px;
    height: 52px;
    padding: 13px;
    border-radius: 50%;
    background: var(--lw-pastel-1);
    color: var(--lw-coral);
}

body.lw-theme .mr-band--alt .col-6:nth-child(4n + 2) .mr-trust svg { background: var(--lw-pastel-2); color: var(--lw-teal); }
body.lw-theme .mr-band--alt .col-6:nth-child(4n + 3) .mr-trust svg { background: var(--lw-pastel-3); color: #765a00; }
body.lw-theme .mr-band--alt .col-6:nth-child(4n + 4) .mr-trust svg { background: var(--lw-pastel-4); color: var(--lw-navy); }

body.lw-theme .mr-trust strong { text-transform: none; letter-spacing: 0; font-size: 0.95rem; }

/* --------------------------------------------------------------------------
   Category promo cards — 4 rounded pastel cards, centered image, title,
   subtitle and a coloured "Shop Now →" link; backgrounds cycle by position.
   -------------------------------------------------------------------------- */
body.lw-theme .lw-promo__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.3rem;
    height: 100%;
    padding: 2.5rem 1.5rem;
    border-radius: var(--lw-card-radius);
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body.lw-theme .lw-promo__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--lw-shadow);
}

body.lw-theme .lw-promo__img {
    width: 96px;
    height: 96px;
    object-fit: contain;
    border-radius: 1rem;
    margin-bottom: 1.1rem;
}

body.lw-theme .lw-promo__title {
    font-family: var(--lw-font-head);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--lw-ink);
}

body.lw-theme .lw-promo__subtitle {
    font-size: 0.9rem;
    color: var(--lw-muted);
    opacity: 0.85;
}

body.lw-theme .lw-promo__cta {
    margin-top: 0.9rem;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--lw-coral);
}

body.lw-theme .lw-promo .col:nth-child(4n + 1) .lw-promo__card { background: var(--lw-pastel-1); }
body.lw-theme .lw-promo .col:nth-child(4n + 2) .lw-promo__card { background: var(--lw-pastel-2); }
body.lw-theme .lw-promo .col:nth-child(4n + 3) .lw-promo__card { background: var(--lw-pastel-3); }
body.lw-theme .lw-promo .col:nth-child(4n + 4) .lw-promo__card { background: var(--lw-pastel-4); }

body.lw-theme .lw-promo .col:nth-child(4n + 2) .lw-promo__cta { color: var(--lw-teal); }
body.lw-theme .lw-promo .col:nth-child(4n + 3) .lw-promo__cta { color: #765a00; }
body.lw-theme .lw-promo .col:nth-child(4n + 4) .lw-promo__cta { color: var(--lw-navy); }

/* --------------------------------------------------------------------------
   Featured / new-arrivals chrome.
   -------------------------------------------------------------------------- */
body.lw-theme .lw-viewall {
    color: var(--lw-coral);
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.02em;
}

body.lw-theme .lw-viewall:hover { color: var(--lw-teal); }

/* --------------------------------------------------------------------------
   Product cards (inherited mr-card) — white 24px cards, square pastel media
   wells (cycled), sunshine sale badge, coral quick-add pill. Applies to home
   grids AND shop / search / related rails since the card partial is shared.
   -------------------------------------------------------------------------- */
body.lw-theme .mr-card {
    background: var(--lw-white);
    border-radius: var(--lw-card-radius);
    padding: 0.9rem 0.9rem 1.2rem;
    box-shadow: var(--lw-shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

body.lw-theme .mr-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--lw-shadow);
}

body.lw-theme .mr-card__media {
    aspect-ratio: 1 / 1;
    border-radius: 1.1rem;
    overflow: hidden;
    background: var(--lw-pastel-1);
}

body.lw-theme .col:nth-child(4n + 2) .mr-card .mr-card__media { background: var(--lw-pastel-2); }
body.lw-theme .col:nth-child(4n + 3) .mr-card .mr-card__media { background: var(--lw-pastel-3); }
body.lw-theme .col:nth-child(4n + 4) .mr-card .mr-card__media { background: var(--lw-pastel-4); }

/* Sunshine-yellow sale badge (DESIGN.md: yellow is reserved for sale/star
   moments), full pill. */
body.lw-theme .mr-card__badge {
    border-radius: var(--lw-pill);
    background: var(--lw-sun);
    color: #3c2c00;
    font-weight: 700;
    letter-spacing: 0.06em;
}

body.lw-theme .mr-card__wish {
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: var(--lw-coral);
}

body.lw-theme .mr-card__quick {
    background: var(--lw-coral);
    border-radius: var(--lw-pill);
    margin: 0 0.75rem 0.75rem;
    width: calc(100% - 1.5rem);
}

body.lw-theme .mr-card__quickview { border-radius: 50%; color: var(--lw-navy); }

body.lw-theme .mr-card__eyebrow { color: var(--lw-teal); letter-spacing: 0.1em; }
body.lw-theme .mr-card__title { font-size: 0.98rem; }
body.lw-theme .mr-card__title a { color: var(--lw-ink); }
body.lw-theme .mr-card__title a:hover { color: var(--lw-coral); }

body.lw-theme .mr-card__price {
    color: var(--lw-coral);
    font-family: var(--lw-font-head);
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Sale banner — full-width rounded coral band with soft bubble decorations,
   copy left, white pill deal button right.
   -------------------------------------------------------------------------- */
body.lw-theme .lw-sale__band {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.75rem;
    background: var(--lw-coral);
    border-radius: 2rem;
    padding: clamp(2.25rem, 5vw, 3.25rem) clamp(1.75rem, 5vw, 3.5rem);
    color: #fff;
    box-shadow: 0 18px 44px rgba(var(--lw-coral-rgb), 0.32);
}

body.lw-theme .lw-sale__band::before,
body.lw-theme .lw-sale__band::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    filter: blur(28px);
}

body.lw-theme .lw-sale__band::before { top: -3rem; left: -3rem; width: 10rem; height: 10rem; }
body.lw-theme .lw-sale__band::after { bottom: -4rem; right: -4rem; width: 15rem; height: 15rem; }

body.lw-theme .lw-sale__copy { position: relative; z-index: 1; }

body.lw-theme .lw-sale__title {
    color: #fff;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    margin-bottom: 0.5rem;
}

body.lw-theme .lw-sale__body {
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.2rem;
    font-weight: 600;
}

body.lw-theme .lw-sale__btn {
    position: relative;
    z-index: 1;
    background: #fff;
    color: var(--lw-coral);
    padding: 1rem 2.4rem;
    font-size: 1.05rem;
    box-shadow: var(--lw-shadow);
}

body.lw-theme .lw-sale__btn:hover {
    background: var(--lw-cream);
    color: var(--lw-coral);
    transform: scale(1.06);
}

/* --------------------------------------------------------------------------
   Brand strip (inherited) — quiet grayscale wordmarks.
   -------------------------------------------------------------------------- */
body.lw-theme .mr-brandstrip {
    background: rgba(255, 255, 255, 0.45);
    border-block: 1px solid var(--lw-line);
    opacity: 1;
}

body.lw-theme .mr-brandstrip span {
    font-family: var(--lw-font-head);
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #a9a29c;
}

/* --------------------------------------------------------------------------
   Journal (inherited) — white rounded story cards, teal category labels.
   -------------------------------------------------------------------------- */
body.lw-theme .mr-article__media { border-radius: var(--lw-card-radius); }
body.lw-theme .mr-article__title { font-size: 1.15rem; }
body.lw-theme .mr-article__title a:hover { color: var(--lw-coral); }

/* --------------------------------------------------------------------------
   Newsletter — the rounded deep-teal "Join the Wonder Club" panel with the
   pill email input + white subscribe button.
   -------------------------------------------------------------------------- */
body.lw-theme .lw-cta__panel {
    background: var(--lw-teal);
    border-radius: var(--lw-card-radius);
    padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem);
    box-shadow: var(--lw-shadow-lg);
}

body.lw-theme .lw-cta__title { color: #fff; }

body.lw-theme .lw-cta__body {
    color: rgba(255, 255, 255, 0.82);
    max-width: 52ch;
    line-height: 1.8;
}

body.lw-theme .lw-cta__form {
    display: flex;
    gap: 0.6rem;
    max-width: 480px;
}

body.lw-theme .lw-cta__form input {
    flex: 1;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: #fff;
    color: var(--lw-ink);
    border-radius: var(--lw-pill);
    padding: 0.7rem 1.4rem;
}

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

body.lw-theme .lw-cta__form input:focus {
    outline: none;
    border-color: var(--lw-teal-soft);
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.15);
}

body.lw-theme .lw-cta__btn {
    background: #fff;
    color: var(--lw-teal);
    border-radius: var(--lw-pill);
    font-weight: 700;
}

body.lw-theme .lw-cta__btn:hover { background: var(--lw-teal-soft); color: var(--lw-navy-deep); }

body.lw-theme .lw-cta__note {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.78rem;
}

/* --------------------------------------------------------------------------
   Inherited chrome — deep-navy footer with soft-teal accents (from the
   export), rounded dividers, playful social dots.
   -------------------------------------------------------------------------- */
body.lw-theme .mr-footer {
    background-color: var(--lw-navy-deep);
    border-top: 0;
    color: rgba(255, 255, 255, 0.85);
}

body.lw-theme .mr-footer h4 { color: var(--lw-teal-soft); }
body.lw-theme .mr-footer .mr-muted,
body.lw-theme .mr-footer .mr-soft { color: rgba(255, 255, 255, 0.65); }
body.lw-theme .mr-footer a { color: rgba(255, 255, 255, 0.75); }
body.lw-theme .mr-footer a:hover { color: var(--lw-teal-soft); }
body.lw-theme .mr-footer__brand { font-family: var(--lw-font-head); font-weight: 700; color: #fff; }
body.lw-theme .mr-footer .mr-divider { background-color: rgba(255, 255, 255, 0.12); }

body.lw-theme .mr-footer .form-control {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

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

body.lw-theme .mr-social {
    border-radius: 50%;
    border-color: transparent;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

body.lw-theme .mr-social:hover {
    background: var(--lw-teal-soft);
    border-color: var(--lw-teal-soft);
    color: var(--lw-navy-deep);
}

body.lw-theme .mr-divider { border-color: var(--lw-line); }

/* Respect reduced motion — the design's floats/lifts are decorative. */
@media (prefers-reduced-motion: reduce) {
    body.lw-theme .lw-hero__figure::before,
    body.lw-theme .lw-hero__figure::after {
        animation: none;
    }

    body.lw-theme .mr-btn,
    body.lw-theme .mr-card,
    body.lw-theme .lw-promo__card,
    body.lw-theme .lw-age__circle {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   Mobile (from the Stitch mobile frames): stacked hero with a smaller blob,
   tighter chips, stacked centered sale band, full-width search in the
   offcanvas, 2-column header grid.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    body.lw-theme .lw-header__bar { grid-template-columns: 1fr auto; }
    body.lw-theme .lw-logo { font-size: 1.4rem; }
    body.lw-theme .lw-hero { padding: 2.25rem 0 3rem; }
    body.lw-theme .lw-hero__title { font-size: 2.1rem; }
    body.lw-theme .lw-blob { width: min(100%, 340px); }
    body.lw-theme .lw-sale__band { flex-direction: column; text-align: center; }
    body.lw-theme .lw-cta__form { flex-direction: column; }
}