/* ==========================================================================
   Frost Kitchen — a frozen & ready-to-cook food storefront (extends
   modern-retail).

   Ported from the Stitch "Frost Kitchen | Dinner, Solved" export
   (docs/templates/pending/stitch_57_frost_kitchen_e_commerce_homepage). The
   theme INHERITS every modern-retail page + partial and ships only its own
   brand layer plus seven home partials with `fk-*` markup. This stylesheet
   therefore has two jobs:

     (a) RE-POINT the base neutral tokens (--mr-*) at the frost-white /
         deep-blue / appetite-orange palette so every inherited page (shop /
         PDP / cart / checkout / account / blog) reads on-brand, and finish the
         inherited chrome (buttons, forms, header, trust, promo, card, footer);

     (b) style the theme's own `fk-*` sections — the split hero, the "Freezer
         Staples" see-all link, the deep-blue "Three Ways to Perfect" reheat
         band, the circular shop-by-category chips, the journal label chip and
         the centered "Freezer Fridays" newsletter.

   Everything is scoped under `body.fk-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
   deep-blue surface follows.

   Palette (from the export's rendered code.html + DESIGN.md prose; measured
   WCAG ratios in the comments below):
     Deep blue    #00324b (rendered `primary` — headings, header/nav ink, the
                  newsletter band, the footer; the theme.json primary_color.
                  13.48:1 on white, 12.61:1 on the canvas, 13.48:1 as a fill
                  under white text)
     Frost blue   #1b4965 (rendered `primary-container` — the announcement
                  ribbon and the reheat band; 9.60:1 as a fill under white)
     Appetite     #a93800 (rendered `secondary` — the accent_color. This is the
                  orange the export's OWN category + PDP frames use for ADD TO
                  CART, and it is the only orange safe in BOTH roles: 6.46:1 as
                  text on white / 6.04:1 on the canvas, and 6.46:1 as a fill
                  under a white label)
     Flame        #e5622d (the homepage's brighter `appetite-orange`. 3.43:1
                  either way, so it is NEVER used as text or as a fill behind a
                  label — only inside rgba() focus rings and the decorative
                  hero bloom. See the "orange discipline" note below)
     Ember        #8a2d00 (pressed/hover fill for the orange CTA — 8.55:1 under
                  white; the export brightens on hover, which would drop below
                  AA, so this theme deepens instead)
     Ice          #abedff on #001f26 (rendered `tertiary-fixed` — the newsletter
                  Subscribe button: 10.46:1 against the blue band, 13.31:1 for
                  its own label)
     Chip         #ffdbcf with #631d00 ink (rendered `secondary-fixed` — the
                  journal category label; 9.54:1)
     Frost white  #f4f8f9 canvas · #ffffff cards · #f0f4f5 / #eaeff0 tonal bands
     Ink          #181c1d · muted #41474d · soft #72787e · lines #dfe3e4/#c1c7ce
   ========================================================================== */

