/* ==========================================================================
   throttle-gear ("Throttle") — "Street-Riding Grit" brand layer over
   modern-retail.

   Ported from the Google Stitch export
   (docs/templates/pending/stitch_54_throttle_motorcycle_gear_store — the
   "Throttle" DESIGN.md is the design-system source). The design system: an
   asphalt-black canvas (#17181a) with slightly lifted matte surfaces for
   depth, Racing Red (#d92323) reserved for high-priority CTAs / active states
   / critical accents, Reflective Silver hairlines for structural dividers,
   uppercase Poppins Bold headlines with tight tracking, a heavy Inter "Rs."
   price display, GLOBAL 0px corners ("strictly geometric and sharp") and ZERO
   soft shadows — depth comes from tonal layering, 1px red keylines and hard
   edges.

   This stylesheet has two jobs:
     (a) style throttle-gear's OWN sections (tg-* — the Daily Riders featured
         band, the red-keyline safety cards, the New Gear rack, the icon
         category tiles, the journal and the solid-red newsletter band);
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
         base neutral tokens at the asphalt-black palette and drawing the
         hairline structure. This is the only reason shop / PDP / cart /
         checkout / account / blog turn dark without a single page override.

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

   Contrast decisions (WCAG ratios computed against this palette):
     - #ffffff on a Racing Red #d92323 FILL = 4.98:1 — clears AA-normal, so the
       export's own white-on-red buttons / badges / quick-add / newsletter band
       are kept exactly as designed. No light-primary re-inking is needed for
       FILLS; the guard block below only handles the two base rules that put
       white on the ACCENT (a pale salmon) instead.
     - Racing Red #d92323 as small TEXT on the #17181a canvas is only 3.57:1,
       i.e. below AA-normal for the 12px eyebrows / journal labels the export
       prints in red. Those roles therefore use --tg-red-ink #ef4444 — one
       perceptual step brighter, measured 4.72:1 on the canvas. Racing Red
       itself is still used verbatim for FILLS and for the large safety-card
       icons (a 3.57:1 large glyph clears the 3:1 UI floor).
     - The salmon accent tint #ffb4ab (prices, links, nav hover) = 10.79:1 on
       the canvas and 8.94:1 on the #242629 card surface.
     - Ink #e5e2e1 on the canvas = 14.53:1, on the card surface #242629 =
       11.77:1. Muted #c6c6ca body copy = 10.34:1. Silver #909094 metadata =
       5.59:1. All clear AA-normal.
     - On the solid-red newsletter band every label is SOLID white (4.98:1).
       The export prints the supporting line at text-white/80, which composites
       to ~3.6:1 and fails AA-normal, so the alpha is dropped — the one
       deliberate deviation from the export's own values in this file.
   ========================================================================== */

