/* ==========================================================================
   Zabiha Fresh — spotless modern butchery for halal meat, poultry and
   qurbani bookings.

   Ported from the Stitch "Zabiha Fresh" design (the Premium Halal Butchery
   System design system lives at docs/templates/pending/
   stitch_65_zabiha_fresh_e_commerce_homepage/…/premium_halal_butchery_system/
   DESIGN.md): a clinical off-white canvas with pure-white cards on hairline
   outlines, deep butcher-maroon structure and calls to action, a fresh-green
   accent reserved for certification/freshness signals, Poppins headlines and
   prices over Source Sans 3 body/UI, and a consistent 8px radius (16px on
   large product cards) with tonal layers instead of heavy shadows.

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

     (a) style the NEW `zf-*` markup into the Stitch design; and
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
         base neutral tokens at the spotless palette, dressing the
         announcement bar, newsletter band and footer in maroon, and inking
         the product card price in the maroon price-display role.

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

   CONTRAST (measured with App\Support\Theming\ContrastChecker):
     - primary maroon #8e1f2f is DARK — 8.80:1 on white, 8.39:1 on the
       off-white canvas — so it is safe as text, as an icon and as a fill
       carrying white text (white-on-maroon is the same 8.80:1). It is used
       for every heading, price, logo, button fill, the announcement bar,
       the cut-guide band, the newsletter band and the footer.
     - accent fresh-green #2e7d4f is comfortably dark too — 5.05:1 on white,
       4.81:1 on the canvas, and white-on-green is 5.05:1 (the hero
       certification pill). It clears AA as text and the 3:1 non-text
       minimum as an icon on every band used here (4.57:1 on the
       surface-container-low trust strip).
       ONE role needs a darker sibling: the journal category CHIP puts the
       green on a pale-green tint (#eaf6ef), where #2e7d4f slips under the
       4.5:1 normal-text minimum. --zf-green-ink (#266b44) covers it at
       5.79:1 on that tint and 6.42:1 on white.
     - the design's own "outline" token #8b7171 measures 4.47:1 on white —
       marginally under the 4.5:1 normal-text minimum, and --mr-soft carries
       real small text (card eyebrows, breadcrumbs, captions). --zf-soft
       (#70605f) is a deliberately darkened value in the same warm-grey
       family: 5.95:1 on white.
     - the newsletter heading uses the design's on-primary-container rose
       #ffa1a4 on the maroon band — 4.56:1, clears AA.
     - inherited hover states that reach for the accent on a DARK photo
       scrim (.mr-promo__cta) are re-pointed at the pale
       secondary-container green #a1f1b9 (8.56:1 over a mid-tone scrim); the
       raw green would sit at 2.25:1 there.
   ========================================================================== */

