/* ==========================================================================
   sole-stack — "Clean Hype-Culture Sneaker Editorial" brand layer over
   modern-retail.

   Ported from the Google Stitch export
   (docs/templates/pending/stitch_45_solestack_e_commerce_homepage — the
   "SoleStack Narrative" DESIGN.md is the design-system source). The design
   system: a warm Bone White gallery canvas (#F2F0EB) punctuated by full-bleed
   Jet Black bands (announce, trust, on-foot, newsletter, footer); Hype Orange
   (#FF4D29) reserved for drops, badges, CTAs and price highlights; NO shadows,
   blurs or gradients — hierarchy comes from colour blocking plus 1px Jet Black
   outlines ("High-Contrast Outlines"); strictly SHARP 0px corners; oversized
   Poppins 700 headlines, uppercase with tight tracking, italic on the display
   tier ("blocked visual effect").

   This stylesheet has two jobs:
     (a) style sole-stack's OWN sections (sl-* — promo tiles, featured, on-foot,
         pickups, category band, journal, newsletter);
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the base
         neutral tokens at the bone/jet palette and drawing the hairline
         structure. This is the only reason shop / PDP / cart / checkout /
         account / blog pick up the design without a single page override.

   Everything is scoped under `body.sl-theme` and reads the 5 customizer tokens
   (--bs-primary, --bs-primary-rgb, --ll-accent, --ll-font-headings,
   --ll-font-body, --bs-border-radius) with theme.json-default fallbacks, so the
   customizer + live preview keep working: change the primary colour and every
   orange surface follows.

   Contrast decisions (WCAG ratios computed against this palette):
     - primary_color IS the Hype Orange — the export's own CTA fill. White on
       it is only ~3.3:1, so every base rule that fills with --bs-primary and
       hardcodes #fff text is RE-INKED to Jet Black (~5.6:1) in the
       light-primary guard block below. That is the export's own component
       rule: "CTA/Add to Cart buttons are Hype Orange with Jet Black text."
       See gotchas "A LIGHT primary_color breaks ~12 inherited base rules".
     - Hype Orange as TEXT on the bone canvas is only ~2.9:1, so every orange
       TEXT role (eyebrows, keyline links, sale prices, orange links) uses
       --sl-orange-ink instead: a 72%-darkened mix of the live primary
       (~5.2:1 on bone, ~5.9:1 for the shipped default). Raw Hype Orange as
       text is used ONLY on the Jet Black bands, where it measures ~5.6:1.
     - The export's #747878 "outline" grey is a BORDER value; as body text it
       is 3.9:1 on bone, so --sl-soft darkens it to #5f6263 (~5.4:1).
     - Bootstrap literals that fail on this palette are re-pointed:
       .ll-price--sale #d6293e (3.6:1) -> --sl-orange-ink; .ll-price-compare
       #9aa0a6 (2.5:1) -> --sl-soft; --bs-form-invalid-color #dc3545 (4.0:1)
       -> #a3231b (6.6:1); --bs-link-color-rgb / --bs-link-hover-color-rgb are
       set explicitly (unset, Bootstrap paints bare links its compiled blue).
   ========================================================================== */