body.tg-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --tg-red: var(--bs-primary, #d92323);
    --tg-red-rgb: var(--bs-primary-rgb, 217, 35, 35);
    --tg-tint: var(--ll-accent, #ffb4ab);
    --tg-font-head: var(--ll-font-headings, "Poppins"), system-ui, -apple-system, sans-serif;
    --tg-font-body: var(--ll-font-body, "Inter"), system-ui, -apple-system, sans-serif;

    /* Asphalt-black palette (DESIGN.md prose canvas literal + the export's YAML
       surface ramp). Canvas/surfaces/ink are literals by design (CLAUDE.md:
       never bind structural ink to a customizer token — there is no "ink" or
       "canvas" slot in the 5-token contract). */
    --tg-canvas: #17181a;          /* DESIGN.md "Asphalt-black" canvas */
    --tg-surface-lowest: #0e0e0e;  /* surface-container-lowest — announce, footer, journal band, card media */
    --tg-surface-low: #1c1b1b;     /* surface-container-low — lifted featured band */
    --tg-surface: #201f1f;         /* surface-container — trust strip, tiles */
    --tg-surface-high: #2a2a2a;    /* surface-container-high — fills, dropdown hover, rails */
    --tg-card: #242629;            /* DESIGN.md "Product Cards: Surface Variant #242629" */
    --tg-media-bg: #101012;        /* card media background */
    --tg-field-bg: #101012;        /* input fill — recessed below the card */
    --tg-ink: #e5e2e1;             /* on-surface — primary text */
    --tg-muted: #c6c6ca;           /* on-surface-variant — supporting text */
    --tg-soft: #909094;            /* outline — metadata, placeholders (Reflective Silver) */
    --tg-warm: #c6c6ca;            /* nav / trust micro-labels */

    /* Red roles. --tg-red is the token-driven FILL colour; --tg-red-ink is a
       measured literal for SMALL red TEXT (see the header note). */
    --tg-red-ink: #ef4444;
    --tg-ink-on-red: #ffffff;

    /* Structure — DESIGN.md "silver dividers at 10-20% opacity"; Racing Red
       marks active/hover keylines ("the glow of a taillight"). */
    --tg-line: rgba(195, 201, 207, 0.15);
    --tg-line-soft: rgba(195, 201, 207, 0.1);
    --tg-line-strong: var(--tg-red);

    /* Re-point the inherited base neutrals at the asphalt palette so every
       inherited mr-* surface (bands, borders, fills, muted text) follows. This
       block alone inverts shop / PDP / cart / checkout / account / blog. */
    --mr-ink: var(--tg-ink);
    --mr-muted: var(--tg-muted);
    --mr-soft: var(--tg-soft);
    --mr-surface: var(--tg-canvas);
    --mr-band: var(--tg-surface-low);
    --mr-band-alt: var(--tg-surface-lowest);
    --mr-fill: var(--tg-surface-high);
    --mr-border: var(--tg-line);
    --mr-border-strong: var(--tg-line-strong);
    --mr-radius: 0;
    --mr-gold: var(--tg-red);
    --mr-shadow: none;

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

/* --------------------------------------------------------------------------
   Bootstrap dark-surface tokens. The --mr-* re-point above covers every
   inherited mr-* surface, but Bootstrap's OWN components read Bootstrap's OWN
   custom properties, which nothing above ever touches: the quick-view modal's
   .modal-content, storefront::shared/reviews.blade.php's "Write a review"
   .card, and storefront::shared/product-facets.blade.php's h6.bg-light facet
   headings. None of those partials are theme-owned (CLAUDE.md: themes
   physically cannot fork them), so the only fix available here is re-pointing
   the Bootstrap tokens they read. Ink #e5e2e1 on --tg-surface-low #1c1b1b
   measures 13.6:1 — clears AA widely.
   -------------------------------------------------------------------------- */
body.tg-theme {
    --bs-body-bg: var(--tg-canvas);
    --bs-body-color: var(--tg-ink);
    --bs-modal-bg: var(--tg-surface-low);
    --bs-modal-color: var(--tg-ink);
    --bs-card-bg: var(--tg-surface-low);
    --bs-card-color: var(--tg-ink);
    --bs-secondary-bg: var(--tg-surface-high);
    --bs-tertiary-bg: var(--tg-surface-low);
    --bs-emphasis-color: var(--tg-ink);
    --bs-border-color: var(--tg-line);
    /* .bg-light reads --bs-light-rgb — #1c1b1b (--tg-surface-low) as r,g,b. */
    --bs-light-rgb: 28, 27, 27;
    /* .text-muted reads --bs-secondary-color; Bootstrap's default #6c757d at
       ~50% alpha is ~1.4:1 on this canvas. Re-point to the silver metadata
       colour (5.59:1). */
    --bs-secondary-color: var(--tg-soft);

    /* Bare prose links. storefront::head.theme-vars pipes primary_color into
       --bs-link-color, i.e. Racing Red at 3.57:1 on this canvas. Re-point the
       Bootstrap link tokens at the accent tint (10.79:1) instead of adding a
       bare `body.tg-theme a { … }` catch-all — that rule would out-specify
       `.mr-btn--primary { color:#fff }` (0,1,0) and repaint the hero CTA's
       label. See gotchas "A bare body.<px>-theme a catch-all". */
    --bs-link-color-rgb: 255, 180, 171;
    --bs-link-hover-color-rgb: 229, 226, 225;
}

body.tg-theme .modal-content {
    background-color: var(--tg-surface-low);
    color: var(--tg-ink);
}

body.tg-theme .card {
    background-color: var(--tg-surface-low);
    color: var(--tg-ink);
    border-color: var(--tg-line);
}

body.tg-theme .bg-light {
    /* Bootstrap's own rule carries !important on this declaration; match it
       rather than relying solely on the --bs-light-rgb re-point above. */
    background-color: var(--tg-surface-low) !important;
}

/* Form VALIDATION colours. Bootstrap's stock validation palette is tuned for a
   white page: `--bs-form-invalid-color` #dc3545 measures ~3.5:1 on this canvas,
   i.e. the "Email is required" line under every failed field on login /
   register / password reset / the address form / all five checkout steps / the
   shared review form fails AA-normal. The export's own DESIGN.md ships a
   dark-scheme error token for exactly this (`error: #ffb4ab` — 10.79:1); the
   valid pair is the same lightness step in green. */
body.tg-theme {
    --tg-error: #ffb4ab;
    --tg-valid: #8fd6ab;
    --bs-form-invalid-color: var(--tg-error);
    --bs-form-invalid-border-color: var(--tg-error);
    --bs-form-valid-color: var(--tg-valid);
    --bs-form-valid-border-color: var(--tg-valid);
    --bs-danger-text-emphasis: var(--tg-error);
    --bs-success-text-emphasis: var(--tg-valid);
}

body.tg-theme .invalid-feedback,
body.tg-theme .text-danger {
    color: var(--tg-error) !important;
}

body.tg-theme .valid-feedback {
    color: var(--tg-valid) !important;
}

/* The shared price component's sale colour is a hard-coded #d6293e (3.63:1 on
   this canvas). Re-point it to the salmon tint so struck-through sale pricing
   matches every other (salmon) price on the storefront and stays legible. */
body.tg-theme .ll-price--sale {
    color: var(--tg-tint);
}

body.tg-theme .ll-price-compare {
    color: var(--tg-soft);
}

/* --------------------------------------------------------------------------
   Shape discipline — DESIGN.md "Shapes: strictly geometric and sharp. All
   corners… must have a 0px border radius." A hard flatten across cards,
   buttons, inputs, tiles and image containers, plus the base classes that
   carry a literal radius (mr-social / mr-status / mr-cart-row__media /
   mr-sale-tag / mr-badge). Depth = tonal layers + 1px keylines, no shadows.
   -------------------------------------------------------------------------- */
body.tg-theme .mr-card,
body.tg-theme .mr-card__media,
body.tg-theme .mr-card__badge,
body.tg-theme .mr-btn,
body.tg-theme .mr-promo,
body.tg-theme .mr-promo__img,
body.tg-theme .mr-icon-btn,
body.tg-theme .mr-tile,
body.tg-theme .mr-article__media,
body.tg-theme .mr-panel,
body.tg-theme .mr-acct-nav,
body.tg-theme .mr-social,
body.tg-theme .mr-status,
body.tg-theme .mr-cart-row__media,
body.tg-theme .mr-sale-tag,
body.tg-theme .mr-badge,
body.tg-theme .form-control,
body.tg-theme .form-select,
body.tg-theme .dropdown-menu,
body.tg-theme .offcanvas,
body.tg-theme .modal-content,
body.tg-theme img,
body.tg-theme input,
body.tg-theme select,
body.tg-theme textarea,
body.tg-theme button {
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* The two round overlay controls on the product card (wishlist heart, quick
   view eye) are EXEMPT from the flatten above. `.mr-card__wish` renders as a
   <button> for signed-in shoppers and an <a> for guests — a flatten that
   catches `button` would square the heart for logged-in users only. Target the
   classes directly and keep them round, matching the platform convention. */
body.tg-theme .mr-card__wish,
body.tg-theme .mr-card__quickview {
    border-radius: 9999px !important;
}

/* --------------------------------------------------------------------------
   Typography — Poppins Bold, ALWAYS uppercase, tight tracking (DESIGN.md:
   "All headlines must be rendered in uppercase… tight letter-spacing"); Inter
   for body copy, UI labels and prices.
   -------------------------------------------------------------------------- */
body.tg-theme h1,
body.tg-theme h2,
body.tg-theme h3,
body.tg-theme h4,
body.tg-theme h5,
body.tg-theme h6,
body.tg-theme .mr-display,
body.tg-theme .mr-headline,
body.tg-theme .mr-logo {
    font-family: var(--tg-font-head);
    font-weight: 700;
    color: var(--tg-ink);
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

body.tg-theme .mr-display {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.15;
}

/* Small tracked Racing Red micro-labels — hero eyebrow, section eyebrows,
   journal category chips. Uses the measured red ink (4.72:1) rather than the
   raw token (3.57:1) because these are 12px. */
body.tg-theme .mr-eyebrow,
body.tg-theme .tg-eyebrow {
    font-family: var(--tg-font-body);
    /* DESIGN.md label-sm: Inter 600 / 12px / 0.05em uppercase — the export's
       hero eyebrow widens that to ~0.2em (tracking-widest). */
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tg-red-ink);
}

body.tg-theme .mr-muted {
    color: var(--tg-soft);
}

body.tg-theme .mr-ulink {
    color: var(--tg-warm);
}

body.tg-theme .mr-ulink:hover {
    color: var(--tg-tint);
    border-color: var(--tg-tint);
}

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

/* A quiet tracked keyline link ("VIEW ALL ESSENTIALS") — silver underline in
   the export, brightening to salmon on hover. */
body.tg-theme .tg-keyline-link {
    font-family: var(--tg-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tg-tint);
    text-decoration: none;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--tg-tint);
    transition: color 0.25s ease, border-color 0.25s ease;
}

body.tg-theme .tg-keyline-link:hover {
    color: var(--tg-ink);
    border-bottom-color: var(--tg-ink);
}

/* --------------------------------------------------------------------------
   Buttons & form controls — DESIGN.md "Primary buttons are solid Racing Red
   with White uppercase text. Secondary buttons are ghost-style with a
   Reflective Silver border."
   -------------------------------------------------------------------------- */
body.tg-theme .mr-btn,
body.tg-theme .tg-btn {
    font-family: var(--tg-font-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 1rem 2.5rem;
    border: 1px solid transparent;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

body.tg-theme .mr-btn--primary,
body.tg-theme .btn-primary {
    background-color: var(--tg-red);
    border-color: var(--tg-red);
    color: var(--tg-ink-on-red);
}

/* Export: `hover:bg-red-700` on the Racing Red CTA — a darker, heavier red.
   White on #b91c1c measures 6.47:1. */
body.tg-theme .mr-btn--primary:hover,
body.tg-theme .mr-btn--primary:focus,
body.tg-theme .btn-primary:hover,
body.tg-theme .btn-primary:focus,
body.tg-theme .btn-primary:active {
    background-color: #b91c1c;
    border-color: #b91c1c;
    color: var(--tg-ink-on-red);
    filter: none;
}

/* Ghost / on-dark secondary ("SHOP JACKETS") — 1px Reflective Silver keyline,
   white label; on hover the border fills to a solid silver panel with dark
   text (export: `hover:bg-on-surface hover:text-surface`). */
body.tg-theme .mr-btn--outline,
body.tg-theme .mr-btn--on-dark,
body.tg-theme .tg-btn {
    background-color: transparent;
    border-color: var(--tg-ink);
    color: #ffffff;
}

body.tg-theme .mr-btn--outline:hover,
body.tg-theme .mr-btn--on-dark:hover,
body.tg-theme .tg-btn:hover {
    background-color: var(--tg-ink);
    border-color: var(--tg-ink);
    color: var(--tg-canvas);
}

body.tg-theme .mr-btn--ghost {
    color: var(--tg-tint);
}

/* `.mr-btn--light` is a white button whose label the base inks with
   --bs-primary (Racing Red on white = 4.98:1, fine) but whose HOVER swaps to
   `background: var(--ll-accent); color:#fff` — white on the pale salmon tint
   is ~1.7:1. Follow the export's own white-button hover instead: invert to
   asphalt-black with a white label. */
body.tg-theme .mr-btn--light {
    background-color: #ffffff;
    border-color: #ffffff;
    color: var(--tg-red);
}

body.tg-theme .mr-btn--light:hover {
    background-color: var(--tg-canvas);
    border-color: var(--tg-canvas);
    color: #ffffff;
}

/* DESIGN.md "Input Fields: Sharp 0px boxes… 1px Silver border. Focus state
   changes the border to Racing Red." */
body.tg-theme .form-control,
body.tg-theme .form-select {
    background-color: var(--tg-field-bg);
    border: 1px solid rgba(195, 201, 207, 0.28);
    color: var(--tg-ink);
}

/* Bootstrap draws the select caret as a background-image whose stroke is
   hard-coded #343a40 — invisible on this near-black field. Re-draw it in ink,
   and keep the 2.25rem caret gutter (NEVER a padding shorthand here — that eats
   the gutter and runs option text under the arrow). */
body.tg-theme .form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e5e2e1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    padding-inline-end: 2.25rem;
}

body.tg-theme .form-control::placeholder {
    color: var(--tg-soft);
}

body.tg-theme .form-control:focus,
body.tg-theme .form-select:focus {
    background-color: var(--tg-field-bg);
    border-color: var(--tg-red);
    color: var(--tg-ink);
    box-shadow: none !important;
}

body.tg-theme .form-label,
body.tg-theme .form-check-label {
    color: var(--tg-muted);
}

body.tg-theme .form-text {
    color: var(--tg-soft);
}

body.tg-theme .form-check-input {
    background-color: var(--tg-field-bg);
    border-color: rgba(195, 201, 207, 0.4);
}

body.tg-theme .form-check-input:checked {
    background-color: var(--tg-red);
    border-color: var(--tg-red);
}

/* Dropdowns (the header's category menu) and the mobile offcanvas nav both
   hard-code light surfaces in Bootstrap — a dark child must set them. */
body.tg-theme .dropdown-menu {
    background-color: var(--tg-surface);
    border: 1px solid var(--tg-line);
}

body.tg-theme .dropdown-item {
    color: var(--tg-warm);
}

body.tg-theme .dropdown-item:hover,
body.tg-theme .dropdown-item:focus {
    background-color: var(--tg-surface-high);
    color: var(--tg-tint);
}

body.tg-theme .offcanvas {
    background-color: var(--tg-canvas);
    color: var(--tg-ink);
}

body.tg-theme .offcanvas-header,
body.tg-theme .offcanvas-title {
    color: var(--tg-ink);
}

/* Bootstrap's close glyph is a dark SVG — invert it or it disappears. */
body.tg-theme .btn-close {
    filter: invert(1) grayscale(1) brightness(1.6);
}

/* Tables (orders / cart / account) need explicit ink on the dark canvas. */
body.tg-theme .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--tg-ink);
    --bs-table-border-color: var(--tg-line);
    --bs-table-striped-bg: var(--tg-surface-low);
    --bs-table-striped-color: var(--tg-ink);
    --bs-table-hover-bg: var(--tg-surface-low);
    --bs-table-hover-color: var(--tg-ink);
    color: var(--tg-ink);
}

body.tg-theme .table > thead {
    color: var(--tg-soft);
}

/* --------------------------------------------------------------------------
   Accent guard block — the inherited base rules that fill with --ll-accent (a
   PALE salmon here) and hard-code #fff on top (~1.7:1). Both get the
   asphalt-black on-tint ink instead (10.79:1). Racing Red FILLS are left
   alone: #fff on #d92323 is 4.98:1 and matches the export.
   See gotchas "A LIGHT primary_color breaks ~12 inherited base rules".
   -------------------------------------------------------------------------- */
body.tg-theme .mr-badge--wish,
body.tg-theme .mr-social:hover {
    color: var(--tg-canvas);
}

/* --------------------------------------------------------------------------
   Announcement band + header — DESIGN.md/export: the announce line sits on the
   deepest surface in tracked silver micro-caps; the header is the asphalt
   canvas under a hairline with a hard black shadow.
   -------------------------------------------------------------------------- */
body.tg-theme .mr-announce {
    background-color: var(--tg-surface-lowest);
    color: var(--tg-soft);
    border-bottom: 1px solid var(--tg-line);
    font-family: var(--tg-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

body.tg-theme .mr-announce a {
    color: var(--tg-tint);
}

body.tg-theme .mr-header {
    background-color: var(--tg-canvas);
    border-bottom: 1px solid var(--tg-line);
}

body.tg-theme .mr-logo {
    font-family: var(--tg-font-head);
    letter-spacing: -0.02em;
    color: var(--tg-ink);
}

/* Export nav: uppercase Poppins bold in ink, switching to the salmon tint on
   hover / for the current item. */
body.tg-theme .mr-nav-link {
    font-family: var(--tg-font-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tg-ink);
}

body.tg-theme .mr-nav-link:hover,
body.tg-theme .mr-nav-link.is-active {
    color: var(--tg-tint);
}

body.tg-theme .mr-icon-btn {
    color: var(--tg-ink);
}

body.tg-theme .mr-icon-btn:hover {
    color: var(--tg-tint);
}

body.tg-theme .mr-search input {
    background-color: var(--tg-field-bg);
    border: 1px solid var(--tg-line);
    color: var(--tg-ink);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
}

body.tg-theme .mr-search input::placeholder {
    color: var(--tg-soft);
}

body.tg-theme .mr-search input:focus {
    background-color: var(--tg-field-bg);
    border-color: var(--tg-red);
    box-shadow: none;
}

body.tg-theme .mr-search button {
    color: var(--tg-soft);
}

body.tg-theme .mr-search button:hover {
    color: var(--tg-tint);
}

/* --------------------------------------------------------------------------
   Hero (inherited markup — full-bleed photo + overlay + copy + 2 CTAs). The
   overlay is RE-TINTED in asphalt-black, never removed: it is the only thing
   keeping the white <h1> readable over an arbitrary merchant photo. The export
   layers a black/60 wash across the whole image.
   -------------------------------------------------------------------------- */
body.tg-theme .mr-hero {
    background-color: var(--tg-canvas);
}

body.tg-theme .mr-hero__overlay {
    background: linear-gradient(90deg, rgba(23, 24, 26, 0.9) 0%, rgba(23, 24, 26, 0.66) 46%, rgba(23, 24, 26, 0.4) 100%);
}

/* (0,3,1) — must out-specify the base's `.mr-hero .mr-hero__copy .mr-eyebrow`
   (0,2,1), which paints the eyebrow white. The export prints it Racing Red at
   wide tracking. */
body.tg-theme .mr-hero .mr-hero__copy .mr-eyebrow {
    color: var(--tg-red-ink);
    letter-spacing: 0.24em;
}

body.tg-theme .mr-hero .mr-hero__copy h1 {
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1;
    font-size: clamp(2.5rem, 5.5vw, 4rem);
}

/* --------------------------------------------------------------------------
   Trust strip (inherited) — the export's four silver icons beside tracked
   uppercase micro-labels, on the surface-container band under a hairline.
   -------------------------------------------------------------------------- */
body.tg-theme .mr-band--alt {
    background-color: var(--tg-surface-lowest);
}

body.tg-theme .mr-trust svg {
    color: var(--tg-red-ink);
    width: 24px;
    height: 24px;
}

body.tg-theme .mr-trust strong {
    font-family: var(--tg-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tg-warm);
}

body.tg-theme .mr-trust span {
    color: var(--tg-soft);
    font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   Promo tiles (inherited) — the export's three landscape photo tiles behind a
   bottom-up asphalt gradient, each framed by a 1px Racing Red keyline (its
   `red-keyline` utility), with an uppercase Poppins title over a short Racing
   Red underline bar. The image scales on hover.
   -------------------------------------------------------------------------- */
body.tg-theme .mr-promo {
    aspect-ratio: 4 / 3;
    background-color: var(--tg-surface);
    border: 1px solid var(--tg-red);
}

body.tg-theme .mr-promo__scrim {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0) 100%);
}

body.tg-theme .mr-promo:hover .mr-promo__scrim {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.45) 50%, rgba(0, 0, 0, 0.05) 100%);
}

