/* ==========================================================================
   filament — "Luminous Noir" brand layer over modern-retail.

   Ported from the Google Stitch export
   (docs/templates/pending/stitch_51_filament_lighting_store_homepage — the
   "Luminous Noir" DESIGN.md is the design-system source).
   The design system: a warm near-black charcoal canvas that mimics a lighting
   showroom at dusk, filament-amber used for CTAs / keylines / prices / eyebrows
   (it "represents the light source"), warm-ivory ink (never pure white for a
   soft incandescent feel), tonal layering instead of shadows, and a soft 4px
   (0.25rem) corner radius. Playfair Display headlines + Inter body/UI/prices.

   This is the platform's 7th color_scheme:"dark" theme. This stylesheet has
   two jobs:
     (a) style filament's OWN sections (fl-* — glow-guide band + newsletter);
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
         base neutral tokens at the charcoal palette and drawing the amber
         keyline structure. That single re-point is the only reason shop / PDP
         / cart / checkout / account / blog turn dark without a page override.

   Everything is scoped under `body.fl-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
   amber surface follows. The canvas/surface/ink triad is deliberately NOT
   bound to a customizer token (there is no "canvas" or "ink" token in the
   5-token contract) — they are CSS literals lifted straight from DESIGN.md,
   exactly like aurume's charcoal/ivory and oud-noir's aubergine/parchment.

   Contrast notes (ivory #f2e9db is the primary ink; measured against the
   warm-charcoal canvas #25211c and the two lifted surfaces):
     - ivory #f2e9db on canvas #25211c ....... ~12.7:1 (AA/AAA body text)
     - ivory #f2e9db on surface #2f2b26 ...... ~11.2:1
     - ivory #f2e9db on surface-high #39342f . ~9.7:1
     - amber-bright #ffbf6c on canvas ......... ~9.2:1 (eyebrows/prices/links)
     - amber #e8a13d on canvas ................ ~6.7:1 (as text — passes AA)
     - charcoal #25211c on an amber #e8a13d FILL ~6.7:1 (button label) — so
       every amber-filled surface prints CHARCOAL ink, never white
       (white-on-amber measures ~2.0:1 and fails), per DESIGN.md's own
       component spec ("Solid Filament Amber background with Warm Charcoal
       text").
   ========================================================================== */

