/* ==========================================================================
   Boundary — a club-cricket pavilion storefront (extends modern-retail).

   Ported from the Stitch "Boundary | Professional Cricket Gear & Willow"
   export. This theme INHERITS every modern-retail page + partial and ships
   only its own brand layer plus six home partials with `bd-*` markup. This
   stylesheet therefore has two jobs:

     (a) RE-POINT the base neutral tokens (--mr-*) at the pavilion-cream /
         pitch-green / ball-red palette so every inherited page (shop / PDP /
         cart / checkout / account / blog) reads on-brand, and finish the
         inherited chrome (announce bar, header, hero, trust, promo tiles,
         product card, footer);

     (b) style the theme's own `bd-*` sections — the pitch-green "Know Your
         Willow" grade-guide band, the Match Winners / Fresh From the Workshop
         corner links, the photographic category band, the left-aligned
         Journal and the coral "Nets Session" newsletter.

   Everything is scoped under `body.bd-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
   pitch-green surface follows.

   Palette (from the export's DESIGN.md prose + the rendered code.html):
     Pitch green    #1e4d2b (primary — CTAs, announce, grade band, footer;
                    the rendered `.btn-pitch-green` fill, which wins over the
                    DESIGN.md YAML `primary` #023616)
     Deep pitch     #023616 (primary hover / deepest ink-green)
     Ball red       #b22b20 (accent — sale badges, catalogue labels, rules)
     Coral          #fe6250 (the newsletter band — `secondary-container`)
     Pale willow    #8bbd92 (on-green text), #ffdad5 (pale-pink on green)
     Pavilion cream #fafaf5 (canvas), #f4f4ef / #eeeee9 (bands), #e3e3de (fill)
     Charcoal       #1a1c19 ink · #414941 muted · outline keyline #deded9

   Contrast notes (measured, sRGB):
     white on pitch green 9.76:1 · cream on pitch green 9.32:1
     pitch green on cream 9.32:1 · ball red on cream 6.15:1
     charcoal on coral 5.78:1 (the export inks the coral band dark — white on
     coral would be ~2.4:1, so the dark ink is kept)
     pale willow #8bbd92 on pitch green 4.55:1 (announce bar, small bold text)
   ========================================================================== */

