/* ==========================================================================
   BaseLayer — quiet-quality innerwear & everyday basics.

   Ported from the Stitch "BaseLayer" design (the Quiet Quality design system
   lives at docs/templates/pending/stitch_72_baselayer_essentials_homepage/…/
   quiet_quality_design_system/DESIGN.md, and the homepage code.html is the
   authoritative source for the rendered values): a warm stone canvas instead of
   clinical white, deep charcoal as the "black" of the system (announcement bar,
   primary actions, the newsletter band and the footer slab), a calm blue held
   back strictly for functional accents (eyebrows, the SALE chip, the sale
   price, category labels), depth built from tonal layers and 1px hairlines
   rather than shadows, and one even 8px radius on every button, field, tile and
   card. Albert Sans 600/700 — standing in for the export's Hanken Grotesk,
   which is off the platform's self-hosted font allowlist — carries every
   headline; Inter carries body copy, the tracked caps UI labels and the Rs.
   prices, exactly as DESIGN.md specifies.

   This theme OWNS the hero / promo / featured / everyday-system / new-arrivals /
   journal / newsletter home sections (bl-* markup) and INHERITS Modern Retail's
   header, footer, trust strip, category tiles, product card and every
   functional page. This stylesheet therefore has two jobs:

     (a) style the NEW `bl-*` markup into the Stitch design; and
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the base
         neutral tokens at the stone palette, dressing the announcement bar,
         header, category tiles and footer in charcoal, and inking the product
         card's price, SALE chip and overlay controls the way the export does.

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

   CONTRAST (ratios computed against the palette below):
     - primary Charcoal #2b2d31 is very DARK — 13.08:1 on the stone canvas,
       13.79:1 on white and 13.79:1 carrying white — so it is safe as text, as
       an icon and as a fill under a white label. Keeping primary dark also
       keeps every inherited base rule that hardcodes `color:#fff` over a
       primary fill legible (.mr-badge, .mr-page.is-active, .mr-acct-avatar,
       .mr-card__quick, Bootstrap's own .btn-primary in the shared review form,
       …) — see references/gotchas.md on light primaries.
     - accent Calm Blue #3c6186 passes BOTH ways without needing a darker "-ink"
       sibling: as TEXT it is 6.14:1 on the stone canvas, 6.47:1 on white,
       5.86:1 on the pale band and 5.57:1 on the tile fill; as a FILL carrying
       white it is 6.47:1. It is used for eyebrows, the SALE chip, the sale
       price and journal labels.
     - BUT Calm Blue on the charcoal newsletter/footer slab is only 2.13:1, so
       nothing accent-coloured rides those bands: the base outlines
       `*:focus-visible` with --ll-accent, and that outline is re-pointed to the
       pale --bl-mist (10.25:1) on the dark bands. See the focus block near the
       end. The white-alpha text on that slab is measured too — the footer body
       (0.7) is 7.57:1, its links (0.86) 10.63:1, the small print (0.55) 5.33:1,
       the newsletter body (0.8) 9.40:1 and the field placeholder (0.5) 4.66:1.
     - --mr-soft drives small captions, breadcrumbs and struck-through
       compare-at prices, so it may NOT reuse the design's own `outline` token
       (#76777b — only 4.24:1 on stone, under the 4.5:1 normal-text minimum).
       --bl-soft (#5f5e63) is a deliberately darkened value in the same
       warm-neutral family and clears 6.10:1.
     - likewise the base's --mr-gold #c0a04a is only 2.38:1 on stone, so the
       rating stars use --bl-bronze (#8a6a12, 4.80:1).
   ========================================================================== */

