/* ==========================================================================
   Confetti Lane — celebration storefront for party supplies, balloons,
   tableware and event styling.

   Ported from the Stitch "Confetti Lane" design (design system:
   docs/templates/pending/stitch_61_confetti_lane_e_commerce_homepage/…/
   joyful_celebration/DESIGN.md; the homepage code.html is authoritative where
   the two disagree): an "organized joy" narrative — warm-white canvas so the
   screen feels like stationery rather than glass, PURE WHITE cards lifted on
   very soft ambient shadows, party-fuchsia reserved for actions and brand
   signifiers, sunny-yellow reserved for badges / chips / the subscribe button,
   deep-charcoal (never pure black) text, 16px container radii and full pills
   for every call to action. Poppins headlines (the allowlist substitute for the
   export's Plus Jakarta Sans) over Source Sans 3 body + bold price display.

   This theme OWNS its hero / occasions / featured / theme-kits / categories /
   journal / newsletter home sections (cf-* markup) and INHERITS Modern
   Retail's header, promo tiles, trust strip, product card and every functional
   page (product, category, cart, checkout, account, search, blog…). This
   stylesheet therefore has two jobs:

     (a) style the NEW `cf-*` markup into the Stitch design; and
     (b) restyle the INHERITED `mr-*` pages — chiefly by re-pointing the base
         neutral tokens at the warm-white palette and rounding cards, buttons,
         inputs and pagination into the 16px / pill shape language.

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

   Colour safety notes (measured, see the theme test + task report):
     - primary #b5106a is DARK enough to be TEXT (6.47:1 on white) as well as a
       fill (white on it, 6.47:1), so none of the ~12 inherited base rules that
       hardcode #fff over --bs-primary need a guard block.
     - the design's Sunny Yellow is a FILL-ONLY colour (1.8:1 as text), so it is
       a theme-local literal (--cf-yellow) paired with --cf-yellow-ink, and is
       NEVER bound to --ll-accent. --ll-accent defaults to the design system's
       text-safe deep gold #725500 (6.97:1 on white) because the base spends it
       on eyebrows, link hovers and breadcrumbs — i.e. on TEXT.
     - there is deliberately NO bare `body.cf-theme a { color }` rule: it would
       out-specify `.mr-btn--primary { color:#fff }` and blank the hero CTA's
       label. Bare prose links are handled with --bs-link-color-rgb instead.
   ========================================================================== */

