/* ==========================================================================
   FlowForm — calm-movement storefront for yoga & athleisure.

   Ported from the Stitch "FlowForm" design (the design system lives at
   docs/templates/pending/stitch_38_flowform_e_commerce_homepage/…/
   calm_movement/DESIGN.md): a "Calm Movement" narrative — unhurried spacing on
   a warm Mist canvas, pure-white elevated surfaces, Eucalyptus green for every
   action, a Dusk Lavender highlight, strictly pill-shaped buttons, 16px cards,
   12px inputs and "Natural Diffusion" shadows tinted with green rather than
   black. Poppins headings over Source Sans 3 body — the export names exactly
   these two allowlisted families, so nothing was substituted.

   This theme OWNS the hero / featured / practice-guide (new) / new-arrivals /
   categories / journal / newsletter home sections (ff-* markup) and INHERITS
   Modern Retail's header, footer, functional pages (product, category, cart,
   checkout, account, search, blog…) and the trust / promo / brands home
   partials. This stylesheet therefore has two jobs:

     (a) style the NEW `ff-*` markup into the Stitch design; and
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
         base neutral tokens at the Mist palette, softening cards/inputs to the
         16px/12px shape language (the pill button token must NOT reach them),
         and fixing every place the base renders the LAVENDER accent as text,
         as an icon or as a white-text fill (see the CONTRAST section).

   Everything is scoped under `body.ff-theme` and reads the 5 customizer tokens
   (--bs-primary / --bs-primary-rgb, --ll-accent / --bs-warning-rgb,
   --ll-font-headings, --ll-font-body, --ll-btn-radius) with theme.json-default
   fallbacks, so the customizer + live preview keep working.

   ---------------------------------------------------------------------------
   CONTRAST — computed against the WCAG 2.x relative-luminance formula (the
   same one App\Support\Theming\ContrastChecker implements). Do not "simplify"
   these back to the raw export tokens without re-measuring:

     · primary_color is the export's own `primary` #426454 (Eucalyptus) — the
       colour its hero CTA, PDP "Add to Bag", section headings, prices and
       links actually render. 6.60:1 on white, 5.95:1 on the Mist canvas,
       6.60:1 as white-on-fill: safe for text AND as a filled button, so this
       theme needs no "text-safe darker sibling" for the green and no guard
       block against the light-primary trap. The lighter #5a7d6c the export
       calls `primary-container` is a BAND fill only (announce bar +
       practice-guide) and is kept as the fixed literal --ff-sage: white on it
       is 4.58:1 — enough for text, but only just, so it never carries a
       customizer token that a merchant could lighten.
     · accent_color, Dusk Lavender #a290c3, is 2.87:1 on white — it fails AA
       for text (4.5:1) AND the 3:1 floor for icons/UI components. It is
       therefore used ONLY as a FILL paired with near-black ink (the sale chip:
       6.77:1). Every base rule that painted --ll-accent as text or as an icon
       (.mr-eyebrow, .mr-ulink:hover, .mr-nav-link.is-active, .mr-icon-btn:hover,
       .mr-badge--wish, .mr-card__wish.is-active, .mr-card__title a:hover,
       .mr-trust svg, .mr-footer a:hover, .mr-crumbs a:hover,
       .mr-cart-row__title a:hover, .mr-article__title a:hover,
       .mr-tabs .nav-link.active border, .mr-btn--light:hover, the
       focus-visible outline) is re-pointed below — the lavender TEXT roles the
       export actually shows (hero eyebrow, journal labels, the ghost CTA) use
       the fixed literal --ff-lav-ink #665685, which is 6.49:1 on white and is
       itself the value the export's OWN sibling screens (category listing,
       PDP) declare for `secondary`.
     · On the sage practice-guide band the export tints its mantra lines mint
       #c5ebd7 — 3.54:1 on #5a7d6c, which fails 4.5:1 for that body-size copy.
       No mint light enough exists (even pure white is only 4.58:1 there), so
       the mantras render white (4.58:1) and the mint is kept for the ICON
       glyphs, where 3.54:1 clears the 3:1 UI floor. The 48px band heading
       stays the export's near-white #f4f3f0 (4.13:1, over the 3:1
       large-text floor).
     · .mr-promo's scrim is deepened relative to the export's `from-primary/40`.
       The caption is white text over an ARBITRARY merchant photo, and 40%
       green over a bright upload composites well under 4.5:1 — the same
       reasoning that forbids `background: none` on the hero overlay. The hover
       caption swap also stays white instead of the base's accent swap
       (lavender over a photo would be worse than the rest state).
     · The shared .mr-card__badge "Sale" chip is hard-coded platform red/white
       in storefront::head.theme-vars (not theme-driven), and is LEFT alone:
       the export's own lavender chip renders white-on-#a290c3 at 2.87:1.
   ========================================================================== */

