/* ==========================================================================
   Crumb & Co — warm patisserie charm for a western bakery (bread, cakes,
   pastries, cookie tins).

   Ported from the Stitch "Crumb & Co" export (design system:
   docs/templates/pending/stitch_64_crumb_co_bakery_homepage/…/
   artisanal_patisserie_system/DESIGN.md): a vanilla-cream canvas warmer than
   white, cherry-red structure and calls to action, butterscotch reserved for
   badges and rewards, softened-charcoal body copy, Lora headlines (the
   export's Literata, substituted per its own DESIGN.md prose) over Source
   Sans 3 UI + prices, a friendly 1rem radius on every card and photo with
   fully pill-shaped buttons and tags, and tonal layers with a faint
   cherry-tinted diffusion instead of grey shadows.

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

     (a) style the NEW `cb-*` markup into the Stitch design; and
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
         base neutral tokens at the vanilla-cream palette, dressing the
         announce bar and footer in cherry, warming the hero scrim, and
         re-shaping cards/tiles to the 1rem soft-edged language.

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

   CONTRAST (sRGB relative-luminance arithmetic, measured at authoring time
   against the #fdf8f0 cream canvas; a warm-cream bakery palette is a
   light-primary trap, so the bright hue is deliberately the ACCENT and the
   primary is kept dark enough to be text):
     - primary Cherry #b3374a is DARK — 5.58:1 as TEXT on cream and 5.90:1
       as a FILL under white text. Safe in every inherited role that assumes
       a dark primary: .mr-badge, .mr-cta, .mr-status, .btn-primary,
       .mr-page.is-active, .mr-social:hover, .mr-step__dot, .mr-acct-avatar,
       .mr-rail-btn:hover, .mr-tabs .nav-link.active, .mr-filter__link and
       .mr-gallery__thumb.is-active all keep AA without a guard block.
     - accent #825501 (the design system's own "secondary" token — the exact
       colour its eyebrows render in) is the TEXT-safe butterscotch: 6.11:1
       on cream, 6.46:1 under white. It drives every inherited --ll-accent
       role (eyebrows, trust icons, .mr-card__wish.is-active, tab underline).
     - the design's bright Butterscotch #fec16a is a FILL-ONLY colour (1.52:1
       as text on cream — nowhere near AA). It carries the charcoal ink
       instead: #2d2926 on #fec16a is 8.96:1, used for the SALE badge and the
       Subscribe button exactly as the export does.
     - --cb-butter-soft #ffddb3 is the on-cherry accent (4.56:1 over the
       cherry band) for the footer column headings; the raw #fec16a would be
       3.66:1 there and only pass as large text.
     - --cb-soft #7a6a60 (small captions / breadcrumbs / eyebrow-scale text)
       clears 4.89:1 on cream; the design's own "outline" #8b7172 measures
       4.22:1 and would fail the normal-text minimum.
     - body ink #2d2926 is 13.63:1 and the warm muted #574142 is 8.87:1.
   ========================================================================== */