body.tg-theme .mr-promo__cap {
    left: 2rem;
    right: 2rem;
    bottom: 2rem;
}

body.tg-theme .mr-promo__title {
    font-family: var(--tg-font-head);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: #ffffff;
    margin-bottom: 0.75rem;
}

/* The short Racing Red underline bar under each promo title — decorative theme
   identity (the export bakes it into every tile). */
body.tg-theme .mr-promo__title::after {
    content: "";
    display: block;
    width: 3rem;
    height: 3px;
    margin-top: 0.75rem;
    background-color: var(--tg-red);
}

/* The export tiles carry no caption line; if a merchant adds one it renders as
   a small silver tracked label. */
body.tg-theme .mr-promo__cta {
    font-family: var(--tg-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tg-tint);
    border-bottom: 0;
    padding-bottom: 0;
}

/* The base's `.mr-promo:hover .mr-promo__cta` is (0,0,3,0) and would otherwise
   win over a (0,0,2,1) child rule — override the DESCENDANT state selector too. */
body.tg-theme .mr-promo:hover .mr-promo__cta {
    color: #ffffff;
    border-color: transparent;
}

/* --------------------------------------------------------------------------
   Product cards (inherited). DESIGN.md "Product Cards: Set on Surface Variant
   (#242629)… 1px Reflective Silver border at low opacity… Prices at the bottom
   right in bold Inter." A filled card with a hairline keyline that snaps Racing
   Red on hover; because the card carries a border, its text must be inset
   (see gotchas "A bordered / filled .mr-card must inset its own text").
   -------------------------------------------------------------------------- */