body.ff-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --ff-green: var(--bs-primary, #426454);
    --ff-green-rgb: var(--bs-primary-rgb, 66, 100, 84);
    --ff-lav: var(--ll-accent, #a290c3);
    --ff-lav-rgb: var(--bs-warning-rgb, 162, 144, 195);
    --ff-radius-pill: var(--ll-btn-radius, 2rem);
    --ff-font-head: var(--ll-font-headings, "Poppins"), system-ui, -apple-system, sans-serif;
    --ff-font-body: var(--ll-font-body, "Source Sans 3"), system-ui, -apple-system, sans-serif;

    /* Fixed literals — deliberately NOT customizer-driven (see CONTRAST). */
    --ff-sage: #5a7d6c; /* primary-container: announce bar + practice band fill */
    --ff-sage-deep: #35503f; /* pressed/hover darken for green fills */
    --ff-lav-ink: #665685; /* text-safe Dusk Lavender (the export's own `secondary`) */
    --ff-mint: #c5ebd7; /* primary-fixed: icon glyphs on the sage band */

    /* Calm Movement palette (DESIGN.md's Material tonal scale) */
    --ff-dark: #1b1c1a; /* on-surface — body/heading ink */
    --ff-muted: #414844; /* on-surface-variant — lead + muted copy */
    --ff-soft: #656b67; /* darkened `outline` (#727974 was 4.02:1 on Mist) */
    --ff-canvas: #f4f3f0; /* background — the warm Mist canvas */
    --ff-surface: #faf9f6; /* surface / surface-bright — header, search well */
    --ff-white: #ffffff; /* surface-container-lowest — elevated cards */
    --ff-band-alt: #f4f3f0; /* surface-container-low — card media wells */
    --ff-fill: #e9e8e5; /* surface-container-high */
    --ff-border: #e3e2df; /* surface-variant */
    --ff-border-strong: #c1c8c2; /* outline-variant */
    --ff-footer: #dbdad7; /* surface-dim — the light-grey footer */

    /* Re-point the inherited base neutrals at the Mist palette so every
       inherited mr-* surface (bands, borders, fills, muted text, radii)
       follows — this single block restyles all ~24 inherited pages. */
    --mr-ink: var(--ff-dark);
    --mr-muted: var(--ff-muted);
    --mr-soft: var(--ff-soft);
    --mr-surface: var(--ff-white); /* Surface 1 = pure white cards/panels/inputs */
    --mr-band: var(--ff-surface);
    --mr-band-alt: var(--ff-band-alt);
    --mr-fill: var(--ff-fill);
    --mr-border: var(--ff-border);
    --mr-border-strong: var(--ff-border-strong);
    --mr-radius: 1rem; /* DESIGN.md/tailwind config: cards standardise on 16px */
    --mr-gold: var(--ff-green); /* star ratings — lavender fails even the 3:1 floor */
    /* DESIGN.md "Natural Diffusion": a wide, soft glow tinted with Eucalyptus
       rather than black, so depth reads as natural light. */
    --mr-shadow: 0 8px 30px rgba(var(--ff-green-rgb), 0.09);

    /* Bootstrap's own link colour (platform-wide gotcha: Bootstrap 5.3's `a`
       rule reads --bs-link-color-RGB, not --bs-link-color, and theme-vars
       never sets the triplet) — without this, bare anchors (CMS pages,
       blog-post body copy, the quick-view "Category" link) and .btn-link fall
       through to Bootstrap's factory blue. Setting the token is deliberately
       used INSTEAD of a bare `body.ff-theme a { color: … }` rule, which would
       out-specify .mr-btn--primary's white label and blank out the hero CTA. */
    --bs-link-color: var(--ff-green);
    --bs-link-color-rgb: 66, 100, 84;

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

/* --------------------------------------------------------------------------
   Typography — geometric Poppins headings with the DESIGN.md's tight tracking;
   section titles carry the export's Eucalyptus tint (its H2s are all
   `text-primary`, unlike the base's neutral ink).
   -------------------------------------------------------------------------- */
body.ff-theme h1, body.ff-theme h2, body.ff-theme h3,
body.ff-theme h4, body.ff-theme h5, body.ff-theme h6,
body.ff-theme .mr-display {
    font-family: var(--ff-font-head);
    color: var(--ff-dark);
    font-weight: 600;
    letter-spacing: -0.02em;
}

body.ff-theme .ff-section-title {
    color: var(--ff-green);
    font-size: clamp(1.75rem, 3vw, 2rem);
    line-height: 1.25;
}

body.ff-theme .ff-section-title--center { text-align: center; }

/* Labels: Source Sans 3, 14px/600, the export's 0.05em signposting track. */
body.ff-theme .mr-eyebrow,
body.ff-theme .ff-eyebrow {
    font-family: var(--ff-font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--ff-lav-ink);
}

/* --------------------------------------------------------------------------
   Buttons — "strictly Pill-shaped, removing all sharp corners to suggest
   fluidity and comfort" (DESIGN.md). The pill comes from the button_radius
   token (2rem — never 9999px, which would also flatten --bs-border-radius onto
   cards and inputs); the softer card/input radii are restored further down.
   -------------------------------------------------------------------------- */
body.ff-theme .mr-btn {
    font-family: var(--ff-font-body);
    font-weight: 600;
    letter-spacing: 0.08em;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

body.ff-theme .mr-btn--primary {
    background-color: var(--ff-green);
    border-color: var(--ff-green);
    box-shadow: 0 8px 24px rgba(var(--ff-green-rgb), 0.22);
}

/* DESIGN.md: "Hover states should involve a slight scale-up (1.02x) rather
   than a harsh color change" / pressed elements "sink". */
body.ff-theme .mr-btn--primary:hover {
    filter: none;
    background-color: var(--ff-sage-deep);
    border-color: var(--ff-sage-deep);
    transform: scale(1.02);
}

body.ff-theme .mr-btn--primary:active { transform: scale(0.98); box-shadow: none; }

body.ff-theme .mr-btn--outline { border-color: var(--ff-green); color: var(--ff-green); }
body.ff-theme .mr-btn--outline:hover { background-color: var(--ff-green); border-color: var(--ff-green); color: #fff; }
body.ff-theme .mr-btn--light { color: var(--ff-green); }
/* The base hovers this to the accent FILL with white text (2.87:1). */
body.ff-theme .mr-btn--light:hover { background-color: var(--ff-green); color: #fff; }
body.ff-theme .mr-btn--on-dark:hover { color: var(--ff-green); }
body.ff-theme .mr-btn--ghost { color: var(--ff-green); }

body.ff-theme .ff-btn-pill { padding: 1rem 2.25rem; font-size: 0.82rem; }

/* Re-assert the primary button's light label (6.60:1 on the green fill).
   Belt-and-braces against any later bare-anchor rule: (0,2,1) beats the base
   .mr-btn--primary (0,1,0) and any `body.ff-theme a` (0,1,2). */
body.ff-theme .mr-btn--primary { color: #fff; }

/* Lavender ghost-outline pill — the hero's secondary "Shop Mats" action.
   DESIGN.md: "Secondary buttons use a Dusk Lavender ghost style (outline) with
   1.5px borders". Border + label use the text-safe --ff-lav-ink (6.49:1); the
   raw lavender is only 2.87:1 and would be an unreadable label. */
body.ff-theme .ff-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: calc(1rem - 1.5px) calc(2.25rem - 1.5px);
    border: 1.5px solid var(--ff-lav-ink);
    border-radius: var(--ff-radius-pill);
    background: transparent;
    color: var(--ff-lav-ink);
    font-family: var(--ff-font-body);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

/* 10%-opacity lavender wash on hover (DESIGN.md's inactive-chip treatment),
   keeping the dark lavender ink — never white on lavender. */
body.ff-theme .ff-btn-ghost:hover {
    background-color: rgba(var(--ff-lav-rgb), 0.12);
    color: var(--ff-lav-ink);
    transform: scale(1.02);
}

/* --------------------------------------------------------------------------
   Inputs — "Utilize a 12px radius to sit comfortably between the card and
   button styles", Stone borders that turn Eucalyptus on focus. NEVER a padding
   SHORTHAND on .form-select: it eats Bootstrap's reserved 2.25rem caret gutter
   (the base already restores it with padding-inline-end — untouched here).
   -------------------------------------------------------------------------- */
body.ff-theme .form-control,
body.ff-theme .form-select {
    background-color: var(--ff-white);
    border-color: var(--ff-border);
    border-radius: 0.75rem;
    color: var(--ff-dark);
}

body.ff-theme .form-control:focus,
body.ff-theme .form-select:focus {
    border-color: var(--ff-green);
    box-shadow: 0 0 0 3px rgba(var(--ff-green-rgb), 0.16);
}

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

/* The base outlines focus with the accent (2.87:1 — under the 3:1 UI floor). */
body.ff-theme a:focus-visible,
body.ff-theme button:focus-visible,
body.ff-theme input:focus-visible {
    outline-color: var(--ff-green);
}

/* --------------------------------------------------------------------------
   Announcement + header — the inherited logo-left single-row chrome already
   matches the export's structure (small logo left, inline nav, search/account/
   bag icons right), so there is NO header override; it is restyled in place.
   The announce band fills with the fixed sage literal, not the base's
   color-mix of the accent (which would render a dark plum here).
   -------------------------------------------------------------------------- */
body.ff-theme .mr-announce {
    background-color: var(--ff-sage);
    background-image: none;
    color: #fff;
    font-family: var(--ff-font-body);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: none;
    padding: 0.6rem 1rem;
}

/* `bg-surface/80 backdrop-blur-md` + the sage-tinted ambient shadow. */
body.ff-theme .mr-header {
    background-color: rgba(250, 249, 246, 0.85);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 0;
    box-shadow: 0 4px 30px rgba(var(--ff-green-rgb), 0.06);
}

body.ff-theme .mr-logo {
    font-family: var(--ff-font-head);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ff-green);
}

body.ff-theme .mr-nav-link {
    font-family: var(--ff-font-body);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--ff-dark);
}

body.ff-theme .mr-nav-link:hover { color: var(--ff-green); }
body.ff-theme .mr-nav-link.is-active { color: var(--ff-green); border-bottom-color: var(--ff-green); }

body.ff-theme .mr-search input { background: var(--ff-surface); }
body.ff-theme .mr-search input:focus { background: var(--ff-white); border-color: var(--ff-green); box-shadow: 0 0 0 3px rgba(var(--ff-green-rgb), 0.14); }

body.ff-theme .mr-icon-btn { color: var(--ff-dark); }
body.ff-theme .mr-icon-btn:hover { color: var(--ff-green); }
/* Both count bubbles carry white numerals — a lavender fill is 2.87:1. */
body.ff-theme .mr-badge,
body.ff-theme .mr-badge--wish { background-color: var(--ff-green); }

body.ff-theme .dropdown-menu { border-radius: var(--mr-radius); border-color: var(--ff-border); box-shadow: var(--mr-shadow); }
body.ff-theme .dropdown-item:active { background-color: var(--ff-green); }

/* --------------------------------------------------------------------------
   Hero — the export's split layout: the studio photograph fills the left half
   of a white, 16px-rounded surface and the copy stack sits right. Kept as one
   elevated panel (rather than two bleeding halves) so the shell's rhythm and
   the "cards are Surface 1" rule both hold.
   -------------------------------------------------------------------------- */
body.ff-theme .ff-hero {
    padding: clamp(1.5rem, 4vw, 2.5rem) clamp(16px, 4vw, 40px);
    max-width: 1280px;
    margin-inline: auto;
}

body.ff-theme .ff-hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    background: var(--ff-white);
    border-radius: var(--mr-radius);
    overflow: hidden;
    box-shadow: var(--mr-shadow);
}

body.ff-theme .ff-hero__figure { min-height: 100%; }

body.ff-theme .ff-hero__img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 30rem;
    object-fit: cover;
}

body.ff-theme .ff-hero__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 5vw, 4rem);
}