body.cb-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --cb-cherry: var(--bs-primary, #b3374a);
    --cb-cherry-rgb: var(--bs-primary-rgb, 179, 55, 74);
    /* 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 cherry. NOTE: deliberately NOT a
       bare `body.cb-theme a { color: … }` rule — that is only (0,1,2) and
       would out-specify the base's `.mr-btn--primary { color:#fff }` (0,1,0),
       repainting the hero button's label to ink. */
    --bs-link-color-rgb: var(--cb-cherry-rgb);
    /* Text-safe butterscotch (the accent token) + the bright fill-only
       butterscotch family — see the CONTRAST note above. */
    --cb-butter-ink: var(--ll-accent, #825501);
    --cb-butter: #fec16a;
    --cb-butter-soft: #ffddb3;
    --cb-font-head: var(--ll-font-headings, "Lora"), Georgia, serif;
    --cb-font-body: var(--ll-font-body, "Source Sans 3"), system-ui, -apple-system, sans-serif;

    /* Vanilla-cream patisserie palette (DESIGN.md prose + the export's
       rendered surfaces). */
    --cb-cream: #fdf8f0;          /* page canvas + header (background)        */
    --cb-white: #ffffff;          /* trust strip + card media wells           */
    --cb-container-low: #f8f3eb;  /* featured band                            */
    --cb-container: #f2ede5;      /* hero letterbox / quiet fills             */
    --cb-container-high: #ece8e0; /* categories band + tile wells             */
    --cb-ink: #2d2926;            /* softened charcoal body copy              */
    --cb-muted: #574142;          /* warm on-surface-variant                  */
    --cb-soft: #7a6a60;           /* small captions — see CONTRAST note       */

    /* Shape + depth — friendly organic curves: 1rem on cards/photos, pill on
       buttons and tags (the button_radius token), and a faint cherry-tinted
       diffusion instead of a grey shadow (DESIGN.md "Tonal Layers"). */
    --cb-radius-card: 1rem;
    --cb-radius-field: 0.75rem;
    --cb-radius-pill: 9999px;
    --cb-shadow: 0 4px 20px -2px rgba(var(--cb-cherry-rgb), 0.08);

    /* Re-point the inherited base neutrals at the cream palette so every
       inherited mr-* surface (bands, borders, fills, muted text) warms — this
       single block restyles shop / PDP / cart / checkout / account / blog.
       Borders read a cherry-tinted hairline via color-mix, with a literal
       fallback for browsers without it. */
    --mr-ink: var(--cb-ink);
    --mr-muted: var(--cb-muted);
    --mr-soft: var(--cb-soft);
    --mr-surface: var(--cb-cream);
    --mr-band: var(--cb-container-high);
    --mr-band-alt: var(--cb-container-low);
    --mr-fill: var(--cb-container);
    --mr-border: #f2e0dd;
    --mr-border: color-mix(in srgb, var(--cb-cherry) 12%, var(--cb-cream));
    --mr-border-strong: #debfc0;
    --mr-border-strong: color-mix(in srgb, var(--cb-cherry) 30%, var(--cb-cream));
    --mr-radius: var(--cb-radius-card);
    --mr-gold: var(--cb-butter-ink);
    --mr-shadow: var(--cb-shadow);

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

/* --------------------------------------------------------------------------
   Shape discipline — the button_radius token is the pill (2rem), which also
   drives --bs-border-radius. Buttons, tags and pagination WANT that; form
   fields and dialogs do not, so they take the 0.75rem / 1rem card language
   back (the export's inputs are `rounded-lg` on a soft-cream fill).
   -------------------------------------------------------------------------- */
body.cb-theme .form-control,
body.cb-theme .form-select,
body.cb-theme textarea.form-control {
    border-radius: var(--cb-radius-field);
}

body.cb-theme .modal-content,
body.cb-theme .dropdown-menu,
body.cb-theme .card,
body.cb-theme .mr-summary,
body.cb-theme .mr-panel,
body.cb-theme .mr-alert {
    border-radius: var(--cb-radius-card);
}

body.cb-theme .offcanvas { border-radius: 0; }

/* --------------------------------------------------------------------------
   Typography — Lora headlines in the softened charcoal (the export keeps
   section headings on-surface and reserves cherry for the hero/prices),
   tracked butterscotch-ink eyebrows, bold tracked sans prices.
   -------------------------------------------------------------------------- */
body.cb-theme h1, body.cb-theme h2, body.cb-theme h3,
body.cb-theme h4, body.cb-theme h5, body.cb-theme h6 {
    font-family: var(--cb-font-head);
    color: var(--cb-ink);
    font-weight: 700;
    letter-spacing: -0.02em;
}

body.cb-theme .mr-eyebrow,
body.cb-theme .cb-eyebrow {
    font-family: var(--cb-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cb-butter-ink);
}

/* --------------------------------------------------------------------------
   Buttons — pill-shaped cherry primary with white bold caps, a cherry-outline
   secondary on a transparent ground (DESIGN.md "Components"), and the
   design's tactile 0.98x press instead of a lift.
   -------------------------------------------------------------------------- */
body.cb-theme .mr-btn {
    font-family: var(--cb-font-body);
    font-weight: 700;
    letter-spacing: 0.1em;
    transition: filter 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
}

body.cb-theme .mr-btn:active { transform: scale(0.98); }

body.cb-theme .mr-btn--primary {
    background-color: var(--cb-cherry);
    border-color: var(--cb-cherry);
    color: #fff;
}

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

body.cb-theme .mr-btn--outline {
    border-width: 2px;
    border-color: var(--cb-cherry);
    color: var(--cb-cherry);
}

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

/* The hero secondary sits over the photo scrim: a white keyline that fills
   white and carries the cherry on hover (the base default, restated so the
   2px keyline matches the export's outline button weight). */
body.cb-theme .mr-btn--on-dark {
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.85);
    color: #fff;
}

body.cb-theme .mr-btn--on-dark:hover {
    background-color: #fff;
    color: var(--cb-cherry);
}

/* The base --light button hovers into the raw accent; keep it in the family
   but ink it safely (white on #825501 is 6.46:1). */
body.cb-theme .mr-btn--light {
    background-color: #fff;
    color: var(--cb-cherry);
}

body.cb-theme .mr-btn--light:hover {
    background-color: var(--cb-butter);
    color: var(--cb-ink);
}

/* The export's "View All" / "Read Story" affordance — a cherry bold link with
   an arrow, underlined on hover. */
body.cb-theme .cb-view-link {
    color: var(--cb-cherry);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

body.cb-theme .cb-view-link:hover { color: var(--cb-cherry); text-decoration: underline; }

body.cb-theme .mr-ulink { color: var(--cb-cherry); }
body.cb-theme .mr-ulink:hover { color: var(--cb-ink); border-color: var(--cb-ink); }

/* --------------------------------------------------------------------------
   Inputs — the export's soft-cream field with no visible border at rest,
   filling white and drawing a cherry keyline on focus.

   IMPORTANT: overriding border-color here silently swallows Bootstrap's red
   .is-invalid state on every checkout / address / auth form, so it is
   re-asserted explicitly below. Never a `padding` SHORTHAND on .form-select
   either — that would collapse the reserved 2.25rem caret gutter (the base
   app.css restores it with padding-inline-end; untouched here).
   -------------------------------------------------------------------------- */
body.cb-theme .form-control,
body.cb-theme .form-select {
    background-color: var(--cb-container-low);
    border-color: transparent;
    color: var(--cb-ink);
}

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

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

/* Re-assert the invalid state (Bootstrap's own colour) — the border override
   above would otherwise erase the only visual cue on a rejected field. */
body.cb-theme .form-control.is-invalid,
body.cb-theme .form-select.is-invalid,
body.cb-theme .was-validated .form-control:invalid,
body.cb-theme .was-validated .form-select:invalid {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
}

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

/* --------------------------------------------------------------------------
   Announcement + header — the export's cherry whisper band over a cream
   sticky header: Lora cherry wordmark, quiet warm-brown nav with a cherry
   underline on the active item.
   -------------------------------------------------------------------------- */
body.cb-theme .mr-announce {
    background-color: var(--cb-cherry);
    color: rgba(255, 255, 255, 0.96);
    letter-spacing: 0.16em;
    font-size: 0.68rem;
}

body.cb-theme .mr-header {
    background-color: var(--cb-cream);
    border-bottom-color: var(--mr-border);
    box-shadow: 0 1px 0 rgba(var(--cb-cherry-rgb), 0.04);
}

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

body.cb-theme .mr-nav-link {
    font-family: var(--cb-font-body);
    color: var(--cb-muted);
}

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

body.cb-theme .mr-nav-link.is-active {
    color: var(--cb-cherry);
    font-weight: 700;
    border-bottom-color: var(--cb-cherry);
}

body.cb-theme .mr-search input {
    background: var(--cb-container-low);
    border-color: transparent;
}

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

body.cb-theme .mr-icon-btn { color: var(--cb-muted); }
body.cb-theme .mr-icon-btn:hover { color: var(--cb-cherry); }
/* The cart count chip is the design's butterscotch pill with dark ink. */
body.cb-theme .mr-badge {
    background-color: var(--cb-butter);
    color: var(--cb-ink);
}

/* --------------------------------------------------------------------------
   Hero (inherited mr-hero) — the export sets its headline over a macro cake
   photograph. The base's neutral scrim is re-tinted to warm espresso (kept as
   a real gradient: it is the only thing guaranteeing the white h1 stays
   readable over an arbitrary merchant upload), and the eyebrow becomes the
   export's translucent pill chip.
   -------------------------------------------------------------------------- */
body.cb-theme .mr-hero { background-color: #2b1a16; }

body.cb-theme .mr-hero__overlay {
    background: linear-gradient(90deg, rgba(43, 26, 22, 0.68) 0%, rgba(43, 26, 22, 0.38) 48%, rgba(43, 26, 22, 0.1) 100%);
}

body.cb-theme .mr-hero .mr-hero__copy .mr-eyebrow {
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    border-radius: var(--cb-radius-pill);
    padding: 0.35rem 1rem;
    letter-spacing: 0.2em;
}

body.cb-theme .mr-hero .mr-hero__copy h1 {
    font-family: var(--cb-font-head);
    letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   Trust strip (cb-trust) — the export's white band of five centered
   butterscotch icons over single tracked-caps labels.
   -------------------------------------------------------------------------- */
body.cb-theme .cb-trust {
    background-color: var(--cb-white);
    border-bottom-color: var(--mr-border) !important;
}

body.cb-theme .cb-trust__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
}

body.cb-theme .cb-trust__item svg {
    width: 28px;
    height: 28px;
    color: var(--cb-butter-ink);
    flex-shrink: 0;
}

body.cb-theme .cb-trust__item strong {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cb-muted);
    line-height: 1.4;
}

body.cb-theme .cb-trust__item span {
    font-size: 0.82rem;
    color: var(--cb-soft);
}

/* --------------------------------------------------------------------------
   Celebrations (cb-celebrations) — the cb-only occasion band: square photo
   tiles at the 1rem radius with the name in bold underneath, the photo
   scaling gently on hover (the export's `group-hover:scale-105`).
   -------------------------------------------------------------------------- */
body.cb-theme .cb-celebration {
    display: block;
    text-decoration: none;
    color: inherit;
}

body.cb-theme .cb-celebration__media {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--cb-radius-card);
    background: var(--cb-container-high);
    box-shadow: var(--cb-shadow);
    margin-bottom: 1rem;
}

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

body.cb-theme .cb-celebration:hover .cb-celebration__media img { transform: scale(1.05); }

body.cb-theme .cb-celebration__placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--cb-container), var(--cb-container-high));
}