body.tg-theme .mr-card {
    background-color: var(--tg-card);
    border: 1px solid var(--tg-line);
    transition: border-color 0.3s ease;
}

body.tg-theme .mr-card:hover,
body.tg-theme .mr-card:focus-within {
    border-color: var(--tg-red);
}

body.tg-theme .mr-card__media {
    aspect-ratio: 1 / 1;
    background-color: var(--tg-media-bg);
    border-bottom: 1px solid var(--tg-line);
}

/* Bordered card ⇒ its text must not sit flush against the keyline. The media
   stays full-bleed; only the copy is inset. */
body.tg-theme .mr-card > p,
body.tg-theme .mr-card > h3 {
    padding-inline: 1.25rem;
}

/* Whatever text element sits directly under the media (the category eyebrow
   when loaded, otherwise the title) gets the top breathing room — so the copy
   never collides with the media's bottom keyline. */
body.tg-theme .mr-card__media + p,
body.tg-theme .mr-card__media + h3 {
    padding-top: 1.25rem;
}

body.tg-theme .mr-card > *:last-child {
    padding-bottom: 1.25rem;
}

body.tg-theme .mr-card__eyebrow {
    font-family: var(--tg-font-body);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tg-soft);
}

body.tg-theme .mr-card__title {
    font-family: var(--tg-font-body);
    font-weight: 700;
    font-size: 0.98rem;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--tg-ink);
}

