/* ==========================================================================
   iron-fuel — "Industrial Minimalism" brand layer over modern-retail.

   Ported from the Google Stitch export
   (docs/templates/pending/stitch_40_ironfuel_e_commerce_homepage — the
   "IronFuel" DESIGN.md is the design-system source). The design system: a
   jet-black canvas (#121417) with slightly lifted matte surfaces for depth,
   Iron Red (#e03131) reserved for high-priority CTAs / active states /
   critical price highlights, Steel Grey (#9aa1a9) for metadata and dividers,
   uppercase Poppins Bold headlines with tight tracking, a heavy Inter "Rs."
   price display, a global 4px corner radius ("barely rounded… without losing
   its iron edge") and ZERO soft shadows — depth comes from tonal layering,
   1px red keylines and hard edges.

   This stylesheet has two jobs:
     (a) style iron-fuel's OWN sections (if-* — stack staples band, the
         label-transparency claims band, the new-arrivals rack, journal and
         the solid-red newsletter band);
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
         base neutral tokens at the jet-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.if-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 measured with App\Support\Theming\
   ContrastChecker against this palette):
     - #ffffff on an Iron Red #e03131 FILL = 4.51: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.
     - Iron Red #e03131 as small TEXT on the #121417 canvas is only 4.09:1
       (3.73:1 for the shared .ll-price--sale red #d6293e), i.e. below
       AA-normal for the 12px eyebrows / promo captions / journal labels the
       export prints in red. Those roles therefore use --if-red-ink #ef4444 —
       one perceptual step brighter, measured 4.90:1 on the canvas and 5.11:1
       on the deepest band. Iron Red itself is still used verbatim for FILLS
       and for the bold >=1.25rem price display (4.26:1 on the band, clearing
       the 3:1 large-text floor).
     - Ink #e1e3e4 on the canvas = 14.33:1, on the lifted card surface
       #1a1d21 = 13.14:1. Steel Grey #9aa1a9 body copy = 7.07:1. The warm
       nav/trust label #e5bdb9 = 10.82:1. The accent tint #ffb3ac = 10.80:1.
     - On the solid-red newsletter band every label is SOLID white. The
       export uses text-white/80 there, but 80% white composites to #f9d6d6 =
       3.36:1 (and even 92% only reaches 4.03:1), so the alpha is dropped —
       the one deliberate deviation from the export's own values in this file.
   ========================================================================== */

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

    /* Jet-Black palette (DESIGN.md prose canvas/card literals + 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). */
    --if-canvas: #121417;          /* DESIGN.md "Jet-Black Canvas" */
    --if-surface-lowest: #0c0f10;  /* surface-container-lowest — trust strip, featured band, footer */
    --if-surface-low: #191c1d;     /* surface-container-low — quiet bands, modal, cards */
    --if-surface: #1a1d21;         /* DESIGN.md "Surface Layering" — card + tile media */
    --if-surface-high: #282a2b;    /* surface-container-high — dropdown hover, fills */
    --if-surface-highest: #323536; /* surface-container-highest — thumbs, rails */
    --if-field-bg: #0c0f10;        /* DESIGN.md "Input Fields: deep black fill" */
    --if-ink: #e1e3e4;             /* on-surface — primary text */
    --if-muted: #c0c7cf;           /* secondary — supporting text */
    --if-soft: #9aa1a9;            /* DESIGN.md "Steel Grey" — metadata, placeholders */
    --if-warm: #e5bdb9;            /* on-surface-variant — nav / trust micro-labels */

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

    /* Structure — the export frames chrome with the warm outline-variant
       hairline, cards/dividers with a translucent steel rule, and marks
       active/hover state with a 1px Iron Red keyline ("Red Keylines"). */
    --if-line: #5c403d;
    --if-line-steel: rgba(154, 161, 169, 0.22);
    --if-line-strong: var(--if-red);

    /* Re-point the inherited base neutrals at the jet-black 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(--if-ink);
    --mr-muted: var(--if-muted);
    --mr-soft: var(--if-soft);
    --mr-surface: var(--if-canvas);
    --mr-band: var(--if-surface-low);
    --mr-band-alt: var(--if-surface-lowest);
    --mr-fill: var(--if-surface-high);
    --mr-border: var(--if-line-steel);
    --mr-border-strong: var(--if-line-strong);
    --mr-radius: 0.25rem;
    --mr-gold: var(--if-red);
    --mr-shadow: none;

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

/* --------------------------------------------------------------------------
   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 #e1e3e4 on --if-surface-low #191c1d
   measures 13.31:1 — clears AA widely.
   -------------------------------------------------------------------------- */