body.cb-theme .cb-celebration__title {
    display: block;
    text-align: center;
    font-family: var(--cb-font-body);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--cb-ink);
    transition: color 0.2s ease;
}

body.cb-theme .cb-celebration:hover .cb-celebration__title { color: var(--cb-cherry); }

/* --------------------------------------------------------------------------
   Promo bento (cb-promos) — the export's asymmetric editorial block: the lead
   tile spans the tall left column with a bottom-left caption under a rising
   dark gradient, the stacked tiles carry centered titles over a flat scrim.
   Single column on mobile (the tiles keep a 4:3 ratio there).
   -------------------------------------------------------------------------- */
body.cb-theme .cb-promo-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}

body.cb-theme .cb-promo {
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;
    border-radius: var(--cb-radius-card);
    background: var(--cb-container-high);
    box-shadow: var(--cb-shadow);
    aspect-ratio: 4 / 3;
}

body.cb-theme .cb-promo__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

body.cb-theme .cb-promo:hover .cb-promo__img { transform: scale(1.05); }

body.cb-theme .cb-promo__placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--cb-container), var(--cb-container-high));
}

body.cb-theme .cb-promo__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(29, 20, 17, 0.28);
}

body.cb-theme .cb-promo--lead .cb-promo__scrim {
    background: linear-gradient(0deg, rgba(29, 20, 17, 0.68) 0%, rgba(29, 20, 17, 0.18) 46%, rgba(29, 20, 17, 0.02) 100%);
}