body.ff-theme .ff-hero__title {
    color: var(--ff-green);
    font-size: clamp(2.25rem, 4.6vw, 3rem);
    line-height: 1.15;
    margin-bottom: 1.5rem;
}

body.ff-theme .ff-hero__lead {
    color: var(--ff-muted);
    font-size: 1.125rem;
    line-height: 1.75;
    max-width: 42ch;
    margin-bottom: 2.5rem;
}

body.ff-theme .ff-hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

/* --------------------------------------------------------------------------
   Trust strip (inherited markup) — the export shows one icon + one sentence-
   case 14px label per item on a near-flat band with a hairline rule beneath,
   not the base's uppercase-tracked title over a supporting line. Icons take
   the Eucalyptus green the export uses (the base paints them accent-lavender,
   1.71–2.87:1, under the 3:1 icon floor).
   -------------------------------------------------------------------------- */
body.ff-theme .mr-trust svg { color: var(--ff-green); width: 26px; height: 26px; }

body.ff-theme .mr-trust strong {
    font-family: var(--ff-font-body);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: none;
    color: var(--ff-dark);
}

body.ff-theme .mr-trust span { display: block; }

/* --------------------------------------------------------------------------
   Promo tiles (inherited markup) — 16px radius follows --mr-radius; the scrim
   is re-tinted from black to Eucalyptus per the export's `from-primary/40`,
   but DEEPER (see CONTRAST: a white caption over an arbitrary bright merchant
   photo needs more than 40%). The hover caption stays white rather than
   swapping to the accent — the base's `:hover` DESCENDANT selector has to be
   overridden, not just the rest-state rule, or it wins on specificity.
   -------------------------------------------------------------------------- */