body.cf-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --cf-fuchsia: var(--bs-primary, #b5106a);
    --cf-fuchsia-rgb: var(--bs-primary-rgb, 181, 16, 106);
    --cf-gold: var(--ll-accent, #725500);
    --cf-radius-btn: var(--ll-btn-radius, 2rem);
    --cf-font-head: var(--ll-font-headings, "Poppins"), system-ui, -apple-system, sans-serif;
    --cf-font-body: var(--ll-font-body, "Source Sans 3"), system-ui, -apple-system, sans-serif;

    /* "Organized joy" palette. Literals, never bound to a customizer token —
       structural ink must not move when a merchant edits "accent". */
    --cf-ink: #181c20;
    --cf-muted: #584048;
    --cf-soft: #7a6870;
    --cf-white: #ffffff;
    --cf-warm-white: #fdfbf7;
    --cf-band: #f1f4f9;
    --cf-band-alt: #f7f9ff;
    --cf-fill: #ebeef3;
    --cf-line: #e5e8ee;
    --cf-line-strong: #d7dadf;
    --cf-blush: #ffd9e4;
    --cf-fuchsia-deep: #8d0051;
    --cf-yellow: #f6c344;
    --cf-yellow-soft: #fdf0d6;
    --cf-yellow-ink: #4a3600;
    --cf-error: #ba1a1a;

    /* Shape + depth — 16px containers, full pills, diffused ambient shadows. */
    --cf-card-radius: 1rem;
    --cf-panel-radius: 2rem;
    --cf-pill: 9999px;
    --cf-shadow-sm: 0 4px 16px rgba(24, 28, 32, 0.05);
    --cf-shadow: 0 8px 24px rgba(24, 28, 32, 0.08);
    --cf-shadow-lg: 0 16px 40px rgba(24, 28, 32, 0.12);

    /* Re-point the inherited base neutrals so every inherited mr-* surface
       (bands, borders, fills, muted text, radii) follows this palette. */
    --mr-ink: var(--cf-ink);
    --mr-muted: var(--cf-muted);
    --mr-soft: var(--cf-soft);
    --mr-surface: var(--cf-white);
    --mr-band: var(--cf-band);
    --mr-band-alt: var(--cf-band);
    --mr-fill: var(--cf-fill);
    --mr-border: var(--cf-line);
    --mr-border-strong: var(--cf-line-strong);
    --mr-radius: var(--cf-card-radius);
    --mr-gold: var(--cf-yellow);
    --mr-shadow: var(--cf-shadow);

    /* Bootstrap surfaces the token block does not cover. --bs-link-color-rgb
       is what stops bare prose links rendering Bootstrap blue (theme-vars sets
       --bs-link-color but not the rgb triplet Bootstrap actually reads). */
    --bs-body-bg: var(--cf-warm-white);
    --bs-link-color-rgb: var(--bs-primary-rgb, 181, 16, 106);
    --bs-link-hover-color-rgb: var(--bs-primary-rgb, 181, 16, 106);
    --bs-secondary-bg: var(--cf-band);
    --bs-form-invalid-color: var(--cf-error);
    --bs-form-invalid-border-color: var(--cf-error);

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

/* --------------------------------------------------------------------------
   Typography — geometric Poppins at SemiBold for headlines, Source Sans 3
   everywhere else, bold for prices (DESIGN.md: "prices are the secondary focal
   point after the imagery").
   -------------------------------------------------------------------------- */
body.cf-theme h1, body.cf-theme h2, body.cf-theme h3,
body.cf-theme h4, body.cf-theme h5, body.cf-theme h6,
body.cf-theme .mr-display {
    font-family: var(--cf-font-head);
    color: var(--cf-ink);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* headline-lg (32px / 40px / -0.01em) — every section heading on the export. */
body.cf-theme .cf-section-title {
    font-size: clamp(1.7rem, 3vw, 2rem);
    line-height: 1.25;
    letter-spacing: -0.01em;
}

/* label-md (14px / 600 / 0.05em) applied to the base eyebrow. */
body.cf-theme .mr-eyebrow,
body.cf-theme .cf-eyebrow {
    font-family: var(--cf-font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cf-gold);
}

body.cf-theme .cf-eyebrow--on-dark { color: rgba(255, 255, 255, 0.88); }

/* Sunny-yellow pill chip — the hero's "PARTY IN A BOX" badge and the journal
   category labels. Yellow is a FILL-ONLY colour here; the ink is the dark
   --cf-yellow-ink pair (7.04:1), not the design's lighter #725500 (4.25:1). */
body.cf-theme .cf-chip {
    display: inline-block;
    margin-bottom: 1.1rem;
    padding: 0.32rem 0.9rem;
    border-radius: var(--cf-pill);
    background: var(--cf-yellow);
    color: var(--cf-yellow-ink);
    font-family: var(--cf-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.4;
    text-transform: uppercase;
}

body.cf-theme .cf-chip--sm {
    margin-bottom: 0.9rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
}

/* --------------------------------------------------------------------------
   Buttons + inputs — every CTA is a full pill that lifts on hover (DESIGN.md:
   "subtle hover scale 1.02x", fuchsia-tinted Level-2 glow). Inputs keep the
   0.5rem radius the design system reserves for them, so the pill token driving
   --bs-border-radius is overridden here on purpose.
   -------------------------------------------------------------------------- */
body.cf-theme .mr-btn {
    border-radius: var(--cf-pill);
    font-family: var(--cf-font-body);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

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

body.cf-theme .mr-btn--primary:hover {
    filter: none;
    color: #fff;
    transform: scale(1.03);
    box-shadow: 0 12px 28px rgba(var(--cf-fuchsia-rgb), 0.3);
}

/* Secondary: 2px fuchsia outline pill, blush fill on hover (the export's
   `hover:bg-primary-fixed` = #ffd9e4; fuchsia on blush measures 5.02:1). */
body.cf-theme .mr-btn--outline {
    border: 2px solid var(--cf-fuchsia);
    background: transparent;
    color: var(--cf-fuchsia);
}

body.cf-theme .mr-btn--outline:hover {
    background: var(--cf-blush);
    border-color: var(--cf-fuchsia);
    color: var(--cf-fuchsia);
    transform: scale(1.02);
}

body.cf-theme .mr-btn--light { background-color: var(--cf-white); color: var(--cf-fuchsia); }
body.cf-theme .mr-btn--light:hover { background-color: var(--cf-blush); color: var(--cf-fuchsia); }
body.cf-theme .mr-btn--ghost { color: var(--cf-fuchsia); }

body.cf-theme .mr-ulink { color: var(--cf-fuchsia); }
body.cf-theme .mr-ulink:hover { color: var(--cf-fuchsia-deep); border-color: var(--cf-fuchsia-deep); }

/* Inputs: 1px charcoal-at-10% border on white, fuchsia on focus (DESIGN.md).
   NOTE: only .form-control takes a padding shorthand — a shorthand on
   .form-select eats Bootstrap's reserved 2.25rem caret gutter and runs the
   option text under the arrow. The gutter is re-asserted below regardless. */
body.cf-theme .form-control,
body.cf-theme .form-select {
    background-color: var(--cf-white);
    border: 1px solid rgba(24, 28, 32, 0.12);
    border-radius: 0.5rem;
    color: var(--cf-ink);
}

body.cf-theme .form-control { padding: 0.65rem 0.9rem; }
body.cf-theme .form-select { padding-inline-end: 2.25rem; }

body.cf-theme .form-control:focus,
body.cf-theme .form-select:focus {
    border-color: var(--cf-fuchsia);
    border-width: 2px;
    box-shadow: 0 0 0 0.2rem rgba(var(--cf-fuchsia-rgb), 0.14);
}

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

/* Re-assert the invalid state: the border override above out-specifies
   Bootstrap's own `.form-control.is-invalid`, which would otherwise silently
   swallow the red validation border on every checkout / address / auth form. */
body.cf-theme .form-control.is-invalid,
body.cf-theme .form-select.is-invalid,
body.cf-theme .was-validated .form-control:invalid,
body.cf-theme .was-validated .form-select:invalid {
    border-color: var(--cf-error);
}

body.cf-theme .form-control.is-invalid:focus,
body.cf-theme .form-select.is-invalid:focus,
body.cf-theme .was-validated .form-control:invalid:focus {
    border-color: var(--cf-error);
    box-shadow: 0 0 0 0.2rem rgba(186, 26, 26, 0.18);
}

/* Focus ring — brand fuchsia rather than the base's accent gold. */
body.cf-theme a:focus-visible,
body.cf-theme button:focus-visible,
body.cf-theme input:focus-visible {
    outline: 2px solid var(--cf-fuchsia);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Announcement + header (inherited markup) — solid fuchsia band over a white
   sticky bar with a very soft shadow, fuchsia wordmark and icons, pill search.
   -------------------------------------------------------------------------- */
body.cf-theme .mr-announce {
    background-color: var(--cf-fuchsia);
    background-image: none;
    color: #fff;
    font-family: var(--cf-font-body);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    padding: 0.6rem 1rem;
}

body.cf-theme .mr-header {
    background-color: var(--cf-white);
    border-bottom: 0;
    box-shadow: 0 4px 20px rgba(24, 28, 32, 0.04);
}

body.cf-theme .mr-logo {
    font-family: var(--cf-font-head);
    font-size: clamp(1.35rem, 2vw, 1.6rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--cf-fuchsia);
}

body.cf-theme .mr-nav-link {
    font-family: var(--cf-font-body);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--cf-muted);
}

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

/* The export marks the current section with a 2px fuchsia underline. */
body.cf-theme .mr-nav-link.is-active {
    color: var(--cf-fuchsia);
    font-weight: 600;
    border-bottom-color: var(--cf-fuchsia);
}

body.cf-theme .mr-nav .dropdown-menu {
    border-radius: var(--cf-card-radius);
    border-color: var(--cf-line);
    box-shadow: var(--cf-shadow);
    padding: 0.5rem;
}

body.cf-theme .dropdown-item { border-radius: var(--cf-pill); padding: 0.45rem 1rem; }
body.cf-theme .dropdown-item:hover { background: var(--cf-blush); color: var(--cf-fuchsia); }

body.cf-theme .mr-icon-btn { border-radius: var(--cf-pill); color: var(--cf-fuchsia); }
body.cf-theme .mr-icon-btn:hover { background: var(--cf-blush); color: var(--cf-fuchsia); }

/* Cart count is the design's sunny secondary-container chip; the wishlist
   count stays fuchsia so the two are never confused. */
body.cf-theme .mr-badge { background-color: var(--cf-yellow); color: var(--cf-yellow-ink); }
body.cf-theme .mr-badge--wish { background-color: var(--cf-fuchsia); color: #fff; }

body.cf-theme .mr-search input {
    border-radius: var(--cf-pill);
    background: var(--cf-band);
    border-color: transparent;
    padding: 0.6rem 2.6rem 0.6rem 1.25rem;
}

body.cf-theme .mr-search input:focus {
    background: var(--cf-white);
    border-color: var(--cf-fuchsia);
    box-shadow: 0 0 0 0.22rem rgba(var(--cf-fuchsia-rgb), 0.14);
}

body.cf-theme .offcanvas { background-color: var(--cf-white); }

/* --------------------------------------------------------------------------
   Hero — full-bleed photograph under an INVERTED warm-white scrim so the
   charcoal headline reads as ink on stationery (the export's
   `bg-gradient-to-r from-white/60`). The scrim is never removed: it is the only
   thing keeping the headline legible over an arbitrary merchant photo (measured
   14.5:1 at the copy block even over a pure-black upload).
   -------------------------------------------------------------------------- */
body.cf-theme .cf-hero {
    min-height: clamp(520px, 68vh, 640px);
    background-color: var(--cf-band-alt);
    color: var(--cf-ink);
}

body.cf-theme .cf-hero .mr-hero__overlay {
    background: linear-gradient(
        90deg,
        rgba(253, 251, 247, 0.95) 0%,
        rgba(253, 251, 247, 0.84) 34%,
        rgba(253, 251, 247, 0.3) 68%,
        rgba(253, 251, 247, 0) 100%
    );
}

body.cf-theme .cf-hero__copy { max-width: 36rem; }

/* (0,3,1) so it beats the base `.mr-hero .mr-hero__copy h1 { color:#fff }`. */
body.cf-theme .cf-hero .cf-hero__title {
    color: var(--cf-ink);
    font-size: clamp(2.1rem, 4.4vw, 3rem);
    line-height: 1.16;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
}

body.cf-theme .cf-hero__lead {
    color: var(--cf-muted);
    font-size: 1.08rem;
    line-height: 1.7;
    max-width: 44ch;
    margin-bottom: 2.25rem;
}

body.cf-theme .mr-btn--hero { padding: 1rem 2.4rem; font-size: 0.86rem; }

/* --------------------------------------------------------------------------
   Trust strip (inherited markup) — the icon sits in a white 12px rounded tile
   with a soft shadow, label beside it in the label-md style.
   -------------------------------------------------------------------------- */
body.cf-theme .mr-trust svg {
    width: 50px;
    height: 50px;
    padding: 12px;
    border-radius: 0.85rem;
    background: var(--cf-white);
    color: var(--cf-fuchsia);
    box-shadow: var(--cf-shadow-sm);
    transition: background-color 0.25s ease, color 0.25s ease;
}

body.cf-theme .mr-trust:hover svg { background: var(--cf-fuchsia); color: #fff; }

body.cf-theme .mr-trust strong {
    font-family: var(--cf-font-body);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
}

/* --------------------------------------------------------------------------
   "Plan Your Celebration" — square 16px occasion tiles, caption underneath.
   -------------------------------------------------------------------------- */
body.cf-theme .cf-occasion { display: block; text-decoration: none; }

body.cf-theme .cf-occasion__media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--cf-card-radius);
    background: var(--cf-fill);
    box-shadow: var(--cf-shadow-sm);
}

body.cf-theme .cf-occasion__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

body.cf-theme .cf-occasion:hover .cf-occasion__media img { transform: scale(1.08); }

body.cf-theme .cf-occasion__placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--cf-blush) 0%, var(--cf-fill) 55%, var(--cf-yellow-soft) 100%);
}

body.cf-theme .cf-occasion__label {
    display: block;
    margin-top: 0.9rem;
    text-align: center;
    font-family: var(--cf-font-head);
    font-size: clamp(1.02rem, 1.6vw, 1.3rem);
    font-weight: 600;
    color: var(--cf-ink);
    transition: color 0.2s ease;
}

body.cf-theme .cf-occasion:hover .cf-occasion__label { color: var(--cf-fuchsia); }

/* --------------------------------------------------------------------------
   Promo tiles (inherited markup) — the export's short landscape banners with a
   bottom-up scrim, white title and a "Shop Now" label. The hover rule below
   also overrides the base's `.mr-promo:hover .mr-promo__cta` DESCENDANT
   selector, which would otherwise repaint the label with the accent gold and
   sink it into the dark scrim.
   -------------------------------------------------------------------------- */
body.cf-theme .mr-promo { aspect-ratio: 16 / 9; border-radius: var(--cf-card-radius); }

body.cf-theme .mr-promo__scrim {
    background: linear-gradient(180deg, rgba(24, 28, 32, 0.12) 30%, rgba(24, 28, 32, 0.62) 100%);
}

body.cf-theme .mr-promo:hover .mr-promo__scrim {
    background: linear-gradient(180deg, rgba(24, 28, 32, 0.25) 20%, rgba(24, 28, 32, 0.72) 100%);
}

body.cf-theme .mr-promo__cap { left: 1.5rem; right: 1.5rem; bottom: 1.5rem; }

body.cf-theme .mr-promo__title {
    font-family: var(--cf-font-head);
    font-size: clamp(1.2rem, 1.8vw, 1.5rem);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

body.cf-theme .mr-promo__cta {
    font-family: var(--cf-font-body);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    border-bottom: 0;
    padding-bottom: 0;
}

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

/* --------------------------------------------------------------------------
   "Party Starters" — heading + supporting line left, underlined fuchsia
   see-all link right.
   -------------------------------------------------------------------------- */
body.cf-theme .cf-featured__lead {
    margin-top: 0.55rem;
    color: var(--cf-muted);
    font-size: 1rem;
}

body.cf-theme .cf-viewall {
    color: var(--cf-fuchsia);
    font-family: var(--cf-font-body);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    border-bottom: 2px solid var(--cf-fuchsia);
    padding-bottom: 0.25rem;
    transition: color 0.2s ease, border-color 0.2s ease;
}

body.cf-theme .cf-viewall:hover { color: var(--cf-fuchsia-deep); border-color: var(--cf-fuchsia-deep); }

/* --------------------------------------------------------------------------
   Product cards (inherited mr-card) — pure white 16px cards on a soft ambient
   shadow, media bleeding to the card edges, sunny sale chip, fuchsia pill
   quick-add. Applies to home grids AND shop / search / related rails since the
   card partial is shared.

   Because the card now has a background, its direct text children MUST be
   inset — the base card is borderless, so `__title` / `__price` sit flush by
   design and would otherwise collide with the new edge.
   -------------------------------------------------------------------------- */
body.cf-theme .mr-card {
    background: var(--cf-white);
    border-radius: var(--cf-card-radius);
    overflow: hidden;
    box-shadow: var(--cf-shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

body.cf-theme .mr-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(var(--cf-fuchsia-rgb), 0.15);
}

body.cf-theme .mr-card__media {
    aspect-ratio: 1 / 1;
    border-radius: 0;
    margin-bottom: 0.9rem;
    background: var(--cf-fill);
}

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

/* Sunny-yellow pill sale chip (the export's "Sale" / "-18% OFF" badge). */
body.cf-theme .mr-card__badge,
body.cf-theme .mr-sale-tag {
    border-radius: var(--cf-pill);
    background: var(--cf-yellow);
    color: var(--cf-yellow-ink);
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.26rem 0.6rem;
}

/* Both round overlay controls, styled TOGETHER: white circle + fuchsia glyph
   (6.47:1). Neither hover state is overridden — the base gives the heart
   `#fff` (glyph stays fuchsia, 6.47:1) and the eye the guaranteed-legible
   --mr-ink on --mr-surface pair (17.1:1) — so both remain above the 3:1 WCAG
   minimum for UI components no matter what a merchant does to the tokens. */
body.cf-theme .mr-card__wish,
body.cf-theme .mr-card__quickview {
    border-radius: var(--cf-pill);
    background-color: rgba(255, 255, 255, 0.92);
    color: var(--cf-fuchsia);
    box-shadow: 0 4px 12px rgba(24, 28, 32, 0.12);
}

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

body.cf-theme .mr-card__quick {
    background-color: var(--cf-fuchsia);
    border-radius: var(--cf-pill);
    margin: 0 0.75rem 0.75rem;
    width: calc(100% - 1.5rem);
    font-family: var(--cf-font-body);
    font-weight: 700;
    letter-spacing: 0.08em;
}

body.cf-theme .mr-card__eyebrow { color: var(--cf-soft); letter-spacing: 0.08em; }

body.cf-theme .mr-card__title {
    font-family: var(--cf-font-body);
    font-size: 1rem;
    font-weight: 700;
}

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

body.cf-theme .mr-card__price {
    font-family: var(--cf-font-body);
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--cf-ink);
}

/* The export prints the reduced price in brand fuchsia, not the shared red. */
body.cf-theme .ll-price--sale { color: var(--cf-fuchsia); }

/* --------------------------------------------------------------------------
   "New Themes" — tall 3:4 kit tiles with a bottom-up gradient caption.
   -------------------------------------------------------------------------- */
body.cf-theme .cf-kit {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--cf-card-radius);
    background: var(--cf-fill);
    text-decoration: none;
}

body.cf-theme .cf-kit__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

body.cf-theme .cf-kit:hover .cf-kit__img { transform: scale(1.06); }

body.cf-theme .cf-kit__placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, var(--cf-blush) 0%, var(--cf-fill) 60%, var(--cf-yellow-soft) 100%);
}