body.sl-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --sl-orange: var(--bs-primary, #ff4d29);
    --sl-orange-rgb: var(--bs-primary-rgb, 255, 77, 41);
    --sl-font-head: var(--ll-font-headings, "Poppins"), system-ui, -apple-system, sans-serif;
    --sl-font-body: var(--ll-font-body, "Inter"), system-ui, -apple-system, sans-serif;

    /* Hype Orange darkened for TEXT roles on the bone canvas. The literal is
       the export's own DESIGN.md `secondary` (#b32000, 5.9:1); the color-mix
       below wins where supported so the role still tracks the customizer. */
    --sl-orange-ink: #b32000;
    --sl-orange-ink: color-mix(in srgb, var(--sl-orange) 72%, #000);

    /* Narrative palette (DESIGN.md prose motifs + the export's tailwind
       config). 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). */
    --sl-canvas: #f2f0eb;      /* "Bone White" — background / surface */
    --sl-ink: #141414;         /* "Jet Black" — type, panels, dark bands */
    --sl-band: #f6f3f2;        /* surface-container-low — lifted bands */
    --sl-band-alt: #f0edec;    /* surface-container — media wells, tiles */
    --sl-fill: #e5e2e1;        /* surface-variant */
    --sl-muted: #444748;       /* on-surface-variant — supporting copy (8.2:1) */
    --sl-soft: #5f6263;        /* metadata / placeholders (5.4:1) */

    /* Structure — the design rejects shadows entirely; boundaries are 1px Jet
       Black strokes. --sl-line-soft is for incidental dividers inside quiet
       areas where a full black rule would read as a section break. */
    --sl-line: var(--sl-ink);
    --sl-line-soft: rgba(20, 20, 20, 0.14);

    /* Text printed ON an orange FILL (buttons, badges, chips) and on the Jet
       Black bands. */
    --sl-ink-on-fill: #141414;
    --sl-on-dark: #ffffff;
    --sl-on-dark-muted: rgba(255, 255, 255, 0.72); /* ~9.8:1 on jet */
    --sl-on-dark-soft: rgba(255, 255, 255, 0.55);  /* ~6.1:1 on jet */
    --sl-on-dark-line: rgba(255, 255, 255, 0.18);

    /* Re-point the inherited base neutrals at the bone/jet palette so every
       inherited mr-* surface (bands, borders, fills, muted text, radii)
       follows without a single page override. */
    --mr-ink: var(--sl-ink);
    --mr-muted: var(--sl-muted);
    --mr-soft: var(--sl-soft);
    --mr-surface: var(--sl-canvas);
    --mr-band: var(--sl-band);
    --mr-band-alt: var(--sl-band-alt);
    --mr-fill: var(--sl-fill);
    --mr-border: var(--sl-line);
    --mr-border-strong: var(--sl-ink);
    --mr-radius: 0;
    --mr-gold: var(--sl-orange-ink);
    --mr-shadow: none;

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

/* --------------------------------------------------------------------------
   Bootstrap's OWN custom properties. The --mr-* re-point above covers every
   inherited mr-* surface, but Bootstrap components read Bootstrap tokens that
   nothing above touches — and two of them ship LITERALS that fail on this
   palette. The affected surfaces are all in partials themes cannot fork
   (storefront::shared/reviews, storefront::shared/product-facets, the
   quick-view modal), so re-pointing the tokens is the only fix available.
   -------------------------------------------------------------------------- */
body.sl-theme {
    --bs-body-bg: var(--sl-canvas);
    --bs-body-color: var(--sl-ink);
    --bs-emphasis-color: var(--sl-ink);
    --bs-secondary-color: var(--sl-muted);
    --bs-border-color: var(--sl-line-soft);
    --bs-modal-bg: var(--sl-canvas);
    --bs-modal-color: var(--sl-ink);
    --bs-card-bg: var(--sl-canvas);
    --bs-card-color: var(--sl-ink);
    /* Bare prose links: --bs-link-color alone does nothing (Bootstrap paints
       `a` from the RGB triplet), and --bs-link-hover-color-rgb is left at the
       compiled blue unless set. Both go to the AA-safe darkened orange / ink
       rather than a bare `body.sl-theme a { color }` catch-all, which would
       out-specify .mr-btn--primary's label and blank the hero CTA's text. */
    --bs-link-color-rgb: 179, 32, 0;
    --bs-link-hover-color-rgb: 20, 20, 20;
    /* #dc3545 is 4.0:1 on the bone canvas — below AA for validation copy. */
    --bs-form-invalid-color: #a3231b;
    --bs-form-invalid-border-color: #a3231b;
}

/* --------------------------------------------------------------------------
   Shape discipline — DESIGN.md: "Every interactive and structural element must
   have perfectly square corners." --bs-border-radius (button_radius "0") and
   --mr-radius already flatten most surfaces; this block kills the remaining
   HARD-CODED radii (badges, status pills, gallery thumbs, cart media, account
   links) and any shadow the base draws.

   NOTE the round overlay controls are deliberately EXCLUDED from the list and
   then re-asserted below: .mr-card__wish is a <button> for signed-in shoppers
   and an <a> for guests, so a flatten that swept up buttons would square the
   heart for logged-in users only.
   -------------------------------------------------------------------------- */
body.sl-theme .mr-card,
body.sl-theme .mr-card__media,
body.sl-theme .mr-card__badge,
body.sl-theme .mr-card__sale,
body.sl-theme .mr-sale-tag,
body.sl-theme .mr-status,
body.sl-theme .mr-promo,
body.sl-theme .mr-tile,
body.sl-theme .mr-article__media,
body.sl-theme .mr-gallery__main,
body.sl-theme .mr-gallery__thumb,
body.sl-theme .mr-cart-row__media,
body.sl-theme .mr-acct-link,
body.sl-theme .mr-acct-nav,
body.sl-theme .mr-panel,
body.sl-theme .mr-summary,
body.sl-theme .mr-alert,
body.sl-theme .mr-page,
body.sl-theme .mr-btn,
body.sl-theme .btn,
body.sl-theme .form-control,
body.sl-theme .form-select,
body.sl-theme .dropdown-menu,
body.sl-theme .modal-content,
body.sl-theme .offcanvas,
body.sl-theme .card,
body.sl-theme .sl-tile,
body.sl-theme .mr-social {
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* The two floating card affordances stay perfectly circular platform-wide. */
body.sl-theme .mr-card__wish,
body.sl-theme .mr-card__quickview {
    border-radius: 9999px !important;
}

/* --------------------------------------------------------------------------
   Typography — Poppins 700, uppercase with tight tracking; italic reserved
   for the DISPLAY tier the export slants (hero, MOVING FAST, STREET
   PERFORMANCE, SOLE JOURNAL, THE ROTATION). Inter carries body copy, UI
   labels and the price-display role.
   -------------------------------------------------------------------------- */
body.sl-theme h1,
body.sl-theme h2,
body.sl-theme h3,
body.sl-theme h4,
body.sl-theme h5,
body.sl-theme h6,
body.sl-theme .mr-display,
body.sl-theme .mr-headline,
body.sl-theme .mr-logo {
    font-family: var(--sl-font-head);
    font-weight: 700;
    color: var(--sl-ink);
    letter-spacing: -0.02em; /* DESIGN.md headline-lg */
}

/* DESIGN.md headline-lg: 48px / 1.1 / -0.02em. */
body.sl-theme .mr-display {
    font-size: clamp(2rem, 3.6vw, 3rem);
    line-height: 1.1;
    text-transform: uppercase;
}

/* h1.mr-display is the PDP / category page TITLE and h2.mr-display carries
   section headings plus the quick-view product name. The export uppercases
   both (sneaker names are shouted) but slants ONLY the display tier, so the
   italic lives on .sl-display / the named display classes — never on a
   product name. */
body.sl-theme .sl-display {
    font-style: italic;
}

/* "LATEST PICKUPS" is the one section heading the export leaves UPRIGHT. */
body.sl-theme .sl-pickups .sl-display {
    font-style: normal;
}

/* DESIGN.md headline-md: 24px / 1.2 / +0.02em. */
body.sl-theme .mr-headline,
body.sl-theme .mr-article__title,
body.sl-theme .sl-tile__title {
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* DESIGN.md label-caps: Inter 700 / 12px / 0.1em, uppercase. Orange eyebrows
   sit on the bone canvas by default, so they take the darkened orange ink;
   the --on-dark variant restores raw Hype Orange for the Jet Black bands. */
body.sl-theme .mr-eyebrow,
body.sl-theme .sl-eyebrow {
    display: inline-block;
    font-family: var(--sl-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sl-orange-ink);
}

body.sl-theme .sl-eyebrow--on-dark {
    color: var(--sl-orange);
}

/* A tracked keyline link ("VIEW ALL DROPS") — the export's underlined
   label-caps device. */
body.sl-theme .sl-keyline-link,
body.sl-theme .mr-ulink {
    font-family: var(--sl-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sl-ink);
    text-decoration: none;
    padding-bottom: 0.3rem;
    border-bottom: 2px solid var(--sl-ink);
    transition: color 0.25s ease, border-color 0.25s ease;
}

body.sl-theme .sl-keyline-link:hover,
body.sl-theme .mr-ulink:hover {
    color: var(--sl-orange-ink);
    border-bottom-color: var(--sl-orange-ink);
}

/* --------------------------------------------------------------------------
   Light-primary guard block — every base rule that FILLS with --bs-primary
   (Hype Orange here) and hard-codes #fff text on top (~3.3:1, fails AA), plus
   every rule that paints --bs-primary as TEXT or a hairline on the bone canvas
   (~2.9:1). Fills are re-inked with the Jet Black on-fill pair the export's
   own buttons use (~5.6:1); text roles are routed to --sl-orange-ink or to
   plain ink. See gotchas "A LIGHT primary_color breaks ~12 inherited base
   rules".
   -------------------------------------------------------------------------- */

/* (a) Orange FILLS whose label the base hard-codes to #fff. */
body.sl-theme .mr-badge,
body.sl-theme .mr-page.is-active,
body.sl-theme .mr-step.is-done .mr-step__dot,
body.sl-theme .mr-acct-avatar,
body.sl-theme .mr-acct-link.is-active,
body.sl-theme .mr-rail-btn:hover,
body.sl-theme .mr-social:hover,
body.sl-theme .bg-brand {
    color: var(--sl-ink-on-fill);
}

/* (b) Orange-as-TEXT / orange-as-hairline on the bone canvas. */
body.sl-theme .mr-nav-link:hover,
body.sl-theme .mr-page:hover,
body.sl-theme .mr-filter__link:hover,
body.sl-theme .mr-filter__link.is-active,
body.sl-theme .mr-tabs .nav-link.active,
body.sl-theme .mr-acct-link:hover,
body.sl-theme .mr-search button:hover,
body.sl-theme .mr-crumbs a:hover,
body.sl-theme .mr-cart-row__title a:hover,
body.sl-theme .mr-card__title a:hover,
body.sl-theme .mr-article__title a:hover,
body.sl-theme .mr-icon-btn:hover {
    color: var(--sl-orange-ink);
}

/* Structural strokes the base paints in primary read as ink here — DESIGN.md
   defines boundaries with Jet Black, and a 2px orange rule on bone is 2.9:1. */
body.sl-theme .mr-logo,
body.sl-theme .mr-icon-btn,
body.sl-theme .mr-btn--ghost {
    color: var(--sl-ink);
}

body.sl-theme .mr-page:hover,
body.sl-theme .mr-gallery__thumb.is-active,
body.sl-theme .mr-search input:focus {
    border-color: var(--sl-ink);
}

body.sl-theme .mr-step.is-done::before,
body.sl-theme .mr-step.is-current::before {
    background: var(--sl-ink);
}

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

body.sl-theme .mr-tabs .nav-link.active {
    border-bottom-color: var(--sl-orange);
}

/* Shared price/badge literals that fail on this palette (both live in
   storefront::head.theme-vars, which themes cannot fork). The export prints
   the sale price in orange, so it takes the AA-safe darkened orange. */
body.sl-theme .ll-price--sale {
    color: var(--sl-orange-ink);
}

body.sl-theme .ll-price-compare,
body.sl-theme .mr-card__price del,
body.sl-theme .mr-card__price s {
    color: var(--sl-soft);
}

/* --------------------------------------------------------------------------
   Buttons & form controls — DESIGN.md: "Primary buttons are Jet Black with
   Bone White text. CTA/Add to Cart buttons are Hype Orange with Jet Black
   text. No hover shadows; use a fill-to-black or fill-to-orange animation."
   The hero CTA IS the orange one, and --bs-primary is the orange, so
   .mr-btn--primary is the CTA treatment; the ghost/outline button carries the
   Jet Black keyline.
   -------------------------------------------------------------------------- */
body.sl-theme .mr-btn,
body.sl-theme .sl-cta__btn {
    font-family: var(--sl-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 1.05rem 2.5rem;
    border: 2px solid transparent;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

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

/* Export: the orange CTA fills WHITE on hover, keeping the jet label. */
body.sl-theme .mr-btn--primary:hover,
body.sl-theme .mr-btn--primary:focus,
body.sl-theme .btn-primary:hover,
body.sl-theme .btn-primary:focus,
body.sl-theme .btn-primary:active {
    background-color: var(--sl-on-dark);
    border-color: var(--sl-on-dark);
    color: var(--sl-ink-on-fill);
    filter: none;
}

/* Ghost button — 2px Jet Black keyline, inverting to a solid black fill. */
body.sl-theme .mr-btn--outline {
    background-color: transparent;
    border-color: var(--sl-ink);
    color: var(--sl-ink);
}

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

/* The hero's secondary sits on the dark photograph — white keyline, inverting
   to a bone fill with jet type. */
body.sl-theme .mr-btn--on-dark {
    border-color: var(--sl-on-dark);
    color: var(--sl-on-dark);
}

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

body.sl-theme .mr-btn--light {
    background-color: var(--sl-on-dark);
    color: var(--sl-ink);
}

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

/* DESIGN.md: "Input Fields: a full 1px black box. Placeholder text in a muted
   grey-scale version of Inter." */
body.sl-theme .form-control,
body.sl-theme .form-select {
    background-color: var(--sl-canvas);
    border: 1px solid var(--sl-ink);
    color: var(--sl-ink);
    font-size: 0.92rem;
}

/* Never a `padding` SHORTHAND here — Bootstrap reserves the right gutter for
   the caret background-image, and losing it runs the option text under the
   arrow. The caret's own stroke is dark, which is correct on this LIGHT field,
   so no --bs-form-select-bg-img override is needed. */
body.sl-theme .form-select {
    padding-inline-end: 2.25rem;
}

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

body.sl-theme .form-control:focus,
body.sl-theme .form-select:focus {
    background-color: var(--sl-canvas);
    border-color: var(--sl-orange);
    box-shadow: 0 0 0 2px rgba(var(--sl-orange-rgb), 0.35);
}

body.sl-theme .dropdown-menu {
    background-color: var(--sl-canvas);
    border: 1px solid var(--sl-ink);
}

body.sl-theme .dropdown-item {
    font-size: 0.9rem;
    color: var(--sl-muted);
}

body.sl-theme .dropdown-item:hover,
body.sl-theme .dropdown-item:focus {
    background-color: var(--sl-ink);
    color: var(--sl-on-dark);
}

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

body.sl-theme .mr-divider {
    background-color: var(--sl-line-soft);
}

/* --------------------------------------------------------------------------
   Announcement band + header — a Jet Black strip with wide-tracked label-caps
   over the bone bar, closed by a 1px Jet Black rule (export:
   `border-b border-primary`).
   -------------------------------------------------------------------------- */
body.sl-theme .mr-announce {
    background-color: var(--sl-ink);
    color: var(--sl-on-dark);
    font-family: var(--sl-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 0.7rem 1rem;
}

body.sl-theme .mr-announce a {
    color: var(--sl-orange);
}

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

body.sl-theme .mr-logo {
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

body.sl-theme .mr-nav-link {
    font-family: var(--sl-font-body);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sl-ink);
}

/* Active nav = the export's solid orange 2px underline with bold type. */
body.sl-theme .mr-nav-link.is-active {
    color: var(--sl-orange-ink);
    font-weight: 700;
    border-bottom-color: var(--sl-orange);
}

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

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

body.sl-theme .mr-search input:focus {
    background-color: var(--sl-canvas);
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   Hero (inherited markup — full-bleed image + overlay + copy). The overlay is
   RE-TINTED in jet, never removed: it is the only thing keeping the white
   headline readable over an arbitrary merchant photograph.
   -------------------------------------------------------------------------- */
body.sl-theme .mr-hero {
    background-color: var(--sl-ink);
}

body.sl-theme .mr-hero__overlay {
    background: linear-gradient(90deg, rgba(20, 20, 20, 0.7) 0%, rgba(20, 20, 20, 0.42) 46%, rgba(20, 20, 20, 0.16) 100%);
}

/* DESIGN.md display-xl: 80px / 1.0 / -0.04em, uppercase italic. */
body.sl-theme .mr-hero .mr-hero__copy h1 {
    color: var(--sl-on-dark);
    font-size: clamp(2.5rem, 5.6vw, 5rem);
    line-height: 1;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    font-style: italic;
    margin-bottom: 1.25rem;
}

/* The export's hero eyebrow ("DROP 014") is a solid orange CHIP with jet
   type, not tracked orange text. */
body.sl-theme .mr-hero .mr-hero__copy .mr-eyebrow {
    display: inline-block;
    background-color: var(--sl-orange);
    color: var(--sl-ink-on-fill);
    padding: 0.35rem 0.8rem;
    margin-bottom: 1.5rem;
    letter-spacing: 0.1em;
}

body.sl-theme .mr-hero__actions {
    gap: 1rem;
}

/* --------------------------------------------------------------------------
   Trust strip (inherited) — the export re-cuts it as a full-bleed Jet Black
   bar of orange icons beside wide-tracked micro-labels. Every colour here is
   explicit: the re-pointed neutrals are DARK, so they would vanish on jet.
   -------------------------------------------------------------------------- */
body.sl-theme .sl-trust {
    background-color: var(--sl-ink);
    border-block: 1px solid rgba(255, 255, 255, 0.14);
}

body.sl-theme .sl-trust .mr-trust {
    color: var(--sl-on-dark);
}

body.sl-theme .mr-trust svg {
    color: var(--sl-orange);
    width: 26px;
    height: 26px;
}

body.sl-theme .mr-trust strong {
    font-family: var(--sl-font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: inherit;
}

body.sl-theme .mr-trust span {
    font-size: 0.82rem;
    color: var(--sl-on-dark-soft);
}

/* --------------------------------------------------------------------------
   sl-tiles — the three 4:5 promo tiles: a jet hairline frame around the
   photograph with a solid jet plate pinned along the bottom edge (uppercase
   name left, arrow right). No scrim, no shadow — flat layering only.
   -------------------------------------------------------------------------- */
body.sl-theme .sl-tiles {
    padding-block: 1.5rem 0;
}

body.sl-theme .sl-tile {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background-color: var(--sl-band-alt);
    border: 1px solid var(--sl-ink);
    text-decoration: none;
}

body.sl-theme .sl-tile__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

body.sl-theme .sl-tile:hover .sl-tile__img {
    transform: scale(1.08);
}

body.sl-theme .sl-tile__placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--sl-band-alt), var(--sl-fill));
}

body.sl-theme .sl-tile__plate {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.35rem 1.5rem;
    background-color: var(--sl-ink);
    color: var(--sl-on-dark);
}

body.sl-theme .sl-tile__label {
    display: block;
    min-width: 0;
}

body.sl-theme .sl-tile__title {
    display: block;
    font-family: var(--sl-font-head);
    font-weight: 700;
    color: var(--sl-on-dark);
}

body.sl-theme .sl-tile__cta {
    display: block;
    margin-top: 0.3rem;
    font-family: var(--sl-font-body);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sl-orange);
}

body.sl-theme .sl-tile__arrow {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    transition: transform 0.25s ease;
}

body.sl-theme .sl-tile:hover .sl-tile__arrow {
    transform: translateX(0.35rem);
}

/* --------------------------------------------------------------------------
   Product cards (inherited) — DESIGN.md: "Solid Bone White or transparent
   background with a 1px Jet Black BOTTOM border. Images center-aligned with no
   padding against the top/side borders." The bordered card must inset its own
   text, or the name and price collide with the new edge.
   -------------------------------------------------------------------------- */
body.sl-theme .mr-card {
    background-color: var(--sl-canvas);
    border-bottom: 1px solid var(--sl-ink);
    transition: border-color 0.3s ease;
}

body.sl-theme .mr-card:hover {
    border-bottom-color: var(--sl-orange);
}

/* The export wells product shots in a SQUARE frame, not the base's 3:4. The
   base's 1rem bottom margin is kept deliberately: the card's first text child
   is the muted category line, not the title, so pushing the gap onto the title
   would leave that line flush against the image. */
body.sl-theme .mr-card__media {
    background-color: var(--sl-band-alt);
    aspect-ratio: 1;
}

/* Bordered card ⇒ inset the copy. The media stays full-bleed. */
body.sl-theme .mr-card > p,
body.sl-theme .mr-card > h3 {
    padding-inline: 1rem;
}

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

body.sl-theme .mr-card__title {
    font-family: var(--sl-font-head);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--sl-ink);
    margin-bottom: 0.3rem;
}

/* The muted line the export prints under each name (fed by the product's
   category — see the featured partial's loadMissing note). */
body.sl-theme .mr-card__eyebrow {
    font-family: var(--sl-font-body);
    font-size: 0.82rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--sl-muted);
    margin-bottom: 0.7rem;
}

/* DESIGN.md price-display: Inter 600 / 20px / -0.01em. */
body.sl-theme .mr-card__price,
body.sl-theme .ll-price {
    font-family: var(--sl-font-body);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--sl-ink);
}

/* "SALE" chip — DESIGN.md Drop Badges: "small rectangular tags in Hype Orange
   with label-caps typography, placed in the TOP-RIGHT corner". */
body.sl-theme .mr-card__badge {
    top: 0;
    right: 0;
    left: auto;
    background: var(--sl-orange);
    color: var(--sl-ink-on-fill);
    font-family: var(--sl-font-body);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.3rem 0.65rem;
}

/* The slide-up "Add to Cart" — the export's CTA pair: orange fill, jet label. */
body.sl-theme .mr-card__quick {
    background-color: var(--sl-orange);
    color: var(--sl-ink-on-fill);
    font-family: var(--sl-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 1rem;
}

body.sl-theme .mr-card__quick:hover {
    background-color: var(--sl-ink);
    color: var(--sl-on-dark);
}

/* 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 washed-out near-white circle. Default prints jet on bone (15:1);
   hover fills orange and swaps to the jet on-fill ink (~5.6:1). */
body.sl-theme .mr-card__wish,
body.sl-theme .mr-card__quickview {
    background-color: rgba(242, 240, 235, 0.92);
    color: var(--sl-ink);
    border: 1px solid var(--sl-ink);
}

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

body.sl-theme .mr-card__wish.is-active {
    background-color: var(--sl-orange);
    border-color: var(--sl-orange);
    color: var(--sl-ink-on-fill);
}

/* Rail chevrons (PDP related products) — jet hairline squares. */
body.sl-theme .mr-rail-btn {
    border: 1px solid var(--sl-ink);
    color: var(--sl-ink);
}

body.sl-theme .mr-rail-btn:hover {
    background-color: var(--sl-orange);
    border-color: var(--sl-orange);
}

/* --------------------------------------------------------------------------
   sl-featured ("MOVING FAST") — the lifted container band under the bone
   canvas, framed top and bottom by jet rules.
   -------------------------------------------------------------------------- */
body.sl-theme .sl-featured {
    background-color: var(--sl-band);
    border-block: 1px solid var(--sl-ink);
}

body.sl-theme .sl-featured .mr-card,
body.sl-theme .sl-featured .mr-card__media {
    background-color: var(--sl-band);
}

/* --------------------------------------------------------------------------
   sl-onfoot — the full-bleed Jet Black street band (a sole-stack-only
   section). Desaturated photographs that recover colour on hover, closed by a
   hairline meta row. Every text colour is explicit: the re-pointed neutrals
   are dark and would disappear here.
   -------------------------------------------------------------------------- */
body.sl-theme .sl-onfoot {
    background-color: var(--sl-ink);
    color: var(--sl-on-dark);
    padding-block: clamp(56px, 8vw, 96px);
}

body.sl-theme .sl-onfoot__head {
    margin-bottom: 3rem;
}

/* DESIGN.md display-xl, uppercase italic — the band's shouted title. */
body.sl-theme .sl-onfoot__title {
    font-family: var(--sl-font-head);
    font-size: clamp(1.9rem, 4.4vw, 3.5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    font-style: italic;
    color: var(--sl-on-dark);
}

body.sl-theme .sl-onfoot__cell {
    position: relative;
    display: block;
    height: clamp(280px, 42vw, 600px);
    overflow: hidden;
    background-color: #0b0b0b;
}

body.sl-theme .sl-onfoot__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
    transition: filter 0.7s ease, transform 0.7s ease;
}

body.sl-theme .sl-onfoot__cell:hover .sl-onfoot__img {
    filter: grayscale(0);
    transform: scale(1.04);
}

body.sl-theme .sl-onfoot__placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1d1d1d, #0b0b0b);
}

body.sl-theme .sl-onfoot__meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    font-family: var(--sl-font-body);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sl-on-dark-soft);
}

