/* ==========================================================================
   SunGrid — a solar & power-backup storefront (extends modern-retail).

   Ported from the Stitch "SunGrid | Engineering the Future of Solar" export
   (docs/templates/pending/stitch_41_sungrid_solar_e_commerce_homepage). This
   theme INHERITS every modern-retail page + partial and ships only its own
   brand layer plus seven home partials with `sg-*` markup. This stylesheet
   therefore has two jobs:

     (a) RE-POINT the base neutral tokens (--mr-*) at the daylight-white /
         deep-navy / solar-amber palette so every inherited page (shop / PDP /
         cart / checkout / account / blog) reads on-brand, and finish the
         inherited chrome (buttons, forms, header, hero, trust, promo, card,
         footer);

     (b) style the theme's own `sg-*` sections — the navy savings-stats band,
         the "Which System Fits Your Home?" bundle cards, the System
         Bestsellers keyline link, the circular collection band and the "Off
         the Grid" white newsletter.

   Everything is scoped under `body.sg-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
   navy surface follows.

   Palette (from the export's rendered code.html + DESIGN.md prose):
     Deep navy    #002441 (rendered `primary` — CTAs, stats band, footer, ink
                  structure; the theme.json primary_color)
     Navy mid     #143a5c (rendered `primary-container` — announcement ribbon;
                  DESIGN.md's "Deep Navy")
     Solar amber  #f5a623 (DESIGN.md accent — fills, keylines, stat values,
                  badges; carries NAVY text at 7.8:1, never white)
     Amber ink    #835500 (the rendered `secondary` — the ONLY amber allowed to
                  be text on a light canvas: 6.4:1 on white)
     Amber bright #feae2c (rendered `secondary-container` — hover fills)
     Daylight     #f8faf9 canvas · #ffffff cards · #f2f4f3 / #eceeed tonal bands
     Ink          #191c1c · muted #43474e · soft #73777f · lines #c3c7cf
   ========================================================================== */