body.cb-theme .cb-promo:hover .cb-promo__scrim { background-color: rgba(29, 20, 17, 0.2); }
body.cb-theme .cb-promo--lead:hover .cb-promo__scrim { background-color: transparent; }

body.cb-theme .cb-promo__cap {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem;
    text-align: center;
    color: #fff;
}

body.cb-theme .cb-promo--lead .cb-promo__cap {
    align-items: flex-start;
    justify-content: flex-end;
    text-align: left;
}

body.cb-theme .cb-promo__title {
    font-family: var(--cb-font-head);
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    text-shadow: 0 2px 12px rgba(29, 20, 17, 0.45);
}

body.cb-theme .cb-promo__text {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.92);
    max-width: 44ch;
}

body.cb-theme .cb-promo__cta {
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    color: var(--cb-butter-soft);
    margin-top: 0.35rem;
    transition: color 0.2s ease;
}

body.cb-theme .cb-promo:hover .cb-promo__cta { color: #fff; }

@media (min-width: 768px) {
    body.cb-theme .cb-promo-grid {
        grid-template-columns: 7fr 5fr;
        grid-auto-rows: 288px;
    }

    body.cb-theme .cb-promo { aspect-ratio: auto; height: 100%; }
    body.cb-theme .cb-promo--lead { grid-row: span 2; grid-column: 1; }
    body.cb-theme .cb-promo--stacked { grid-column: 2; }

    /* A merchant who keeps only ONE tile would otherwise get a 7/12-wide tile
       beside an empty column — let it span the full row instead. */
    body.cb-theme .cb-promo:only-child {
        grid-column: 1 / -1;
        grid-row: auto;
        aspect-ratio: 16 / 9;
        height: auto;
    }
}

/* --------------------------------------------------------------------------
   Product cards (inherited mr-card) — the export sits its photography on pure
   white wells at the 1rem radius, prices in bold cherry, and a pill
   butterscotch SALE chip carrying the dark ink (white-on-butterscotch would
   fail; #2d2926 on #fec16a is 8.96:1).

   The two round overlay controls (.mr-card__wish heart + .mr-card__quickview
   eye) need NO override here: the base inks them `var(--bs-primary)` on a
   translucent white circle (cherry on white = 5.90:1) and hovers to
   `var(--mr-ink)` on `var(--mr-surface)` — both re-pointed above, giving
   13.63:1. There is no radius-flatten block in this theme, so they stay round.
   -------------------------------------------------------------------------- */
body.cb-theme .mr-card__media {
    background-color: var(--cb-white);
    border-radius: var(--cb-radius-card);
}

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

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

body.cb-theme .mr-card__eyebrow {
    color: var(--cb-soft);
    letter-spacing: 0.04em;
    text-transform: none;
    font-size: 0.82rem;
    font-weight: 400;
}

body.cb-theme .mr-card__price {
    color: var(--cb-cherry);
    font-size: 1.05rem;
    font-weight: 700;
}

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

body.cb-theme .mr-card__sale {
    background-color: var(--cb-butter);
    color: var(--cb-ink);
    border-radius: var(--cb-radius-pill);
    padding: 0.3rem 0.7rem;
    letter-spacing: 0.08em;
}

body.cb-theme .mr-card__quick {
    background-color: var(--cb-cherry);
    color: #fff;
    letter-spacing: 0.1em;
}

/* --------------------------------------------------------------------------
   Categories (inherited mr-tile--cat) — the export's square photo tiles with
   a centered Lora title-case name over a flat dark scrim (not the base's
   tracked uppercase), plus the centered section heading.
   -------------------------------------------------------------------------- */
/* `.mr-band` is used by exactly one base view — the categories grid — so this
   is a safe way to center its heading without forking the partial. */
body.cb-theme .mr-band > .mr-shell > .mr-display { text-align: center; }

body.cb-theme .mr-tile,
body.cb-theme .mr-tile__img { border-radius: var(--cb-radius-card); }

body.cb-theme .mr-tile--cat {
    height: auto;
    aspect-ratio: 1;
}

body.cb-theme .mr-tile--cat .mr-tile__scrim { background: rgba(29, 20, 17, 0.34); }

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

body.cb-theme .mr-tile--cat .mr-tile__cap {
    font-family: var(--cb-font-head);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    text-shadow: 0 2px 12px rgba(29, 20, 17, 0.45);
}

/* --------------------------------------------------------------------------
   Journal (inherited mr-journal markup) — the export tags each story with a
   soft butterscotch pill above a Lora title; the base renders that label as
   an .mr-eyebrow inside the article, so it becomes the chip here.
   -------------------------------------------------------------------------- */
body.cb-theme .mr-article__media,
body.cb-theme .mr-article__media img { border-radius: var(--cb-radius-card); }

body.cb-theme article > .mr-eyebrow {
    background: rgba(254, 193, 106, 0.28);
    border-radius: var(--cb-radius-pill);
    padding: 0.3rem 0.85rem;
}

body.cb-theme .mr-article__title a { color: var(--cb-ink); }
body.cb-theme .mr-article__title a:hover { color: var(--cb-cherry); }

/* --------------------------------------------------------------------------
   Newsletter (cb-cta) — "Fresh Out the Oven": the inset cherry card with a
   generous 2rem radius, a centered white Lora headline, the frosted pill
   email field and the butterscotch Subscribe button carrying the dark ink.
   -------------------------------------------------------------------------- */
body.cb-theme .cb-cta-wrap { padding-block: 0 var(--mr-section-y); }

body.cb-theme .cb-cta {
    position: relative;
    overflow: hidden;
    background: var(--cb-cherry);
    border-radius: 2rem;
    padding: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 5vw, 4rem);
    text-align: center;
}

