/* ==========================================================================
   SafeSight — a CCTV / security-hardware storefront (extends modern-retail).

   Ported from the Stitch "SafeSight | Professional Home Security Systems"
   export (docs/templates/pending/stitch_78_safesight_e_commerce_experience).
   This theme INHERITS every modern-retail page + partial and ships only its own
   brand layer plus six home partials with `sy-*` markup. This stylesheet
   therefore has two jobs:

     (a) RE-POINT the base neutral tokens (--mr-*) at the steel / Security Navy /
         Guard Green 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 `sy-*` sections — the "Most Installed" grid with
         its green heading keyline, the navy coverage-planner band, the "New
         Tech" grid, the shortcut category band, the journal strip and "The
         Watchpoint" newsletter.

   Everything is scoped under `body.sy-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 (DESIGN.md prose + the rendered homepage code.html, which wins):
     Security Navy #1a2b3c — the theme.json primary_color. Primary buttons,
                   headline ink structure, announcement bar, coverage band,
                   footer. 14.4:1 on white, so it is safe as TEXT and as a FILL
                   carrying a white label.
     Navy deep     #0b1d2d — pressed/hover state for navy fills.
     Guard Green   #2f9e5f — the theme.json accent_color. DESIGN.md is explicit
                   that it is a FUNCTIONAL accent (in-stock dots, badges,
                   keylines, glyphs). It measures 3.40:1 on white, so it is used
                   for UI decoration (>= 3:1) and for glyphs on navy (4.25:1) —
                   NEVER as small text on a light surface.
     Green ink     #006d3b — the export's own darker `secondary`; the ONLY green
                   allowed as text on the light canvas (6.50:1 on white) and the
                   green FILL that carries a white label (6.50:1). Eyebrows,
                   the journal labels, the hero chip + hero CTA, the sale tag.
     Green bright  #71dc96 — green TEXT on the navy band/footer (8.50:1). Guard
                   Green itself is only 4.25:1 there.
     Mint          #8df9b0 — the export's `secondary-fixed`, used for the promo
                   tile arrow links over the navy scrim (11.2:1).
     Steel         #f2f4f5 canvas · #ffffff cards · #f7f9fa / #e9edef / #dfe5e8
                   tonal bands (DESIGN.md "Tonal Layers")
     Ink           #1b1c1d · muted #44474c (9.3:1) · soft #6b7078 (5.0:1)
     Lines         #d1d5db (DESIGN.md's explicit card keyline) · strong #b6bec6
   ========================================================================== */

