/* ==========================================================================
   barber-blade — "Modern Heritage" brand layer over modern-retail.

   Ported from the Google Stitch export
   (docs/templates/pending/stitch_37_barber_blade_homepage — the
   barber_blade/DESIGN.md is the design-system source). The design system:
   a "Charcoal Canvas" (#1F2226 family) near-black background, Parchment
   (#EFE9DE) ink, Aged Brass (#A98B4F) reserved for keylines / eyebrows /
   CTAs, a "Razor Line" 1px brass rule separating sections, NO shadows at all
   (depth comes from tonal layering + bold outlines) and a zero-tolerance
   policy for curves — every corner is 0px, "the precision of a straight
   razor".

   This stylesheet has two jobs:
     (a) style barber-blade's OWN sections (br-* — featured, grooming-ritual,
         arrivals, category band, journal head, newsletter);
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
         base neutral tokens at the charcoal palette, flattening every radius
         and shadow, and drawing the brass 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.br-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
   brass surface follows.

   Contrast decisions (measured with App\Support\Theming\ContrastChecker via a
   scratchpad script — every pair below clears WCAG AA 4.5:1):
     - Parchment #efe9de on the #101418 canvas = 15.31:1; on the #1f2226
       charcoal bands = 13.22:1; on the #282c31 elevated card = 11.63:1; on
       the #0a0f13 footer = 15.94:1.
     - --br-muted #c5c6ca on the canvas = 10.84:1; --br-soft #8f9195 = 5.86:1
       (metadata / placeholders / struck-through compare prices only).
     - Aged Brass #a98b4f as TEXT on the canvas = 5.72:1, on the charcoal
       bands = 4.94:1, on the #181c21 featured band = 5.29:1 — clears
       AA-normal, so brass eyebrows / prices / keyline links are safe. The
       BRIGHT brass #e4c281 (the accent token) is 10.86:1 on the canvas, used
       for hovers and the trust-strip icons.
     - White on a brass FILL is only 3.23:1 (fails AA-normal). DESIGN.md is
       explicit — "Primary buttons are Aged Brass (#A98B4F) with Charcoal
       (#1F2226) text" — so --br-ink-on-fill is the charcoal literal (4.94:1
       on brass, 9.38:1 on bright brass) and every base rule that hardcodes
       #fff over a --bs-primary fill is re-inked in the guard block below.
       See gotchas "A LIGHT primary_color breaks ~12 inherited base rules".
   ========================================================================== */