body.tg-theme .mr-card__title a {
    color: inherit;
}

body.tg-theme .mr-card__title a:hover {
    color: var(--tg-tint);
}

/* DESIGN.md price-display: Inter Bold, tight tracking, in the salmon tint
   (8.94:1 on the card). */
body.tg-theme .mr-card__price,
body.tg-theme .mr-card__price .ll-price {
    font-family: var(--tg-font-body);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--tg-tint);
}

body.tg-theme .mr-card__price del,
body.tg-theme .mr-card__price s {
    color: var(--tg-soft);
    font-size: 0.85rem;
}

/* 'SALE' / '-x%' badge — a rectangular Racing Red chip with a white label
   (4.98:1), exactly as the export prints it. */
body.tg-theme .mr-card__badge {
    background-color: var(--tg-red);
    color: var(--tg-ink-on-red);
    font-family: var(--tg-font-body);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* The slide-up "Add to Cart" bar — the export's full-width Racing Red quick-add
   with a white uppercase label. */
body.tg-theme .mr-card__quick {
    background-color: var(--tg-red);
    color: var(--tg-ink-on-red);
    font-family: var(--tg-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding-block: 0.9rem;
}

body.tg-theme .mr-card__quick:hover {
    background-color: #b91c1c;
    color: var(--tg-ink-on-red);
}

/* The two floating icon affordances. `__wish` (heart) and `__quickview` (eye)
   are SIBLINGS with different names — restyle them TOGETHER or the eye keeps
   the base's near-white circle, unreadable on this canvas. Default prints ink
   on an asphalt badge (~13:1); hover fills Racing Red with a white glyph
   (4.98:1). They stay circular platform-wide. */
body.tg-theme .mr-card__wish,
body.tg-theme .mr-card__quickview {
    background-color: rgba(14, 14, 14, 0.82);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: var(--tg-ink);
    border: 1px solid var(--tg-line);
}

body.tg-theme .mr-card__wish:hover,
body.tg-theme .mr-card__quickview:hover {
    background-color: var(--tg-red);
    border-color: var(--tg-red);
    color: var(--tg-ink-on-red);
}

body.tg-theme .mr-card__wish.is-active {
    color: var(--tg-tint);
}

/* Rail chevrons (PDP related products etc.) — hairline squares that fill red. */
body.tg-theme .mr-rail-btn {
    border-color: var(--tg-line);
    color: var(--tg-ink);
}

body.tg-theme .mr-rail-btn:hover {
    background-color: var(--tg-red);
    border-color: var(--tg-red);
    color: var(--tg-ink-on-red);
}

/* --------------------------------------------------------------------------
   throttle-gear's own home sections
   -------------------------------------------------------------------------- */

/* "Daily Riders" — the featured grid sits on the lifted surface band. */
body.tg-theme .tg-featured {
    background-color: var(--tg-surface-low);
    border-block: 1px solid var(--tg-line);
}

/* Safety cards — three Racing Red keyline boxes on the canvas, centered icon /
   title / body. */
body.tg-theme .tg-safety__card {
    height: 100%;
    padding: 2.5rem 2rem;
    text-align: center;
    background-color: var(--tg-canvas);
    border: 1px solid var(--tg-red);
    transition: background-color 0.3s ease;
}

body.tg-theme .tg-safety__card:hover {
    background-color: rgba(var(--tg-red-rgb), 0.06);
}

body.tg-theme .tg-safety__icon {
    width: 52px;
    height: 52px;
    display: block;
    color: var(--tg-red);
    margin: 0 auto 1.5rem;
}

body.tg-theme .tg-safety__title {
    font-family: var(--tg-font-head);
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--tg-ink);
    margin-bottom: 1rem;
}

body.tg-theme .tg-safety__text {
    font-family: var(--tg-font-body);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--tg-muted);
}

