/* ==========================================================================
   Cocoa Atelier — luxury bean-to-bar chocolate house.

   Ported from the Stitch "Cocoa Atelier" design (the design system lives at
   docs/templates/pending/stitch_59_cocoa_atelier_e_commerce_homepage/…/
   cocoa_atelier/DESIGN.md): a warm cocoa-cream canvas, dark-chocolate
   structure and calls to action, gilded-caramel keylines for accents and
   active states, Playfair Display headlines over Inter body/UI, a disciplined
   "barely rounded" 4px radius, and 1px keylines instead of shadows.

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

     (a) style the NEW `co-*` markup into the Stitch design; and
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
         base neutral tokens at the cocoa-cream palette, dressing the
         announcement band and footer in dark chocolate, and inking every
         gold text role in the AA-safe gilt sibling.

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

   CONTRAST (measured with App\Support\Theming\ContrastChecker):
     - primary dark chocolate #3a2419 is DARK — 12.95:1 on the cocoa-cream
       canvas, 14.52:1 on white, and 12.95:1 for cream-on-chocolate fills — so
       it is safe as text, as an icon and as a fill carrying light text
       everywhere the base uses --bs-primary.
     - accent gilded caramel #c58e3f is LIGHT — only 2.56:1 on cream and
       2.87:1 on white, and white-on-caramel is 2.87:1. It FAILS both WCAG AA
       text (4.5:1) and the lenient 3:1 non-text threshold on this canvas, so
       the raw accent is used ONLY for (i) 1px KEYLINES and decorative rules,
       (ii) FILLS carrying dark chocolate text (chocolate-on-caramel is
       5.06:1) and (iii) light-on-dark roles over the chocolate footer/band
       (5.06:1). Every gold TEXT / link / icon / badge role instead uses
       --co-gilt-ink (#825504 — the design system's own `secondary` token, not
       an invented value): 5.76:1 on cream, 5.85:1 on the container-low band,
       6.46:1 on white, and 6.46:1 for the white-on-gilt SALE chip the export
       draws with `bg-secondary text-white`. Mirrors karak-bazaar's
       --kb-amber-ink / inkwell's --iw-orange-ink pattern.
     - --mr-soft (small captions, eyebrows, breadcrumbs, placeholders — see
       app.css) cannot reuse the design's own `outline` token (#82746f): that
       measures 4.00:1 on cream, under the 4.5:1 normal-text minimum. It is
       kept for 1px input underlines (a UI border needs only 3:1) while
       --co-soft (#6b5c55, a deliberately darkened value in the same warm
       taupe family) covers every small-TEXT role: 5.70:1 on cream, 5.79:1 on
       the container-low band.
     - ink is a LITERAL (#251912, the design's on-surface) and never bound to
       a customizer token — binding structural ink to primary/accent would let
       a merchant editing a brand colour repaint all body copy.
   ========================================================================== */