body.if-theme {
    --bs-body-bg: var(--if-canvas);
    --bs-body-color: var(--if-ink);
    --bs-modal-bg: var(--if-surface-low);
    --bs-modal-color: var(--if-ink);
    --bs-card-bg: var(--if-surface-low);
    --bs-card-color: var(--if-ink);
    --bs-secondary-bg: var(--if-surface-high);
    --bs-tertiary-bg: var(--if-surface-low);
    --bs-emphasis-color: var(--if-ink);
    --bs-border-color: var(--if-line-steel);
    /* .bg-light reads --bs-light-rgb — #191c1d (--if-surface-low) as r,g,b. */
    --bs-light-rgb: 25, 28, 29;

    /* Bare prose links. storefront::head.theme-vars pipes primary_color into
       --bs-link-color, i.e. Iron Red at 4.09:1 on this canvas. Re-point the
       Bootstrap link tokens at the accent tint (10.80:1) instead of adding a
       bare `body.if-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, 179, 172;
    --bs-link-hover-color-rgb: 225, 227, 228;
}

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

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

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

/* Form VALIDATION colours. Bootstrap's stock validation palette is tuned for
   a white page: `--bs-form-invalid-color` #dc3545 measures 4.08:1 on this
   canvas and 3.79:1 on a lifted .mr-panel — 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.87:1 / 10.10:1); the valid pair is the same lightness
   step in green (10.87:1 / 10.10:1). Measured, like every ratio in this file. */
body.if-theme {
    --if-error: #ffb4ab;
    --if-valid: #8fd6ab;
    --bs-form-invalid-color: var(--if-error);
    --bs-form-invalid-border-color: var(--if-error);
    --bs-form-valid-color: var(--if-valid);
    --bs-form-valid-border-color: var(--if-valid);
    --bs-danger-text-emphasis: var(--if-error);
    --bs-success-text-emphasis: var(--if-valid);
}

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

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

/* The shared price component's sale colour is a hard-coded #d6293e (3.73:1 on
   this canvas). Re-point it to the measured red ink so struck-through sale
   pricing stays legible on every dark page. */
body.if-theme .ll-price--sale {
    color: var(--if-red-ink);
}

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

/* --------------------------------------------------------------------------
   Shape discipline — DESIGN.md: a global 4px radius on buttons, cards and
   inputs, and NO drop shadows (depth = tonal layers + 1px keylines).
   -------------------------------------------------------------------------- */
body.if-theme .mr-card,
body.if-theme .mr-card__media,
body.if-theme .mr-promo,
body.if-theme .mr-tile,
body.if-theme .mr-article__media,
body.if-theme .mr-panel,
body.if-theme .mr-acct-nav,
body.if-theme .dropdown-menu,
body.if-theme .modal-content {
    box-shadow: none !important;
    border-radius: 0.25rem;
}

body.if-theme .mr-card__badge,
body.if-theme .mr-sale-tag,
body.if-theme .mr-badge {
    /* DESIGN.md "Chips/Tags: Small, rectangular" — beats the 999px pill the
       shared theme-vars stylesheet gives badges. */
    border-radius: 2px !important;
}

/* --------------------------------------------------------------------------
   Typography — Poppins Bold, ALWAYS uppercase, tight tracking (the export
   renders every h1/h2/h3/h4 with `uppercase` + `tracking-tight(er)`, product
   and category titles included, so unlike torqueworks/circuit there is no
   need to spare h1); Inter for body copy, UI labels and prices.

   Note DESIGN.md's YAML asks for letter-spacing 0.02em on headlines while the
   exported markup overrides every headline with tracking-tight/tighter. The
   render wins (gotchas: "DESIGN.md YAML palette != what the buttons use").
   -------------------------------------------------------------------------- */
body.if-theme h1,
body.if-theme h2,
body.if-theme h3,
body.if-theme h4,
body.if-theme h5,
body.if-theme h6,
body.if-theme .mr-display,
body.if-theme .mr-headline,
body.if-theme .mr-logo {
    font-family: var(--if-font-head);
    font-weight: 700;
    color: var(--if-ink);
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

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

/* Small tracked Iron Red micro-labels — hero eyebrow, promo captions, journal
   category chips, section eyebrows. Uses the measured red ink (4.91:1) rather
   than the raw token (4.09:1) because these are 12px. */
body.if-theme .mr-eyebrow,
body.if-theme .if-eyebrow {
    font-family: var(--if-font-body);
    /* DESIGN.md label-caps: Inter 600 / 12px / 0.05em uppercase — the export's
       hero eyebrow widens that to 0.3em. */
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--if-red-ink);
}

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

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

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

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

/* --------------------------------------------------------------------------
   Buttons & form controls — DESIGN.md "Primary buttons are solid Iron Red
   with Uppercase Poppins Bold white text. Secondary buttons are Ghost-style
   with a 1px Steel Grey border."
   -------------------------------------------------------------------------- */
body.if-theme .mr-btn,
body.if-theme .if-btn {
    font-family: var(--if-font-body);
    font-size: 0.75rem;
    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.if-theme .mr-btn--primary,
body.if-theme .btn-primary {
    background-color: var(--if-red);
    border-color: var(--if-red);
    color: var(--if-ink-on-red);
}

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

/* Ghost / on-dark secondary ("SEE LAB REPORTS") — 1px Steel Grey keyline,
   white label, border brightening to white on hover (export
   `border-steel-grey hover:border-white text-white`). */
body.if-theme .mr-btn--outline,
body.if-theme .mr-btn--on-dark,
body.if-theme .if-btn {
    background-color: transparent;
    border-color: var(--if-soft);
    color: #ffffff;
}

body.if-theme .mr-btn--outline:hover,
body.if-theme .mr-btn--on-dark:hover,
body.if-theme .if-btn:hover {
    background-color: transparent;
    border-color: #ffffff;
    color: #ffffff;
}

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

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

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

/* DESIGN.md "Input Fields: Deep black fill… Upon focus, the border becomes
   Iron Red" (rendered as a full 1px keyline rather than bottom-only so the
   inherited Bootstrap form controls stay coherent). */
body.if-theme .form-control,
body.if-theme .form-select {
    background-color: var(--if-field-bg);
    border: 1px solid rgba(154, 161, 169, 0.35);
    color: var(--if-ink);
}

/* Bootstrap draws the select caret as a background-image whose stroke is
   hard-coded #343a40 — 1.67:1 on this near-black field, i.e. invisible.
   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.if-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='%23e1e3e4' 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.if-theme .form-control::placeholder {
    color: var(--if-soft);
}

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

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

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

body.if-theme .form-check-input {
    background-color: var(--if-field-bg);
    border-color: rgba(154, 161, 169, 0.45);
}

body.if-theme .form-check-input:checked {
    background-color: var(--if-red);
    border-color: var(--if-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.if-theme .dropdown-menu {
    background-color: var(--if-surface);
    border: 1px solid var(--if-line);
}

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

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

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

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

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

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

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

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

/* --------------------------------------------------------------------------
   Announcement band + header — DESIGN.md/export: both sit on the jet-black
   canvas divided by the warm outline hairline, the announce line in tracked
   Steel Grey micro-caps.
   -------------------------------------------------------------------------- */
body.if-theme .mr-announce {
    background-color: var(--if-canvas);
    color: var(--if-soft);
    border-bottom: 1px solid var(--if-line);
    font-family: var(--if-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

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

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

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

/* Export nav: 12px Inter 600 uppercase in the warm variant ink, the current
   item switching to the accent tint with a 2px underline (the base already
   wires .is-active to --ll-accent, which IS the tint here). */
body.if-theme .mr-nav-link {
    font-family: var(--if-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--if-warm);
}

body.if-theme .mr-nav-link:hover {
    color: var(--if-tint);
}

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

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

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

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

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

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

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

/* --------------------------------------------------------------------------
   Hero (inherited markup — full-bleed photo + overlay + copy). The overlay is
   RE-TINTED in jet-black, never removed: it is the only thing keeping the
   white <h1> readable over an arbitrary merchant photo. The export layers a
   brightness-50 image under a left-to-right background gradient, which this
   reproduces.
   -------------------------------------------------------------------------- */
body.if-theme .mr-hero {
    background-color: var(--if-canvas);
}

body.if-theme .mr-hero__overlay {
    background: linear-gradient(90deg, rgba(18, 20, 23, 0.9) 0%, rgba(18, 20, 23, 0.62) 46%, rgba(18, 20, 23, 0.3) 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 Iron Red at
   0.3em tracking. */
body.if-theme .mr-hero .mr-hero__copy .mr-eyebrow {
    color: var(--if-red-ink);
    letter-spacing: 0.3em;
}

body.if-theme .mr-hero .mr-hero__copy h1 {
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: -0.04em; /* export: tracking-tighter */
    line-height: 1;
    font-size: clamp(2.25rem, 5vw, 3.5rem);
}

/* --------------------------------------------------------------------------
   Trust strip (inherited) — the export's single row of four Steel Grey icons
   beside tracked uppercase micro-labels, on the deepest band under a hairline.
   -------------------------------------------------------------------------- */
body.if-theme .mr-trust svg {
    color: var(--if-soft);
    width: 22px;
    height: 22px;
}

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

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

/* --------------------------------------------------------------------------
   Promo tiles — the export's three SQUARE photo tiles behind a bottom-up
   jet-black gradient, each framed by a 1px Iron Red keyline (its
   `red-keyline` utility), with an uppercase Poppins title over a small red
   caption that carries a trailing arrow.
   -------------------------------------------------------------------------- */
body.if-theme .mr-promo {
    aspect-ratio: 1 / 1;
    background-color: var(--if-surface);
    border: 1px solid var(--if-red);
}

body.if-theme .mr-promo__scrim {
    background: linear-gradient(0deg, rgba(18, 20, 23, 0.92) 0%, rgba(18, 20, 23, 0.45) 45%, rgba(18, 20, 23, 0) 100%);
}

body.if-theme .mr-promo:hover .mr-promo__scrim {
    background: linear-gradient(0deg, rgba(18, 20, 23, 0.96) 0%, rgba(18, 20, 23, 0.55) 50%, rgba(18, 20, 23, 0.08) 100%);
}

body.if-theme .mr-promo__cap {
    left: 1.5rem;
    right: 1.5rem;
    bottom: 1.5rem;
}

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

/* The trailing "→" is decorative theme identity (the export bakes it into
   every caption), so it lives here rather than in the merchant's copy. */
body.if-theme .mr-promo__cta {
    font-family: var(--if-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--if-red-ink);
    border-bottom: 0;
    padding-bottom: 0;
}

body.if-theme .mr-promo__cta::after {
    content: " \2192";
}

/* 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, or the caption flips to the pale accent on hover. */
body.if-theme .mr-promo:hover .mr-promo__cta {
    color: #ffffff;
    border-color: transparent;
}

/* --------------------------------------------------------------------------
   Product cards (inherited). The export frames the MEDIA — not the whole card
   — with a keyline over a matte #1a1d21 fill, prints the name in bold
   uppercase Inter and the price as a heavy Iron Red display line. Because the
   card itself keeps no border or background, its text needs no inset
   (see gotchas "A bordered / filled .mr-card must inset its own text").
   -------------------------------------------------------------------------- */
body.if-theme .mr-card {
    background-color: transparent;
    border: 0;
}

body.if-theme .mr-card__media {
    /* DESIGN.md: "Cards: Matte-black background (#1A1D21) with a 1px border
       that is either Steel Grey (default) or Iron Red (hover/active)." */
    aspect-ratio: 4 / 5;
    background-color: var(--if-surface);
    border: 1px solid var(--if-line-steel);
    transition: border-color 0.3s ease;
}

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

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

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

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

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

/* DESIGN.md price-display: Inter Bold 24px, tight tracking, highlighted in
   Iron Red. Kept at >=1.25rem/700 so the 4.26:1 ratio on the band clears the
   WCAG large-text floor. */
body.if-theme .mr-card__price,
body.if-theme .mr-card__price .ll-price {
    font-family: var(--if-font-body);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--if-red);
}

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

/* A sale price inside a card would otherwise inherit the raw token from the
   rule above (0,0,3,1 beats the generic .ll-price--sale re-point) — keep the
   measured red ink so it matches every other sale price on the storefront. */
body.if-theme .mr-card__price .ll-price--sale {
    color: var(--if-red-ink);
}

/* 'SALE' / '-x%' badge — a rectangular Iron Red chip with a white label
   (4.51:1), exactly as the export prints it. */
body.if-theme .mr-card__badge {
    background-color: var(--if-red);
    color: var(--if-ink-on-red);
    font-family: var(--if-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 Iron Red quick-add
   with a white uppercase label. */
body.if-theme .mr-card__quick {
    background-color: var(--if-red);
    color: var(--if-ink-on-red);
    font-family: var(--if-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding-block: 0.9rem;
}

body.if-theme .mr-card__quick:hover {
    background-color: #b91c1c;
    color: var(--if-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, which is unreadable on this canvas. Default
   prints ink on a jet-black badge (14.09:1); hover fills Iron Red with a
   white glyph (4.51:1). They stay circular platform-wide. */
body.if-theme .mr-card__wish,
body.if-theme .mr-card__quickview {
    background-color: rgba(12, 15, 16, 0.82);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: var(--if-ink);
    border: 1px solid var(--if-line-steel);
    border-radius: 9999px !important;
}

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

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

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

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

/* --------------------------------------------------------------------------
   Category tiles (inherited) — the export's four dimmed gym photographs with
   a centered uppercase name, the scrim washing Iron Red on hover.
   -------------------------------------------------------------------------- */
body.if-theme .mr-tile--cat {
    height: 300px; /* export: h-[300px] */
    background-color: var(--if-surface);
    border: 1px solid var(--if-line-steel);
    transition: border-color 0.4s ease;
}

body.if-theme .mr-tile--cat .mr-tile__scrim {
    background: rgba(18, 20, 23, 0.5);
    transition: background-color 0.5s ease;
}

body.if-theme .mr-tile--cat:hover {
    border-color: var(--if-red);
}

body.if-theme .mr-tile--cat:hover .mr-tile__scrim {
    background: rgba(var(--if-red-rgb), 0.4);
}

body.if-theme .mr-tile__placeholder {
    background: linear-gradient(160deg, var(--if-surface-high), var(--if-surface-lowest));
}

body.if-theme .mr-tile__cap {
    font-family: var(--if-font-head);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   iron-fuel's own home sections
   -------------------------------------------------------------------------- */

/* "Stack Staples" — the featured grid sits on the deepest band under a
   hairline (the inherited .mr-band--alt already supplies the fill). */
body.if-theme .if-staples {
    border-block: 1px solid var(--if-line);
}

/* Label-transparency band — four columns of a thin Iron Red icon over an
   uppercase title and a Steel Grey paragraph, framed top and bottom by the
   warm hairline (export: `border-y border-outline-variant`). */
body.if-theme .if-label {
    border-bottom: 1px solid var(--if-line);
}

body.if-theme .if-label__col {
    padding-right: 1rem;
}

body.if-theme .if-label__icon {
    width: 34px;
    height: 34px;
    display: block;
    color: var(--if-red-ink);
    margin-bottom: 1rem;
}

body.if-theme .if-label__title {
    font-family: var(--if-font-head);
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--if-ink);
    margin-bottom: 0.75rem;
    line-height: 1.25;
}

body.if-theme .if-label__text {
    font-family: var(--if-font-body);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--if-soft);
}

/* Journal — media framed by the export's Iron Red keyline, uppercase titles. */
body.if-theme .if-journal__media {
    border: 1px solid var(--if-red);
}

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

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

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

/* Newsletter "THE GAINS LETTER" — the export's one saturated surface: a solid
   Iron Red band, copy left / form right, with a jet-black email field and a
   white Subscribe button that inverts to black on hover. Every label here is
   SOLID white (4.51:1): the export prints the supporting line at
   text-white/80, which composites to #f9d6d6 = 3.36:1 and fails AA-normal, so
   the alpha is deliberately dropped. */
body.if-theme .if-cta {
    background-color: var(--if-red);
    padding-block: clamp(48px, 7vw, 72px);
}

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

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

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

body.if-theme .if-cta__title {
    color: #ffffff;
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: -0.04em;
    line-height: 1;
}

body.if-theme .if-cta__body {
    font-family: var(--if-font-body);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #ffffff;
    margin-top: 0.75rem;
    max-width: 44ch;
}

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

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

body.if-theme .if-cta__form input {
    background-color: var(--if-canvas);
    border: 0;
    border-radius: 0.25rem;
    color: #ffffff;
    padding: 1rem 1.5rem;
    width: 20rem;
    max-width: 100%;
    font-family: var(--if-font-body);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

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

body.if-theme .if-cta__form input:focus {
    outline: 2px solid #ffffff;
    outline-offset: 1px;
}

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

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

body.if-theme .if-cta__btn:disabled {
    opacity: 0.85;
    cursor: not-allowed;
}

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

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

body.if-theme .mr-footer {
    background-color: var(--if-surface-lowest);
    border-top: 2px solid var(--if-line);
    color: var(--if-warm);
}

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

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

body.if-theme .mr-footer p {
    color: var(--if-warm);
}

body.if-theme .mr-footer a {
    color: var(--if-warm);
}

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

/* `.mr-social` IS the anchor in the base footer partial — 40px hairline
   squares that fill with the accent tint on hover (the guard block above
   re-inks the glyph to jet-black). */
body.if-theme .mr-social {
    width: 40px;
    height: 40px;
    border: 1px solid var(--if-line);
    border-radius: 0.25rem;
    color: var(--if-ink);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Export mobile frame (ironfuel_homepage_mobile): a 64px bar, a 24px 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.if-theme .mr-header__bar {
        min-height: 64px;
    }

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

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

    body.if-theme .mr-tile--cat {
        height: 220px;
    }

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

    body.if-theme .if-cta__form {
        flex-direction: column;
    }

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