body.ff-theme .mr-promo { aspect-ratio: 3 / 4; }

body.ff-theme .mr-promo__scrim {
    background: linear-gradient(0deg, rgba(27, 40, 33, 0.72) 0%, rgba(var(--ff-green-rgb), 0.34) 45%, rgba(var(--ff-green-rgb), 0.04) 100%);
}

body.ff-theme .mr-promo:hover .mr-promo__scrim {
    background: linear-gradient(0deg, rgba(27, 40, 33, 0.8) 0%, rgba(var(--ff-green-rgb), 0.46) 50%, rgba(var(--ff-green-rgb), 0.12) 100%);
}

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

body.ff-theme .mr-promo:hover .mr-promo__cta { color: #fff; border-color: #fff; }

/* --------------------------------------------------------------------------
   Practice guide — the flowform-ONLY child section: a full-bleed Eucalyptus
   band with a near-white headline over three centred icon columns divided by
   hairline keylines (vertical on desktop, horizontal when stacked, exactly as
   the export's `border-y md:border-y-0 md:border-x` does it).
   -------------------------------------------------------------------------- */
body.ff-theme .ff-practice {
    background-color: var(--ff-sage);
    padding-block: clamp(3.5rem, 8vw, 5rem);
}

/* White, not the mint used for the glyphs: an eyebrow is small text, and mint
   is 3.54:1 on the sage band (white is 4.58:1). The uppercase tracking already
   distinguishes it from the headline. */
body.ff-theme .ff-practice__eyebrow { color: #fff; }

body.ff-theme .ff-practice__heading {
    color: var(--ff-canvas);
    font-size: clamp(2rem, 4.2vw, 3rem);
    line-height: 1.15;
}

body.ff-theme .ff-practice__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
}

body.ff-theme .ff-practice__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: clamp(1.5rem, 4vw, 2rem) 1.5rem;
}