body.cf-theme .cf-kit__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.18) 45%, rgba(0, 0, 0, 0) 72%);
}

body.cf-theme .cf-kit__cap { position: absolute; left: 1.4rem; right: 1.4rem; bottom: 1.4rem; z-index: 2; }

body.cf-theme .cf-kit__title {
    display: block;
    font-family: var(--cf-font-head);
    font-size: clamp(1.05rem, 1.6vw, 1.4rem);
    font-weight: 600;
    line-height: 1.25;
    color: #fff;
    margin-bottom: 0.2rem;
}

body.cf-theme .cf-kit__price { display: block; font-size: 0.95rem; color: rgba(255, 255, 255, 0.86); }

/* --------------------------------------------------------------------------
   "Shop by Category" — big white circles on the tinted band, name beneath
   (the export uses icon circles; this renders a representative product photo
   so the band stays data-driven, matching the export's own mobile frame).
   -------------------------------------------------------------------------- */
body.cf-theme .cf-cat { display: block; text-align: center; text-decoration: none; }

body.cf-theme .cf-cat__circle {
    position: relative;
    display: block;
    width: 100%;
    max-width: 220px;
    margin-inline: auto;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 50%;
    background: var(--cf-white);
    box-shadow: var(--cf-shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body.cf-theme .cf-cat:hover .cf-cat__circle {
    transform: translateY(-4px);
    box-shadow: var(--cf-shadow);
}

body.cf-theme .cf-cat__circle img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.cf-theme .cf-cat__label {
    display: block;
    margin-top: 1.1rem;
    font-family: var(--cf-font-head);
    font-size: clamp(1.02rem, 1.5vw, 1.3rem);
    font-weight: 600;
    color: var(--cf-ink);
    transition: color 0.2s ease;
}

body.cf-theme .cf-cat:hover .cf-cat__label { color: var(--cf-fuchsia); }

/* --------------------------------------------------------------------------
   "The Party Journal" — white 16px story cards, sunny category chip, fuchsia
   read-story link.
   -------------------------------------------------------------------------- */
body.cf-theme .cf-story {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border-radius: var(--cf-card-radius);
    background: var(--cf-white);
    box-shadow: var(--cf-shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

body.cf-theme .cf-story:hover { transform: translateY(-4px); box-shadow: var(--cf-shadow); }

body.cf-theme .cf-story__media { border-radius: 0; aspect-ratio: 16 / 10; }
body.cf-theme .cf-story__body { padding: 1.5rem; }
body.cf-theme .cf-story__title { font-family: var(--cf-font-head); font-size: 1.2rem; font-weight: 600; }
body.cf-theme .cf-story__title a:hover { color: var(--cf-fuchsia); }

body.cf-theme .cf-story__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body.cf-theme .cf-story__link {
    font-family: var(--cf-font-body);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--cf-fuchsia);
    text-decoration: none;
}

body.cf-theme .cf-story__link:hover { color: var(--cf-fuchsia-deep); }

/* --------------------------------------------------------------------------
   "The Party Line" newsletter — a 32px-radius fuchsia panel with soft blurred
   celebration blobs, centered white copy and a sunny Subscribe pill. The panel
   is token-driven: a merchant who recolours "primary" recolours the band.
   -------------------------------------------------------------------------- */
body.cf-theme .cf-cta__panel {
    position: relative;
    overflow: hidden;
    border-radius: var(--cf-panel-radius);
    padding: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 5vw, 4rem);
    background-color: var(--cf-fuchsia);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 55%);
    box-shadow: 0 16px 40px rgba(var(--cf-fuchsia-rgb), 0.24);
}

body.cf-theme .cf-cta__panel::before,
body.cf-theme .cf-cta__panel::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    filter: blur(44px);
}