body.sl-theme .sl-onfoot__rule {
    flex: 1 1 auto;
    height: 1px;
    background-color: var(--sl-on-dark-line);
}

body.sl-theme .sl-onfoot__credit,
body.sl-theme .sl-onfoot__coords {
    flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   sl-pickups ("LATEST PICKUPS") — the export outlines these cards on all four
   sides and inverts the whole card to jet on hover.
   -------------------------------------------------------------------------- */
body.sl-theme .sl-pickups .mr-card {
    border: 1px solid var(--sl-ink);
    transition: background-color 0.3s ease, color 0.3s ease;
}

body.sl-theme .sl-pickups .mr-card:hover {
    background-color: var(--sl-ink);
    border-color: var(--sl-ink);
}

body.sl-theme .sl-pickups .mr-card:hover .mr-card__title,
body.sl-theme .sl-pickups .mr-card:hover .mr-card__title a,
body.sl-theme .sl-pickups .mr-card:hover .mr-card__price,
body.sl-theme .sl-pickups .mr-card:hover .ll-price {
    color: var(--sl-on-dark);
}

body.sl-theme .sl-pickups .mr-card:hover .mr-card__eyebrow {
    color: var(--sl-on-dark-soft);
}

/* --------------------------------------------------------------------------
   sl-cats — the full-bleed typographic category band: jet rules top and
   bottom, jet hairlines between cells, each cell flooding Hype Orange on
   hover with the name inverting to jet. auto-fit so 1-8 live categories all
   lay out cleanly (a fixed 4-column track would leave dead cells or overflow).
   -------------------------------------------------------------------------- */
body.sl-theme .sl-cats {
    border-block: 1px solid var(--sl-ink);
}

body.sl-theme .sl-cats__heading {
    padding-top: clamp(32px, 5vw, 56px);
    margin-bottom: 0;
}

body.sl-theme .sl-cats__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0;
}