body.ff-theme .ff-practice__col + .ff-practice__col {
    border-left: 1px solid rgba(197, 235, 215, 0.24);
}

body.ff-theme .ff-practice__icon { display: block; color: var(--ff-mint); }
body.ff-theme .ff-practice__icon svg { width: 34px; height: 34px; }

body.ff-theme .ff-practice__title {
    color: #fff;
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: 0;
}

/* White, not the export's mint — see CONTRAST (mint is 3.54:1 here). */
body.ff-theme .ff-practice__text {
    color: #fff;
    font-family: var(--ff-font-body);
    font-size: 1rem;
    font-style: italic;
}

/* --------------------------------------------------------------------------
   Featured ("Studio Staples") + New Arrivals — plain 4-up grids on the Mist
   canvas. The export crops Studio Staples 3:4 (the base default) and New
   Arrivals SQUARE, so only the arrivals grid re-shapes its media well.
   -------------------------------------------------------------------------- */
body.ff-theme .ff-arrivals .mr-card__media { aspect-ratio: 1 / 1; }

/* --------------------------------------------------------------------------
   Shop by Category — bare circular tiles on a white band, growing a green
   keyline ring on hover (the export's group-hover:border-primary), with a
   centred green Poppins label beneath. Fully data-driven (see the partial).
   -------------------------------------------------------------------------- */