body.bl-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --bl-charcoal: var(--bs-primary, #2b2d31);
    --bl-charcoal-rgb: var(--bs-primary-rgb, 43, 45, 49);
    /* Bootstrap 5.3 paints bare <a> as rgba(var(--bs-link-color-rgb),…);
       theme-vars sets --bs-link-color but never the -rgb triplet, so without
       this a plain content link (CMS/blog body, quick-view "Category") falls
       back to factory blue. Point it at the charcoal. NOTE: this is deliberately
       used INSTEAD of a bare `body.bl-theme a { color: … }` catch-all, which
       would out-specify .mr-btn--primary's white label and blank out the hero
       CTA's text (see references/gotchas.md). */
    --bs-link-color-rgb: var(--bl-charcoal-rgb);
    --bl-blue: var(--ll-accent, #3c6186);
    --bl-radius: var(--bs-border-radius, 0.5rem);
    --bl-font-head: var(--ll-font-headings, "Albert Sans"), system-ui, -apple-system, sans-serif;
    --bl-font-body: var(--ll-font-body, "Inter"), system-ui, -apple-system, sans-serif;

    /* Quiet Quality palette (the export's rendered tailwind config) */
    --bl-stone: #fcf8f8;         /* page canvas — warm off-white               */
    --bl-white: #ffffff;         /* header + the Restocked Weekly band         */
    --bl-band: #f6f3f2;          /* trust strip + the New In band              */
    --bl-fill: #f1eded;          /* the everyday-system cards, tile wells      */
    --bl-fill-high: #ebe7e7;     /* department tile media well                 */
    /* Hover fill for charcoal actions — the export's `primary` (#16191c), i.e.
       the charcoal darkened. Declared as a literal first (browsers without
       color-mix) then derived, so a merchant who recolours the theme does not
       end up with a stock near-black hover under a recoloured button. */
    --bl-charcoal-deep: #16191c;
    --bl-charcoal-deep: color-mix(in srgb, var(--bl-charcoal) 82%, #000);
    --bl-mist: #cfe0f3;          /* pale blue for text/outlines ON charcoal    */
    --bl-bronze: #8a6a12;        /* text-safe rating stars — see CONTRAST note */
    --bl-ink: #1c1b1c;           /* on-surface — body copy, card titles        */
    --bl-muted: #45474a;         /* on-surface-variant — leads, excerpts       */
    --bl-soft: #5f5e63;          /* darkened outline — see CONTRAST note       */

    /* "This design system avoids heavy shadows" (DESIGN.md Elevation): depth is
       tonal layering + hairlines. No ambient shadow token is used anywhere; the
       base's --mr-shadow is flattened to a barely-there hairline lift. */
    --bl-shadow: 0 1px 2px rgba(var(--bl-charcoal-rgb), 0.06);

    /* Re-point the inherited base neutrals at the stone palette so every
       inherited mr-* surface (shop, PDP, cart, checkout, account, blog, 404)
       warms with the theme. Hairlines read as the DESIGN.md "low-contrast 1px
       outline" via color-mix, with a literal fallback for browsers without it. */
    --mr-ink: var(--bl-ink);
    --mr-muted: var(--bl-muted);
    --mr-soft: var(--bl-soft);
    --mr-surface: var(--bl-white);
    --mr-band: var(--bl-stone);
    --mr-band-alt: var(--bl-band);
    --mr-fill: var(--bl-fill-high);
    --mr-border: #e4e0e0;
    --mr-border: color-mix(in srgb, var(--bl-charcoal) 11%, var(--bl-stone));
    --mr-border-strong: #c6c6cb;
    --mr-border-strong: color-mix(in srgb, var(--bl-charcoal) 28%, var(--bl-stone));
    --mr-radius: var(--bl-radius);
    --mr-gold: var(--bl-bronze);
    --mr-shadow: var(--bl-shadow);

    /* Bootstrap-owned surfaces the base does not tokenise. */
    --bs-body-bg: var(--bl-stone);
    --bs-border-color: var(--mr-border);

    background-color: var(--bl-stone);
    color: var(--bl-ink);
    font-family: var(--bl-font-body);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Shape discipline — "A universal corner radius of 8px is applied to all
   buttons, input fields and product cards" (DESIGN.md Shapes). This design is
   soft-square, not sharp, so it is deliberately NOT a `border-radius: 0
   !important` flatten (which would also square the round overlay controls on
   the product card). And never a `padding` SHORTHAND on .form-select — that
   collapses Bootstrap's reserved 2.25rem caret gutter and runs the option text
   under the arrow; the gutter is restated below as a logical property.
   -------------------------------------------------------------------------- */
body.bl-theme .form-control,
body.bl-theme .form-select,
body.bl-theme .dropdown-menu,
body.bl-theme .offcanvas,
body.bl-theme .mr-card__media,
body.bl-theme .bl-dept__media,
body.bl-theme .bl-system__card,
body.bl-theme .bl-story__media,
body.bl-theme .mr-tile--cat {
    border-radius: var(--bl-radius);
}

body.bl-theme .form-select {
    padding-inline-end: 2.25rem;
}

/* Bootstrap paints the invalid state with a border-color the restyle above
   would otherwise flatten into the neutral hairline. Re-assert it so a failed
   checkout / address field still reads as an error. */
body.bl-theme .form-control.is-invalid,
body.bl-theme .form-select.is-invalid,
body.bl-theme .was-validated .form-control:invalid,
body.bl-theme .was-validated .form-select:invalid {
    border-color: var(--bs-form-invalid-border-color, #ba1a1a);
}

/* --------------------------------------------------------------------------
   Typography — Albert Sans 600 with slightly negative tracking for headlines
   ("sharp, contemporary and geometric"), Inter for everything functional.
   Headings ink charcoal, which acts as the black of the system.
   -------------------------------------------------------------------------- */
body.bl-theme h1, body.bl-theme h2, body.bl-theme h3,
body.bl-theme h4, body.bl-theme h5, body.bl-theme h6 {
    font-family: var(--bl-font-head);
    color: var(--bl-charcoal);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Section headlines are the export's `headline-lg` (40px/48px, -0.01em). */
body.bl-theme .mr-display {
    font-size: clamp(2rem, 3.4vw, 2.5rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

body.bl-theme .mr-headline {
    font-family: var(--bl-font-head);
    font-weight: 600;
}

/* `label-sm` eyebrows — 12px Inter medium, uppercase, 0.05em tracking, calm
   blue (6.14:1 on stone / 6.47:1 on white). */
body.bl-theme .mr-eyebrow {
    font-family: var(--bl-font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bl-blue);
}

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

/* --------------------------------------------------------------------------
   Buttons + editorial links — "Primary buttons are solid Charcoal with White
   text… no shadow and 8px rounded corners. Secondary buttons use a transparent
   background with a 1px Charcoal border." (DESIGN.md Components)
   -------------------------------------------------------------------------- */
body.bl-theme .mr-btn {
    border-radius: var(--bl-radius);
    font-family: var(--bl-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 1rem 2rem;
    box-shadow: none;
}

/* Re-assert the white label. The base rule is only specificity (0,1,0), so any
   later anchor-coloured rule (a theme's own, or merchant custom CSS) would
   otherwise repaint the label and leave a solid charcoal block with no visible
   text. */
body.bl-theme .mr-btn--primary,
body.bl-theme .mr-btn--primary:hover,
body.bl-theme .mr-btn--primary:focus {
    background-color: var(--bl-charcoal);
    color: #fff;
}

body.bl-theme .mr-btn--primary:hover {
    background-color: var(--bl-charcoal-deep);
    filter: none;
}

body.bl-theme .mr-btn--outline,
body.bl-theme .bl-btn-outline {
    background-color: transparent;
    border: 1px solid var(--bl-charcoal);
    color: var(--bl-charcoal);
}

body.bl-theme .mr-btn--outline:hover,
body.bl-theme .bl-btn-outline:hover {
    background-color: var(--bl-charcoal);
    color: #fff;
}

/* The hero's ghost button on a photograph-free white panel is the same 1px
   charcoal keyline as every other secondary action, per the export. */
body.bl-theme .bl-btn-hero {
    padding: 1rem 2rem;
}

/* Small underlined "View All Essentials" / "Read All Stories" links — the
   export's `label-sm underline`, going calm blue on hover. */
.bl-ulink {
    display: inline-block;
    font-family: var(--bl-font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--bl-charcoal);
    text-decoration: underline;
    text-underline-offset: 0.28em;
    transition: color 0.2s ease;
}

.bl-ulink:hover { color: var(--bl-blue); }

body.bl-theme .mr-ulink {
    color: var(--bl-charcoal);
    border-color: var(--bl-charcoal);
}

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

/* Shared section header: heading left, small underlined link opposite it on
   the same baseline. */
.bl-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* --------------------------------------------------------------------------
   Announcement bar + header — the export's charcoal strip over a plain WHITE
   sticky bar ruled off by a faint hairline. The nav is tracked caps and inks
   charcoal on hover.
   -------------------------------------------------------------------------- */
body.bl-theme .mr-announce {
    background-color: var(--bl-charcoal);
    color: #fff;
    font-family: var(--bl-font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    padding-block: 0.55rem;
}

body.bl-theme .mr-announce a { color: #fff; }

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

body.bl-theme .mr-logo {
    font-family: var(--bl-font-head);
    font-weight: 600;
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    letter-spacing: -0.01em;
    color: var(--bl-charcoal);
}

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

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

body.bl-theme .mr-nav-link.is-active {
    color: var(--bl-charcoal);
    border-bottom-color: var(--bl-charcoal);
}

body.bl-theme .mr-icon-btn { color: var(--bl-charcoal); }
body.bl-theme .mr-icon-btn:hover { color: var(--bl-blue); }

/* Cart / wishlist count pills — charcoal and calm blue, both carrying white
   numerals (13.79:1 / 6.47:1). */
body.bl-theme .mr-badge { background-color: var(--bl-charcoal); color: #fff; }
body.bl-theme .mr-badge--wish { background-color: var(--bl-blue); }

/* Fields — "Minimalist design with a 1px border that darkens on focus. Labels
   sit clearly above the field." (DESIGN.md Components) */
body.bl-theme .mr-search input {
    background: var(--bl-stone);
    border-color: var(--mr-border);
    border-radius: var(--bl-radius);
}

body.bl-theme .mr-search input:focus,
body.bl-theme .form-control:focus,
body.bl-theme .form-select:focus {
    background-color: var(--bl-white);
    border-color: var(--bl-charcoal);
    box-shadow: 0 0 0 3px rgba(var(--bl-charcoal-rgb), 0.1);
}

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

/* --------------------------------------------------------------------------
   Hero (base-layer override) — a two-column split: the flat-lay photograph
   fills the left half edge-to-edge, the copy sits on a plain WHITE panel on
   the right. No scrim, because no text is ever composited over the photo.
   -------------------------------------------------------------------------- */
.bl-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    min-height: clamp(480px, 56vw, 700px);
    background-color: var(--bl-white);
}

.bl-hero__media {
    position: relative;
    overflow: hidden;
    background-color: var(--bl-fill);
}

.bl-hero__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The export desaturates its flat-lay hero very slightly ("flat-lay-img"). */
    filter: grayscale(10%) contrast(102%);
}

.bl-hero__panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--bl-white);
    padding: clamp(2rem, 5vw, 4rem);
}

.bl-hero__copy { max-width: 32rem; }

body.bl-theme .bl-hero__eyebrow {
    font-family: var(--bl-font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bl-blue);
    margin-bottom: 1rem;
}

body.bl-theme .bl-hero__title {
    font-family: var(--bl-font-head);
    font-size: clamp(2rem, 4vw, 2.5rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--bl-charcoal);
    margin-bottom: 1.5rem;
}

.bl-hero__lead {
    font-size: 1.125rem;
    line-height: 1.55;
    color: var(--bl-muted);
    margin-bottom: 2rem;
}

.bl-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* --------------------------------------------------------------------------
   Trust strip — the export stacks a small calm-blue glyph ABOVE a single
   tracked caps label and centres each column, where the base sets them side by
   side.
   -------------------------------------------------------------------------- */
body.bl-theme .mr-trust {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
}

body.bl-theme .mr-trust svg {
    width: 24px;
    height: 24px;
    color: var(--bl-blue);
}

body.bl-theme .mr-trust strong {
    font-family: var(--bl-font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--bl-ink);
}

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

/* --------------------------------------------------------------------------
   Department tiles (promo override) — a 4:5 photograph with the name and one
   line of copy stacked BELOW it. No scrim: this template never darkens its
   flat-lay photography.
   -------------------------------------------------------------------------- */
.bl-dept {
    display: block;
    text-decoration: none;
    color: inherit;
}

.bl-dept__media {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background-color: var(--bl-fill-high);
    margin-bottom: 1rem;
}

.bl-dept__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.bl-dept:hover .bl-dept__img { transform: scale(1.05); }

.bl-dept__img--placeholder {
    background: linear-gradient(135deg, var(--bl-fill), var(--bl-fill-high));
}

body.bl-theme .bl-dept__title {
    display: block;
    font-family: var(--bl-font-head);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.33;
    color: var(--bl-charcoal);
}

.bl-dept__caption {
    display: block;
    font-family: var(--bl-font-body);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--bl-muted);
}

/* --------------------------------------------------------------------------
   Restocked Weekly (featured override) — the export lifts this row onto a
   clean white band.
   -------------------------------------------------------------------------- */
.bl-restock { background-color: var(--bl-white); }

/* New In (new-arrivals override) — the pale stone band, 3:4 portrait media. */
.bl-newin { background-color: var(--bl-band); }

body.bl-theme .bl-newin .mr-card__media { aspect-ratio: 3 / 4; }

/* --------------------------------------------------------------------------
   Product card — "borderless or a very light neutral border… Titles are
   [display], prices are Inter (Rs. format)" (DESIGN.md Components). The card
   stays borderless like the export, so its text needs no inset.
   -------------------------------------------------------------------------- */
body.bl-theme .mr-card__media {
    background-color: var(--bl-stone);
    aspect-ratio: 1;
}

body.bl-theme .mr-card__eyebrow {
    font-family: var(--bl-font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--bl-soft);
    margin-bottom: 0.25rem;
}

body.bl-theme .mr-card__title {
    font-family: var(--bl-font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--bl-ink);
    margin-bottom: 0.25rem;
}

body.bl-theme .mr-card__title a { color: inherit; }
body.bl-theme .mr-card__title a:hover { color: var(--bl-blue); }

/* "All pricing must be formatted as Rs. [Amount] using the price-tag style"
   (DESIGN.md Typography) — Inter 18px semibold. */
body.bl-theme .mr-card__price {
    font-family: var(--bl-font-body);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--bl-ink);
}

/* The shared price component ships a theme-agnostic #d6293e sale ink and a
   #9aa0a6 strike-through — the first is far too loud for this palette and the
   second is only 2.4:1 on stone. Re-ink both (the export's category page shows
   the sale price in the calm blue with a muted strike beside it). */
body.bl-theme .mr-card__price del,
body.bl-theme .ll-price-compare {
    color: var(--bl-soft);
    font-size: 0.78em;
    font-weight: 400;
}

body.bl-theme .ll-price--sale { color: var(--bl-blue); }

/* The rating row is emitted with an inline `color:#f5a623` (about 2:1 on this
   canvas), so overriding it needs !important. Re-ink to the text-safe bronze
   (4.80:1) — it only renders on products that actually have reviews. */
body.bl-theme [data-testid="card-rating"] { color: var(--bl-bronze) !important; }

body.bl-theme .mr-stars { color: var(--bl-bronze); }

/* The SALE / Demo pill. It is positioned by the SHARED
   storefront::head.theme-vars block (`.mr-card__badge{position:absolute;…}`),
   which also gives it a theme-agnostic #d6293e fill and a 999px pill. Restate
   the geometry (so this rule is self-contained) and re-ink it calm blue with a
   white label (6.47:1), squared to the theme's small radius — the export
   renders "Sale" as a soft-square chip in the secondary colour. */
body.bl-theme .mr-card__badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
    background-color: var(--bl-blue);
    color: #fff;
    font-family: var(--bl-font-body);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

/* The two ROUND overlay controls — the wishlist heart AND the quick-view eye —
   are siblings with different names and must always be restyled together. Both
   keep the base's white-glass circle; the charcoal ink measures 13.79:1 at rest
   and the hover pair (--mr-ink on --mr-surface) 16.29:1, so both states clear
   the 3:1 WCAG minimum for UI components by a wide margin. The "saved" heart
   uses the calm blue (6.47:1 on the circle). */
body.bl-theme .mr-card__wish,
body.bl-theme .mr-card__quickview {
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--bl-charcoal);
    border-radius: 9999px;
}

body.bl-theme .mr-card__wish:hover,
body.bl-theme .mr-card__quickview:hover {
    background-color: var(--bl-white);
    color: var(--bl-ink);
}

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

/* Slide-up "Add to Cart" — solid charcoal with a tracked white label, like the
   export's primary action. */
body.bl-theme .mr-card__quick {
    background-color: var(--bl-charcoal);
    color: #fff;
    font-family: var(--bl-font-body);
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   The everyday system (base-layer-only section) — four hairline-bordered stone
   cards on the warm canvas, each a charcoal glyph above a short title and one
   line of plain fact.
   -------------------------------------------------------------------------- */
.bl-system__card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    background-color: var(--bl-fill);
    border: 1px solid var(--mr-border);
    border-radius: var(--bl-radius);
    padding: 2rem;
}

.bl-system__icon {
    display: inline-flex;
    color: var(--bl-charcoal);
}

.bl-system__icon svg {
    width: 1.875rem;
    height: 1.875rem;
}

body.bl-theme .bl-system__title {
    font-family: var(--bl-font-head);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.33;
    letter-spacing: -0.01em;
    color: var(--bl-charcoal);
    margin-bottom: 0.5rem;
}

.bl-system__text {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--bl-muted);
}

/* --------------------------------------------------------------------------
   Category tiles — inherited markup, restyled to the export's square
   photographic tiles with the name set bottom-LEFT. The base scrim is kept
   (and bottom-weighted) rather than reduced to the export's flat 10% wash,
   which cannot guarantee a readable white label over an arbitrary merchant
   photograph.
   -------------------------------------------------------------------------- */
body.bl-theme .mr-tile--cat {
    height: auto;
    aspect-ratio: 1;
    background-color: var(--bl-fill);
}

body.bl-theme .mr-tile--cat .mr-tile__scrim {
    display: block;
    background: linear-gradient(
        180deg,
        rgba(22, 25, 28, 0.1) 40%,
        rgba(22, 25, 28, 0.6) 100%
    );
    transition: background 0.3s ease;
}

body.bl-theme .mr-tile--cat:hover .mr-tile__scrim {
    background: linear-gradient(
        180deg,
        rgba(22, 25, 28, 0.2) 40%,
        rgba(22, 25, 28, 0.66) 100%
    );
}

/* The base centres this caption inside a flex scrim and sets it in tracked
   UPPERCASE; the export sets the department name bottom-left in sentence-case
   headline type, so both the flex centring and the text-transform have to be
   undone here, not just re-positioned. */
body.bl-theme .mr-tile--cat .mr-tile__cap {
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 1.5rem;
    text-align: left;
    font-family: var(--bl-font-head);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
    color: #fff;
}

/* The export centres this section's heading. */
body.bl-theme .mr-band .mr-display { text-align: center; }

/* --------------------------------------------------------------------------
   The Journal (journal override) — three stories under a hairline rule, each a
   16:9 cover over a calm-blue label, the Albert Sans title and a short excerpt.
   -------------------------------------------------------------------------- */
.bl-journal { border-top: 1px solid var(--mr-border); }

.bl-story__media {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background-color: var(--bl-fill);
}

.bl-story__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.bl-story__media:hover img { transform: scale(1.04); }

body.bl-theme .bl-story__label { font-size: 0.75rem; }

body.bl-theme .bl-story__title {
    font-family: var(--bl-font-head);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.33;
    letter-spacing: -0.01em;
}

body.bl-theme .bl-story__title a {
    color: var(--bl-charcoal);
    text-decoration: none;
    transition: color 0.2s ease;
}

body.bl-theme .bl-story__title a:hover { color: var(--bl-blue); }

.bl-story__excerpt {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--bl-muted);
}

/* --------------------------------------------------------------------------
   The Basics Brief (newsletter override) — a full-width charcoal band with a
   narrow centred column: heading, one line of copy, then the email field beside
   a white Subscribe plate. It sits directly above the charcoal footer, so the
   two read as one closing slab, exactly as the export does.
   -------------------------------------------------------------------------- */
.bl-brief {
    background-color: var(--bl-charcoal);
    color: #fff;
    padding-block: var(--mr-section-y);
}

.bl-brief__inner {
    max-width: 32rem;
    margin-inline: auto;
}

.bl-brief__eyebrow {
    font-family: var(--bl-font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bl-mist);
}

body.bl-theme .bl-brief__heading {
    font-family: var(--bl-font-head);
    font-size: clamp(1.9rem, 3.4vw, 2.5rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #fff;
    margin-bottom: 0.5rem;
}

.bl-brief__body {
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
    max-width: 34rem;
    margin-bottom: 2rem;
}

.bl-brief__form {
    display: flex;
    gap: 0.5rem;
    width: 100%;
}

.bl-brief__form input {
    flex: 1;
    min-width: 0;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--bl-radius);
    color: #fff;
    font-family: var(--bl-font-body);
    font-size: 0.95rem;
    padding: 0.75rem 1rem;
    transition: border-color 0.2s ease;
}

.bl-brief__form input::placeholder { color: rgba(255, 255, 255, 0.5); }

.bl-brief__form input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.4);
}