body.br-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --br-brass: var(--bs-primary, #a98b4f);
    --br-brass-rgb: var(--bs-primary-rgb, 169, 139, 79);
    --br-brass-bright: var(--ll-accent, #e4c281);
    --br-font-head: var(--ll-font-headings, "Albert Sans"), system-ui, -apple-system, sans-serif;
    --br-font-body: var(--ll-font-body, "Inter"), system-ui, -apple-system, sans-serif;

    /* Modern Heritage palette (lifted from the export's Tailwind config +
       DESIGN.md prose). 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). */
    --br-canvas: #101418;          /* background / surface — the page canvas */
    --br-charcoal: #1f2226;        /* DESIGN.md "Charcoal Canvas" — bands, on-fill ink */
    --br-surface-low: #181c21;     /* surface-container-low — the featured band */
    --br-surface: #1c2025;         /* surface-container */
    --br-surface-high: #262a2f;    /* surface-container-high — dropdown hover */
    --br-surface-highest: #31353a; /* surface-container-highest */
    --br-elevated: #282c31;        /* DESIGN.md "…#282C31 for elevated cards" */
    --br-deep: #0a0f13;            /* surface-container-lowest — footer */
    --br-parchment: #efe9de;       /* DESIGN.md "Content (Parchment)" — primary ink */
    --br-muted: #c5c6ca;           /* on-surface-variant — supporting copy */
    --br-soft: #8f9195;            /* outline — metadata, placeholders */
    /* Text printed on a brass FILL (buttons, badges, chips) — DESIGN.md's own
       choice, Charcoal on Aged Brass. */
    --br-ink-on-fill: #1f2226;

    /* Structure — the export draws EVERY divider as brass: a full-strength
       1px "Razor Line" between major sections, and a 30% brass hairline for
       in-section keylines (card media, tile frames, trust dividers). */
    --br-line: rgba(169, 139, 79, 0.3);
    --br-line-strong: var(--br-brass);

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

    background-color: var(--br-canvas);
    color: var(--br-parchment);
    font-family: var(--br-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.
   Parchment #efe9de on --br-surface-low #181c21 = 14.17:1 — clears AA widely.
   -------------------------------------------------------------------------- */
body.br-theme {
    --bs-body-bg: var(--br-canvas);
    --bs-body-color: var(--br-parchment);
    --bs-modal-bg: var(--br-surface-low);
    --bs-modal-color: var(--br-parchment);
    --bs-card-bg: var(--br-surface-low);
    --bs-card-color: var(--br-parchment);
    --bs-secondary-bg: var(--br-surface);
    --bs-tertiary-bg: var(--br-surface-low);
    --bs-emphasis-color: var(--br-parchment);
    --bs-border-color: var(--br-line);
    /* .bg-light reads --bs-light-rgb — #181c21 (--br-surface-low) as r,g,b. */
    --bs-light-rgb: 24, 28, 33;
    /* Bare prose links: brass reads 5.72:1 on the canvas. Setting the token
       (never a bare `body.br-theme a {}` catch-all, which would out-specify
       .mr-btn--primary's label colour and blank the hero CTA — see gotchas). */
    --bs-link-color: var(--br-brass);
    --bs-link-color-rgb: var(--br-brass-rgb);
    --bs-link-hover-color: var(--br-brass-bright);
    /* Bootstrap 5.3 resolves a:hover through `--bs-link-hover-color-RGB`, not
       --bs-link-hover-color. Without the -rgb triplet the hover fell back to
       :root's #0a58ca — stock Bootstrap blue at 2.90:1 on this canvas — on every
       blog-post and CMS-page prose link. */
    --bs-link-hover-color-rgb: var(--bs-warning-rgb, 228, 194, 129);
    /* .text-muted reads --bs-secondary-color, which Bootstrap sets as a LITERAL
       rgba(33,37,41,.75) — so re-pointing --bs-body-color never reached it and
       the shared reviews partial (included on EVERY PDP) rendered its seven
       muted lines at ~1.1-1.3:1, i.e. invisible. */
    --bs-secondary-color: var(--br-muted);
}

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

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

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

/* --------------------------------------------------------------------------
   Shape discipline — DESIGN.md: "a zero-tolerance policy for curves. Every
   element — from buttons and input fields to image containers and badges —
   must have a 0px corner radius." Shadows are "strictly prohibited".

   The two ROUND overlay controls on the product card are exempt: they are
   circular platform-wide, and `.mr-card__wish` is a <button> for signed-in
   shoppers but an <a> for guests, so a flatten listing `button` would square
   the heart for logged-in users only (see gotchas).
   -------------------------------------------------------------------------- */
body.br-theme .mr-card,
body.br-theme .mr-card__media,
body.br-theme .mr-card__badge,
body.br-theme .mr-btn,
body.br-theme .mr-promo,
body.br-theme .mr-promo__img,
body.br-theme .mr-tile,
body.br-theme .mr-icon-btn,
body.br-theme .mr-article__media,
body.br-theme .mr-panel,
body.br-theme .mr-acct-nav,
body.br-theme .mr-acct-link,
body.br-theme .mr-gallery__thumb,
body.br-theme .mr-summary,
body.br-theme .mr-cart-row__media,
/* These three set border-radius as a LITERAL in base CSS (9999px / 999px), so
   the --mr-radius re-point never reached them and they stayed pill-shaped on a
   theme whose DESIGN.md demands 0px everywhere: .mr-social (footer socials),
   .mr-status (order-status chips across account/orders/checkout-complete) and
   .mr-sale-tag (the PDP sale pill, which was round while the identical badge on
   a product card was square). */
body.br-theme .mr-social,
body.br-theme .mr-status,
body.br-theme .mr-sale-tag,
body.br-theme .form-control,
body.br-theme .form-select,
body.br-theme .dropdown-menu,
body.br-theme .offcanvas,
body.br-theme .modal-content,
body.br-theme .card,
body.br-theme img,
body.br-theme input,
body.br-theme select,
body.br-theme textarea,
body.br-theme button {
    border-radius: 0 !important;
    box-shadow: none !important;
}

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

/* --------------------------------------------------------------------------
   Typography — DESIGN.md: "Headlines must always be Albert Sans, Bold (700),
   and Uppercase. Tracking is increased slightly to enhance the 'monumental'
   feel." Inter carries all functional text and prices.

   The uppercase treatment is applied SELECTIVELY: `h2.mr-display` is the
   section-heading role (plus the quick-view modal's product-name heading),
   while `h1.mr-display` is the PDP / category page TITLE — forcing uppercase
   there would shout real product and category names (torqueworks / circuit
   precedent). The hero <h1> gets it explicitly further down, and product-card
   titles stay sentence-case exactly as the export renders them.
   -------------------------------------------------------------------------- */
body.br-theme h1,
body.br-theme h2,
body.br-theme h3,
body.br-theme h4,
body.br-theme h5,
body.br-theme h6,
body.br-theme .mr-display,
body.br-theme .mr-logo {
    font-family: var(--br-font-head);
    font-weight: 700;
    color: var(--br-parchment);
    letter-spacing: 0.04em; /* DESIGN.md headline-lg / -md: 0.04em */
}

body.br-theme .mr-display {
    font-size: clamp(1.75rem, 3.2vw, 2rem); /* DESIGN.md headline-lg: 32px */
    line-height: 1.2;
}

body.br-theme h2.mr-display {
    text-transform: uppercase;
}

/* …with ONE exception: theme::partials.quick-view-body also prints the PRODUCT
   NAME as an h2.mr-display. Shouting a real product name there would contradict
   both the PDP h1 and the export's own sentence-case card titles, so the
   quick-view heading opts back out. */
body.br-theme .mr-quickview__body h2.mr-display {
    text-transform: none;
    letter-spacing: 0.01em;
}

body.br-theme .mr-headline {
    font-family: var(--br-font-head);
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* DESIGN.md label-caps: Inter 700 / 12px / 0.1em uppercase, in Aged Brass. */
body.br-theme .mr-eyebrow,
body.br-theme .br-eyebrow {
    font-family: var(--br-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--br-brass);
}

/* A quiet tracked keyline link ("VIEW ALL PRODUCTS", "READ THE ARCHIVE") —
   the export prints parchment type over a brass underline, inverting to brass
   on hover. */
body.br-theme .br-keyline-link {
    font-family: var(--br-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--br-parchment);
    text-decoration: none;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--br-brass);
    transition: color 0.25s ease, border-color 0.25s ease;
}

body.br-theme .br-keyline-link:hover {
    color: var(--br-brass-bright);
    border-bottom-color: var(--br-brass-bright);
}

body.br-theme .mr-ulink {
    color: var(--br-brass);
}

body.br-theme .mr-ulink:hover {
    color: var(--br-brass-bright);
    border-color: var(--br-brass-bright);
}

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

/* --------------------------------------------------------------------------
   Buttons & form controls — DESIGN.md: "Primary buttons are Aged Brass with
   Charcoal text in Bold Inter. Secondary buttons are transparent with an Aged
   Brass border and Parchment text." Zero radius, no gradients, no shadows.
   -------------------------------------------------------------------------- */
body.br-theme .mr-btn,
body.br-theme .br-btn {
    font-family: var(--br-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    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.br-theme .mr-btn--primary,
body.br-theme .btn-primary {
    background-color: var(--br-brass);
    border-color: var(--br-brass);
    color: var(--br-ink-on-fill);
}

body.br-theme .mr-btn--primary:hover,
body.br-theme .mr-btn--primary:focus,
body.br-theme .btn-primary:hover,
body.br-theme .btn-primary:focus,
body.br-theme .btn-primary:active {
    background-color: var(--br-brass-bright);
    border-color: var(--br-brass-bright);
    color: var(--br-ink-on-fill);
    filter: none;
}

/* Secondary / ghost button ("BUILD A KIT") — 1px brass keyline, brass label,
   inverting to a brass fill with charcoal type on hover. `.mr-btn--on-dark`
   is what the base hero uses for its second CTA. */
body.br-theme .mr-btn--outline,
body.br-theme .mr-btn--on-dark,
body.br-theme .br-btn {
    background-color: transparent;
    border-color: var(--br-brass);
    color: var(--br-brass);
}

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

/* The base's `.mr-btn--light` is white-filled with primary-coloured type —
   brass on white is 3.23:1. Parchment fill + charcoal type is 12.5:1. */
body.br-theme .mr-btn--light {
    background-color: var(--br-parchment);
    color: var(--br-ink-on-fill);
    border-color: var(--br-parchment);
}

body.br-theme .mr-btn--light:hover {
    background-color: var(--br-brass-bright);
    border-color: var(--br-brass-bright);
    color: var(--br-ink-on-fill);
}

body.br-theme .mr-btn--ghost {
    color: var(--br-brass);
}

/* DESIGN.md input fields are minimalist and underlined, but the inherited
   Bootstrap controls carry real boxes across checkout / account — keep the
   box, sink it below the canvas and keyline it in brass, so a full form still
   reads as a set of fields. */
body.br-theme .form-control,
body.br-theme .form-select {
    background-color: var(--br-charcoal);
    border: 1px solid var(--br-line);
    color: var(--br-parchment);
}

/* Bootstrap's caret is a background-image with a hard-coded dark stroke
   (#343a40) — ~1.5:1 against this charcoal field. Re-draw it in parchment,
   and give the caret gutter back (never a padding SHORTHAND here — it eats
   Bootstrap's reserved 2.25rem and the option text runs under the arrow). */
body.br-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='%23efe9de' 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.br-theme .form-control::placeholder {
    color: var(--br-soft);
}

body.br-theme .form-control:focus,
body.br-theme .form-select:focus {
    background-color: var(--br-charcoal);
    border-color: var(--br-brass);
    color: var(--br-parchment);
    box-shadow: none !important;
}

body.br-theme .form-check-input {
    background-color: var(--br-charcoal);
    border-color: var(--br-line);
}

/* DESIGN.md: "Checkboxes and radios are perfectly square. When active, they
   are filled with Aged Brass." Bootstrap draws the tick / dot as a WHITE SVG
   background-image, and white on brass is only 3.23:1 — redraw both marks in
   the charcoal on-fill ink (4.94:1), same treatment as the select caret. */
body.br-theme .form-check-input:checked {
    background-color: var(--br-brass);
    border-color: var(--br-brass);
}

body.br-theme .form-check-input:checked[type="checkbox"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%231f2226' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

body.br-theme .form-check-input:checked[type="radio"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%231f2226'/%3e%3c/svg%3e");
}

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

body.br-theme .dropdown-item {
    color: var(--br-parchment);
}

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

body.br-theme .offcanvas {
    background-color: var(--br-canvas);
    color: var(--br-parchment);
}

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

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

/* Form VALIDATION colours. Bootstrap's stock validation palette is tuned for
   a white page: `--bs-form-invalid-color` #dc3545 measures only 4.09:1 on this
   canvas and 3.53:1 on a charcoal .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. DESIGN.md ships a dark-scheme error token for exactly this
   (`error: #ffb4ab` — 10.89:1 / 9.41:1); the valid pair is the same lightness
   step in green (10.90:1 / 9.41:1). Measured, like every ratio in this file. */
body.br-theme {
    --br-error: #ffb4ab;
    --br-valid: #8fd6ab;
    --bs-form-invalid-color: var(--br-error);
    --bs-form-invalid-border-color: var(--br-error);
    --bs-form-valid-color: var(--br-valid);
    --bs-form-valid-border-color: var(--br-valid);
    --bs-danger-text-emphasis: var(--br-error);
    --bs-success-text-emphasis: var(--br-valid);
}

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

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

/* --------------------------------------------------------------------------
   Light-primary guard block — base rules that FILL with --bs-primary (Aged
   Brass here) and hard-code #fff on top (3.23:1, fails AA-normal). Re-ink
   them all with the charcoal on-fill pair DESIGN.md specifies (4.94:1).
   See gotchas "A LIGHT primary_color breaks ~12 inherited base rules".
   -------------------------------------------------------------------------- */
body.br-theme .mr-badge,
body.br-theme .mr-badge--wish,
body.br-theme .mr-page.is-active,
body.br-theme .mr-step.is-done .mr-step__dot,
body.br-theme .mr-acct-avatar,
body.br-theme .mr-acct-link.is-active,
body.br-theme .mr-rail-btn:hover,
body.br-theme .mr-social:hover,
body.br-theme .mr-sale-tag,
body.br-theme .bg-brand {
    color: var(--br-ink-on-fill);
}

body.br-theme .mr-sale-tag {
    background-color: var(--br-brass);
}

/* The base's `.mr-cta` band fills with --bs-primary and hard-codes #fff on
   its heading + body. barber-blade overrides the newsletter partial (.br-cta)
   so this band is not on the home page, but it must still be safe wherever
   the base reaches for it. */
body.br-theme .mr-cta {
    background-color: var(--br-charcoal);
    color: var(--br-parchment);
}

body.br-theme .mr-cta h2,
body.br-theme .mr-cta p {
    color: var(--br-parchment);
}

/* Primary-as-text / -border states: brass reads 5.72:1 on the canvas, so
   these are legible as-is — pinned here only so a future token change keeps
   them tied to the theme's brass rather than drifting. */
body.br-theme .mr-tabs .nav-link.active,
body.br-theme .mr-filter__link.is-active,
body.br-theme .mr-page:hover,
body.br-theme .mr-filter__link:hover {
    color: var(--br-brass-bright);
}

body.br-theme .mr-gallery__thumb.is-active,
body.br-theme .mr-page:hover {
    border-color: var(--br-brass);
}

body.br-theme .mr-panel,
body.br-theme .mr-acct-nav {
    border-color: var(--br-line);
}

/* --------------------------------------------------------------------------
   Announcement band + header — DESIGN.md / export section 1-2: a charcoal
   strip carrying tracked brass micro-type, over a blurred near-black bar
   underlined by a full-strength brass razor-line.
   -------------------------------------------------------------------------- */
body.br-theme .mr-announce {
    background-color: var(--br-charcoal);
    color: var(--br-brass);
    border-bottom: 1px solid var(--br-line);
    font-family: var(--br-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.55rem 1rem;
}

body.br-theme .mr-announce a {
    color: var(--br-brass-bright);
}

body.br-theme .mr-header {
    background-color: rgba(16, 20, 24, 0.95);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--br-brass);
}

body.br-theme .mr-logo {
    font-family: var(--br-font-head);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--br-parchment);
}

body.br-theme .mr-nav-link {
    font-family: var(--br-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--br-muted);
}

body.br-theme .mr-nav-link:hover,
body.br-theme .mr-nav-link.is-active {
    color: var(--br-brass-bright);
}

body.br-theme .mr-icon-btn {
    color: var(--br-parchment);
}

body.br-theme .mr-icon-btn:hover {
    color: var(--br-brass-bright);
}

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

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

body.br-theme .mr-search input:focus {
    background-color: var(--br-charcoal);
    border-color: var(--br-brass);
    box-shadow: none;
}

body.br-theme .mr-search button:hover {
    color: var(--br-brass-bright);
}

/* --------------------------------------------------------------------------
   Hero (inherited markup — full-bleed image + overlay + copy). The overlay is
   RE-TINTED in charcoal, never removed: it is the only thing keeping the
   parchment <h1> readable over an arbitrary merchant photo. The export uses a
   flat bg-black/40 wash rather than the base's directional gradient.
   -------------------------------------------------------------------------- */
body.br-theme .mr-hero {
    background-color: var(--br-charcoal);
}

body.br-theme .mr-hero__overlay {
    background: linear-gradient(90deg, rgba(16, 20, 24, 0.82) 0%, rgba(16, 20, 24, 0.55) 45%, rgba(16, 20, 24, 0.4) 100%);
}

/* DESIGN.md headline-xl: Albert Sans 700 / 48px / 1.1 / 0.05em, UPPERCASE.
   (0,2,1) out-specifies the base's own `.mr-hero .mr-hero__copy h1` (0,2,1)
   by cascade order — this stylesheet loads after app.css. */
body.br-theme .mr-hero .mr-hero__copy h1,
body.br-theme .mr-hero .mr-hero__copy .mr-display {
    color: var(--br-parchment);
    text-transform: uppercase;
    font-size: clamp(2.25rem, 4.4vw, 3rem);
    line-height: 1.1;
    letter-spacing: 0.05em;
    margin-bottom: 1.75rem;
}

/* The export's hero eyebrow ("THE DAILY STANDARD") is tracked BRASS type, not
   the base's white. */
body.br-theme .mr-hero .mr-hero__copy .mr-eyebrow {
    color: var(--br-brass);
    letter-spacing: 0.2em;
    margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   Trust strip (inherited, data-driven from store_settings.home_features) —
   export section 4: a charcoal band framed by brass razor-lines, brass icons
   over 10px tracked micro-labels.
   -------------------------------------------------------------------------- */
body.br-theme .mr-band--alt.border-bottom {
    background-color: var(--br-charcoal);
    border-top: 1px solid var(--br-brass);
    border-bottom: 1px solid var(--br-brass) !important;
}

body.br-theme .mr-trust {
    color: var(--br-muted);
}

body.br-theme .mr-trust svg {
    color: var(--br-brass);
}

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

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

/* --------------------------------------------------------------------------
   Promo tiles (inherited) — export section 5: moody 4:5 photographs inside a
   full-strength brass frame, a black wash that LIFTS on hover, and a bottom
   gradient carrying an uppercase title over a brass underlined caption.
   -------------------------------------------------------------------------- */
body.br-theme .mr-promo {
    background-color: var(--br-charcoal);
    border: 1px solid var(--br-brass);
    transition: border-color 0.3s ease;
}

body.br-theme .mr-promo__scrim {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0.82) 100%);
}

body.br-theme .mr-promo:hover .mr-promo__scrim {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0.8) 100%);
}

body.br-theme .mr-promo__title {
    font-family: var(--br-font-head);
    font-weight: 700;
    font-size: clamp(1.25rem, 2vw, 1.5rem); /* DESIGN.md headline-md: 24px */
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--br-parchment);
}

/* The base styles the caption as a bordered white keyline and repaints it via
   the DESCENDANT selector `.mr-promo:hover .mr-promo__cta` — override BOTH or
   the hover colour keeps winning on specificity (see gotchas). */
body.br-theme .mr-promo__cta {
    font-family: var(--br-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--br-brass);
    border-bottom-color: var(--br-brass);
}

body.br-theme .mr-promo:hover .mr-promo__cta {
    color: var(--br-brass-bright);
    border-color: var(--br-brass-bright);
}

/* --------------------------------------------------------------------------
   Product cards (inherited) — export sections 6 + 8: a charcoal media panel
   inside a brass hairline, the card itself borderless until hover, an Inter
   sentence-case name (NOT a headline — the export uses font-body-md here) and
   a brass Inter-600 price-display line.
   -------------------------------------------------------------------------- */
body.br-theme .mr-card {
    background-color: transparent;
    border: 1px solid transparent;
    transition: border-color 0.3s ease;
}

body.br-theme .mr-card:hover {
    border-color: var(--br-line);
}

body.br-theme .mr-card__media {
    background-color: var(--br-charcoal);
    border: 1px solid var(--br-line);
    transition: border-color 0.3s ease;
}

body.br-theme .mr-card:hover .mr-card__media {
    border-color: var(--br-brass);
}

body.br-theme .mr-card__title {
    font-family: var(--br-font-body);
    font-weight: 400;
    font-size: 1rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--br-parchment);
}