body.sy-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --sy-navy: var(--bs-primary, #1a2b3c);
    --sy-navy-rgb: var(--bs-primary-rgb, 26, 43, 60);
    --sy-green: var(--ll-accent, #2f9e5f);
    --sy-radius: var(--ll-btn-radius, 0.375rem);
    --sy-font-head: var(--ll-font-headings, "Poppins"), system-ui, sans-serif;
    --sy-font-body: var(--ll-font-body, "Inter"), system-ui, -apple-system, sans-serif;

    /* Literal palette */
    --sy-navy-deep: #0b1d2d;
    --sy-green-ink: #006d3b;
    --sy-green-deep: #00542d;
    --sy-green-bright: #71dc96;
    --sy-mint: #8df9b0;
    --sy-canvas: #f2f4f5;
    --sy-white: #ffffff;
    --sy-tonal: #f7f9fa;
    --sy-tonal-2: #e9edef;
    --sy-tonal-3: #dfe5e8;
    --sy-ink: #1b1c1d;
    --sy-muted: #44474c;
    --sy-soft: #6b7078;
    --sy-line: #d1d5db;
    --sy-line-2: #b6bec6;
    --sy-star: #8a6300;

    /* Depth — DESIGN.md "Tonal Layers plus crisp, low-intensity shadows",
       tinted 10% navy so the colour story survives the depth model. */
    --sy-shadow: 0 4px 6px -1px rgba(26, 43, 60, 0.07);
    --sy-shadow-lg: 0 16px 34px -14px rgba(26, 43, 60, 0.24);

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

    /* Bootstrap surfaces the base does not own. `.bg-light` (the shared
       product-facet headings) reads --bs-light-rgb, so it is re-pointed at the
       steel tonal layer instead of Bootstrap's stock #f8f9fa;
       --bs-secondary-bg covers .bg-body-secondary / .text-bg-secondary. */
    --bs-light-rgb: 233, 237, 239;
    --bs-secondary-bg: var(--sy-tonal-2);

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

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

/* ===== Typography ========================================================= */
/* DESIGN: Poppins Semibold 600 for h1/h2/h3 with -0.02em tracking on the
   display size; Inter for everything functional. */
body.sy-theme h1, body.sy-theme h2, body.sy-theme h3,
body.sy-theme h4, body.sy-theme h5, body.sy-theme h6 {
    font-family: var(--sy-font-head);
    color: var(--sy-ink);
    font-weight: 600;
    letter-spacing: -0.01em;
}
body.sy-theme .mr-display { font-weight: 600; letter-spacing: -0.02em; }
body.sy-theme .mr-headline { font-weight: 600; }

/* The eyebrow inherits --ll-accent, i.e. Guard Green — only 3.40:1 on white,
   which fails AA for the small uppercase labels that ARE this theme's signature
   (journal categories, section eyebrows). Route green TEXT to the darker
   sibling (6.50:1). */
body.sy-theme .mr-eyebrow {
    font-family: var(--sy-font-body);
    color: var(--sy-green-ink);
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.16em;
}

/* The export's section headings carry a 4px Guard Green left keyline. */
body.sy-theme .sy-rule {
    border-left: 4px solid var(--sy-green);
    padding-left: 1rem;
}

/* Plain green text link ("Read All Posts") — green ink for AA, underlined on
   hover exactly as the export does. */
body.sy-theme .sy-textlink {
    font-family: var(--sy-font-body);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--sy-green-ink);
    text-decoration: none;
}
body.sy-theme .sy-textlink:hover { color: var(--sy-green-deep); text-decoration: underline; }

/* ===== Buttons (6px "Practical and Technical" corners) ==================== */
/* DESIGN: "Primary buttons are Solid Security Navy with white text. Secondary
   buttons use a Navy outline. All use 6px corners." Active states shift colour
   rather than lifting a shadow. */
body.sy-theme .mr-btn {
    font-family: var(--sy-font-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    border-radius: var(--sy-radius);
    padding: 0.9rem 1.9rem;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.1s;
}
body.sy-theme .mr-btn--hero { padding: 1.05rem 2rem; }
body.sy-theme .mr-btn--primary { background-color: var(--sy-navy); color: #fff; }
body.sy-theme .mr-btn--primary:hover { background-color: var(--sy-navy-deep); color: #fff; filter: none; }
body.sy-theme .mr-btn--outline { border-color: var(--sy-navy); color: var(--sy-navy); }
body.sy-theme .mr-btn--outline:hover { background-color: var(--sy-navy); color: #fff; }
body.sy-theme .mr-btn--light { background-color: #fff; color: var(--sy-navy); }
body.sy-theme .mr-btn--light:hover { background-color: var(--sy-green-ink); color: #fff; }
body.sy-theme .mr-btn--on-dark { border-width: 2px; border-color: rgba(255, 255, 255, 0.9); color: #fff; }
body.sy-theme .mr-btn--on-dark:hover { background-color: #fff; color: var(--sy-navy); }
body.sy-theme .mr-btn--ghost { color: var(--sy-navy); }
body.sy-theme .mr-btn--ghost:hover { color: var(--sy-green-ink); }
body.sy-theme .mr-ulink:hover { color: var(--sy-green-ink); border-color: var(--sy-green-ink); }
body.sy-theme .mr-rail-btn:hover { background: var(--sy-navy); border-color: var(--sy-navy); color: #fff; }

/* Re-assert the primary label explicitly (known-defect guard: any bare-anchor
   colour rule would otherwise repaint an <a>-based primary CTA to ink). */
body.sy-theme .mr-btn.mr-btn--primary { color: #fff; }

/* ===== Forms (white field, 1px keyline, navy focus border) ================ */
/* DESIGN: "Search and form inputs use white backgrounds with a 1px border.
   Focus states highlight the border in Security Navy." */
body.sy-theme .form-control,
body.sy-theme .form-select {
    border-radius: var(--sy-radius);
    border-color: var(--sy-line);
    background-color: var(--sy-white);
    color: var(--sy-ink);
}
body.sy-theme .form-control:focus,
body.sy-theme .form-select:focus {
    border-color: var(--sy-navy);
    box-shadow: 0 0 0 3px rgba(26, 43, 60, 0.16);
}
/* Never a padding shorthand on the select — it eats Bootstrap's caret gutter. */
body.sy-theme .form-select { padding-inline-end: 2.25rem; }
/* `body.sy-theme .form-control` is (0,2,1) and beats Bootstrap's
   `.form-control.is-invalid` (0,2,0), so the validation border has to be
   re-asserted here or every failed field renders a normal grey keyline. */
body.sy-theme .form-control.is-invalid,
body.sy-theme .form-select.is-invalid,
body.sy-theme .was-validated .form-control:invalid,
body.sy-theme .was-validated .form-select:invalid {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
}
body.sy-theme .form-control.is-invalid:focus,
body.sy-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.22);
}
body.sy-theme .form-check-input:checked { background-color: var(--sy-navy); border-color: var(--sy-navy); }
body.sy-theme .form-label { color: var(--sy-ink); }

/* ===== Announcement bar (DESIGN.md: "Navy background, centered white text") */
body.sy-theme .mr-announce {
    background-color: var(--sy-navy);
    color: #fff;
    font-weight: 500;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: none;
    padding-block: 0.6rem;
}
body.sy-theme .mr-announce a { color: var(--sy-green-bright); }

/* ===== Header (sticky white bar over the navy ribbon) ==================== */
body.sy-theme .mr-header { border-bottom-color: var(--sy-line); box-shadow: 0 1px 2px rgba(26, 43, 60, 0.05); }
body.sy-theme .mr-logo {
    font-family: var(--sy-font-head);
    font-weight: 700;
    font-size: clamp(1.35rem, 2vw, 1.6rem);
    letter-spacing: -0.01em;
    color: var(--sy-navy);
}
body.sy-theme .mr-nav-link { font-weight: 500; color: var(--sy-muted); }
body.sy-theme .mr-nav-link:hover { color: var(--sy-green-ink); }
/* The base inks the active link with --ll-accent (3.40:1 on white). Text goes
   to the green ink; the Guard Green keyline underneath stays the bright hue. */
body.sy-theme .mr-nav-link.is-active {
    color: var(--sy-green-ink);
    font-weight: 600;
    border-bottom-color: var(--sy-green);
}
body.sy-theme .mr-icon-btn:hover { color: var(--sy-navy); }
body.sy-theme .mr-search input { background-color: var(--sy-tonal-2); border-color: var(--sy-line); }
body.sy-theme .mr-search input:focus { background-color: var(--sy-white); box-shadow: 0 0 0 3px rgba(26, 43, 60, 0.14); }
/* Cart / wishlist counters: the export's small green dot with a white digit —
   Guard Green carries white at only 3.40:1, so the pill uses the green ink. */
body.sy-theme .mr-badge,
body.sy-theme .mr-badge--wish { background-color: var(--sy-green-ink); color: #fff; }

/* ===== Hero — full-bleed dusk photo, left copy, navy gradient scrim ======= */
/* Never `background: none` here: the scrim is the only thing guaranteeing the
   white headline stays readable over an arbitrary merchant photograph. */
body.sy-theme .mr-hero { min-height: clamp(480px, 66vh, 640px); }
body.sy-theme .mr-hero__overlay {
    background: linear-gradient(90deg,
        rgba(4, 22, 39, 0.74) 0%,
        rgba(4, 22, 39, 0.42) 54%,
        rgba(4, 22, 39, 0.1) 100%);
}
body.sy-theme .mr-hero__copy { max-width: 38rem; }
/* Green chip eyebrow — white on the green ink measures 6.50:1 (Guard Green
   itself would be 3.40:1 and fail). */
body.sy-theme .mr-hero .mr-hero__copy .mr-eyebrow {
    display: inline-block;
    background-color: var(--sy-green-ink);
    color: #fff;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border-radius: var(--sy-radius);
    letter-spacing: 0.14em;
    margin-bottom: 1.25rem;
}
body.sy-theme .mr-hero .mr-hero__copy h1 { margin-bottom: 1.5rem; }
/* Template-faithful deviation from DESIGN.md's "primary buttons are navy": the
   export's HERO CTA is the green one (every other primary button on the page is
   navy). Scoped to the hero only. */
body.sy-theme .mr-hero .mr-btn--primary { background-color: var(--sy-green-ink); color: #fff; }
body.sy-theme .mr-hero .mr-btn--primary:hover { background-color: var(--sy-green-deep); color: #fff; }

/* ===== Trust strip ======================================================= */
/* The export puts the reassurance strip on a tonal layer DARKER than the page
   (surface-container), so it reads as a band. `--mr-band-alt` has to stay light
   because it also backs image placeholders and card media, so the strip gets its
   own rule — `.mr-band--alt.border-bottom` is unique to the trust partial
   (featured + blog-post use `.mr-band--alt` alone, and this theme overrides
   featured anyway). */
body.sy-theme .mr-band--alt.border-bottom { background-color: var(--sy-tonal-2); }
body.sy-theme .mr-trust svg { color: var(--sy-green-ink); }
body.sy-theme .mr-trust strong {
    color: var(--sy-navy);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}
/* Muted, not soft: --sy-soft is only ~4.2:1 on the strip's tonal band, which
   fails AA for a 0.8rem sub-line if a merchant fills one in (the demo leaves
   `text` blank, matching the export's single-label items). */
body.sy-theme .mr-trust span { color: var(--sy-muted); font-size: 0.8rem; }

/* ===== Promo tiles (inherited mr-promo) — navy scrim + mint arrow link ==== */
body.sy-theme .mr-promo {
    aspect-ratio: 4 / 3;
    border: 1px solid var(--sy-line);
    box-shadow: var(--sy-shadow);
}
body.sy-theme .mr-promo__scrim {
    background: linear-gradient(0deg, rgba(26, 43, 60, 0.82) 0%, rgba(26, 43, 60, 0.12) 55%, rgba(26, 43, 60, 0) 100%);
}
body.sy-theme .mr-promo:hover .mr-promo__scrim {
    background: linear-gradient(0deg, rgba(26, 43, 60, 0.9) 0%, rgba(26, 43, 60, 0.28) 60%, rgba(26, 43, 60, 0.06) 100%);
}
body.sy-theme .mr-promo__cap { left: 1.5rem; right: 1.5rem; bottom: 1.5rem; }
body.sy-theme .mr-promo__title {
    font-family: var(--sy-font-head);
    font-weight: 600;
    font-size: clamp(1.2rem, 1.8vw, 1.5rem);
    margin-bottom: 0.45rem;
}
/* Also override the base's `:hover` DESCENDANT rule (0,0,3,0) or it wins and
   the caption link ends up the same colour as its own scrim. */
body.sy-theme .mr-promo__cta,
body.sy-theme .mr-promo:hover .mr-promo__cta {
    font-family: var(--sy-font-body);
    color: var(--sy-mint);
    border: 0;
    padding-bottom: 0;
    letter-spacing: 0.02em;
    text-transform: none;
    font-size: 0.85rem;
    font-weight: 600;
}
body.sy-theme .mr-promo:hover .mr-promo__cta { color: #fff; text-decoration: underline; }
body.sy-theme .mr-promo__cta::after { content: " \2192"; }

/* ===== Product card (inherited) — white card, 1px keyline, inset text ==== */
/* DESIGN "Product Cards": clean white containers with a 1px steel border, 6px
   corners, prices bottom-left in Inter Semibold. The base card is borderless
   with flush text, so the border means the text must be inset (recurring
   gotcha #2). The export fits hardware shots with `object-contain` on a steel
   tile — right for boxed products, and it never crops a merchant's photo. */
body.sy-theme .mr-card {
    background-color: var(--sy-white);
    border: 1px solid var(--sy-line);
    border-radius: var(--sy-radius);
    overflow: hidden;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
body.sy-theme .mr-card:hover { box-shadow: var(--sy-shadow-lg); border-color: var(--sy-line-2); }
body.sy-theme .mr-card__media {
    margin-bottom: 0;
    border-radius: 0;
    aspect-ratio: 1 / 1;
    background-color: var(--sy-canvas);
}
body.sy-theme .mr-card__media img { object-fit: contain; padding: 1rem; }
body.sy-theme .mr-card:hover .mr-card__media img { transform: scale(1.06); }
body.sy-theme .mr-card__eyebrow,
body.sy-theme .mr-card__title,
body.sy-theme .mr-card__price,
body.sy-theme .mr-card [data-testid="card-rating"] { padding-inline: 1rem; }
body.sy-theme .mr-card__media + * { padding-top: 0.9rem; }
body.sy-theme .mr-card__eyebrow { color: var(--sy-soft); }
body.sy-theme .mr-card__title {
    font-family: var(--sy-font-body);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--sy-navy);
}
body.sy-theme .mr-card__title a:hover { color: var(--sy-green-ink); }
body.sy-theme .mr-card__price {
    padding-bottom: 1.1rem;
    font-family: var(--sy-font-body);
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--sy-navy);
}
body.sy-theme .mr-card__price del { color: var(--sy-soft); font-weight: 400; font-size: 0.82rem; }

/* SALE / demo badge — the export's small green "Sale" tag. The base styles
   `.mr-card__sale` but the partial emits `.mr-card__badge` (the shared
   theme-vars block positions it; only the colour + shape are ours). */
body.sy-theme .mr-card__badge {
    background-color: var(--sy-green-ink);
    color: #fff;
    font-family: var(--sy-font-body);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.24rem 0.5rem;
    border-radius: calc(var(--sy-radius) * 0.7);
}

/* Overlay controls — restyled TOGETHER, contrast-checked in BOTH states.
   Navy on near-white ~= 13.9:1; green ink on white 6.50:1 — both clear the
   3:1 WCAG minimum for UI components. Kept circular (no flatten block here,
   but stated explicitly so a future radius sweep cannot square them). */
body.sy-theme .mr-card__wish,
body.sy-theme .mr-card__quickview {
    border-radius: 9999px;
    color: var(--sy-navy);
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 3px rgba(26, 43, 60, 0.14);
}
body.sy-theme .mr-card__wish:hover,
body.sy-theme .mr-card__quickview:hover {
    color: var(--sy-green-ink);
    background-color: #fff;
}
body.sy-theme .mr-card__wish.is-active { color: var(--sy-green-ink); }
/* Slide-up Add to Cart — the export's navy card button (white label, 14.4:1). */
body.sy-theme .mr-card__quick {
    background-color: var(--sy-navy);
    color: #fff;
    font-family: var(--sy-font-body);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: none;
    font-size: 0.8rem;
}
body.sy-theme .mr-card__quick:hover { background-color: var(--sy-navy-deep); color: #fff; }

/* ===== PDP / cart imagery — the same contain-fit hardware treatment ====== */
body.sy-theme .mr-gallery__main { background-color: var(--sy-canvas); border: 1px solid var(--sy-line); }
body.sy-theme .mr-gallery__main img { object-fit: contain; padding: clamp(0.75rem, 3vw, 2rem); }
body.sy-theme .mr-gallery__thumb { background-color: var(--sy-canvas); border-radius: var(--sy-radius); }
body.sy-theme .mr-gallery__thumb img { object-fit: contain; padding: 0.3rem; }
body.sy-theme .mr-gallery__thumb.is-active { border-color: var(--sy-navy); }
body.sy-theme .mr-cart-row__media { background-color: var(--sy-canvas); border: 1px solid var(--sy-line); border-radius: var(--sy-radius); }
body.sy-theme .mr-cart-row__media img { object-fit: contain; padding: 0.4rem; }

/* ===== Journal (inherited mr-article) ==================================== */
body.sy-theme .mr-article__media { border-radius: var(--sy-radius); overflow: hidden; }
body.sy-theme .mr-article__title { font-size: 1.2rem; font-weight: 600; }
body.sy-theme .mr-article__title a { color: var(--sy-navy); }
body.sy-theme .mr-article__title a:hover { color: var(--sy-green-ink); }

/* ===== sy-featured — "Most Installed" on the lightest tonal layer ======== */
body.sy-theme .sy-featured { background-color: var(--sy-tonal); }
body.sy-theme .sy-featured__head { margin-bottom: clamp(2rem, 4vw, 2.5rem); }
body.sy-theme .sy-featured .mr-display,
body.sy-theme .sy-arrivals .mr-display,
body.sy-theme .sy-journal .mr-display { color: var(--sy-navy); font-size: clamp(1.65rem, 3vw, 2rem); }

/* ===== sy-coverage — the Security Navy coverage-planner band ============= */
body.sy-theme .sy-coverage {
    background-color: var(--sy-navy);
    color: #fff;
    padding-block: clamp(56px, 9vw, 80px);
}
body.sy-theme .sy-coverage__title { color: #fff; margin-bottom: clamp(2.5rem, 5vw, 3rem); }
body.sy-theme .sy-coverage__item { display: flex; flex-direction: column; align-items: center; }
body.sy-theme .sy-coverage__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.1);
    /* Guard Green on the navy band measures 4.25:1 — comfortably past the 3:1
       UI-component minimum for a 34px decorative glyph, and it keeps the
       design's functional-accent story. */
    color: var(--sy-green);
    margin-bottom: 1.5rem;
}
body.sy-theme .sy-coverage__chip svg { width: 34px; height: 34px; }
body.sy-theme .sy-coverage__name {
    font-family: var(--sy-font-head);
    font-size: 1.35rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.5rem;
}
body.sy-theme .sy-coverage__line { color: rgba(255, 255, 255, 0.82); font-size: 0.95rem; }

/* ===== sy-catband — the white shortcut cards on the tonal band =========== */
body.sy-theme .sy-catband { background-color: var(--sy-tonal-2); padding-block: clamp(36px, 6vw, 56px); }
body.sy-theme .sy-catband__title { color: var(--sy-navy); font-size: clamp(1.25rem, 2vw, 1.5rem); }
body.sy-theme .sy-catband__tile {
    display: flex;
    height: 100%;
    align-items: center;
    gap: 1rem;
    padding: 1.4rem 1.5rem;
    background-color: var(--sy-white);
    border: 1px solid var(--sy-line);
    border-radius: var(--sy-radius);
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body.sy-theme .sy-catband__tile:hover { border-color: var(--sy-green); box-shadow: var(--sy-shadow); }
body.sy-theme .sy-catband__glyph {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--sy-green-ink);
    transition: transform 0.2s ease;
}
body.sy-theme .sy-catband__glyph svg { width: 26px; height: 26px; }
body.sy-theme .sy-catband__tile:hover .sy-catband__glyph { transform: scale(1.1); }
body.sy-theme .sy-catband__label {
    font-family: var(--sy-font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--sy-navy);
}

/* ===== sy-cta — the centered "The Watchpoint" newsletter band ============ */
body.sy-theme .sy-cta {
    background-color: var(--sy-tonal-3);
    padding-block: clamp(56px, 9vw, 80px);
}
body.sy-theme .sy-cta__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    border-radius: 9999px;
    background-color: var(--sy-white);
    color: var(--sy-navy);
    margin-bottom: 1.5rem;
}
body.sy-theme .sy-cta__chip svg { width: 32px; height: 32px; }
body.sy-theme .sy-cta__eyebrow { color: var(--sy-green-ink); }
body.sy-theme .sy-cta__title { color: var(--sy-navy); font-size: clamp(1.65rem, 3vw, 2rem); }
body.sy-theme .sy-cta__body { max-width: 42rem; color: var(--sy-muted); font-size: 1.05rem; }
body.sy-theme .sy-cta__form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    max-width: 32rem;
}
body.sy-theme .sy-cta__form input {
    flex: 1;
    min-width: 12rem;
    background-color: var(--sy-white);
    border: 1px solid var(--sy-line);
    border-radius: var(--sy-radius);
    color: var(--sy-ink);
    padding: 0.95rem 1.15rem;
    font-size: 0.98rem;
}
body.sy-theme .sy-cta__form input::placeholder { color: var(--sy-soft); }
body.sy-theme .sy-cta__form input:focus {
    outline: none;
    border-color: var(--sy-navy);
    box-shadow: 0 0 0 3px rgba(26, 43, 60, 0.16);
}
body.sy-theme .sy-cta__btn {
    background-color: var(--sy-navy);
    color: #fff;
    border: 0;
    border-radius: var(--sy-radius);
    font-family: var(--sy-font-body);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.95rem 2rem;
    cursor: pointer;
    transition: background-color 0.2s;
}
body.sy-theme .sy-cta__btn:hover { background-color: var(--sy-navy-deep); }
/* --sy-soft would be 3.92:1 on this band (the darkest tonal layer) and fail AA
   for 0.78rem text; the muted ink measures 7.33:1. */
body.sy-theme .sy-cta__note { color: var(--sy-muted); font-size: 0.78rem; }

/* ===== Footer (inherited mr-footer) — Security Navy panel ================ */
/* The base footer is a light band; the export's footer is Security 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. */
body.sy-theme .mr-footer {
    background-color: var(--sy-navy);
    border-top-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.72);
}
/* Guard Green itself is only 4.25:1 on the navy; the section headings and the
   link hover use the bright green (8.50:1). */
body.sy-theme .mr-footer h4 { color: var(--sy-green-bright); letter-spacing: 0.14em; }
body.sy-theme .mr-footer .mr-footer__brand { color: #fff; font-family: var(--sy-font-head); font-weight: 600; }
body.sy-theme .mr-footer a { color: rgba(255, 255, 255, 0.78); }
body.sy-theme .mr-footer a:hover { color: var(--sy-green-bright); }
body.sy-theme .mr-footer .mr-muted { color: rgba(255, 255, 255, 0.78); }
body.sy-theme .mr-footer .mr-soft { color: rgba(255, 255, 255, 0.58); }
body.sy-theme .mr-footer .mr-divider { background-color: rgba(255, 255, 255, 0.12); }
body.sy-theme .mr-footer .form-control {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
}
body.sy-theme .mr-footer .form-control::placeholder { color: rgba(255, 255, 255, 0.48); }
body.sy-theme .mr-social { border-color: rgba(255, 255, 255, 0.22); color: #fff; }
body.sy-theme .mr-social:hover { background-color: var(--sy-green-ink); border-color: var(--sy-green-ink); color: #fff; }

/* ===== PDP / cart / checkout / account finishing (inherited pages) ======= */
/* The base hovers several light-canvas links to --ll-accent — Guard Green is
   only 3.40:1 on white, so every one of them is re-pointed at the green ink. */
body.sy-theme .mr-crumbs a:hover,
body.sy-theme .mr-cart-row__title a:hover { color: var(--sy-green-ink); }
body.sy-theme .mr-stars { color: var(--sy-star); }
body.sy-theme .mr-sale { background-color: var(--sy-green-ink); color: #fff; }
body.sy-theme .mr-tabs .nav-link.active { color: var(--sy-navy); border-bottom-color: var(--sy-green); }
body.sy-theme .mr-filter__link:hover,
body.sy-theme .mr-filter__link.is-active { color: var(--sy-navy); }
body.sy-theme .mr-page.is-active { background-color: var(--sy-navy); border-color: var(--sy-navy); color: #fff; }
body.sy-theme .mr-page:hover { border-color: var(--sy-navy); color: var(--sy-navy); }
body.sy-theme .mr-acct-link.is-active { background-color: var(--sy-navy); color: #fff; }
body.sy-theme .mr-acct-avatar { background-color: var(--sy-navy); color: #fff; font-family: var(--sy-font-head); }
body.sy-theme .mr-status { background-color: var(--sy-tonal-2); color: var(--sy-muted); }
body.sy-theme .mr-step.is-done .mr-step__dot,
body.sy-theme .mr-step.is-current .mr-step__dot { border-color: var(--sy-navy); }
body.sy-theme .mr-step.is-done .mr-step__dot { background-color: var(--sy-navy); color: #fff; }
body.sy-theme .mr-step.is-done::before,
body.sy-theme .mr-step.is-current::before { background: var(--sy-navy); }
/* DESIGN.md "In Stock" indicator — the one place Guard Green is a fill with a
   white label, so it uses the green ink for a 6.50:1 label. */
body.sy-theme .mr-alert--ok { background: #e6f4ec; color: var(--sy-green-ink); border-color: #bfe3ce; }

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

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

/* ===== Mobile (from the export's mobile homepage / category / PDP frames) = */
@media (max-width: 991.98px) {
    body.sy-theme { font-size: 15.5px; }
    body.sy-theme .mr-hero { min-height: clamp(420px, 62vh, 520px); }
    body.sy-theme .sy-coverage,
    body.sy-theme .sy-cta { padding-block: clamp(40px, 10vw, 56px); }
    body.sy-theme .sy-coverage__title { margin-bottom: 2rem; }
    body.sy-theme .sy-coverage__chip { width: 54px; height: 54px; margin-bottom: 1rem; }
    body.sy-theme .sy-coverage__chip svg { width: 28px; height: 28px; }
    body.sy-theme .mr-promo { aspect-ratio: 3 / 2; }
    body.sy-theme .sy-catband__tile { flex-direction: column; text-align: center; gap: 0.6rem; padding: 1.1rem 0.9rem; }
    body.sy-theme .sy-cta__form { flex-direction: column; }
    body.sy-theme .sy-cta__btn { width: 100%; }
}