body.fl-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --fl-amber: var(--bs-primary, #e8a13d);
    --fl-amber-rgb: var(--bs-primary-rgb, 232, 161, 61);
    --fl-amber-bright: var(--ll-accent, #ffbf6c);
    --fl-font-head: var(--ll-font-headings, "Playfair Display"), Georgia, serif;
    --fl-font-body: var(--ll-font-body, "Inter"), system-ui, -apple-system, sans-serif;

    /* Luminous Noir palette. Canvas follows DESIGN.md's PROSE (#25211C "Warm
       Charcoal") over its YAML frontmatter (#16130e) — the prose + rendered
       export use the warmer, lighter charcoal. The surface ladder is a tonal
       stack around that canvas: two RECESSED tones below it (footer, the
       glow-guide band) and two LIFTED tones above it (cards/nav, then the
       trust strip / newsletter / category tiles). Literals by design. */
    --fl-canvas: #25211c;         /* Warm Charcoal — the main page surface */
    --fl-deep: #1a1712;           /* recessed lowest — footer */
    --fl-low: #1f1b17;            /* recessed band — glow-guide */
    --fl-surface: #2f2b26;        /* Elevated Charcoal — cards, nav, promo, media */
    --fl-surface-mid: #332f29;    /* lifted step — card hover / modal / bg-light */
    --fl-high: #39342f;           /* highest — trust strip, newsletter, category tiles */
    --fl-input: #201c17;          /* dark input field */
    --fl-ivory: #f2e9db;          /* Warm Ivory — primary text */
    --fl-muted: #d6c3b0;          /* DESIGN.md on-surface-variant */
    --fl-soft: #9f8e7c;           /* DESIGN.md outline — placeholders / small print */
    --fl-ink-on-amber: #25211c;   /* charcoal ink printed on an amber FILL */
    --fl-error: #ffb4ab;          /* DESIGN.md error — light red, legible on dark */

    /* Amber keyline — the design's structural device (promo frames, category
       hover, dividers). A dim tint carries generic chrome; the full tone marks
       lit keylines. */
    --fl-line: rgba(var(--fl-amber-rgb), 0.22);
    --fl-line-strong: var(--fl-amber);
    /* A neutral hairline for card/table/generic borders where an amber tint
       would read as "lit" incorrectly. */
    --fl-hairline: rgba(159, 142, 124, 0.18);

    /* Re-point the inherited base neutrals at the charcoal palette so every
       inherited mr-* surface (bands, borders, fills, muted text) follows.
       This block alone inverts shop / PDP / cart / checkout / account / blog. */
    --mr-ink: var(--fl-ivory);
    --mr-muted: var(--fl-muted);
    --mr-soft: var(--fl-soft);
    --mr-surface: var(--fl-canvas);
    --mr-band: var(--fl-low);
    --mr-band-alt: var(--fl-surface-mid);
    --mr-fill: var(--fl-surface);
    --mr-border: var(--fl-hairline);
    --mr-border-strong: var(--fl-line-strong);
    --mr-radius: 0.25rem;
    --mr-gold: var(--fl-amber-bright);
    --mr-shadow: none;

    background-color: var(--fl-canvas);
    color: var(--fl-ivory);
    font-family: var(--fl-font-body);
    font-size: 16px;
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Bootstrap dark-surface + shared-partial tokens.

   The --mr-* re-point above covers every INHERITED mr-* surface, but
   Bootstrap's OWN components and the SHARED storefront:: partials read
   Bootstrap's OWN custom properties, which nothing above touches — so they
   stay Bootstrap's stock light-mode values and go unreadable on the dark
   canvas. None of these partials are theme-owned (CLAUDE.md: themes cannot
   fork them), so the only fix is re-pointing the tokens they read:
     - .modal-content (quick-view body) sat on white --bs-modal-bg;
     - reviews.blade.php's "Write a review" .card sat on white --bs-card-bg;
     - product-facets.blade.php's h6.bg-light facet headings sat on near-white
       --bs-light-rgb;
     - .text-muted (reviews count / "no reviews" / form hints) reads
       --bs-secondary-color, a LITERAL rgba(33,37,41,.75) → ~1.2:1 on dark;
     - bare prose links + .btn-link read --bs-link-color(-rgb); their hover
       reads --bs-link-hover-color(-rgb) and otherwise falls to stock blue;
     - form validation (.invalid-feedback / :invalid) reads
       --bs-form-invalid-color, a LITERAL #dc3545 → ~3.5:1 on dark panels;
     - the shared .ll-price--sale (theme-vars) hard-codes #d6293e → ~3.3:1.
   -------------------------------------------------------------------------- */
body.fl-theme {
    --bs-body-bg: var(--fl-canvas);
    --bs-body-color: var(--fl-ivory);
    --bs-modal-bg: var(--fl-surface-mid);
    --bs-modal-color: var(--fl-ivory);
    --bs-card-bg: var(--fl-surface-mid);
    --bs-card-color: var(--fl-ivory);
    --bs-secondary-bg: var(--fl-surface-mid);
    --bs-tertiary-bg: var(--fl-surface);
    --bs-emphasis-color: var(--fl-ivory);
    --bs-border-color: var(--fl-hairline);
    /* .bg-light reads --bs-light-rgb — #332f29 (--fl-surface-mid) as a triplet. */
    --bs-light-rgb: 51, 47, 41;
    /* .text-muted / .text-secondary — warm-ivory muted instead of dark grey. */
    --bs-secondary-color: var(--fl-muted);
    --bs-secondary-color-rgb: 214, 195, 176;
    /* Links — amber, hover to the brighter amber (never stock Bootstrap blue). */
    --bs-link-color: var(--fl-amber-bright);
    --bs-link-color-rgb: 255, 191, 108;
    --bs-link-hover-color: var(--fl-amber-bright);
    --bs-link-hover-color-rgb: 255, 191, 108;
    /* Form validation copy — a light red legible on the dark panels. */
    --bs-form-invalid-color: var(--fl-error);
    --bs-form-invalid-border-color: var(--fl-error);
}

body.fl-theme .modal-content {
    background-color: var(--fl-surface-mid);
    color: var(--fl-ivory);
}

body.fl-theme .card {
    background-color: var(--fl-surface-mid);
    color: var(--fl-ivory);
    border-color: var(--fl-hairline);
}

body.fl-theme .bg-light {
    /* Bootstrap's own rule carries !important on this declaration. */
    background-color: var(--fl-surface-mid) !important;
}

/* The shared sale price (theme-vars emits `.ll-price--sale{color:#d6293e}`
   unscoped, ~3.3:1 on this canvas). Re-ink to the export's amber so the visible
   PDP/card sale price matches the Offer JSON-LD source and passes contrast. */
body.fl-theme .ll-price--sale {
    color: var(--fl-amber-bright);
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
body.fl-theme h1,
body.fl-theme h2,
body.fl-theme h3,
body.fl-theme h4,
body.fl-theme h5,
body.fl-theme h6,
body.fl-theme .mr-display,
body.fl-theme .mr-logo {
    font-family: var(--fl-font-head);
    font-weight: 700;
    color: var(--fl-ivory);
    /* DESIGN.md headline-xl: -0.02em */
    letter-spacing: -0.02em;
}

body.fl-theme .mr-display {
    font-size: clamp(2rem, 3.4vw, 3.5rem);
    line-height: 1.15;
}

/* DESIGN.md label-md is Inter 600 / 0.05em, but the exported eyebrows track
   wider (tracking-widest); the render wins. Amber-bright, as the export does. */
body.fl-theme .mr-eyebrow {
    font-family: var(--fl-font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fl-amber-bright);
}

/* Bare prose links ink amber; the primary/ghost buttons below re-assert their
   own label colours at higher specificity so this catch-all never repaints a
   button's text (the documented light-primary trap). */
body.fl-theme a {
    color: var(--fl-ivory);
}

body.fl-theme a:hover {
    color: var(--fl-amber-bright);
}

/* --------------------------------------------------------------------------
   Buttons & form controls — amber fill, charcoal ink, uppercase, tracked.
   Soft 0.25rem radius per DESIGN.md (radius comes from --ll-btn-radius on
   .btn; .mr-btn set explicitly).
   -------------------------------------------------------------------------- */
body.fl-theme .mr-btn {
    font-family: var(--fl-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 1rem 2.5rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* White-on-amber measures ~2.0:1 (fails) — DESIGN.md prints Warm Charcoal ink
   on every amber fill instead (~6.7:1). Specificity (0,2,1) beats the bare-`a`
   rule (0,1,1), so an `<a>`-based .mr-btn--primary keeps its charcoal label. */
body.fl-theme .mr-btn--primary,
body.fl-theme .btn-primary {
    background-color: var(--fl-amber);
    border-color: var(--fl-amber);
    color: var(--fl-ink-on-amber);
}

body.fl-theme .mr-btn--primary:hover,
body.fl-theme .btn-primary:hover,
body.fl-theme .btn-primary:focus,
body.fl-theme .btn-primary:active {
    background-color: var(--fl-amber-bright);
    border-color: var(--fl-amber-bright);
    color: var(--fl-ink-on-amber);
}

/* Ghost buttons ("Explore Floor Lamps") — amber keyline, amber-bright text,
   faint amber wash on hover (matches the export's hover:bg-primary/10). */
body.fl-theme .mr-btn--outline,
body.fl-theme .mr-btn--on-dark {
    background-color: transparent;
    border-color: var(--fl-amber);
    color: var(--fl-amber-bright);
}

body.fl-theme .mr-btn--outline:hover,
body.fl-theme .mr-btn--on-dark:hover {
    background-color: rgba(var(--fl-amber-rgb), 0.12);
    border-color: var(--fl-amber-bright);
    color: var(--fl-amber-bright);
}

body.fl-theme .form-control,
body.fl-theme .form-select {
    background-color: var(--fl-input);
    border: 1px solid var(--fl-hairline);
    color: var(--fl-ivory);
}

/* Bootstrap's caret is a background-image with a hard-coded dark stroke
   (#343a40, ~1.5:1 on this field) — re-draw it in warm ivory. */
body.fl-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='%23f2e9db' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    /* Base app.css applies a padding SHORTHAND to .form-control+.form-select,
       which eats Bootstrap's 2.25rem caret gutter — restore it (logical prop,
       flips for RTL) so option text never runs under the arrow. */
    padding-inline-end: 2.25rem;
}

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

body.fl-theme .form-control:focus,
body.fl-theme .form-select:focus {
    background-color: var(--fl-input);
    border-color: var(--fl-amber);
    color: var(--fl-ivory);
    box-shadow: none !important;
}

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

body.fl-theme .dropdown-item {
    color: var(--fl-ivory);
}

body.fl-theme .dropdown-item:hover,
body.fl-theme .dropdown-item:focus {
    background-color: var(--fl-surface-mid);
    color: var(--fl-amber-bright);
}

body.fl-theme .offcanvas {
    background-color: var(--fl-canvas);
    color: var(--fl-ivory);
}

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

body.fl-theme .mr-divider {
    border-color: var(--fl-hairline);
}

/* --------------------------------------------------------------------------
   Announcement band + header (inherited logo-left single row — the export's
   layout matches the base markup exactly, so only the skin is restyled).
   -------------------------------------------------------------------------- */
body.fl-theme .mr-announce {
    background-color: var(--fl-canvas);
    color: var(--fl-muted);
    border-bottom: 1px solid var(--fl-hairline);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-align: center;
    padding: 0.55rem 1rem;
    text-transform: none;
}

body.fl-theme .mr-header {
    background-color: rgba(47, 43, 38, 0.95);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--fl-hairline);
}

body.fl-theme .mr-logo {
    font-family: var(--fl-font-head);
    font-weight: 700;
    color: var(--fl-ivory);
    letter-spacing: -0.01em;
}

body.fl-theme .mr-nav-link {
    font-family: var(--fl-font-body);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: none;
    color: var(--fl-muted);
    background: transparent;
    border: 0;
    text-decoration: none;
    transition: color 0.25s ease;
}

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

body.fl-theme .mr-icon-btn {
    color: var(--fl-muted);
    background: transparent;
    border: 0;
}

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

/* The header search field sits on the dark header. */
body.fl-theme .mr-search input {
    background-color: var(--fl-input);
    border: 1px solid var(--fl-hairline);
    color: var(--fl-ivory);
}

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

/* --------------------------------------------------------------------------
   Hero (inherited markup — full-bleed image + overlay + copy). The overlay is
   RE-TINTED in charcoal, never removed — it is the only thing keeping the
   ivory <h1> readable over an arbitrary merchant photo.
   -------------------------------------------------------------------------- */
body.fl-theme .mr-hero__overlay {
    background: linear-gradient(90deg, rgba(37, 33, 28, 0.86) 0%, rgba(37, 33, 28, 0.55) 48%, rgba(37, 33, 28, 0.2) 100%);
}

body.fl-theme .mr-hero__copy h1,
body.fl-theme .mr-hero__copy .mr-display {
    color: var(--fl-ivory);
}

/* Base hardcodes the hero eyebrow to #fff; the export's ("THE EVENING
   COLLECTION") is amber (text-primary). */
body.fl-theme .mr-hero .mr-hero__copy .mr-eyebrow {
    color: var(--fl-amber-bright);
}

/* --------------------------------------------------------------------------
   Promo tiles — moody photo inside an amber keyline frame, subtle glow on
   hover (DESIGN.md: "Featured items are encased in a 1px Filament Amber
   border"; the glow replaces a drop shadow).
   -------------------------------------------------------------------------- */
body.fl-theme .mr-promo {
    border: 1px solid var(--fl-line);
    background-color: var(--fl-surface);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

body.fl-theme .mr-promo:hover {
    border-color: var(--fl-amber);
    box-shadow: 0 0 12px rgba(var(--fl-amber-rgb), 0.2);
}

body.fl-theme .mr-promo__title {
    font-family: var(--fl-font-head);
    color: var(--fl-ivory);
}

/* Export "SHOP NOW" is amber uppercase with no underline. */
body.fl-theme .mr-promo__cta {
    color: var(--fl-amber-bright);
    border-bottom-color: transparent;
    letter-spacing: 0.2em;
    padding-bottom: 0;
}

body.fl-theme .mr-promo:hover .mr-promo__cta {
    color: var(--fl-amber-bright);
    border-color: transparent;
}

/* --------------------------------------------------------------------------
   Product cards (inherited) — borderless, media on an elevated surface, amber
   price accents. Card + text stay flush (no card border/background), so no
   text inset is needed.
   -------------------------------------------------------------------------- */
body.fl-theme .mr-card {
    background-color: transparent;
    border: 0;
}

body.fl-theme .mr-card__media {
    background-color: var(--fl-surface);
    border-radius: 0.25rem;
}

body.fl-theme .mr-card__title {
    font-family: var(--fl-font-body);
    font-weight: 400;
    color: var(--fl-ivory);
}

body.fl-theme .mr-card__title a {
    color: var(--fl-ivory);
}

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

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

/* DESIGN.md price-display: Inter 500 / prefixed "Rs." — in amber. */
body.fl-theme .mr-card__price,
body.fl-theme .ll-price {
    font-family: var(--fl-font-body);
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--fl-amber-bright);
}

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

/* The slide-up "Add to Cart" button — dark glass, inverts to amber on hover
   (white-on-amber would fail, so hover inks charcoal). */
body.fl-theme .mr-card__quick {
    background-color: rgba(26, 23, 18, 0.9);
    color: var(--fl-ivory);
    border: 1px solid var(--fl-hairline);
}

body.fl-theme .mr-card__quick:hover {
    background-color: var(--fl-amber);
    color: var(--fl-ink-on-amber);
    border-color: var(--fl-amber);
}

/* The two floating icon affordances. `__wish` and `__quickview` are SIBLINGS
   with different names — restyle them together or the quick-view eye keeps the
   base's near-white circle + `color: var(--bs-primary)` (amber-on-white,
   ~2:1). Default state prints ivory on a dark-glass badge (>10:1); hover fills
   amber and swaps to charcoal ink (~6.7:1). They stay circular (the base
   9999px radius is untouched — no flatten block on this soft theme). */
body.fl-theme .mr-card__wish,
body.fl-theme .mr-card__quickview {
    background-color: rgba(26, 23, 18, 0.82);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: var(--fl-ivory);
    border: 1px solid var(--fl-hairline);
}

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

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

/* --------------------------------------------------------------------------
   Inherited bands — trust strip, featured, categories (data-driven product
   tiles). The --mr-* re-point already darkens them; only accents need help.
   -------------------------------------------------------------------------- */
body.fl-theme .mr-band--alt {
    background-color: var(--fl-surface-mid);
}

body.fl-theme .mr-band {
    background-color: var(--fl-low);
}

/* Trust strip icons + rail chevrons print amber. */
body.fl-theme .mr-trust svg,
body.fl-theme .mr-trust__icon {
    color: var(--fl-amber-bright);
}

/* Category tiles — dim the media, brighten on hover, amber-ivory caption over
   a charcoal scrim (the base scrim/cap are already flex-centered). */
body.fl-theme .mr-tile__media img {
    opacity: 0.7;
    transition: opacity 0.4s ease, transform 0.7s ease;
}

body.fl-theme .mr-tile--cat:hover .mr-tile__media img {
    opacity: 0.95;
}

body.fl-theme .mr-tile__scrim {
    background: linear-gradient(to top, rgba(26, 23, 18, 0.85) 0%, rgba(26, 23, 18, 0.25) 100%);
}

body.fl-theme .mr-tile__cap {
    font-family: var(--fl-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fl-ivory);
}

body.fl-theme .mr-tile--cat:hover .mr-tile__cap {
    color: var(--fl-amber-bright);
}

body.fl-theme .mr-tile__placeholder {
    background: var(--fl-surface);
}

/* --------------------------------------------------------------------------
   glow-guide ("Layer Your Light") — filament-only recessed band: centered
   serif heading over three columns (amber title + muted copy) split by faint
   vertical keylines. A dark-on-dark band, so it reads the palette directly.
   -------------------------------------------------------------------------- */
body.fl-theme .fl-glow {
    background-color: var(--fl-low);
    padding-block: clamp(64px, 8vw, 112px);
}

body.fl-theme .fl-glow__title {
    color: var(--fl-ivory);
}

body.fl-theme .fl-glow__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: clamp(2rem, 4vw, 3rem);
}

body.fl-theme .fl-glow__col {
    padding: 1.5rem 2rem;
    border-right: 1px solid var(--fl-hairline);
}

body.fl-theme .fl-glow__col:last-child {
    border-right: 0;
}

body.fl-theme .fl-glow__label {
    font-family: var(--fl-font-head);
    font-weight: 700;
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    color: var(--fl-amber-bright);
    margin-bottom: 0.65rem;
}

body.fl-theme .fl-glow__text {
    color: var(--fl-muted);
    font-size: 0.95rem;
    max-width: 30ch;
    margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Newsletter ("After Dark") — centered heading, horizontal email + amber
   button on the highest surface.
   -------------------------------------------------------------------------- */
body.fl-theme .fl-cta {
    background-color: var(--fl-high);
    border-top: 1px solid var(--fl-hairline);
    border-bottom: 1px solid var(--fl-hairline);
    padding: 6rem 0;
}

body.fl-theme .fl-cta__eyebrow {
    color: var(--fl-amber-bright);
}

body.fl-theme .fl-cta__title {
    color: var(--fl-ivory);
}

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

body.fl-theme .fl-cta__form {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 1rem;
    max-width: 34rem;
    flex-wrap: wrap;
}

body.fl-theme .fl-cta__form input {
    flex: 1 1 16rem;
    background-color: var(--fl-canvas);
    border: 1px solid var(--fl-hairline);
    border-radius: 0.25rem;
    color: var(--fl-ivory);
    padding: 0.9rem 1.25rem;
    font-size: 0.95rem;
}

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

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

body.fl-theme .fl-cta__btn {
    background-color: var(--fl-amber);
    color: var(--fl-ink-on-amber);
    border: 0;
    border-radius: 0.25rem;
    padding: 0.9rem 2.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

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

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

/* --------------------------------------------------------------------------
   Inherited component finishing — journal, footer, tables
   -------------------------------------------------------------------------- */
/* Journal category chip ("GUIDE" / "TUTORIAL" / "INSPIRATION") — the export
   renders it as a plain amber uppercase label; the base already renders it as
   an eyebrow paragraph right after the cover image, which our .mr-eyebrow rule
   inks amber. The card surface + border come from the --bs-card / --mr-border
   re-points above. Just give the article media a hairline. */
body.fl-theme .mr-article__media {
    border: 1px solid var(--fl-hairline);
    border-radius: 0.25rem;
    overflow: hidden;
}

body.fl-theme .mr-article__title a {
    color: var(--fl-ivory);
}

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

body.fl-theme .mr-footer {
    background-color: var(--fl-deep);
    border-top: 1px solid var(--fl-hairline);
    color: var(--fl-muted);
}

body.fl-theme .mr-footer__brand,
body.fl-theme .mr-footer h2,
body.fl-theme .mr-footer h3 {
    font-family: var(--fl-font-head);
    color: var(--fl-amber-bright);
}

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

body.fl-theme .mr-ulink:hover,
body.fl-theme .mr-footer a:hover {
    color: var(--fl-amber-bright);
}

/* `.mr-social` IS the anchor in the base footer partial. */
body.fl-theme .mr-social {
    border: 1px solid var(--fl-hairline);
    color: var(--fl-ivory);
}

body.fl-theme .mr-social:hover {
    background-color: var(--fl-amber);
    border-color: var(--fl-amber);
    color: var(--fl-ink-on-amber);
}

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

/* --------------------------------------------------------------------------
   Light-primary guard — every inherited base rule that FILLS with the amber
   --bs-primary and hard-codes `color:#fff` on top (~2:1). Ink them charcoal
   (the same on-amber pair the buttons use, ~6.7:1). See gotchas: pulse batch.
   -------------------------------------------------------------------------- */
body.fl-theme .mr-badge,
body.fl-theme .mr-page.is-active,
body.fl-theme .mr-acct-avatar,
body.fl-theme .mr-acct-link.is-active,
body.fl-theme .mr-rail-btn:hover,
body.fl-theme .mr-step.is-done .mr-step__dot {
    color: var(--fl-ink-on-amber);
}

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

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

@media (max-width: 991.98px) {
    body.fl-theme .mr-display {
        letter-spacing: -0.01em;
    }

    body.fl-theme .fl-glow__grid {
        grid-template-columns: 1fr;
    }

    body.fl-theme .fl-glow__col {
        border-right: 0;
        border-bottom: 1px solid var(--fl-hairline);
        padding-block: 1.75rem;
    }

    body.fl-theme .fl-glow__col:last-child {
        border-bottom: 0;
    }

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

    body.fl-theme .fl-cta__form {
        flex-direction: column;
        align-items: stretch;
    }

    body.fl-theme .fl-cta__btn {
        white-space: normal;
    }
}