body.co-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --co-choc: var(--bs-primary, #3a2419);
    --co-choc-rgb: var(--bs-primary-rgb, 58, 36, 25);
    /* 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 chocolate. NEVER add a bare
       `body.co-theme a { color: … }` rule instead — it out-specifies the
       base's `.mr-btn--primary { color:#fff }` and would repaint the hero
       CTA's label to ink on a dark fill, i.e. an invisible button. */
    --bs-link-color-rgb: var(--co-choc-rgb);
    --co-caramel: var(--ll-accent, #c58e3f);
    /* AA-safe TEXT/link/icon/badge variant of the accent — see the CONTRAST
       note above. Keylines, decorative rules and light-on-chocolate roles may
       keep --co-caramel; every gold small-text or icon-on-cream role uses
       this instead. */
    --co-gilt-ink: #825504;
    --co-radius: var(--bs-border-radius, 0.25rem);
    --co-font-head: var(--ll-font-headings, "Playfair Display"), Georgia, serif;
    --co-font-body: var(--ll-font-body, "Inter"), system-ui, -apple-system, sans-serif;

    /* Cocoa-cream atelier palette (DESIGN.md prose + the export's rendered
       CSS, which wins over the YAML frontmatter: the body is literally
       `bg-[#F7F1EA] text-[#3A2419]`). */
    --co-cream: #f7f1ea;        /* page canvas + header + inherited surface   */
    --co-veil: #fbf8f5;         /* trust / journal "white/40-50" veil bands   */
    --co-container-low: #fff1ea; /* the Counter Favourites band               */
    --co-container: #f2e7de;    /* card media well / secondary band           */
    --co-container-high: #fbe4d7;/* new-arrivals media well                   */
    --co-ink: #251912;          /* on-surface — LITERAL, never token-bound    */
    --co-muted: #4f4440;        /* on-surface-variant                        */
    --co-soft: #6b5c55;         /* darkened "outline" — see CONTRAST note     */
    --co-rule: #82746f;         /* input underline only (UI border, 3:1)      */

    /* Depth — DESIGN.md "Elevation & Depth": no heavy shadows, keylines and
       at most a 4%-opacity ambient wash. */
    --co-keyline: rgba(197, 142, 63, 0.3);
    --co-keyline-soft: rgba(197, 142, 63, 0.2);
    --co-shadow: 0 18px 40px -18px rgba(var(--co-choc-rgb), 0.14);

    /* Re-point the inherited base neutrals at the cocoa-cream palette so
       every inherited mr-* surface (bands, borders, fills, muted text) warms.
       This single block restyles shop / PDP / cart / all five checkout steps /
       account / blog / 404 without a page override. */
    --mr-ink: var(--co-ink);
    --mr-muted: var(--co-muted);
    --mr-soft: var(--co-soft);
    --mr-surface: var(--co-cream);
    --mr-band: var(--co-veil);
    --mr-band-alt: var(--co-container);
    --mr-fill: var(--co-container-high);
    --mr-border: #ecdcc9;
    --mr-border: color-mix(in srgb, var(--co-caramel) 22%, var(--co-cream));
    --mr-border-strong: #dbbd8e;
    --mr-border-strong: color-mix(in srgb, var(--co-caramel) 52%, var(--co-cream));
    --mr-radius: var(--co-radius);
    /* Review stars — the raw caramel is 2.56:1 on cream, so the gilt sibling
       carries this information role too. */
    --mr-gold: var(--co-gilt-ink);
    --mr-shadow: var(--co-shadow);

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

/* --------------------------------------------------------------------------
   Shape discipline — DESIGN.md "Shapes": a consistent 4px radius on buttons,
   inputs, cards and imagery ("barely rounded"), circles reserved for icon
   backgrounds and wax-seal ornaments. NEVER a padding shorthand on
   .form-select (it would collapse Bootstrap's reserved 2.25rem caret gutter —
   the base app.css already restores it with padding-inline-end, untouched
   here).
   -------------------------------------------------------------------------- */
body.co-theme .mr-promo,
body.co-theme .mr-promo__img,
body.co-theme .mr-tile,
body.co-theme .mr-article__media,
body.co-theme .co-hero__media,
body.co-theme .co-process__media,
body.co-theme .dropdown-menu,
body.co-theme .offcanvas {
    border-radius: var(--co-radius);
}

/* --------------------------------------------------------------------------
   Typography — Playfair Display authority (600 for section headings, 700 for
   the display sizes per DESIGN.md), Inter for everything utilitarian, and the
   gilded tracked "label-caps" eyebrow.
   -------------------------------------------------------------------------- */
body.co-theme h1, body.co-theme h2, body.co-theme h3,
body.co-theme h4, body.co-theme h5, body.co-theme h6 {
    font-family: var(--co-font-head);
    color: var(--co-choc);
    font-weight: 600;
    letter-spacing: -0.01em;
}

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

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

/* The hero / process eyebrows are drawn at 0.3em tracking in the export. */
body.co-theme .co-eyebrow--wide { letter-spacing: 0.3em; }

/* Shared section heading (headline-md: Playfair 32px/600). */
body.co-theme .co-section__title {
    font-size: clamp(1.75rem, 3.2vw, 2rem);
    font-weight: 600;
    line-height: 1.3;
}

/* --------------------------------------------------------------------------
   Buttons — DESIGN.md "Components": solid #3A2419 with cocoa-cream text for
   primary; a 1px gilded keyline with chocolate text for secondary; label-caps
   typography on both, so no button ever depends on the caramel for legible
   text.
   -------------------------------------------------------------------------- */
body.co-theme .mr-btn {
    border-radius: var(--co-radius);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.1s ease;
}

body.co-theme .mr-btn--primary {
    background-color: var(--co-choc);
    border-color: var(--co-choc);
    color: var(--co-cream);
}

body.co-theme .mr-btn--primary:hover {
    opacity: 0.9;
    color: var(--co-cream);
}

body.co-theme .co-btn-keyline {
    border: 1px solid var(--co-caramel);
    color: var(--co-choc);
    background: transparent;
}

body.co-theme .co-btn-keyline:hover {
    background: rgba(197, 142, 63, 0.1);
    border-color: var(--co-caramel);
    color: var(--co-choc);
}

body.co-theme .co-btn-hero { padding: 1rem 2rem; }

/* The gilded "View All Products" / "Read Story" link. */
body.co-theme .co-view-link {
    color: var(--co-gilt-ink);
    font-family: var(--co-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.25s ease, text-decoration-color 0.25s ease;
}

body.co-theme .co-view-link:hover {
    color: var(--co-choc);
    text-decoration: underline;
    text-underline-offset: 0.3em;
}

/* --------------------------------------------------------------------------
   Inputs — DESIGN.md "Input Fields" and every form frame in the export
   (sign-in, checkout details): no box, a single 1px bottom keyline that
   shifts to gilded caramel on focus. Selects keep the base's reserved caret
   gutter untouched.
   -------------------------------------------------------------------------- */
body.co-theme .form-control,
body.co-theme .form-select,
body.co-theme textarea.form-control {
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid var(--co-rule);
    border-radius: 0;
    color: var(--co-ink);
    padding-inline-start: 0;
}

body.co-theme .form-control::placeholder,
body.co-theme textarea.form-control::placeholder {
    color: var(--co-soft);
    opacity: 0.75;
}

body.co-theme .form-control:focus,
body.co-theme .form-select:focus {
    background-color: transparent;
    border-bottom-color: var(--co-caramel);
    box-shadow: 0 1px 0 0 var(--co-caramel);
}

body.co-theme .form-check-input:checked {
    background-color: var(--co-choc);
    border-color: var(--co-choc);
}

/* The underline shorthand above is specificity (0,0,2,1) and would out-rank
   Bootstrap's own `.form-control.is-invalid { border-color }` (0,0,2,0) —
   silently swallowing the red validation state on every checkout / address /
   auth form. Re-assert it explicitly on the one edge that still has width. */
body.co-theme .form-control.is-invalid,
body.co-theme .form-select.is-invalid,
body.co-theme textarea.form-control.is-invalid,
body.co-theme .was-validated .form-control:invalid,
body.co-theme .was-validated .form-select:invalid {
    border-bottom-color: var(--bs-form-invalid-border-color, #dc3545);
}

body.co-theme .form-control.is-invalid:focus,
body.co-theme .form-select.is-invalid:focus {
    border-bottom-color: var(--bs-form-invalid-border-color, #dc3545);
    box-shadow: 0 1px 0 0 var(--bs-form-invalid-border-color, #dc3545);
}

/* --------------------------------------------------------------------------
   Announcement + header — a dark-chocolate whisper band, then the cocoa-cream
   sticky bar behind a soft blur under a gilded hairline: Playfair wordmark,
   quiet uppercase label-caps nav.
   -------------------------------------------------------------------------- */
body.co-theme .mr-announce {
    background-color: var(--co-choc);
    color: var(--co-cream);
    letter-spacing: 0.2em;
    font-size: 0.68rem;
    padding-block: 0.75rem;
}

body.co-theme .mr-announce a { color: var(--co-cream); }

body.co-theme .mr-header {
    background-color: rgba(247, 241, 234, 0.85);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--co-keyline-soft);
}

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

body.co-theme .mr-nav-link {
    font-family: var(--co-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--co-muted);
}

body.co-theme .mr-nav-link:hover { color: var(--co-gilt-ink); }

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

body.co-theme .mr-search input {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--co-rule);
    border-radius: 0;
}

body.co-theme .mr-search input:focus {
    background: transparent;
    border-bottom-color: var(--co-caramel);
    box-shadow: 0 1px 0 0 var(--co-caramel);
}

body.co-theme .mr-icon-btn { color: var(--co-choc); }
body.co-theme .mr-icon-btn:hover { color: var(--co-gilt-ink); }

/* Cart / wishlist count chips — the export draws the cart pip in the gilded
   `secondary` with white type (6.46:1); the base's wishlist variant uses the
   raw accent, which would be 2.87:1. */
body.co-theme .mr-badge,
body.co-theme .mr-badge--wish {
    background-color: var(--co-gilt-ink);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Hero (co-hero) — the editorial split inside the 1280px shell: framed macro
   photograph on the left, copy panel on the right. Stacks copy-over-photo on
   mobile (the export's mobile frame keeps the headline first).
   -------------------------------------------------------------------------- */
body.co-theme .co-hero { padding-block: var(--mr-section-y); }

body.co-theme .co-hero__media {
    position: relative;
    overflow: hidden;
    background: var(--co-container-high);
    height: clamp(340px, 46vw, 600px);
}

body.co-theme .co-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

body.co-theme .co-hero__media:hover .co-hero__img { transform: scale(1.05); }

body.co-theme .co-hero__copy { padding-left: clamp(0px, 3vw, 3rem); }

body.co-theme .co-hero__title {
    font-size: clamp(2rem, 4.4vw, 3rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
}

body.co-theme .co-hero__lead {
    color: var(--co-muted);
    font-size: 1.125rem;
    line-height: 1.6;
    max-width: 28rem;
    margin-bottom: 2.5rem;
}

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

/* --------------------------------------------------------------------------
   Trust strip (inherited mr-trust) — the export's reassurance band: a white
   veil between two gilded hairlines, four centred icon-over-label columns
   split by faint vertical rules. The base lays each item out horizontally, so
   this flips it to a column. The raw accent fails even the lenient 3:1 icon
   threshold on this canvas (2.56:1), so icons ink with the gilt sibling.
   -------------------------------------------------------------------------- */
body.co-theme .mr-band--alt.border-bottom {
    background-color: var(--co-veil);
    border-top: 1px solid var(--co-keyline);
    border-bottom: 1px solid var(--co-keyline) !important;
}

body.co-theme .mr-trust {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
}

body.co-theme .mr-trust svg {
    width: 24px;
    height: 24px;
    color: var(--co-gilt-ink);
}

body.co-theme .mr-trust strong {
    font-family: var(--co-font-body);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--co-ink);
}

body.co-theme .mr-trust span { color: var(--co-soft); font-size: 0.8rem; }

/* The faint vertical rules between the four reassurance columns (the export's
   `border-r border-[#C58E3F]/20 last:border-0`). Attribute selector because the
   base wraps each item in a plain Bootstrap `.col-6 .col-md-3`, and this is
   scoped to the trust band's own row so no other grid is touched. */
body.co-theme .mr-band--alt.border-bottom .row > [class*="col-"] {
    border-inline-end: 1px solid var(--co-keyline-soft);
}

body.co-theme .mr-band--alt.border-bottom .row > [class*="col-"]:last-child {
    border-inline-end: 0;
}

/* --------------------------------------------------------------------------
   Promo tiles (inherited mr-promo markup + the merged `text` subfield) — the
   three collection tiles. The base's dark scrim already pairs light text with
   a dark photo backdrop, so only the supporting line needs styling; the
   base's own :hover rule inks the label in the caramel, which is a light
   colour on a dark scrim and therefore safe.
   -------------------------------------------------------------------------- */
body.co-theme .mr-promo__title { font-weight: 600; }

body.co-theme .co-promo__text {
    display: block;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   Product cards (inherited mr-card) — square macro media, Inter title,
   centred text. Two price inks, faithful to the export: the Counter
   Favourites band renders the price in dark chocolate, "New From the Kitchen"
   in gilded gold.
   -------------------------------------------------------------------------- */
body.co-theme .mr-card__media {
    aspect-ratio: 1;
    background-color: var(--co-container);
    border-radius: var(--co-radius);
}

body.co-theme .mr-card__title,
body.co-theme .mr-card__title a {
    font-family: var(--co-font-body);
    font-size: 1rem;
    font-weight: 500;
    color: var(--co-ink);
}

body.co-theme .mr-card__title a:hover { color: var(--co-gilt-ink); }

body.co-theme .mr-card__eyebrow { color: var(--co-soft); }

/* price-display: Inter 600 / 20px / 0.05em (DESIGN.md typography scale). */
body.co-theme .mr-card__price {
    font-family: var(--co-font-body);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--co-choc);
}

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

/* The SHARED sale / compare-at price classes (emitted inline by
   storefront::head.theme-vars) are deliberately theme-agnostic and both need
   re-inking here: `.ll-price--sale` is a hard #d6293e red, which measures
   4.41:1 on this canvas (under the 4.5:1 minimum) and clashes with the gilded
   SALE chip beside it, while `.ll-price-compare` is #9aa0a6 — only 2.35:1 on
   cream. The export shows the live sale price in gold with a muted
   strike-through, which is exactly what the palette already provides. */
body.co-theme .ll-price--sale {
    color: var(--co-gilt-ink);
}

body.co-theme .ll-price-compare,
body.co-theme .mr-card__price del {
    color: var(--co-soft);
    font-weight: 400;
}

/* Sale / demo chip. It is POSITIONED and coloured by the same shared
   theme-vars block (`.mr-card__badge` — a #d6293e 999px pill), not by the base
   app.css, so every child re-dresses it. The export draws it as a solid gilded
   `secondary` block with white type at the top-left (6.46:1), squared off to
   match the theme's shape language. */
body.co-theme .mr-card__badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 3;
    background: var(--co-gilt-ink);
    color: #fff;
    font-family: var(--co-font-body);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.25rem 0.75rem;
    border-radius: 0;
}

/* The wishlist heart's "saved" state — the base default is the raw accent
   (var(--ll-accent)), which measures 2.87:1 on the near-white overlay circle
   and fails. Ink it with the gilt sibling instead (6.46:1). The eye
   (.mr-card__quickview) and the heart's default/hover states already read
   --bs-primary / --mr-ink + --mr-surface from the base, all safe here since
   primary is the dark chocolate (12.95:1 resting, 14.10:1 on hover). Both
   round overlay controls are restyled together on purpose. */
body.co-theme .mr-card__wish,
body.co-theme .mr-card__quickview {
    background-color: rgba(255, 255, 255, 0.88);
    color: var(--co-choc);
    border-radius: 9999px;
}

body.co-theme .mr-card__wish:hover,
body.co-theme .mr-card__quickview:hover {
    background-color: #fff;
    color: var(--co-ink);
}

body.co-theme .mr-card__wish.is-active { color: var(--co-gilt-ink); }

body.co-theme .mr-card__quick {
    background-color: var(--co-choc);
    color: var(--co-cream);
    letter-spacing: 0.1em;
}

/* --------------------------------------------------------------------------
   "The Counter Favourites" (co-favourites) — the container-low band whose
   cards are FILLED cocoa-cream panels behind a gilded keyline. A filled card
   must inset its own text: the base card is borderless, so `__title` and
   `__price` sit flush by design and would collide with the new edge.
   -------------------------------------------------------------------------- */
body.co-theme .co-favourites { background-color: var(--co-container-low); }

body.co-theme .co-favourites .mr-card {
    height: 100%;
    background: var(--co-cream);
    border: 1px solid var(--co-keyline-soft);
    border-radius: var(--co-radius);
    overflow: hidden;
    transition: border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body.co-theme .co-favourites .mr-card:hover { border-color: var(--co-caramel); }

body.co-theme .co-favourites .mr-card__media {
    margin-bottom: 0;
    border-radius: 0;
    background-color: var(--co-container);
}

body.co-theme .co-favourites .mr-card > p,
body.co-theme .co-favourites .mr-card > h3 {
    padding-inline: 1.25rem;
    text-align: center;
}

body.co-theme .co-favourites .mr-card > *:nth-child(2) { padding-top: 1.5rem; }
body.co-theme .co-favourites .mr-card > *:last-child { padding-bottom: 1.5rem; }

/* --------------------------------------------------------------------------
   "New From the Kitchen" (co-arrivals) — plain cocoa-cream canvas, no card
   fill (the export's arrivals cards are bare), gilded prices.
   -------------------------------------------------------------------------- */
body.co-theme .co-arrivals .mr-card { text-align: center; }
body.co-theme .co-arrivals .mr-card__media { background-color: var(--co-container-high); }
body.co-theme .co-arrivals .mr-card__price { color: var(--co-gilt-ink); }

/* --------------------------------------------------------------------------
   Process band (co-process) — "THE PROCESS · Five Days, One Bar": the tall
   roasting photograph beside numbered steps hanging off one gilded keyline,
   with the numeral set in the gutter OUTSIDE the rule (as the export draws
   it) and a flow fallback on narrow screens.
   -------------------------------------------------------------------------- */
/* The copy column gets the same inward breathing room the hero's does, so the
   keyline never crowds the photograph on wide viewports. */
body.co-theme .co-process__copy { padding-left: clamp(0px, 2vw, 2rem); }

body.co-theme .co-process__media {
    position: relative;
    overflow: hidden;
    background: var(--co-container);
    height: clamp(340px, 46vw, 600px);
    box-shadow: var(--co-shadow);
}

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

body.co-theme .co-process__title {
    font-size: clamp(2rem, 4.4vw, 3rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

body.co-theme .co-process__lead {
    color: var(--co-muted);
    font-size: 1.125rem;
    line-height: 1.6;
}

body.co-theme .co-process__steps {
    margin-top: 2.5rem;
    padding-left: 2.75rem;
    border-left: 1px solid var(--co-keyline);
    display: grid;
    gap: 2rem;
    counter-reset: none;
}

body.co-theme .co-process__step { position: relative; }

body.co-theme .co-process__num {
    position: absolute;
    left: -2.75rem;
    top: 0.15rem;
    width: 2.75rem;
    font-family: var(--co-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--co-gilt-ink);
    transform: translateX(-0.6rem);
}

body.co-theme .co-process__step-title {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

body.co-theme .co-process__step-body {
    color: var(--co-muted);
    font-size: 1rem;
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Categories ("Shop by Category") — inherited mr-tile photo tiles. The export
   draws a shorter 4-up band of dark-scrimmed tiles with a centred tracked
   uppercase label; we keep the base's real-category + representative-photo
   behaviour (it scales to any merchant's categories) and restyle the shell.
   -------------------------------------------------------------------------- */
body.co-theme .mr-tile--cat { height: clamp(192px, 22vw, 256px); }

body.co-theme .mr-tile--cat .mr-tile__scrim { background: rgba(var(--co-choc-rgb), 0.38); }

body.co-theme .mr-tile--cat .mr-tile__cap {
    font-family: var(--co-font-head);
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    font-weight: 600;
    letter-spacing: 0.15em;
}

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

/* --------------------------------------------------------------------------
   Journal (co-journal) — a white veil under a gilded hairline, a centred
   ITALIC Playfair heading (the export sets `italic` on this heading only) and
   desaturated covers that bloom into colour on hover.
   -------------------------------------------------------------------------- */
body.co-theme .co-journal {
    background-color: var(--co-veil);
    border-top: 1px solid var(--co-keyline-soft);
}

body.co-theme .co-journal__title {
    font-size: clamp(1.75rem, 3.2vw, 2rem);
    font-weight: 600;
    font-style: italic;
    line-height: 1.3;
}

body.co-theme .co-journal .mr-article__media img {
    filter: grayscale(1);
    transition: filter 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

body.co-theme .co-journal .mr-article__media:hover img { filter: grayscale(0); }

body.co-theme .mr-article__title { font-size: 1.5rem; font-weight: 600; }
body.co-theme .mr-article__title a { color: var(--co-choc); }
body.co-theme .mr-article__title a:hover { color: var(--co-gilt-ink); }

/* --------------------------------------------------------------------------
   Newsletter (co-cta) — "First Bite": a narrow centred block between two
   gilded hairlines, with the email field and Subscribe button joined inside a
   single 1px dark-chocolate frame (no gap, no rounding).
   -------------------------------------------------------------------------- */
body.co-theme .co-cta {
    padding-block: var(--mr-section-y);
    margin-block: var(--mr-section-y);
    border-top: 1px solid var(--co-keyline-soft);
    border-bottom: 1px solid var(--co-keyline-soft);
}

body.co-theme .co-cta__inner { max-width: 56rem; }

body.co-theme .co-cta__title {
    font-size: clamp(2rem, 4.4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

body.co-theme .co-cta__body {
    color: var(--co-muted);
    font-size: 1.125rem;
    max-width: 40ch;
}

body.co-theme .co-cta__form {
    display: flex;
    max-width: 32rem;
    border: 1px solid var(--co-choc);
}

body.co-theme .co-cta__form input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    padding: 1rem 1.5rem;
    font-size: 0.95rem;
    color: var(--co-ink);
}

body.co-theme .co-cta__form input::placeholder { color: var(--co-soft); }
body.co-theme .co-cta__form input:focus { outline: none; box-shadow: none; }

body.co-theme .co-cta__btn {
    border: 0;
    background: var(--co-choc);
    color: var(--co-cream);
    padding: 1rem 2rem;
    font-family: var(--co-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body.co-theme .co-cta__btn:hover { opacity: 0.9; }

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

/* --------------------------------------------------------------------------
   Inherited chrome finishing — the dark-chocolate footer the export ends on,
   plus the small shared editorial helpers.
   -------------------------------------------------------------------------- */
body.co-theme .mr-footer {
    background-color: var(--co-choc);
    border-top: 0;
    color: rgba(247, 241, 234, 0.75);
}

body.co-theme .mr-footer h4 {
    color: var(--co-cream);
    font-family: var(--co-font-body);
    letter-spacing: 0.1em;
}

body.co-theme .mr-footer__brand {
    color: var(--co-cream);
    font-family: var(--co-font-head);
}

body.co-theme .mr-footer a { color: rgba(247, 241, 234, 0.75); }
/* On the chocolate ground --co-gilt-ink (tuned for a LIGHT backdrop) would
   sink in, so hover brightens to the caramel instead — 5.06:1 on chocolate. */
body.co-theme .mr-footer a:hover { color: var(--co-caramel); }

body.co-theme .mr-social {
    border-color: rgba(247, 241, 234, 0.25);
    background: transparent;
    color: rgba(247, 241, 234, 0.85);
}

body.co-theme .mr-social:hover {
    background-color: var(--co-caramel);
    border-color: var(--co-caramel);
    color: var(--co-choc);
}

body.co-theme .mr-ulink { color: var(--co-gilt-ink); }
body.co-theme .mr-ulink:hover { color: var(--co-choc); border-color: var(--co-choc); }

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

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

body.co-theme .mr-crumbs a:hover { color: var(--co-gilt-ink); }

/* The cart line-item title hover is the last inherited rule that inked in the
   raw accent on a light ground (2.56:1). */
body.co-theme .mr-cart-row__title a { color: var(--co-ink); }
body.co-theme .mr-cart-row__title a:hover { color: var(--co-gilt-ink); }

/* Focus ring — the base draws it in the raw accent, which measures 2.56:1
   against this cream canvas, under the 3:1 minimum for a non-text indicator.
   The gilt sibling clears 5.76:1. */
body.co-theme a:focus-visible,
body.co-theme button:focus-visible,
body.co-theme input:focus-visible,
body.co-theme select:focus-visible,
body.co-theme textarea:focus-visible {
    outline: 2px solid var(--co-gilt-ink);
    outline-offset: 2px;
}

body.co-theme .mr-summary,
body.co-theme .mr-acct-nav { border-color: var(--co-keyline-soft); }

body.co-theme .mr-tabs .nav-link.active { border-bottom-color: var(--co-caramel); }

/* --------------------------------------------------------------------------
   Reduced motion — every zoom, tile lift and grayscale bloom is decorative.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.co-theme .mr-btn,
    body.co-theme .co-hero__img,
    body.co-theme .co-cta__btn,
    body.co-theme .co-favourites .mr-card,
    body.co-theme .co-journal .mr-article__media img,
    body.co-theme .mr-card__media img,
    body.co-theme .mr-tile__img,
    body.co-theme .mr-promo__img {
        transition: none;
    }

    body.co-theme .co-hero__media:hover .co-hero__img { transform: none; }

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

/* --------------------------------------------------------------------------
   Mobile (from the export's mobile frames): the hero and process bands stack
   with the copy first, the process keyline tightens, and the newsletter field
   splits into a stacked input + full-width button.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    body.co-theme .co-hero__copy,
    body.co-theme .co-process__copy { padding-left: 0; }
    body.co-theme .co-hero__media,
    body.co-theme .co-process__media { height: clamp(260px, 62vw, 340px); }
    body.co-theme .co-process__steps { padding-left: 2rem; }
    body.co-theme .co-process__num { left: -2rem; width: 2rem; transform: none; }
    body.co-theme .co-process__step-title { font-size: 1.25rem; }
    /* Two-up trust strip on mobile: the mid-row rule would land in the middle
       of the wrap, so drop the dividers entirely (the export's mobile frame
       stacks them without rules). */
    body.co-theme .mr-band--alt.border-bottom .row > [class*="col-"] {
        border-inline-end: 0;
    }
}

@media (max-width: 575.98px) {
    body.co-theme .co-cta__form { flex-direction: column; }
    body.co-theme .co-cta__btn { width: 100%; }
}