body.sg-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --sg-navy: var(--bs-primary, #002441);
    --sg-navy-rgb: var(--bs-primary-rgb, 0, 36, 65);
    --sg-amber: var(--ll-accent, #f5a623);
    --sg-radius: var(--ll-btn-radius, 0.375rem);
    --sg-font-head: var(--ll-font-headings, "Albert Sans"), system-ui, sans-serif;
    --sg-font-body: var(--ll-font-body, "Inter"), system-ui, -apple-system, sans-serif;

    /* Literal palette */
    --sg-navy-mid: #143a5c;
    --sg-amber-ink: #835500;
    --sg-amber-bright: #feae2c;
    --sg-canvas: #f8faf9;
    --sg-white: #ffffff;
    --sg-tonal: #f2f4f3;
    --sg-tonal-2: #eceeed;
    --sg-tonal-3: #e1e3e2;
    --sg-ink: #191c1c;
    --sg-muted: #43474e;
    --sg-soft: #73777f;
    --sg-line: #dcdfe3;
    --sg-line-2: #c3c7cf;

    /* Depth — DESIGN.md "Ambient Shadows": diffused, low opacity, navy-tinted */
    --sg-shadow: 0 4px 20px -2px rgba(20, 58, 92, 0.07);
    --sg-shadow-lg: 0 18px 40px -18px rgba(20, 58, 92, 0.22);

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

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

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

/* ===== Typography ======================================================== */
body.sg-theme h1, body.sg-theme h2, body.sg-theme h3,
body.sg-theme h4, body.sg-theme h5, body.sg-theme h6 {
    font-family: var(--sg-font-head);
    color: var(--sg-ink);
    font-weight: 700;
    letter-spacing: -0.01em;
}
/* DESIGN: headline-xl / headline-lg are Albert Sans Bold with tight tracking. */
body.sg-theme .mr-display { font-weight: 700; letter-spacing: -0.02em; }
body.sg-theme .mr-headline { font-weight: 700; }

/* The eyebrow inherits --ll-accent, i.e. Solar Amber — only ~2:1 on the
   daylight canvas. Route amber TEXT roles to the darker sibling (6.4:1). */
body.sg-theme .mr-eyebrow {
    font-family: var(--sg-font-body);
    color: var(--sg-amber-ink);
    letter-spacing: 0.14em;
}
body.sg-theme .sg-subline { color: var(--sg-muted); font-size: 1rem; }

/* Decorative arrow on the template's "… →" links (chrome, not merchant data) */
body.sg-theme .sg-arrow::after { content: " \2192"; }

/* ===== Buttons (6px "Soft-Technical" corners) ============================= */
/* DESIGN: Primary = Deep Navy fill + white label; Secondary = 1px navy
   outline; the amber CTA fill is reserved for add-to-cart / badges. */
body.sg-theme .mr-btn {
    font-family: var(--sg-font-body);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    border-radius: var(--sg-radius);
    padding: 0.9rem 1.9rem;
    transition: background-color 0.22s, color 0.22s, border-color 0.22s, filter 0.22s, transform 0.1s;
}
body.sg-theme .mr-btn--hero { padding: 1.05rem 2.3rem; }
body.sg-theme .mr-btn--primary { background-color: var(--sg-navy); color: #fff; }
body.sg-theme .mr-btn--primary:hover { background-color: var(--sg-navy-mid); color: #fff; }
body.sg-theme .mr-btn--outline { border-color: var(--sg-navy); color: var(--sg-navy); }
body.sg-theme .mr-btn--outline:hover { background-color: var(--sg-navy); color: #fff; }
body.sg-theme .mr-btn--light { background-color: #fff; color: var(--sg-navy); }
body.sg-theme .mr-btn--light:hover { background-color: var(--sg-amber); color: var(--sg-navy); }
body.sg-theme .mr-btn--on-dark { border-width: 2px; border-color: rgba(255, 255, 255, 0.85); color: #fff; }
body.sg-theme .mr-btn--on-dark:hover { background-color: #fff; color: var(--sg-navy); }
body.sg-theme .mr-btn--ghost { color: var(--sg-navy); }
body.sg-theme .mr-btn--ghost:hover { color: var(--sg-amber-ink); }
body.sg-theme .mr-ulink:hover { color: var(--sg-amber-ink); border-color: var(--sg-amber-ink); }
body.sg-theme .mr-rail-btn:hover { background: var(--sg-navy); border-color: var(--sg-navy); color: #fff; }

/* Bootstrap's own .btn-primary (the shared PDP "Submit review" button) sets
   --bs-btn-bg from the token but keeps a white label — navy fill, so fine.
   Re-assert the mr- primary label explicitly (known-defect guard). */
body.sg-theme .mr-btn.mr-btn--primary { color: #fff; }

/* ===== Forms (1px muted-navy keyline, white field) ======================= */
body.sg-theme .form-control,
body.sg-theme .form-select {
    border-radius: var(--sg-radius);
    border-color: var(--sg-line-2);
    background-color: var(--sg-white);
    color: var(--sg-ink);
}
/* DESIGN: focus states carry a Solar Amber ring. The border stays navy so the
   indicator itself clears 3:1 against the white field. */
body.sg-theme .form-control:focus,
body.sg-theme .form-select:focus {
    border-color: var(--sg-navy);
    box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.38);
}
/* Never a padding shorthand on the select — it eats Bootstrap's caret gutter. */
body.sg-theme .form-select { padding-inline-end: 2.25rem; }
body.sg-theme .form-check-input:checked { background-color: var(--sg-navy); border-color: var(--sg-navy); }
body.sg-theme .form-label { color: var(--sg-ink); }

/* ===== Announcement ribbon (navy-mid, matches the export's top bar) ====== */
body.sg-theme .mr-announce {
    background-color: var(--sg-navy-mid);
    color: #fff;
    letter-spacing: 0.06em;
}
body.sg-theme .mr-announce a { color: var(--sg-amber); }

/* ===== Header ============================================================ */
body.sg-theme .mr-header { border-bottom-color: var(--sg-line); }
body.sg-theme .mr-logo {
    font-family: var(--sg-font-head);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--sg-navy);
}
body.sg-theme .mr-nav-link { font-weight: 600; }
body.sg-theme .mr-nav-link:hover { color: var(--sg-navy); }
/* The base inks the active link with --ll-accent (amber, ~2:1 on white). The
   export renders it as the darker amber with an amber keyline underneath. */
body.sg-theme .mr-nav-link.is-active { color: var(--sg-amber-ink); border-bottom-color: var(--sg-amber); }
body.sg-theme .mr-icon-btn:hover { color: var(--sg-navy); }
body.sg-theme .mr-search input { border-radius: 9999px; background-color: var(--sg-tonal-2); border-color: var(--sg-line); }
body.sg-theme .mr-search input:focus { background-color: var(--sg-white); }
/* Cart / wishlist counters: amber pill with navy digits (7.8:1). */
body.sg-theme .mr-badge,
body.sg-theme .mr-badge--wish { background-color: var(--sg-amber); color: var(--sg-navy); }

/* ===== Hero — full-bleed rooftop photo + frosted copy panel ============== */
/* Never `background: none` here: the scrim is the only thing guaranteeing the
   white headline stays readable over an arbitrary merchant photograph. */
body.sg-theme .mr-hero__overlay {
    background: linear-gradient(90deg,
        rgba(0, 36, 65, 0.66) 0%,
        rgba(0, 36, 65, 0.4) 52%,
        rgba(0, 36, 65, 0.18) 100%);
}
body.sg-theme .mr-hero__copy {
    max-width: 42rem;
    background-color: rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: calc(var(--sg-radius) * 2);
    padding: clamp(1.75rem, 4vw, 2.5rem);
}
/* Amber chip eyebrow — navy label on Solar Amber measures 7.8:1. */
body.sg-theme .mr-hero .mr-hero__copy .mr-eyebrow {
    display: inline-block;
    background-color: var(--sg-amber);
    color: var(--sg-navy);
    font-weight: 700;
    padding: 0.35rem 0.8rem;
    border-radius: var(--sg-radius);
    letter-spacing: 0.12em;
    margin-bottom: 1.5rem;
}
body.sg-theme .mr-hero .mr-hero__copy h1 { margin-bottom: 1.5rem; }

/* ===== Trust strip ======================================================= */
body.sg-theme .mr-trust svg { color: var(--sg-amber-ink); }
body.sg-theme .mr-trust strong { color: var(--sg-ink); text-transform: none; letter-spacing: 0.01em; font-size: 0.92rem; }
body.sg-theme .mr-trust span { color: var(--sg-soft); font-size: 0.8rem; }

/* ===== Promo tiles (inherited mr-promo) — navy scrim + amber arrow link == */
body.sg-theme .mr-promo { border: 1px solid var(--sg-line); box-shadow: var(--sg-shadow); }
body.sg-theme .mr-promo__scrim {
    background: linear-gradient(180deg, rgba(0, 36, 65, 0.05) 30%, rgba(0, 36, 65, 0.82) 100%);
}
body.sg-theme .mr-promo:hover .mr-promo__scrim {
    background: linear-gradient(180deg, rgba(0, 36, 65, 0.2) 20%, rgba(0, 36, 65, 0.88) 100%);
}
body.sg-theme .mr-promo__title { font-family: var(--sg-font-head); font-weight: 700; margin-bottom: 0.4rem; }
body.sg-theme .sg-promo__text {
    display: block;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.9rem;
    margin-bottom: 0.85rem;
}
/* Also override the base's `:hover` DESCENDANT rule (0,0,3,0) or it wins. */
body.sg-theme .mr-promo__cta,
body.sg-theme .mr-promo:hover .mr-promo__cta {
    font-family: var(--sg-font-body);
    color: var(--sg-amber);
    border: 0;
    padding-bottom: 0;
    letter-spacing: 0.06em;
    text-transform: none;
    font-size: 0.85rem;
}
body.sg-theme .mr-promo:hover .mr-promo__cta { color: var(--sg-amber-bright); }

/* ===== Product card (inherited) — white card, 1px keyline, inset text ==== */
/* DESIGN "Cards": white surface, subtle 1px border, 6px corners, square media.
   The base card is borderless with flush text, so the border means the text
   must be inset (recurring gotcha #2). */
body.sg-theme .mr-card {
    background-color: var(--sg-white);
    border: 1px solid var(--sg-line);
    border-radius: var(--sg-radius);
    overflow: hidden;
    transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
body.sg-theme .mr-card:hover {
    box-shadow: var(--sg-shadow-lg);
    border-color: var(--sg-line-2);
    transform: translateY(-2px);
}
body.sg-theme .mr-card__media { margin-bottom: 0; border-radius: 0; aspect-ratio: 1 / 1; background-color: var(--sg-tonal); }
body.sg-theme .mr-card__eyebrow,
body.sg-theme .mr-card__title,
body.sg-theme .mr-card__price,
body.sg-theme .mr-card [data-testid="card-rating"] { padding-inline: 1rem; }
body.sg-theme .mr-card__media + * { padding-top: 0.9rem; }
body.sg-theme .mr-card__eyebrow { color: var(--sg-soft); }
body.sg-theme .mr-card__title { font-family: var(--sg-font-body); font-weight: 600; color: var(--sg-ink); }
body.sg-theme .mr-card__title a:hover { color: var(--sg-navy); }
body.sg-theme .mr-card__price {
    padding-bottom: 1.1rem;
    font-family: var(--sg-font-body);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--sg-navy);
}
body.sg-theme .mr-card__price del { color: var(--sg-soft); font-weight: 400; font-size: 0.88rem; }

/* SALE / demo badge — the export's amber tag with a navy label (7.8:1). The
   base styles .mr-card__sale but the partial emits .mr-card__badge. */
body.sg-theme .mr-card__badge {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    z-index: 2;
    background-color: var(--sg-amber);
    color: var(--sg-navy);
    font-family: var(--sg-font-body);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.28rem 0.5rem;
    border-radius: calc(var(--sg-radius) * 0.6);
}

/* Overlay controls — restyled TOGETHER, contrast-checked in BOTH states.
   Navy on near-white ≈ 15.9:1; amber-ink on white ≈ 6.4:1 — both clear the
   3:1 WCAG minimum for UI components. */
body.sg-theme .mr-card__wish,
body.sg-theme .mr-card__quickview {
    color: var(--sg-navy);
    background-color: rgba(255, 255, 255, 0.9);
}
body.sg-theme .mr-card__wish:hover,
body.sg-theme .mr-card__quickview:hover {
    color: var(--sg-amber-ink);
    background-color: #fff;
}
body.sg-theme .mr-card__wish.is-active { color: var(--sg-amber-ink); }
/* Slide-up Add to Cart — the export's amber CTA. Its own label is navy (the
   export set navy on the DARKER amber, only 2.45:1; Solar Amber fixes it). */
body.sg-theme .mr-card__quick {
    background-color: var(--sg-amber);
    color: var(--sg-navy);
    font-weight: 700;
    letter-spacing: 0.06em;
}
body.sg-theme .mr-card__quick:hover { background-color: var(--sg-amber-bright); color: var(--sg-navy); }

/* ===== Journal (inherited mr-article) ==================================== */
body.sg-theme .mr-article__media { border-radius: var(--sg-radius); overflow: hidden; }
body.sg-theme .mr-article__title { font-size: 1.25rem; }
body.sg-theme .mr-article__title a { color: var(--sg-ink); }
body.sg-theme .mr-article__title a:hover { color: var(--sg-amber-ink); }

/* ===== sg-featured / sg-journal — navy keyline "see all" link ============ */
body.sg-theme .sg-keyline-link {
    font-family: var(--sg-font-body);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--sg-navy);
    text-decoration: none;
    border-bottom: 1px solid var(--sg-navy);
    padding-bottom: 2px;
    transition: color 0.2s, border-color 0.2s;
}
body.sg-theme .sg-keyline-link:hover { color: var(--sg-amber-ink); border-bottom-color: var(--sg-amber); }

/* ===== sg-stats — the deep-navy savings band ============================= */
body.sg-theme .sg-stats {
    position: relative;
    overflow: hidden;
    background-color: var(--sg-navy);
    color: #fff;
    padding-block: clamp(56px, 9vw, 80px);
}
/* Faint engineering dot grid (the export's radial-gradient at 10% opacity) */
body.sg-theme .sg-stats__grid {
    position: absolute;
    inset: 0;
    opacity: 0.1;
    pointer-events: none;
    background-image: radial-gradient(#ffffff 1px, transparent 1px);
    background-size: 40px 40px;
}
body.sg-theme .sg-stats__shell { position: relative; z-index: 1; }
body.sg-theme .sg-stats__item { display: flex; flex-direction: column; gap: 0.5rem; }
body.sg-theme .sg-stats__value {
    font-family: var(--sg-font-head);
    font-size: clamp(2.25rem, 4.4vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--sg-amber);
}
body.sg-theme .sg-stats__label {
    font-family: var(--sg-font-body);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fff;
}

/* ===== sg-guide — "Which System Fits Your Home?" bundle cards ============ */
body.sg-theme .sg-guide {
    background-color: var(--sg-white);
    border-top: 1px solid var(--sg-line);
    border-bottom: 1px solid var(--sg-line);
    padding-block: clamp(56px, 9vw, 96px);
}
body.sg-theme .sg-guide__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
body.sg-theme .sg-guide__sub { max-width: 46rem; color: var(--sg-muted); font-size: 1.02rem; }
body.sg-theme .sg-guide__card {
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--sg-line-2);
    border-radius: calc(var(--sg-radius) * 2);
    padding: clamp(1.5rem, 3vw, 2rem);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
body.sg-theme .sg-guide__card:hover { border-color: var(--sg-amber); box-shadow: var(--sg-shadow); }
/* The export tints the middle bundle card on the tonal surface. */
body.sg-theme .sg-guide .col:nth-child(2) .sg-guide__card { background-color: var(--sg-tonal); }
body.sg-theme .sg-guide__glyph { display: inline-flex; color: var(--sg-amber-ink); margin-bottom: 1.5rem; }
body.sg-theme .sg-guide__glyph svg { width: 44px; height: 44px; }
body.sg-theme .sg-guide__title {
    font-family: var(--sg-font-head);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--sg-ink);
    margin-bottom: 1.25rem;
}
body.sg-theme .sg-guide__list { margin-bottom: 1.75rem; }
body.sg-theme .sg-guide__list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--sg-muted);
    font-size: 0.92rem;
    padding-block: 0.4rem;
}
body.sg-theme .sg-guide__list li svg { width: 19px; height: 19px; color: var(--sg-soft); flex-shrink: 0; }
body.sg-theme .sg-guide__link {
    margin-top: auto;
    font-family: var(--sg-font-body);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--sg-navy);
    text-decoration: none;
}
body.sg-theme .sg-guide__link:hover { color: var(--sg-amber-ink); }

/* ===== sg-catband — circular collection tiles on the tonal band ========== */
body.sg-theme .sg-catband { background-color: var(--sg-tonal); padding-block: clamp(40px, 6vw, 64px); }
body.sg-theme .sg-catband__title { font-size: clamp(1.35rem, 2.2vw, 1.6rem); }
body.sg-theme .sg-catband__tile {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: clamp(1.5rem, 3vw, 2.5rem) 1rem;
    background-color: var(--sg-white);
    border: 1px solid var(--sg-line);
    border-radius: calc(var(--sg-radius) * 2);
    text-decoration: none;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
body.sg-theme .sg-catband__tile:hover { box-shadow: var(--sg-shadow-lg); border-color: var(--sg-line-2); }
body.sg-theme .sg-catband__circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 9999px;
    background-color: var(--sg-tonal-2);
    color: var(--sg-navy);
    transition: background-color 0.25s ease;
}
body.sg-theme .sg-catband__circle svg { width: 30px; height: 30px; }
body.sg-theme .sg-catband__tile:hover .sg-catband__circle { background-color: rgba(245, 166, 35, 0.24); }
body.sg-theme .sg-catband__label {
    font-family: var(--sg-font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--sg-ink);
}

/* ===== sg-cta — the white "Off the Grid" newsletter band ================= */
body.sg-theme .sg-cta {
    background-color: var(--sg-white);
    border-top: 1px solid var(--sg-line);
    border-bottom: 1px solid var(--sg-line);
    padding-block: clamp(56px, 9vw, 96px);
}
body.sg-theme .sg-cta__eyebrow { color: var(--sg-amber-ink); }
body.sg-theme .sg-cta__title { color: var(--sg-ink); }
body.sg-theme .sg-cta__body { max-width: 46rem; color: var(--sg-muted); font-size: 1.1rem; }
body.sg-theme .sg-cta__form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    max-width: 32rem;
}
body.sg-theme .sg-cta__form input {
    flex: 1;
    min-width: 12rem;
    background-color: var(--sg-white);
    border: 1px solid var(--sg-line-2);
    border-radius: var(--sg-radius);
    color: var(--sg-ink);
    padding: 0.95rem 1.15rem;
    font-size: 0.98rem;
}
body.sg-theme .sg-cta__form input::placeholder { color: var(--sg-soft); }
body.sg-theme .sg-cta__form input:focus {
    outline: none;
    border-color: var(--sg-navy);
    box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.38);
}
body.sg-theme .sg-cta__btn {
    background-color: var(--sg-navy);
    color: #fff;
    border: 0;
    border-radius: var(--sg-radius);
    font-family: var(--sg-font-body);
    font-weight: 600;
    padding: 0.95rem 2rem;
    cursor: pointer;
    transition: background-color 0.2s;
}
body.sg-theme .sg-cta__btn:hover { background-color: var(--sg-navy-mid); }
body.sg-theme .sg-cta__note { color: var(--sg-soft); font-size: 0.78rem; }

/* ===== Footer (inherited mr-footer) — deep-navy panel ==================== */
/* The base footer is a light band; the export's footer is deep navy 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 navy band. */
body.sg-theme .mr-footer {
    background-color: var(--sg-navy);
    border-top-color: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.72);
}
body.sg-theme .mr-footer h4 { color: #fff; }
body.sg-theme .mr-footer .mr-footer__brand { color: #fff; font-family: var(--sg-font-head); }
body.sg-theme .mr-footer a { color: rgba(255, 255, 255, 0.75); }
body.sg-theme .mr-footer a:hover { color: var(--sg-amber); }
body.sg-theme .mr-footer .mr-muted { color: rgba(255, 255, 255, 0.75); }
body.sg-theme .mr-footer .mr-soft { color: rgba(255, 255, 255, 0.55); }
body.sg-theme .mr-footer .mr-divider { background-color: rgba(255, 255, 255, 0.12); }
body.sg-theme .mr-footer .form-control {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}
body.sg-theme .mr-footer .form-control::placeholder { color: rgba(255, 255, 255, 0.45); }
body.sg-theme .mr-social { border-color: rgba(255, 255, 255, 0.2); color: #fff; }
body.sg-theme .mr-social:hover { background-color: var(--sg-amber); border-color: var(--sg-amber); color: var(--sg-navy); }

/* ===== PDP / cart / checkout / account finishing (inherited pages) ======= */
/* The base hovers several light-canvas links to --ll-accent — Solar Amber is
   only ~2:1 on white, so every one of them is re-pointed at the amber ink. */
body.sg-theme .mr-crumbs a:hover,
body.sg-theme .mr-cart-row__title a:hover { color: var(--sg-amber-ink); }
body.sg-theme .mr-stars { color: var(--sg-amber-ink); }
body.sg-theme .mr-sale { background-color: var(--sg-amber); color: var(--sg-navy); }
body.sg-theme .mr-tabs .nav-link.active { color: var(--sg-navy); border-bottom-color: var(--sg-amber); }
body.sg-theme .mr-filter__link:hover { color: var(--sg-navy); }
body.sg-theme .mr-page.is-active { background-color: var(--sg-navy); border-color: var(--sg-navy); color: #fff; }
body.sg-theme .mr-page:hover { border-color: var(--sg-navy); color: var(--sg-navy); }
body.sg-theme .mr-acct-link.is-active { background-color: var(--sg-navy); color: #fff; }
body.sg-theme .mr-acct-avatar { background-color: var(--sg-navy); color: #fff; }
body.sg-theme .mr-gallery__thumb.is-active { border-color: var(--sg-navy); }
body.sg-theme .mr-step.is-done .mr-step__dot,
body.sg-theme .mr-step.is-current .mr-step__dot { border-color: var(--sg-navy); }
body.sg-theme .mr-step.is-done .mr-step__dot { background-color: var(--sg-navy); color: #fff; }

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

/* ===== Motion preferences ================================================ */
@media (prefers-reduced-motion: reduce) {
    body.sg-theme .mr-card:hover { transform: none; }
    body.sg-theme .mr-card,
    body.sg-theme .mr-card__media img,
    body.sg-theme .mr-promo__img,
    body.sg-theme .sg-catband__tile,
    body.sg-theme .sg-guide__card,
    body.sg-theme .mr-article__media img { transition: none; }
}

/* ===== Mobile (from the export's 4-column mobile frames) ================= */
@media (max-width: 991.98px) {
    body.sg-theme { font-size: 15.5px; }
    body.sg-theme .mr-hero__copy { padding: clamp(1.25rem, 5vw, 1.75rem); }
    body.sg-theme .sg-stats,
    body.sg-theme .sg-guide,
    body.sg-theme .sg-cta { padding-block: clamp(40px, 10vw, 64px); }
    body.sg-theme .sg-guide__head { margin-bottom: 2rem; }
    body.sg-theme .sg-catband__circle { width: 54px; height: 54px; }
    body.sg-theme .sg-catband__circle svg { width: 26px; height: 26px; }
    body.sg-theme .sg-catband__tile { gap: 0.75rem; }
    body.sg-theme .sg-cta__form { flex-direction: column; }
    body.sg-theme .sg-cta__btn { width: 100%; }
}