body.cb-theme .cb-cta__glyph {
    position: absolute;
    top: -3rem;
    right: -3rem;
    width: 300px;
    height: 300px;
    opacity: 0.1;
    color: #fff;
    pointer-events: none;
}

body.cb-theme .cb-cta__glyph svg { width: 100%; height: 100%; }

body.cb-theme .cb-cta__body { position: relative; z-index: 1; }

body.cb-theme .cb-cta__eyebrow { color: var(--cb-butter-soft); }

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

body.cb-theme .cb-cta__text {
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.1rem;
    max-width: 46ch;
}

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

body.cb-theme .cb-cta__form input {
    flex: 1;
    min-width: 0;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--cb-radius-pill);
    padding: 1rem 1.6rem;
    font-size: 0.95rem;
    color: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.cb-theme .cb-cta__form input::placeholder { color: rgba(255, 255, 255, 0.72); }

body.cb-theme .cb-cta__form input:focus {
    outline: none;
    border-color: var(--cb-butter);
    box-shadow: 0 0 0 3px rgba(254, 193, 106, 0.3);
}

body.cb-theme .cb-cta__btn {
    border: 0;
    background: var(--cb-butter);
    color: var(--cb-ink);
    border-radius: var(--cb-radius-pill);
    padding: 1rem 2.5rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter 0.25s ease, transform 0.15s ease;
}