body.br-theme .mr-card__title a:hover {
    color: var(--br-brass-bright);
}

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

/* DESIGN.md price-display: Inter 600 / 20px / 0.02em — "Rs. 1,650" in Aged
   Brass (5.72:1 on the canvas, 4.94:1 on the charcoal bands). The base's
   shared `.ll-price--sale` paints a red; the export keeps sale prices brass. */
body.br-theme .mr-card__price,
body.br-theme .ll-price,
body.br-theme .ll-price--sale {
    font-family: var(--br-font-body);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    color: var(--br-brass);
}

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

/* 'SALE' badge — brass fill, charcoal type, rectangular (the shared
   theme-vars stylesheet gives it a red pill; DESIGN.md wants neither). */
body.br-theme .mr-card__badge {
    background-color: var(--br-brass);
    color: var(--br-ink-on-fill);
    font-family: var(--br-font-body);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.25rem 0.6rem;
}

/* The slide-up "Add to Cart" bar — the export fills it brass on hover. */
body.br-theme .mr-card__quick {
    background-color: rgba(31, 34, 38, 0.92);
    color: var(--br-parchment);
    border-top: 1px solid var(--br-brass);
    font-family: var(--br-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

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

/* 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 on this canvas is unreadable. Default
   prints parchment on a near-black badge over the charcoal media (13.56:1);
   hover fills brass and swaps to the charcoal on-fill ink (4.94:1, well clear
   of the 3:1 WCAG floor for UI components). */
body.br-theme .mr-card__wish,
body.br-theme .mr-card__quickview {
    background-color: rgba(16, 20, 24, 0.82);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: var(--br-parchment);
    border: 1px solid var(--br-line);
}

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

body.br-theme .mr-card__wish.is-active {
    color: var(--br-brass-bright);
}

/* The card carries a border (transparent at rest, brass hairline on hover) ⇒
   its text must not sit flush against that edge. The media stays full-bleed;
   only the copy is inset. */
body.br-theme .mr-card > p,
body.br-theme .mr-card > h3 {
    padding-inline: 0.85rem;
}

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

/* Rail chevrons (PDP related products etc.) — brass keyline squares. */
body.br-theme .mr-rail-btn {
    border-color: var(--br-brass);
    color: var(--br-parchment);
}

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

/* --------------------------------------------------------------------------
   barber-blade's own home sections
   -------------------------------------------------------------------------- */

/* "SHOP STANDARDS" — a lifted surface-low band between two razor-lines. */
body.br-theme .br-featured {
    background-color: var(--br-surface-low);
    border-top: 1px solid var(--br-brass);
    border-bottom: 1px solid var(--br-brass);
}

/* "NEW BEHIND THE CHAIR" — on the canvas, opened by a razor-line. */
body.br-theme .br-arrivals {
    border-top: 1px solid var(--br-brass);
}

/* "THE RITUAL" — a 50/50 split band: full-bleed monochrome photograph beside
   a charcoal copy panel, divided by a brass razor-line. */
body.br-theme .br-ritual {
    display: flex;
    flex-wrap: wrap;
    min-height: 600px;
    background-color: var(--br-charcoal);
}

body.br-theme .br-ritual__media {
    flex: 1 1 50%;
    min-height: 420px;
    overflow: hidden;
    border-right: 1px solid var(--br-brass);
}

body.br-theme .br-ritual__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.br-theme .br-ritual__body {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--br-charcoal);
}

body.br-theme .br-ritual__inner {
    padding: 5rem clamp(1.5rem, 4vw, 4rem);
    max-width: 32rem;
}

body.br-theme .br-ritual__steps {
    display: grid;
    gap: 2.5rem;
}

body.br-theme .br-ritual__step {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

/* DESIGN.md headline-md in Aged Brass, deliberately held back so the numeral
   reads as a quiet index rather than competing with the step label. */
body.br-theme .br-ritual__num {
    font-family: var(--br-font-head);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
    color: var(--br-brass);
    opacity: 0.55;
    min-width: 2.25rem;
    flex: 0 0 auto;
}

body.br-theme .br-ritual__step-title {
    font-family: var(--br-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--br-parchment);
    margin-bottom: 0.5rem;
}

body.br-theme .br-ritual__step-body {
    color: var(--br-muted);
    font-size: 0.95rem;
}

/* Category band — a flush, full-bleed 4-up strip framed by razor-lines and
   divided by brass hairlines. The representative product photograph is dimmed
   right down so the centred label is the subject. */
body.br-theme .br-cats {
    border-top: 1px solid var(--br-brass);
    border-bottom: 1px solid var(--br-brass);
}

/* The export shows NO heading over the category band (the manifest default is
   ""), so this only applies when a merchant adds one — it needs its own
   breathing room because the band itself is deliberately flush. */
body.br-theme .br-cats__head {
    padding-top: 3rem;
    padding-bottom: 2rem;
}

/* auto-fit, NOT repeat(4): this band is full-bleed and keylined top and bottom,
   so a fixed 4-column track left a store with 3 (or 5, 6, 7) categories staring
   at bare canvas inside a brass frame. auto-fit collapses empty tracks, so any
   count from 1 upward fills the band edge to edge. */
body.br-theme .br-cats__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

body.br-theme .br-cats__tile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    background-color: var(--br-charcoal);
    border-left: 1px solid var(--br-brass);
    overflow: hidden;
    text-decoration: none;
}

/* A store may have up to 8 categories, i.e. two rows of four — reset the left
   keyline on each row's FIRST tile and draw the razor-line between rows. */
body.br-theme .br-cats__tile:nth-child(4n + 1) {
    border-left: 0;
}

body.br-theme .br-cats__tile:nth-child(n + 5) {
    border-top: 1px solid var(--br-brass);
}

body.br-theme .br-cats__media {
    position: absolute;
    inset: 0;
    opacity: 0.2;
    transition: opacity 0.5s ease;
}

body.br-theme .br-cats__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.br-theme .br-cats__tile:hover .br-cats__media {
    opacity: 0.4;
}

body.br-theme .br-cats__name {
    position: relative;
    z-index: 1;
    font-family: var(--br-font-head);
    font-size: clamp(1.05rem, 1.6vw, 1.5rem);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: center;
    padding: 0 1rem;
    color: var(--br-parchment);
    transition: transform 0.3s ease;
}

body.br-theme .br-cats__tile:hover .br-cats__name {
    transform: scale(1.08);
}

/* "KNOWLEDGE IS SHARP" — uppercase story titles that ink brass on hover. */
body.br-theme .br-article__title {
    font-family: var(--br-font-head);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.25;
    text-transform: uppercase;
}

body.br-theme .mr-article__media {
    border: 1px solid var(--br-line);
    background-color: var(--br-charcoal);
}

body.br-theme .mr-article__title a {
    color: var(--br-parchment);
    text-decoration: none;
}

body.br-theme .mr-article__title a:hover {
    color: var(--br-brass-bright);
}

/* "THE SHARP EDIT" newsletter — a centred charcoal band between razor-lines,
   with the input + button sharing ONE 1px brass frame (zero radius). */
body.br-theme .br-cta {
    background-color: var(--br-charcoal);
    border-top: 1px solid var(--br-brass);
    border-bottom: 1px solid var(--br-brass);
    padding: 6rem 0;
}

body.br-theme .br-cta__title {
    font-size: clamp(2rem, 3.6vw, 3rem); /* DESIGN.md headline-xl: 48px */
    line-height: 1.1;
    letter-spacing: 0.05em;
    color: var(--br-parchment);
}

body.br-theme .br-cta__body {
    color: var(--br-muted);
    max-width: 34rem;
}

body.br-theme .br-cta__form {
    display: flex;
    align-items: stretch;
    max-width: 36rem;
    border: 1px solid var(--br-brass);
}

body.br-theme .br-cta__form input {
    flex: 1 1 auto;
    background: transparent;
    border: 0;
    color: var(--br-parchment);
    padding: 1rem 1.5rem;
    font-size: 0.9rem;
}

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

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

body.br-theme .br-cta__btn {
    background-color: var(--br-brass);
    color: var(--br-ink-on-fill);
    border: 0;
    padding: 1rem 2.5rem;
    font-family: var(--br-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color 0.25s ease;
}

body.br-theme .br-cta__btn:hover {
    background-color: var(--br-brass-bright);
}

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

body.br-theme .br-cta__note {
    color: var(--br-soft);
    font-size: 0.8rem;
}

/* --------------------------------------------------------------------------
   Inherited component finishing — brand strip, footer, tables.
   -------------------------------------------------------------------------- */
body.br-theme .mr-brandstrip {
    border-block: 1px solid var(--br-line);
}

body.br-theme .mr-brandstrip span {
    font-family: var(--br-font-head);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--br-soft);
}

/* Export section 12: the deepest surface, opened by the DESIGN.md "Double-Rule"
   (a 1px border, a gap, a second 1px border). The export writes it as Tailwind
   `border-t-2 border-double`, but `double` needs >= 3px to actually resolve
   into two lines — at 2px every browser collapses it to a solid rule — so it
   is drawn at 3px here to render the treatment DESIGN.md describes. */
body.br-theme .mr-footer {
    background-color: var(--br-deep);
    border-top: 3px double var(--br-brass);
    color: var(--br-muted);
}

body.br-theme .mr-footer__brand,
body.br-theme .mr-footer h2,
body.br-theme .mr-footer h3 {
    font-family: var(--br-font-head);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--br-parchment);
}