body.cf-theme .cf-cta__panel::before { top: -4rem; left: -3rem; width: 13rem; height: 13rem; }
body.cf-theme .cf-cta__panel::after { bottom: -5rem; right: -4rem; width: 17rem; height: 17rem; }

body.cf-theme .cf-cta__panel > * { position: relative; z-index: 1; }

body.cf-theme .cf-cta__title { color: #fff; font-size: clamp(2rem, 4vw, 3rem); }

body.cf-theme .cf-cta__body {
    max-width: 46ch;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.08rem;
    line-height: 1.7;
}

body.cf-theme .cf-cta__form { display: flex; gap: 1rem; max-width: 34rem; }

/* A near-solid field, not the export's `bg-white/10` — white-on-frosted-
   fuchsia placeholder text measured 2.9:1 and fails AA. */
body.cf-theme .cf-cta__form input {
    flex: 1;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--cf-pill);
    background: rgba(255, 255, 255, 0.95);
    color: var(--cf-ink);
    padding: 0.8rem 1.4rem;
    font-size: 0.98rem;
}

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

body.cf-theme .cf-cta__form input:focus {
    outline: none;
    background: #fff;
    border-color: var(--cf-yellow);
    box-shadow: 0 0 0 0.22rem rgba(246, 195, 68, 0.4);
}