body.cb-theme .cb-cta__btn:hover { filter: brightness(1.06); }
body.cb-theme .cb-cta__btn:active { transform: scale(0.98); }

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

/* --------------------------------------------------------------------------
   Inherited chrome finishing — the deep-cherry footer (the export's footer
   sits on the darker #921e34 "primary"; the shared token keeps it
   customizer-driven, deepened with a color-mix where supported), with the
   soft butterscotch column headings the export uses.
   -------------------------------------------------------------------------- */
body.cb-theme .mr-footer {
    background-color: var(--cb-cherry);
    background-color: color-mix(in srgb, var(--cb-cherry) 84%, #000);
    border-top: 0;
    color: rgba(255, 255, 255, 0.82);
}

body.cb-theme .mr-footer h4 {
    color: var(--cb-butter-soft);
    font-family: var(--cb-font-body);
    letter-spacing: 0.14em;
}

body.cb-theme .mr-footer__brand {
    color: #fff;
    font-family: var(--cb-font-head);
}

body.cb-theme .mr-footer a { color: rgba(255, 255, 255, 0.82); }
/* Cherry ground: the -ink accent is tuned for a LIGHT backdrop and would sink
   here, so brighten to the soft butterscotch on hover instead. */
body.cb-theme .mr-footer a:hover { color: var(--cb-butter-soft); }

body.cb-theme .mr-social {
    border-color: rgba(255, 255, 255, 0.28);
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
}

body.cb-theme .mr-social:hover {
    background-color: var(--cb-butter);
    border-color: var(--cb-butter);
    color: var(--cb-ink);
}

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

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

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

    body.cb-theme .mr-btn:active,
    body.cb-theme .cb-cta__btn:active { transform: none; }

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

/* --------------------------------------------------------------------------
   Mobile (from the export's mobile frames): the promo bento collapses to a
   single column (handled above), the newsletter form stacks, the celebration
   tiles run two-up (the row-cols grid already does that), and the hero copy
   centers under a slightly shorter frame.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    body.cb-theme .mr-hero { min-height: clamp(420px, 68vh, 560px); }
}

@media (max-width: 575.98px) {
    body.cb-theme .cb-cta__form { flex-direction: column; }
    body.cb-theme .cb-cta__btn { width: 100%; }
    body.cb-theme .cb-cta { border-radius: 1.5rem; }
    body.cb-theme .cb-promo__cap { padding: 1.25rem; }
    body.cb-theme .cb-celebration__title { font-size: 0.95rem; }
}