body.fk-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --fk-blue: var(--bs-primary, #00324b);
    --fk-blue-rgb: var(--bs-primary-rgb, 0, 50, 75);
    --fk-orange: var(--ll-accent, #a93800);
    --fk-radius: var(--ll-btn-radius, 0.5rem);
    --fk-font-head: var(--ll-font-headings, "Poppins"), system-ui, sans-serif;
    --fk-font-body: var(--ll-font-body, "Source Sans 3"), system-ui, -apple-system, sans-serif;

    /* Literal palette */
    --fk-blue-mid: #1b4965;
    --fk-orange-ember: #8a2d00;
    --fk-flame: #e5622d;
    --fk-ice: #abedff;
    --fk-ice-ink: #001f26;
    --fk-chip: #ffdbcf;
    --fk-chip-ink: #631d00;
    --fk-canvas: #f4f8f9;
    --fk-white: #ffffff;
    --fk-tonal: #f0f4f5;
    --fk-tonal-2: #eaeff0;
    --fk-tonal-3: #dfe3e4;
    --fk-ink: #181c1d;
    --fk-muted: #41474d;
    --fk-soft: #72787e;
    --fk-line: #dfe3e4;
    --fk-line-2: #c1c7ce;

    /* Depth — DESIGN.md "Tonal Layering": diffused, low-opacity, blue-tinted */
    --fk-shadow: 0 4px 20px rgba(0, 50, 75, 0.05);
    --fk-shadow-lg: 0 16px 36px -14px rgba(0, 50, 75, 0.22);

    /* Re-point the inherited base neutrals at the frost palette so every
       inherited mr-* surface (bands, borders, fills, muted text, radius) reads
       on-brand across every inherited page. */
    --mr-ink: var(--fk-ink);
    --mr-muted: var(--fk-muted);
    --mr-soft: var(--fk-soft);
    --mr-surface: var(--fk-white);
    --mr-band: var(--fk-tonal);
    --mr-band-alt: var(--fk-tonal-2);
    --mr-fill: var(--fk-tonal-3);
    --mr-border: var(--fk-line);
    --mr-border-strong: var(--fk-line-2);
    --mr-radius: var(--fk-radius);
    --mr-gold: var(--fk-orange);
    --mr-shadow: var(--fk-shadow);

    /* Bare prose links read deep blue rather than Bootstrap blue. Set the RGB
       token (NOT a bare `body.fk-theme a` rule — that out-specifies
       .mr-btn--primary's white label and blanks the hero CTA). */
    --bs-link-color-rgb: var(--fk-blue-rgb);
    --bs-link-hover-color-rgb: 27, 73, 101;

    background-color: var(--fk-canvas);
    color: var(--fk-ink);
    font-family: var(--fk-font-body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* ===== Typography ======================================================== */
/* DESIGN: headline-xl / lg / md are Poppins Semibold (600) with -0.02em
   tracking; body + labels are Source Sans 3. */
body.fk-theme h1, body.fk-theme h2, body.fk-theme h3,
body.fk-theme h4, body.fk-theme h5, body.fk-theme h6 {
    font-family: var(--fk-font-head);
    color: var(--fk-blue);
    font-weight: 600;
    letter-spacing: -0.01em;
}
body.fk-theme .mr-display { font-weight: 600; letter-spacing: -0.02em; font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
body.fk-theme .mr-headline { font-weight: 600; }

/* The eyebrow inherits --ll-accent, i.e. the text-safe appetite orange
   (6.04:1 on the canvas). label-sm is Source Sans 3 600 with 0.05em tracking;
   the export tracks the hero eyebrow wider still. */
body.fk-theme .mr-eyebrow {
    font-family: var(--fk-font-body);
    color: var(--fk-orange);
    font-weight: 700;
    letter-spacing: 0.16em;
}
body.fk-theme .fk-subline { color: var(--fk-muted); font-size: 1rem; }

/* ===== Buttons (8px "Standard Roundedness") ============================== */
/* DESIGN "Buttons": Primary = Appetite Orange fill + white label, no gradient;
   Secondary = 2px Deep Blue outline with Deep Blue text. The orange used is
   the text-safe #a93800 the export's own category/PDP frames render. */
body.fk-theme .mr-btn {
    font-family: var(--fk-font-body);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: none;
    border-radius: var(--fk-radius);
    padding: 0.95rem 2rem;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.1s;
}
body.fk-theme .mr-btn--hero { padding: 1.05rem 2.25rem; }
body.fk-theme .mr-btn--primary { background-color: var(--fk-orange); color: #fff; }
/* The export brightens on hover; brightening this orange falls to 3.4:1 under
   a white label, so deepen to the ember instead (8.55:1). */
body.fk-theme .mr-btn--primary:hover,
body.fk-theme .mr-btn--primary:focus-visible { background-color: var(--fk-orange-ember); color: #fff; filter: none; }
body.fk-theme .mr-btn--outline { border-width: 2px; border-color: var(--fk-blue); color: var(--fk-blue); }
body.fk-theme .mr-btn--outline:hover { background-color: var(--fk-blue); color: #fff; }
body.fk-theme .mr-btn--light { background-color: #fff; color: var(--fk-blue); }
body.fk-theme .mr-btn--light:hover { background-color: var(--fk-ice); color: var(--fk-ice-ink); }
body.fk-theme .mr-btn--on-dark { border-width: 2px; border-color: rgba(255, 255, 255, 0.8); color: #fff; }
body.fk-theme .mr-btn--on-dark:hover { background-color: #fff; color: var(--fk-blue); }
body.fk-theme .mr-btn--ghost { color: var(--fk-blue); }
body.fk-theme .mr-btn--ghost:hover { color: var(--fk-orange); }
/* Re-assert the primary label explicitly (known-defect guard: any bare-anchor
   colour rule would otherwise repaint an <a>-based CTA's label). */
body.fk-theme .mr-btn.mr-btn--primary { color: #fff; }

/* The export's hero "Iftar Bundles" secondary: 2px deep-blue keyline on the
   frost canvas, inverting to a solid blue fill on hover. */
body.fk-theme .fk-btn-outline {
    border: 2px solid var(--fk-blue);
    background-color: var(--fk-white);
    color: var(--fk-blue);
}
body.fk-theme .fk-btn-outline:hover { background-color: var(--fk-blue); color: #fff; }

body.fk-theme .mr-ulink { color: var(--fk-blue); }
body.fk-theme .mr-ulink:hover { color: var(--fk-orange); border-color: var(--fk-orange); }
body.fk-theme .mr-rail-btn { border-radius: var(--fk-radius); }
body.fk-theme .mr-rail-btn:hover { background: var(--fk-blue); border-color: var(--fk-blue); color: #fff; }

/* ===== Forms (frost field, deep-blue keyline; amber-free focus ring) ===== */
/* DESIGN "Input Fields": frost-white field with a 1px deep-blue border at 20%
   opacity, going to full opacity when active. */
body.fk-theme .form-control,
body.fk-theme .form-select {
    border-radius: var(--fk-radius);
    border-color: rgba(var(--fk-blue-rgb), 0.2);
    background-color: var(--fk-white);
    color: var(--fk-ink);
}
body.fk-theme .form-control:focus,
body.fk-theme .form-select:focus {
    border-color: var(--fk-blue);
    box-shadow: 0 0 0 3px rgba(229, 98, 45, 0.28);
}
/* Never a padding shorthand on the select — it eats Bootstrap's caret gutter
   and the option text renders under the arrow. */
body.fk-theme .form-select { padding-inline-end: 2.25rem; }
body.fk-theme .form-check-input:checked { background-color: var(--fk-orange); border-color: var(--fk-orange); }
body.fk-theme .form-label { color: var(--fk-blue); }

/* ===== Announcement ribbon (frost blue — the export's top bar) =========== */
/* The base builds this from color-mix(accent, black), which would render a
   near-brown band; the export's ribbon is the mid deep-blue. */
body.fk-theme .mr-announce {
    background-color: var(--fk-blue-mid);
    color: #fff;
    font-family: var(--fk-font-body);
    letter-spacing: 0.05em;
    text-transform: none;
    font-size: 0.8rem;
    padding: 0.6rem 1rem;
}
body.fk-theme .mr-announce a { color: var(--fk-ice); }

/* ===== Header (sticky "frost glass" bar) ================================= */
body.fk-theme .mr-header {
    background-color: rgba(246, 250, 251, 0.9);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom-color: rgba(var(--fk-blue-rgb), 0.08);
    box-shadow: 0 1px 2px rgba(0, 50, 75, 0.04);
}
body.fk-theme .mr-logo {
    font-family: var(--fk-font-head);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--fk-blue);
}
body.fk-theme .mr-nav-link { font-weight: 600; font-size: 0.95rem; color: var(--fk-muted); }
body.fk-theme .mr-nav-link:hover { color: var(--fk-orange); }
body.fk-theme .mr-nav-link.is-active { color: var(--fk-orange); border-bottom-color: var(--fk-orange); }
body.fk-theme .mr-icon-btn { color: var(--fk-blue); border-radius: 9999px; }
body.fk-theme .mr-icon-btn:hover { color: var(--fk-orange); background-color: var(--fk-tonal-2); }
body.fk-theme .mr-search input { border-radius: var(--fk-radius); background-color: var(--fk-tonal-2); border-color: var(--fk-line); }
body.fk-theme .mr-search input:focus {
    background-color: var(--fk-white);
    border-color: var(--fk-blue);
    box-shadow: 0 0 0 3px rgba(229, 98, 45, 0.28);
}
/* Cart / wishlist counters: the export's orange pill with a white digit
   (6.46:1). */
body.fk-theme .mr-badge,
body.fk-theme .mr-badge--wish { background-color: var(--fk-orange); color: #fff; }

/* ===== fk-hero — split copy/photograph on the frost canvas =============== */
body.fk-theme .fk-hero {
    background-color: var(--fk-canvas);
    padding-block: clamp(48px, 7vw, 84px);
    overflow: hidden;
}
body.fk-theme .fk-hero__eyebrow { margin-bottom: 1rem; letter-spacing: 0.2em; }
body.fk-theme .fk-hero__title {
    font-family: var(--fk-font-head);
    font-size: clamp(2.15rem, 4.4vw, 2.9rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--fk-blue);
    margin-bottom: 1.5rem;
}
body.fk-theme .fk-hero__lead {
    max-width: 30rem;
    color: var(--fk-muted);
    font-size: 1.08rem;
    line-height: 1.62;
    margin-bottom: 2.25rem;
}
body.fk-theme .fk-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
body.fk-theme .fk-hero__figure { position: relative; }
body.fk-theme .fk-hero__img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    aspect-ratio: 1.79;
    object-fit: cover;
    border-radius: calc(var(--fk-radius) * 1.5);
    box-shadow: var(--fk-shadow);
}
/* Decorative "frost bloom" behind the photo (the export's blurred ice-blue
   orb). Purely ornamental — carries no copy. */
body.fk-theme .fk-hero__bloom {
    position: absolute;
    top: -2.5rem;
    right: -2.5rem;
    width: 12rem;
    height: 12rem;
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(161, 204, 237, 0.5), rgba(229, 98, 45, 0.12) 65%, transparent 72%);
    filter: blur(28px);
    pointer-events: none;
}

/* ===== Trust strip — centered icon-over-label (the export's 4-up band) === */
body.fk-theme .mr-trust {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
}
body.fk-theme .mr-trust svg { color: var(--fk-blue); width: 30px; height: 30px; }
body.fk-theme .mr-trust strong {
    color: var(--fk-ink);
    font-family: var(--fk-font-body);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: none;
}
body.fk-theme .mr-trust span { color: var(--fk-soft); font-size: 0.8rem; }

/* ===== fk-promo — collection tiles under a deep-blue gradient ============ */
body.fk-theme .mr-promo {
    aspect-ratio: 3 / 3.4;
    border-radius: calc(var(--fk-radius) * 1.5);
    box-shadow: var(--fk-shadow);
}
body.fk-theme .mr-promo__scrim {
    background: linear-gradient(180deg, rgba(0, 50, 75, 0) 30%, rgba(0, 50, 75, 0.8) 100%);
}
body.fk-theme .mr-promo:hover .mr-promo__scrim {
    background: linear-gradient(180deg, rgba(0, 50, 75, 0.14) 20%, rgba(0, 50, 75, 0.86) 100%);
}
body.fk-theme .mr-promo__title { font-family: var(--fk-font-head); font-weight: 600; margin-bottom: 0.5rem; }
body.fk-theme .fk-promo__text {
    display: block;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.92rem;
    margin-bottom: 1rem;
}
/* The export's tile link is a WHITE underlined label, not an accent one. The
   base recolours it to the accent on hover through a `:hover` DESCENDANT
   selector (0,0,3,0) — override that selector too or it wins. */
body.fk-theme .mr-promo__cta,
body.fk-theme .mr-promo:hover .mr-promo__cta {
    font-family: var(--fk-font-body);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    color: #fff;
    border-bottom-color: #fff;
    padding-bottom: 0.3rem;
}
body.fk-theme .mr-promo:hover .mr-promo__cta { color: var(--fk-ice); border-bottom-color: var(--fk-ice); }

/* ===== fk-featured / fk-arrivals ======================================== */
body.fk-theme .fk-featured { background-color: var(--fk-white); }
body.fk-theme .fk-arrivals { background-color: var(--fk-canvas); }
/* "View All Products" — the export's bold orange link (6.04:1 on white). */
body.fk-theme .fk-see-all {
    font-family: var(--fk-font-body);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--fk-orange);
    text-decoration: none;
}
body.fk-theme .fk-see-all:hover { color: var(--fk-orange-ember); text-decoration: underline; }

/* ===== Product card — white surface, 12px corners, square media ========== */
/* DESIGN "Product Cards": solid white, 8px radius, full-bleed top image, price
   bottom-right in Appetite Orange. The base card is borderless with flush
   text, so adding a keyline + surface means the text MUST be inset. */
body.fk-theme .mr-card {
    background-color: var(--fk-white);
    border: 1px solid var(--fk-line);
    border-radius: calc(var(--fk-radius) * 1.5);
    overflow: hidden;
    box-shadow: var(--fk-shadow);
    transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
body.fk-theme .mr-card:hover {
    box-shadow: var(--fk-shadow-lg);
    border-color: var(--fk-line-2);
    transform: translateY(-4px);
}
body.fk-theme .mr-card__media { margin-bottom: 0; border-radius: 0; aspect-ratio: 1 / 1; background-color: var(--fk-tonal-2); }
body.fk-theme .mr-card__eyebrow,
body.fk-theme .mr-card__title,
body.fk-theme .mr-card__price,
body.fk-theme .mr-card [data-testid="card-rating"] { padding-inline: 1rem; }
body.fk-theme .mr-card__media + * { padding-top: 1rem; }
body.fk-theme .mr-card__eyebrow { color: var(--fk-soft); }
body.fk-theme .mr-card__title {
    font-family: var(--fk-font-head);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--fk-blue);
}
body.fk-theme .mr-card__title a { color: inherit; }
body.fk-theme .mr-card__title a:hover { color: var(--fk-orange); }
/* price-display: Poppins 600 / 20px, in Appetite Orange. */
body.fk-theme .mr-card__price {
    padding-bottom: 1.15rem;
    font-family: var(--fk-font-head);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--fk-orange);
}
body.fk-theme .mr-card__price del { color: var(--fk-soft); font-weight: 400; font-size: 0.8rem; }
body.fk-theme .mr-card__price .ll-price-compare { color: var(--fk-soft); }

/* Sale / demo badge — the export's orange tag with a white label (6.46:1).
   The base styles .mr-card__sale but the partial emits .mr-card__badge. */
body.fk-theme .mr-card__badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2;
    background-color: var(--fk-orange);
    color: #fff;
    font-family: var(--fk-font-body);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.28rem 0.6rem;
    border-radius: calc(var(--fk-radius) * 0.6);
}
body.fk-theme .mr-sale-tag { background-color: var(--fk-orange); color: #fff; }

/* Round overlay controls — restyled TOGETHER, contrast-checked in BOTH states.
   Deep blue on near-white = 13.48:1; appetite orange on white = 6.46:1 — both
   clear the 3:1 WCAG minimum for UI components. */
body.fk-theme .mr-card__wish,
body.fk-theme .mr-card__quickview {
    color: var(--fk-blue);
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 8px rgba(0, 50, 75, 0.12);
}
body.fk-theme .mr-card__wish:hover,
body.fk-theme .mr-card__quickview:hover {
    color: #fff;
    background-color: var(--fk-orange);
}
body.fk-theme .mr-card__wish.is-active { color: var(--fk-orange); }
/* Slide-up Add to Cart — the export's orange CTA with a white label. */
body.fk-theme .mr-card__quick {
    background-color: var(--fk-orange);
    color: #fff;
    font-family: var(--fk-font-body);
    font-weight: 700;
    letter-spacing: 0.08em;
}
body.fk-theme .mr-card__quick:hover { background-color: var(--fk-orange-ember); color: #fff; }

/* ===== fk-heat — the deep-blue "Three Ways to Perfect" reheat band ======= */
body.fk-theme .fk-heat {
    position: relative;
    overflow: hidden;
    background-color: var(--fk-blue-mid);
    color: #fff;
    padding-block: clamp(56px, 9vw, 84px);
}
/* Faint pinstripe texture (the export loaded a CDN texture PNG; reproduced as
   a pure-CSS gradient so nothing leaves the origin). */
body.fk-theme .fk-heat__texture {
    position: absolute;
    inset: 0;
    opacity: 0.06;
    pointer-events: none;
    background-image: repeating-linear-gradient(45deg, #fff 0 1px, transparent 1px 6px);
}
body.fk-theme .fk-heat__shell { position: relative; z-index: 1; }
body.fk-theme .fk-heat__title { color: #fff; margin-bottom: clamp(2.25rem, 5vw, 3.25rem); }
body.fk-theme .fk-heat__item { display: flex; flex-direction: column; align-items: center; }
body.fk-theme .fk-heat__ring {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 9999px;
    color: #fff;
}
body.fk-theme .fk-heat__ring svg { width: 30px; height: 30px; }
body.fk-theme .fk-heat__method {
    font-family: var(--fk-font-head);
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.5rem;
}
body.fk-theme .fk-heat__line { color: rgba(255, 255, 255, 0.82); font-size: 1rem; }

/* ===== fk-catband — circular category chips on the tonal band =========== */
body.fk-theme .fk-catband { background-color: var(--fk-tonal); padding-block: clamp(48px, 8vw, 80px); }
body.fk-theme .fk-catband__title { font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
body.fk-theme .fk-catband__tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
}
body.fk-theme .fk-catband__circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 168px;
    aspect-ratio: 1;
    border-radius: 9999px;
    background-color: var(--fk-white);
    border: 1px solid rgba(var(--fk-blue-rgb), 0.12);
    box-shadow: var(--fk-shadow);
    color: var(--fk-blue);
    transition: transform 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}
body.fk-theme .fk-catband__circle svg { width: 42px; height: 42px; }
body.fk-theme .fk-catband__tile:hover .fk-catband__circle {
    transform: scale(1.05);
    box-shadow: var(--fk-shadow-lg);
    color: var(--fk-orange);
}
body.fk-theme .fk-catband__label {
    font-family: var(--fk-font-body);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fk-ink);
}
body.fk-theme .fk-catband__tile:hover .fk-catband__label { color: var(--fk-orange); }

/* ===== fk-journal — story cards with a peach label chip ================== */
body.fk-theme .fk-journal { background-color: var(--fk-canvas); }
body.fk-theme .fk-article__media { aspect-ratio: 16 / 10; border-radius: calc(var(--fk-radius) * 1.5); }
body.fk-theme .mr-article__title { font-family: var(--fk-font-head); font-size: 1.3rem; font-weight: 600; }
body.fk-theme .mr-article__title a { color: var(--fk-blue); }
body.fk-theme .mr-article__title a:hover { color: var(--fk-orange); }
/* The export's category label is a peach chip with deep-ember ink (9.54:1). */
body.fk-theme .fk-chip {
    display: inline-block;
    background-color: var(--fk-chip);
    color: var(--fk-chip-ink);
    font-family: var(--fk-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.3rem 0.7rem;
    border-radius: calc(var(--fk-radius) * 0.75);
}

/* ===== fk-cta — the centered deep-blue "Freezer Fridays" band =========== */
body.fk-theme .fk-cta {
    background-color: var(--fk-blue);
    color: #fff;
    padding-block: clamp(56px, 9vw, 88px);
}
body.fk-theme .fk-cta__eyebrow { color: var(--fk-ice); }
body.fk-theme .fk-cta__title { color: #fff; }
body.fk-theme .fk-cta__body { max-width: 42rem; color: rgba(255, 255, 255, 0.82); font-size: 1.08rem; }
body.fk-theme .fk-cta__form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    max-width: 34rem;
    justify-content: center;
}
body.fk-theme .fk-cta__form input {
    flex: 1;
    min-width: 13rem;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--fk-radius);
    color: #fff;
    padding: 0.95rem 1.35rem;
    font-size: 1rem;
}
body.fk-theme .fk-cta__form input::placeholder { color: rgba(255, 255, 255, 0.55); }
body.fk-theme .fk-cta__form input:focus {
    outline: none;
    border-color: var(--fk-ice);
    box-shadow: 0 0 0 3px rgba(171, 237, 255, 0.3);
}
/* Ice-blue Subscribe button with its own dark ink (13.31:1 label, 10.46:1
   against the band). */
body.fk-theme .fk-cta__btn {
    background-color: var(--fk-ice);
    color: var(--fk-ice-ink);
    border: 0;
    border-radius: var(--fk-radius);
    font-family: var(--fk-font-body);
    font-weight: 700;
    padding: 0.95rem 2.25rem;
    cursor: pointer;
    transition: background-color 0.2s;
}
body.fk-theme .fk-cta__btn:hover { background-color: #7fd2e8; }
body.fk-theme .fk-cta__note { color: rgba(255, 255, 255, 0.6); font-size: 0.82rem; }

/* ===== Footer (inherited mr-footer) — deep-blue panel ==================== */
/* The base footer is a light band; the export's footer is deep blue with light
   text. Recolour the surface AND every text token that rides on it, or the
   re-pointed dark --mr-muted / --mr-soft render invisible on the blue band. */
body.fk-theme .mr-footer {
    background-color: var(--fk-blue);
    border-top-color: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.72);
}
body.fk-theme .mr-footer h4 { color: #fff; }
body.fk-theme .mr-footer .mr-footer__brand { color: #fff; font-family: var(--fk-font-head); }
body.fk-theme .mr-footer a { color: rgba(255, 255, 255, 0.75); }
body.fk-theme .mr-footer a:hover { color: #fff; }
body.fk-theme .mr-footer .mr-muted { color: rgba(255, 255, 255, 0.75); }
body.fk-theme .mr-footer .mr-soft { color: rgba(255, 255, 255, 0.55); }
body.fk-theme .mr-footer .mr-divider { background-color: rgba(255, 255, 255, 0.12); }
body.fk-theme .mr-footer .form-control {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}
body.fk-theme .mr-footer .form-control::placeholder { color: rgba(255, 255, 255, 0.45); }
body.fk-theme .mr-social { border-color: rgba(255, 255, 255, 0.22); color: #fff; }
body.fk-theme .mr-social:hover { background-color: var(--fk-ice); border-color: var(--fk-ice); color: var(--fk-ice-ink); }

/* ===== PDP / cart / checkout / account finishing (inherited pages) ======= */
body.fk-theme .mr-crumbs a:hover,
body.fk-theme .mr-cart-row__title a:hover { color: var(--fk-orange); }
body.fk-theme .mr-cart-row__title a,
body.fk-theme .mr-filter__title { color: var(--fk-blue); }
body.fk-theme .mr-stars { color: var(--fk-orange); }
body.fk-theme .mr-sale { background-color: var(--fk-orange); color: #fff; }
body.fk-theme .mr-tabs .nav-link.active { color: var(--fk-blue); border-bottom-color: var(--fk-orange); }
body.fk-theme .mr-filter__link:hover,
body.fk-theme .mr-filter__link.is-active { color: var(--fk-orange); }
body.fk-theme .mr-page { border-radius: var(--fk-radius); }
body.fk-theme .mr-page:hover { border-color: var(--fk-blue); color: var(--fk-blue); }
body.fk-theme .mr-page.is-active { background-color: var(--fk-orange); border-color: var(--fk-orange); color: #fff; }
body.fk-theme .mr-acct-link.is-active { background-color: var(--fk-blue); color: #fff; }
body.fk-theme .mr-acct-avatar { background-color: var(--fk-blue); color: #fff; font-family: var(--fk-font-head); }
body.fk-theme .mr-gallery__main,
body.fk-theme .mr-summary,
body.fk-theme .mr-panel,
body.fk-theme .mr-acct-nav { border-radius: calc(var(--fk-radius) * 1.5); }
body.fk-theme .mr-gallery__thumb.is-active { border-color: var(--fk-orange); }
body.fk-theme .mr-step.is-done .mr-step__dot,
body.fk-theme .mr-step.is-current .mr-step__dot { border-color: var(--fk-blue); }
body.fk-theme .mr-step.is-done .mr-step__dot { background-color: var(--fk-blue); color: #fff; }
body.fk-theme .mr-step.is-current .mr-step__dot { color: var(--fk-blue); }
body.fk-theme .mr-status { background-color: var(--fk-tonal-2); color: var(--fk-muted); }

/* ===== Accessibility — recolour focus outlines, never remove them ======== */
body.fk-theme a:focus-visible,
body.fk-theme button:focus-visible,
body.fk-theme input:focus-visible,
body.fk-theme select:focus-visible,
body.fk-theme textarea:focus-visible {
    outline: 2px solid var(--fk-blue);
    outline-offset: 2px;
}

/* ===== Motion preferences ================================================ */
@media (prefers-reduced-motion: reduce) {
    body.fk-theme .mr-card:hover { transform: none; }
    body.fk-theme .fk-catband__tile:hover .fk-catband__circle { transform: none; }
    body.fk-theme .mr-card,
    body.fk-theme .mr-card__media img,
    body.fk-theme .mr-promo__img,
    body.fk-theme .fk-catband__circle,
    body.fk-theme .mr-article__media img { transition: none; }
}

/* ===== Mobile (from the export's 390px mobile frames) ==================== */
@media (max-width: 991.98px) {
    body.fk-theme { font-size: 15.5px; }
    body.fk-theme .fk-hero { padding-block: clamp(32px, 8vw, 56px); }
    body.fk-theme .fk-hero__title { font-size: clamp(1.9rem, 8vw, 2.35rem); }
    body.fk-theme .fk-hero__lead { margin-bottom: 1.75rem; }
    body.fk-theme .fk-hero__bloom { display: none; }
    body.fk-theme .mr-promo { aspect-ratio: 4 / 3.4; }
    body.fk-theme .mr-promo__cap { left: 1.35rem; right: 1.35rem; bottom: 1.35rem; }
    body.fk-theme .fk-heat,
    body.fk-theme .fk-catband,
    body.fk-theme .fk-cta { padding-block: clamp(40px, 10vw, 64px); }
    body.fk-theme .fk-heat__title { margin-bottom: 2rem; }
    body.fk-theme .fk-catband__circle { max-width: 120px; }
    body.fk-theme .fk-catband__circle svg { width: 32px; height: 32px; }
    body.fk-theme .fk-catband__label { font-size: 0.72rem; letter-spacing: 0.1em; }
    body.fk-theme .fk-cta__form { flex-direction: column; }
    body.fk-theme .fk-cta__btn { width: 100%; }
}