body.cf-theme .cf-cta__btn {
    background: var(--cf-yellow);
    border-color: var(--cf-yellow);
    color: var(--cf-yellow-ink);
    border-radius: var(--cf-pill);
    padding: 0.85rem 2.4rem;
    box-shadow: 0 8px 20px rgba(24, 28, 32, 0.14);
}

body.cf-theme .cf-cta__btn:hover { background: var(--cf-yellow); color: var(--cf-yellow-ink); transform: scale(1.03); }
body.cf-theme .cf-cta__btn[disabled] { opacity: 0.92; cursor: not-allowed; transform: none; }

body.cf-theme .cf-cta__note { color: rgba(255, 255, 255, 0.88); font-size: 0.78rem; }

/* --------------------------------------------------------------------------
   Inherited chrome — brand strip, pagination, tabs, gallery, rails, footer.
   -------------------------------------------------------------------------- */
body.cf-theme .mr-brandstrip {
    background: var(--cf-white);
    border-block: 1px solid var(--cf-line);
    opacity: 1;
}

body.cf-theme .mr-brandstrip span {
    font-family: var(--cf-font-head);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--cf-soft);
}

/* Circular pagination, like the export's category page. */
body.cf-theme .mr-page { border-radius: var(--cf-pill); }
body.cf-theme .mr-page:hover { border-color: var(--cf-fuchsia); color: var(--cf-fuchsia); }
body.cf-theme .mr-page.is-active { background: var(--cf-fuchsia); border-color: var(--cf-fuchsia); color: #fff; }

body.cf-theme .mr-tabs .nav-link.active { color: var(--cf-fuchsia); border-bottom-color: var(--cf-fuchsia); }
body.cf-theme .mr-filter__link.is-active { color: var(--cf-fuchsia); }

body.cf-theme .mr-gallery__main { border-radius: var(--cf-card-radius); }
body.cf-theme .mr-gallery__thumb { border-radius: 0.6rem; }
body.cf-theme .mr-gallery__thumb.is-active { border-width: 2px; border-color: var(--cf-fuchsia); }

body.cf-theme .mr-rail-btn { border-radius: var(--cf-pill); }
body.cf-theme .mr-rail-btn:hover { background: var(--cf-fuchsia); border-color: var(--cf-fuchsia); color: #fff; }

body.cf-theme .mr-summary,
body.cf-theme .mr-acct-nav,
body.cf-theme .mr-panel { border-radius: var(--cf-card-radius); }

body.cf-theme .mr-status { border-radius: var(--cf-pill); }

body.cf-theme .mr-article__media { border-radius: var(--cf-card-radius); }
body.cf-theme .mr-article__title a:hover { color: var(--cf-fuchsia); }
body.cf-theme .mr-crumbs a:hover { color: var(--cf-fuchsia); }
body.cf-theme .mr-cart-row__title a:hover { color: var(--cf-fuchsia); }
body.cf-theme .mr-cart-row__media { border-radius: 0.7rem; }

body.cf-theme .mr-footer {
    background-color: var(--cf-white);
    border-top: 1px solid var(--cf-line);
}

body.cf-theme .mr-footer h4 { font-family: var(--cf-font-body); color: var(--cf-ink); letter-spacing: 0.12em; }
body.cf-theme .mr-footer a:hover { color: var(--cf-fuchsia); }

body.cf-theme .mr-footer__brand {
    font-family: var(--cf-font-head);
    font-weight: 700;
    color: var(--cf-fuchsia);
}

body.cf-theme .mr-social { border-radius: 50%; border-color: var(--cf-line-strong); color: var(--cf-muted); }

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

/* Respect reduced motion — every lift, zoom and scale here is decorative. */
@media (prefers-reduced-motion: reduce) {
    body.cf-theme .mr-btn,
    body.cf-theme .mr-card,
    body.cf-theme .cf-story,
    body.cf-theme .cf-cat__circle,
    body.cf-theme .mr-trust svg {
        transition: none;
    }

    body.cf-theme .mr-btn--primary:hover,
    body.cf-theme .mr-btn--outline:hover,
    body.cf-theme .cf-cta__btn:hover,
    body.cf-theme .mr-card:hover,
    body.cf-theme .cf-story:hover,
    body.cf-theme .cf-cat:hover .cf-cat__circle {
        transform: none;
    }

    body.cf-theme .cf-occasion__media img,
    body.cf-theme .cf-kit__img {
        transition: none;
    }

    body.cf-theme .cf-occasion:hover .cf-occasion__media img,
    body.cf-theme .cf-kit:hover .cf-kit__img {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Mobile (from the Stitch mobile frames): shorter hero with a bottom-up scrim
   so the full-width copy still sits on a bright field, 2-column product and
   occasion grids, stacked newsletter form.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    body.cf-theme .cf-hero { min-height: clamp(440px, 62vh, 520px); }

    body.cf-theme .cf-hero .mr-hero__overlay {
        background: linear-gradient(
            180deg,
            rgba(253, 251, 247, 0.62) 0%,
            rgba(253, 251, 247, 0.9) 45%,
            rgba(253, 251, 247, 0.97) 100%
        );
    }

    body.cf-theme .cf-hero__title { font-size: 1.95rem; }
    body.cf-theme .cf-hero__lead { font-size: 1rem; margin-bottom: 1.75rem; }
    body.cf-theme .mr-btn--hero { padding: 0.85rem 1.8rem; }
    body.cf-theme .mr-promo { aspect-ratio: 3 / 2; }
    body.cf-theme .cf-cta__form { flex-direction: column; }
    body.cf-theme .cf-cta__btn { width: 100%; }
    body.cf-theme .cf-story__body { padding: 1.25rem; }
}