body.ff-theme .ff-categories { background-color: var(--ff-white); }

body.ff-theme .ff-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
}

body.ff-theme .ff-cat__frame {
    display: block;
    width: clamp(120px, 15vw, 200px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid transparent;
    background: var(--ff-band-alt);
    transition: border-color 0.3s ease, transform 0.3s ease;
}

body.ff-theme .ff-cat:hover .ff-cat__frame {
    border-color: var(--ff-green);
    transform: scale(1.02);
}

body.ff-theme .ff-cat__frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

body.ff-theme .ff-cat__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ff-band-alt), var(--ff-fill));
}

body.ff-theme .ff-cat__label {
    font-family: var(--ff-font-head);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ff-green);
}

/* --------------------------------------------------------------------------
   Journal — white 16px cards with the Natural Diffusion shadow, a lavender
   label, a green title and a green "Read More" link (the base renders bare
   articles with no card box).
   -------------------------------------------------------------------------- */
body.ff-theme .ff-post {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--ff-white);
    border-radius: var(--mr-radius);
    overflow: hidden;
    box-shadow: var(--mr-shadow);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

body.ff-theme .ff-post:hover {
    box-shadow: 0 16px 36px rgba(var(--ff-green-rgb), 0.14);
    transform: translateY(-2px);
}

body.ff-theme .ff-post__media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--ff-band-alt);
}

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

body.ff-theme .ff-post:hover .ff-post__media img { transform: scale(1.05); }

body.ff-theme .ff-post__body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 1.5rem;
}

body.ff-theme .ff-post__title {
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.3;
}

body.ff-theme .ff-post__title a { color: var(--ff-green); text-decoration: none; }
body.ff-theme .ff-post__title a:hover { color: var(--ff-sage-deep); }

body.ff-theme .ff-post__excerpt {
    color: var(--ff-muted);
    flex-grow: 1;
    margin-bottom: 1.25rem;
}

body.ff-theme .ff-post__link {
    align-self: flex-start;
    color: var(--ff-green);
    font-family: var(--ff-font-body);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-decoration: none;
}

body.ff-theme .ff-post__link:hover { color: var(--ff-sage-deep); }

/* --------------------------------------------------------------------------
   Newsletter ("Sunday Stretch") — a centred, 16px-rounded inset panel on the
   stone wash (the export's bg-surface-container with mx/rounded-xl), not the
   base's full-bleed dark navy 2-col band.
   -------------------------------------------------------------------------- */