body.bd-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --bd-green: var(--bs-primary, #1e4d2b);
    --bd-green-rgb: var(--bs-primary-rgb, 30, 77, 43);
    --bd-red: var(--ll-accent, #b22b20);
    --bd-radius: var(--ll-btn-radius, 0.375rem);
    --bd-font-head: var(--ll-font-headings, "Poppins"), system-ui, sans-serif;
    --bd-font-body: var(--ll-font-body, "Inter"), system-ui, -apple-system, sans-serif;

    /* Literal palette */
    --bd-green-deep: #023616;
    --bd-coral: #fe6250;
    --bd-willow: #8bbd92;
    --bd-blush: #ffdad5;
    --bd-cream: #fafaf5;
    --bd-cream-2: #f4f4ef;
    --bd-cream-3: #eeeee9;
    --bd-fill: #e3e3de;
    --bd-white: #ffffff;
    --bd-ink: #1a1c19;
    --bd-muted: #414941;
    /* The export's `outline` #717970 is a BORDER tone (4.29:1 as text on
       cream — under AA). Muted small copy uses this darkened sibling. */
    --bd-soft: #5f665e;
    --bd-line: #deded9; /* DESIGN.md Elevation: "a very subtle 1px border" */
    --bd-line-2: #c1c9be;

    /* Depth — DESIGN.md avoids heavy shadows: tonal layers + low-contrast
       outlines, with a 5%-alpha 8px lift reserved for hover only. */
    --bd-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    --bd-shadow-lg: 0 8px 20px -6px rgba(2, 54, 22, 0.16);

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

    /* Bootstrap paints bare <a> via rgba(var(--bs-link-color-rgb),1) —
       theme-vars sets the hex --bs-link-color but never the -rgb triplet, so
       without this a bare <a> (no .mr-* class) renders factory blue. Alias to
       the already-computed --bs-primary-rgb so it tracks the customizer;
       NO bare `body.bd-theme a { color: … }` rule (it would repaint the
       primary button's white label — see gotchas). */
    --bs-link-color-rgb: var(--bs-primary-rgb);
    /* Bootstrap's own .btn-primary (the shared PDP review form) sets
       --bs-btn-bg from theme-vars but leaves --bs-btn-color at #fff; pitch
       green is dark, so that pairing is already 9.76:1. Body background is
       set for surfaces Bootstrap paints itself (modal backdrop edges). */
    --bs-body-bg: var(--bd-cream);

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

/* ===== Shape — "Tailored Athletic": one 6px corner, everywhere ============ */
/* DESIGN.md Shapes: a single 0.375rem radius on containers, buttons and
   inputs — sharper than a pill, softer than brutalist 0. Circles are reserved
   for small badges and icon controls (exempted below). */
body.bd-theme .mr-card,
body.bd-theme .mr-card__media,
body.bd-theme .mr-promo,
body.bd-theme .mr-tile,
body.bd-theme .mr-panel,
body.bd-theme .mr-article__media,
body.bd-theme .mr-gallery__main,
body.bd-theme .mr-gallery__thumb {
    border-radius: var(--bd-radius);
}

/* ===== Typography ======================================================== */
/* DESIGN.md: Poppins 700 with tight tracking for headlines; Inter for
   commerce/UI; uppercase semibold Inter for catalogue labels. */
body.bd-theme h1, body.bd-theme h2, body.bd-theme h3,
body.bd-theme h4, body.bd-theme h5, body.bd-theme h6 {
    font-family: var(--bd-font-head);
    color: var(--bd-ink);
    font-weight: 700;
    letter-spacing: -0.01em;
}
body.bd-theme .mr-display { font-weight: 700; letter-spacing: -0.02em; }
body.bd-theme .mr-headline { font-weight: 700; letter-spacing: -0.01em; }

body.bd-theme .mr-eyebrow {
    font-family: var(--bd-font-body);
    color: var(--bd-red);
    font-weight: 600;
    letter-spacing: 0.1em;
}

/* ===== Buttons (6px rectangles, uppercase Inter labels) ================== */
/* DESIGN.md Components: primary = pitch green + white text, no shadow;
   secondary = transparent with a 2px pitch-green border. */
body.bd-theme .mr-btn {
    font-family: var(--bd-font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--bd-radius);
    padding: 0.85rem 1.9rem;
    box-shadow: none;
    transition: background-color 0.22s, color 0.22s, border-color 0.22s, filter 0.22s, transform 0.1s;
}
body.bd-theme .mr-btn--hero { padding: 1.05rem 2.4rem; }
body.bd-theme .mr-btn--primary { background-color: var(--bd-green); color: #fff; }
body.bd-theme .mr-btn--primary:hover { background-color: var(--bd-green-deep); color: #fff; filter: none; }
body.bd-theme .mr-btn--outline { border-width: 2px; border-color: var(--bd-green); color: var(--bd-green); }
body.bd-theme .mr-btn--outline:hover { background-color: var(--bd-green); color: #fff; }
body.bd-theme .mr-btn--light { background-color: #fff; color: var(--bd-green); }
body.bd-theme .mr-btn--light:hover { background-color: var(--bd-green-deep); color: #fff; }
body.bd-theme .mr-btn--on-dark { border-width: 2px; border-color: #fff; color: #fff; background-color: rgba(255, 255, 255, 0.1); }
body.bd-theme .mr-btn--on-dark:hover { background-color: #fff; color: var(--bd-green); }
body.bd-theme .mr-btn--ghost { color: var(--bd-green); }
body.bd-theme .mr-btn--ghost:hover { color: var(--bd-red); }
body.bd-theme .mr-ulink:hover { color: var(--bd-red); border-color: var(--bd-red); }
body.bd-theme .mr-rail-btn:hover { background: var(--bd-green); border-color: var(--bd-green); color: #fff; }

/* The primary label must stay white on the dark pitch-green fill even if a
   later cascade layer (or merchant custom CSS) recolours anchors. */
body.bd-theme .mr-btn--primary,
body.bd-theme .mr-btn--primary:visited { color: #fff; }

/* ===== Forms ============================================================= */
/* DESIGN.md Input Fields: clean 1px mid-grey outline; focus switches the
   border to pitch green with no glow. */
body.bd-theme .form-control,
body.bd-theme .form-select {
    border-radius: var(--bd-radius);
    border-color: var(--bd-line-2);
    background-color: #fff;
    color: var(--bd-ink);
}
body.bd-theme .form-control:focus,
body.bd-theme .form-select:focus {
    border-color: var(--bd-green);
    box-shadow: 0 0 0 2px rgba(var(--bd-green-rgb), 0.14);
}
/* Never a padding shorthand on the select — it eats Bootstrap's caret gutter. */
body.bd-theme .form-select { padding-inline-end: 2.25rem; }
body.bd-theme .form-check-input:checked { background-color: var(--bd-green); border-color: var(--bd-green); }
body.bd-theme .form-label { color: var(--bd-ink); font-weight: 600; }

/* ===== Announcement bar (pitch green + pale willow) ====================== */
/* The base derives this band from color-mix(--ll-accent 62%, #000), which for
   a ball-red accent would read maroon — the export's ribbon is pitch green. */
body.bd-theme .mr-announce {
    background-color: var(--bd-green);
    color: var(--bd-willow);
    text-transform: none;
    letter-spacing: 0.04em;
}
body.bd-theme .mr-announce a { color: #fff; }

/* ===== Header ============================================================ */
body.bd-theme .mr-logo {
    font-family: var(--bd-font-head);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--bd-green-deep);
}
body.bd-theme .mr-nav-link:hover { color: var(--bd-green); }
body.bd-theme .mr-nav-link.is-active { color: var(--bd-green-deep); border-color: var(--bd-green); font-weight: 700; }
body.bd-theme .mr-icon-btn { color: var(--bd-green-deep); }
body.bd-theme .mr-icon-btn:hover { color: var(--bd-red); }
body.bd-theme .mr-badge { background-color: var(--bd-red); }
body.bd-theme .mr-badge--wish { background-color: var(--bd-red); }
/* The export's search field is a soft pill on surface-container-high. */
body.bd-theme .mr-search input {
    background-color: var(--bd-fill);
    border-color: var(--bd-line-2);
    border-radius: 9999px;
}

/* ===== Hero (inherited full-bleed overlay) =============================== */
/* The export scrims left-to-right from the charcoal on-surface at 60%; the
   base gradient already runs 90deg, so this only re-tints it. NEVER
   `background: none` — it is what keeps the white <h1> readable over an
   arbitrary merchant photograph. */
body.bd-theme .mr-hero__overlay {
    background: linear-gradient(90deg,
        rgba(26, 28, 25, 0.7) 0%,
        rgba(26, 28, 25, 0.42) 46%,
        rgba(26, 28, 25, 0.05) 100%);
}
body.bd-theme .mr-hero .mr-hero__copy .mr-eyebrow {
    color: var(--bd-blush);
    letter-spacing: 0.18em;
    margin-bottom: 1rem;
}
body.bd-theme .mr-hero .mr-hero__copy h1 { color: #fff; }

/* ===== Trust strip ======================================================= */
body.bd-theme .mr-trust svg { color: var(--bd-green); }
body.bd-theme .mr-trust strong { color: var(--bd-ink); font-family: var(--bd-font-head); font-weight: 700; font-size: 1rem; }

/* ===== Promo tiles (inherited mr-promo) ================================== */
/* The export's tiles are tall (600px) with a bottom-up black scrim, a Poppins
   headline and an underlined white link. */
body.bd-theme .mr-promo { aspect-ratio: 3 / 4; box-shadow: var(--bd-shadow); }
body.bd-theme .mr-promo__scrim {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.7) 100%);
}
body.bd-theme .mr-promo:hover .mr-promo__scrim {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 30%, rgba(0, 0, 0, 0.78) 100%);
}
body.bd-theme .mr-promo__title { font-family: var(--bd-font-head); font-weight: 700; }
body.bd-theme .mr-promo__cta {
    font-family: var(--bd-font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    border-bottom: 2px solid #fff;
    padding-bottom: 2px;
}
/* The base's `.mr-promo:hover .mr-promo__cta` is (0,0,3,0) and out-specifies a
   plain child override — restate the hover through the same descendant shape
   so the label never resolves to the accent (invisible-label gotcha). */
body.bd-theme .mr-promo:hover .mr-promo__cta { color: #fff; border-bottom-color: var(--bd-blush); }

/* ===== Product card (inherited) ========================================== */
/* DESIGN.md Cards: cream background, subtle 1px border, full-bleed top-aligned
   photography, left-aligned title + price with 12px internal padding. The base
   card is borderless with FLUSH text, so adding a border/background means the
   text must be inset (recurring gotcha #2). */
body.bd-theme .mr-card {
    background-color: var(--bd-white);
    border: 1px solid var(--bd-line);
    border-radius: var(--bd-radius);
    overflow: hidden;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
body.bd-theme .mr-card:hover { box-shadow: var(--bd-shadow-lg); border-color: var(--bd-line-2); }
body.bd-theme .mr-card__media { margin-bottom: 0; border-radius: 0; background-color: var(--bd-fill); }
body.bd-theme .mr-card__eyebrow,
body.bd-theme .mr-card__title,
body.bd-theme .mr-card__price,
body.bd-theme .mr-card [data-testid="card-rating"] { padding-inline: 0.75rem; }
body.bd-theme .mr-card__media + * { padding-top: 0.75rem; }
body.bd-theme .mr-card > *:last-child { padding-bottom: 0.85rem; }
body.bd-theme .mr-card__eyebrow { color: var(--bd-soft); letter-spacing: 0.1em; }
body.bd-theme .mr-card__title { font-family: var(--bd-font-head); font-weight: 700; font-size: 0.98rem; color: var(--bd-ink); }
body.bd-theme .mr-card__title a:hover { color: var(--bd-green); }
/* DESIGN.md: prices are bold Inter; a discounted price switches to ball red
   (the export's `.text-ball-red` treatment) with a muted strike-through. */
body.bd-theme .mr-card__price { font-family: var(--bd-font-body); font-weight: 700; font-size: 1.1rem; color: var(--bd-green-deep); }
body.bd-theme .mr-card__price del { color: var(--bd-soft); font-weight: 400; font-size: 0.9rem; }
body.bd-theme .mr-card__price:has(del) { color: var(--bd-red); }

/* Sale / demo badge — the base defines .mr-card__sale but the partial emits
   .mr-card__badge, so style it here as the export's ball-red 6px tag. The
   inline-styled demo badge keeps its grey. */
body.bd-theme .mr-card__badge {
    position: absolute;
    top: 0.9rem;
    left: 0.9rem;
    z-index: 2;
    background-color: var(--bd-red);
    color: #fff;
    font-family: var(--bd-font-body);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.28rem 0.6rem;
    border-radius: var(--bd-radius);
}

/* Overlay controls — restyled TOGETHER, contrast-checked in BOTH states.
   Pitch green on near-white ≈ 9.0:1; ball red on white ≈ 6.4:1 — both clear
   the 3:1 UI-component floor. Kept circular (the 6px shape discipline above
   deliberately does not list them). */
body.bd-theme .mr-card__wish,
body.bd-theme .mr-card__quickview {
    color: var(--bd-green);
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 9999px;
}
body.bd-theme .mr-card__wish:hover,
body.bd-theme .mr-card__quickview:hover {
    color: var(--bd-red);
    background-color: #fff;
}
body.bd-theme .mr-card__wish.is-active { color: var(--bd-red); }
body.bd-theme .mr-card__quick { background-color: var(--bd-green); color: #fff; }
body.bd-theme .mr-card__quick:hover { background-color: var(--bd-green-deep); color: #fff; }

/* ===== bd-seeall — the "View All" / "New Arrivals" corner links ========== */
body.bd-theme .bd-seeall {
    font-family: var(--bd-font-body);
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--bd-green);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
    transition: border-color 0.2s, color 0.2s;
}
body.bd-theme .bd-seeall:hover { color: var(--bd-green-deep); border-bottom-color: var(--bd-green); }

/* ===== bd-grades — the "Know Your Willow" pitch-green band =============== */
body.bd-theme .bd-grades {
    background-color: var(--bd-green);
    color: var(--bd-cream);
    padding-block: clamp(56px, 9vw, 80px);
}
body.bd-theme .bd-grades__title { color: var(--bd-cream); }
body.bd-theme .bd-grades__rule {
    display: block;
    width: 6rem;
    height: 4px;
    margin-inline: auto;
    background-color: var(--bd-coral);
    border-radius: 2px;
}
body.bd-theme .bd-grades__card {
    height: 100%;
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--bd-radius);
    padding: clamp(1.4rem, 3vw, 1.85rem);
}
body.bd-theme .bd-grades__cardtitle {
    font-family: var(--bd-font-head);
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.75rem;
}
/* The export tints the middle (County) card's title pale pink to mark the
   recommended tier — applied positionally so it survives re-ordering. */
body.bd-theme .row > .col:nth-child(2) .bd-grades__cardtitle { color: var(--bd-blush); }
body.bd-theme .bd-grades__cardtext {
    font-family: var(--bd-font-body);
    font-size: 1rem;
    color: rgba(250, 250, 245, 0.9);
}

/* ===== bd-catband — square photographic category tiles ================== */
body.bd-theme .bd-catband { background-color: var(--bd-cream-3); }
body.bd-theme .bd-catband__cell {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border-radius: var(--bd-radius);
    background-color: var(--bd-fill);
    text-decoration: none;
}
body.bd-theme .bd-catband__img,
body.bd-theme .bd-catband__placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}
body.bd-theme .bd-catband__placeholder {
    background: linear-gradient(160deg, var(--bd-green) 0%, var(--bd-green-deep) 100%);
}
body.bd-theme .bd-catband__cell:hover .bd-catband__img { transform: scale(1.08); }
/* A pitch-green wash that clears on hover (the export's `bg-primary-container/20`).
   It doubles as the label's contrast floor over a bright photograph. */
body.bd-theme .bd-catband__wash {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(2, 54, 22, 0.3) 0%, rgba(2, 54, 22, 0.5) 100%);
    transition: background 0.3s ease;
}
body.bd-theme .bd-catband__cell:hover .bd-catband__wash {
    background: linear-gradient(180deg, rgba(2, 54, 22, 0.14) 0%, rgba(2, 54, 22, 0.34) 100%);
}
body.bd-theme .bd-catband__cap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    font-family: var(--bd-font-head);
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    font-weight: 700;
    color: #fff;
    text-align: center;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

/* ===== bd-journal — left-aligned stories with ball-red labels =========== */
body.bd-theme .bd-journal__media { aspect-ratio: 16 / 9; display: block; overflow: hidden; }
body.bd-theme .bd-journal__media img { width: 100%; height: 100%; object-fit: cover; }
body.bd-theme .bd-journal__label { color: var(--bd-red); letter-spacing: 0.1em; }
body.bd-theme .bd-journal__title { font-family: var(--bd-font-head); font-size: 1.2rem; font-weight: 700; }
body.bd-theme .bd-journal__title a { color: var(--bd-ink); text-decoration: none; }
body.bd-theme .bd-journal__title a:hover { color: var(--bd-green); }

/* ===== bd-cta — "The Nets Session" coral newsletter band ================ */
/* The export inks this band with the dark charcoal on-surface (5.78:1). White
   on coral measures ~2.4:1 — do not "fix" this to white. */
body.bd-theme .bd-cta {
    background-color: var(--bd-coral);
    color: var(--bd-ink);
    padding-block: clamp(56px, 9vw, 80px);
}
body.bd-theme .bd-cta__eyebrow { color: var(--bd-green-deep); }
body.bd-theme .bd-cta__title { color: var(--bd-ink); }
body.bd-theme .bd-cta__body { max-width: 46ch; color: var(--bd-ink); font-size: 1.1rem; }
body.bd-theme .bd-cta__form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-width: 34rem;
    justify-content: center;
}
body.bd-theme .bd-cta__form input {
    flex: 1;
    min-width: 12rem;
    background-color: rgba(255, 255, 255, 0.92);
    border: 0;
    border-radius: var(--bd-radius);
    color: var(--bd-ink);
    padding: 0.95rem 1.4rem;
    font-size: 0.98rem;
}
body.bd-theme .bd-cta__form input::placeholder { color: var(--bd-soft); }
body.bd-theme .bd-cta__form input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--bd-green-rgb), 0.45);
}
body.bd-theme .bd-cta__btn {
    background-color: var(--bd-green);
    color: #fff;
    border: 0;
    border-radius: var(--bd-radius);
    font-family: var(--bd-font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.95rem 2.4rem;
    cursor: pointer;
    transition: background-color 0.2s;
}
body.bd-theme .bd-cta__btn:hover { background-color: var(--bd-green-deep); }
body.bd-theme .bd-cta__note { color: rgba(26, 28, 25, 0.72); font-size: 0.8rem; }

/* ===== Footer (inherited mr-footer) — pitch-green panel ================= */
/* The base footer is a light band; the export's is pitch green with light
   text. Recolour the surface AND every text token riding on it, or the
   re-pointed dark --mr-muted / --mr-soft render invisible on the dark band.
   The export's own opacity-80 pale willow measures 3.52:1 there, so body copy
   uses white-alpha instead and the pale willow is kept for link hovers. */
body.bd-theme .mr-footer {
    background-color: var(--bd-green);
    border-top-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
}
body.bd-theme .mr-footer h4 { color: #fff; }
body.bd-theme .mr-footer .mr-footer__brand { color: #fff; font-family: var(--bd-font-head); }
body.bd-theme .mr-footer a { color: rgba(255, 255, 255, 0.8); }
body.bd-theme .mr-footer a:hover { color: var(--bd-willow); }
body.bd-theme .mr-footer .mr-muted { color: rgba(255, 255, 255, 0.8); }
body.bd-theme .mr-footer .mr-soft { color: rgba(255, 255, 255, 0.62); }
body.bd-theme .mr-footer .mr-divider { background-color: rgba(255, 255, 255, 0.14); }
body.bd-theme .mr-footer .form-control {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.24);
    color: #fff;
}
body.bd-theme .mr-footer .form-control::placeholder { color: rgba(255, 255, 255, 0.5); }
body.bd-theme .mr-social { border-color: rgba(255, 255, 255, 0.24); color: #fff; }
body.bd-theme .mr-social:hover { background-color: #fff; border-color: #fff; color: var(--bd-green); }

/* ===== PDP / cart / checkout / account finishing (inherited pages) ======= */
body.bd-theme .mr-stars { color: var(--bd-red); }
body.bd-theme .mr-sale { background-color: var(--bd-red); color: #fff; }
body.bd-theme .mr-tabs .nav-link.active { color: var(--bd-green-deep); border-bottom-color: var(--bd-red); }
body.bd-theme .mr-page.is-active { background-color: var(--bd-green); border-color: var(--bd-green); color: #fff; }
body.bd-theme .mr-page:hover { border-color: var(--bd-green); color: var(--bd-green); }
body.bd-theme .mr-filter__link:hover { color: var(--bd-green); }
body.bd-theme .mr-acct-link.is-active { background-color: var(--bd-green); color: #fff; }
body.bd-theme .mr-acct-avatar { background-color: var(--bd-green); color: #fff; }
body.bd-theme .mr-step.is-done .mr-step__dot,
body.bd-theme .mr-step.is-current .mr-step__dot { border-color: var(--bd-green); }
body.bd-theme .mr-step.is-done .mr-step__dot { background-color: var(--bd-green); color: #fff; }
body.bd-theme .mr-gallery__thumb.is-active { border-color: var(--bd-green); }
/* DESIGN.md Lists & Tables: alternating cream rows for spec tables. */
body.bd-theme .table { --bs-table-striped-bg: #f0f0ea; --bs-table-color: var(--bd-ink); }

/* ===== Accessibility — recolour focus outlines, never remove them ======== */
body.bd-theme a:focus-visible,
body.bd-theme button:focus-visible,
body.bd-theme input:focus-visible,
body.bd-theme select:focus-visible,
body.bd-theme textarea:focus-visible {
    outline: 2px solid var(--bd-green);
    outline-offset: 2px;
}
body.bd-theme .bd-grades a:focus-visible,
body.bd-theme .mr-footer a:focus-visible,
body.bd-theme .mr-hero a:focus-visible { outline-color: #fff; }

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

/* ===== Mobile (from the export's mobile frames) ========================== */
@media (max-width: 991.98px) {
    body.bd-theme { font-size: 15.5px; }
    body.bd-theme .bd-grades,
    body.bd-theme .bd-cta { padding-block: clamp(40px, 10vw, 60px); }
    body.bd-theme .mr-promo { aspect-ratio: 4 / 5; }
    body.bd-theme .bd-cta__form { flex-direction: column; }
    body.bd-theme .bd-cta__btn { width: 100%; }
    body.bd-theme .mr-btn { padding: 0.78rem 1.5rem; }
    body.bd-theme .mr-btn--hero { padding: 0.92rem 1.8rem; }
}