body.br-theme .mr-footer h4 {
    font-family: var(--br-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--br-brass);
}

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

body.br-theme .mr-footer a:hover {
    color: var(--br-brass-bright);
}

/* `.mr-social` IS the anchor in the base footer partial (the old
   `.mr-social a` descendant selector matched nothing) — brass keyline squares
   that fill brass on hover; the guard block above supplies the charcoal ink. */
body.br-theme .mr-social {
    border: 1px solid var(--br-line);
    color: var(--br-parchment);
}

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

/* Tables (orders / account) need explicit ink on the dark canvas — the base
   leaves them on Bootstrap's light-mode --bs-table-* defaults. */
body.br-theme .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--br-parchment);
    --bs-table-border-color: var(--br-line);
    color: var(--br-parchment);
}

/* --------------------------------------------------------------------------
   Motion & responsive (export mobile frames: single column, 16px margins)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.br-theme .mr-reveal,
    body.br-theme .mr-card,
    body.br-theme .mr-card__media,
    body.br-theme .mr-promo,
    body.br-theme .br-keyline-link,
    body.br-theme .br-cats__media,
    body.br-theme .br-cats__name {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }

    body.br-theme .mr-card:hover .mr-card__media img,
    body.br-theme .mr-promo:hover .mr-promo__img,
    body.br-theme .mr-article__media:hover img,
    body.br-theme .br-cats__tile:hover .br-cats__name {
        transform: none !important;
        box-shadow: none !important;
    }
}

@media (max-width: 991.98px) {
    body.br-theme .mr-logo {
        font-size: 1.25rem;
        letter-spacing: 0.1em;
    }

    /* DESIGN.md headline-xl-mobile: 36px, tracking held at 0.05em. */
    body.br-theme .mr-hero .mr-hero__copy h1,
    body.br-theme .mr-hero .mr-hero__copy .mr-display {
        font-size: clamp(1.85rem, 7vw, 2.25rem);
    }

    body.br-theme .br-ritual {
        min-height: 0;
    }

    body.br-theme .br-ritual__media,
    body.br-theme .br-ritual__body {
        flex: 1 1 100%;
    }

    body.br-theme .br-ritual__media {
        border-right: 0;
        border-bottom: 1px solid var(--br-brass);
        min-height: 320px;
    }

    body.br-theme .br-ritual__inner {
        padding: 3rem 1.5rem;
    }

    body.br-theme .br-cats__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.br-theme .br-cats__tile:nth-child(odd) {
        border-left: 0;
    }

    body.br-theme .br-cats__tile:nth-child(even) {
        border-left: 1px solid var(--br-brass);
    }

    body.br-theme .br-cats__tile:nth-child(n + 3) {
        border-top: 1px solid var(--br-brass);
    }

    body.br-theme .br-cats__name {
        letter-spacing: 0.12em;
    }

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

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

    body.br-theme .br-cta__form input {
        border: 1px solid var(--br-brass);
    }
}