body.sl-theme .sl-cats__cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(96px, 12vw, 150px);
    padding: 1.5rem 1rem;
    border-left: 1px solid var(--sl-ink);
    text-decoration: none;
    background-color: transparent;
    transition: background-color 0.4s ease;
}

body.sl-theme .sl-cats__cell:first-child {
    border-left: 0;
}

body.sl-theme .sl-cats__cell:hover {
    background-color: var(--sl-orange);
}

body.sl-theme .sl-cats__name {
    font-family: var(--sl-font-head);
    font-size: clamp(0.95rem, 1.5vw, 1.25rem);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-align: center;
    color: var(--sl-ink);
}

body.sl-theme .sl-cats__cell:hover .sl-cats__name {
    color: var(--sl-ink-on-fill);
}

/* --------------------------------------------------------------------------
   sl-journal ("SOLE JOURNAL") — heading left, long arrow pushed right;
   desaturated 16:9 covers that recover colour on hover; orange category chips.
   -------------------------------------------------------------------------- */
body.sl-theme .sl-journal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 3.5rem;
}

body.sl-theme .sl-journal__arrow {
    flex: 0 0 auto;
    color: var(--sl-ink);
}

body.sl-theme .sl-journal__arrow svg {
    width: 40px;
    height: 40px;
    display: block;
}