body.ff-theme .ff-cta { padding-block: 0 clamp(3rem, 6vw, 5rem); }

body.ff-theme .ff-cta__panel {
    background: var(--ff-fill);
    border-radius: var(--mr-radius);
    padding: clamp(2.5rem, 7vw, 5rem) clamp(1.25rem, 5vw, 4rem);
}

body.ff-theme .ff-cta__title {
    color: var(--ff-green);
    font-size: clamp(2rem, 4.2vw, 3rem);
    line-height: 1.15;
}

body.ff-theme .ff-cta__body {
    color: var(--ff-muted);
    font-size: 1.125rem;
    line-height: 1.7;
    max-width: 48ch;
}

body.ff-theme .ff-cta__form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    max-width: 30rem;
}

body.ff-theme .ff-cta__form input {
    flex: 1 1 14rem;
    min-width: 0;
    border: 1px solid var(--ff-border);
    border-radius: var(--ff-radius-pill);
    padding: 0.95rem 1.5rem;
    font-family: var(--ff-font-body);
    font-size: 0.95rem;
    color: var(--ff-dark);
    background: var(--ff-white);
}

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

body.ff-theme .ff-cta__form input:focus {
    outline: none;
    border-color: var(--ff-green);
    box-shadow: 0 0 0 3px rgba(var(--ff-green-rgb), 0.16);
}

body.ff-theme .ff-cta__btn {
    border: 0;
    border-radius: var(--ff-radius-pill);
    padding: 0.95rem 2.25rem;
    background: var(--ff-green);
    color: #fff;
    font-family: var(--ff-font-body);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    cursor: not-allowed; /* stub form — always disabled */
}

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

/* --------------------------------------------------------------------------
   Product cards (inherited mr-card) — the export shows NO card box (just the
   media well plus flush text beneath, exactly the base's borderless default),
   so no border/background is added here and therefore no inset-text padding is
   needed. The media well takes the export's surface-container-low tint; the
   price renders Eucalyptus per its `text-primary` price role.
   -------------------------------------------------------------------------- */
body.ff-theme .mr-card__media { background: var(--ff-band-alt); }

body.ff-theme .mr-card__title { font-family: var(--ff-font-body); font-weight: 400; }
body.ff-theme .mr-card__title a:hover { color: var(--ff-green); }

body.ff-theme .mr-card__price {
    color: var(--ff-green);
    font-family: var(--ff-font-body);
    font-weight: 600;
    letter-spacing: 0.03em;
}

body.ff-theme .mr-card__price del { color: var(--ff-soft); }
body.ff-theme .mr-card__eyebrow { color: var(--ff-soft); }

/* The genuine, faithful lavender FILL — the export's "Sale" chip — paired with
   near-black ink (6.77:1). White on lavender would be 2.87:1. (The shared
   platform .mr-card__badge is untouched; see CONTRAST.) */
body.ff-theme .mr-card__sale {
    background-color: var(--ff-lav);
    color: var(--ff-dark);
    border-radius: 9999px;
    letter-spacing: 0.04em;
    text-transform: none;
}

/* Wish + quickview are SIBLINGS — restyle together, both states. Rest uses the
   green on a near-white glass circle (6.60:1); hover uses the theme's own
   ink-on-surface pair. The "saved" heart also takes green: raw lavender on a
   near-white circle is 2.87:1, under the 3:1 icon floor. */
body.ff-theme .mr-card__wish,
body.ff-theme .mr-card__quickview {
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--ff-green);
}

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

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