body.zf-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --zf-maroon: var(--bs-primary, #8e1f2f);
    --zf-maroon-rgb: var(--bs-primary-rgb, 142, 31, 47);
    /* 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 maroon. NOTE: deliberately NOT a
       bare `body.zf-theme a` colour rule — that would out-specify the base
       `.mr-btn--primary { color:#fff }` and blank out the hero CTA's label. */
    --bs-link-color-rgb: var(--zf-maroon-rgb);
    --zf-green: var(--ll-accent, #2e7d4f);
    /* AA-safe TEXT variant of the accent for the pale-green journal chip —
       see the CONTRAST note above. */
    --zf-green-ink: #266b44;
    --zf-green-pale: #eaf6ef;       /* secondary/10 chip tint                */
    --zf-green-bright: #a1f1b9;     /* secondary-container — dark-scrim only */
    --zf-radius: var(--bs-border-radius, 0.5rem);
    --zf-radius-card: 1rem;         /* DESIGN.md "Shapes": 16px on cards     */
    --zf-font-head: var(--ll-font-headings, "Poppins"), system-ui, -apple-system, sans-serif;
    --zf-font-body: var(--ll-font-body, "Source Sans 3"), system-ui, -apple-system, sans-serif;

    /* Spotless butchery palette (DESIGN.md tonal layers) */
    --zf-maroon-deep: #6e021b;      /* DESIGN.md primary — deepest maroon    */
    --zf-rose: #ffa1a4;             /* on-primary-container                  */
    --zf-canvas: #f8faf9;           /* background / surface                  */
    --zf-white: #ffffff;            /* surface-container-lowest (cards)      */
    --zf-low: #f2f4f3;              /* surface-container-low                 */
    --zf-container: #eceeed;        /* surface-container                     */
    --zf-high: #e6e9e8;             /* surface-container-high                */
    --zf-ink: #191c1c;              /* on-surface                            */
    --zf-muted: #574142;            /* on-surface-variant — 9.37:1 on white  */
    --zf-soft: #70605f;             /* darkened "outline" — see CONTRAST     */
    --zf-line: #e2e8e5;             /* DESIGN.md card hairline               */

    /* Depth — tonal layers, never muddy shadows. Only the primary action
       gets a soft maroon-tinted ambient lift (DESIGN.md "Elevation"). */
    --zf-shadow: 0 10px 24px -12px rgba(var(--zf-maroon-rgb), 0.28);

    /* Re-point the inherited base neutrals at the spotless palette so every
       inherited mr-* surface (bands, borders, fills, muted text) follows —
       this single block restyles shop / PDP / cart / checkout / account /
       blog without a page override. */
    --mr-ink: var(--zf-ink);
    --mr-muted: var(--zf-muted);
    --mr-soft: var(--zf-soft);
    --mr-surface: var(--zf-white);
    --mr-band: var(--zf-low);
    --mr-band-alt: var(--zf-container);
    --mr-fill: var(--zf-high);
    --mr-border: var(--zf-line);
    --mr-border-strong: #cbd5d0;
    --mr-radius: var(--zf-radius);
    --mr-gold: #8a6410;             /* review stars — 5.37:1 on white        */
    --mr-shadow: var(--zf-shadow);

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

/* --------------------------------------------------------------------------
   Shape discipline — a consistent 8px radius on interactive elements and
   imagery, 16px on product cards. NEVER a padding shorthand on .form-select
   (it would collapse Bootstrap's reserved 2.25rem caret gutter — the base
   app.css already restores it with padding-inline-end, untouched here).
   -------------------------------------------------------------------------- */
body.zf-theme .form-control,
body.zf-theme .form-select,
body.zf-theme .dropdown-menu,
body.zf-theme .offcanvas,
body.zf-theme .mr-promo,
body.zf-theme .mr-promo__img,
body.zf-theme .mr-article__media {
    border-radius: var(--zf-radius);
}

/* --------------------------------------------------------------------------
   Typography — Poppins semibold authority for headings (the design's
   headline scale), Source Sans 3 for everything else, green tracked
   eyebrows.
   -------------------------------------------------------------------------- */
body.zf-theme h1, body.zf-theme h2, body.zf-theme h3,
body.zf-theme h4, body.zf-theme h5, body.zf-theme h6 {
    font-family: var(--zf-font-head);
    color: var(--zf-maroon);
    font-weight: 600;
    letter-spacing: -0.01em;
}

body.zf-theme .mr-display {
    font-weight: 700;
    letter-spacing: -0.02em;
}

body.zf-theme .mr-eyebrow,
body.zf-theme .zf-eyebrow {
    font-family: var(--zf-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--zf-green-ink);
}

/* Quiet sub-line under a section heading (featured.subheading). */
body.zf-theme .zf-subline {
    color: var(--zf-muted);
    font-size: 1rem;
}

/* Soft fresh-green chip — the journal category label. */
body.zf-theme .zf-chip {
    display: inline-block;
    background: var(--zf-green-pale);
    color: var(--zf-green-ink);
    border-radius: 0.25rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   Buttons — solid maroon primary with the soft ambient lift; a 2px
   maroon-outline secondary (DESIGN.md "Buttons").
   -------------------------------------------------------------------------- */
body.zf-theme .mr-btn {
    border-radius: var(--zf-radius);
    font-family: var(--zf-font-body);
    font-weight: 600;
    letter-spacing: 0.05em;
    transition: filter 0.25s ease, background-color 0.25s ease, color 0.25s ease, transform 0.1s ease;
}

body.zf-theme .mr-btn--primary {
    background-color: var(--zf-maroon);
    border-color: var(--zf-maroon);
    color: #fff;
    box-shadow: var(--zf-shadow);
}

body.zf-theme .mr-btn--primary:hover {
    filter: brightness(1.14);
    color: #fff;
}

body.zf-theme .mr-btn--outline {
    border-color: var(--zf-maroon);
    color: var(--zf-maroon);
}

body.zf-theme .mr-btn--outline:hover {
    background-color: var(--zf-maroon);
    color: #fff;
}

/* Hero secondary — a 2px maroon keyline over the bright scrim, with a
   translucent white plate so it stays readable over any merchant photo. */
body.zf-theme .zf-btn-outline {
    border: 2px solid var(--zf-maroon);
    color: var(--zf-maroon);
    background: rgba(255, 255, 255, 0.72);
}

body.zf-theme .zf-btn-outline:hover {
    background: var(--zf-maroon);
    border-color: var(--zf-maroon);
    color: #fff;
}

body.zf-theme .zf-btn-hero { padding: 1rem 2.25rem; }

/* The "View All Staples" keyline link. */
body.zf-theme .zf-keyline-link {
    color: var(--zf-maroon);
    text-decoration: none;
    font-family: var(--zf-font-body);
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: 0.03em;
    white-space: nowrap;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid var(--zf-maroon);
    transition: color 0.2s ease, border-color 0.2s ease;
}

body.zf-theme .zf-keyline-link::after { content: " \2192"; }

body.zf-theme .zf-keyline-link:hover {
    color: var(--zf-green-ink);
    border-color: var(--zf-green-ink);
}

/* Inputs — white fields on the hairline outline, a 2px maroon focus ring
   (DESIGN.md "Input Fields"). */
body.zf-theme .form-control,
body.zf-theme .form-select {
    background-color: var(--zf-white);
    border-color: var(--zf-line);
    color: var(--zf-ink);
}

body.zf-theme .form-control:focus,
body.zf-theme .form-select:focus {
    border-color: var(--zf-maroon);
    box-shadow: 0 0 0 2px rgba(var(--zf-maroon-rgb), 0.28);
}

/* The border override above out-specifies Bootstrap's own
   `.form-control.is-invalid` rule, which would silently swallow the red
   validation state on every checkout/auth form — re-assert it (and the valid
   state) explicitly. */
body.zf-theme .form-control.is-invalid,
body.zf-theme .form-select.is-invalid,
body.zf-theme .was-validated .form-control:invalid,
body.zf-theme .was-validated .form-select:invalid {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
}

body.zf-theme .form-control.is-invalid:focus,
body.zf-theme .form-select.is-invalid:focus,
body.zf-theme .was-validated .form-control:invalid:focus,
body.zf-theme .was-validated .form-select:invalid:focus {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

body.zf-theme .form-control.is-valid,
body.zf-theme .form-select.is-valid,
body.zf-theme .was-validated .form-control:valid,
body.zf-theme .was-validated .form-select:valid {
    border-color: var(--bs-form-valid-border-color, #198754);
}

/* --------------------------------------------------------------------------
   Announcement + header — the maroon "cut fresh after you order" band, then
   the bright white header under a maroon-tinted hairline: Poppins wordmark,
   quiet Source Sans nav with a maroon active underline.
   -------------------------------------------------------------------------- */
body.zf-theme .mr-announce {
    background-color: var(--zf-maroon);
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.05em;
    font-size: 0.78rem;
    font-weight: 600;
}

body.zf-theme .mr-header {
    background-color: var(--zf-white);
    border-bottom-color: rgba(var(--zf-maroon-rgb), 0.12);
    box-shadow: 0 1px 2px rgba(25, 28, 28, 0.04);
}

body.zf-theme .mr-logo {
    font-family: var(--zf-font-head);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--zf-maroon);
}

body.zf-theme .mr-nav-link {
    font-family: var(--zf-font-body);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--zf-muted);
}

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

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

body.zf-theme .mr-search input {
    background: var(--zf-low);
    border-color: var(--zf-line);
    border-radius: 9999px;
}

body.zf-theme .mr-search input:focus {
    background: var(--zf-white);
    border-color: var(--zf-maroon);
    box-shadow: none;
}

body.zf-theme .mr-icon-btn { color: var(--zf-maroon); }
body.zf-theme .mr-icon-btn:hover { color: var(--zf-green-ink); }

/* --------------------------------------------------------------------------
   Hero (zf-hero) — the export INVERTS the base's polarity: a bright veil
   over the butcher-counter photograph with deep-maroon type on top, rather
   than white type over a dark scrim. The overlay is re-TINTED (never
   removed — it is the only thing guaranteeing the headline stays readable
   over an arbitrary merchant upload).
   -------------------------------------------------------------------------- */
body.zf-theme .zf-hero {
    min-height: clamp(460px, 62vh, 600px);
    color: var(--zf-ink);
    background-color: var(--zf-container);
}

body.zf-theme .zf-hero .mr-hero__overlay {
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.94) 0%,
        rgba(255, 255, 255, 0.82) 34%,
        rgba(255, 255, 255, 0.4) 62%,
        rgba(255, 255, 255, 0.06) 100%);
}

body.zf-theme .zf-hero__copy { max-width: 620px; }

/* The certification pill — white on the fresh green (5.05:1). */
body.zf-theme .zf-hero__badge {
    display: inline-block;
    background: var(--zf-green);
    color: #fff;
    border-radius: 9999px;
    padding: 0.3rem 1rem;
    margin-bottom: 1.5rem;
    font-family: var(--zf-font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Out-specifies the base `.mr-hero .mr-hero__copy h1` (0,2,1) white rule. */
body.zf-theme .zf-hero .zf-hero__copy h1.zf-hero__title {
    color: var(--zf-maroon);
    font-size: clamp(2.1rem, 4.2vw, 3rem);
    line-height: 1.12;
    margin-bottom: 1.25rem;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}

body.zf-theme .zf-hero__lead {
    color: var(--zf-muted);
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 46ch;
    margin-bottom: 2rem;
}

/* --------------------------------------------------------------------------
   Trust strip (inherited mr-trust) — the export centers an icon over one
   uppercase label on the surface-container-low band. Green icons measure
   4.57:1 there, well over the 3:1 non-text minimum.
   -------------------------------------------------------------------------- */
body.zf-theme .mr-trust {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
}

body.zf-theme .mr-trust svg { color: var(--zf-green); width: 28px; height: 28px; }

body.zf-theme .mr-trust strong {
    font-family: var(--zf-font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--zf-maroon);
}

body.zf-theme .mr-trust span { color: var(--zf-soft); }

body.zf-theme .mr-band--alt.border-bottom {
    background-color: var(--zf-low);
    border-bottom-color: var(--zf-line) !important;
}

/* --------------------------------------------------------------------------
   Promo tiles (inherited mr-promo) — the Beef & Mutton / Chicken Everyday /
   Qurbani Booking tiles. The base's dark-scrim caption already pairs white
   type with a dark photo backdrop; only the hover ink needs re-pointing —
   the raw green measures 2.25:1 over a mid-tone scrim, so the pale
   secondary-container green is used there instead. Both the base selector
   AND its :hover descendant are overridden (the base's
   `.mr-promo:hover .mr-promo__cta` is (0,0,3,0) and would otherwise win).
   -------------------------------------------------------------------------- */
body.zf-theme .mr-promo { aspect-ratio: 4 / 3; }

body.zf-theme .mr-promo__title {
    font-family: var(--zf-font-head);
    font-weight: 600;
    margin-bottom: 0.35rem;
}

body.zf-theme .mr-promo__cta {
    border-bottom-color: transparent;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.85);
}

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

/* --------------------------------------------------------------------------
   Product cards (inherited mr-card) — DESIGN.md: pure-white card, thin
   hairline, 16px radius, Poppins title, maroon Poppins price. A bordered
   card MUST inset its own text (the base card is borderless, so its title
   and price sit flush by design).
   -------------------------------------------------------------------------- */
body.zf-theme .mr-card {
    background: var(--zf-white);
    border: 1px solid var(--zf-line);
    border-radius: var(--zf-radius-card);
    overflow: hidden;
    height: 100%;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

body.zf-theme .mr-card:hover {
    border-color: rgba(var(--zf-maroon-rgb), 0.28);
    box-shadow: var(--zf-shadow);
}

body.zf-theme .mr-card__media {
    background-color: var(--zf-low);
    border-radius: 0;
    margin-bottom: 1rem;
}

body.zf-theme .mr-card > p,
body.zf-theme .mr-card > h3 { padding-inline: 1.15rem; }
body.zf-theme .mr-card > *:last-child { padding-bottom: 1.25rem; }

body.zf-theme .mr-card__title,
body.zf-theme .mr-card__title a {
    font-family: var(--zf-font-head);
    font-weight: 600;
    color: var(--zf-ink);
}

body.zf-theme .mr-card__title a:hover { color: var(--zf-maroon); }

body.zf-theme .mr-card__eyebrow {
    color: var(--zf-soft);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

body.zf-theme .mr-card__price {
    font-family: var(--zf-font-head);
    color: var(--zf-maroon);
    font-weight: 600;
    font-size: 1.05rem;
}

body.zf-theme .mr-card__price del { color: var(--zf-soft); font-weight: 400; }

body.zf-theme .mr-card__badge {
    background: var(--zf-maroon);
    color: #fff;
    border-radius: 0.25rem;
    letter-spacing: 0.05em;
}

/* The two round overlay controls are SIBLINGS with different names — restyle
   them together. Resting: maroon on the translucent white circle (8.80:1);
   hover: the base's own --mr-ink on --mr-surface pair (ink #191c1c on white
   = 17.15:1). The "saved" heart state would otherwise ink with the raw
   accent; the green measures 5.05:1 on white, so it is safe, but the maroon
   reads as the brand's own "saved" mark. */
body.zf-theme .mr-card__wish,
body.zf-theme .mr-card__quickview {
    color: var(--zf-maroon);
    border-radius: 9999px;
}

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

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

body.zf-theme .mr-card__quick {
    background: var(--zf-maroon);
    color: #fff;
    font-family: var(--zf-font-body);
    letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   Featured ("Kitchen Staples") + specials ("This Week's Specials") — the
   staples grid sits on the white surface, the specials grid on the tinted
   container band, per the export's alternating rhythm.
   -------------------------------------------------------------------------- */
body.zf-theme .zf-featured { background: var(--zf-white); }
body.zf-theme .zf-arrivals { background: var(--zf-low); }

/* --------------------------------------------------------------------------
   Cut guide (zf-cutguide) — the deep-maroon "Tell Us the Dish, We Cut the
   Rest" band: white heading, a pale-rose glyph per preparation, white
   sub-titles and translucent-white notes.
   -------------------------------------------------------------------------- */
body.zf-theme .zf-cutguide {
    background: var(--zf-maroon);
    padding: clamp(3.5rem, 7vw, 5rem) 0;
}

body.zf-theme .zf-cutguide__heading {
    color: #fff;
    font-size: clamp(1.6rem, 3vw, 2rem);
    font-weight: 700;
    margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

body.zf-theme .zf-cutguide__card {
    height: 100%;
    padding: 1rem 1.25rem;
    text-align: center;
}

body.zf-theme .zf-cutguide__glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 1.25rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    color: var(--zf-rose);
}

body.zf-theme .zf-cutguide__glyph svg { width: 26px; height: 26px; }

body.zf-theme .zf-cutguide__title {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

body.zf-theme .zf-cutguide__text {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.92rem;
    line-height: 1.6;
    max-width: 34ch;
    margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Categories (zf-catband) — white circular tiles holding a representative
   photograph, the category name in maroon underneath.
   -------------------------------------------------------------------------- */
body.zf-theme .zf-catband { background: var(--zf-container); }

body.zf-theme .zf-catband__tile {
    display: block;
    text-decoration: none;
}

body.zf-theme .zf-catband__circle {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 9999px;
    border: 1px solid var(--zf-line);
    background: var(--zf-white);
    margin-bottom: 1.25rem;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

body.zf-theme .zf-catband__tile:hover .zf-catband__circle {
    border-color: rgba(var(--zf-maroon-rgb), 0.3);
    box-shadow: var(--zf-shadow);
}

body.zf-theme .zf-catband__circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

body.zf-theme .zf-catband__tile:hover .zf-catband__circle img { transform: scale(1.06); }

body.zf-theme .zf-catband__label {
    display: block;
    font-family: var(--zf-font-head);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--zf-maroon);
}

body.zf-theme .zf-catband__tile:hover .zf-catband__label { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Journal (zf-journal) — left maroon heading, 16:10 covers, green chip
   labels, Poppins article titles.
   -------------------------------------------------------------------------- */
body.zf-theme .zf-journal { background: var(--zf-white); }

body.zf-theme .mr-article__title,
body.zf-theme .mr-article__title a {
    font-family: var(--zf-font-head);
    font-weight: 600;
    color: var(--zf-ink);
}

body.zf-theme .mr-article__title a:hover { color: var(--zf-maroon); }

body.zf-theme .mr-ulink { color: var(--zf-maroon); }
body.zf-theme .mr-ulink:hover { color: var(--zf-green-ink); border-color: var(--zf-green-ink); }

/* --------------------------------------------------------------------------
   Newsletter (zf-cta) — the full-width maroon "Fresh Cuts Weekly" band with
   a large decorative cutlery watermark, centered copy, a white input and a
   deepest-maroon Subscribe button keylined in translucent white so it reads
   as a button against the band.
   -------------------------------------------------------------------------- */
body.zf-theme .zf-cta {
    position: relative;
    overflow: hidden;
    background: var(--zf-maroon);
    padding: clamp(3.5rem, 7vw, 5rem) 0;
}

body.zf-theme .zf-cta__watermark {
    position: absolute;
    right: -4%;
    top: -14%;
    color: #fff;
    opacity: 0.09;
    pointer-events: none;
}

body.zf-theme .zf-cta__watermark svg { width: 300px; height: 300px; }

body.zf-theme .zf-cta__eyebrow { color: var(--zf-green-bright); }

body.zf-theme .zf-cta__title {
    color: var(--zf-rose);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
}

body.zf-theme .zf-cta__body {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.05rem;
    max-width: 46ch;
}

body.zf-theme .zf-cta__form {
    display: flex;
    gap: 0.75rem;
    max-width: 480px;
}

body.zf-theme .zf-cta__form input {
    flex: 1;
    min-width: 0;
    background: var(--zf-white);
    border: 1px solid transparent;
    border-radius: var(--zf-radius);
    padding: 0.9rem 1.25rem;
    font-size: 0.95rem;
    color: var(--zf-ink);
    transition: box-shadow 0.2s ease;
}

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

body.zf-theme .zf-cta__form input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45);
}

body.zf-theme .zf-cta__btn {
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: var(--zf-maroon-deep);
    color: #fff;
    border-radius: var(--zf-radius);
    padding: 0.9rem 2rem;
    font-family: var(--zf-font-body);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    white-space: nowrap;
    cursor: pointer;
    transition: filter 0.2s ease;
}

body.zf-theme .zf-cta__btn:hover { filter: brightness(1.3); }

body.zf-theme .zf-cta__note { color: rgba(255, 255, 255, 0.62); font-size: 0.8rem; }

/* --------------------------------------------------------------------------
   Inherited chrome finishing — the maroon footer (the export's footer sits
   on the same primary maroon as the cut-guide and newsletter bands).
   -------------------------------------------------------------------------- */
body.zf-theme .mr-footer {
    background-color: var(--zf-maroon);
    border-top: 0;
    color: rgba(255, 255, 255, 0.78);
}

body.zf-theme .mr-footer h4,
body.zf-theme .mr-footer__brand {
    color: #fff;
    font-family: var(--zf-font-head);
}

body.zf-theme .mr-footer a { color: rgba(255, 255, 255, 0.78); }
/* Maroon bg: the green accent is tuned for a LIGHT backdrop and would sink
   into this dark one, so brighten to white on hover instead. */
body.zf-theme .mr-footer a:hover { color: #fff; }

body.zf-theme .mr-social {
    border-color: rgba(255, 255, 255, 0.25);
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
}

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

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

body.zf-theme .mr-brandstrip span {
    font-family: var(--zf-font-head);
    color: var(--zf-soft);
}

body.zf-theme .mr-tile__placeholder {
    background: linear-gradient(135deg, var(--zf-container), var(--zf-high));
}

/* --------------------------------------------------------------------------
   Reduced motion — the tile lifts, card scales and image zooms are all
   decorative.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.zf-theme .mr-btn,
    body.zf-theme .mr-card,
    body.zf-theme .zf-cta__btn,
    body.zf-theme .mr-card__media img,
    body.zf-theme .zf-catband__circle,
    body.zf-theme .zf-catband__circle img,
    body.zf-theme .mr-tile__img,
    body.zf-theme .mr-promo__img {
        transition: none;
    }

    /* Also neutralise the inherited hover-scale transforms (the base's
       reduced-motion block only kills their transition). */
    body.zf-theme .mr-card:hover .mr-card__media img,
    body.zf-theme .mr-tile:hover .mr-tile__img,
    body.zf-theme .mr-promo:hover .mr-promo__img,
    body.zf-theme .zf-catband__tile:hover .zf-catband__circle img {
        transform: none !important;
    }
}

/* --------------------------------------------------------------------------
   Mobile (from the export's mobile frames): the hero shortens and its scrim
   goes vertical so the copy stays readable over the photo, the cut-guide
   cards stack, and the newsletter form goes full-width.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    body.zf-theme .zf-hero { min-height: 420px; }

    body.zf-theme .zf-hero .mr-hero__overlay {
        background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(255, 255, 255, 0.82) 55%,
            rgba(255, 255, 255, 0.5) 100%);
    }

    body.zf-theme .zf-cta__watermark { display: none; }
}

@media (max-width: 575.98px) {
    body.zf-theme .zf-cta__form { flex-direction: column; }
    body.zf-theme .zf-cta__btn { width: 100%; }
    body.zf-theme .zf-btn-hero { padding: 0.9rem 1.5rem; }
}