body.sl-theme .sl-journal__media {
    aspect-ratio: 16 / 9;
    background-color: var(--sl-ink);
}

body.sl-theme .sl-journal__media img {
    filter: grayscale(1);
    transition: filter 0.7s ease, transform 0.7s ease;
}

body.sl-theme .sl-journal__media:hover img {
    filter: grayscale(0);
}

body.sl-theme .sl-journal__label {
    margin-top: 1.5rem;
    margin-bottom: 0.6rem;
}

body.sl-theme .sl-journal__title {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   sl-cta ("THE ROTATION") — the full-bleed Jet Black newsletter band,
   everything centred: display headline, muted supporting line, then a
   transparent white-keylined field beside the solid orange Subscribe button.
   -------------------------------------------------------------------------- */
body.sl-theme .sl-cta {
    background-color: var(--sl-ink);
    color: var(--sl-on-dark);
    padding-block: clamp(64px, 10vw, 128px);
}

body.sl-theme .sl-cta__inner {
    max-width: 56rem;
    margin-inline: auto;
    text-align: center;
}

body.sl-theme .sl-cta__title {
    font-family: var(--sl-font-head);
    font-size: clamp(1.9rem, 4.4vw, 3.5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    font-style: italic;
    color: var(--sl-on-dark);
    margin-bottom: 1rem;
}

body.sl-theme .sl-cta__body {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--sl-on-dark-muted);
    max-width: 44ch;
    margin: 0 auto 3rem;
}

body.sl-theme .sl-cta__form {
    display: flex;
    gap: 1rem;
    max-width: 34rem;
    margin-inline: auto;
}

body.sl-theme .sl-cta__form input {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: 2px solid var(--sl-on-dark);
    color: var(--sl-on-dark);
    padding: 1.05rem 1.25rem;
    font-family: var(--sl-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

body.sl-theme .sl-cta__form input::placeholder {
    color: var(--sl-on-dark-soft);
    text-transform: uppercase;
}

body.sl-theme .sl-cta__form input:focus {
    outline: none;
    border-color: var(--sl-orange);
}

body.sl-theme .sl-cta__btn {
    flex: 0 0 auto;
    background-color: var(--sl-orange);
    border-color: var(--sl-orange);
    color: var(--sl-ink-on-fill);
    padding: 1.05rem 3rem;
    cursor: pointer;
}

body.sl-theme .sl-cta__btn:hover {
    background-color: var(--sl-on-dark);
    border-color: var(--sl-on-dark);
}

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

body.sl-theme .sl-cta__note {
    margin: 0.75rem 0 0;
    font-size: 0.78rem;
    color: var(--sl-on-dark-soft);
}

/* --------------------------------------------------------------------------
   Footer (inherited) — the export's full-bleed Jet Black slab with orange
   column headings. EVERY colour is explicit: the base footer prints
   .mr-muted / .mr-soft / h4 in the re-pointed DARK neutrals, which would be
   invisible here, and it embeds a .form-control + .mr-btn--primary that need
   the on-dark treatment.
   -------------------------------------------------------------------------- */
body.sl-theme .mr-footer {
    background-color: var(--sl-ink);
    border-top: 0;
    color: var(--sl-on-dark-muted);
}

body.sl-theme .mr-footer__brand {
    font-family: var(--sl-font-head);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--sl-on-dark);
}

body.sl-theme .mr-footer h4 {
    font-family: var(--sl-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sl-orange);
}

body.sl-theme .mr-footer .mr-muted,
body.sl-theme .mr-footer p {
    color: var(--sl-on-dark-muted);
}

body.sl-theme .mr-footer .mr-soft {
    color: var(--sl-on-dark-soft);
}

body.sl-theme .mr-footer a {
    color: var(--sl-on-dark-muted);
    font-size: 0.9rem;
}

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

body.sl-theme .mr-footer .mr-divider {
    background-color: var(--sl-on-dark-line);
}

body.sl-theme .mr-footer .form-control {
    background-color: transparent;
    border: 1px solid var(--sl-on-dark-line);
    color: var(--sl-on-dark);
}

body.sl-theme .mr-footer .form-control::placeholder {
    color: var(--sl-on-dark-soft);
}

body.sl-theme .mr-footer .form-control:focus {
    background-color: transparent;
    border-color: var(--sl-orange);
    box-shadow: none;
}

/* `.mr-social` IS the anchor in the base footer partial — jet hairline squares
   that fill orange on hover (jet icon; the guard block re-inks it). */
body.sl-theme .mr-social {
    border: 1px solid var(--sl-on-dark-line);
    color: var(--sl-on-dark);
}

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

/* --------------------------------------------------------------------------
   Remaining inherited surfaces — panels, tables, brand strip.
   -------------------------------------------------------------------------- */
body.sl-theme .mr-panel,
body.sl-theme .mr-summary,
body.sl-theme .mr-acct-nav {
    border: 1px solid var(--sl-ink);
}

body.sl-theme .mr-status {
    background-color: var(--sl-ink);
    color: var(--sl-on-dark);
    font-family: var(--sl-font-body);
    letter-spacing: 0.1em;
}

body.sl-theme .table {
    --bs-table-color: var(--sl-ink);
    --bs-table-border-color: var(--sl-line-soft);
    color: var(--sl-ink);
}

body.sl-theme .mr-brandstrip {
    border-block: 1px solid var(--sl-ink);
    opacity: 1;
}

body.sl-theme .mr-brandstrip span {
    font-family: var(--sl-font-head);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sl-soft);
}

body.sl-theme .mr-promo {
    border: 1px solid var(--sl-ink);
}

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

/* A child override must beat the base's `.mr-promo:hover .mr-promo__cta`
   (0,0,3,0) descendant selector, not just `.mr-promo__cta`. */
body.sl-theme .mr-promo__cta,
body.sl-theme .mr-promo:hover .mr-promo__cta {
    color: var(--sl-on-dark);
    border-color: var(--sl-on-dark);
    letter-spacing: 0.12em;
}

/* --------------------------------------------------------------------------
   Motion & responsive
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.sl-theme .mr-reveal,
    body.sl-theme .mr-card,
    body.sl-theme .mr-promo,
    body.sl-theme .sl-tile,
    body.sl-theme .sl-tile__arrow,
    body.sl-theme .sl-cats__cell,
    body.sl-theme .sl-keyline-link,
    body.sl-theme .sl-onfoot__img,
    body.sl-theme .sl-journal__media img {
        transition: none !important;
        animation: none !important;
    }

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

/* Mobile — from the export's 4-column / 16px-margin mobile frames: headlines
   scale down aggressively ("no more than 2-3 words per line"), the newsletter
   form and hero actions stack full-width, the on-foot cells shorten. */
@media (max-width: 991.98px) {
    body.sl-theme .mr-header__bar {
        min-height: 64px;
    }

    body.sl-theme .mr-announce {
        font-size: 0.62rem;
        letter-spacing: 0.14em;
    }

    body.sl-theme .mr-display {
        font-size: clamp(1.5rem, 6.5vw, 2rem); /* DESIGN.md headline-lg-mobile: 32px */
    }

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

    body.sl-theme .sl-onfoot__title,
    body.sl-theme .sl-cta__title {
        font-size: clamp(1.6rem, 8vw, 2.25rem);
    }

    body.sl-theme .sl-onfoot__cell {
        height: clamp(240px, 62vw, 340px);
    }

    body.sl-theme .sl-cats__name {
        letter-spacing: 0.14em;
    }

    body.sl-theme .sl-journal__arrow svg {
        width: 28px;
        height: 28px;
    }

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

    body.sl-theme .sl-cta__btn {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    body.sl-theme .mr-hero__actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    body.sl-theme .mr-hero__actions .mr-btn {
        width: 100%;
    }

    body.sl-theme .mr-card__title {
        font-size: 0.82rem;
    }
}