/* "New Gear" rack — on the asphalt canvas. */
body.tg-theme .tg-rack {
    background-color: var(--tg-canvas);
}

/* Shop by Category — icon tiles on the canvas under a hairline top rule; each
   dark surface panel washes Racing Red on hover. */
body.tg-theme .tg-cats {
    border-top: 1px solid var(--tg-line);
}

body.tg-theme .tg-cats__tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    aspect-ratio: 4 / 3;
    background-color: var(--tg-surface);
    border: 1px solid var(--tg-line);
    text-decoration: none;
    overflow: hidden;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

body.tg-theme .tg-cats__tile:hover {
    background-color: var(--tg-red);
    border-color: var(--tg-red);
}

body.tg-theme .tg-cats__icon {
    width: 40px;
    height: 40px;
    color: var(--tg-ink);
    transition: transform 0.3s ease, color 0.3s ease;
}

body.tg-theme .tg-cats__tile:hover .tg-cats__icon {
    color: var(--tg-ink-on-red);
    transform: scale(1.1);
}

body.tg-theme .tg-cats__name {
    font-family: var(--tg-font-head);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: center;
    padding: 0 0.75rem;
    color: var(--tg-ink);
    transition: color 0.3s ease;
}

body.tg-theme .tg-cats__tile:hover .tg-cats__name {
    color: var(--tg-ink-on-red);
}

