/* ==========================================================================
   circuit — "High-Performance Gaming Gear" brand layer over modern-retail.

   Ported from the Google Stitch export
   (docs/templates/pending/stitch_20_circuit_e_commerce_store — the "Circuit"
   DESIGN.md is the design-system source). The design system: a carbon-black
   canvas, Electric Violet used for primary actions + structural grid lines,
   Cyan Glow used for status/highlight text, ZERO shadows (depth comes from a
   1px violet keyline + a neon glow on hover) and perfectly sharp corners.

   This stylesheet has two jobs:
     (a) style circuit's OWN sections (ct-* — header/announce, featured,
         spec-highlights, arrivals, sale-banner, newsletter);
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
         base neutral tokens at the carbon-black palette, flattening every
         radius and shadow, and drawing the violet keyline structure. This is
         the only reason shop / PDP / cart / checkout / account / blog turn
         dark without a single page override.

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

   Contrast decision (measured with App\Support\Theming\ContrastChecker via a
   scratchpad script, never committed — see the report for the full table):
     - violet #7c5cff used as TEXT on the canvas measures 4.27:1 — just under
       WCAG AA-normal (4.5). Cyan #2fd4e0 measures 10.26:1 on the same canvas.
       So violet is used ONLY for fills/borders/underlines/large-text brand
       marks (.mr-logo, clears 3:1 large-text easily) in this stylesheet;
       every TEXT-ish highlight role (eyebrows, prices, keyline links, hover
       states) reads --ct-cyan instead of the raw primary token.
     - The button fill is fixed at #7c5cff (primary_color). White text on it
       measures 4.35:1 (fails 4.5); DESIGN.md's own on-primary #31009a
       measures worse still (3.03:1 — calibrated for their much lighter
       #cabeff tint, not this darker violet). Pure black measures 4.83:1 —
       the only candidate that clears AA-normal — so --ct-ink-on-fill is a
       near-black literal (#000), not a token reused from elsewhere.
   ========================================================================== */