.bl-brief__btn {
    border: 0;
    border-radius: var(--bl-radius);
    background-color: #fff;
    color: var(--bl-charcoal);
    font-family: var(--bl-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 0.75rem 1.5rem;
    transition: background-color 0.25s ease;
}

.bl-brief__btn:hover:not(:disabled) { background-color: rgba(255, 255, 255, 0.9); }

/* Stub form (the subscription module is Phase 6) — keep the plate looking solid
   rather than Bootstrap-faded, but honest about being inert. */
.bl-brief__btn:disabled {
    opacity: 1;
    cursor: not-allowed;
}

.bl-brief__note {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
}

/* --------------------------------------------------------------------------
   Inherited component finishing — press strip, tabs, gallery, pagination,
   filter labels.
   -------------------------------------------------------------------------- */
body.bl-theme .mr-brandstrip span {
    font-family: var(--bl-font-head);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--bl-charcoal);
}

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

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

body.bl-theme .mr-filter__title,
body.bl-theme .mr-field-label,
body.bl-theme .mr-step__label {
    font-family: var(--bl-font-body);
    letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   Footer — the export's charcoal slab continuing straight on from the
   newsletter band. EVERY text token riding on it has to be re-inked, or the
   re-pointed light neutrals above (ink #1c1b1c, muted #45474a, soft #5f5e63)
   go invisible against the charcoal.
   -------------------------------------------------------------------------- */
body.bl-theme .mr-footer {
    background-color: var(--bl-charcoal);
    border-top: 0;
    color: rgba(255, 255, 255, 0.7);
}

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

body.bl-theme .mr-footer__brand {
    font-family: var(--bl-font-head);
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: -0.01em;
    color: #fff;
}

body.bl-theme .mr-footer a { color: rgba(255, 255, 255, 0.86); }
body.bl-theme .mr-footer a:hover { color: #fff; }

body.bl-theme .mr-footer .mr-muted { color: rgba(255, 255, 255, 0.7); }
body.bl-theme .mr-footer .mr-soft { color: rgba(255, 255, 255, 0.55); }
body.bl-theme .mr-footer .mr-divider { background-color: rgba(255, 255, 255, 0.12); }

/* The footer newsletter field sits on the slab, so it needs its own ink — and
   the base's "Join" button is .mr-btn--primary, i.e. a charcoal fill on a
   charcoal band (an invisible button). Invert it: white plate, charcoal label
   (13.79:1), like the export's white submit square. */
body.bl-theme .mr-footer .form-control {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

body.bl-theme .mr-footer .form-control::placeholder { color: rgba(255, 255, 255, 0.5); }

body.bl-theme .mr-footer .form-control:focus {
    background-color: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: none;
}

body.bl-theme .mr-footer .mr-btn--primary,
body.bl-theme .mr-footer .mr-btn--primary:hover,
body.bl-theme .mr-footer .mr-btn--primary:focus {
    background-color: #fff;
    color: var(--bl-charcoal);
}

body.bl-theme .mr-social {
    border-radius: var(--bl-radius);
    border-color: rgba(255, 255, 255, 0.2);
    background: transparent;
    color: rgba(255, 255, 255, 0.86);
}

body.bl-theme .mr-social:hover {
    background-color: #fff;
    border-color: #fff;
    color: var(--bl-charcoal);
}

/* --------------------------------------------------------------------------
   Focus accessibility — the base outlines with --ll-accent, and the Calm Blue
   on the charcoal footer / newsletter / announcement band measures 2.13:1, under
   the 3:1 WCAG minimum for non-text UI. Re-point the outline to the pale mist on
   those bands only (10.25:1); everywhere else the blue outline is 6.14:1 on
   stone and stays.
   -------------------------------------------------------------------------- */
body.bl-theme .mr-footer a:focus-visible,
body.bl-theme .mr-footer button:focus-visible,
body.bl-theme .mr-footer input:focus-visible,
body.bl-theme .bl-brief a:focus-visible,
body.bl-theme .bl-brief button:focus-visible,
body.bl-theme .bl-brief input:focus-visible,
body.bl-theme .mr-announce a:focus-visible,
body.bl-theme .mr-tile--cat:focus-visible {
    outline-color: var(--bl-mist);
}

/* --------------------------------------------------------------------------
   Reduced motion — every transform / zoom in this theme is decorative.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.bl-theme .mr-btn,
    body.bl-theme .bl-ulink,
    body.bl-theme .bl-dept__img,
    body.bl-theme .bl-story__media img,
    body.bl-theme .mr-card__media img,
    body.bl-theme .mr-tile__img,
    body.bl-theme .mr-tile--cat .mr-tile__scrim {
        transition: none;
    }

    /* The base's reduced-motion block only kills these transitions, not the
       hover transforms themselves. */
    body.bl-theme .bl-dept:hover .bl-dept__img,
    body.bl-theme .bl-story__media:hover img,
    body.bl-theme .mr-card:hover .mr-card__media img,
    body.bl-theme .mr-tile--cat:hover .mr-tile__media img {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Mobile — the export's narrow frame: the hero stacks with the copy panel
   ABOVE the photograph, the section headers keep the see-all link on the same
   row, the newsletter form goes full width and the display sizes step down to
   the design system's `headline-lg-mobile` (32px/40px).
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .bl-hero {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .bl-hero__panel {
        order: -1;
        padding: clamp(1.75rem, 6vw, 2.5rem) 1.25rem;
    }

    .bl-hero__media { aspect-ratio: 4 / 3; }

    body.bl-theme .bl-hero__title { font-size: 2rem; line-height: 1.25; }

    .bl-hero__lead { font-size: 1rem; margin-bottom: 1.5rem; }

    .bl-hero__actions > .mr-btn { flex: 1 1 auto; }

    body.bl-theme .mr-display { font-size: 2rem; line-height: 1.25; }

    .bl-section-head { margin-bottom: 2rem; }

    .bl-system__card { padding: 1.5rem; }

    body.bl-theme .bl-system__title,
    body.bl-theme .bl-dept__title,
    body.bl-theme .bl-story__title { font-size: 1.25rem; }

    .bl-brief__form { flex-direction: column; }

    .bl-brief__btn { width: 100%; }

    body.bl-theme .mr-tile--cat .mr-tile__cap {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        font-size: 1.1rem;
    }
}