/* "Throttle Journal" — on the deepest surface band, media framed by a hairline,
   uppercase titles hovering to salmon. */
body.tg-theme .tg-journal {
    background-color: var(--tg-surface-lowest);
}

body.tg-theme .tg-journal__media {
    background-color: var(--tg-surface);
    border: 1px solid var(--tg-line);
}

body.tg-theme .tg-journal__title {
    font-size: 1.15rem;
    line-height: 1.25;
}

body.tg-theme .tg-journal__title a {
    color: var(--tg-ink);
    text-decoration: none;
}

body.tg-theme .tg-journal__title a:hover {
    color: var(--tg-tint);
}

/* Newsletter "THE THROTTLE NOTE" — the export's one saturated surface: a solid
   Racing Red band, copy left / form right, with a translucent email field and a
   white Subscribe button that inverts to black on hover. Every label here is
   SOLID white (4.98:1): the export prints the body at text-white/80, which
   composites to ~3.6:1 and fails AA-normal, so the alpha is dropped. */
body.tg-theme .tg-cta {
    background-color: var(--tg-red);
    padding-block: clamp(48px, 7vw, 72px);
}

body.tg-theme .tg-cta__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

body.tg-theme .tg-cta__copy {
    flex: 1 1 22rem;
}

body.tg-theme .tg-cta__eyebrow {
    font-family: var(--tg-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #ffffff;
}

body.tg-theme .tg-cta__title {
    color: #ffffff;
    font-size: clamp(1.8rem, 4vw, 2.75rem);
    letter-spacing: -0.02em;
    line-height: 1;
}

body.tg-theme .tg-cta__body {
    font-family: var(--tg-font-body);
    font-size: 1rem;
    font-weight: 400;
    color: #ffffff;
    margin-top: 0.75rem;
    max-width: 44ch;
}

body.tg-theme .tg-cta__note {
    font-family: var(--tg-font-body);
    font-size: 0.78rem;
    color: #ffffff;
}

body.tg-theme .tg-cta__form {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
    flex: 0 1 auto;
}

body.tg-theme .tg-cta__form input {
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 1rem 1.5rem;
    width: 20rem;
    max-width: 100%;
    font-family: var(--tg-font-body);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
}

body.tg-theme .tg-cta__form input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

body.tg-theme .tg-cta__form input:focus {
    outline: none;
    border-color: #ffffff;
    background-color: rgba(255, 255, 255, 0.12);
}

body.tg-theme .tg-cta__btn {
    background-color: #ffffff;
    color: var(--tg-red);
    border: 2px solid #ffffff;
    padding: 1rem 2.5rem;
    font-family: var(--tg-font-body);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color 0.25s ease, color 0.25s ease;
}

body.tg-theme .tg-cta__btn:hover {
    background-color: var(--tg-canvas);
    border-color: var(--tg-canvas);
    color: #ffffff;
}

body.tg-theme .tg-cta__btn:disabled {
    opacity: 0.9;
    cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Inherited component finishing — brand strip, footer, pagination, steps,
   account rail, facets, tabs, gallery.
   -------------------------------------------------------------------------- */
body.tg-theme .mr-brandstrip {
    border-block-color: var(--tg-line);
    opacity: 1;
}

body.tg-theme .mr-brandstrip span {
    color: var(--tg-soft);
}

body.tg-theme .mr-footer {
    background-color: var(--tg-surface-lowest);
    border-top: 1px solid var(--tg-line);
    color: var(--tg-muted);
}

body.tg-theme .mr-footer__brand {
    font-family: var(--tg-font-head);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: var(--tg-ink);
}

body.tg-theme .mr-footer h4 {
    font-family: var(--tg-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tg-ink);
}

body.tg-theme .mr-footer p {
    color: var(--tg-muted);
}

body.tg-theme .mr-footer a {
    color: var(--tg-muted);
}

body.tg-theme .mr-footer a:hover {
    color: var(--tg-ink);
}

/* `.mr-social` IS the anchor in the base footer partial — hairline squares that
   fill Racing Red on hover (the guard block above re-inks the glyph). */
body.tg-theme .mr-social {
    width: 40px;
    height: 40px;
    border: 1px solid var(--tg-line);
    color: var(--tg-ink);
}

body.tg-theme .mr-social:hover {
    background-color: var(--tg-red);
    border-color: var(--tg-red);
}

body.tg-theme .mr-page {
    border-color: var(--tg-line);
    color: var(--tg-muted);
}

body.tg-theme .mr-page:hover {
    border-color: var(--tg-red);
    color: var(--tg-red-ink);
}

body.tg-theme .mr-page.is-active {
    background-color: var(--tg-red);
    border-color: var(--tg-red);
    color: var(--tg-ink-on-red);
}

body.tg-theme .mr-page.is-disabled {
    color: var(--tg-soft);
}

body.tg-theme .mr-filter__title {
    color: var(--tg-ink);
}

body.tg-theme .mr-filter__link {
    color: var(--tg-muted);
}

body.tg-theme .mr-filter__link:hover,
body.tg-theme .mr-filter__link.is-active {
    color: var(--tg-red-ink);
}

body.tg-theme .mr-tabs .nav-link {
    color: var(--tg-soft);
}

body.tg-theme .mr-tabs .nav-link:hover {
    color: var(--tg-ink);
}

body.tg-theme .mr-tabs .nav-link.active {
    color: var(--tg-red-ink);
    border-bottom-color: var(--tg-red);
}

body.tg-theme .mr-gallery__thumb {
    border-color: var(--tg-line);
    background-color: var(--tg-surface);
}

body.tg-theme .mr-gallery__thumb.is-active {
    border-color: var(--tg-red);
}

body.tg-theme .mr-step__label {
    color: var(--tg-soft);
}

body.tg-theme .mr-step.is-current .mr-step__label,
body.tg-theme .mr-step.is-done .mr-step__label {
    color: var(--tg-ink);
}

body.tg-theme .mr-step.is-current .mr-step__dot {
    border-color: var(--tg-red);
    color: var(--tg-red-ink);
}

body.tg-theme .mr-step.is-done .mr-step__dot {
    background-color: var(--tg-red);
    border-color: var(--tg-red);
    color: var(--tg-ink-on-red);
}

body.tg-theme .mr-acct-nav {
    background-color: var(--tg-surface-low);
    border-color: var(--tg-line);
}

body.tg-theme .mr-acct-avatar {
    background-color: var(--tg-red);
    color: var(--tg-ink-on-red);
}

body.tg-theme .mr-acct-link {
    color: var(--tg-muted);
}

body.tg-theme .mr-acct-link:hover {
    background-color: var(--tg-surface-high);
    color: var(--tg-ink);
}

body.tg-theme .mr-acct-link.is-active {
    background-color: var(--tg-red);
    color: var(--tg-ink-on-red);
}

body.tg-theme .mr-panel {
    background-color: var(--tg-surface-low);
    border-color: var(--tg-line);
}

body.tg-theme .mr-article__media {
    background-color: var(--tg-surface);
}

body.tg-theme .mr-article__title a {
    color: var(--tg-ink);
}

body.tg-theme .mr-article__title a:hover {
    color: var(--tg-tint);
}

/* --------------------------------------------------------------------------
   Motion & responsive
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.tg-theme .mr-reveal,
    body.tg-theme .mr-card,
    body.tg-theme .mr-card__media,
    body.tg-theme .mr-promo,
    body.tg-theme .mr-tile,
    body.tg-theme .tg-safety__card,
    body.tg-theme .tg-cats__tile,
    body.tg-theme .tg-cats__icon,
    body.tg-theme .tg-keyline-link,
    body.tg-theme .tg-cta__btn {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }

    body.tg-theme .mr-card:hover .mr-card__media img,
    body.tg-theme .mr-promo:hover .mr-promo__img,
    body.tg-theme .mr-tile:hover .mr-tile__img,
    body.tg-theme .mr-article__media:hover img,
    body.tg-theme .tg-cats__tile:hover .tg-cats__icon {
        transform: none !important;
    }
}

/* Export mobile frame (throttle_gear_up._head_out._mobile): a 64px bar, a 32px
   display step (DESIGN.md headline-lg-mobile), full-width tiles, and the
   newsletter band stacking its copy above a full-width field + button. */
@media (max-width: 991.98px) {
    body.tg-theme .mr-header__bar {
        min-height: 64px;
    }

    body.tg-theme .mr-display {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }

    body.tg-theme .mr-hero .mr-hero__copy h1 {
        font-size: clamp(2rem, 9vw, 2.75rem);
    }

    body.tg-theme .mr-promo {
        aspect-ratio: 16 / 10;
    }

    body.tg-theme .tg-cats__tile {
        aspect-ratio: 3 / 2;
    }

    body.tg-theme .tg-cta__inner {
        flex-direction: column;
        align-items: stretch;
    }

    body.tg-theme .tg-cta__form {
        flex-direction: column;
        gap: 0.75rem;
    }

    body.tg-theme .tg-cta__form input,
    body.tg-theme .tg-cta__btn {
        width: 100%;
    }
}