body.ct-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --ct-violet: var(--bs-primary, #7c5cff);
    --ct-violet-rgb: var(--bs-primary-rgb, 124, 92, 255);
    --ct-cyan: var(--ll-accent, #2fd4e0);
    --ct-cyan-rgb: 47, 212, 224;
    --ct-font-head: var(--ll-font-headings, "Poppins"), system-ui, -apple-system, sans-serif;
    --ct-font-body: var(--ll-font-body, "Inter"), system-ui, -apple-system, sans-serif;

    /* Circuit palette (DESIGN.md YAML — surface/on-surface/outline ramp).
       Canvas/surfaces/ink are literals by design (CLAUDE.md: never bound to
       a customizer token — there is no "ink" or "canvas" slot in the
       5-token contract). */
    --ct-canvas: #14121b;          /* surface / background */
    --ct-surface-low: #1c1a24;     /* surface-container-low — cards, tiles */
    --ct-surface: #201e28;         /* surface-container — media fills, promo bg */
    --ct-surface-high: #2b2933;    /* surface-container-high — dropdown hover */
    --ct-surface-highest: #36333e; /* surface-container-highest — newsletter band */
    --ct-field-bg: #090b0f;        /* DESIGN.md "Input Fields darker than surface" */
    --ct-ink: #e6e0ee;             /* on-surface — primary text */
    --ct-muted: #c9c4d8;           /* on-surface-variant — secondary text */
    --ct-soft: #938ea1;            /* outline — faint text / placeholders */
    /* Text printed on a violet OR cyan FILL (buttons, badges, active pills,
       avatar initial). Pure black — see the contrast note above. */
    --ct-ink-on-fill: #000000;

    /* The violet "thin rule" is the design's structural device (DESIGN.md
       "Grid System: a decorative 1px violet grid… Level 1 cards: 1px solid
       border in Primary Violet at 20% opacity"), so it tracks primary_color.
       A dim tint carries generic chrome; full-strength marks circuit's OWN
       keylines (header, promo top-border, categories dividers, cta band). */
    --ct-line: rgba(var(--ct-violet-rgb), 0.2);
    --ct-line-strong: var(--ct-violet);

    /* Re-point the inherited base neutrals at the carbon-black palette so
       every inherited mr-* surface (bands, borders, fills, muted text)
       follows. */
    --mr-ink: var(--ct-ink);
    --mr-muted: var(--ct-muted);
    --mr-soft: var(--ct-soft);
    --mr-surface: var(--ct-canvas);
    --mr-band: var(--ct-surface-low);
    --mr-band-alt: var(--ct-surface);
    --mr-fill: var(--ct-surface-high);
    --mr-border: var(--ct-line);
    --mr-border-strong: var(--ct-line-strong);
    --mr-radius: 0;
    --mr-gold: var(--ct-cyan);
    --mr-shadow: none;

    background-color: var(--ct-canvas);
    color: var(--ct-ink);
    font-family: var(--ct-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 these 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.

   Measured (App\Support\Theming\ContrastChecker::ratio, scratchpad script,
   never committed):
     - ink #e6e0ee on --ct-surface-low #1c1a24 = 13.30:1
     - ink #e6e0ee on --ct-surface     #201e28 = 12.73:1
   Both clear WCAG AA (4.5:1) with a wide margin. -------------------------- */
body.ct-theme {
    --bs-body-bg: var(--ct-canvas);
    --bs-body-color: var(--ct-ink);
    --bs-modal-bg: var(--ct-surface-low);
    --bs-modal-color: var(--ct-ink);
    --bs-card-bg: var(--ct-surface-low);
    --bs-card-color: var(--ct-ink);
    --bs-secondary-bg: var(--ct-surface);
    --bs-tertiary-bg: var(--ct-surface-low);
    --bs-emphasis-color: var(--ct-ink);
    --bs-border-color: var(--ct-line);
    /* .bg-light reads --bs-light-rgb, not --bs-secondary-bg/--bs-tertiary-bg —
       #1c1a24 (--ct-surface-low) as an r,g,b triplet. */
    --bs-light-rgb: 28, 26, 36;
}

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

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

body.ct-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(--ct-surface-low) !important;
}

/* --------------------------------------------------------------------------
   Shape discipline — DESIGN.md: "strictly Sharp (0px roundedness). There are
   no exceptions for buttons, cards, input fields, or icons." The two round
   overlay controls on the product card ARE still exempt (see the product
   card section below) so the wishlist heart stays circular for signed-in
   shoppers (it is a <button>, unlike the guest <a>) — DESIGN.md's "no
   exceptions" is about the design's OWN vocabulary, and this platform
   invariant pre-dates and overrides it for that one pair of controls.
   `.mr-card__badge` IS flattened here (with !important, beating the 999px
   pill the shared storefront::head.theme-vars stylesheet gives every theme)
   because DESIGN.md explicitly calls out "Chips/Badges: small, RECTANGULAR
   blocks" — unlike every other dark theme so far, this design is emphatic
   that badges are not pills.
   -------------------------------------------------------------------------- */
body.ct-theme .mr-card,
body.ct-theme .mr-card__media,
body.ct-theme .mr-card__badge,
body.ct-theme .mr-btn,
body.ct-theme .mr-promo,
body.ct-theme .mr-promo__img,
body.ct-theme .mr-tile,
body.ct-theme .mr-icon-btn,
body.ct-theme .mr-article__media,
body.ct-theme .form-control,
body.ct-theme .form-select,
body.ct-theme .dropdown-menu,
body.ct-theme .offcanvas,
body.ct-theme img,
body.ct-theme input,
body.ct-theme select,
body.ct-theme textarea,
body.ct-theme button {
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.ct-theme .mr-card__wish,
body.ct-theme .mr-card__quickview {
    border-radius: 9999px !important;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
body.ct-theme h1,
body.ct-theme h2,
body.ct-theme h3,
body.ct-theme h4,
body.ct-theme h5,
body.ct-theme h6,
body.ct-theme .mr-display {
    font-family: var(--ct-font-head);
    font-weight: 700;
    color: var(--ct-ink);
    letter-spacing: 0;
}

body.ct-theme .mr-display {
    font-size: clamp(2rem, 3.4vw, 3.75rem);
    line-height: 1.1;
    letter-spacing: 0.02em; /* DESIGN.md display-lg: 0.02em (base uses -0.02em for its serif) */
}

/* h2.mr-display is used ONLY for section headings (featured / new-arrivals /
   spec-highlights / sale-banner / newsletter / categories / journal) plus a
   couple of numeric account stats and the quick-view modal's product-name
   heading; h1.mr-display is the PDP/category page TITLE. DESIGN.md's
   headlines are all-caps, but forcing that onto h1.mr-display would
   uppercase real product/category names (the export's own PDP shows the
   product title in mixed case) — so only h2 gets the transform. Accepted,
   documented trade-off: the quick-view modal's product-name heading (also
   h2.mr-display) renders uppercase while the PDP's own h1 stays mixed-case. */
body.ct-theme h2.mr-display {
    text-transform: uppercase;
}

body.ct-theme .mr-eyebrow,
body.ct-theme .ct-eyebrow {
    font-family: var(--ct-font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ct-cyan);
}

body.ct-theme a {
    color: var(--ct-ink);
}

body.ct-theme a:hover {
    color: var(--ct-cyan);
}

/* A quiet tracked keyline link ("View All Products") */
body.ct-theme .ct-keyline-link {
    font-family: var(--ct-font-body);
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ct-cyan);
    text-decoration: none;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid rgba(var(--ct-cyan-rgb), 0.55);
    transition: border-color 0.25s ease, color 0.25s ease;
}

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

/* --------------------------------------------------------------------------
   Buttons & form controls
   -------------------------------------------------------------------------- */
body.ct-theme .mr-btn,
body.ct-theme .ct-btn {
    font-family: var(--ct-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    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, box-shadow 0.25s ease;
}

/* White-on-violet measures 4.35:1 (fails AA-normal 4.5) — see the header
   contrast note. Pure black clears it at 4.83:1. */
body.ct-theme .mr-btn--primary,
body.ct-theme .btn-primary {
    background-color: var(--ct-violet);
    border-color: var(--ct-violet);
    color: var(--ct-ink-on-fill);
}

body.ct-theme .mr-btn--primary:hover,
body.ct-theme .mr-btn--primary:focus,
body.ct-theme .btn-primary:hover,
body.ct-theme .btn-primary:focus,
body.ct-theme .btn-primary:active {
    background-color: var(--ct-violet);
    border-color: var(--ct-violet);
    color: var(--ct-ink-on-fill);
    filter: none;
    box-shadow: 0 0 20px rgba(var(--ct-violet-rgb), 0.45);
}

/* Ghost button ("Explore Audio") — cyan keyline, cyan text, a faint cyan
   wash on hover (matches the export's hover:bg-secondary/10). Dark ink on a
   cyan FILL clears 10.26:1 (see the header note) whenever a ghost/on-dark
   button fills solid on hover. */
body.ct-theme .mr-btn--outline,
body.ct-theme .ct-btn {
    background-color: transparent;
    border-color: var(--ct-cyan);
    color: var(--ct-cyan);
}

body.ct-theme .mr-btn--outline:hover,
body.ct-theme .ct-btn:hover {
    background-color: rgba(var(--ct-cyan-rgb), 0.12);
    color: var(--ct-cyan);
}

body.ct-theme .mr-btn--on-dark {
    background-color: transparent;
    border-color: var(--ct-cyan);
    color: var(--ct-cyan);
}

body.ct-theme .mr-btn--on-dark:hover {
    background-color: var(--ct-cyan);
    color: var(--ct-ink-on-fill);
}

body.ct-theme .mr-btn--light {
    background-color: var(--ct-ink);
    color: var(--ct-canvas);
}

body.ct-theme .mr-btn--light:hover {
    background-color: var(--ct-cyan);
    color: var(--ct-ink-on-fill);
}

/* DESIGN.md: "Input Fields darker than the surface colour, bottom-only 2px
   border that turns Cyan Glow on focus." */
body.ct-theme .form-control,
body.ct-theme .form-select {
    background-color: var(--ct-field-bg);
    border: 1px solid transparent;
    border-bottom: 2px solid var(--ct-line-strong);
    color: var(--ct-ink);
}

/* Bootstrap's caret is a background-image with a hard-coded dark stroke
   (#343a40) — invisible on this near-black field. Re-draw it in ink. */
body.ct-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='%23e6e0ee' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

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

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

body.ct-theme .dropdown-menu {
    background-color: var(--ct-surface);
    border: 1px solid var(--ct-line);
}

body.ct-theme .dropdown-item {
    color: var(--ct-ink);
}

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

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

body.ct-theme .btn-close {
    filter: invert(1) grayscale(1) brightness(1.6);
}

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

/* --------------------------------------------------------------------------
   Announcement band + header
   -------------------------------------------------------------------------- */
body.ct-theme .mr-announce {
    background-color: var(--ct-surface-low);
    color: var(--ct-cyan);
    border-bottom: 1px solid var(--ct-line-strong);
}

body.ct-theme .mr-announce a {
    color: var(--ct-ink);
}

body.ct-theme .mr-header {
    background-color: rgba(15, 13, 22, 0.92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--ct-line-strong);
}

/* `.mr-logo` deliberately keeps the base's `color: var(--bs-primary)` (the
   export's own wordmark is violet, "text-primary"): at clamp(1.6rem,2.4vw,
   2.1rem) it qualifies as WCAG large text (>= 18.66px), where 4.27:1 clears
   the 3:1 large-text floor. `.mr-icon-btn` (violet SVG strokes) is a
   non-text UI component (3:1 floor), also clear at 4.27:1 — no override
   needed for either. Only the hover states below needed a text-safe swap. */
body.ct-theme .mr-nav-link:hover {
    color: var(--ct-cyan);
}

body.ct-theme .mr-search input {
    background-color: var(--ct-field-bg);
    border: 0;
    border-bottom: 2px solid var(--ct-line-strong);
    color: var(--ct-ink);
}

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

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

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

/* Cart-count bubble: base fills it with --bs-primary + hard-codes #fff text
   (4.35:1, fails). Same dark-ink-on-violet fix as the buttons above. */
body.ct-theme .mr-badge {
    color: var(--ct-ink-on-fill);
}

/* --------------------------------------------------------------------------
   Hero (inherited markup — full-bleed image + overlay + copy). The overlay
   is RE-TINTED in carbon-black, never removed — it is the only thing
   keeping the ink <h1> readable over an arbitrary merchant photo.
   -------------------------------------------------------------------------- */
body.ct-theme .mr-hero__overlay {
    background: linear-gradient(90deg, rgba(15, 13, 22, 0.88) 0%, rgba(15, 13, 22, 0.5) 46%, rgba(15, 13, 22, 0.12) 100%);
}

body.ct-theme .mr-hero__copy h1,
body.ct-theme .mr-hero__copy .mr-display {
    color: var(--ct-ink);
    text-transform: uppercase;
}

/* Base hardcodes the hero eyebrow to #fff; the export's hero eyebrow
   ("SERIES V LAUNCH") is cyan (text-secondary), not white. */
body.ct-theme .mr-hero .mr-hero__copy .mr-eyebrow {
    color: var(--ct-cyan);
}

/* --------------------------------------------------------------------------
   Promo tiles — dimmed photo behind a violet top-keyline, neon glow on hover
   -------------------------------------------------------------------------- */
body.ct-theme .mr-promo {
    background-color: var(--ct-surface);
    border-top: 3px solid rgba(var(--ct-violet-rgb), 0.4);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

body.ct-theme .mr-promo:hover {
    border-top-color: var(--ct-violet);
    box-shadow: 0 0 24px rgba(var(--ct-violet-rgb), 0.35);
}

body.ct-theme .mr-promo__title {
    font-family: var(--ct-font-head);
    text-transform: uppercase;
    color: var(--ct-ink);
}

body.ct-theme .mr-promo__cta {
    font-size: 0.6875rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ct-cyan);
}

/* --------------------------------------------------------------------------
   Product cards (inherited) — flat, violet-keylined media, cyan prices
   -------------------------------------------------------------------------- */
body.ct-theme .mr-card {
    background-color: transparent;
    border: 1px solid var(--ct-line);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

body.ct-theme .mr-card:hover {
    border-color: var(--ct-line-strong);
    box-shadow: 0 0 15px rgba(var(--ct-violet-rgb), 0.3);
}

body.ct-theme .mr-card__media {
    background-color: var(--ct-surface);
    border-bottom: 1px solid var(--ct-line);
}

body.ct-theme .mr-card__title {
    font-family: var(--ct-font-head);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ct-ink);
}

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

body.ct-theme .mr-card__eyebrow {
    color: var(--ct-soft);
}

/* DESIGN.md: "Prices must always be rendered in Inter Bold." Raw violet
   measures 4.27:1 as text (fails AA-normal) — cyan measures 10.26:1, so
   price text (both regular and on-sale — this override wins over the shared
   .ll-price--sale red via selector specificity) reads cyan instead of the
   export's literal text-primary. */
body.ct-theme .mr-card__price,
body.ct-theme .ll-price {
    font-family: var(--ct-font-body);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ct-cyan);
}

body.ct-theme .mr-card__price del,
body.ct-theme .mr-card__price s {
    color: var(--ct-soft);
}

/* Sale badge — DESIGN.md's literal error/on-error pair (a red flag, kept
   distinct from the violet/cyan brand colours); rectangular per DESIGN.md
   "Chips/Badges" (flattened above, beating the shared 999px pill default).
   Measured: #690005 on #ffb4ab = 7.72:1. */
body.ct-theme .mr-card__badge {
    background: #ffb4ab;
    color: #690005;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* The slide-up "Add to Cart" button. */
body.ct-theme .mr-card__quick {
    background-color: rgba(15, 13, 22, 0.92);
    color: var(--ct-ink);
    border-top: 1px solid var(--ct-line-strong);
}

body.ct-theme .mr-card__quick:hover {
    background-color: var(--ct-violet);
    color: var(--ct-ink-on-fill);
}

/* The two floating icon affordances. `__wish` and `__quickview` are SIBLINGS
   with different names — restyle them together or the quick-view eye keeps
   the base's near-white circle + `color: var(--bs-primary)`, which measures
   ~4.35:1 icon-on-near-white here (passes non-text 3:1, but is inconsistent
   with the dark canvas). Default state prints ink on a dark badge (>10:1);
   hover fills violet and swaps to the dark on-fill ink (4.83:1). They stay
   circular — the 0-radius shape rule is about cards, buttons, inputs and
   image containers, not these round overlay controls. */
body.ct-theme .mr-card__wish,
body.ct-theme .mr-card__quickview {
    background-color: rgba(15, 13, 22, 0.82);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: var(--ct-ink);
    border: 1px solid var(--ct-line-strong);
}

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

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

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

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

/* --------------------------------------------------------------------------
   circuit's own home sections
   -------------------------------------------------------------------------- */
body.ct-theme .ct-featured {
    background-color: var(--ct-canvas);
}

/* .ct-arrivals also carries the base's mr-band--alt class (re-points to
   --ct-surface) for the lifted band + reuses .mr-rail/.mr-rail-btn (base
   CSS + theme.js) for the chevron-nav carousel — no new behaviour needed. */
body.ct-theme .mr-rail-btn {
    border-color: var(--ct-line-strong);
    color: var(--ct-ink);
}

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

/* Spec highlights — icon + headline + blurb columns on a lifted band. */
body.ct-theme .ct-specs__item {
    text-align: left;
}

body.ct-theme .ct-specs__icon {
    width: 40px;
    height: 40px;
    color: var(--ct-cyan);
    margin-bottom: 0.75rem;
    display: block;
}

body.ct-theme .ct-specs__label {
    font-family: var(--ct-font-head);
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ct-ink);
    margin-bottom: 0.4rem;
}

body.ct-theme .ct-specs__text {
    color: var(--ct-muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

/* Sale banner — violet-to-cyan gradient, a faint diagonal grid texture (CSS
   only, no image asset), and a dark "cut-out" button that reads consistently
   over either gradient stop. Measured: ink #14121b on violet #7c5cff =
   4.27:1, on cyan #2fd4e0 = 10.26:1 — both comfortably clear the 3:1
   large-text floor these headings sit at (clamp(...) well above 18.66px);
   the button text below uses the same dark ink at its OWN background
   (--ct-ink, not the gradient), so it is unaffected either way. */
body.ct-theme .ct-sale__band {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: clamp(2rem, 4vw, 3.5rem);
    background: linear-gradient(90deg, var(--ct-violet), var(--ct-cyan));
    overflow: hidden;
}

body.ct-theme .ct-sale__band::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.15;
    background-image: repeating-linear-gradient(45deg, rgba(20, 18, 27, 0.4) 0 2px, transparent 2px 26px);
    pointer-events: none;
}

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

body.ct-theme .ct-sale__title {
    font-family: var(--ct-font-head);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    text-transform: uppercase;
    color: #14121b;
}

body.ct-theme .ct-sale__body {
    font-family: var(--ct-font-body);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    /* Solid near-black, not a .78 alpha — this normal-size (0.95rem) line sits
       over the violet end of the gradient, where the translucent version
       composited to 3.36:1 (fails AA). #000 on #7c5cff = 4.83:1. */
    color: var(--ct-ink-on-fill);
}

body.ct-theme .ct-sale__btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    background-color: var(--ct-canvas);
    color: var(--ct-ink);
    font-family: var(--ct-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 1rem 2.25rem;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

body.ct-theme .ct-sale__btn:hover {
    background-color: var(--ct-surface-low);
    color: var(--ct-cyan);
}

/* Newsletter ("Get Patch Notes") — centered heading, underline email input,
   violet Subscribe button. */
body.ct-theme .ct-cta {
    background-color: var(--ct-surface-highest);
    border-top: 1px solid var(--ct-line-strong);
    padding: 6rem 0;
}

body.ct-theme .ct-cta__title {
    color: var(--ct-ink);
}

body.ct-theme .ct-cta__body {
    color: var(--ct-muted);
    max-width: 34rem;
    font-size: 1.05rem;
}

body.ct-theme .ct-cta__form {
    display: flex;
    align-items: stretch;
    max-width: 32rem;
    border: 1px solid var(--ct-line-strong);
}

body.ct-theme .ct-cta__form input {
    flex: 1 1 auto;
    background: var(--ct-field-bg);
    border: 0;
    color: var(--ct-ink);
    padding: 1rem 1.25rem;
    font-size: 0.92rem;
}

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

body.ct-theme .ct-cta__form input:focus {
    outline: none;
}

body.ct-theme .ct-cta__btn {
    background-color: var(--ct-violet);
    color: var(--ct-ink-on-fill);
    border: 0;
    padding: 1rem 2.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

body.ct-theme .ct-cta__btn:disabled {
    opacity: 0.75;
    cursor: not-allowed;
}

body.ct-theme .ct-cta__note {
    /* --ct-muted (7.28:1), not --ct-soft (3.90:1 on this lightest band). */
    color: var(--ct-muted);
    font-size: 0.8rem;
}

/* --------------------------------------------------------------------------
   Inherited component finishing — categories, journal, footer, tables,
   pagination/account/checkout "is-active" fill states.
   -------------------------------------------------------------------------- */
body.ct-theme .mr-tile--cat {
    border: 1px solid var(--ct-line);
}

body.ct-theme .mr-article__media {
    border: 1px solid var(--ct-line);
}

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

body.ct-theme .mr-footer__brand,
body.ct-theme .mr-footer h2,
body.ct-theme .mr-footer h3,
body.ct-theme .mr-footer h4 {
    font-family: var(--ct-font-head);
    color: var(--ct-ink);
}

body.ct-theme .mr-ulink,
body.ct-theme .mr-footer a {
    color: var(--ct-muted);
    text-decoration: none;
}

body.ct-theme .mr-ulink:hover,
body.ct-theme .mr-footer a:hover {
    color: var(--ct-cyan);
}

/* `.mr-social` IS the anchor in modern-retail/partials/footer.blade.php —
   its hover fills --bs-primary (violet) and hard-codes #fff text (4.35:1,
   fails). Same dark-ink-on-violet fix as the buttons above. */
body.ct-theme .mr-social {
    border: 1px solid var(--ct-line);
    color: var(--ct-ink);
}

body.ct-theme .mr-social:hover {
    background-color: var(--ct-violet);
    border-color: var(--ct-violet);
    color: var(--ct-ink-on-fill);
}

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

/* Remaining base rules that print violet TEXT on the canvas (4.27:1, fails
   AA-normal) — swapped to cyan (10.26:1), matching the "violet is never
   standalone text" rule established above. Their violet BORDERS are left
   alone (non-text 3:1 floor, already clear). */
body.ct-theme .mr-filter__link.is-active,
body.ct-theme .mr-tabs .nav-link.active,
body.ct-theme .mr-acct-link:hover,
body.ct-theme .mr-step.is-current .mr-step__dot {
    color: var(--ct-cyan);
}

/* Remaining base rules that FILL with --bs-primary (violet) and hard-code
   #fff text on top (4.35:1, fails) — same dark-ink-on-violet fix as the
   buttons/badge/social above. */
body.ct-theme .mr-page.is-active,
body.ct-theme .mr-step.is-done .mr-step__dot,
body.ct-theme .mr-acct-link.is-active,
body.ct-theme .mr-acct-avatar {
    color: var(--ct-ink-on-fill);
}

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

    body.ct-theme .mr-card:hover .mr-card__media img,
    body.ct-theme .mr-tile:hover .mr-tile__img,
    body.ct-theme .mr-tile--cat .mr-tile__media img,
    body.ct-theme .mr-promo:hover .mr-promo__img,
    body.ct-theme .mr-article__media:hover img {
        transform: none !important;
        box-shadow: none !important;
    }
}

@media (max-width: 991.98px) {
    body.ct-theme .mr-header__bar {
        min-height: 64px;
    }

    body.ct-theme .mr-display {
        letter-spacing: 0.01em;
    }

    body.ct-theme .ct-sale__band {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    body.ct-theme .ct-cta {
        padding: 4rem 0;
    }

    body.ct-theme .ct-cta__form {
        flex-direction: column;
        border: 0;
        gap: 0.75rem;
    }

    body.ct-theme .ct-cta__form input {
        border: 1px solid var(--ct-line-strong);
    }
}