body.ff-theme .mr-card__quick {
    background-color: var(--ff-green);
    font-family: var(--ff-font-body);
    font-weight: 600;
    letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   Inherited chrome, continued — every remaining place the base paints the
   LAVENDER accent as text, as an icon or as a decorative keyline (all
   1.71–2.87:1) is re-pointed to the Eucalyptus green. The base's
   primary-driven fills need no guard block here: #426454 is dark enough that
   white-on-primary is 6.60:1 everywhere it appears.
   -------------------------------------------------------------------------- */
body.ff-theme .mr-ulink:hover { color: var(--ff-green); border-color: var(--ff-green); }
body.ff-theme .mr-article__title a:hover { color: var(--ff-green); }
body.ff-theme .mr-crumbs a:hover { color: var(--ff-green); }
body.ff-theme .mr-cart-row__title a:hover { color: var(--ff-green); }
body.ff-theme .mr-tabs .nav-link.active { color: var(--ff-green); border-bottom-color: var(--ff-green); }
body.ff-theme .mr-filter__link:hover,
body.ff-theme .mr-filter__link.is-active { color: var(--ff-green); }
body.ff-theme .mr-gallery__thumb.is-active { border-color: var(--ff-green); }
body.ff-theme .mr-brandstrip span { font-family: var(--ff-font-head); letter-spacing: 0.04em; }

body.ff-theme .mr-panel { box-shadow: var(--mr-shadow); border-color: var(--ff-border); }
body.ff-theme .mr-status { border-radius: 9999px; }

body.ff-theme .mr-footer { background-color: var(--ff-footer); border-top: 0; }
body.ff-theme .mr-footer h4 { font-family: var(--ff-font-body); color: var(--ff-green); letter-spacing: 0.08em; }
body.ff-theme .mr-footer a:hover { color: var(--ff-green); }
body.ff-theme .mr-footer__brand { font-family: var(--ff-font-head); color: var(--ff-green); }
body.ff-theme .mr-social { color: var(--ff-green); border-color: var(--ff-border-strong); }
body.ff-theme .mr-social:hover { background-color: var(--ff-green); border-color: var(--ff-green); color: #fff; }

/* --------------------------------------------------------------------------
   Respect reduced-motion — neutralise both the transitions AND the hover
   transforms/scales introduced above (transition:none alone still lets a hover
   transform apply instantly, which is still motion).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.ff-theme .mr-btn,
    body.ff-theme .ff-btn-ghost,
    body.ff-theme .ff-cat__frame,
    body.ff-theme .ff-post,
    body.ff-theme .ff-post__media img,
    body.ff-theme .mr-card__media img,
    body.ff-theme .mr-promo__img,
    body.ff-theme .mr-tile__img,
    body.ff-theme .mr-article__media img {
        transition: none;
    }

    body.ff-theme .mr-btn--primary:hover,
    body.ff-theme .mr-btn--primary:active,
    body.ff-theme .ff-btn-ghost:hover,
    body.ff-theme .ff-cat:hover .ff-cat__frame,
    body.ff-theme .ff-post:hover,
    body.ff-theme .ff-post:hover .ff-post__media img,
    body.ff-theme .mr-card:hover .mr-card__media img,
    body.ff-theme .mr-promo:hover .mr-promo__img,
    body.ff-theme .mr-tile:hover .mr-tile__img,
    body.ff-theme .mr-article__media:hover img {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Mobile (from the Stitch mobile frame): the hero stacks photo-over-copy with
   a shorter crop, the practice columns stack behind horizontal keylines, the
   category circles tighten, and the newsletter form goes full-width.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    body.ff-theme .ff-hero { padding-inline: 20px; }
    body.ff-theme .ff-hero__grid { grid-template-columns: 1fr; }
    body.ff-theme .ff-hero__img { min-height: 0; aspect-ratio: 4 / 3; }
    body.ff-theme .ff-hero__title { font-size: 2rem; }
    body.ff-theme .ff-hero__lead { font-size: 1rem; margin-bottom: 2rem; }

    body.ff-theme .ff-practice__grid { grid-template-columns: 1fr; }
    body.ff-theme .ff-practice__col + .ff-practice__col {
        border-left: 0;
        border-top: 1px solid rgba(197, 235, 215, 0.24);
    }

    body.ff-theme .ff-cat__frame { width: clamp(104px, 30vw, 140px); }
    body.ff-theme .ff-cat__label { font-size: 0.95rem; }

    body.ff-theme .ff-cta__form { flex-direction: column; max-width: 22rem; }
    body.ff-theme .ff-cta__form input,
    body.ff-theme .ff-cta__btn { width: 100%; }
}