/* ============================================================
   BCC5 — British Crisp Co. fifth-generation theme.
   Brand tokens + base + layout + components + homepage + PDP + cart + nav.

   Visual identity mirrors the established public theme (bcc25):
   - Pre-rendered paper canvas (paper-light.jpg / paper-dark.jpg)
   - ITC American Typewriter Condensed for display (locally hosted)
   - Barlow Semi Condensed for body/sub (Google Fonts)
   - Black ink on paper, brand-red (Sweet Chilli #99242D) lead accent
   - Four flavour washes used as tasteful section accents:
     Sea Salt #016186 / S&V #00733F / Cheese #C89724 / Chilli #99242D
   ============================================================ */

/* ── 1. Fonts ───────────────────────────────────────────────────────── */
/* ITC American Typewriter Condensed is the public theme's display face —
   condensed grungy typewriter character. Hosted locally in assets/fonts/.
   Barlow Semi Condensed loads from Google Fonts (see functions.php). */
@font-face {
	font-family: 'itc_american_typewriterCn';
	src: url('fonts/itc_american_typewriter_condensed-webfont.woff2') format('woff2'),
	     url('fonts/itc_american_typewriter_condensed-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/* ── 2. Brand tokens ────────────────────────────────────────────────── */
/* Black & white textured paper canvas + four flavour washes. Surfaces
   are near-white paper with a faint warmth (not clinical-cold #fff);
   ink is near-black charcoal. The four flavours each get a quiet
   section wash so the canvas feels alive without becoming a colour-
   field painting. Sea Salt is the lead accent — it carries the
   paper-packet brand story (paper / coast / British seaside). Claret
   stays as the single destructive colour, universal across all
   sister-brand sites. */

:root {
	/* Surfaces — handmade-paper tone matching the live theme's bg.jpg.
	   --bcc-bg is the visual canvas tint when paper texture is absent
	   (cards, modals); the actual paper-grain background lives on body
	   via background-image. */
	--bcc-bg:        #f3eee2;   /* warm aged-paper base */
	--bcc-surface:   #f7f3e8;   /* primary surface (cards, modals) — paper-toned */
	--bcc-surface-2: #e8e2d0;   /* tonal step down, cooler than the original beige */
	--bcc-page-bg:   #f3eee2;   /* body backdrop, mirrors --bcc-bg */

	/* Ink — pure black on paper, matching the live theme's a/p/h rules */
	--bcc-ink:        #000;
	--bcc-ink-subtle: #555;
	--bcc-rule:       #cfcdc2;

	/* Flavour palette — EXACT values from the live products' "colour"
	   attribute. Don't tune by eye, don't desaturate. These are the
	   brand's authoritative flavour colours and should remain in sync
	   with the WooCommerce product data. Wash variants are alpha
	   overlays for section backgrounds — paper bg shows through. */
	--bcc-flav-sea:        #016186;   /* Sea Salt — rich deep teal */
	--bcc-flav-vinegar:    #00733F;   /* Salt & Vinegar — emerald */
	--bcc-flav-cheese:     #C89724;   /* Cheese & Onion — rich gold */
	--bcc-flav-chilli:     #99242D;   /* Sweet Chilli — cardinal red */

	/* Section wash overlays — low-alpha rgba so the paper-grain body
	   bg reads through. Tuned so each flavour reads as a confident
	   "this section is themed" without overwhelming the paper. */
	--bcc-wash-sea:        rgba(1, 97, 134, 0.09);
	--bcc-wash-vinegar:    rgba(0, 115, 63, 0.09);
	--bcc-wash-cheese:     rgba(200, 151, 36, 0.11);
	--bcc-wash-chilli:     rgba(153, 36, 45, 0.08);

	/* Neutral section-rest tint. Apply via linear-gradient on a
	   transparent bg (same trick as the flavour washes) to give
	   currently-flat sections (.bcc-paths, .bcc-craft, etc.) a subtle
	   tonal step from body bg without overriding the body's paper
	   texture underneath. Reads as "paper inset, one tonal step
	   darker" in light; one tonal step LIGHTER in dark mode — the
	   token below redefines the alpha as white, so the same selector
	   gets a consistent "section distinct from body" feel in both
	   modes via opposite-direction lift. */
	--bcc-section-alt-tint: rgba(0, 0, 0, 0.03);

	/* Deeper variants — used for accent text, borders, links inside a
	   flavour-themed section. chilli-deep is calibrated to the live
	   theme's heritage British crimson (sampled from slider-bg-bcc.jpg,
	   dominant red ~#600000). At text sizes on cream paper, the full
	   chilli #99242D reads as pink; this deeper variant reads as a
	   proper deep crimson. */
	--bcc-flav-sea-deep:        #014765;
	--bcc-flav-vinegar-deep:    #005a30;
	--bcc-flav-cheese-deep:     #8d6912;
	--bcc-flav-chilli-deep:     #5a0f15;

	/* PRIMARY ACCENT — Heritage British crimson is the brand lead.
	   --bcc-accent is the chilli-deep variant (proper crimson at text
	   sizes); the full chilli #99242D is reserved for product/flavour
	   surfaces where the saturated red reads correctly. */
	--bcc-accent:      var(--bcc-flav-chilli-deep);
	--bcc-accent-deep: #3a080c;   /* deeper still — for hover/pressed states */
	--bcc-accent-wash: #e5b9bd;   /* pale crimson wash — for text on dark slabs */
	--bcc-accent-soft: rgba(90, 15, 21, 0.07);
	--bcc-cream-stable: #f4f1e6;  /* stable cream for text on dark — does NOT remap in dark mode */

	/* Semantic text tokens that auto-swap in dark mode. */
	--bcc-accent-text: var(--bcc-ink);
	--bcc-link-hover:  var(--bcc-accent-deep);
	--bcc-error-text:  var(--bcc-claret);

	/* Brand depth — deep charcoal (was paper-bark brown). Used for the
	   CTA band, origin slab, dark interstitials. */
	--bcc-deep:        #1c1a16;
	--bcc-deep-soft:   #3a3830;

	/* Rich ink — first-class dark surface for the origin slab. */
	--bcc-ink-rich:    #050504;

	/* Single destructive action colour — universal across sister brands.
	   Aligned to Sweet Chilli so "destructive" reads in the brand red
	   rather than a foreign claret tone. */
	--bcc-claret:        #99242D;
	--bcc-claret-soft:   #fdf3f5;

	/* FONT FAMILIES (separate namespace from sizes) */
	/* Display: ITC American Typewriter Condensed — back where it belongs.
	   The condensed grunge-typewriter character carries the brand's
	   "proper, no-nonsense, British" voice without trying too hard.
	   Hosted locally via @font-face at the top of this file. */
	--bcc-font-display: 'itc_american_typewriterCn', 'Courier Prime', 'Courier New', monospace;
	--bcc-font-display-sc: 'itc_american_typewriterCn', 'Courier Prime', monospace;
	/* Body + sub: Karla — slightly geometric grotesque designed by
	   typographers to harmonise with monospace/typewriter displays.
	   Distinctive 'g' and 'a' echo the typewriter rhythm without
	   competing. Italic axis + 300/400/500/600/700. */
	--bcc-font-sub:     'Karla', 'Helvetica Neue', sans-serif;
	--bcc-font-body:    'Karla', 'Helvetica Neue', sans-serif;

	/* FONT SIZES */
	--bcc-display-xl: clamp(2.6rem, 5.5vw + 1rem, 5.5rem);
	--bcc-display-lg: clamp(2rem,   3vw + 1rem, 3.5rem);
	--bcc-display-md: clamp(1.6rem, 1.6vw + 1rem, 2.25rem);
	--bcc-display-sm: 1.375rem;
	--bcc-body-lg:    1.125rem;
	--bcc-body:       1rem;
	--bcc-label:      0.875rem;
	--bcc-meta:       0.75rem;

	/* Spacing */
	--bcc-gap-1: 0.25rem;
	--bcc-gap-2: 0.5rem;
	--bcc-gap-3: 0.75rem;
	--bcc-gap-4: 1rem;
	--bcc-gap-5: 1.5rem;
	--bcc-gap-6: 2rem;
	--bcc-gap-7: 3rem;
	--bcc-gap-8: 4.5rem;

	/* Sizing */
	--bcc-container:      72rem;
	--bcc-container-wide: 84rem;
	/* --bcc-edge is THE site-wide horizontal viewport gutter. Use it on
	   every section parent that holds a max-width inner. Scales 1.5rem
	   → 2.5rem with viewport width so narrow screens stay close to the
	   edge and wide screens get breathing room. */
	/* 2026-05-20: min reduced 1.5rem → 1rem so mobile gutters tighten
	   without affecting tablet/desktop (still hits 2.5rem cap at >=62.5rem). */
	--bcc-edge: clamp(1rem, 4vw, 2.5rem);
	--bcc-radius:         6px;
	--bcc-radius-lg:      14px;
	--bcc-radius-pill:    999px;

	/* Motion */
	--bcc-ease:     cubic-bezier(.2,.7,.2,1);

	/* Damask pattern (SVG asset in assets/) — single-fill artwork that
	   gets recoloured via the mask-tint tokens below. Used as a subtle
	   texture on cream surfaces; sections that want it opt in by setting
	   `background-color: var(--bcc-damask-tint-X)` + `mask-image:
	   var(--bcc-damask-img)` on their ::before. */
	--bcc-damask-img: url("pattern.svg?v=bcc-grain-2");

	/* Mask-tint tokens — tonal steps that read as paper grain.
	   Slightly heavier than the original cream-canvas values because the
	   B/W canvas is brighter — fibres need a touch more weight to register
	   without becoming a wallpaper pattern. */
	--bcc-damask-tint-whisper: rgba(0, 0, 0, 0.035);
	--bcc-damask-tint-tonal:   rgba(0, 0, 0, 0.06);
	--bcc-damask-tint-feature: rgba(0, 0, 0, 0.14);

	/* Always-lighten tint tokens for permanently-dark surfaces (CTA band,
	   origin slab) whose bg does NOT swap with theme mode. The mode-aware
	   tints above would darken these in light mode = invisible pattern on
	   already-dark bg. These always lighten so the pattern always lifts
	   off the bg. */
	--bcc-damask-tint-on-dark-whisper: rgba(255, 255, 255, 0.02);
	--bcc-damask-tint-on-dark-tonal:   rgba(255, 255, 255, 0.035);
	--bcc-damask-tint-on-dark-feature: rgba(255, 255, 255, 0.10);

	/* Tile-size tokens. Bucketed to 4 named sizes so the pattern reads at
	   predictable rhythms across the site instead of diverging through
	   per-section tweaks. */
	--bcc-damask-tile-sm: 220px;
	--bcc-damask-tile-md: 380px;
	--bcc-damask-tile-lg: 460px;
	--bcc-damask-tile-xl: 520px;
}

[data-theme="dark"] {
	/* Dark canvas is now chromatic-neutral charcoal, no warm-brown tint
	   anywhere — matches the B/W zine direction. Surfaces step from
	   near-black body bg up through deeper-than-paper greys; ink swaps
	   to a warm off-white that reads as "ink on newsprint, inverted". */
	--bcc-bg:        #0f0e0c;
	--bcc-surface:   #181715;
	--bcc-surface-2: #22211e;
	--bcc-ink:        #eeece2;
	--bcc-ink-subtle: #9a978d;
	--bcc-rule:       #2a2925;
	--bcc-claret-soft: #2a1316;
	/* Paper grain reads as tonal LIFT on dark surfaces (lightens the
	   bg) rather than darken — same alpha values as light mode for
	   consistent visual weight across modes. */
	--bcc-damask-tint-whisper: rgba(255, 255, 255, 0.035);
	--bcc-damask-tint-tonal:   rgba(255, 255, 255, 0.06);
	--bcc-damask-tint-feature: rgba(255, 255, 255, 0.14);
	--bcc-page-bg: #0a0908;
	/* Semantic text tokens auto-swap in dark mode.
	   --bcc-accent-text intentionally stays bound to --bcc-ink (which
	   redefines to warm cream in dark mode above) — the previous
	   mapping to accent-wash made every neutral text element using
	   this token (h3 titles, footer links, breadcrumbs, etc.) render
	   as pale pink in dark mode. */
	--bcc-link-hover:  var(--bcc-accent);
	--bcc-error-text:  #e58a8a;
	/* Section-specific dark surface tokens. Footer + CTA band sit a
	   tonal step DEEPER than the body bg so they feel grounded.
	   2026-05-19: CTA band pushed to pure #000 (was #060605, barely
	   distinguishable from the footer's #050504 — 1-unit difference
	   per channel, invisible on most screens). Now the rhythm reads
	   trade(--bcc-surface, lifted) → CTA(pure black, deepest) →
	   footer(near-black, stepped back) — three clearly-stepped tonal
	   bands. CTA still picks up its paper-dark.jpg texture overlay so
	   the pure-black underlay never reads as flat. */
	--bcc-footer-bg-dark:   #050504;
	--bcc-cta-band-bg-dark: #000000;
	/* Dark-mode wash variants — same hue, slightly lifted alpha so the
	   flavour reads on a charcoal section rather than vanishing into it. */
	--bcc-wash-sea:        rgba(93, 138, 159, 0.16);
	--bcc-wash-vinegar:    rgba(154, 174, 106, 0.16);
	--bcc-wash-cheese:     rgba(200, 155, 58, 0.17);
	--bcc-wash-chilli:     rgba(177, 74, 55, 0.14);

	/* Dark-mode neutral section-rest tint — flips to white-on-dark
	   (lifts the section above body) instead of black-on-light
	   (darkens it). Same alpha for symmetric perceptual presence. */
	--bcc-section-alt-tint: rgba(255, 255, 255, 0.035);

	/* Accent + depth lifts for dark mode.
	   Light mode reads dark-crimson-on-cream + dark-charcoal-on-cream. On a
	   near-black body the same deep values read as muddy-red-on-black + invisible-
	   charcoal-on-black. These overrides keep the SAME hue families but shift
	   them up the lightness axis so perceptual contrast against the dark canvas
	   matches the light-mode contrast against the paper canvas.
	     --bcc-accent       (text/icons/link-hover/in-stock dot/USP ticks) →
	                         pale crimson, matches accent-wash, reads as soft
	                         brand-coloured text on charcoal.
	     --bcc-accent-deep  (primary button bg, .bcc-btn--accent) → full Sweet
	                         Chilli #99242D — gives the CTA proper button presence
	                         while staying recognisably the brand crimson.
	     --bcc-deep         (secondary surfaces: toast success, .bcc-badge--new,
	                         account-rail count badge, checkout-toggle checked,
	                         checkout-login CTA, origin slab) → mid warm-grey,
	                         lifted from #1c1a16 (near-identical to body bg in
	                         dark mode) so these pills/borders read as a clear
	                         step above the canvas.
	     --bcc-deep-soft    sibling lift, preserves the hover-state delta. */
	--bcc-accent:      #e5b9bd;
	--bcc-accent-deep: #99242D;
	--bcc-deep:        #4a453d;
	--bcc-deep-soft:   #6a655d;
}

/* ── 3. Reset + base ────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
/* alpha.44e (2026-05-18): overflow-x: hidden on root to suppress
   horizontal scroll caused by intentional viewport-wide pseudo-elements
   like .bcc-faq::before (`inset: -1px -100vw` to bleed damask to page
   edges). First attempted `overflow-x: clip`, but per spec when one
   axis is `clip` and the other is `visible` browsers compute the visible
   axis to `auto` — so the page still scrolled horizontally. `hidden`
   doesn't have that interaction and reliably suppresses the scroll. */
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
	margin: 0;
	/* Pre-rendered paper texture. paper-light.jpg renders its full
	   visual (cream base + dark fleck noise) so no CSS blend mode
	   is needed — what you see in the SVG is what shows on screen.
	   Dark mode swaps to paper-dark.jpg, same noise seeds + same
	   tile size, just colour-inverted (charcoal base + cream flecks).
	   Tileable 600px via stitchTiles, fixed attachment so the grain
	   stays put while content scrolls. */
	background-color: var(--bcc-page-bg);
	background-image: url('paper-light.jpg');
	background-size: 350px;
	background-attachment: fixed;
	background-repeat: repeat;
	color: var(--bcc-ink);
	font-family: var(--bcc-font-body);
	font-weight: 400;
	font-size: var(--bcc-body);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
[data-theme="dark"] body {
	background-image: url('paper-dark.jpg');
}
/* alpha.11: body bottom-padding removed (alpha.10) — the FAB no longer
   reserves space. Instead it fades away when the user scrolls within
   ~80px of the page bottom, so the basket gets out of the footer's way
   without leaving an awkward blank strip everywhere else. JS toggles
   .is-faded; see interactions.js initFabAutoHide(). */
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--bcc-accent-wash); color: var(--bcc-ink); }

.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0;
	margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.bcc-skip {
	position: absolute; top: -100px; left: 8px;
	background: var(--bcc-ink); color: var(--bcc-bg);
	padding: .5rem .75rem; border-radius: 4px; z-index: 999;
}
.bcc-skip:focus { top: 8px; }

/* alpha.17: sitewide :focus-visible polish. Browser-default rings are
   either an ugly blue glow or, in some browsers, nothing. Replaces both
   with a accent outline at 3px offset — matches the brand palette,
   stays clear of the element's body, and keyboard users get a clear
   "where am I" cue without the rings affecting mouse-clickers. */
:focus { outline: none; }
:focus-visible {
	outline: 2px solid var(--bcc-accent-wash);
	outline-offset: 3px;
	border-radius: 2px;
}
.bcc-btn:focus-visible,
.bcc-fab__toggle:focus-visible,
.bcc-account-menu__trigger:focus-visible { outline-offset: 4px; }
input:focus-visible,
textarea:focus-visible,
select:focus-visible { outline-offset: 2px; }

/* ── 4. Typography ──────────────────────────────────────────────────── */

h1, h2, h3, .bcc-display {
	font-family: var(--bcc-font-display);
	font-weight: normal;
	/* ITC American Typewriter Condensed has all the character baked
	   into the glyphs — sentence case, neutral tracking, slightly
	   loose line-height to let the condensed forms breathe. */
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.05;
	margin: 0;
	color: var(--bcc-ink);
	text-rendering: optimizeLegibility;
	font-feature-settings: 'kern' 1, 'liga' 1;
}
h1 { font-size: var(--bcc-display-xl); }
h2 { font-size: var(--bcc-display-lg); }
h3 { font-size: var(--bcc-display-md); }
/* Display <em>/<.bcc-highlight> are NOT italicised — they only carry
   the section accent colour (chilli red by default, vinegar in the
   four-pillars block, etc.). The italic was tedious at heading sizes. */
.bcc-display em,
.bcc-display .bcc-highlight {
	font-style: normal;
}
h4 {
	font-size: var(--bcc-display-sm);
	font-family: var(--bcc-font-sub); font-weight: 500;
	text-transform: uppercase; letter-spacing: .04em; margin: 0;
}

p, ul, ol { margin: 0 0 1rem; font-family: var(--bcc-font-body); }
strong { font-weight: 600; }
em { font-style: normal; } /* 2026-05-19: em = colour accent, not italic. Per-selector colour rules apply where set. */

.bcc-label {
	font-family: var(--bcc-font-sub); font-weight: 500;
	text-transform: uppercase; letter-spacing: .08em;
	font-size: var(--bcc-label); color: var(--bcc-ink-subtle);
}
.bcc-eyebrow {
	display: inline-block;
	font-family: var(--bcc-font-sub); font-weight: 600;
	text-transform: uppercase; letter-spacing: .18em;
	font-size: .75rem;
	color: var(--bcc-ink-subtle);
	margin-bottom: var(--bcc-gap-3);
	/* 2026-05-20: balance multi-line eyebrows so a long tracked-uppercase
	   string like "The world's first home-recyclable crisp packet" doesn't
	   wrap with an orphan word on its own line. Browser support: Chrome
	   114+, Firefox 121+, Safari 17.4+ — older falls back to normal wrap. */
	text-wrap: balance;
}
/* Dark mode eyebrow stays bound to --bcc-ink-subtle (which redefines
   to a warm grey-cream in dark mode), matching the neutral grey of
   light-mode eyebrows. Flavour-themed sections override this per-
   section to lift their accent colour for dark visibility. */
/* Display emphasis (<em> + .bcc-highlight inside .bcc-display).
   Emphasis lives in COLOUR only — reads --bcc-section-accent which
   each flavour-themed section sets locally. When NO accent is set
   (e.g. Range section), the second var() arg falls back to inherit,
   so the em renders in the heading's normal ink colour rather than
   a stray default flavour. */
.bcc-display em,
.bcc-display .bcc-highlight {
	font-style: normal;
	color: var(--bcc-section-accent, inherit);
	font-weight: normal;
}
[data-theme="dark"] .bcc-display em,
[data-theme="dark"] .bcc-display .bcc-highlight {
	color: var(--bcc-section-accent-dark, inherit);
}

/* ── 5. Buttons ─────────────────────────────────────────────────────── */

.bcc-btn {
	display: inline-flex; align-items: center; gap: var(--bcc-gap-2);
	font-family: var(--bcc-font-sub); font-weight: 600;
	text-transform: uppercase; letter-spacing: .06em; font-size: .9rem;
	/* Symmetric padding — the previous asymmetric .85/.7 was tuned for
	   Public Sans; with Karla the optical baseline shifted and the
	   short bottom read as visually unbalanced (most visible on the
	   "Read the full story" ghost button on the PDP). */
	padding: .8rem 1.5rem;
	line-height: 1.1;
	background: var(--bcc-ink); color: var(--bcc-bg);
	border: 2px solid var(--bcc-ink); border-radius: var(--bcc-radius-pill);
	text-decoration: none; cursor: pointer;
	/* alpha.17: softer transitions; box-shadow included so primary lifts cast
	   a real shadow on hover instead of just translating. */
	transition:
		transform .2s var(--bcc-ease),
		background-color .2s var(--bcc-ease),
		color .2s var(--bcc-ease),
		border-color .2s var(--bcc-ease),
		box-shadow .2s var(--bcc-ease);
}
.bcc-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(26,20,17,.18); }
.bcc-btn:active { transform: translateY(0); transition-duration: .08s; }
.bcc-btn--ghost { background: transparent; color: var(--bcc-ink); }
.bcc-btn--ghost:hover { background: var(--bcc-ink); color: var(--bcc-bg); }
/* `.bcc-btn--accent` is the legacy class name — alpha.9 repaints it as
   the BURGUNDY primary CTA (per design overhaul). The accent/accent
   tone now lives on hover only, so the brand depth reads first and the
   warmth comes as a reward state. Don't rename the class — it's referenced
   in 13 templates and the rename adds churn without value. */
.bcc-btn--accent {
	background: var(--bcc-deep); color: var(--bcc-cream-stable); border-color: var(--bcc-deep);
}
.bcc-btn--accent:hover {
	background: var(--bcc-deep-soft); color: var(--bcc-accent-wash);
	border-color: var(--bcc-deep-soft);
}
.bcc-btn--small { padding: .5rem 1.05rem; font-size: .78rem; letter-spacing: .05em; line-height: 1.1; }
/* alpha.11: ghost variant for use on dark surfaces (origin slab, future
   dark interstitials). Accent border + ink-rich on cream hover. */
.bcc-btn--ghost-light {
	background: transparent; color: var(--bcc-accent-wash);
	border-color: var(--bcc-accent-wash);
}
.bcc-btn--ghost-light:hover {
	background: var(--bcc-accent-wash); color: var(--bcc-ink-rich);
	border-color: var(--bcc-accent-wash);
}

/* bcc-icon-btn removed — was the "+" with the rotate-on-hover that read
   oddly. Cards now use the standard small accent button "Add". */

/* ── 6. Containers ──────────────────────────────────────────────────── */

.bcc-container { max-width: var(--bcc-container); margin: 0 auto; padding: 0 var(--bcc-gap-5); }
.bcc-container--wide { max-width: var(--bcc-container-wide); }

/* ── 7. Utility strip + Header + Nav ────────────────────────────────── */

.bcc-utility {
	/* Solid black dispatch band — flat, no texture. Contrast with
	   the paper site below keeps the countdown visually prominent. */
	background: #000;
	color: var(--bcc-cream-stable);
	font-family: var(--bcc-font-sub); font-weight: 500;
	font-size: .78rem; letter-spacing: .05em;
	/* alpha.11: horizontal padding moves from -inner → parent so the
	   inner's max-width fills out to the same edges as the footer/
	   section inners. Previously the header + utility content were
	   gap-5 narrower than the rest of the site on wide viewports. */
	padding: 0 var(--bcc-edge);
}
.bcc-utility-inner {
	/* alpha.42 (2026-05-17): centred (was space-between for utility-left
	   + utility-right). The merged mast holds just the dispatch countdown
	   now — tagline, free-delivery line, and "Hi, Joseph" greeting all
	   removed for a cleaner single read. */
	display: flex; align-items: center; justify-content: center;
	gap: .55rem;
	padding: 8px 0;
	max-width: var(--bcc-container-wide); margin: 0 auto;
}
.bcc-utility .bcc-tagline { color: var(--bcc-accent-wash); text-transform: uppercase; letter-spacing: .18em; font-weight: 600; }
.bcc-utility a { color: var(--bcc-cream-stable); opacity: .9; }
.bcc-utility a:hover { opacity: 1; color: var(--bcc-accent-wash); }
/* alpha.42: countdown copy now sits inside .bcc-utility (no longer a
   separate band). On the bark bg, the dynamic time/day values pop
   in accent; the surrounding text inherits cream from .bcc-utility. */
.bcc-utility--countdown .bcc-countdown-band__copy strong { color: var(--bcc-cream-stable); font-weight: 700; }
.bcc-utility--countdown [data-bcc-countdown-time],
.bcc-utility--countdown [data-bcc-countdown-day] {
	color: var(--bcc-accent-wash); font-weight: 700;
}
/* 2026-05-20: drop "next-day DPD " from the countdown copy on narrow
   viewports so the mast stays one line on mobile. Desktop keeps the
   full specificity. */
@media (max-width: 600px) {
	.bcc-countdown-band__long { display: none; }
}

/* alpha.43 (2026-05-17): sticky is on .bcc-mast now so the bark
   utility band sticks with the header instead of scrolling away first.
   .bcc-header keeps its visual treatment but loses its individual
   sticky context — nested sticky within sticky behaves unpredictably
   (the inner sticks to the outer's bounding box, not the viewport),
   so one parent owning the stick is the safer model. */
.bcc-mast {
	position: sticky; top: 0; z-index: 50;
}

.bcc-header {
	/* Opaque paper background — needs to hide content scrolling
	   underneath, but uses the same paper texture as the body so it
	   reads as a continuation of the hero rather than a yellowish
	   slab. background-attachment: fixed ties the header's texture
	   to the viewport (same as body), so the patterns align and the
	   sticky header feels like a window onto the same paper. */
	background-color: var(--bcc-page-bg);
	background-image: url('paper-light.jpg');
	background-size: 350px;
	background-attachment: fixed;
	background-repeat: repeat;
	border-bottom: 1px solid var(--bcc-rule);
	padding: 0 var(--bcc-edge);
}
[data-theme="dark"] .bcc-header {
	background-image: url('paper-dark.jpg');
}
.bcc-header-inner {
	display: grid; grid-template-columns: auto 1fr auto auto;
	align-items: center; gap: var(--bcc-gap-3);
	padding: var(--bcc-gap-4) 0;
	max-width: var(--bcc-container-wide); margin: 0 auto;
}
.bcc-logo img { height: 56px; width: auto; }
@media (min-width: 768px) { .bcc-logo img { height: 72px; } }
/* alpha.13: logo PNG is black ink — invisible on dark surfaces. Invert
   to give a cream rendering in dark mode. Pure invert (1) without hue
   rotation is fine here because the source is monochrome. */
[data-theme="dark"] .bcc-logo img { filter: invert(1) brightness(1.05); }

/* 2026-05-20: mobile nav as a full-viewport overlay with animated entry +
   cascaded link reveal. Hamburger lives in .bcc-header-actions to the
   right of the account button; clicking it sets .is-open which fades the
   overlay in and slides each link up. The overlay's own close button (×,
   top-right) carries the same data-bcc-nav-toggle attribute so the JS
   handler treats it as another toggle. Visibility/opacity pattern (not
   display: none) so the fade transition works in both directions. */
.bcc-nav {
	position: fixed; inset: 0;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	gap: var(--bcc-gap-4);
	background-color: var(--bcc-page-bg);
	background-image: url('paper-light.jpg');
	background-size: 350px;
	background-repeat: repeat;
	padding: var(--bcc-gap-8) var(--bcc-edge);
	z-index: 60;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .28s var(--bcc-ease), visibility 0s linear .28s;
	text-align: center;
}
[data-theme="dark"] .bcc-nav { background-image: url('paper-dark.jpg'); }
.bcc-nav.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity .28s var(--bcc-ease), visibility 0s linear 0s;
}
.bcc-nav a {
	color: var(--bcc-ink);
	font-family: var(--bcc-font-display);
	font-size: 1.75rem;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	padding: var(--bcc-gap-2) var(--bcc-gap-4);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .35s var(--bcc-ease), transform .35s var(--bcc-ease), color .2s var(--bcc-ease);
}
.bcc-nav.is-open a { opacity: 1; transform: translateY(0); }
.bcc-nav.is-open a:nth-child(2) { transition-delay: .08s; }
.bcc-nav.is-open a:nth-child(3) { transition-delay: .12s; }
.bcc-nav.is-open a:nth-child(4) { transition-delay: .16s; }
.bcc-nav.is-open a:nth-child(5) { transition-delay: .20s; }
.bcc-nav.is-open a:nth-child(6) { transition-delay: .24s; }
.bcc-nav.is-open a:nth-child(7) { transition-delay: .28s; }
.bcc-nav a.current { color: var(--bcc-accent-text); }
/* Close button (×) positioned at the SAME viewport coordinates as the
   hamburger that opened the menu, so open/close feels positionally
   identical. Math: utility band ≈ 34px tall + header padding-top 16px +
   8px button-offset in 56px logo row = 58px from viewport top. Right
   offset matches the mobile header's tightened gutter (--bcc-gap-3). */
.bcc-nav__close {
	position: absolute;
	top: 58px;
	right: var(--bcc-gap-3);
	width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: flex-end;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--bcc-ink);
	cursor: pointer;
	transition: opacity .15s var(--bcc-ease);
}
.bcc-nav__close:hover { opacity: .7; }
.bcc-nav__close svg { width: 22px; height: 22px; }

/* Hamburger toggle (in the header). Centered icon sits in a 40px button;
   the header's tight mobile gutter lands the icon at the same viewport
   coordinates as the close-button overlay so open/close feels identical. */
.bcc-nav-toggle {
	display: inline-flex; align-items: center; justify-content: flex-end;
	width: 40px; height: 40px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--bcc-ink);
	cursor: pointer;
	transition: opacity .15s var(--bcc-ease);
}
.bcc-nav-toggle:hover { opacity: .7; }
.bcc-nav-toggle svg { width: 22px; height: 22px; }
.bcc-header { position: relative; }
/* 2026-05-20: on mobile, override the header's --bcc-edge gutter with a
   tighter gap-3 (12px) so logo and hamburger both sit close to the edges
   without dead inset. Same gutter is mirrored by .bcc-nav__close's right
   offset above, so the hamburger and × land at identical viewport coords. */
@media (max-width: 767px) {
	.bcc-header { padding: 0 var(--bcc-gap-3); }
}

@media (min-width: 768px) {
	/* Reset mobile-overlay back to inline horizontal nav at desktop. */
	.bcc-nav {
		position: static; inset: auto;
		flex-direction: row; justify-content: center;
		gap: var(--bcc-gap-6);
		background: none; padding: 0;
		opacity: 1; visibility: visible; pointer-events: auto;
		transition: none;
		text-align: left;
		font-family: var(--bcc-font-sub); font-weight: 500;
		text-transform: uppercase;
		letter-spacing: .12em; font-size: .82rem;
	}
	.bcc-nav a {
		opacity: 1; transform: none;
		transition: color .2s var(--bcc-ease);
		font-family: inherit; font-size: inherit;
		letter-spacing: inherit; text-transform: inherit;
		padding: .35rem 0;
	}
	.bcc-nav__close, .bcc-nav-toggle { display: none; }
	/* alpha.43 (2026-05-17): underline animates left-to-right via
	   ::after instead of toggling a static border-bottom. transform-
	   origin: left + transition on transform produces a refined "drawn"
	   effect that suits the editorial nav voice better than a fade-in
	   border. .current state appears already-drawn on first paint
	   (transform: scaleX(1) is the initial value for that branch), no
	   on-load animation flash. After AJAX nav the .current class swap
	   produces a one-shot grow which acts as a subtle state cue. */
	.bcc-nav a {
		color: var(--bcc-ink); padding: .35rem 0;
		position: relative;
		transition: color .2s var(--bcc-ease);
	}
	.bcc-nav a::after {
		content: '';
		position: absolute; left: 0; right: 0; bottom: 0;
		height: 2px; background: var(--bcc-accent-wash);
		transform: scaleX(0); transform-origin: left center;
		transition: transform .3s var(--bcc-ease);
	}
	.bcc-nav a:hover, .bcc-nav a.current { color: var(--bcc-accent-text); }
	.bcc-nav a:hover::after,
	.bcc-nav a.current::after { transform: scaleX(1); }
	/* When leaving a hovered link, retract from the right so the exit
	   animation matches the entry (left→right grow, right→left retract).
	   Without this the underline would collapse-from-left and feel snappy
	   on hover-out. */
	.bcc-nav a:not(:hover):not(.current)::after { transform-origin: right center; }
	/* alpha.SEO+ (2026-05-18): when any nav link is hovered, suppress the
	   .current item's underline so only one underline shows at a time.
	   :not(:hover) on .current makes sure that if you hover the current
	   link itself, it keeps the underline (i.e. hovering Home from the
	   homepage doesn't blank its own indicator). Retracts to the right
	   on hover-in (matches the leave animation), restores by growing
	   from the left on hover-out. :has() — Safari 15.4+/Chrome 105+. */
	.bcc-nav:has(a:hover) a.current:not(:hover)::after {
		transform: scaleX(0);
		transform-origin: right center;
	}
}

.bcc-header-cart {
	display: inline-flex; align-items: center; gap: .4rem;
	font-family: var(--bcc-font-sub); text-transform: uppercase;
	letter-spacing: .06em; font-size: .85rem;
	padding: .5rem .85rem .35rem;
	border: 1.5px solid var(--bcc-ink); border-radius: var(--bcc-radius-pill);
	transition: all .15s var(--bcc-ease);
}
.bcc-header-cart:hover { background: var(--bcc-ink); color: var(--bcc-bg); }
.bcc-header-cart .count {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 18px; height: 18px; padding: 0 5px;
	background: var(--bcc-accent-wash); color: var(--bcc-ink);
	border-radius: var(--bcc-radius-pill); font-size: .7rem; font-weight: 700;
}


/* ── DAMASK PSEUDO-ELEMENT BASE ─────────────────────────────────────
   alpha.44f (2026-05-18): shared declarations for every damask ::before
   in the codebase. 22 surfaces all use the same mask-image setup;
   only `background-color` (tint) and `mask-size` (tile) differ per
   section. Per-section rules below set those two — everything else
   lives here. Keep the selector list in sync if you add new damask
   surfaces (otherwise the new ::before won't render correctly). */
/* 2026-05-18 (bcc-bw): SVG-damask ::before system retired. The body now
   carries a real paper-grain JPG fixed-attached as canvas (matching the
   live theme), so layering a second SVG grain on every section just
   muddied things up. The shared rule below now generates NO pseudo-
   element (content: none) — per-section damask overrides that follow
   are inert. Cheaper to no-op the base rule than to delete 30+ rules. */
.bcc-damask::before,
.bcc-damask--dark::before,
.bcc-damask--sm::before,
.bcc-promise::before,
.bcc-cats::before,
.bcc-stockists::before,
.bcc-origin::before,
.bcc-cta-band::before,
.bcc-footer::before,
.bcc-pdp__image-frame::before,
.bcc-pdp__story::before,
.bcc-pdp__details::before,
.bcc-detail-card::before,
.bcc-pdp__related::before,
.bcc-archive-hero::before,
.bcc-shop-grid-wrap::before,
.bcc-cart-empty::before,
.bcc-story-hero::before,
.bcc-story-body::before,
.bcc-story-pillars::before,
.bcc-story-factory::before,
.bcc-info-hero::before,
.bcc-info-section::before,
.bcc-faq::before,
.bcc-reviews::before,
.bcc-pdp__reviews::before,
.bcc-hero::before,
.bcc-trust::before {
	content: none;
}

/* ── 9. Damask pattern overlay (premium texture, posh-wallpaper cue) ── */
/* Available as a utility — apply .bcc-damask to any container that has
   position:relative + overflow:hidden. The image lives in /assets/. */
.bcc-damask { position: relative; }
.bcc-damask::before {
	background-color: var(--bcc-damask-tint-tonal);
	-webkit-mask-size: var(--bcc-damask-tile-lg);
	mask-size: var(--bcc-damask-tile-lg);
	z-index: 0;
}
.bcc-damask > * { position: relative; z-index: 1; }

.bcc-damask--dark::before {
	background-color: var(--bcc-damask-tint-feature);
}
.bcc-damask--sm::before {
	background-color: var(--bcc-damask-tint-whisper);
	-webkit-mask-size: var(--bcc-damask-tile-sm);
	mask-size: var(--bcc-damask-tile-sm);
}

/* ── 10. Rotating hero ─────────────────────────────────────────────── */

.bcc-hero {
	/* Hero — split composition. Left half is paper-canvas with copy.
	   Right half is a crimson British heritage collage panel with the
	   range packs sitting big on it. This is the brand moment that
	   was missing — the live theme leans on this red collage hard
	   and it's what gives BCC its visual identity. */
	--bcc-section-accent: var(--bcc-flav-chilli);
	--bcc-section-accent-dark: var(--bcc-accent-wash);
	position: relative; overflow: hidden;
	/* Padding removed on the right edge so the crimson panel bleeds
	   to the viewport edge; left side keeps the standard gutter. */
	padding: 0 0 0 var(--bcc-edge);
	background: transparent;
}
/* 2026-05-20: legacy mobile hero rule removed — dead code, overridden
   by the HERO v3 block further down. Mobile rules now live alongside
   the v3 block so source-order cascade actually works. */
/* Hero eyebrow rules now live in the HERO v3 block below — light mode
   takes the gold hero accent, dark mode lifts to a cream-gold. The
   previous chilli-red rule was retired when the hero accent moved
   from chilli to brown-gold. */
/* alpha.41 (2026-05-17): hero damask ::before REMOVED. The body bg now
   carries the brand damask at full opacity (added today to match the
   public theme), so layering another damask here created moiré
   interference and visual mud. The ::after accent radial spotlight
   below still creates the bag-side highlight — that's the brand cue
   this hero actually needs. */
/* alpha.SEO+ (2026-05-18): homepage hero gets the same whisper damask as
   stockists/footer/PDP-details. alpha.41 removed the ::before damask
   because the body had damask too and they were creating moiré — body
   bg is now flat (alpha.42), so this is safe again. Per-section override
   for tint + tile-size; the shared mask declarations come from the
   grouped base rule above. */
.bcc-hero::before {
	background-color: var(--bcc-damask-tint-whisper);
	-webkit-mask-size: var(--bcc-damask-tile-md);
	mask-size: var(--bcc-damask-tile-md);
}
/* 2026-05-20: dead block removed — the HERO v3 rules further down
   override .bcc-hero / .bcc-hero-track / .bcc-hero-slide via source-
   order cascade, so anything here was inert. Real mobile rules live
   inside the v3 mobile @media block below. */
.bcc-hero > * { position: relative; z-index: 1; }
/* Hero::after retired — the new split layout doesn't need a wash; the
   crimson collage panel on the right IS the brand-red moment. */
.bcc-hero::after { content: none; }
.bcc-hero-track {
	position: relative; z-index: 1;
	/* Was max-width: container-wide; now full width so the crimson
	   right panel can bleed to the viewport edge. The copy column
	   inside is what stays max-width-constrained. */
	max-width: none;
	margin: 0;
	min-height: 420px;
}
@media (min-width: 880px) { .bcc-hero-track { min-height: 560px; } }

.bcc-hero-slide {
	position: absolute; inset: 0;
	display: grid; grid-template-columns: 1fr;
	gap: 0;
	align-items: stretch;  /* both halves fill hero height */
	opacity: 0;
	transition: opacity .35s var(--bcc-ease);
	pointer-events: none;
}
@media (min-width: 880px) {
	.bcc-hero-slide {
		/* Asymmetric split: copy on the left (smaller, anchored), the
		   crimson collage panel taking the larger right share. No gap
		   — the two halves butt up against each other. */
		grid-template-columns: minmax(0, 0.95fr) 1.05fr;
	}
}
.bcc-hero-slide.is-active { opacity: 1; pointer-events: auto; }

.bcc-hero-copy h1 { margin-bottom: var(--bcc-gap-4); }
.bcc-hero-copy .lede {
	font-size: var(--bcc-body-lg);
	color: var(--bcc-ink-subtle);
	margin-bottom: var(--bcc-gap-6);
	max-width: 32em;
}
.bcc-hero-copy .cta-row { display: flex; flex-wrap: wrap; gap: var(--bcc-gap-3); }

/* alpha.46 (2026-05-18): drop-shadow removed. Safari rendered the filter
   against the compositor layer's bounding box (a rectangle), not the bag
   alpha, once the bcc-hero-image-float transform animation kicked in at
   1.2s — producing a rectangular "shelf" halo around the bags. Both
   filter-on-container and filter-on-img hit the same WebKit quirk. The
   bag PNGs read fine on the damask without a cast shadow, so the simplest
   fix is no shadow at all. */
/* Hero image is now the CRIMSON COLLAGE PANEL — the brand-red moment.
   bg-image is the British heritage iconography lifted from the live
   theme (slider-bg-bcc.jpg), blended with the chilli flavour colour
   so it reads as the brand-red rather than the live theme's burgundy.
   The range PNG sits centred over the top, big and confident. */
.bcc-hero-copy {
	padding: var(--bcc-gap-8) var(--bcc-gap-7) var(--bcc-gap-8) 0;
	align-self: center;
	max-width: 32em;
}
@media (max-width: 879px) {
	.bcc-hero-copy { padding: 0; }
}
.bcc-hero-image {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: var(--bcc-gap-7) var(--bcc-edge);
	background-color: var(--bcc-flav-chilli);
	background-image: linear-gradient(rgba(28, 24, 22, 0.35), rgba(28, 24, 22, 0.35)), url('hero-collage.jpg');
	background-size: cover;
	background-position: center;
	background-blend-mode: multiply;
	position: relative;
	overflow: hidden;
	min-height: 100%;
}
/* Subtle vignette so packs read clearly against the busy collage. */
.bcc-hero-image::before {
	content: '';
	position: absolute; inset: 0;
	background: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 30%, rgba(20, 14, 12, 0.45) 100%);
	pointer-events: none;
	z-index: 0;
}
.bcc-hero-image img {
	display: block;
	width: 100%;
	max-width: 680px;
	height: auto;
	max-height: none;
	position: relative;
	z-index: 1;
	/* 2026-05-19: drop-shadow removed — packs sit cleanly on the paper
	   canvas without lift. */
	filter: none;
}
@media (max-width: 879px) {
	.bcc-hero-image {
		padding: var(--bcc-gap-6) var(--bcc-gap-5);
		min-height: 0;
	}
	.bcc-hero-image img {
		max-width: 100%;
	}
}

/* alpha.19: symmetric in/out animation. Outgoing slide now actively
   animates out (slide-left + fade) via a JS-applied .is-leaving class
   that mirrors the incoming entrance. This eliminates the dual-image
   overlap window that was producing the ghost. */
.bcc-hero-slide .bcc-hero-image img { opacity: 0; }
.bcc-hero-slide.is-active .bcc-eyebrow { animation: bcc-hero-content-in .5s var(--bcc-ease) .12s both; }
.bcc-hero-slide.is-active .bcc-display { animation: bcc-hero-content-in .55s var(--bcc-ease) .22s both; }
.bcc-hero-slide.is-active .lede        { animation: bcc-hero-content-in .5s var(--bcc-ease) .32s both; }
.bcc-hero-slide.is-active .cta-row     { animation: bcc-hero-content-in .5s var(--bcc-ease) .42s both; }
.bcc-hero-slide.is-active .bcc-hero-image img {
	opacity: 1;
	animation:
		bcc-hero-image-in 0.55s var(--bcc-ease) .1s both,
		/* alpha.41 (2026-05-17): float cadence slowed 7s → 11s, amplitude
		   trimmed 9px → 5px. Premium brands rest still except for the
		   softest breathing. The previous 7s/9px loop felt like fidget
		   rather than presence. */
		bcc-hero-image-float 11s ease-in-out 1.2s infinite;
}
.bcc-hero-slide.is-leaving .bcc-hero-image img {
	animation: bcc-hero-image-out 0.35s ease-in 0s both;
}
.bcc-hero-slide.is-leaving .bcc-eyebrow,
.bcc-hero-slide.is-leaving .bcc-display,
.bcc-hero-slide.is-leaving .lede,
.bcc-hero-slide.is-leaving .cta-row {
	animation: bcc-hero-content-out 0.3s ease-in 0s both;
}

@keyframes bcc-hero-content-in {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes bcc-hero-content-out {
	from { opacity: 1; transform: translateY(0); }
	to   { opacity: 0; transform: translateY(-12px); }
}
@keyframes bcc-hero-image-in {
	from { opacity: 0; transform: translateX(40px) scale(.94); }
	to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes bcc-hero-image-out {
	from { opacity: 1; transform: translateX(0) scale(1); }
	to   { opacity: 0; transform: translateX(-40px) scale(.94); }
}
@keyframes bcc-hero-image-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-5px); } /* alpha.41: was -9px */
}

/* alpha.20: arrow-hover nudge removed — it was only sensible when the
   arrows sat in empty side margin (very wide screens). With arrows now
   overlaying the bag image, the nudge made content slide around for no
   reason. The chevron's own translate hover is still there. */

/* Reduced-motion users get the crossfade only — no entrance, no float. */
@media (prefers-reduced-motion: reduce) {
	.bcc-hero-slide.is-active .bcc-eyebrow,
	.bcc-hero-slide.is-active .bcc-display,
	.bcc-hero-slide.is-active .lede,
	.bcc-hero-slide.is-active .cta-row,
	.bcc-hero-slide.is-active .bcc-hero-image img { animation: none; }
}

/* alpha.9: progress-bar dots (BCC pattern). Inactive = rounded rect
   in subtle ink; active = same rect plus an ::after that fills 0→100%
   over the slide duration. Gives the user a visual countdown to the
   next slide — much more useful than the previous circle pulse. JS
   controls --slide-dur (default 6000ms in interactions.js initHero). */
.bcc-hero-dots {
	position: absolute; bottom: -1.5rem; left: 50%;
	transform: translateX(-50%);
	display: flex; gap: 6px; padding: 0; margin: 0;
	z-index: 2;
}
.bcc-hero-dot {
	position: relative;
	width: 36px; height: 5px;
	background: rgba(28, 24, 22, 0.18);
	border: 0; border-radius: 3px;
	cursor: pointer; padding: 0;
	overflow: hidden;
	transition: background-color .25s var(--bcc-ease);
}
.bcc-hero-dot:hover { background: rgba(28, 24, 22, 0.28); }
.bcc-hero-dot::after {
	content: '';
	position: absolute; left: 0; top: 0; bottom: 0;
	width: 0;
	background: var(--bcc-accent-wash);
	border-radius: 3px;
	pointer-events: none;
}
.bcc-hero-dot.is-active { background: rgba(28, 24, 22, 0.28); }
.bcc-hero-dot.is-active::after {
	animation: bcc-hero-dot-fill var(--slide-dur, 6000ms) linear forwards;
}
@keyframes bcc-hero-dot-fill {
	from { width: 0; }
	to   { width: 100%; }
}
[data-theme="dark"] .bcc-hero-dot { background: rgba(240, 232, 218, 0.18); }
[data-theme="dark"] .bcc-hero-dot:hover,
[data-theme="dark"] .bcc-hero-dot.is-active { background: rgba(240, 232, 218, 0.28); }

/* alpha.20: hero arrows reworked. Each arrow is a 90px hover-zone at the
   left/right edge of the hero. The chevron only fades in when the cursor
   enters its OWN zone (not on whole-hero hover). Arrows sit on top of
   the bag image via z-index so they're always reachable, and the text/
   image no longer nudges on arrow hover — felt fussy and only worked
   awkwardly when there was empty side margin. */
.bcc-hero-arrow {
	position: absolute; top: 0; bottom: 0; width: 90px;
	display: none;
	background: transparent; border: 0; padding: 0;
	cursor: pointer; z-index: 5;
	color: var(--bcc-accent-text);
}
.bcc-hero-arrow--prev { left: 0; }
.bcc-hero-arrow--next { right: 0; }
.bcc-hero-arrow svg {
	position: absolute; top: 50%; width: 28px; height: 28px;
	opacity: 0;
	filter: drop-shadow(0 2px 6px rgba(26,20,17,0.25));
	transition: opacity .2s var(--bcc-ease), transform .15s ease;
}
.bcc-hero-arrow--prev svg { left: 22px; transform: translateY(-50%); }
.bcc-hero-arrow--next svg { right: 22px; transform: translateY(-50%); }
.bcc-hero-arrow:hover svg { opacity: 1; }
.bcc-hero-arrow--prev:hover svg { transform: translateY(-50%) translateX(-4px); }
.bcc-hero-arrow--next:hover svg { transform: translateY(-50%) translateX(4px); }
[data-theme="dark"] .bcc-hero-arrow { color: var(--bcc-ink); }
@media (hover: hover) and (min-width: 880px) {
	.bcc-hero-arrow { display: block; }
}

/* ════════════════════════════════════════════════════════════════════
   HERO v3 — full-bleed crimson brand-statement block.
   Complete rewrite overriding everything above. Drops the absolute-
   positioned slide machinery (only one slide exists; the rotating
   logic was overkill). Hero now reads as a confident brand moment:
   chilli-red canvas with subtle paper grain multiplied in, cream
   copy and big packs side-by-side, packs anchored by a real
   layered drop shadow rather than floating in space.
   ════════════════════════════════════════════════════════════════════ */

.bcc-hero {
	/* Hero accent is a warm vintage brown-gold rather than the brand
	   chilli red — reads as heritage / aged-print / kraft-paper-friendly,
	   and stops competing visually with the chilli accents used
	   elsewhere on the page (Sweet Chilli wash, CTA band button etc.). */
	--bcc-hero-accent:      #8a5d12;   /* deep antique gold, brown-leaning */
	--bcc-hero-accent-dark: #d9b56e;   /* lifted cream-gold for dark mode */
	--bcc-section-accent: var(--bcc-hero-accent);
	--bcc-section-accent-dark: var(--bcc-hero-accent-dark);
	position: relative;
	/* Padding pinned to var(--bcc-gap-8) — matches AP's hero (gap-8
	   each side, 4.5rem). AP's rotating-progress pills sit absolutely
	   in this padding band so they don't add to total height; BCC
	   without pills lands at the same total height. */
	padding: var(--bcc-gap-8) var(--bcc-edge);
	overflow: hidden;
	background: transparent;
	color: var(--bcc-ink);
}
.bcc-hero::before,
.bcc-hero::after { content: none; }

/* Wrappers behave as simple flow containers — kill the absolute-
   positioned slide overlay that the rotating-hero JS needed.
   min-height matches AP exactly so text + imagery land in the same
   Y-position on both sites (AP's progress pills don't take flow
   space — they're absolute-positioned overlays — so BCC without
   pills hits the same total height with the same track min-height). */
.bcc-hero-track {
	position: relative;
	max-width: var(--bcc-container-wide);
	margin: 0 auto;
	min-height: 420px;
}
@media (min-width: 880px) { .bcc-hero-track { min-height: 480px; } }
.bcc-hero-slide,
.bcc-hero-slide.is-active,
.bcc-hero-slide.is-leaving {
	position: relative;
	inset: auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: center;
	opacity: 1;
	pointer-events: auto;
	transition: none;
	/* Slide fills the track so its grid-items vertically centre against
	   the same Y baseline as AP. min-height matches the track. */
	min-height: inherit;
}
@media (min-width: 880px) {
	.bcc-hero-slide {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: clamp(2rem, 4vw, 4.5rem);
		align-items: center;
	}
}
/* Kill the legacy entrance/exit animations — they were per-slide
   crossfade effects that look stuttery on a single-slide hero. */
.bcc-hero-slide .bcc-eyebrow,
.bcc-hero-slide .bcc-display,
.bcc-hero-slide .lede,
.bcc-hero-slide .cta-row,
.bcc-hero-slide.is-active .bcc-eyebrow,
.bcc-hero-slide.is-active .bcc-display,
.bcc-hero-slide.is-active .lede,
.bcc-hero-slide.is-active .cta-row,
.bcc-hero-slide.is-active .bcc-hero-image img {
	animation: none;
	opacity: 1;
	transform: none;
}

/* Copy column — ink text on paper. */
.bcc-hero-copy {
	max-width: 32em;
	padding: 0;
}
.bcc-hero .bcc-eyebrow {
	color: var(--bcc-hero-accent);
	font-weight: 600;
}
[data-theme="dark"] .bcc-hero .bcc-eyebrow {
	color: var(--bcc-hero-accent-dark);
}
.bcc-hero h1,
.bcc-hero h1.bcc-display {
	color: var(--bcc-ink);
	font-size: clamp(2.6rem, 5vw + 1rem, 5.4rem);
	line-height: 1.02;
	margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
.bcc-hero h1.bcc-display em,
.bcc-hero h1.bcc-display .bcc-highlight {
	color: var(--bcc-hero-accent);
	font-style: normal;
	font-weight: normal;
}
[data-theme="dark"] .bcc-hero h1.bcc-display em,
[data-theme="dark"] .bcc-hero h1.bcc-display .bcc-highlight {
	color: var(--bcc-hero-accent-dark);
}
.bcc-hero-copy .lede {
	color: var(--bcc-ink-subtle);
	font-size: clamp(1rem, 0.5vw + 0.95rem, 1.18rem);
	line-height: 1.55;
	max-width: 30em;
	margin-bottom: clamp(1.5rem, 3vw, 2rem);
}
.bcc-hero .cta-row { display: flex; flex-wrap: wrap; gap: var(--bcc-gap-3); }

/* Image column — packs sit big and anchored. The PNG has clean alpha
   around the packs (bcc-banner.png). Soft layered drop-shadow gives
   confident product-photo weight against the red canvas. No frame,
   no background, no inherited chrome — nuked via a top-level reset. */
.bcc-hero-image {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 0;
	outline: 0;
	box-shadow: none;
	border-radius: 0;
	overflow: visible;
	min-height: 0;
}
/* No halo, no glow — packs stand alone on the paper canvas. */
.bcc-hero-image::before { content: none; }
.bcc-hero-image img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	max-height: none;
	border: 0;
	outline: 0;
	box-shadow: none;
	border-radius: 0;
	background: transparent;
	opacity: 1;
	/* 2026-05-19: drop-shadow stack removed — packs sit flat on the
	   paper canvas without lift. */
	filter: none;
}

/* Mobile hero — comprehensive overhaul (2026-05-20). Sits at the end
   of the HERO v3 block so it's the last word in source order, actually
   wins. Tightens padding, removes desktop track min-height; image
   renders at its native ratio (width:100% + height:auto, no aspect-
   ratio container, no max-height cap) so the packshot displays end-
   to-end with no possible clipping vector. */
@media (max-width: 879px) {
	.bcc-hero {
		padding: var(--bcc-gap-6) var(--bcc-edge) var(--bcc-gap-7);
	}
	.bcc-hero-track {
		min-height: 0;
	}
	.bcc-hero-slide {
		min-height: 0;
		gap: var(--bcc-gap-5);
	}
	.bcc-hero-copy { max-width: none; }
	.bcc-hero h1.bcc-display { font-size: clamp(2.4rem, 8vw, 3.6rem); }
	.bcc-hero-image {
		margin-top: var(--bcc-gap-3);
		display: block;
		width: 100%;
		max-width: 520px;
		margin-left: auto;
		margin-right: auto;
		height: auto;
		min-height: 0;
		padding: 0;
		background: none;
	}
	.bcc-hero-image::before { content: none; }
	.bcc-hero-image img {
		display: block;
		width: 100%;
		max-width: 100%;
		height: auto;
		max-height: none;
	}
}

/* Hero pagination dots / arrows — back on the paper canvas. */
.bcc-hero-dot { background: rgba(20, 14, 12, 0.18); }
.bcc-hero-dot:hover,
.bcc-hero-dot.is-active { background: rgba(20, 14, 12, 0.32); }
.bcc-hero-dot::after { background: var(--bcc-flav-chilli); }
.bcc-hero-arrow { color: var(--bcc-ink); }
[data-theme="dark"] .bcc-hero-arrow { color: var(--bcc-ink); }

/* ── 11. Promise tiles ──────────────────────────────────────────────── */

.bcc-promise {
	/* Vinegar (sage / pickle-green) wash — the four pillars are the
	   "growing things" section of the homepage (farm, AD energy,
	   recyclable packet, allergen-free). Sage green carries that
	   countryside / kitchen-pantry tone without going full crisp-bag
	   electric green. --bcc-section-accent retunes <em> highlights. */
	--bcc-section-accent: var(--bcc-flav-vinegar-deep);
	--bcc-section-accent-dark: #c5d39c;
	padding: var(--bcc-gap-8) var(--bcc-edge);
	background-color: transparent;
	background-image: linear-gradient(var(--bcc-wash-vinegar), var(--bcc-wash-vinegar));
	border-top: 1px solid var(--bcc-rule);
	border-bottom: 1px solid var(--bcc-rule);
	position: relative; overflow: hidden;
}
.bcc-promise > * { position: relative; z-index: 1; }
.bcc-promise .bcc-eyebrow { color: var(--bcc-flav-vinegar-deep); }
[data-theme="dark"] .bcc-promise .bcc-eyebrow { color: #c5d39c; }

.bcc-promise .bcc-section-head { margin-bottom: var(--bcc-gap-8); }
.bcc-promise .bcc-section-head h2 { font-size: clamp(2rem, 3vw + 1rem, 3rem); }

/* alpha.10: numbered editorial blocks. Three columns separated by hairline
   accent rules on desktop; stacked with horizontal rule dividers on
   mobile. The big Cutive Mono number is the visual anchor; the h3 below is small
   uppercase sans so the section h2 keeps its rank in the hierarchy. */
.bcc-promise-grid {
	max-width: var(--bcc-container-wide);
	margin: 0 auto;
	display: grid; gap: var(--bcc-gap-7);
	grid-template-columns: 1fr;
	text-align: center;
}
@media (min-width: 720px) {
	.bcc-promise-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 0;
	}
	.bcc-promise-grid .bcc-promise-tile + .bcc-promise-tile {
		border-left: 1px solid rgba(217, 160, 91, 0.4);
	}
}
.bcc-promise-tile {
	padding: 0 var(--bcc-gap-5);
	display: flex; flex-direction: column; align-items: center;
	gap: var(--bcc-gap-3);
}
.bcc-promise-tile__num {
	font-family: var(--bcc-font-display);
	font-size: clamp(2.6rem, 4vw + 1rem, 4rem);
	line-height: 1;
	/* Track the section accent (vinegar-deep in the four-pillars block,
	   etc.). Falls back to the brand chilli accent if unset. */
	color: var(--bcc-section-accent, var(--bcc-accent));
	letter-spacing: 0.04em;
	margin-bottom: var(--bcc-gap-1);
}
[data-theme="dark"] .bcc-promise-tile__num {
	/* Dark mode lifts to the LIGHTER section-accent (e.g. vinegar-light
	   #c5d39c instead of vinegar-deep #005a30) so the big 01/02 numbers
	   stay legible against the dark canvas. */
	color: var(--bcc-section-accent-dark, var(--bcc-accent-wash));
}
.bcc-promise-tile h3 {
	font-family: var(--bcc-font-sub); font-weight: 700;
	font-size: 1rem;
	color: var(--bcc-accent-text);
	text-transform: uppercase; letter-spacing: .14em;
	margin: 0 0 var(--bcc-gap-2);
}
.bcc-promise-tile p {
	color: var(--bcc-ink-subtle);
	font-size: var(--bcc-body);
	max-width: 22em; margin: 0 auto;
	line-height: 1.5;
}

/* ── 12. Trust strip ─────────────────────────────────────────────── */

/* alpha.28: horizontal padding moved off the parent + inner so the
   marquee can span viewport-edge to viewport-edge. The label keeps
   the wrap padding itself so it doesn't kiss the edges. */
.bcc-trust {
	padding: var(--bcc-gap-7) 0;
	background: transparent;
	position: relative; overflow: hidden;
}
.bcc-trust > * { position: relative; z-index: 1; }
/* alpha.SEO+: whisper damask underlay so this band doesn't read as a
   flat near-black slab in dark mode (was a noticeable "dead zone"
   between the homepage hero and the next damask section below). */
.bcc-trust::before {
	background-color: var(--bcc-damask-tint-whisper);
	-webkit-mask-size: var(--bcc-damask-tile-md);
	mask-size: var(--bcc-damask-tile-md);
}
.bcc-trust-inner { max-width: none; margin: 0; text-align: center; }
.bcc-trust-label {
	font-family: var(--bcc-font-sub);
	text-transform: uppercase; letter-spacing: .18em;
	font-size: .8rem; color: var(--bcc-ink-subtle);
	margin: 0 auto var(--bcc-gap-5);
	padding: 0 var(--bcc-edge);
	max-width: var(--bcc-container);
}
/* alpha.27: calm infinite marquee. PHP emits each logo twice in the
   track; CSS scrolls the track from 0 to -50% over ~50s, then the
   keyframe wraps cleanly because each half of the duplicated content
   is identical. Mask-image fades the edges so logos slide in/out
   instead of hard-cutting at the strip boundary. Pause on hover and
   honour prefers-reduced-motion (full stop). */
.bcc-trust-marquee {
	max-width: 100%;
	margin: 0 auto;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	        mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.bcc-trust-track {
	display: flex;
	align-items: center;
	width: max-content;
	gap: var(--bcc-gap-7);
	animation: bcc-trust-marquee 50s linear infinite;
	will-change: transform;
}
@keyframes bcc-trust-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.bcc-trust-track { animation: none; transform: none; }
}
.bcc-trust-logo {
	display: inline-flex; align-items: center;
	height: 32px;
	flex-shrink: 0;
}
/* alpha.29: hover-pause + hover colour-shift removed — logos aren't
   clickable, so hover-as-affordance was misleading. The marquee now
   reads as a calm passive credibility strip. */
.bcc-trust-logo img {
	max-height: 32px; width: auto; max-width: 130px;
	filter: grayscale(1) opacity(.55);
}

/* ── 13. Category cards (homepage) ───────────────────────────────── */

/* alpha.42 (2026-05-17): now that the body bg is flat, the damask moves
   here as the intentional brand moment. Same pattern/size the body
   previously used (500px tile) — but contained to this one section so
   the rest of the site reads as clean cream. var(--bcc-damask-img)
   keeps the dark-mode swap. */
/* alpha.44 (2026-05-17): refactored to ::before + opacity pattern. The
   old SVG was a green/white PNG with the wash baked in, so applying it
   as `background-image` directly read as a subtle tone wash. The new
   pure-ink SVG on transparent renders at 100% saturation when applied
   directly, blasting the section. Matches the .bcc-promise /
   .bcc-origin / .bcc-cta-band / .bcc-footer convention so all damask
   surfaces share the same opacity-controlled architecture. */
.bcc-cats {
	padding: var(--bcc-gap-8) var(--bcc-edge);
	background-color: var(--bcc-page-bg, #f5f5f5);
	position: relative;
	overflow: hidden;
}
.bcc-cats::before {
	background-color: var(--bcc-damask-tint-tonal);
	-webkit-mask-size: var(--bcc-damask-tile-xl);
	mask-size: var(--bcc-damask-tile-xl);
}
.bcc-cats > * { position: relative; z-index: 1; }
.bcc-cats-inner { max-width: var(--bcc-container-wide); margin: 0 auto; }
.bcc-cats-grid {
	display: grid; gap: var(--bcc-gap-5);
	grid-template-columns: 1fr;
}
@media (min-width: 720px) { .bcc-cats-grid { grid-template-columns: repeat(3, 1fr); } }
/* alpha.20: chrome matched to .bcc-product-card — no border, no lift,
   just a soft shadow swell on hover. Card identity is in the bag fan
   and the surface colour, not in framing. */
/* alpha.42 (2026-05-17): white card surface + box-shadow removed.
   Cards now sit directly on the body's damask pattern with no framing.
   Padding kept for internal spacing; flex layout kept; hover state
   simplified to a subtle lift. */
.bcc-cat-card {
	border: 0;
	border-radius: var(--bcc-radius-lg);
	padding: var(--bcc-gap-6);
	display: flex; flex-direction: column;
	transition: transform .35s var(--bcc-ease);
	text-decoration: none; color: inherit;
}
.bcc-cat-card:hover {
	transform: translateY(-2px);
}
/* alpha.10: bag fan. 3 product images arranged like a tasting flight —
   centre bag taller, two side bags tilted out + slightly behind. The
   damask backdrop is now a real pattern (tonal opacity), not a ghost. */
/* alpha.42 (2026-05-17): fan backdrop removed per user direction. The
   previous radial + surface-2 fill + damask ::before created a visible
   "card within card" panel; the user wants just the fanned product shots
   floating on the body's damask. Layout primitives (position, height,
   overflow, margin) preserved so the bags still position correctly. */
.bcc-cat-card__fan {
	/* alpha.42: overflow:hidden removed — rotated flanks were clipping at
	   the card edges. Cards now have no visible bounding box, so the bags
	   can fan freely into the column gutter. */
	position: relative;
	height: 240px;
	margin-bottom: var(--bcc-gap-5);
}
/* alpha.46 (2026-05-18): drop-shadow removed — same WebKit quirk as
   .bcc-hero-image. The transform transition on hover promotes the img to
   its own compositor layer, and Safari then renders drop-shadow against
   the layer rectangle instead of the bag alpha → rectangular halo. */
.bcc-cat-card__bag {
	position: absolute;
	bottom: 8px;
	height: 86%; width: auto;
	transition: transform .4s var(--bcc-ease);
}
/* alpha.20: bag fan stagger removed — flanks don't move on hover any more. */
.bcc-cat-card__bag--centre {
	left: 50%; transform: translateX(-50%);
	z-index: 3; height: 92%;
}
.bcc-cat-card__bag--left {
	left: 18%; transform: translateX(-50%) rotate(-9deg);
	z-index: 2; height: 78%;
}
.bcc-cat-card__bag--right {
	right: 18%; transform: translateX(50%) rotate(9deg);
	z-index: 2; height: 78%;
}
/* alpha.20: subtler bag fan hover — small centre rise, no rotation change,
   no flank lift. Reads classy instead of bouncy. */
.bcc-cat-card:hover .bcc-cat-card__bag--centre { transform: translateX(-50%) translateY(-3px); }
.bcc-cat-card h3 {
	font-size: clamp(1.6rem, 1.5vw + 1rem, 2.2rem);
	margin-bottom: var(--bcc-gap-2);
}
.bcc-cat-card p {
	color: var(--bcc-ink-subtle);
	margin-bottom: var(--bcc-gap-4); flex: 1;
	line-height: 1.5;
}
.bcc-cat-card .cta {
	font-family: var(--bcc-font-sub); font-weight: 600;
	text-transform: uppercase; letter-spacing: .12em;
	font-size: .8rem; color: var(--bcc-accent-text);
	border-bottom: 2px solid var(--bcc-accent-wash);
	padding-bottom: 3px; align-self: flex-start;
}

/* ── 14. Section heading helper ──────────────────────────────────── */

.bcc-section-head {
	max-width: var(--bcc-container);
	margin: 0 auto var(--bcc-gap-7);
	text-align: center;
}
.bcc-section-head h2 { margin-bottom: var(--bcc-gap-3); }
.bcc-section-head p {
	color: var(--bcc-ink-subtle);
	font-size: var(--bcc-body-lg);
	max-width: 36em; margin: 0 auto;
}

/* alpha.17: scroll-reveal. JS adds .is-revealed via IntersectionObserver. */
[data-bcc-reveal] {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .65s var(--bcc-ease), transform .65s var(--bcc-ease);
	will-change: opacity, transform;
}
[data-bcc-reveal].is-revealed {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	[data-bcc-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ── 15. Stockists ───────────────────────────────────────────────── */

/* alpha.44d (2026-05-17): bg picked deliberately for visibility in both
   modes. --bcc-surface-2 (#f2ebde) was too close to body cream
   (#faf7f2) — only ~10 RGB units of difference, read as "no band".
   Light: explicit deeper-cream #ede0c5 (a meaningful step down from
   body, distinct but still warm/subtle). Dark: var(--bcc-surface-2)
   = #251c16, a soft lift from body #100c08.
   Logo filter LEFT AS WAS — source PNGs are white, so invert(1) in
   light mode flips them to black (visible on cream), and the existing
   components.css dark-mode override removes the invert so they stay
   white on dark. Don't touch this without testing both modes. */
.bcc-stockists {
	/* Cheese & Onion mustard wash — "find us at your local" reads as
	   warm-amber pub lighting on the paper canvas. */
	--bcc-section-accent: var(--bcc-flav-cheese-deep);
	--bcc-section-accent-dark: #e6c781;
	padding: var(--bcc-gap-7) var(--bcc-edge);
	background-color: transparent;
	background-image: linear-gradient(var(--bcc-wash-cheese), var(--bcc-wash-cheese));
	border-top: 1px solid var(--bcc-rule);
	border-bottom: 1px solid var(--bcc-rule);
	position: relative; overflow: hidden;
}
.bcc-stockists .bcc-stockists-label { color: var(--bcc-flav-cheese-deep); }
[data-theme="dark"] .bcc-stockists .bcc-stockists-label { color: #e6c781; }
/* alpha.44d (2026-05-17): damask underlay added at whisper strength —
   stockists wall was the only section on the page without the brand
   texture, which made it read as "missing" against neighbouring sections
   that do carry the pattern. Mask-based + tint tokens, same architecture
   as everything else. */
.bcc-stockists::before {
	background-color: var(--bcc-damask-tint-whisper);
	-webkit-mask-size: var(--bcc-damask-tile-md);
	mask-size: var(--bcc-damask-tile-md);
}
.bcc-stockists-inner { max-width: var(--bcc-container-wide); margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.bcc-stockists-label {
	font-family: var(--bcc-font-sub);
	text-transform: uppercase; letter-spacing: .18em;
	font-size: .8rem; color: var(--bcc-ink-subtle);
	margin-bottom: var(--bcc-gap-5);
}
.bcc-stockists-row {
	display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
	gap: var(--bcc-gap-7);
}
.bcc-stockists-row img {
	height: 38px; width: auto; max-width: 160px;
	filter: invert(1) opacity(.7);
	transition: filter .25s var(--bcc-ease), opacity .25s var(--bcc-ease);
}
.bcc-stockists-row a:hover img { filter: invert(1) opacity(1); }
/* Dark-mode logo treatment is overridden in components.css line ~1996
   (removes the invert so white-source PNGs stay white on the dark band). */

/* ── 15a. Origin slab (homepage — the editorial dark moment) ──────────
   alpha.11: warm-black surface with feature-level damask. Threads the
   founder story into the homepage flow without being a sales pitch.
   Sits between Three Ranges and Reviews. The cream-on-ink composition
   matches the Amazon storefront's brand asset language. */
.bcc-origin {
	padding: var(--bcc-gap-8) var(--bcc-edge);
	background-color: var(--bcc-ink-rich);
	background-image: url('paper-dark.jpg');
	background-size: 350px;
	background-repeat: repeat;
	/* alpha.42: --bcc-cream-stable (stable) not --bcc-accent-soft (remaps
	   to dark brown in dark mode for soft-bg uses). The origin slab is
	   always a dark surface in both modes (ink-rich in light, bark
	   in dark), so its text colour must read as cream in both. */
	color: var(--bcc-cream-stable);
	position: relative; overflow: hidden;
	text-align: center;
}
.bcc-origin::before {
	background-color: var(--bcc-damask-tint-on-dark-tonal);
	-webkit-mask-size: var(--bcc-damask-tile-xl);
	mask-size: var(--bcc-damask-tile-xl);
}
.bcc-origin__inner {
	position: relative; z-index: 1;
	max-width: 44rem; margin: 0 auto;
}
.bcc-origin .bcc-eyebrow {
	color: var(--bcc-accent-wash);
	opacity: .85;
}
.bcc-origin h2 {
	color: #fff;
	margin-bottom: var(--bcc-gap-5);
}
.bcc-origin h2 em { color: var(--bcc-accent-wash); font-style: normal; }
/* alpha.27: lede paragraphs left-aligned. h2 + eyebrow stay centred for
   the editorial intro, but reading-flow paragraphs scan more naturally
   when they're left-aligned (centred multi-line copy makes the eye hunt
   for each line's starting position). */
.bcc-origin__lede {
	font-size: var(--bcc-body-lg);
	line-height: 1.6;
	margin-bottom: var(--bcc-gap-4);
	/* alpha.42: --bcc-cream-stable not --bcc-accent-soft (same reason as
	   the .bcc-origin base above). Dark-mode override below brightens
	   to #f7e8d4 + opacity 1 on bark. */
	color: var(--bcc-cream-stable);
	opacity: .9;
	text-align: left;
}
.bcc-origin__lede:last-of-type { margin-bottom: var(--bcc-gap-6); }
.bcc-origin__cta { margin-top: var(--bcc-gap-4); }
/* alpha.13: in dark mode the origin slab's ink-rich surface is too close
   to the page bg to differentiate. Switch to bark so it reads as a
   distinct interstitial.
   2026-05-19: use background-color (not the `background:` shorthand)
   so the paper-dark.jpg texture set at line 1483 survives this override.
   The shorthand resets background-image to none, which was leaving the
   origin slab as flat charcoal in dark mode while it had paper grain
   in light mode. */
[data-theme="dark"] .bcc-origin { background-color: var(--bcc-deep); }

/* alpha.11: pullquote used in long-form story copy. Cutive Mono italic in
   bark, set off by accent left rule. */
.bcc-story-pullquote {
	border-left: 3px solid var(--bcc-accent-wash);
	padding: var(--bcc-gap-4) 0 var(--bcc-gap-4) var(--bcc-gap-6);
	margin: var(--bcc-gap-7) 0;
	max-width: 38em;
}
/* 2026-05-19: the drop-cap rule .bcc-story-body p:first-child::first-letter
   (4rem floated Y) was leaking onto the pullquote's <p> — that <p> IS the
   first-child of its <blockquote> parent, so the cascading selector
   matched and threw a giant accent first-letter into the running quote
   text. Hard to read. Reset ::first-letter here to plain inheritance so
   the pullquote renders as continuous prose. */
.bcc-story-pullquote p::first-letter {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	float: none;
	padding: 0;
	color: inherit;
}
.bcc-story-pullquote p {
	/* Display font (ITC American Typewriter Condensed) is loaded as
	   regular-style only — `font-style: italic` was rendering as faux-
	   italic (browser slants the regular glyphs), which on a condensed
	   typewriter face reads as awkward. Switched to Karla italic (the
	   body font has a true italic axis) — readable at scale, and the
	   font-shift itself still reads as "this is a quote". Sized up for
	   proper pullquote impact. */
	font-family: var(--bcc-font-body); font-style: italic;
	font-weight: 400;
	font-size: clamp(1.4rem, 1.8vw + 1rem, 1.95rem);
	color: var(--bcc-accent-text);
	line-height: 1.4;
	margin: 0;
}
.bcc-story-pullquote cite {
	display: block;
	margin-top: var(--bcc-gap-4);
	font-family: var(--bcc-font-sub); font-weight: 600;
	font-size: .78rem; font-style: normal;
	text-transform: uppercase; letter-spacing: .14em;
	color: var(--bcc-ink-subtle);
}

/* ── 16. CTA band (dark, damask overlay) ─────────────────────────── */

.bcc-cta-band {
	/* Final CTA on every page — heritage British crimson on the dark
	   slab (chilli-deep, the proper red, not the pink-rendering full
	   chilli). Pairs naturally with charcoal (red-on-black sign
	   painting). The button below picks up the section accent. */
	--bcc-section-accent: var(--bcc-flav-chilli-deep);
	--bcc-section-accent-dark: #d99e90;
	padding: var(--bcc-gap-8) var(--bcc-edge);
	background-color: var(--bcc-deep);
	background-image: url('paper-dark.jpg');
	background-size: 350px;
	background-repeat: repeat;
	color: var(--bcc-cream-stable);
	text-align: center;
	position: relative; overflow: hidden;
}
.bcc-cta-band::before {
	background-color: var(--bcc-damask-tint-on-dark-feature);
	-webkit-mask-size: var(--bcc-damask-tile-lg);
	mask-size: var(--bcc-damask-tile-lg);
}
.bcc-cta-band > * { position: relative; z-index: 1; }
.bcc-cta-band h2 { color: #fff; margin-bottom: var(--bcc-gap-5); }
.bcc-cta-band h2 .bcc-highlight { color: var(--bcc-accent-wash); font-style: normal; font-weight: normal; }
/* alpha.44f (2026-05-18): sub-copy under the H2 — used to be an inline
   style="max-width:36em;margin:0 auto 2rem;opacity:.8" on each of the
   4 template duplicates. Lifted out when bcc5_render_delivery_cta_band()
   helper was extracted. */
.bcc-cta-band__sub { max-width: 36em; margin: 0 auto var(--bcc-gap-6); opacity: .8; }
/* alpha.13: button on the bark CTA band needs contrast — was bark-
   on-bark, near-invisible. Override to accent fill + bark ink,
   hover lifts to cream. */
/* alpha.42 (2026-05-17): colour reverted to literal var(--bcc-deep)
   not var(--bcc-accent-text) — the button's gold bg stays gold in both
   modes, so the text must stay bark. The systemic --bcc-accent-text
   sweep was the wrong tool here (made it gold-on-gold in dark mode). */
/* CTA-band button takes the Sweet Chilli accent so the closing
   action has a "go" colour against the charcoal slab. Hover lifts to
   pure white for the satisfying flash of contrast. */
.bcc-cta-band .bcc-btn--accent {
	background: var(--bcc-flav-chilli);
	color: #fff;
	border-color: var(--bcc-flav-chilli);
}
.bcc-cta-band .bcc-btn--accent:hover {
	background: #fff;
	color: var(--bcc-flav-chilli-deep);
	border-color: #fff;
}
.bcc-cta-band h2 .bcc-highlight,
.bcc-cta-band h2 em {
	color: #d99e90;
}

/* ── 17. Footer ──────────────────────────────────────────────────── */

.bcc-footer {
	/* Footer paper. Light mode uses paper-light.jpg (cream); dark mode
	   override uses paper-dark.jpg. Same direct-render approach as body. */
	background-color: var(--bcc-surface-2);
	background-image: url('paper-light.jpg');
	background-size: 350px;
	background-repeat: repeat;
	color: var(--bcc-ink-subtle);
	padding: var(--bcc-gap-7) var(--bcc-edge) var(--bcc-gap-5);
	border-top: 1px solid var(--bcc-rule);
	position: relative; overflow: hidden;
}
[data-theme="dark"] .bcc-footer {
	background-image: url('paper-dark.jpg');
}
/* alpha.44c (2026-05-17): symmetric footer depth across modes. In light
   mode, --bcc-surface-2 (#f2ebde) sits a touch DARKER than the cream body
   bg — footer feels grounded. In dark mode the default --bcc-surface-2
   (#251c16) sits LIGHTER than the near-black body bg, which inverted the
   direction. Pin dark-mode footer to a deeper black so it always reads
   as "one tonal step down from body" like light mode does.
   2026-05-19: use background-color (not the `background:` shorthand)
   so the paper-dark.jpg texture set at line 1627 survives this override.
   The shorthand was resetting background-image to none, leaving the
   dark-mode footer as flat charcoal while the light-mode footer had
   paper grain. */
[data-theme="dark"] .bcc-footer { background-color: var(--bcc-footer-bg-dark); }
/* alpha.10: damask underlay so the footer has the brand texture too.
   alpha.44c (2026-05-17): mask-based for tonal balance — see .bcc-cta-band. */
.bcc-footer::before {
	background-color: var(--bcc-damask-tint-whisper);
	-webkit-mask-size: var(--bcc-damask-tile-lg);
	mask-size: var(--bcc-damask-tile-lg);
}
.bcc-footer-inner,
.bcc-footer-bottom { position: relative; z-index: 1; }
.bcc-footer-inner {
	max-width: var(--bcc-container-wide); margin: 0 auto;
	display: grid; gap: var(--bcc-gap-6); grid-template-columns: 1fr;
}
@media (min-width: 720px) { .bcc-footer-inner { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--bcc-gap-7); } }
.bcc-footer h4 {
	font-family: var(--bcc-font-sub);
	font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
	font-size: .78rem; color: var(--bcc-ink); margin-bottom: var(--bcc-gap-4);
}
.bcc-footer-col a,
.bcc-footer-brand a:not(.bcc-footer-social a) { color: var(--bcc-ink-subtle); display: block; padding: 4px 0; font-size: .92rem; }
.bcc-footer-col a:hover { color: var(--bcc-accent-text); }
.bcc-footer-brand p { font-size: .92rem; max-width: 28em; line-height: 1.55; margin-bottom: var(--bcc-gap-3); }
.bcc-footer-brand .bcc-tagline {
	font-family: var(--bcc-font-display); font-size: 1.4rem;
	color: var(--bcc-ink); text-transform: uppercase;
	margin-bottom: var(--bcc-gap-2);
	letter-spacing: .01em;
}
/* alpha.10: social icons row */
.bcc-footer-social {
	display: inline-flex; gap: .55rem;
	margin-top: var(--bcc-gap-2);
}
.bcc-footer-social a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px;
	border: 1px solid var(--bcc-rule); border-radius: 50%;
	color: var(--bcc-accent-text); opacity: .8;
	transition: opacity .15s var(--bcc-ease), background-color .15s var(--bcc-ease), color .15s;
	padding: 0;
}
.bcc-footer-social a:hover {
	opacity: 1; background: var(--bcc-deep); color: var(--bcc-accent-wash);
	border-color: var(--bcc-deep);
}
.bcc-footer-social svg { width: 15px; height: 15px; }

.bcc-footer-bottom {
	max-width: var(--bcc-container-wide); margin: var(--bcc-gap-7) auto 0;
	padding-top: var(--bcc-gap-4); border-top: 1px solid var(--bcc-rule);
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--bcc-gap-4);
	font-size: .78rem;
}
.bcc-footer-meta {
	display: inline-flex; flex-wrap: wrap; align-items: center; gap: .55rem;
	color: var(--bcc-ink-subtle);
}
.bcc-footer-meta a { color: var(--bcc-ink-subtle); padding: 0; display: inline; }
.bcc-footer-meta a:hover { color: var(--bcc-accent-text); }
.bcc-footer-meta__sep { opacity: .4; }

/* ── 18. Page-content fallback ───────────────────────────────────── */

.bcc-page-content {
	padding: var(--bcc-gap-8) var(--bcc-edge);
	max-width: 44rem; margin: 0 auto;
}
.bcc-page-content h1 { margin-bottom: var(--bcc-gap-5); }
.bcc-page-content p { font-size: var(--bcc-body-lg); margin-bottom: var(--bcc-gap-4); }

/* ── 19. Floating basket (FAB) ──────────────────────────────────── */

.bcc-fab {
	position: fixed; bottom: 1rem; right: 1rem; z-index: 90;
	font-family: var(--bcc-font-sub);
	/* alpha.11: opacity transition for the scroll-to-bottom fade-out */
	transition: opacity .25s var(--bcc-ease), transform .25s var(--bcc-ease);
}
.bcc-fab.is-faded {
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
}
.bcc-fab__toggle {
	display: inline-flex; align-items: center; gap: .6rem;
	padding: .85rem 1.25rem;
	/* alpha.9: FAB shifts from bark → ink-rich so it doesn't compete
	   visually with the new bark primary buttons. Reads as structural
	   "your basket lives here" rather than "another CTA". */
	/* alpha.42 (2026-05-17): text colour uses --bcc-cream-stable not
	   --bcc-accent-soft so the FAB stays cream in both modes (the
	   -soft var remaps to dark brown in dark mode for bg uses). */
	background: var(--bcc-ink-rich); color: var(--bcc-cream-stable);
	border-radius: var(--bcc-radius-pill); border: none;
	cursor: pointer; box-shadow: 0 14px 32px rgba(26,20,17,.32);
	font-weight: 600;
	text-transform: uppercase; letter-spacing: .06em; font-size: .85rem;
	transition: transform .15s var(--bcc-ease), box-shadow .15s var(--bcc-ease);
}
.bcc-fab__toggle:hover { transform: translateY(-1px); box-shadow: 0 18px 38px rgba(26,20,17,.42); }
.bcc-fab__toggle svg { width: 18px; height: 18px; }
.bcc-fab__count {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 22px; height: 22px; padding: 0 7px;
	background: var(--bcc-accent-wash); color: var(--bcc-ink-rich);
	border-radius: var(--bcc-radius-pill);
	font-size: .72rem; font-weight: 700; line-height: 1;
}
.bcc-fab__subtotal { color: var(--bcc-accent-wash); font-weight: 700; }

.bcc-fab__panel {
	position: absolute;
	bottom: calc(100% + .75rem); right: 0;
	width: min(380px, calc(100vw - 2rem));
	background: var(--bcc-surface);
	border: 1px solid var(--bcc-rule);
	border-radius: var(--bcc-radius-lg);
	box-shadow: 0 24px 60px rgba(28,24,22,.22);
	padding: 1.25rem;
	transform: translateY(8px) scale(.98);
	opacity: 0; pointer-events: none;
	transform-origin: bottom right;
	transition: transform .22s var(--bcc-ease), opacity .18s var(--bcc-ease);
}
.bcc-fab.is-open .bcc-fab__panel {
	transform: translateY(0) scale(1);
	opacity: 1; pointer-events: auto;
}
.bcc-fab__panel-head {
	display: flex; justify-content: space-between; align-items: center;
	margin-bottom: var(--bcc-gap-4);
}
.bcc-fab__panel-head h3 { font-size: 1.25rem; margin: 0; }
.bcc-fab__close {
	background: none; border: 0; cursor: pointer;
	color: var(--bcc-ink-subtle); font-size: 1.4rem; line-height: 1;
	padding: 0 .25rem;
}
.bcc-fab__close:hover { color: var(--bcc-ink); }

.bcc-fab__empty { color: var(--bcc-ink-subtle); text-align: center; padding: 2rem 0; }
.bcc-fab__empty-title {
	font-family: var(--bcc-font-display); font-size: 1.4rem;
	color: var(--bcc-accent-text); margin: 0 0 .25rem; text-transform: uppercase;
}
.bcc-fab__empty-sub { font-size: .9rem; margin-bottom: 1.25rem; }

.bcc-fab__items {
	list-style: none; padding: 0; margin: 0 0 var(--bcc-gap-4);
	max-height: 320px; overflow-y: auto;
}
/* FAB items now include thumbnails + flavour-colour accent */
.bcc-fab__item {
	display: grid;
	grid-template-columns: 48px 1fr auto auto;
	grid-template-areas: "img body line remove";
	gap: .6rem .75rem;
	padding: .7rem 0;
	border-bottom: 1px solid var(--bcc-rule);
	align-items: center;
}
.bcc-fab__item:last-child { border-bottom: 0; }
.bcc-fab__item-img {
	grid-area: img;
	width: 48px; height: 48px;
	border-radius: var(--bcc-radius);
	/* alpha.9: each item thumb picks up the soft bag colour as backdrop
	   rather than always-grey. 4px left band reads as a brand tab. */
	background: var(--flavour-soft, var(--bcc-surface-2));
	object-fit: contain;
	padding: 4px;
	border-left: 4px solid var(--flavour-color, var(--bcc-accent));
}
.bcc-fab__item-body { grid-area: body; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bcc-fab__item-name {
	font-family: var(--bcc-font-sub); font-weight: 700;
	color: var(--bcc-ink); font-size: .9rem; line-height: 1.2;
	letter-spacing: -0.005em;
}
.bcc-fab__item-flavour {
	font-family: var(--bcc-font-sub); font-weight: 500;
	color: var(--flavour-color, var(--bcc-accent));
	font-size: .8rem; line-height: 1.1;
}
.bcc-fab__item-meta { font-size: .7rem; color: var(--bcc-ink-subtle); }
.bcc-fab__item-line {
	grid-area: line;
	font-family: var(--bcc-font-display); font-size: 1.05rem;
	color: var(--bcc-accent-text);
	white-space: nowrap;
}
.bcc-fab__item-remove {
	grid-area: remove;
	background: none; border: 0; cursor: pointer;
	color: var(--bcc-ink-subtle); font-size: 1.1rem;
	padding: .25rem .4rem; text-decoration: none;
}
.bcc-fab__item-remove:hover { color: var(--bcc-error-text); }
/* alpha.26: gentle fade while the AJAX remove is in flight so the user
   gets immediate feedback before the panel-body re-renders. */
.bcc-fab__item.is-removing { opacity: 0; transform: translateX(-10px); transition: opacity .18s, transform .18s; pointer-events: none; }

.bcc-fab__sub {
	display: flex; justify-content: space-between;
	padding: var(--bcc-gap-3) 0;
	border-top: 1px solid var(--bcc-rule);
	border-bottom: 1px solid var(--bcc-rule);
	margin-bottom: var(--bcc-gap-4);
}
.bcc-fab__sub-label {
	font-family: var(--bcc-font-sub); text-transform: uppercase;
	letter-spacing: .04em; font-size: .85rem; color: var(--bcc-ink-subtle);
}
.bcc-fab__sub-val { font-family: var(--bcc-font-sub); font-weight: 700; font-size: 1.15rem; }
.bcc-fab__delivery-line {
	text-align: center; font-size: .75rem;
	color: var(--bcc-accent); margin: 0 0 var(--bcc-gap-4);
	font-family: var(--bcc-font-sub); letter-spacing: .04em;
	text-transform: uppercase;
}

.bcc-fab__actions { display: flex; flex-direction: column; gap: .5rem; }
.bcc-fab__actions .bcc-btn { justify-content: center; width: 100%; }

@media (max-width: 480px) {
	.bcc-fab { bottom: .5rem; right: .5rem; }
	.bcc-fab__toggle { padding: .7rem 1rem; font-size: .8rem; }
}

/* ── Cookie consent banner ────────────────────────────────────────
   2026-05-20: hidden by default, JS toggles .is-visible on first
   visit only (no flash for returning visitors with stored decision).
   Sits bottom-left of the viewport, leaves the FAB's bottom-right
   corner alone. Bg uses --bcc-deep (the brand's deep-charcoal,
   matches the front-end CTA band + utility countdown). Accept button
   in pale-crimson wash (matches the bold countdown highlights). */
.bcc-cookie-consent {
	position: fixed;
	bottom: 1.5rem;
	left: 1.5rem;
	right: 1.5rem;
	z-index: 1900; /* below FAB (z 2000), above page content */
	max-width: 32rem;
	background: rgba(28, 26, 22, 0.92);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-radius: var(--bcc-radius-lg, 14px);
	padding: 1.1rem 1.4rem;
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
	color: var(--bcc-cream-stable);
	display: none;
}
.bcc-cookie-consent.is-visible {
	display: block;
	animation: bcc-cookie-in .35s var(--bcc-ease) both;
}
@keyframes bcc-cookie-in {
	from { transform: translateY(20px); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}
.bcc-cookie-consent__text {
	font-family: var(--bcc-font-body);
	font-size: .9rem;
	line-height: 1.55;
	margin: 0 0 .85rem;
	opacity: .92;
}
.bcc-cookie-consent__text a {
	color: var(--bcc-accent-wash);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.bcc-cookie-consent__text a:hover { opacity: .8; }
.bcc-cookie-consent__actions {
	display: flex;
	gap: .6rem;
	align-items: center;
}
.bcc-cookie-consent__accept {
	font-family: var(--bcc-font-sub);
	font-weight: 600;
	font-size: .82rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	padding: .6rem 1.2rem;
	border-radius: var(--bcc-radius-pill);
	background: var(--bcc-accent-wash);
	color: var(--bcc-deep);
	border: 0;
	cursor: pointer;
	transition: background .15s var(--bcc-ease);
}
.bcc-cookie-consent__accept:hover { background: var(--bcc-cream-stable); }
.bcc-cookie-consent__decline {
	font-family: var(--bcc-font-sub);
	font-weight: 500;
	font-size: .82rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: rgba(244, 241, 230, 0.65);
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: .6rem .8rem;
	transition: color .15s var(--bcc-ease);
}
.bcc-cookie-consent__decline:hover { color: var(--bcc-cream-stable); }
@media (max-width: 480px) {
	.bcc-cookie-consent {
		bottom: .75rem;
		left: .75rem;
		right: .75rem;
		padding: .9rem 1.05rem;
	}
	.bcc-cookie-consent__text { font-size: .82rem; }
	.bcc-cookie-consent__accept,
	.bcc-cookie-consent__decline { padding: .55rem 1rem; font-size: .75rem; }
}

/* Pulse + count-pop animations */
@keyframes bcc-fab-pulse {
	0%   { transform: scale(1); }
	30%  { transform: scale(1.18) rotate(-4deg); }
	55%  { transform: scale(1.08) rotate(2deg); }
	100% { transform: scale(1); }
}
.bcc-fab.is-pulsing .bcc-fab__toggle { animation: bcc-fab-pulse .65s var(--bcc-ease); }

@keyframes bcc-count-pop {
	0%   { transform: scale(1); background: var(--bcc-accent-wash); }
	40%  { transform: scale(1.4); background: #fff; color: var(--bcc-deep); } /* count-pop flash frame: white bg in both modes */
	100% { transform: scale(1); background: var(--bcc-accent-wash); }
}
.bcc-fab__count.is-bumped { animation: bcc-count-pop .5s var(--bcc-ease); }

/* Toast — alpha.17: better depth + accent accent stripe on the left.
   Sits above the FAB; error variant in claret, success in bark. */
.bcc-toast {
	position: fixed; bottom: 5rem; right: 1rem; z-index: 9000;
	background: var(--bcc-claret); color: #fff;
	padding: .85rem 1.1rem .8rem 1.4rem;
	border-radius: var(--bcc-radius-lg);
	font-family: var(--bcc-font-sub); font-weight: 500;
	font-size: .9rem; line-height: 1.4;
	box-shadow: 0 18px 38px rgba(26,20,17,.28), 0 2px 8px rgba(26,20,17,.18);
	transform: translateY(24px) scale(.96); opacity: 0;
	transition:
		transform .32s cubic-bezier(.2,.85,.25,1.1),
		opacity .25s var(--bcc-ease);
	max-width: 360px;
	position: fixed;
	overflow: hidden;
}
.bcc-toast::before {
	content: '';
	position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
	background: var(--bcc-accent-wash);
}
.bcc-toast.is-visible { transform: translateY(0) scale(1); opacity: 1; }
.bcc-toast.is-success { background: var(--bcc-deep); }
.bcc-toast.is-success::before { background: var(--bcc-accent-wash); }

/* Fly-to-basket animation */
.bcc-fly-img {
	position: fixed; z-index: 9999; pointer-events: none;
	will-change: transform, left, top, width, height, opacity;
	transition:
		left .65s cubic-bezier(.42, 0, .35, 1),
		top  .65s cubic-bezier(.42, 0, .35, 1),
		width .65s cubic-bezier(.42, 0, .35, 1),
		height .65s cubic-bezier(.42, 0, .35, 1),
		opacity .65s cubic-bezier(.42, 0, .35, 1),
		transform .65s cubic-bezier(.42, 0, .35, 1);
	border-radius: var(--bcc-radius);
	object-fit: contain;
	/* alpha.46 (2026-05-18): drop-shadow removed — fly img has a transform
	   transition (.65s) + .is-flying scale/rotate, so Safari renders the
	   filter against the layer rectangle once the fly starts. */
}
.bcc-fly-img.is-flying { opacity: .25; transform: scale(.4) rotate(-12deg); }

/* ── 20. Badges (product cards + PDP) ─────────────────────────────── */

.bcc-badges {
	display: flex; flex-direction: column; align-items: flex-start;
	gap: 6px; position: absolute; top: 10px; left: 10px;
	z-index: 2;
}
.bcc-badges--pdp { top: 14px; left: 14px; }

.bcc-badge {
	font-family: var(--bcc-font-sub);
	font-size: .68rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-weight: 600;
	padding: .35rem .65rem .25rem;
	border-radius: var(--bcc-radius-pill);
	color: #fff;
	white-space: nowrap;
	box-shadow: 0 2px 6px rgba(0,0,0,.1);
}
.bcc-badge--sale       { background: var(--bcc-claret); }
.bcc-badge--recyclable { background: #4a6b3f; }
.bcc-badge--paper      { background: var(--bcc-accent); }
.bcc-badge--new        { background: var(--bcc-deep); }
.bcc-badge--low        { background: #cf8500; }
/* Dark-mode: .bcc-badge--paper carries hardcoded white text. With --bcc-accent
   lifted to pale crimson in dark mode, white-on-pale-pink fails contrast.
   Switch to the deep variant (full Sweet Chilli) so the badge keeps presence
   with its white text. .bcc-badge--new + others use the lifted --bcc-deep
   token directly and read fine without explicit overrides. */
[data-theme="dark"] .bcc-badge--paper { background: var(--bcc-accent-deep); }

/* ── 21. Crumbs ────────────────────────────────────────────────────── */

/* alpha.13: breadcrumb refinement. Was reading as an awkward white strip
   between header and hero. Now: damask matches the section below (tonal),
   accent dot separators replace generic "/", current-page item gets
   the bark treatment, and a thin accent underline marks the bottom
   edge so the strip looks intentional rather than accidental.
   alpha.22: split into BAND (full-width, holds horizontal padding + damask
   + underline decoration) and INNER (max-width-wide, flush). This way the
   breadcrumb's visible content extent aligns exactly with the nav above
   instead of sitting 2×gap-5 inside it. */
.bcc-crumbs-band {
	/* Transparent — lets the body's paper texture flow continuously
	   through the breadcrumb band. The accent underline ::after below
	   still gives a visual cap so the band feels intentional. */
	padding: 0 var(--bcc-edge);
	position: relative;
	background: transparent;
}
.bcc-crumbs-band::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1px;
	background: linear-gradient(to right, transparent 0%, rgba(217,160,91,0.55) 50%, transparent 100%);
	pointer-events: none; z-index: 1;
}
.bcc-crumbs {
	max-width: var(--bcc-container-wide);
	margin: 0 auto;
	padding: var(--bcc-gap-4) 0;
	font-family: var(--bcc-font-sub); font-weight: 600;
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .16em;
	color: var(--bcc-ink-subtle);
	position: relative;
	z-index: 1;
}
.bcc-crumbs ol {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
}
.bcc-crumbs li:not(:last-child)::after {
	content: '·';
	color: var(--bcc-accent-wash);
	font-weight: 700; opacity: .9;
	margin-left: .5rem; font-size: 1.1em;
	line-height: 0; transform: translateY(-1px);
	display: inline-block;
}
/* .bcc-crumbs a now shares the unified content-link treatment further
   down — gradient slide-in underline on hover. The old border-bottom
   transition is removed here to avoid stacking a 1px transparent border
   on top of the new gradient underline. */
.bcc-crumbs span[aria-current] { color: var(--bcc-accent-text); }

/* ── 39. Info pages — Delivery / Contact / Privacy (alpha.24) ─────────
   Shared chrome for the three info pages: hero block, section heading
   with accent accent bar (matches PDP detail-section), card grids,
   long-form prose, callout band, flash messages. */

/* alpha.47 (2026-05-18): damask added so Contact/Delivery heroes match
   .bcc-story-hero / .bcc-archive-hero. position+overflow set so the
   absolutely-positioned ::before fills the section; __inner gets z-index
   to sit above the damask layer. */
.bcc-info-hero {
	padding: var(--bcc-gap-8) var(--bcc-edge) var(--bcc-gap-7);
	background: transparent;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.bcc-info-hero::before {
	background-color: var(--bcc-damask-tint-whisper);
	-webkit-mask-size: var(--bcc-damask-tile-md);
	mask-size: var(--bcc-damask-tile-md);
	z-index: 0;
}
.bcc-info-hero__inner {
	max-width: 40rem;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}
.bcc-info-hero__lede {
	/* Matches .bcc-story-hero__lede so every page (Contact, Delivery,
	   Privacy, Our Story, FAQ) gets the same accent-coloured lede
	   treatment under its h1. Previously this was plain ink-subtle,
	   making the contact-style pages feel inconsistent with the rest. */
	font-family: var(--bcc-font-sub); font-weight: 500;
	font-size: clamp(1.1rem, 1.3vw + 1rem, 1.45rem);
	color: var(--bcc-accent);
	max-width: 30em;
	margin: var(--bcc-gap-4) auto 0;
	text-transform: none;
	line-height: 1.45;
}
[data-theme="dark"] .bcc-info-hero__lede {
	color: var(--bcc-accent-wash);
}

/* alpha.47 (2026-05-18): damask added so body sections match .bcc-faq.
   See .bcc-info-hero block above for the position+overflow+inner-z-index
   pattern. */
.bcc-info-section {
	padding: var(--bcc-gap-7) var(--bcc-edge);
	position: relative;
	overflow: hidden;
}
.bcc-info-section::before {
	background-color: var(--bcc-damask-tint-whisper);
	-webkit-mask-size: var(--bcc-damask-tile-lg);
	mask-size: var(--bcc-damask-tile-lg);
	z-index: 0;
}
.bcc-info-section--tight { padding-top: 0; padding-bottom: var(--bcc-gap-4); }
.bcc-info-section__inner {
	max-width: var(--bcc-container-wide);
	margin: 0 auto;
	position: relative;
	z-index: 1;
}
.bcc-info-section__title {
	font-family: var(--bcc-font-display);
	font-size: 1.7rem;
	line-height: 1.1;
	color: var(--bcc-accent-text);
	margin: 0 0 var(--bcc-gap-5);
	padding-bottom: var(--bcc-gap-3);
	border-bottom: 1px solid var(--bcc-rule);
	display: flex; align-items: baseline; gap: .65rem;
}
.bcc-info-section__title::before {
	content: '';
	width: 3px; height: 1.1rem;
	background: var(--bcc-accent-wash);
	border-radius: 2px;
	align-self: center;
	flex-shrink: 0;
}

.bcc-info-grid {
	display: grid;
	gap: var(--bcc-gap-4);
	grid-template-columns: 1fr;
}
@media (min-width: 600px) {
	.bcc-info-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

.bcc-info-card {
	background: var(--bcc-surface);
	border: 1px solid var(--bcc-rule);
	border-radius: var(--bcc-radius);
	padding: var(--bcc-gap-5);
	display: flex; flex-direction: column;
	gap: var(--bcc-gap-2);
}
.bcc-info-card__icon {
	width: 36px; height: 36px;
	color: var(--bcc-accent-wash);
	margin-bottom: var(--bcc-gap-2);
}
.bcc-info-card__icon svg { width: 100%; height: 100%; display: block; }
.bcc-info-card__title {
	font-family: var(--bcc-font-sub);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: .82rem;
	/* 2026-05-20: explicit line-height. Without it the h3 base rule's
	   line-height: 1.05 (tuned for display headings) applied here too,
	   leaving tracked uppercase card titles cramped when they wrap to
	   two lines. 1.4 gives breathing room between cap-height lines. */
	line-height: 1.4;
	color: var(--bcc-accent);
	margin: 0;
}
.bcc-info-card__body {
	font-family: var(--bcc-font-body);
	font-size: var(--bcc-body);
	line-height: 1.55;
	color: var(--bcc-ink);
	margin: 0;
}

/* 2026-05-19: linked variant of .bcc-info-card. Used on /delivery/ for
   the trade-orders callout that routes to /hospitality/. Anchor element
   so the whole card is clickable; hover lifts the border + icon tint. */
a.bcc-info-card--link {
	color: inherit;
	text-decoration: none;
	transition: border-color .15s var(--bcc-ease), transform .15s var(--bcc-ease);
}
a.bcc-info-card--link:hover {
	border-color: var(--bcc-accent);
	transform: translateY(-2px);
}
a.bcc-info-card--link:hover .bcc-info-card__icon { color: var(--bcc-accent); }
.bcc-info-card__arrow {
	display: inline-block;
	margin-left: .25em;
	transition: transform .15s var(--bcc-ease);
}
a.bcc-info-card--link:hover .bcc-info-card__arrow { transform: translateX(3px); }

.bcc-info-detail {
	display: grid;
	gap: var(--bcc-gap-5);
	grid-template-columns: 1fr;
}
@media (min-width: 720px) {
	.bcc-info-detail { grid-template-columns: repeat(2, 1fr); gap: var(--bcc-gap-6) var(--bcc-gap-7); }
}
.bcc-info-detail__item h3 {
	font-family: var(--bcc-font-sub);
	font-weight: 700;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--bcc-accent-text);
	margin: 0 0 var(--bcc-gap-2);
}
.bcc-info-detail__item p {
	font-family: var(--bcc-font-body);
	font-size: var(--bcc-body);
	line-height: 1.55;
	color: var(--bcc-ink);
	margin: 0;
}
.bcc-info-detail__item a {
	color: var(--bcc-accent);
	border-bottom: 1px solid var(--bcc-accent-wash);
}
.bcc-info-detail__item a:hover { color: var(--bcc-link-hover); }

.bcc-info-callout {
	padding: var(--bcc-gap-7) var(--bcc-edge);
	background: var(--bcc-surface);
	border-top: 1px solid var(--bcc-rule);
	border-bottom: 1px solid var(--bcc-rule);
	text-align: center;
}
.bcc-info-callout__inner { max-width: 40rem; margin: 0 auto; }
.bcc-info-callout__line {
	font-size: var(--bcc-body-lg);
	margin: var(--bcc-gap-3) 0 var(--bcc-gap-5);
	color: var(--bcc-ink);
}

.bcc-info-flash {
	border-radius: var(--bcc-radius);
	padding: var(--bcc-gap-5);
	border: 1px solid var(--bcc-rule);
	background: var(--bcc-surface);
	max-width: 44rem;
	margin: 0 auto;
}
.bcc-info-flash h2 { margin: 0 0 var(--bcc-gap-3); color: var(--bcc-accent-text); }
.bcc-info-flash p  { margin: 0 0 var(--bcc-gap-3); }
.bcc-info-flash p:last-child { margin: 0; }
.bcc-info-flash--ok { border-color: var(--bcc-accent-wash); }
.bcc-info-flash--err {
	border-color: #c64a4a;
	background: #fceeea;
	color: #6a1a1a;
}

.bcc-info-prose {
	max-width: 44rem;
	margin: var(--bcc-gap-5) auto var(--bcc-gap-8);
	padding: 0 var(--bcc-edge);
	font-family: var(--bcc-font-body);
	font-size: var(--bcc-body);
	line-height: 1.6;
	color: var(--bcc-ink);
}
.bcc-info-prose h2 {
	font-family: var(--bcc-font-display);
	font-size: 1.5rem;
	color: var(--bcc-accent-text);
	margin: var(--bcc-gap-6) 0 var(--bcc-gap-3);
	padding-bottom: var(--bcc-gap-2);
	border-bottom: 1px solid var(--bcc-rule);
}
.bcc-info-prose h2:first-child { margin-top: 0; }
.bcc-info-prose p { margin: 0 0 var(--bcc-gap-4); }
.bcc-info-prose ul {
	margin: 0 0 var(--bcc-gap-4) var(--bcc-gap-4);
	padding: 0;
}
.bcc-info-prose li { margin-bottom: var(--bcc-gap-2); }
.bcc-info-prose strong { color: var(--bcc-accent-text); }
/* alpha.SEO+ (2026-05-18): unified link treatment matching the nav hover
   pattern — no underline by default, animated accent underline slides
   in left-to-right on hover, colour shifts to --bcc-accent-text.
   Uses linear-gradient as background-image (not ::after) because content
   links sit inline inside paragraphs — pseudo-element + absolute
   positioning would force display:inline-block and break line-wrapping.
   The gradient grows from 0% to 100% width along the bottom edge,
   visually identical to the nav's scaleX(0)→scaleX(1) effect. */
/* 2026-05-19: :not(.bcc-btn) exclusion added — see matching note in the
   AP theme. Without it, the button (an <a> with .bcc-btn classes) picked
   up this rule's 1px padding-bottom on top of its own .8rem, giving the
   pill 1px more bottom than top — visible as top-biased text in the
   "Read the full story" ghost button on the PDP story slab. */
.bcc-info-prose a:not(.bcc-btn),
.bcc-faq__answer a:not(.bcc-btn),
.bcc-pdp__story-text a:not(.bcc-btn),
.bcc-pdp__details-inner a:not(.bcc-btn),
.bcc-detail-card a:not(.bcc-btn),
.bcc-story-factory__text a:not(.bcc-btn),
.bcc-crumbs a:not(.bcc-btn) {
	color: var(--bcc-ink);
	text-decoration: none;
	background-image: linear-gradient(var(--bcc-accent-wash), var(--bcc-accent-wash));
	background-size: 0% 1px;
	background-repeat: no-repeat;
	background-position: left bottom;
	padding-bottom: 1px;
	transition: background-size .3s var(--bcc-ease), color .2s var(--bcc-ease);
}
.bcc-info-prose a:not(.bcc-btn):hover,
.bcc-faq__answer a:not(.bcc-btn):hover,
.bcc-pdp__story-text a:not(.bcc-btn):hover,
.bcc-pdp__details-inner a:not(.bcc-btn):hover,
.bcc-detail-card a:not(.bcc-btn):hover,
.bcc-story-factory__text a:not(.bcc-btn):hover,
.bcc-crumbs a:not(.bcc-btn):hover {
	color: var(--bcc-accent-text);
	background-size: 100% 1px;
}
/* Crumbs default colour is the subtle ink (they're nav-like context),
   not body ink — match the rest of the crumb chrome. */
.bcc-crumbs a { color: var(--bcc-ink-subtle); }

/* ── 40. Contact form (alpha.24) ─────────────────────────────────────── */

.bcc-contact-layout {
	display: grid;
	gap: var(--bcc-gap-7);
	grid-template-columns: 1fr;
	align-items: start;
}
@media (min-width: 880px) {
	.bcc-contact-layout { grid-template-columns: 1.5fr 1fr; gap: var(--bcc-gap-7); }
}

.bcc-contact-form {
	background: var(--bcc-surface);
	border: 1px solid var(--bcc-rule);
	border-radius: var(--bcc-radius-lg);
	padding: var(--bcc-gap-6);
	display: flex; flex-direction: column;
	gap: var(--bcc-gap-4);
}
.bcc-contact-form__hp {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.bcc-contact-form__row {
	display: grid; gap: var(--bcc-gap-4);
	grid-template-columns: 1fr;
}
@media (min-width: 600px) { .bcc-contact-form__row { grid-template-columns: 1fr 1fr; } }

.bcc-contact-form__field {
	display: flex; flex-direction: column; gap: 6px;
}
.bcc-contact-form__label {
	font-family: var(--bcc-font-sub);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .78rem;
	color: var(--bcc-ink-subtle);
}
.bcc-contact-form input[type="text"],
.bcc-contact-form input[type="email"],
.bcc-contact-form select,
.bcc-contact-form textarea {
	font-family: var(--bcc-font-body);
	font-size: 1rem;
	color: var(--bcc-ink);
	background: var(--bcc-bg);
	border: 1px solid var(--bcc-rule);
	border-radius: var(--bcc-radius);
	padding: .7rem .9rem;
	width: 100%;
	transition: border-color .15s var(--bcc-ease), background .15s;
}
.bcc-contact-form textarea { resize: vertical; min-height: 140px; }
.bcc-contact-form input:focus,
.bcc-contact-form select:focus,
.bcc-contact-form textarea:focus {
	outline: none;
	border-color: var(--bcc-accent-wash);
	background: var(--bcc-surface);
}
.bcc-contact-form__foot {
	display: flex; flex-direction: column;
	gap: var(--bcc-gap-3);
	margin-top: var(--bcc-gap-2);
}
@media (min-width: 600px) {
	.bcc-contact-form__foot { flex-direction: row; align-items: center; justify-content: space-between; }
}
.bcc-contact-form__small {
	font-family: var(--bcc-font-sub);
	font-size: .78rem;
	color: var(--bcc-ink-subtle);
}

.bcc-contact-aside {
	display: flex; flex-direction: column;
	gap: var(--bcc-gap-4);
}
.bcc-contact-card {
	background: var(--bcc-surface);
	border: 1px solid var(--bcc-rule);
	border-radius: var(--bcc-radius);
	padding: var(--bcc-gap-5);
}
.bcc-contact-card__title {
	font-family: var(--bcc-font-sub);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: .82rem;
	color: var(--bcc-accent);
	margin: 0 0 var(--bcc-gap-2);
}
.bcc-contact-card p { margin: 0 0 var(--bcc-gap-3); color: var(--bcc-ink); font-size: .92rem; }
.bcc-contact-card__link {
	display: inline-block;
	color: var(--bcc-accent-text);
	font-family: var(--bcc-font-sub);
	font-weight: 600;
	border-bottom: 1px solid var(--bcc-accent-wash);
}
.bcc-contact-card__link:hover { color: var(--bcc-link-hover); }
.bcc-contact-card__social {
	display: flex; flex-direction: column; gap: var(--bcc-gap-2);
}
.bcc-contact-card__social a {
	display: inline-flex; align-items: center; gap: .6rem;
	color: var(--bcc-ink);
	font-family: var(--bcc-font-sub);
}
.bcc-contact-card__social a svg {
	width: 20px; height: 20px;
	color: var(--bcc-accent-text);
	flex-shrink: 0;
}
.bcc-contact-card__social a:hover { color: var(--bcc-link-hover); }
.bcc-contact-card__social a:hover svg { color: var(--bcc-accent); }

/* ── 41. Dark-mode fixes (alpha.24) ──────────────────────────────────
   --bcc-deep is used as a text colour in many places (PDP names,
   section titles, nav hover/current, breadcrumb current, card CTAs).
   On dark surfaces those go dark-on-dark and become unreadable. Remap
   to accent for text uses; do NOT remap the variable globally because
   it's also used as a button/section background. */

[data-theme="dark"] .bcc-header {
	/* alpha.42 (2026-05-17): lift the header above the body in dark mode.
	   Was inheriting var(--bcc-bg)=#100c08 (same as body), making the
	   whole top of the page read as one undifferentiated dark mass.
	   --bcc-surface (#1a1411) gives a clear elevated-surface read.
	   2026-05-19: use background-color (not the `background:` shorthand)
	   so the paper-dark.jpg texture set at line 524 survives this override.
	   The shorthand was resetting background-image to none, leaving the
	   dark-mode header (and the sticky nav) as flat charcoal while light
	   mode had paper grain. */
	background-color: var(--bcc-surface);
}
/* alpha.42 (2026-05-17): standalone .bcc-countdown-band dark-mode block
   removed — the countdown is now inside .bcc-utility (bark bg in both
   modes), and its inner styles (accent time/day, cream strong) work
   the same in light + dark. */

[data-theme="dark"] .bcc-star { color: rgba(240, 232, 218, 0.22); } /* faint cream on dark for empty stars */
[data-theme="dark"] .bcc-nav a:hover,
[data-theme="dark"] .bcc-nav a.current {
	color: var(--bcc-accent-wash);
	border-color: var(--bcc-accent-wash);
}

/* alpha.42 (2026-05-17): override group REMOVED. 13 of these selectors
   already use color: var(--bcc-accent-text) which auto-swaps via the new
   token, making the manual override redundant. The other 3 (.bcc-cat-card
   h3, .bcc-story-hero__inner h1, .bcc-info-hero__inner h1) have no
   explicit colour in their base rule — they inherit var(--bcc-ink) which
   auto-inverts to cream in dark mode. Forcing them to accent was the
   wrong colour entirely (gold heading where light mode was black). */

/* alpha.42: second override group ALSO removed — all 8 selectors already
   use color: var(--bcc-accent-text) which auto-swaps in dark mode. */

/* Origin slab text in dark mode: the bark background re-uses the
   same ink-rich treatment as light mode, but the lede was reading too
   muted at opacity .9 on bark. Lift to a brighter cream. */
[data-theme="dark"] .bcc-origin__lede {
	color: var(--bcc-cream-stable);
	opacity: 1;
}
[data-theme="dark"] .bcc-origin h2 { color: #fff; }
/* alpha.44h: .bcc-origin .bcc-eyebrow accent override removed — the
   site-wide [data-theme="dark"] .bcc-eyebrow rule handles it now. Keep
   the opacity:1 lift since the alpha.42 base rule darkens accent text
   inside .bcc-origin. */
[data-theme="dark"] .bcc-origin .bcc-eyebrow { opacity: 1; }

/* Detail-card accent title softens to a brighter accent in dark mode
   for better contrast against the dark card surface. */
[data-theme="dark"] .bcc-detail-card__title,
[data-theme="dark"] .bcc-info-card__title,
[data-theme="dark"] .bcc-contact-card__title {
	color: var(--bcc-accent-wash);
}

/* Error-flash colours in dark mode keep the danger signal but adapt to
   the dark surface so the text stays legible. */
[data-theme="dark"] .bcc-info-flash--err {
	background: #2a1316;
	border-color: #6a2a2a;
	color: #f4cbc1;
}
[data-theme="dark"] .bcc-info-flash--err h2 { color: #f4cbc1; }

/* Contact form inputs adopt the dark surface tokens so they don't show
   as cream-on-dark when the user switches themes. */
[data-theme="dark"] .bcc-contact-form input[type="text"],
[data-theme="dark"] .bcc-contact-form input[type="email"],
[data-theme="dark"] .bcc-contact-form select,
[data-theme="dark"] .bcc-contact-form textarea {
	background: var(--bcc-bg);
	color: var(--bcc-ink);
	border-color: var(--bcc-rule);
}
[data-theme="dark"] .bcc-contact-form input:focus,
[data-theme="dark"] .bcc-contact-form select:focus,
[data-theme="dark"] .bcc-contact-form textarea:focus {
	background: var(--bcc-surface);
}

/* ── 42. Alpha.25 touches ─────────────────────────────────────────────
   Crumbs/header edge padding bump, PDP product-code footer, FAB clear
   button + block CTA, WC notice fallback (no default WC stylesheet
   anymore), countdown highlight. */

/* (alpha.28 override block removed — utility/header/crumbs-band rules
   are now updated in place to use var(--bcc-edge), no override needed.) */

.bcc-pdp__usp [data-bcc-countdown-time],
.bcc-pdp__usp [data-bcc-countdown-day] {
	color: var(--bcc-accent-text);
	font-weight: 600;
}
[data-theme="dark"] .bcc-pdp__usp [data-bcc-countdown-time],
[data-theme="dark"] .bcc-pdp__usp [data-bcc-countdown-day] {
	color: var(--bcc-accent-wash);
}

.bcc-pdp__product-code {
	margin: var(--bcc-gap-7) 0 0;
	padding-top: var(--bcc-gap-4);
	border-top: 1px solid var(--bcc-rule);
	font-family: var(--bcc-font-sub);
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--bcc-ink-subtle);
	text-align: right;
}
.bcc-pdp__product-code span { margin-right: .5rem; }
.bcc-pdp__product-code strong { color: var(--bcc-ink); font-weight: 600; }
[data-theme="dark"] .bcc-pdp__product-code strong { color: var(--bcc-ink); }

.bcc-fab__clear {
	background: transparent;
	border: 0;
	padding: 6px 8px;
	margin: 0;
	font-family: var(--bcc-font-sub);
	font-weight: 600;
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--bcc-ink-subtle);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	border-radius: var(--bcc-radius);
	transition: color .15s var(--bcc-ease), background .15s var(--bcc-ease);
}
.bcc-fab__clear svg { width: 14px; height: 14px; }
.bcc-fab__clear:hover { color: #8a1429; background: rgba(138, 20, 41, 0.06); }
.bcc-fab__clear[hidden] { display: none; }
[data-theme="dark"] .bcc-fab__clear:hover { color: #e58a8a; background: rgba(229, 138, 138, 0.08); }

.bcc-btn--block { display: block; width: 100%; text-align: center; }

.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
	margin: 0 0 var(--bcc-gap-4);
	padding: var(--bcc-gap-3) var(--bcc-gap-4);
	border-radius: var(--bcc-radius);
	border-left: 3px solid var(--bcc-accent-wash);
	background: var(--bcc-surface-2);
	font-family: var(--bcc-font-body);
	font-size: .95rem;
	line-height: 1.45;
	color: var(--bcc-ink);
	list-style: none;
}
.woocommerce-info a,
.woocommerce-message a,
.woocommerce-error a {
	color: var(--bcc-accent);
	border-bottom: 1px solid var(--bcc-accent-wash);
}
.woocommerce-info a:hover,
.woocommerce-message a:hover,
.woocommerce-error a:hover { color: var(--bcc-link-hover); }
.woocommerce-message { border-left-color: #4a8a4a; background: #eaf4ea; color: #1b3a1b; }
.woocommerce-error   { border-left-color: #c64a4a; background: #fceeea; color: #6a1a1a; }
.woocommerce-error li { margin: 0; }
[data-theme="dark"] .woocommerce-info { background: var(--bcc-surface); }
[data-theme="dark"] .woocommerce-message { background: #1b2a1b; color: #d0e6d0; }
[data-theme="dark"] .woocommerce-error { background: #2a1316; color: #f4cbc1; }

.bcc-checkout-notices { margin-bottom: var(--bcc-gap-5); }

/* Description lede sits below "The detail" h2. Block is centred via
   max-width + margin auto (inherits 48rem max-width from .bcc-detail-prose),
   but the TEXT inside is left-aligned for readable prose. Centred multi-
   line copy makes the eye hunt for each line's start. */
.bcc-detail-lede {
	margin: 0 auto var(--bcc-gap-7);
	text-align: left;
}

/* alpha.30: more dark-mode text-on-dark fixes — bark-as-text was
   still rendering dark-on-dark in three remaining surfaces. */
[data-theme="dark"] .bcc-countdown-band__copy strong,
[data-theme="dark"] .bcc-review-card__name {
	color: var(--bcc-accent-wash);
}

[data-theme="dark"] .bcc-footer-social a {
	color: var(--bcc-accent-wash);
	border-color: var(--bcc-rule);
}
[data-theme="dark"] .bcc-footer-social a:hover {
	background: var(--bcc-accent-wash);
	color: var(--bcc-ink-rich);
	border-color: var(--bcc-accent-wash);
}

/* ── 43. Reviews — PDP block + star primitives (alpha.31) ────────────
   Star characters are unicode glyphs that scale with currentColor.
   .is-on = filled (accent), .is-half = filled left half, neither =
   muted outline. Used in summary, per-review, and the star-input form. */
.bcc-star {
	display: inline-block;
	/* alpha.42 (2026-05-17): empty stars use --bcc-rule (faint cream in
	   light) — in dark mode that resolves to #2b231c which is near
	   invisible on the dark body bg. The ::after override below restores
	   faint visibility in dark mode without changing the light look. */
	color: var(--bcc-rule);
	font-size: 1.05em;
	line-height: 1;
}
.bcc-star.is-on { color: var(--bcc-accent-wash); }
.bcc-star.is-half {
	background: linear-gradient(90deg, var(--bcc-accent-wash) 50%, var(--bcc-rule) 50%);
	-webkit-background-clip: text;
	        background-clip: text;
	-webkit-text-fill-color: transparent;
	        text-fill-color: transparent;
	color: transparent;
}

.bcc-pdp__reviews {
	padding: var(--bcc-gap-8) var(--bcc-edge);
	background-color: var(--bcc-surface);
	background-image: url('paper-light.jpg');
	background-size: 350px;
	background-repeat: repeat;
	border-top: 1px solid var(--bcc-rule);
	border-bottom: 1px solid var(--bcc-rule);
}
.bcc-pdp__reviews-inner {
	max-width: var(--bcc-container-wide);
	margin: 0 auto;
}

.bcc-reviews-head {
	display: flex; flex-wrap: wrap; align-items: end;
	justify-content: space-between; gap: var(--bcc-gap-5);
	margin-bottom: var(--bcc-gap-6);
	padding-bottom: var(--bcc-gap-4);
}
.bcc-reviews-head h2 { color: var(--bcc-accent-text); margin: 0; }
.bcc-reviews-summary {
	display: flex; align-items: center; gap: var(--bcc-gap-3);
	font-family: var(--bcc-font-sub);
}
.bcc-reviews-summary__stars {
	font-size: 1.25rem;
	letter-spacing: 2px;
}
.bcc-reviews-summary__meta {
	color: var(--bcc-ink-subtle);
	font-size: .9rem;
}
.bcc-reviews-summary__meta strong {
	font-family: var(--bcc-font-display);
	font-size: 1.6rem;
	color: var(--bcc-accent-text);
	margin-right: .2rem;
}
[data-theme="dark"] .bcc-reviews-head h2,
[data-theme="dark"] .bcc-reviews-summary__meta strong {
	color: var(--bcc-accent-wash);
}

.bcc-reviews-list {
	list-style: none; padding: 0; margin: 0;
	display: grid;
	gap: var(--bcc-gap-5);
	grid-template-columns: 1fr;
}
@media (min-width: 720px) { .bcc-reviews-list { grid-template-columns: repeat(2, 1fr); gap: var(--bcc-gap-5) var(--bcc-gap-6); } }
@media (min-width: 1080px) { .bcc-reviews-list { grid-template-columns: repeat(3, 1fr); } }

.bcc-review-item {
	background: var(--bcc-bg);
	border: 1px solid var(--bcc-rule);
	border-radius: var(--bcc-radius-lg);
	padding: var(--bcc-gap-5);
	display: flex; flex-direction: column;
	gap: var(--bcc-gap-2);
}
.bcc-review-item__stars {
	letter-spacing: 2px;
	font-size: 1rem;
}
.bcc-review-item__title {
	/* alpha.42 (2026-05-17): Cutive Mono → Public Sans per user direction. The
	   review title sits next to a reviewer name + rating; the display
	   serif was over-weighting a small UI element. Body sans-serif at
	   semibold reads as a clean heading without the editorial heft. */
	font-family: var(--bcc-font-body);
	font-weight: 600;
	font-size: 1.05rem;
	line-height: 1.3;
	color: var(--bcc-accent-text);
	margin: 0;
}
[data-theme="dark"] .bcc-review-item__title { color: var(--bcc-ink); }
.bcc-review-item__body {
	font-size: var(--bcc-body);
	line-height: 1.55;
	color: var(--bcc-ink);
}
.bcc-review-item__body p { margin: 0 0 .5rem; }
.bcc-review-item__body p:last-child { margin: 0; }
.bcc-review-item__foot {
	margin-top: auto;
	padding-top: var(--bcc-gap-3);
	border-top: 1px dashed var(--bcc-rule);
	font-family: var(--bcc-font-sub);
	font-size: .78rem;
	color: var(--bcc-ink-subtle);
	display: flex; flex-wrap: wrap; align-items: center;
	gap: .35rem .5rem;
}
.bcc-review-item__name { color: var(--bcc-ink); font-weight: 600; }
.bcc-review-item__sep { opacity: .5; }
.bcc-review-item__source {
	color: var(--bcc-ink-subtle);
}
.bcc-review-item__source[href]:hover { color: var(--bcc-link-hover); }
.bcc-review-item__verified {
	margin-left: auto;
	background: var(--bcc-accent-soft);
	color: var(--bcc-accent-text);
	padding: 2px 8px; border-radius: 999px;
	font-size: .7rem; font-weight: 600;
	letter-spacing: .04em;
}
/* alpha.36: retailer buttons under the reviews summary (Also read on
   Ocado/Amazon). Quiet pill treatment; only rendered when there's
   actually a published review from that source. */
.bcc-reviews-retailers {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: var(--bcc-gap-3);
	margin: 0 0 var(--bcc-gap-6);
	padding-bottom: var(--bcc-gap-5);
	border-bottom: 1px dashed var(--bcc-rule);
}
.bcc-reviews-retailers__label {
	font-family: var(--bcc-font-sub);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: .72rem;
	color: var(--bcc-ink-subtle);
}
.bcc-reviews-retailers__btn {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .45rem .9rem;
	border-radius: var(--bcc-radius-pill);
	border: 1px solid var(--bcc-rule);
	background: var(--bcc-surface);
	font-family: var(--bcc-font-sub);
	font-weight: 600;
	font-size: .82rem;
	color: var(--bcc-accent-text);
	text-decoration: none;
	transition: border-color .15s var(--bcc-ease), color .15s var(--bcc-ease), background .15s var(--bcc-ease);
}
.bcc-reviews-retailers__btn:hover {
	border-color: var(--bcc-accent-wash);
	color: var(--bcc-link-hover);
	background: var(--bcc-accent-soft);
}
[data-theme="dark"] .bcc-reviews-retailers__btn {
	color: var(--bcc-accent-wash);
	background: var(--bcc-bg);
}
[data-theme="dark"] .bcc-reviews-retailers__btn:hover {
	background: rgba(217, 160, 91, 0.12);
}

/* alpha.35: "Read full on Ocado →" affordance for snippet reviews.
   Sits between body and footer, small and out of the way. */
.bcc-review-item__readmore {
	margin: -2px 0 0;
	font-family: var(--bcc-font-sub);
	font-size: .78rem;
}
.bcc-review-item__readmore a {
	color: var(--bcc-accent);
	border-bottom: 1px solid var(--bcc-accent-wash);
}
.bcc-review-item__readmore a:hover { color: var(--bcc-link-hover); }
[data-theme="dark"] .bcc-review-item__readmore a { color: var(--bcc-ink); }
[data-theme="dark"] .bcc-review-item__verified {
	background: rgba(217, 160, 91, 0.18);
	color: var(--bcc-accent-wash);
}

.bcc-reviews-empty {
	padding: var(--bcc-gap-6);
	text-align: center;
	color: var(--bcc-ink-subtle);
	font-style: italic;
}

/* — Add-a-review form ——————————————————————————————————————— */

.bcc-review-form-wrap {
	margin-top: var(--bcc-gap-7);
	padding-top: var(--bcc-gap-6);
	border-top: 1px solid var(--bcc-rule);
	max-width: 36rem;
}
.bcc-review-form-wrap h3 {
	font-family: var(--bcc-font-display);
	font-size: 1.4rem;
	color: var(--bcc-accent-text);
	margin: 0 0 .25rem;
}
[data-theme="dark"] .bcc-review-form-wrap h3 { color: var(--bcc-ink); }
.bcc-review-form-wrap__sub {
	color: var(--bcc-ink-subtle);
	font-size: .9rem;
	margin: 0 0 var(--bcc-gap-4);
}

.bcc-review-form { display: flex; flex-direction: column; gap: var(--bcc-gap-4); }
.bcc-review-form__field { display: flex; flex-direction: column; gap: 6px; }
.bcc-review-form__field > span {
	font-family: var(--bcc-font-sub);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .78rem;
	color: var(--bcc-ink-subtle);
}
.bcc-review-form input[type="text"],
.bcc-review-form textarea {
	font-family: var(--bcc-font-body);
	font-size: 1rem;
	color: var(--bcc-ink);
	background: var(--bcc-bg);
	border: 1px solid var(--bcc-rule);
	border-radius: var(--bcc-radius);
	padding: .7rem .9rem;
	width: 100%;
}
.bcc-review-form textarea { resize: vertical; min-height: 120px; }
.bcc-review-form input:focus,
.bcc-review-form textarea:focus {
	outline: none; border-color: var(--bcc-accent-wash);
}
.bcc-review-form__stars { border: 0; padding: 0; margin: 0; }
.bcc-review-form__stars legend {
	font-family: var(--bcc-font-sub);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .78rem;
	color: var(--bcc-ink-subtle);
	margin: 0 0 6px;
	padding: 0;
}
/* Star-input: reverse-flex + ~ selector trick. Stars float right-to-left
   in source, then flex-direction: row-reverse paints them left-to-right.
   :checked ~ label colours all subsequent (visually earlier) stars.
   :hover ~ label gives a preview when mousing over. */
.bcc-star-input {
	display: inline-flex; flex-direction: row-reverse;
	gap: 4px;
}
.bcc-star-input input { position: absolute; opacity: 0; pointer-events: none; }
.bcc-star-input label {
	font-size: 1.8rem;
	line-height: 1;
	color: var(--bcc-rule);
	cursor: pointer;
	transition: color .15s;
}
.bcc-star-input input:checked ~ label,
.bcc-star-input label:hover,
.bcc-star-input label:hover ~ label { color: var(--bcc-accent-wash); }
.bcc-star-input input:focus-visible + label {
	outline: 2px solid var(--bcc-accent-wash);
	outline-offset: 2px;
	border-radius: 2px;
}

.bcc-review-form__foot {
	display: flex; align-items: center; gap: var(--bcc-gap-3);
	flex-wrap: wrap;
}
.bcc-review-form__foot small {
	font-family: var(--bcc-font-sub);
	font-size: .82rem;
	color: var(--bcc-ink-subtle);
}
.bcc-review-form__foot small.is-ok  { color: #4a8a4a; }
.bcc-review-form__foot small.is-err { color: #b54a4a; }
[data-theme="dark"] .bcc-review-form__foot small.is-ok  { color: #9bd29b; }
[data-theme="dark"] .bcc-review-form__foot small.is-err { color: #f4a59a; }

.bcc-review-thanks,
.bcc-review-gate {
	margin-top: var(--bcc-gap-6);
	padding: var(--bcc-gap-4) var(--bcc-gap-5);
	background: var(--bcc-bg);
	border-radius: var(--bcc-radius);
	border-left: 3px solid var(--bcc-accent-wash);
	color: var(--bcc-ink);
	font-size: .95rem;
}
.bcc-review-thanks p,
.bcc-review-gate p { margin: 0; }
.bcc-review-gate a {
	color: var(--bcc-accent);
	border-bottom: 1px solid var(--bcc-accent-wash);
}
.bcc-review-gate a:hover { color: var(--bcc-link-hover); }

/* alpha.32: mini rating badge, used on shop cards + cross-sells. Small,
   inline, click-through to the product's #bcc-reviews anchor. */
.bcc-rating-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 4px 0 0;
	font-family: var(--bcc-font-sub);
	font-size: .78rem;
	color: var(--bcc-ink-subtle);
	text-decoration: none;
	line-height: 1;
}
.bcc-rating-badge__stars {
	font-size: .82rem;
	letter-spacing: 1px;
	line-height: 1;
}
.bcc-rating-badge__count {
	font-weight: 600;
	color: var(--bcc-ink);
}
.bcc-rating-badge:hover .bcc-rating-badge__count { color: var(--bcc-accent-text); }
[data-theme="dark"] .bcc-rating-badge__count { color: var(--bcc-ink); }
[data-theme="dark"] .bcc-rating-badge:hover .bcc-rating-badge__count { color: #fff; }
.bcc-rating-badge--md { font-size: .9rem; }
.bcc-rating-badge--md .bcc-rating-badge__stars { font-size: 1rem; }
/* BCC5 components.css — sections 22-38 (PDP through Account login). */

/* ── 22. PDP — single product layout ──────────────────────────────── */

.bcc-pdp { display: block; }

/* alpha.22: hero split into band (padding) + inner (max-width-wide grid)
   so its visible content edges align with the header / utility / breadcrumb
   inners — all share var(--bcc-container-wide). Previously the hero's
   padding sat INSIDE the max-width, narrowing visible content by 2×gap-5. */
.bcc-pdp__hero {
	padding: var(--bcc-gap-7) var(--bcc-edge) var(--bcc-gap-8);
}
.bcc-pdp__hero-inner {
	max-width: var(--bcc-container-wide);
	margin: 0 auto;
	display: grid;
	gap: var(--bcc-gap-7);
	grid-template-columns: 1fr;
	align-items: start;
}
@media (min-width: 880px) {
	.bcc-pdp__hero-inner {
		grid-template-columns: 1.05fr .95fr;
		gap: var(--bcc-gap-8);
	}
	/* 2026-05-19: pin the packshot column as the visitor scrolls past
	   the info column. The hero grid uses `align-items: start` (line ~20),
	   so neither column stretches — the row's natural height is set by
	   the taller column (the info column with badges + price + add row +
	   USP list), leaving sticky room above the image. top offset clears
	   the sticky .bcc-mast (utility countdown band + main header with the
	   72px logo + vertical padding + 1px rule, ~138px) plus a small
	   breathing margin. align-self: start is defensive — explicitly stops
	   any flex/grid stretching that would block sticky behaviour. */
	.bcc-pdp__image-wrap {
		position: sticky;
		top: 9.5rem;
		align-self: start;
	}
}

/* alpha.25: align the image frame to the LEFT of its hero-grid cell so
   it sits flush with the page wrap (which the breadcrumb + header also
   live on). Previously `justify-content: center` left a visible gap of
   gap-7..gap-8 on the left, making the image look offset from the rest
   of the site's vertical alignment. On narrow viewports the grid is
   single-column, so flex-start = full-width which still centers naturally. */
.bcc-pdp__image-wrap { display: flex; align-items: center; justify-content: flex-start; }
@media (max-width: 879px) { .bcc-pdp__image-wrap { justify-content: center; } }
/* Product image frame — no background at all. Image floats on the
   body's paper texture with just its drop-shadow giving it weight.
   Aspect-ratio kept so the frame reserves a stable square area for
   the badge stack and the image doesn't shift the layout while loading.
   2026-05-19: previously had a soft flavour-coloured radial halo here
   and a flavour-tinted dark surface in dark mode (further below); both
   removed for a cleaner PDP look across modes. */
.bcc-pdp__image-frame {
	position: relative;
	width: 100%; max-width: 540px;
	aspect-ratio: 1 / 1;
	background: none;
	display: flex; align-items: center; justify-content: center;
	overflow: visible;
}
.bcc-pdp__image-frame::before {
	background-color: var(--bcc-damask-tint-whisper);
	-webkit-mask-size: var(--bcc-damask-tile-sm);
	mask-size: var(--bcc-damask-tile-sm);
}
.bcc-pdp__image {
	position: relative; z-index: 1;
	max-width: 86%; max-height: 86%;
	width: auto; height: auto;
	filter: drop-shadow(0 30px 40px rgba(72,27,46,.18));
}

.bcc-pdp__info { display: flex; flex-direction: column; gap: var(--bcc-gap-3); }
.bcc-pdp__info .bcc-eyebrow {
	display: inline-block; border-bottom: 1px solid transparent;
	transition: border-color .15s; margin-bottom: 0; align-self: flex-start;
}
.bcc-pdp__info .bcc-eyebrow:hover { border-color: var(--bcc-accent-wash); }

.bcc-pdp__name {
	font-size: clamp(2.2rem, 4vw + 1rem, 4rem);
	line-height: .95;
	color: var(--bcc-accent-text);
}
/* alpha.44g (2026-05-18): override the accent-text auto-swap on the
   PDP title in dark mode. --bcc-accent-text resolves to accent in
   dark mode (designed for ambient accents like eyebrows + section
   heads), but on the primary product title it pulled the heading into
   the accent colour band — wanted plain off-white text instead, same
   way light mode shows it as the near-black bark primary. */
[data-theme="dark"] .bcc-pdp__name { color: var(--bcc-ink); }
.bcc-pdp__flavour {
	font-family: var(--bcc-font-sub);
	font-weight: 500;
	font-size: 1.35rem;
	color: var(--flavour-color, var(--bcc-accent));
	margin: 0;
	letter-spacing: 0;
	text-transform: none;
}
.bcc-pdp__pack {
	font-family: var(--bcc-font-sub);
	font-size: .85rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--bcc-ink-subtle);
	margin: 0;
}
.bcc-pdp__pack-size { color: var(--bcc-ink); font-weight: 600; }

/* alpha.29: row + block now use `last baseline` so the unit and stock
   sit cleanly on the price's typographic baseline. Was align-items
   center, which left the unit floating mid-height of the large display
   £15.99 instead of grounded under it. line-height: 1 on the smaller
   elements keeps the baselines on the same pixel offset across browsers. */
.bcc-pdp__price-row {
	display: flex; align-items: last baseline; gap: var(--bcc-gap-5);
	flex-wrap: wrap;
	padding: var(--bcc-gap-4) 0;
	border-top: 1px solid var(--bcc-rule);
	border-bottom: 1px solid var(--bcc-rule);
	margin: var(--bcc-gap-3) 0;
}
.bcc-pdp__price-block {
	display: flex; align-items: last baseline; gap: var(--bcc-gap-3);
	flex-wrap: wrap;
}
.bcc-pdp__price {
	/* alpha.SEO+ (2026-05-18): prices switched from Cutive Mono to Public Sans.
	   Cutive Mono's display serif suits brand wordmark + section headings;
	   numbers (especially pence) read fussier in serif. Sans + 600
	   weight gives the price weight + authority without the visual
	   noise of varying serif numeral widths. Same change applied to
	   .bcc-product-card__price, .bcc-related-card__price, .bcc-review__price. */
	font-family: var(--bcc-font-sub);
	font-weight: 600;
	font-size: 2.5rem;
	color: var(--bcc-accent-text);
	line-height: 1;
}
.bcc-pdp__price-was {
	font-family: var(--bcc-font-sub);
	font-size: 1.1rem;
	color: var(--bcc-ink-subtle);
	text-decoration: line-through;
	line-height: 1;
}
.bcc-pdp__unit {
	font-family: var(--bcc-font-sub);
	font-size: .85rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--bcc-ink-subtle);
	line-height: 1;
}
.bcc-pdp__stock {
	font-family: var(--bcc-font-sub);
	font-size: .85rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	line-height: 1;
	display: inline-flex; align-items: center; gap: .5rem;
}
.bcc-pdp__stock .dot { width: 8px; height: 8px; border-radius: 50%; }
.bcc-pdp__stock.is-in  { color: var(--bcc-accent); }
.bcc-pdp__stock.is-in .dot { background: var(--bcc-accent); animation: bcc-pulse 2.5s infinite; }
.bcc-pdp__stock.is-out { color: var(--bcc-error-text); }
.bcc-pdp__stock.is-out .dot { background: var(--bcc-claret); }
@keyframes bcc-pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

.bcc-pdp__add {
	display: flex; flex-wrap: wrap; gap: var(--bcc-gap-3);
	align-items: stretch;
}
.bcc-qty {
	display: inline-flex; align-items: stretch;
	border: 1.5px solid var(--bcc-ink);
	border-radius: var(--bcc-radius-pill);
	overflow: hidden;
	background: var(--bcc-surface);
}
.bcc-qty__btn {
	background: transparent; border: 0;
	width: 42px;
	font-family: var(--bcc-font-sub);
	font-size: 1.2rem; font-weight: 700;
	color: var(--bcc-ink); cursor: pointer;
	transition: background .15s;
}
.bcc-qty__btn:hover { background: var(--bcc-surface-2); }
.bcc-qty__val {
	width: 48px; text-align: center;
	border: 0; background: transparent;
	font-family: var(--bcc-font-sub);
	font-size: 1rem; font-weight: 600;
	color: var(--bcc-ink);
	appearance: textfield; -moz-appearance: textfield;
}
.bcc-qty__val::-webkit-outer-spin-button,
.bcc-qty__val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Default sizing — fills the PDP add-to-basket row alongside the qty
   stepper. The card variant overrides below. */
.bcc-add-btn { flex: 1; min-width: 200px; justify-content: center; }
/* On product cards the add button is the small variant — sits next to
   the price in the card foot at intrinsic size, not stretched. */
.bcc-btn--small.bcc-add-btn,
.bcc-product-card__foot .bcc-add-btn {
	flex: 0 0 auto;
	min-width: 0;
}
.bcc-add-btn.is-loading .bcc-add-btn__label::after {
	content: ' \2026'; animation: bcc-dots 1.4s infinite;
}
.bcc-add-btn.is-loading { pointer-events: none; opacity: .8; }
@keyframes bcc-dots { 0%,100% { opacity: .3; } 50% { opacity: 1; } }

.bcc-pdp__notify {
	background: var(--bcc-claret-soft);
	border: 1px solid var(--bcc-claret);
	color: var(--bcc-error-text);
	padding: var(--bcc-gap-4);
	border-radius: var(--bcc-radius);
}
.bcc-pdp__notify p { margin: 0 0 var(--bcc-gap-3); font-family: var(--bcc-font-body); color: var(--bcc-ink); }

.bcc-pdp__usp {
	list-style: none; padding: 0; margin: var(--bcc-gap-3) 0 0;
	display: flex; flex-direction: column; gap: .5rem;
	font-family: var(--bcc-font-body);
	font-size: .9rem;
	color: var(--bcc-ink-subtle);
}
.bcc-pdp__usp li { display: flex; align-items: baseline; gap: .65rem; }
.bcc-pdp__usp-icon { color: var(--bcc-accent); font-weight: 700; flex-shrink: 0; }
.bcc-pdp__usp strong { color: var(--bcc-ink); }

/* PDP story slab — slight tonal lift from body. Paper texture
   layered via bg-image; dark mode swaps to paper-dark.jpg below. */
.bcc-pdp__story {
	/* 2026-05-19: switched from surface + paper-light.jpg to the homepage
	   alt-tint pattern (transparent bg + linear-gradient overlay). Body
	   texture flows through. Alternates with reviews (body) below for the
	   ABAB section rhythm that matches the homepage rest beats. */
	background-color: transparent;
	background-image: linear-gradient(var(--bcc-section-alt-tint), var(--bcc-section-alt-tint));
	border-top: 1px solid var(--bcc-rule);
	border-bottom: 1px solid var(--bcc-rule);
	padding: var(--bcc-gap-8) var(--bcc-edge);
	position: relative; overflow: hidden;
}
.bcc-pdp__story::before {
	background-color: var(--bcc-damask-tint-tonal);
	-webkit-mask-size: var(--bcc-damask-tile-md);
	mask-size: var(--bcc-damask-tile-md);
}
/* alpha.22: max-width normalized to --bcc-container-wide to match the rest
   of the PDP. Story is now a single-column block — the previous
   `auto 1fr` grid + .bcc-pdp__story-rule divider mis-rendered (rule sat in
   the right 1fr column instead of between content, reading as a stray
   border on the right). The eyebrow + display title already give the
   block enough visual hierarchy without an arbitrary divider. */
.bcc-pdp__story-inner {
	position: relative; z-index: 1;
	max-width: var(--bcc-container-wide);
	margin: 0 auto;
	display: block;
}
/* alpha.25: centred in the wide story slab. Accent accent moved to
   the top (centred 60px rule above the eyebrow) so the block reads as
   genuinely centred — a left-border on a centred block reads asymmetric. */
.bcc-pdp__story-text {
	max-width: 48rem;
	margin: 0 auto;
	text-align: center;
	padding-top: var(--bcc-gap-2);
	position: relative;
}
.bcc-pdp__story-text::before {
	content: '';
	position: absolute; left: 50%; top: 0;
	transform: translateX(-50%);
	width: 60px; height: 3px;
	background: var(--bcc-accent-wash);
	border-radius: 2px;
}
.bcc-pdp__story-text .bcc-pdp__story-list {
	text-align: left;
	max-width: 38rem;
	margin-left: auto; margin-right: auto;
}
.bcc-pdp__story-text h2 { margin: var(--bcc-gap-2) 0 var(--bcc-gap-5); color: var(--bcc-accent-text); }
.bcc-pdp__story-list {
	list-style: none; padding: 0; margin: 0 0 var(--bcc-gap-5);
	display: flex; flex-direction: column; gap: var(--bcc-gap-3);
}
.bcc-pdp__story-list li {
	font-family: var(--bcc-font-body);
	font-size: var(--bcc-body-lg);
	line-height: 1.55;
	color: var(--bcc-ink);
}
.bcc-pdp__story-list strong {
	color: var(--bcc-accent);
	font-family: var(--bcc-font-sub);
	font-weight: 600; text-transform: uppercase;
	font-size: .9em; letter-spacing: .04em;
	margin-right: .4rem;
}

/* PDP details — alpha.22: tabs replaced with stacked flat sections so
   Description / Ingredients / Allergens / Storage / Nutrition / Delivery
   are all visible at once (no hidden content, scannable, no JS state).
   Mirrors the BCC PDP detail pattern adapted to BCC tokens. */
/* alpha.44d (2026-05-17): damask whisper added for PDP consistency with
   .bcc-pdp__story / .bcc-reviews / footer / stockists. The child
   .bcc-detail-card has its own whisper underlay so the parent damask
   just textures the gutter between cards — same pattern across both. */
.bcc-pdp__details {
	/* 2026-05-19: alt-tint added (was plain transparent). Sits between
	   reviews (body) and related (body), so the tint here gives the
	   ingredients/nutrition/delivery block its own distinct rhythm beat. */
	padding: var(--bcc-gap-8) var(--bcc-edge);
	background-color: transparent;
	background-image: linear-gradient(var(--bcc-section-alt-tint), var(--bcc-section-alt-tint));
	border-top: 1px solid var(--bcc-rule);
	border-bottom: 1px solid var(--bcc-rule);
	position: relative; overflow: hidden;
}
.bcc-pdp__details::before {
	background-color: var(--bcc-damask-tint-whisper);
	-webkit-mask-size: var(--bcc-damask-tile-md);
	mask-size: var(--bcc-damask-tile-md);
}
.bcc-pdp__details-inner { max-width: var(--bcc-container-wide); margin: 0 auto; position: relative; z-index: 1; }
.bcc-pdp__details-title { margin-bottom: var(--bcc-gap-7); text-align: center; color: var(--bcc-accent-text); }

.bcc-detail-section {
	margin-bottom: var(--bcc-gap-7);
}
.bcc-detail-section:last-child { margin-bottom: 0; }

.bcc-detail-section__title {
	font-family: var(--bcc-font-display);
	font-size: 1.6rem;
	line-height: 1.1;
	color: var(--bcc-accent-text);
	margin: 0 0 var(--bcc-gap-4);
	padding-bottom: var(--bcc-gap-3);
	border-bottom: 1px solid var(--bcc-rule);
	display: flex;
	align-items: baseline;
	gap: .65rem;
	position: relative;
}
.bcc-detail-section__title::before {
	content: '';
	width: 3px;
	align-self: center;
	height: 1.1rem;
	background: var(--bcc-accent-wash);
	border-radius: 2px;
	flex-shrink: 0;
}
.bcc-detail-section__sub {
	font-family: var(--bcc-font-sub);
	font-weight: 500;
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--bcc-ink-subtle);
}

.bcc-detail-prose {
	font-family: var(--bcc-font-body);
	font-size: var(--bcc-body-lg);
	line-height: 1.6;
	color: var(--bcc-ink);
	max-width: 48rem;
}
.bcc-detail-prose p { margin: 0 0 var(--bcc-gap-3); }
.bcc-detail-prose p:last-child { margin-bottom: 0; }

.bcc-detail-section__gtin {
	margin-top: var(--bcc-gap-4) !important;
	padding-top: var(--bcc-gap-3);
	border-top: 1px solid var(--bcc-rule);
	font-family: var(--bcc-font-sub) !important;
	font-size: .8rem !important;
	color: var(--bcc-ink-subtle);
	text-transform: uppercase; letter-spacing: .08em;
}
.bcc-detail-section__gtin strong { color: var(--bcc-ink); }

.bcc-detail-grid {
	display: grid;
	gap: var(--bcc-gap-4);
	grid-template-columns: 1fr;
}
@media (min-width: 600px) {
	.bcc-detail-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

/* alpha.25: warmer, less clinical card. Cream-surface ground with damask
   whisper, accent corner mark, Cutive Mono title in bark, body in body
   font (not uppercase). Reads like a small editorial panel rather than a
   utility info box. */
.bcc-detail-card {
	/* Card surface is the SAME paper as body — texture continues
	   through; card identity comes from the shadow + rounded edges,
	   not a different bg-colour. Cooler surface-2 base so the slight
	   tonal step doesn't read as beige.
	   2026-05-19: border lifted from transparent to --bcc-rule for a
	   subtle hairline frame — gives the card a definite edge against
	   the paper context without going hard-outline. */
	background-color: var(--bcc-surface-2);
	background-image: url('paper-light.jpg');
	background-size: 350px;
	background-repeat: repeat;
	background-attachment: fixed;
	border: 1px solid var(--bcc-rule);
	border-radius: var(--bcc-radius-lg);
	padding: var(--bcc-gap-5) var(--bcc-gap-5) var(--bcc-gap-5);
	position: relative;
	overflow: hidden;
}
[data-theme="dark"] .bcc-detail-card {
	background-image: url('paper-dark.jpg');
}
.bcc-detail-card::before {
	background-color: var(--bcc-damask-tint-whisper);
	-webkit-mask-size: var(--bcc-damask-tile-sm);
	mask-size: var(--bcc-damask-tile-sm);
}
/* alpha.29: accent corner mark removed — it was reading as a stray
   border at the top of the card. The damask whisper + title style now
   carry the brand treatment on their own. */
.bcc-detail-card > * { position: relative; z-index: 1; }
.bcc-detail-card__title {
	font-family: var(--bcc-font-display);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	font-size: 1.25rem;
	line-height: 1.1;
	color: var(--bcc-accent-text);
	margin: 0 0 var(--bcc-gap-2);
}
.bcc-detail-card__body {
	font-family: var(--bcc-font-body);
	font-size: var(--bcc-body);
	line-height: 1.55;
	color: var(--bcc-ink);
	margin: 0;
}
.bcc-detail-card__body--ok {
	color: var(--bcc-accent);
	font-style: italic;
}

.bcc-detail-disclaimer {
	font-family: var(--bcc-font-sub);
	font-size: .78rem;
	color: var(--bcc-ink-subtle);
	opacity: .85;
	line-height: 1.5;
	margin: var(--bcc-gap-4) 0 0;
	max-width: 48rem;
}

/* Nutrition grid (full 9-cell layout from rich BCC product meta).
   alpha.25: max-width removed — grid expands to fill the detail panel
   naturally so cells get more breathing room. */
.bcc-nutrition { max-width: none; }
.bcc-nutrition__grid {
	display: grid; gap: 1px;
	grid-template-columns: repeat(3, 1fr);
	background: var(--bcc-rule);
	border: 1px solid var(--bcc-rule);
	border-radius: var(--bcc-radius);
	overflow: hidden;
}
.bcc-nutrition__cell {
	background-color: var(--bcc-surface);
	background-image: url('paper-light.jpg');
	background-size: 350px;
	background-repeat: repeat;
	background-attachment: fixed;
	padding: var(--bcc-gap-4);
	display: flex; flex-direction: column;
	gap: 4px; min-height: 96px; justify-content: center;
}
[data-theme="dark"] .bcc-nutrition__cell {
	background-image: url('paper-dark.jpg');
}
.bcc-nutrition__val {
	font-family: var(--bcc-font-display);
	font-size: 1.5rem;
	color: var(--bcc-accent-text);
	line-height: 1;
}
.bcc-nutrition__label {
	font-family: var(--bcc-font-sub);
	font-size: .72rem;
	text-transform: uppercase; letter-spacing: .06em;
	color: var(--bcc-ink-subtle);
}

/* PDP related row */
/* alpha.44d (2026-05-17): damask whisper added for PDP consistency. */
.bcc-pdp__related {
	/* 2026-05-19: switched to plain transparent body bg (was surface-2 +
	   paper-light.jpg). The related-products grid below has its own card
	   chrome, so the section itself doesn't need its own paper inset —
	   keeps the ABAB rhythm with details (tint) above and the dark CTA
	   band below. Body texture continues through. */
	padding: var(--bcc-gap-8) var(--bcc-edge);
	background: transparent;
	position: relative; overflow: hidden;
}
/* 2026-05-19: the [data-theme="dark"] paper-image swap that used to live
   here is gone — story / reviews / details / related no longer carry
   their own paper-jpg textures. The body's paper-light → paper-dark
   swap already handles dark mode for sections that show body texture
   through. The alt-tint token also auto-flips direction for dark mode
   (rgba(0,0,0,.03) → rgba(255,255,255,.035)) so no per-section dark
   overrides are needed for the tinted sections either. */
.bcc-pdp__related::before {
	background-color: var(--bcc-damask-tint-whisper);
	-webkit-mask-size: var(--bcc-damask-tile-md);
	mask-size: var(--bcc-damask-tile-md);
}
.bcc-related-grid {
	max-width: var(--bcc-container-wide);
	margin: 0 auto;
	display: grid; gap: var(--bcc-gap-4);
	grid-template-columns: repeat(2, 1fr);
	position: relative; z-index: 1;
}
@media (min-width: 720px) { .bcc-related-grid { grid-template-columns: repeat(4, 1fr); } }
/* alpha.22: scope the section head wider INSIDE the PDP related slab so
   the eyebrow + heading align with the 4-card grid below (which uses
   --bcc-container-wide). Homepage section-heads keep --bcc-container. */
.bcc-pdp__related .bcc-section-head { max-width: var(--bcc-container-wide); }
/* alpha.20: chrome matched to .bcc-product-card (no border, no lift). */
.bcc-related-card {
	background-color: var(--bcc-surface);
	background-image: url('paper-light.jpg');
	background-size: 350px;
	background-repeat: repeat;
	background-attachment: fixed;
	/* Matches .bcc-product-card — soft hairline at rest, flavour-tinted
	   border on hover so the lift + glow + edge all land as one state. */
	border: 1px solid var(--bcc-rule);
	border-radius: var(--bcc-radius-lg);
	padding: var(--bcc-gap-4);
	display: flex; flex-direction: column;
	text-decoration: none; color: inherit;
	box-shadow: 0 1px 2px rgba(26,20,17,.04);
	transition: box-shadow .35s var(--bcc-ease), border-color .35s var(--bcc-ease);
}
[data-theme="dark"] .bcc-related-card {
	background-image: url('paper-dark.jpg');
}
.bcc-related-card:hover {
	box-shadow: 0 16px 32px rgba(26,20,17,.10);
	border-color: color-mix(in srgb, var(--flavour-color, var(--bcc-accent)) 55%, transparent);
}
/* alpha.27: mirrors the PDP image-frame treatment, glow is tinted by
   --flavour-color (set inline on .bcc-related-card), with a accent
   fallback for browsers that don't support color-mix. */
.bcc-related-card__img {
	aspect-ratio: 1 / 1;
	display: flex; align-items: center; justify-content: center;
	background:
		radial-gradient(circle at 30% 30%, var(--bcc-accent-soft) 0%, transparent 70%),
		var(--bcc-surface-2);
	background:
		radial-gradient(circle at 30% 30%,
			color-mix(in srgb, var(--flavour-color, var(--bcc-accent)) 40%, white) 0%,
			color-mix(in srgb, var(--flavour-color, var(--bcc-accent)) 12%, transparent) 45%,
			transparent 75%),
		var(--bcc-surface-2);
	border-radius: var(--bcc-radius);
	margin-bottom: var(--bcc-gap-3); overflow: hidden;
	position: relative;
}
/* alpha.44c: .bcc-related-card__img::before damask underlay REMOVED — product imagery stays clean across PDP-related and archive contexts (same rationale as .bcc-product-card__img). */
.bcc-related-card__img img { max-width: 78%; max-height: 78%; position: relative; z-index: 1; }
.bcc-related-card__name {
	font-family: var(--bcc-font-sub); font-weight: 600;
	color: var(--bcc-ink);
	font-size: .95rem; line-height: 1.2;
}
.bcc-related-card__flavour {
	font-family: var(--bcc-font-sub); font-weight: 500;
	color: var(--bcc-accent);
	font-size: .85rem;
	margin-top: 2px;
}
.bcc-related-card__meta {
	margin-top: auto;
	padding-top: var(--bcc-gap-3);
	display: flex; justify-content: space-between; align-items: baseline;
	gap: var(--bcc-gap-2);
}
.bcc-related-card__price {
	font-family: var(--bcc-font-sub);
	font-weight: 600;
	font-size: 1.4rem;
	color: var(--bcc-accent-text);
}
.bcc-related-card__case {
	font-family: var(--bcc-font-sub);
	font-size: .78rem;
	color: var(--bcc-ink-subtle);
}

/* ── 23. Shop archive ─────────────────────────────────────────────── */

/* alpha.10: no border-bottom + damask continues into grid below. */
.bcc-archive-hero {
	padding: var(--bcc-gap-7) var(--bcc-edge) var(--bcc-gap-6);
	background: transparent;
	position: relative; overflow: hidden;
}
.bcc-archive-hero::before {
	background-color: var(--bcc-damask-tint-tonal);
	-webkit-mask-size: var(--bcc-damask-tile-lg);
	mask-size: var(--bcc-damask-tile-lg);
}
.bcc-archive-hero::after {
	content: '';
	position: absolute; inset: 0;
	background: radial-gradient(ellipse 70% 80% at 50% -20%, var(--bcc-accent-soft) 0%, transparent 55%);
	pointer-events: none;
}
.bcc-archive-hero__inner {
	position: relative; z-index: 1;
	max-width: var(--bcc-container);
	margin: 0 auto; text-align: center;
}
.bcc-archive-hero h1 {
	margin: var(--bcc-gap-3) 0 var(--bcc-gap-4);
	font-size: clamp(2.2rem, 4vw + 1rem, 4rem);
	color: var(--bcc-accent-text);
}
.bcc-archive-hero__lede {
	font-size: var(--bcc-body-lg);
	color: var(--bcc-ink-subtle);
	max-width: 36em;
	margin: 0 auto var(--bcc-gap-3);
	line-height: 1.55;
}
/* alpha.11: optional press/source attribution under the category lede. */
.bcc-archive-hero__source {
	font-family: var(--bcc-font-sub); font-weight: 600;
	font-size: .72rem;
	text-transform: uppercase; letter-spacing: .14em;
	color: var(--bcc-accent);
	margin: 0 auto var(--bcc-gap-5);
	max-width: 36em;
}
.bcc-archive-hero__meta {
	display: inline-flex; flex-wrap: wrap; justify-content: center;
	gap: var(--bcc-gap-3);
	font-family: var(--bcc-font-sub);
	font-size: .8rem; text-transform: uppercase; letter-spacing: .1em;
	color: var(--bcc-ink-subtle);
}
.bcc-bullet { opacity: .4; }

/* 2026-05-20: 2-column variant — engaged when category_intros defines
   `image`. Copy left, lifestyle photo right at desktop; stacks at mobile
   with the photo above the copy. Centred typography is the default for
   categories without a lifestyle shot. Inherits all base
   .bcc-archive-hero__* rules and just overrides layout + alignment. */
.bcc-archive-hero--with-image .bcc-archive-hero__inner {
	max-width: var(--bcc-container-wide);
	text-align: left;
	display: grid;
	gap: var(--bcc-gap-6);
	grid-template-columns: 1fr;
	align-items: center;
}
@media (min-width: 880px) {
	.bcc-archive-hero--with-image .bcc-archive-hero__inner {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		gap: var(--bcc-gap-8);
	}
}
.bcc-archive-hero--with-image .bcc-archive-hero__lede,
.bcc-archive-hero--with-image .bcc-archive-hero__source {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}
.bcc-archive-hero--with-image .bcc-archive-hero__meta {
	justify-content: flex-start;
}
.bcc-archive-hero--with-image .bcc-archive-hero__features,
.bcc-range-section__copy .bcc-archive-hero__features {
	/* Left-align the feature pills wherever they sit in a left-aligned
	   copy column (was justify-content: center inherited from the base
	   rule, which made the row of pills sit centred under the left-
	   aligned copy and read as disconnected). flex-start lines them up
	   under the eyebrow + h1 + lede. Covers both the 2-col archive hero
	   variant AND the split-range sections on /crisps/. */
	justify-content: flex-start;
	margin-left: 0;
}
.bcc-archive-hero__image {
	display: block;
	width: 100%;
	order: -1; /* photo first on mobile (above copy) */
}
@media (min-width: 880px) {
	.bcc-archive-hero__image { order: initial; }
}
.bcc-archive-hero__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--bcc-radius-lg, 14px);
	box-shadow:
		0 1px 2px rgba(20, 14, 12, 0.06),
		0 12px 36px rgba(20, 14, 12, 0.18);
}

.bcc-shop-grid-wrap {
	padding: var(--bcc-gap-7) var(--bcc-edge);
	background: transparent;
	position: relative; overflow: hidden;
}
.bcc-shop-grid-wrap::before {
	background-color: var(--bcc-damask-tint-whisper);
	-webkit-mask-size: var(--bcc-damask-tile-lg);
	mask-size: var(--bcc-damask-tile-lg);
}
.bcc-shop-grid-wrap > * { position: relative; z-index: 1; }
.bcc-shop-grid {
	max-width: var(--bcc-container-wide);
	margin: 0 auto;
	display: grid; gap: var(--bcc-gap-5);
	grid-template-columns: 1fr;
}
@media (min-width: 480px)  { .bcc-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 880px)  { .bcc-shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .bcc-shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* alpha.21: count-aware grid overrides — a 3-SKU category fills 3 equal
   columns at desktop instead of leaving a phantom slot in a 4-up grid.
   Caps the row width for small catalogues so cards don't grow absurdly
   wide on big screens. */
.bcc-shop-grid[data-count="1"] {
	grid-template-columns: min(420px, 100%);
	justify-content: center;
}
@media (min-width: 720px) {
	.bcc-shop-grid[data-count="2"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.bcc-shop-grid[data-count="3"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (min-width: 1180px) {
	.bcc-shop-grid[data-count="2"],
	.bcc-shop-grid[data-count="3"] {
		/* keep the explicit column count from the 720+ breakpoint,
		   don't let the 1180+ rule above coerce them to 4-up */
		grid-template-columns: repeat(var(--shop-cols, 3), minmax(0, 1fr));
	}
	.bcc-shop-grid[data-count="2"] { --shop-cols: 2; }
	.bcc-shop-grid[data-count="3"] { --shop-cols: 3; }
}

.bcc-shop-empty {
	max-width: 36rem; margin: 0 auto; text-align: center;
	padding: var(--bcc-gap-7) 0;
}
.bcc-shop-empty h2 { margin-bottom: var(--bcc-gap-3); }

.bcc-shop-paginate {
	max-width: var(--bcc-container);
	margin: var(--bcc-gap-7) auto 0;
	display: flex; justify-content: center; align-items: center;
	gap: var(--bcc-gap-5);
	font-family: var(--bcc-font-sub);
	font-size: .85rem; color: var(--bcc-ink-subtle);
	text-transform: uppercase; letter-spacing: .08em;
}

/* Cross-link between Paper and Classic archives — proper callout
   block, not a buried text link. Each archive shows the OTHER as
   a visible "also available" feature so users can find both ranges
   easily. The Mixed Case mention on the classic crosslink is
   intentional — it's the highest-volume SKU and what most repeat
   buyers come back for. */
/* ─── Range sections on the /crisps/ parent archive ─────────────────
   2026-05-20: split-by-range layout. Each section has a 2-column head
   (copy + lifestyle photo, flips L/R on alternating sections) followed
   by a product grid. Sections inherit body paper texture (no own bg) +
   a hairline rule between them so the two ranges read as separate
   chapters. --image-right modifier flips the head columns; lazy +
   eager loading split between paper (first, eager) and classic (second,
   lazy). */
.bcc-range-section {
	padding: var(--bcc-gap-7) var(--bcc-edge);
	position: relative;
}
.bcc-range-section + .bcc-range-section {
	border-top: 1px solid var(--bcc-rule);
}
.bcc-range-section__head {
	max-width: var(--bcc-container-wide);
	margin: 0 auto var(--bcc-gap-6);
	display: grid;
	gap: var(--bcc-gap-6);
	grid-template-columns: 1fr;
	align-items: center;
}
@media (min-width: 880px) {
	.bcc-range-section__head {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		gap: var(--bcc-gap-8);
		margin-bottom: var(--bcc-gap-7);
	}
	.bcc-range-section--image-right .bcc-range-section__head {
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	}
	.bcc-range-section--image-right .bcc-range-section__copy { order: 2; }
	.bcc-range-section--image-right .bcc-range-section__image { order: 1; }
}
.bcc-range-section__copy h2 {
	color: var(--bcc-accent-text);
	margin: var(--bcc-gap-3) 0 var(--bcc-gap-4);
	font-size: clamp(2rem, 3vw + 1rem, 3rem);
}
.bcc-range-section__lede {
	color: var(--bcc-ink-subtle);
	font-size: var(--bcc-body-lg);
	line-height: 1.55;
	margin: 0 0 var(--bcc-gap-4);
}
.bcc-range-section__seeall {
	margin: var(--bcc-gap-4) 0 0;
}
.bcc-range-section__image {
	display: block;
	width: 100%;
	order: -1; /* photo above copy on mobile */
}
@media (min-width: 880px) { .bcc-range-section__image { order: initial; } }
.bcc-range-section__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--bcc-radius-lg, 14px);
	box-shadow:
		0 1px 2px rgba(20, 14, 12, 0.06),
		0 12px 36px rgba(20, 14, 12, 0.18);
}
.bcc-range-section__grid {
	max-width: var(--bcc-container-wide);
	margin: 0 auto;
}
.bcc-range-section__empty {
	max-width: var(--bcc-container-wide);
	margin: 0 auto;
	text-align: center;
	color: var(--bcc-ink-subtle);
	padding: var(--bcc-gap-6) 0;
}

.bcc-range-crosslink {
	padding: var(--bcc-gap-7) var(--bcc-edge);
	background-color: transparent;
	background-image: linear-gradient(var(--bcc-wash-cheese), var(--bcc-wash-cheese));
	border-top: 1px solid var(--bcc-rule);
	border-bottom: 1px solid var(--bcc-rule);
	text-align: center;
}
.bcc-range-crosslink--classic {
	/* Surfacing the classic range from the paper archive — warm
	   cheese-mustard wash signals "longstanding range, friendly". */
	background-image: linear-gradient(var(--bcc-wash-cheese), var(--bcc-wash-cheese));
	--bcc-section-accent: var(--bcc-flav-cheese-deep);
}
.bcc-range-crosslink--paper {
	/* Surfacing the paper range from the classic archive — sea-blue
	   wash signals "headline / future-facing". */
	background-image: linear-gradient(var(--bcc-wash-sea), var(--bcc-wash-sea));
	--bcc-section-accent: var(--bcc-flav-sea-deep);
}
.bcc-range-crosslink__inner {
	max-width: 44rem;
	margin: 0 auto;
}
.bcc-range-crosslink .bcc-eyebrow {
	margin-bottom: var(--bcc-gap-2);
}
.bcc-range-crosslink--classic .bcc-eyebrow { color: var(--bcc-flav-cheese-deep); }
.bcc-range-crosslink--paper .bcc-eyebrow { color: var(--bcc-flav-sea-deep); }
[data-theme="dark"] .bcc-range-crosslink--classic .bcc-eyebrow { color: #e6c781; }
[data-theme="dark"] .bcc-range-crosslink--paper .bcc-eyebrow { color: #8ec0d8; }
.bcc-range-crosslink h2.bcc-display {
	font-size: clamp(1.6rem, 2vw + 1rem, 2.4rem);
	margin-bottom: var(--bcc-gap-4);
}
.bcc-range-crosslink__lede {
	font-family: var(--bcc-font-body);
	font-size: var(--bcc-body-lg);
	line-height: 1.55;
	color: var(--bcc-ink);
	margin: 0 auto var(--bcc-gap-5);
	max-width: 36em;
}
.bcc-range-crosslink__lede strong {
	color: var(--bcc-section-accent);
	font-weight: 700;
}
[data-theme="dark"] .bcc-range-crosslink__lede { color: var(--bcc-ink); }
[data-theme="dark"] .bcc-range-crosslink--classic .bcc-range-crosslink__lede strong { color: #e6c781; }
[data-theme="dark"] .bcc-range-crosslink--paper .bcc-range-crosslink__lede strong { color: #8ec0d8; }

/* PRODUCT CARD (shop archive + related) */
/* alpha.18: no border (was reading too "gold-frame", especially with the
   colour-matched backdrops). No lift on hover either — just a soft
   shadow swell and a more pronounced bag zoom. The card identity comes
   from the backdrop colour + the bag image; chrome stays out of the way. */
.bcc-product-card {
	background-color: var(--bcc-surface);
	background-image: url('paper-light.jpg');
	background-size: 350px;
	background-repeat: repeat;
	background-attachment: fixed;
	/* Soft 1px rule at rest — gives the card a defined edge against
	   the body paper. On hover, the border picks up the product's
	   flavour colour so the lift + glow + edge all read as one
	   coherent state change rather than just a floating shadow. */
	border: 1px solid var(--bcc-rule);
	border-radius: var(--bcc-radius-lg);
	display: flex; flex-direction: column;
	overflow: hidden;
	position: relative;
	box-shadow: 0 1px 2px rgba(26,20,17,.04);
	transition: box-shadow .35s var(--bcc-ease), border-color .35s var(--bcc-ease);
}
[data-theme="dark"] .bcc-product-card {
	background-image: url('paper-dark.jpg');
}
.bcc-product-card:hover {
	box-shadow: 0 18px 38px rgba(26,20,17,.10);
	border-color: color-mix(in srgb, var(--flavour-color, var(--bcc-accent)) 55%, transparent);
}
.bcc-product-card.is-oos { opacity: .65; }

/* alpha.9: card backdrop = soft bag colour (--flavour-soft set inline). */
.bcc-product-card__img {
	aspect-ratio: 1 / 1;
	display: flex; align-items: center; justify-content: center;
	background:
		radial-gradient(circle at 30% 30%, rgba(255,255,255,0.45) 0%, transparent 60%),
		var(--flavour-soft, var(--bcc-surface-2));
	overflow: hidden;
	position: relative;
}
/* alpha.44 (2026-05-17): damask underlay REMOVED. With the new
   pure-ink/accent SVG (vs the old pre-tinted PNG) the multiply
   blend pulled too much pattern into the product photography, making
   each card busy. Product imagery now reads cleanly against the
   flavour-soft gradient surface; brand texture lives at section level
   (.bcc-archive-hero / .bcc-shop-grid-wrap), not under every product. */
.bcc-product-card__img img {
	max-width: 78%; max-height: 78%;
	width: auto; height: auto;
	transition: transform .35s var(--bcc-ease);
	/* alpha.46 (2026-05-18): drop-shadow removed — the hover scale transition
	   promotes the img to its own compositor layer and Safari then renders
	   the filter against the layer rectangle, not the bag alpha. */
	position: relative; z-index: 1;
}
.bcc-product-card:hover .bcc-product-card__img img { transform: scale(1.025); }
/* alpha.9: no top border — card identity is in the backdrop colour. */
.bcc-product-card__flavour { color: var(--flavour-color, var(--bcc-accent)); }

.bcc-product-card__body {
	padding: var(--bcc-gap-4);
	display: flex; flex-direction: column;
	flex: 1; gap: var(--bcc-gap-2);
}
.bcc-product-card__name {
	font-family: var(--bcc-font-sub); font-weight: 700;
	color: var(--bcc-ink);
	font-size: 1.05rem; line-height: 1.2;
	letter-spacing: -0.005em;
	text-decoration: none;
}
/* alpha.9: italic Cutive Mono → Public Sans italic 500 at body sizes for readability. */
.bcc-product-card__flavour {
	font-family: var(--bcc-font-sub); font-weight: 500;
	color: var(--flavour-color, var(--bcc-accent));
	font-size: .95rem;
	letter-spacing: 0;
}
.bcc-product-card__case {
	font-family: var(--bcc-font-sub);
	color: var(--bcc-ink-subtle);
	font-size: .75rem;
	text-transform: uppercase; letter-spacing: .06em;
}
.bcc-product-card__foot {
	margin-top: auto;
	padding-top: var(--bcc-gap-3);
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--bcc-gap-3);
}
.bcc-product-card__price-block {
	display: flex; flex-direction: column; gap: 2px;
}
.bcc-product-card__price {
	font-family: var(--bcc-font-sub);
	font-weight: 600;
	font-size: 1.5rem;
	color: var(--bcc-accent-text);
	line-height: 1;
}
.bcc-product-card__unit {
	font-family: var(--bcc-font-sub);
	font-size: .7rem;
	text-transform: uppercase; letter-spacing: .06em;
	color: var(--bcc-ink-subtle);
}
.bcc-product-card__oos {
	font-family: var(--bcc-font-sub);
	text-transform: uppercase; letter-spacing: .04em;
	font-size: .75rem;
	color: var(--bcc-error-text);
}

/* ── 24. Cart page ────────────────────────────────────────────────── */

.bcc-cart {
	max-width: var(--bcc-container-wide);
	margin: 0 auto;
	padding: var(--bcc-gap-5) var(--bcc-gap-5) var(--bcc-gap-8);
}
.bcc-cart__head { margin-bottom: var(--bcc-gap-6); }
.bcc-cart__head h1 {
	font-size: clamp(2rem, 3vw + 1rem, 3.25rem);
	margin-bottom: var(--bcc-gap-2);
	color: var(--bcc-accent-text);
}
.bcc-cart__sub {
	font-family: var(--bcc-font-sub);
	color: var(--bcc-ink-subtle);
	text-transform: uppercase; letter-spacing: .08em;
	font-size: .85rem; margin: 0;
}

.bcc-cart-empty {
	background: var(--bcc-surface);
	border: 1px solid var(--bcc-rule);
	border-radius: var(--bcc-radius-lg);
	padding: var(--bcc-gap-8) var(--bcc-edge);
	text-align: center;
	position: relative; overflow: hidden;
}
.bcc-cart-empty::before {
	background-color: var(--bcc-damask-tint-tonal);
	-webkit-mask-size: var(--bcc-damask-tile-md);
	mask-size: var(--bcc-damask-tile-md);
}
.bcc-cart-empty__inner { position: relative; z-index: 1; max-width: 32em; margin: 0 auto; }
.bcc-cart-empty h2 { margin-bottom: var(--bcc-gap-3); color: var(--bcc-accent-text); }
.bcc-cart-empty p { color: var(--bcc-ink-subtle); margin-bottom: var(--bcc-gap-5); }
.bcc-cart-empty__cats {
	display: flex; flex-wrap: wrap; gap: var(--bcc-gap-3); justify-content: center;
}

.bcc-cart-grid {
	display: grid;
	gap: var(--bcc-gap-6);
	grid-template-columns: 1fr;
}
@media (min-width: 880px) {
	.bcc-cart-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--bcc-gap-7); align-items: start; }
}

.bcc-cart-items {
	background: var(--bcc-surface);
	border: 1px solid var(--bcc-rule);
	border-radius: var(--bcc-radius-lg);
	overflow: hidden;
}
.bcc-cart-item {
	display: grid;
	gap: var(--bcc-gap-3) var(--bcc-gap-4);
	grid-template-columns: 80px 1fr auto;
	grid-template-areas:
		"img main remove"
		"img qty  line";
	padding: var(--bcc-gap-4);
	border-bottom: 1px solid var(--bcc-rule);
	align-items: start;
}
.bcc-cart-item:last-child { border-bottom: 0; }
@media (min-width: 720px) {
	.bcc-cart-item {
		grid-template-columns: 96px 1fr 140px 100px 32px;
		grid-template-areas: "img main qty line remove";
		align-items: center;
		padding: var(--bcc-gap-5);
	}
}
.bcc-cart-item.is-updating { opacity: .55; transition: opacity .15s; }
.bcc-cart-item.is-removing { opacity: 0; transform: translateX(-20px); transition: opacity .2s, transform .2s; }
.bcc-cart-item__img { grid-area: img; }
.bcc-cart-item__img img { width: 100%; border-radius: var(--bcc-radius); background: var(--bcc-surface-2); }
.bcc-cart-item__main { grid-area: main; display: flex; flex-direction: column; gap: 4px; }
.bcc-cart-item__name {
	font-family: var(--bcc-font-sub); font-weight: 600;
	color: var(--bcc-ink); font-size: 1.05rem; line-height: 1.2;
	text-decoration: none;
}
.bcc-cart-item__name:hover { color: var(--bcc-accent); }
.bcc-cart-item__flavour {
	font-family: var(--bcc-font-sub); font-weight: 500;
	color: var(--bcc-accent); font-size: .9rem;
}
.bcc-cart-item__unit {
	font-family: var(--bcc-font-body);
	color: var(--bcc-ink-subtle);
	font-size: .85rem; margin-top: 2px;
}
.bcc-cart-item__qty { grid-area: qty; justify-self: start; }
@media (min-width: 720px) { .bcc-cart-item__qty { justify-self: center; } }
.bcc-cart-item__qty .bcc-qty { height: 40px; }
.bcc-cart-item__qty .bcc-qty__btn { width: 36px; }
.bcc-cart-item__qty .bcc-qty__val { width: 44px; }
.bcc-cart-item__line {
	grid-area: line; justify-self: end;
	font-family: var(--bcc-font-display);
	font-size: 1.3rem;
	color: var(--bcc-accent-text); line-height: 1;
}
.bcc-cart-item__remove {
	grid-area: remove; justify-self: end;
	background: none; border: 0;
	color: var(--bcc-ink-subtle);
	font-size: 1.4rem; line-height: 1;
	cursor: pointer; padding: .25rem .5rem;
	border-radius: 50%;
	transition: color .15s, background-color .15s;
}
.bcc-cart-item__remove:hover { color: var(--bcc-error-text); background: var(--bcc-claret-soft); }

.bcc-cart-summary { position: sticky; top: 96px; }
.bcc-cart-summary__inner {
	background: var(--bcc-surface);
	border: 1px solid var(--bcc-rule);
	border-radius: var(--bcc-radius-lg);
	padding: var(--bcc-gap-5);
}
.bcc-cart-summary h2 {
	font-size: 1.5rem; margin-bottom: var(--bcc-gap-5);
	color: var(--bcc-accent-text);
}
.bcc-cart-summary__lines { margin: 0 0 var(--bcc-gap-5); padding: 0; }
.bcc-cart-summary__row {
	display: flex; justify-content: space-between; align-items: baseline;
	padding: var(--bcc-gap-2) 0;
	font-family: var(--bcc-font-body);
	color: var(--bcc-ink);
}
.bcc-cart-summary__row dt { color: var(--bcc-ink-subtle); margin: 0; }
.bcc-cart-summary__row dd { margin: 0; font-weight: 600; }
.bcc-cart-summary__free { color: var(--bcc-accent); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: .9rem; }
.bcc-cart-summary__row--total {
	border-top: 1px solid var(--bcc-rule);
	padding-top: var(--bcc-gap-3);
	margin-top: var(--bcc-gap-2);
	font-family: var(--bcc-font-display);
}
.bcc-cart-summary__row--total dt {
	font-family: var(--bcc-font-sub); text-transform: uppercase; letter-spacing: .04em;
	font-size: .85rem; color: var(--bcc-ink);
}
.bcc-cart-summary__row--total dd {
	font-size: 1.75rem;
	color: var(--bcc-accent-text);
}
.bcc-cart-summary__delivery {
	display: flex; gap: .65rem;
	background: var(--bcc-surface-2);
	border-radius: var(--bcc-radius);
	padding: var(--bcc-gap-3) var(--bcc-gap-4);
	font-size: .85rem;
	color: var(--bcc-ink-subtle);
	line-height: 1.4;
	margin-bottom: var(--bcc-gap-5);
}
.bcc-cart-coupon {
	border-top: 1px dashed var(--bcc-rule);
	padding-top: var(--bcc-gap-4);
	margin-bottom: var(--bcc-gap-5);
}
.bcc-cart-coupon label {
	font-family: var(--bcc-font-sub);
	font-size: .8rem;
	text-transform: uppercase; letter-spacing: .08em;
	color: var(--bcc-ink-subtle);
	display: block; margin-bottom: var(--bcc-gap-2);
}
.bcc-cart-coupon__row { display: flex; gap: var(--bcc-gap-2); }
.bcc-cart-coupon input {
	flex: 1;
	border: 1.5px solid var(--bcc-rule);
	border-radius: var(--bcc-radius-pill);
	padding: .55rem 1rem;
	font-family: var(--bcc-font-sub);
	font-size: .9rem; color: var(--bcc-ink);
	background: var(--bcc-surface);
	transition: border-color .15s;
}
.bcc-cart-coupon input:focus { outline: none; border-color: var(--bcc-accent-wash); }
.bcc-cart-coupon .bcc-btn { padding: .5rem 1rem; font-size: .8rem; }
.bcc-cart-coupon__msg {
	margin-top: var(--bcc-gap-3);
	padding: .55rem .85rem;
	border-radius: var(--bcc-radius);
	font-size: .85rem;
}
.bcc-cart-coupon__msg.is-success { background: var(--bcc-accent-soft); color: var(--bcc-link-hover); }
.bcc-cart-coupon__msg.is-error   { background: var(--bcc-claret-soft); color: var(--bcc-error-text); }
.bcc-cart-summary__checkout {
	width: 100%; justify-content: center;
	padding: 1rem 1.5rem .85rem;
	font-size: 1rem;
}
.bcc-cart-summary__keep-shopping {
	display: block; text-align: center;
	margin-top: var(--bcc-gap-4);
	font-family: var(--bcc-font-sub);
	font-size: .85rem; color: var(--bcc-ink-subtle);
	text-transform: uppercase; letter-spacing: .06em;
}
.bcc-cart-summary__keep-shopping:hover { color: var(--bcc-accent); }

/* ── 25. AJAX nav transition ──────────────────────────────────────── */
/* A subtle cross-fade on AJAX route changes — main element fades to
   .3 opacity during fetch, back to 1 after swap. Prevents the layout
   jump that comes from full page reloads + restores the "feel of an
   app" the user flagged was missing. */

main#bcc-main {
	transition: opacity .18s var(--bcc-ease);
}
main#bcc-main.is-routing { opacity: .35; }

/* Per-page top loading bar */
.bcc-route-bar {
	position: fixed; top: 0; left: 0;
	height: 2px; width: 0%;
	background: var(--bcc-accent-wash);
	z-index: 9999; pointer-events: none;
	transition: width .25s var(--bcc-ease), opacity .2s;
	opacity: 0;
}
.bcc-route-bar.is-loading { opacity: 1; }

/* ── 26. Checkout page (BCC-depth bespoke) ─────────────────────────── */

.bcc-checkout-page {
	max-width: var(--bcc-container-wide);
	margin: 0 auto;
	padding: var(--bcc-gap-5) var(--bcc-gap-5) var(--bcc-gap-8);
}
.bcc-checkout-page__head { text-align: center; margin-bottom: var(--bcc-gap-6); }
.bcc-checkout-page__head h1 {
	font-size: clamp(2rem, 3vw + 1rem, 3.25rem);
	margin-bottom: var(--bcc-gap-2);
	color: var(--bcc-accent-text);
}
.bcc-checkout-page__sub {
	font-family: var(--bcc-font-sub);
	font-size: .85rem; text-transform: uppercase; letter-spacing: .08em;
	color: var(--bcc-ink-subtle); margin: 0;
}

/* Two-column layout — main left / sticky sidebar right */
.bcc-checkout-grid {
	display: grid; gap: var(--bcc-gap-6);
	grid-template-columns: 1fr;
}
@media (min-width: 980px) {
	.bcc-checkout-grid {
		grid-template-columns: minmax(0, 1fr) 400px;
		gap: var(--bcc-gap-7); align-items: start;
	}
}
.bcc-checkout-main { display: flex; flex-direction: column; gap: var(--bcc-gap-5); }

/* CARD container */
.bcc-checkout-card {
	background: var(--bcc-surface);
	border: 1px solid var(--bcc-rule);
	border-radius: var(--bcc-radius-lg);
	overflow: hidden;
}
.bcc-checkout-card--sticky {
	position: sticky; top: 96px;
}
.bcc-checkout-card--compact .bcc-checkout-card__body { padding: var(--bcc-gap-4); }
.bcc-checkout-card__head {
	display: flex; align-items: center; gap: var(--bcc-gap-3);
	padding: var(--bcc-gap-4) var(--bcc-gap-5);
	border-bottom: 1px solid var(--bcc-rule);
	background: var(--bcc-bg);
}
.bcc-checkout-card__head h2 {
	font-size: 1.4rem; line-height: 1; margin: 0;
	color: var(--bcc-accent-text);
}
.bcc-checkout-card__step {
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px;
	border-radius: 50%;
	background: var(--bcc-accent-wash); color: var(--bcc-deep); /* gold bg stays gold in dark → keep bark */
	font-family: var(--bcc-font-display); font-size: 1.1rem;
	flex-shrink: 0;
}
.bcc-checkout-card__body { padding: var(--bcc-gap-5); }
.bcc-checkout-card__body--toggle { padding: var(--bcc-gap-4) var(--bcc-gap-5); }
.bcc-checkout-card__body--summary { padding: var(--bcc-gap-4); }

/* Half-width side-by-side row */
.bcc-checkout-row { display: grid; grid-template-columns: 1fr; gap: var(--bcc-gap-4); }
@media (min-width: 560px) {
	.bcc-checkout-row--half { grid-template-columns: 1fr 1fr; }
}
.bcc-checkout-row .form-row { margin-bottom: 0; }

/* ── 27. WC form field skin (used inside checkout cards) ──────────── */

.bcc-checkout-form .form-row {
	margin: 0 0 var(--bcc-gap-4);
	display: block; width: 100%;
}
.bcc-checkout-form .form-row:last-child { margin-bottom: 0; }
.bcc-checkout-form .form-row label {
	display: block;
	font-family: var(--bcc-font-sub);
	font-size: .75rem; text-transform: uppercase; letter-spacing: .08em;
	color: var(--bcc-ink-subtle);
	margin-bottom: .4rem;
	font-weight: 500;
}
.bcc-checkout-form .form-row label .required {
	color: var(--bcc-accent); border: 0; text-decoration: none; margin-left: 4px;
}
.bcc-checkout-form .form-row label .optional {
	color: var(--bcc-ink-subtle); font-weight: 400; font-style: italic;
}
.bcc-checkout-form .woocommerce-input-wrapper { display: block; width: 100%; }
.bcc-checkout-form .form-row input.input-text,
.bcc-checkout-form .form-row textarea,
.bcc-checkout-form .form-row select {
	width: 100%;
	padding: .8rem 1rem;
	border: 1.5px solid var(--bcc-rule);
	border-radius: var(--bcc-radius);
	font-family: var(--bcc-font-body);
	font-size: 1rem;
	color: var(--bcc-ink);
	background: var(--bcc-bg);
	transition: border-color .15s, background-color .15s;
}
.bcc-checkout-form .form-row input.input-text:focus,
.bcc-checkout-form .form-row textarea:focus,
.bcc-checkout-form .form-row select:focus {
	outline: none;
	border-color: var(--bcc-accent-wash);
	background: var(--bcc-surface);
}
.bcc-checkout-form .form-row input.input-text::placeholder { color: #a89e8a; }
.bcc-checkout-form .form-row.bcc-field--short input { max-width: 220px; }
.bcc-checkout-form .form-row.woocommerce-invalid input.input-text,
.bcc-checkout-form .form-row.woocommerce-invalid textarea,
.bcc-checkout-form .form-row.woocommerce-invalid select {
	border-color: var(--bcc-claret);
	background: var(--bcc-claret-soft);
}
.bcc-checkout-form .form-row.woocommerce-validated input.input-text {
	border-color: var(--bcc-accent);
}

/* Squash WC's "form-row-first/last" — we use our own .bcc-checkout-row */
.bcc-checkout-form .form-row-first,
.bcc-checkout-form .form-row-last,
.bcc-checkout-form .form-row-wide { width: 100%; float: none; }

/* Toggle ("Billing same as delivery") */
.bcc-checkout-toggle {
	display: flex; align-items: center; gap: .75rem;
	cursor: pointer; user-select: none;
	font-family: var(--bcc-font-body);
	color: var(--bcc-ink);
}
.bcc-checkout-toggle input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.bcc-checkout-toggle__visual {
	display: inline-block; width: 22px; height: 22px;
	border: 1.5px solid var(--bcc-ink);
	border-radius: 4px;
	position: relative;
	flex-shrink: 0;
	transition: background-color .15s, border-color .15s;
}
.bcc-checkout-toggle__visual::after {
	content: '';
	position: absolute; left: 5px; top: 2px;
	width: 7px; height: 12px;
	border: solid var(--bcc-bg);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(0);
	transition: transform .15s var(--bcc-ease);
}
.bcc-checkout-toggle input:checked + .bcc-checkout-toggle__visual {
	background: var(--bcc-deep);
	border-color: var(--bcc-deep);
}
.bcc-checkout-toggle input:checked + .bcc-checkout-toggle__visual::after { transform: rotate(45deg) scale(1); }
.bcc-checkout-toggle__label { font-size: .95rem; }

/* Coupon — compact field + button on one row */
.bcc-checkout-coupon {
	display: flex; gap: var(--bcc-gap-2);
	align-items: stretch;
}
.bcc-checkout-coupon__input {
	flex: 1;
	border: 1.5px solid var(--bcc-rule);
	border-radius: var(--bcc-radius-pill);
	padding: .6rem 1rem;
	font-family: var(--bcc-font-sub);
	font-size: .9rem; color: var(--bcc-ink);
	background: var(--bcc-bg);
	transition: border-color .15s;
}
.bcc-checkout-coupon__input:focus { outline: none; border-color: var(--bcc-accent-wash); background: var(--bcc-surface); }
.bcc-checkout-coupon__btn {
	font-family: var(--bcc-font-sub); font-weight: 500;
	text-transform: uppercase; letter-spacing: .06em;
	font-size: .85rem;
	padding: .6rem 1.1rem .5rem;
	background: var(--bcc-ink); color: var(--bcc-bg);
	border: 0; border-radius: var(--bcc-radius-pill);
	cursor: pointer;
	transition: background-color .15s, transform .15s var(--bcc-ease);
}
.bcc-checkout-coupon__btn:hover { background: var(--bcc-accent); transform: translateY(-1px); }
.bcc-checkout-coupon__btn:disabled { opacity: .6; cursor: wait; transform: none; }

/* WC notices (success / error / message) inside checkout */
.bcc-checkout-form .woocommerce-NoticeGroup,
.bcc-checkout-form .woocommerce-error,
.bcc-checkout-form .woocommerce-message,
.bcc-checkout-form .woocommerce-info {
	margin: 0 0 var(--bcc-gap-5);
	padding: .85rem 1.1rem;
	border-radius: var(--bcc-radius);
	font-family: var(--bcc-font-body);
	font-size: .95rem;
	list-style: none;
}
.bcc-checkout-form .woocommerce-error { background: var(--bcc-claret-soft); border: 1px solid var(--bcc-claret); color: var(--bcc-error-text); }
.bcc-checkout-form .woocommerce-message { background: var(--bcc-accent-soft); border: 1px solid var(--bcc-accent-wash); color: var(--bcc-link-hover); }
.bcc-checkout-form .woocommerce-info { background: var(--bcc-surface-2); border: 1px solid var(--bcc-rule); color: var(--bcc-ink); }
.bcc-checkout-form .woocommerce-error li,
.bcc-checkout-form .woocommerce-message li,
.bcc-checkout-form .woocommerce-info li { list-style: none; margin: 0; }

/* ── 28. Review-order (sidebar) ───────────────────────────────────── */

.bcc-review { display: block; }
.bcc-review__items {
	list-style: none; padding: 0; margin: 0 0 var(--bcc-gap-4);
	border-bottom: 1px solid var(--bcc-rule);
}
.bcc-review__item {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	gap: var(--bcc-gap-3);
	padding: var(--bcc-gap-3) 0;
	border-bottom: 1px solid var(--bcc-rule);
	align-items: center;
}
.bcc-review__item:last-child { border-bottom: 0; }
.bcc-review__img {
	width: 56px; height: 56px;
	border-radius: var(--bcc-radius);
	background: var(--bcc-surface-2);
	object-fit: contain; padding: 4px;
}
.bcc-review__img--placeholder { display: block; }
.bcc-review__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bcc-review__name {
	font-family: var(--bcc-font-sub); font-weight: 600;
	color: var(--bcc-ink); font-size: .9rem; line-height: 1.2;
}
.bcc-review__flavour {
	font-family: var(--bcc-font-sub); font-weight: 500;
	color: var(--bcc-accent); font-size: .82rem;
}
.bcc-review__meta {
	font-family: var(--bcc-font-sub);
	font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
	color: var(--bcc-ink-subtle);
}
.bcc-review__right {
	display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
	min-width: 64px;
}
.bcc-review__qty {
	font-family: var(--bcc-font-sub); font-size: .8rem;
	color: var(--bcc-ink-subtle);
}
.bcc-review__price {
	font-family: var(--bcc-font-sub); font-weight: 600; font-size: 1.1rem;
	color: var(--bcc-accent-text); line-height: 1;
}

/* Totals */
.bcc-review__totals { margin: 0 0 var(--bcc-gap-4); }
.bcc-review__row {
	display: flex; justify-content: space-between; align-items: baseline; gap: .75rem;
	padding: .35rem 0;
	font-family: var(--bcc-font-body);
	font-size: .95rem;
	color: var(--bcc-ink);
}
.bcc-review__row span:first-child { color: var(--bcc-ink-subtle); }
.bcc-review__val { font-weight: 600; color: var(--bcc-ink); }
.bcc-review__row--discount .bcc-review__val { color: var(--bcc-link-hover); }
.bcc-review__row--shipping .bcc-review__val { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.bcc-review__shipping-method {
	display: inline-flex; align-items: center; gap: .35rem;
	color: var(--bcc-accent); font-weight: 600;
	text-transform: uppercase; letter-spacing: .04em; font-size: .8rem;
}
.bcc-review__shipping-tick {
	display: inline-flex; align-items: center; justify-content: center;
	width: 16px; height: 16px;
	background: var(--bcc-accent); color: #fff; border-radius: 50%;
	font-size: .7rem; font-weight: 700;
}
.bcc-review__shipping-hint {
	font-size: .7rem; color: var(--bcc-ink-subtle);
	font-family: var(--bcc-font-body); text-transform: none; letter-spacing: 0;
}
.bcc-review__row--total {
	border-top: 1px solid var(--bcc-rule);
	margin-top: var(--bcc-gap-2);
	padding-top: var(--bcc-gap-3);
}
.bcc-review__row--total span:first-child {
	font-family: var(--bcc-font-sub); font-weight: 600;
	text-transform: uppercase; letter-spacing: .06em;
	color: var(--bcc-ink); font-size: .85rem;
}
.bcc-review__row--total .bcc-review__val {
	font-family: var(--bcc-font-display);
	font-size: 1.6rem;
	color: var(--bcc-accent-text);
}

/* Estimated delivery line under totals */
.bcc-review__delivery {
	display: flex; align-items: center; gap: .65rem;
	padding: var(--bcc-gap-3) var(--bcc-gap-4);
	background: var(--bcc-surface-2);
	border-radius: var(--bcc-radius);
	font-size: .85rem;
	color: var(--bcc-ink);
	margin-top: var(--bcc-gap-3);
}
.bcc-review__delivery-icon { font-size: 1.1rem; color: var(--bcc-accent); }
.bcc-review__delivery strong { color: var(--bcc-accent-text); font-weight: 600; }

/* ── 29. Payment fragment + Place Order button ────────────────────── */

.bcc-review__payment { margin-top: var(--bcc-gap-5); }
.bcc-review__section-title {
	font-family: var(--bcc-font-sub);
	font-size: .85rem;
	text-transform: uppercase; letter-spacing: .1em;
	color: var(--bcc-ink-subtle);
	margin: 0 0 var(--bcc-gap-3);
	font-weight: 600;
}

/* Payment methods list (WooPayments etc.) */
.bcc-review__methods {
	list-style: none; padding: 0; margin: 0 0 var(--bcc-gap-4);
	display: flex; flex-direction: column; gap: var(--bcc-gap-2);
}
.bcc-review__methods li.wc_payment_method {
	background: var(--bcc-bg);
	border: 1.5px solid var(--bcc-rule);
	border-radius: var(--bcc-radius);
	padding: var(--bcc-gap-3) var(--bcc-gap-4);
	transition: border-color .15s, background-color .15s;
}
.bcc-review__methods li.wc_payment_method:has(input:checked) {
	border-color: var(--bcc-accent-wash);
	background: var(--bcc-surface);
}
.bcc-review__methods label[for^="payment_method"] {
	display: flex; align-items: center; gap: .5rem;
	font-family: var(--bcc-font-sub); font-weight: 500;
	text-transform: uppercase; letter-spacing: .04em;
	font-size: .85rem; color: var(--bcc-ink);
	cursor: pointer;
}
.bcc-review__methods img { max-height: 22px; width: auto; }
.bcc-review__methods .payment_box {
	margin-top: var(--bcc-gap-3);
	padding-top: var(--bcc-gap-3);
	border-top: 1px dashed var(--bcc-rule);
	font-family: var(--bcc-font-body);
	font-size: .9rem;
}
.bcc-review__payment-empty {
	font-size: .9rem; color: var(--bcc-ink-subtle); padding: var(--bcc-gap-3);
}

/* Terms */
.bcc-review__terms {
	font-size: .85rem;
	color: var(--bcc-ink-subtle);
	margin-bottom: var(--bcc-gap-4);
}
.bcc-review__terms a { color: var(--bcc-accent); text-decoration: underline; }
.bcc-review__terms label { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }

/* PLACE ORDER button — big, two-line: label + total */
.bcc-checkout-place-order {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--bcc-gap-3);
	width: 100%;
	background: var(--bcc-accent); color: #fff;
	border: 0; border-radius: var(--bcc-radius-pill);
	padding: 1rem 1.5rem .85rem;
	font-family: var(--bcc-font-sub); font-weight: 600;
	text-transform: uppercase; letter-spacing: .08em;
	font-size: 1rem;
	cursor: pointer;
	transition: background-color .15s, transform .15s var(--bcc-ease), box-shadow .15s;
	box-shadow: 0 8px 20px rgba(201,112,22,.28);
}
.bcc-checkout-place-order:hover {
	background: var(--bcc-accent-deep);
	transform: translateY(-1px);
	box-shadow: 0 12px 28px rgba(201,112,22,.36);
}
.bcc-checkout-place-order:disabled,
.bcc-checkout-place-order.loading {
	opacity: .7; cursor: wait; transform: none;
}
.bcc-checkout-place-order__total {
	font-family: var(--bcc-font-display);
	font-size: 1.4rem;
	text-transform: none; letter-spacing: 0;
	color: #fff;
	white-space: nowrap;
}
.bcc-checkout-place-order__total .woocommerce-Price-amount { color: #fff; }

/* ── 30. Login card (top of checkout when login reminder enabled) ── */

.bcc-checkout-login {
	margin-bottom: var(--bcc-gap-5);
}
.bcc-checkout-login__prompt {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--bcc-gap-4);
}
.bcc-checkout-login__copy { display: flex; flex-direction: column; gap: 2px; }
.bcc-checkout-login__copy strong { color: var(--bcc-ink); font-family: var(--bcc-font-sub); font-weight: 600; }
.bcc-checkout-login__copy small { color: var(--bcc-ink-subtle); font-size: .85rem; }
.bcc-checkout-login__cta {
	font-family: var(--bcc-font-sub); text-transform: uppercase; letter-spacing: .06em;
	font-size: .85rem;
	padding: .5rem 1rem .35rem;
	background: transparent; color: var(--bcc-accent-text);
	border: 1.5px solid var(--bcc-deep); border-radius: var(--bcc-radius-pill);
	transition: background-color .15s, color .15s;
}
.bcc-checkout-login__cta:hover { background: var(--bcc-deep); color: #fff; }
.bcc-checkout-login__form {
	padding: var(--bcc-gap-4) var(--bcc-gap-5) var(--bcc-gap-5);
	border-top: 1px solid var(--bcc-rule);
	background: var(--bcc-bg);
}
.bcc-checkout-login__fields {
	display: grid; gap: var(--bcc-gap-3);
	grid-template-columns: 1fr;
	margin-bottom: var(--bcc-gap-4);
}
@media (min-width: 560px) { .bcc-checkout-login__fields { grid-template-columns: 1fr 1fr; } }
.bcc-checkout-login__field label {
	display: block;
	font-family: var(--bcc-font-sub);
	font-size: .75rem; text-transform: uppercase; letter-spacing: .08em;
	color: var(--bcc-ink-subtle); margin-bottom: .4rem;
	font-weight: 500;
}
.bcc-checkout-login__field input {
	width: 100%;
	padding: .8rem 1rem;
	border: 1.5px solid var(--bcc-rule);
	border-radius: var(--bcc-radius);
	font-family: var(--bcc-font-body); font-size: 1rem;
	color: var(--bcc-ink); background: var(--bcc-surface);
}
.bcc-checkout-login__field input:focus { outline: none; border-color: var(--bcc-accent-wash); }
.bcc-checkout-login__actions {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--bcc-gap-3);
}
.bcc-checkout-login__remember {
	display: inline-flex; align-items: center; gap: .4rem;
	font-size: .85rem; color: var(--bcc-ink); cursor: pointer;
}
.bcc-checkout-login__lost {
	margin-left: auto;
	font-family: var(--bcc-font-sub); font-size: .8rem;
	color: var(--bcc-accent);
	text-transform: uppercase; letter-spacing: .04em;
}
.bcc-checkout-login__lost:hover { color: var(--bcc-link-hover); }

/* ── 31. Pay-for-order form ───────────────────────────────────────── */

.bcc-pay-form .bcc-review {
	background: var(--bcc-surface);
	border: 1px solid var(--bcc-rule);
	border-radius: var(--bcc-radius-lg);
	padding: var(--bcc-gap-5);
	margin-bottom: var(--bcc-gap-5);
}
.bcc-review__payment--pay {
	background: var(--bcc-surface);
	border: 1px solid var(--bcc-rule);
	border-radius: var(--bcc-radius-lg);
	padding: var(--bcc-gap-5);
}

/* ── 32. Countdown copy (lives inside .bcc-utility, alpha.42) ─────────
   alpha.42 (2026-05-17): The standalone .bcc-countdown-band block was
   removed when the utility strip + countdown were merged into one mast.
   Only the per-element styles remain — they work wherever the countdown
   markup is rendered (currently .bcc-utility, possibly PDP USP line). */

.bcc-countdown-band__pulse {
	width: 8px; height: 8px; border-radius: 50%;
	/* 2026-05-20: was var(--bcc-flav-chilli) (#99242D cardinal red) which
	   still read as a dark dim spot on solid black — the pulse anim drops
	   opacity to .4 at the trough, which made it near-invisible on the
	   dark base. Switched to --bcc-accent-wash (pale crimson #e5b9bd),
	   matching the adjacent bold-text highlights ("23h 15m", "Friday")
	   for a single accent treatment across the band, and bright enough
	   on black that the pulse animation actually reads. */
	background: var(--bcc-accent-wash);
	animation: bcc-pulse 2s infinite;
	flex-shrink: 0;
}
.bcc-countdown-band__copy strong {
	font-weight: 700;
	font-family: var(--bcc-font-sub);
}

/* ── 33. Header actions (account menu + cart pill) ────────────────── */

.bcc-header-actions {
	display: flex; align-items: center; gap: var(--bcc-gap-3);
	justify-self: end;
}

.bcc-header-cart__label { display: none; }
@media (min-width: 768px) { .bcc-header-cart__label { display: inline; } }
.bcc-header-cart svg { width: 16px; height: 16px; }

/* Account menu (dropdown from "Sign in" / "Account" button) */
.bcc-account-menu { position: relative; }
.bcc-account-menu__trigger {
	display: inline-flex; align-items: center; gap: .4rem;
	background: transparent; border: 1.5px solid var(--bcc-ink);
	color: var(--bcc-ink);
	font-family: var(--bcc-font-sub); text-transform: uppercase;
	letter-spacing: .06em; font-size: .85rem;
	padding: .5rem .85rem .35rem;
	border-radius: var(--bcc-radius-pill);
	cursor: pointer;
	transition: background-color .15s, color .15s;
}
.bcc-account-menu__trigger:hover { background: var(--bcc-ink); color: var(--bcc-bg); }
.bcc-account-menu__trigger svg { width: 16px; height: 16px; }
.bcc-account-menu__label { display: none; }
@media (min-width: 768px) { .bcc-account-menu__label { display: inline; } }

.bcc-account-menu__panel {
	position: absolute; top: calc(100% + .5rem); right: 0;
	width: min(320px, calc(100vw - 2rem));
	background: var(--bcc-surface);
	border: 1px solid var(--bcc-rule);
	border-radius: var(--bcc-radius-lg);
	box-shadow: 0 22px 48px rgba(26,20,17,.22);
	padding: var(--bcc-gap-4);
	z-index: 60;
	/* alpha.17: smooth open — was snapping via display:none → block. */
	opacity: 0;
	transform: translateY(-6px) scale(.98);
	pointer-events: none;
	transform-origin: top right;
	transition:
		opacity .18s var(--bcc-ease),
		transform .22s cubic-bezier(.2,.85,.25,1.05);
}
.bcc-account-menu.is-open .bcc-account-menu__panel {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

.bcc-account-menu__greeting,
.bcc-account-menu__intro {
	display: flex; flex-direction: column; gap: 2px;
	padding-bottom: var(--bcc-gap-3);
	border-bottom: 1px solid var(--bcc-rule);
	margin-bottom: var(--bcc-gap-3);
}
.bcc-account-menu__greeting strong,
.bcc-account-menu__intro strong {
	font-family: var(--bcc-font-display);
	font-size: 1.2rem;
	color: var(--bcc-accent-text);
	text-transform: uppercase;
}
.bcc-account-menu__greeting small,
.bcc-account-menu__intro small { color: var(--bcc-ink-subtle); font-size: .85rem; }

.bcc-account-menu__links { list-style: none; padding: 0; margin: 0 0 var(--bcc-gap-3); }
.bcc-account-menu__links li { padding: 0; margin-bottom: .35rem; }
.bcc-account-menu__links li a {
	display: block;
	font-family: var(--bcc-font-sub);
	font-size: .9rem;
	color: var(--bcc-ink);
	padding: .5rem .65rem;
	border-radius: var(--bcc-radius);
	transition: background-color .15s, color .15s;
}
.bcc-account-menu__links li a:not(.bcc-btn):hover {
	background: var(--bcc-surface-2); color: var(--bcc-accent-text);
}
.bcc-account-menu__links li .bcc-btn { width: 100%; justify-content: center; }
.bcc-account-menu__foot { font-size: .8rem; color: var(--bcc-ink-subtle); text-align: center; padding-top: var(--bcc-gap-2); border-top: 1px solid var(--bcc-rule); }

/* ── 34. Theme toggle — alpha.10: segmented chip (BCC pattern) ──
   Reverted from the popover; segmented chip is clearer at a glance. Re-tuned
   to BCC tokens: subtle outline, all three buttons visible at once, active
   state fills with accent-soft + bark ink. Compact (24px buttons) so
   it doesn't shout. */
.bcc-theme-toggle {
	display: inline-flex; align-items: center;
	gap: 2px; padding: 3px;
	border-radius: var(--bcc-radius-pill);
	background: rgba(28, 24, 22, 0.05);
	border: 1px solid var(--bcc-rule);
}
.bcc-theme-toggle button {
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px;
	background: transparent;
	border: 0; border-radius: var(--bcc-radius-pill);
	color: var(--bcc-ink-subtle); opacity: .65;
	cursor: pointer;
	transition: opacity .12s, color .12s, background-color .12s;
}
.bcc-theme-toggle button:hover,
.bcc-theme-toggle button:focus-visible { opacity: .95; color: var(--bcc-accent-text); }
.bcc-theme-toggle button.is-active,
.bcc-theme-toggle button[aria-pressed="true"] {
	opacity: 1; color: var(--bcc-accent-text);
	background: var(--bcc-accent-soft);
	box-shadow: inset 0 0 0 1px rgba(217, 160, 91, 0.55);
}
.bcc-theme-toggle svg { width: 14px; height: 14px; }
[data-theme="dark"] .bcc-theme-toggle {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .bcc-theme-toggle button.is-active {
	background: rgba(217, 160, 91, 0.16); color: var(--bcc-accent-wash);
}

/* ── 35. Content pages — Story, Press, FAQ ────────────────────────── */

.bcc-story-hero {
	padding: var(--bcc-gap-8) var(--bcc-edge);
	background: transparent;
	position: relative; overflow: hidden;
	text-align: center;
}
.bcc-story-hero::before {
	background-color: var(--bcc-damask-tint-tonal);
	-webkit-mask-size: var(--bcc-damask-tile-lg);
	mask-size: var(--bcc-damask-tile-lg);
}
.bcc-story-hero::after {
	content: '';
	position: absolute; inset: 0;
	background: radial-gradient(ellipse 70% 80% at 50% 0%, var(--bcc-accent-soft) 0%, transparent 60%);
	pointer-events: none;
}
.bcc-story-hero__inner {
	position: relative; z-index: 1;
	max-width: var(--bcc-container);
	margin: 0 auto;
}
.bcc-story-hero h1 {
	font-size: clamp(2.5rem, 5vw + 1rem, 5rem);
	color: var(--bcc-accent-text);
	margin: var(--bcc-gap-3) 0 var(--bcc-gap-4);
}
/* alpha.SEO+ (2026-05-18): preserve the two-tone heading split in dark mode.
   --bcc-accent-text auto-swaps to accent in dark mode, but .bcc-display em
   is fixed at accent too — so dark mode "Frequently <em>asked</em>" had
   both halves collapsing to the same colour. Use --bcc-ink (off-white in
   dark) for the base heading so the em emphasis still pops as accent.
   Same pattern as .bcc-pdp__name dark override. */
[data-theme="dark"] .bcc-story-hero h1,
[data-theme="dark"] .bcc-archive-hero h1 {
	color: var(--bcc-ink);
}
.bcc-story-hero__lede {
	/* Accent-coloured lede — brand chilli-deep on cream paper, lifted
	   pale crimson on dark. Italics removed per JH; the accent +
	   weight + relaxed line-height differentiate it from body. */
	font-family: var(--bcc-font-sub); font-weight: 500;
	font-size: clamp(1.1rem, 1.3vw + 1rem, 1.45rem);
	color: var(--bcc-accent);
	max-width: 30em; margin: 0 auto;
	text-transform: none;
	line-height: 1.45;
}
[data-theme="dark"] .bcc-story-hero__lede {
	color: var(--bcc-accent-wash);
}

/* alpha.47 (2026-05-18): refactored from "narrow .bcc-story-body section"
   to "full-width section + 44rem children" so a damask ::before can fill
   the section edge-to-edge (matches .bcc-faq's alpha.44e refactor). The
   max-width:44rem and auto-margins live on direct children now instead of
   the article itself. z-index:1 lifts the children above the damask. */
.bcc-story-body {
	padding: var(--bcc-gap-8) var(--bcc-edge);
	position: relative;
	overflow: hidden;
}
.bcc-story-body::before {
	background-color: var(--bcc-damask-tint-whisper);
	-webkit-mask-size: var(--bcc-damask-tile-lg);
	mask-size: var(--bcc-damask-tile-lg);
	z-index: 0;
}
.bcc-story-body > * {
	max-width: 44rem;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	z-index: 1;
}
.bcc-story-body p {
	font-size: var(--bcc-body-lg);
	color: var(--bcc-ink);
	margin-bottom: var(--bcc-gap-5);
	line-height: 1.65;
}
.bcc-story-body p:first-child::first-letter {
	font-family: var(--bcc-font-display);
	font-size: 4rem; line-height: .85;
	float: left; padding: .25rem .5rem 0 0;
	color: var(--bcc-accent-text);
	font-style: normal;
}

.bcc-story-body h2 {
	font-size: var(--bcc-display-md);
	color: var(--bcc-accent-text);
	/* alpha.47 (2026-05-18): left/right margin set to auto so the h2 stays
	   centred inside the 44rem content column. Was `0` and that won the
	   specificity battle against `.bcc-story-body > * { margin: auto }`. */
	margin: var(--bcc-gap-7) auto var(--bcc-gap-4);
}

.bcc-story-pillars {
	/* 2026-05-20: was background: var(--bcc-surface) — a solid cream
	   that blocked the body's paper-grain texture from showing through,
	   making this section read as a flat slab between two textured
	   neighbours. Switched to transparent so the body paper grain shows
	   through and the damask ::before paints on top of it, matching the
	   treatment of every other section (.bcc-cats, .bcc-archive-hero,
	   .bcc-faq etc.). */
	background: transparent;
	border-top: 1px solid var(--bcc-rule);
	border-bottom: 1px solid var(--bcc-rule);
	padding: var(--bcc-gap-8) var(--bcc-edge);
	position: relative; overflow: hidden;
}
.bcc-story-pillars::before {
	background-color: var(--bcc-damask-tint-tonal);
	-webkit-mask-size: var(--bcc-damask-tile-md);
	mask-size: var(--bcc-damask-tile-md);
}
.bcc-story-pillars__grid {
	position: relative; z-index: 1;
	max-width: var(--bcc-container-wide);
	margin: 0 auto;
	display: grid; gap: var(--bcc-gap-6);
	grid-template-columns: 1fr;
}
/* 4 pillars — switch from 1 → 2 → 4 columns. Was 1 → 3, which left
   the fourth tile alone on its own row. */
/* 2026-05-19: condensed 4 pillars to 3 (Brit production + Renewable
   merged into one). Mirrors AP's pillar grid exactly (1 col mobile,
   3 col at 760px). Dropped the 2-col intermediate stage AP doesn't use. */
@media (min-width: 760px) { .bcc-story-pillars__grid { grid-template-columns: repeat(3, 1fr); } }
.bcc-story-pillar h3 {
	font-family: var(--bcc-font-display);
	font-size: var(--bcc-display-md);
	color: var(--bcc-accent-text);
	margin-bottom: var(--bcc-gap-3);
}
.bcc-story-pillar h3 em { color: var(--bcc-accent); font-style: normal; font-weight: normal; }
[data-theme="dark"] .bcc-story-pillar h3 em { color: var(--bcc-accent-wash); }
.bcc-story-pillar p { color: var(--bcc-ink-subtle); margin: 0; }

/* alpha.47 (2026-05-18): damask added — matches .bcc-story-pillars
   sandwich so the whole Our Story page reads consistently. */
.bcc-story-factory {
	padding: var(--bcc-gap-8) var(--bcc-edge);
	/* 2026-05-20: was background: var(--bcc-bg) — solid cream that
	   blocked the body paper-grain. Switched to transparent so the
	   paper texture continues through this section unbroken, with the
	   damask ::before painting on top. Same fix as .bcc-story-pillars
	   above; both story sections now behave like every other textured
	   section on the site. */
	background: transparent;
	position: relative;
	overflow: hidden;
}
.bcc-story-factory::before {
	background-color: var(--bcc-damask-tint-whisper);
	-webkit-mask-size: var(--bcc-damask-tile-lg);
	mask-size: var(--bcc-damask-tile-lg);
	z-index: 0;
}
.bcc-story-factory__inner {
	max-width: var(--bcc-container-wide);
	margin: 0 auto;
	display: grid; gap: var(--bcc-gap-7);
	grid-template-columns: 1fr;
	align-items: center;
	position: relative;
	z-index: 1;
}
@media (min-width: 800px) { .bcc-story-factory__inner { grid-template-columns: 1fr 1fr; } }
.bcc-story-factory__img {
	border-radius: var(--bcc-radius-lg);
	overflow: hidden;
	/* 2026-05-19: box-shadow removed — image sits flat on the paper canvas. */
}
.bcc-story-factory__img img { width: 100%; height: auto; display: block; }
.bcc-story-factory__text h2 { color: var(--bcc-accent-text); margin-bottom: var(--bcc-gap-4); }
.bcc-story-factory__text p { font-size: var(--bcc-body-lg); color: var(--bcc-ink); margin-bottom: var(--bcc-gap-3); }
.bcc-story-factory__signoff {
	font-family: var(--bcc-font-sub); font-style: italic; font-weight: 500;
	font-size: 1.25rem;
	color: var(--bcc-accent);
	margin-top: var(--bcc-gap-5);
	line-height: 1.4;
}

/* PRESS page styles removed in alpha.20 — Press page deleted (unverified quotes). */

/* FAQ — alpha.10: flat Q+A list, no accordion. Each Q is a Cutive Mono caps
   line in bark; A sits beneath in Public Sans body. Items separated by
   hairline rules, plenty of vertical space so the page breathes. */
/* alpha.44e (2026-05-18): refactored to avoid viewport-wide bleed. Was:
   .bcc-faq carried max-width:44rem (narrow content column) AND used
   `::before { inset: -1px -100vw }` to fake an edge-to-edge damask.
   That bleed overflowed the viewport and html { overflow-x: hidden }
   didn't reliably catch it (some descendant containing-block escape).
   Now: .bcc-faq is a normal full-width section (padding only, no
   max-width). The 44rem centering moves to .bcc-faq__list which is the
   actual content container. ::before just fills its parent normally,
   no bleed needed — same visual outcome, no overflow risk. */
.bcc-faq {
	padding: var(--bcc-gap-8) var(--bcc-edge);
	position: relative;
	overflow: hidden;
}
.bcc-faq::before {
	background-color: var(--bcc-damask-tint-whisper);
	-webkit-mask-size: var(--bcc-damask-tile-lg);
	mask-size: var(--bcc-damask-tile-lg);
	z-index: -1;
}
.bcc-faq__list {
	max-width: 44rem;
	margin: 0 auto;
	position: relative; z-index: 1;
	display: flex; flex-direction: column; gap: var(--bcc-gap-6);
}
.bcc-faq__item {
	border-bottom: 1px solid var(--bcc-rule);
	padding-bottom: var(--bcc-gap-5);
}
.bcc-faq__item:last-child { border-bottom: 0; }
.bcc-faq__q {
	font-family: var(--bcc-font-display);
	font-size: clamp(1.2rem, 1vw + 1rem, 1.5rem);
	color: var(--bcc-accent-text);
	text-transform: uppercase;
	letter-spacing: .01em;
	margin: 0 0 var(--bcc-gap-3);
}
.bcc-faq__answer {
	font-size: var(--bcc-body-lg);
	color: var(--bcc-ink);
	line-height: 1.6;
}
.bcc-faq__answer p { margin: 0 0 var(--bcc-gap-3); }
.bcc-faq__answer p:last-child { margin-bottom: 0; }

/* HOMEPAGE REVIEWS section (curated quotes) — Sweet Chilli wash.
   Customer voices want a warm welcome colour, not the cooler sea/sage.
   Chilli is the warmest flavour in the range so it does that job. */
.bcc-reviews {
	--bcc-section-accent: var(--bcc-flav-chilli-deep);
	--bcc-section-accent-dark: #d99e90;
	padding: var(--bcc-gap-8) var(--bcc-edge);
	background-color: transparent;
	background-image: linear-gradient(var(--bcc-wash-chilli), var(--bcc-wash-chilli));
	border-top: 1px solid var(--bcc-rule);
	border-bottom: 1px solid var(--bcc-rule);
	position: relative; overflow: hidden;
}
.bcc-reviews__inner {
	position: relative; z-index: 1;
	max-width: var(--bcc-container-wide); margin: 0 auto;
}
.bcc-reviews .bcc-eyebrow { color: var(--bcc-flav-chilli-deep); }
[data-theme="dark"] .bcc-reviews .bcc-eyebrow { color: #d99e90; }

/* PDP REVIEWS section — kept separate from homepage .bcc-reviews on
   purpose. Earlier (alpha.44d v1) the two shared a rule, but that made
   .bcc-pdp__reviews look identical to .bcc-pdp__story above it on the
   PDP (both white surface + tonal damask). Split rule: PDP reviews moves
   to --bcc-surface-2 cream so the PDP rhythm reads:
     story (white) → details (cream-bg) → related (cream-2) → reviews (cream-2)
   Story stays the "narrative intro" surface; the three lower sections
   are "supporting content" on the warmer cream. Damask whisper (not
   tonal) — cream-on-cream needs less pattern to read cleanly. */
.bcc-pdp__reviews {
	/* 2026-05-19: switched to plain transparent body bg (was surface-2 +
	   paper-light.jpg). Reviews sits between story (tint) and details
	   (tint) in the ABAB rhythm — plain body bg gives the rest beat. */
	padding: var(--bcc-gap-8) var(--bcc-edge);
	background: transparent;
	position: relative; overflow: hidden;
}
.bcc-pdp__reviews::before {
	background-color: var(--bcc-damask-tint-whisper);
	-webkit-mask-size: var(--bcc-damask-tile-md);
	mask-size: var(--bcc-damask-tile-md);
}
.bcc-pdp__reviews-inner {
	position: relative; z-index: 1;
	max-width: var(--bcc-container-wide); margin: 0 auto;
}
.bcc-reviews__grid {
	display: grid; gap: var(--bcc-gap-5);
	grid-template-columns: 1fr;
}
@media (min-width: 560px) { .bcc-reviews__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 920px) { .bcc-reviews__grid { grid-template-columns: repeat(3, 1fr); } }
/* 2026-05-19: temporary while only 2 reviews are populated — at the 3-col
   breakpoint, detect "exactly two cards" via :has() and switch to a centred
   2-col grid. Goes back to a 3-col layout automatically once a third
   bcc_review CPT entry publishes. */
@media (min-width: 920px) {
	.bcc-reviews__grid:has(.bcc-review-card:nth-child(2):last-child) {
		grid-template-columns: repeat(2, minmax(20rem, 28rem));
		justify-content: center;
	}
}
.bcc-review-card {
	background: var(--bcc-bg);
	border: 1px solid var(--bcc-rule);
	border-radius: var(--bcc-radius-lg);
	padding: var(--bcc-gap-5);
	display: flex; flex-direction: column; gap: var(--bcc-gap-3);
}
.bcc-review-card__stars { color: var(--bcc-accent-wash); font-size: 1.1rem; letter-spacing: .05em; }
.bcc-review-card__quote {
	font-family: var(--bcc-font-sub); font-style: italic; font-weight: 500;
	font-size: 1.05rem; line-height: 1.5;
	color: var(--bcc-ink);
	margin-inline: 0; padding-inline: 0; /* alpha.42 (2026-05-17): strip UA blockquote indent */
}
.bcc-review-card__meta {
	font-family: var(--bcc-font-sub);
	font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
	color: var(--bcc-ink-subtle);
	margin-top: auto;
	display: flex; justify-content: space-between;
}
.bcc-review-card__name { color: var(--bcc-accent-text); font-weight: 600; }
/* alpha.33: linked product label on homepage review cards. Eyebrow-style
   chip in accent so readers can see which SKU the quote belongs to. */
.bcc-review-card__product {
	display: inline-block;
	font-family: var(--bcc-font-sub);
	font-size: .72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--bcc-accent);
	border-bottom: 1px solid transparent;
	transition: border-color .15s var(--bcc-ease);
	margin: 6px 0 var(--bcc-gap-2);
	text-decoration: none;
}
a.bcc-review-card__product:hover { border-bottom-color: var(--bcc-accent-wash); }
[data-theme="dark"] .bcc-review-card__product { color: var(--bcc-accent-wash); }

/* ── 36. Dark theme — surface + ink overrides for components ────── */
/* Most components inherit via the token swap in :root. These are the
   surfaces where the swap wasn't enough — places that used hard-coded
   colours, gradients with hard rgba, or bark backgrounds that
   need a tonal shift in dark mode. */

[data-theme="dark"] {
	--bcc-bg:        #15110d;
	--bcc-surface:   #1f1813;
	--bcc-surface-2: #2a211a;
	--bcc-ink:        #ede1c5;
	--bcc-ink-subtle: #a89e8a;
	--bcc-rule:       #3a2e25;
	--bcc-accent-soft: #3a2a18;
	--bcc-deep-pale:  #2b1117;
	--bcc-claret-soft:    #2a1316;
}
/* alpha.SEO+ (2026-05-18): split — the off-right (78% 38%) glow is right
   for .bcc-hero (lights the floating bag in the homepage rotating
   carousel) but wrong for category pages, which have a centred title
   with no off-axis subject. Archive hero now mirrors the .bcc-story-hero
   + .bcc-faq pattern: centred horizontally, hanging just above the top
   so it fans down into the section. Consistent across Our Story / FAQ /
   category pages in dark mode. */
/* alpha.SEO+ (2026-05-18): all three heroes share the same centred dark-mode
   glow. Was previously: .bcc-hero off-right (78% 38%) to light the floating
   bag; archive/story centred. Standardised per JH — consistency across the
   site wins over the bag-lighting trick. */
[data-theme="dark"] .bcc-hero::after,
[data-theme="dark"] .bcc-archive-hero::after,
[data-theme="dark"] .bcc-story-hero::after {
	background: radial-gradient(ellipse 70% 80% at 50% -10%, rgba(217,160,91,.12) 0%, transparent 60%);
}
/* alpha.42 (2026-05-17): lift the flavour text in dark mode so it stays
   visible on the dark-tinted card bg, without losing the per-SKU colour
   identity. Mixes 70% flavour + 30% cream — subtle "lightened a bit". */
[data-theme="dark"] .bcc-product-card__flavour,
[data-theme="dark"] .bcc-related-card__flavour,
[data-theme="dark"] .bcc-pdp__flavour {
	color: color-mix(in srgb, var(--flavour-color, var(--bcc-accent)) 70%, var(--bcc-cream-stable));
}
/* alpha.44g (2026-05-18): dark-mode product imagery backdrops. The
   previous rule was malformed — a stray comment block split the
   selector list in two, leaving the FRAME selectors (image-frame /
   product-card__img / related-card__img) with NO dark-mode background
   override. They inherited the light-mode rgba(255,255,255,0.45)
   radial spotlight + the pastel --flavour-soft fill, which read as
   "too bright + washed" on dark surfaces. Also fixed: .bcc-related-
   card__img img img double-img typo (now single img).
   Light mode uses a 45% white spotlight; dark mode drops it to 8%
   over a flavour-tinted dark surface (color-mix flavour 22% with
   ink-rich) so each product card retains its colour identity without
   the bright glow. */
/* 2026-05-19: .bcc-pdp__image-frame dropped from this selector list —
   the PDP no longer carries a background box in either mode. Product
   cards + related-cards keep their dark-mode flavour-tinted surfaces
   because card-thumbnail context still benefits from a tinted hold. */
[data-theme="dark"] .bcc-product-card__img,
[data-theme="dark"] .bcc-related-card__img {
	background:
		radial-gradient(circle at 30% 30%, rgba(255,255,255,0.08) 0%, transparent 60%),
		color-mix(in srgb, var(--flavour-color, var(--bcc-accent)) 22%, var(--bcc-ink-rich));
}
/* alpha.SEO+ (2026-05-18): Pork Puffs flavour-colour (#2a2724 charcoal) is
   already near-black, so the 22% mix with --bcc-ink-rich (#1a1411) gives
   ~#1d1815 — visually indistinguishable from the body bg. Bump it: use a
   lighter warm-charcoal at higher mix percentage so the card has a clear
   "warm dark" identity in dark mode that matches the visual weight of
   the colour-bright flavours (Crackling blue, Scratchings copper, etc).
   Attribute selector targets the inline --flavour-color set by PHP.
   2026-05-19: .bcc-pdp__image-frame variant dropped — see note above. */
[data-theme="dark"] .bcc-product-card[style*="--flavour-color: #2a2724"] .bcc-product-card__img,
[data-theme="dark"] .bcc-related-card[style*="--flavour-color: #2a2724"] .bcc-related-card__img {
	background:
		radial-gradient(circle at 30% 30%, rgba(255,255,255,0.10) 0%, transparent 60%),
		color-mix(in srgb, #6a5e54 32%, var(--bcc-ink-rich));
}
/* alpha.46 (2026-05-18): .bcc-product-card__img img dropped from this
   selector — its hover scale transition triggers the same Safari rectangular-
   halo quirk in dark mode that it does in light mode. PDP image and
   related-card img have no transform animations, so the dark filter stays. */
[data-theme="dark"] .bcc-pdp__image,
[data-theme="dark"] .bcc-related-card__img img {
	filter: drop-shadow(0 16px 32px rgba(0,0,0,.45));
}
/* alpha.42 (2026-05-17): cream-pill backdrop removed. The pills made the
   marquee read as "logos in boxes" rather than a passive credibility
   strip. The alpha.30 worry that some PageSpeed-derived PNGs have opaque
   white backgrounds is addressed here without per-logo asset work:
   filter:invert(1) lifts black artwork to white AND inverts any opaque
   white background to black; then mix-blend-mode:screen blends that
   black-bg pixel with the dark page bg, making it invisible. Works for
   both transparent-bg and opaque-white-bg PNGs. */
[data-theme="dark"] .bcc-trust-logo {
	background: transparent;
	border-radius: 0;
	padding: 0;
	height: 32px;
}
[data-theme="dark"] .bcc-trust-logo img {
	/* 2026-05-20: was filter: contrast(1000) invert(1). contrast(1000) is
	   an extreme threshold-binarisation that pushes every pixel to either
	   pure black or pure white — which obliterates the anti-aliased grey
	   edge pixels on every letter and produces visible stairstep
	   jaggies. contrast(3) is enough to push the cream PNG background to
	   pure white (sources are ~95% lightness, contrast 3 saturates them)
	   while preserving the soft mid-grey transitions on text edges. The
	   invert + mix-blend-mode: screen chain still removes the formerly-
	   black-now-white area against the dark page. */
	filter: contrast(3) invert(1);
	mix-blend-mode: screen;
	opacity: .88;
}
[data-theme="dark"] .bcc-stockists-row img { filter: opacity(.8); }
[data-theme="dark"] .bcc-stockists-row a:hover img { filter: opacity(1); }
/* alpha.42 (2026-05-17): dark-mode override REMOVED. The light-mode
   bark utility strip applies in dark mode too — the brand colour
   IS the brand colour in both modes. Forcing it to #0a0805 was making
   the entire header chrome read as "various blacks" and erasing the
   bark anchor at the top of the page. */
[data-theme="dark"] .bcc-cta-band {
	/* 2026-05-19: use background-color (not the `background:` shorthand)
	   so the paper-dark.jpg texture set on .bcc-cta-band in main.css
	   survives this override. The shorthand resets background-image to
	   none, which was leaving the dark-mode CTA band as flat charcoal
	   while it had paper grain in light mode.
	   2026-05-19 (round 2): paper-dark.jpg is a fully opaque JPEG, so
	   the bg-color token underneath is invisible — trade, CTA, and
	   footer all rendered the same texture and looked identical despite
	   different bg-color values. Stack a translucent black overlay
	   ABOVE the texture so the CTA composites visibly darker than its
	   neighbours while keeping the brand paper grain readable. The
	   gradient is the dimming layer; the JPG is the texture beneath it. */
	background-color: var(--bcc-cta-band-bg-dark);
	background-image:
		linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
		url('paper-dark.jpg');
	background-size: auto, 350px;
	background-repeat: no-repeat, repeat;
}
[data-theme="dark"] .bcc-cta-band::before { opacity: .22; }
/* alpha.42b (2026-05-17): FAB now IDENTICAL in light + dark — same
   ink-rich pill, same accent-soft text, same accent count badge.
   The earlier dark-mode flip (accent → bark → here) was making the
   basket FAB read as a different component in each mode. Only the
   shadow lifts in dark mode so the pill stays defined against the
   dark page bg (the light-mode dark-ink shadow is invisible on a
   dark page). */
[data-theme="dark"] .bcc-fab__toggle {
	box-shadow:
		0 14px 32px rgba(0, 0, 0, 0.6),
		0 0 0 1px rgba(244, 227, 204, 0.10); /* subtle accent edge ring */
}
[data-theme="dark"] .bcc-page-content,
[data-theme="dark"] .bcc-checkout-form .form-row input.input-text,
[data-theme="dark"] .bcc-checkout-form .form-row textarea,
[data-theme="dark"] .bcc-checkout-form .form-row select,
[data-theme="dark"] .bcc-cart-coupon input,
[data-theme="dark"] .bcc-checkout-coupon__input {
	color: var(--bcc-ink);
}
[data-theme="dark"] .bcc-checkout-form .form-row input.input-text,
[data-theme="dark"] .bcc-checkout-form .form-row textarea,
[data-theme="dark"] .bcc-checkout-form .form-row select { background: var(--bcc-surface); }
[data-theme="dark"] .bcc-tabs__panel,
[data-theme="dark"] .bcc-faq__answer { color: var(--bcc-ink); }
[data-theme="dark"] .bcc-checkout-place-order { color: #fff; }
[data-theme="dark"] .bcc-checkout-place-order__total { color: #fff; }

/* ── 37. My Account — bespoke single-page dashboard ───────────────── */

.bcc-account {
	max-width: var(--bcc-container-wide);
	margin: 0 auto;
	padding: var(--bcc-gap-5) var(--bcc-gap-5) var(--bcc-gap-8);
}
.bcc-account__head {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: var(--bcc-gap-5);
	flex-wrap: wrap;
	margin-bottom: var(--bcc-gap-6);
}
.bcc-account__head h1 {
	font-size: clamp(2.4rem, 4vw + 1rem, 4rem);
	line-height: .95;
	color: var(--bcc-accent-text);
	margin-top: var(--bcc-gap-2);
}
.bcc-account__head h1 em { color: var(--bcc-accent); font-style: normal; font-weight: normal; }

/* Top rail — alpha.10: icon + label + optional badge.
   Was: a number/letter circle that read like a cipher (0 / 2 / J). */
.bcc-account-rail {
	display: flex; flex-wrap: wrap; gap: var(--bcc-gap-3);
	margin-bottom: var(--bcc-gap-7);
	padding: var(--bcc-gap-3);
	background: var(--bcc-surface);
	border: 1px solid var(--bcc-rule);
	border-radius: var(--bcc-radius-lg);
}
.bcc-account-rail__chip {
	position: relative;
	display: inline-flex; align-items: center; gap: .55rem;
	padding: .6rem 1.05rem;
	background: var(--bcc-bg);
	border: 1px solid var(--bcc-rule);
	border-radius: var(--bcc-radius-pill);
	transition: background-color .15s, border-color .15s, color .15s;
	color: var(--bcc-ink);
	text-decoration: none;
}
.bcc-account-rail__chip:hover {
	background: var(--bcc-accent-soft);
	border-color: var(--bcc-accent-wash);
	color: var(--bcc-accent-text);
}
.bcc-account-rail__icon {
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--bcc-accent-text);
}
.bcc-account-rail__icon svg { width: 16px; height: 16px; }
.bcc-account-rail__label {
	font-family: var(--bcc-font-sub); font-weight: 600;
	text-transform: uppercase; letter-spacing: .1em;
	font-size: .78rem;
}
.bcc-account-rail__badge {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 20px; height: 20px; padding: 0 6px;
	background: var(--bcc-deep); color: var(--bcc-accent-wash);
	border-radius: var(--bcc-radius-pill);
	font-family: var(--bcc-font-sub); font-weight: 700;
	font-size: .68rem; line-height: 1;
	margin-left: .2rem;
}

/* Section */
.bcc-account-section {
	background: var(--bcc-surface);
	border: 1px solid var(--bcc-rule);
	border-radius: var(--bcc-radius-lg);
	padding: var(--bcc-gap-6);
	margin-bottom: var(--bcc-gap-6);
	scroll-margin-top: 96px;
}
.bcc-account-section__head {
	display: flex; justify-content: space-between; align-items: center;
	margin-bottom: var(--bcc-gap-5);
	flex-wrap: wrap; gap: var(--bcc-gap-3);
}
.bcc-account-section__head h2 {
	font-size: clamp(1.6rem, 2vw + 1rem, 2.4rem);
	color: var(--bcc-accent-text);
	margin: 0;
}
.bcc-account-section__head h2 em { color: var(--bcc-accent); font-style: normal; font-weight: normal; }

.bcc-account-empty {
	text-align: center; padding: var(--bcc-gap-7) var(--bcc-edge);
	color: var(--bcc-ink-subtle);
}
.bcc-account-empty p { margin-bottom: var(--bcc-gap-4); font-size: var(--bcc-body-lg); }

/* Order cards */
.bcc-orders-grid { display: grid; gap: var(--bcc-gap-4); grid-template-columns: 1fr; }
@media (min-width: 720px) { .bcc-orders-grid { grid-template-columns: repeat(2, 1fr); } }
.bcc-order-card-wrap.is-hidden { display: none; }

.bcc-order-card {
	background: var(--bcc-bg);
	border: 1px solid var(--bcc-rule);
	border-radius: var(--bcc-radius);
	padding: var(--bcc-gap-4);
	display: flex; flex-direction: column; gap: var(--bcc-gap-3);
}
.bcc-order-card__head {
	display: flex; justify-content: space-between; align-items: center;
	gap: var(--bcc-gap-3); flex-wrap: wrap;
}
.bcc-order-card__id { display: flex; align-items: center; gap: .5rem; }
.bcc-order-card__number {
	font-family: var(--bcc-font-display);
	font-size: 1.2rem; color: var(--bcc-accent-text);
}
.bcc-order-card__status {
	font-family: var(--bcc-font-sub);
	font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
	padding: 3px 8px 2px; border-radius: var(--bcc-radius-pill);
	border: 1px solid currentColor; font-weight: 600;
}
.bcc-order-card__date {
	font-family: var(--bcc-font-sub);
	font-size: .75rem; text-transform: uppercase; letter-spacing: .04em;
	color: var(--bcc-ink-subtle);
}
.bcc-order-card__items { display: flex; flex-direction: column; gap: 4px; }
.bcc-order-card__item {
	display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
	font-size: .9rem;
}
.bcc-order-card__item-name { font-family: var(--bcc-font-sub); font-weight: 500; color: var(--bcc-ink); }
.bcc-order-card__item-flavour { font-family: var(--bcc-font-sub); font-weight: 500; color: var(--bcc-accent); }
.bcc-order-card__item-qty { color: var(--bcc-ink-subtle); font-family: var(--bcc-font-sub); }
.bcc-order-card__more {
	font-size: .8rem; color: var(--bcc-ink-subtle); font-family: var(--bcc-font-sub);
	text-transform: uppercase; letter-spacing: .04em;
}
.bcc-order-card__foot {
	display: flex; justify-content: space-between; align-items: center;
	padding-top: var(--bcc-gap-3);
	border-top: 1px solid var(--bcc-rule);
	gap: var(--bcc-gap-3); flex-wrap: wrap;
}
.bcc-order-card__total {
	font-family: var(--bcc-font-display);
	font-size: 1.3rem; color: var(--bcc-accent-text);
}
.bcc-order-card__actions { display: flex; gap: .35rem; }

/* Addresses */
.bcc-addresses-grid {
	display: grid; gap: var(--bcc-gap-4);
	grid-template-columns: 1fr;
}
@media (min-width: 720px) { .bcc-addresses-grid { grid-template-columns: 1fr 1fr; } }
.bcc-address-card {
	background: var(--bcc-bg);
	border: 1px solid var(--bcc-rule);
	border-radius: var(--bcc-radius);
	padding: var(--bcc-gap-5);
}
.bcc-address-card__head {
	display: flex; justify-content: space-between; align-items: center;
	margin-bottom: var(--bcc-gap-4);
}
.bcc-address-card__head h3 {
	font-size: 1.3rem; color: var(--bcc-accent-text);
	margin: 0;
}
.bcc-address-card__view p {
	font-family: var(--bcc-font-body);
	color: var(--bcc-ink); line-height: 1.5; margin: 0;
}
.bcc-address-card__empty { color: var(--bcc-ink-subtle); font-style: italic; }
.bcc-address-card__form.is-hidden { display: none; }
.bcc-address-card__form { display: flex; flex-direction: column; gap: var(--bcc-gap-3); }
.bcc-address-card__row {
	display: flex; flex-direction: column; gap: 4px;
}
.bcc-address-card__row label {
	font-family: var(--bcc-font-sub);
	font-size: .75rem; text-transform: uppercase; letter-spacing: .06em;
	color: var(--bcc-ink-subtle); font-weight: 500;
}
.bcc-address-card__row input {
	width: 100%;
	padding: .65rem .85rem;
	border: 1.5px solid var(--bcc-rule);
	border-radius: var(--bcc-radius);
	font-family: var(--bcc-font-body); font-size: .95rem;
	color: var(--bcc-ink); background: var(--bcc-surface);
}
.bcc-address-card__row input:focus { outline: none; border-color: var(--bcc-accent-wash); }
.bcc-address-card__actions {
	display: flex; gap: var(--bcc-gap-2);
	justify-content: flex-end;
	margin-top: var(--bcc-gap-3);
}
.bcc-address-card__msg {
	padding: .5rem .85rem;
	border-radius: var(--bcc-radius);
	font-size: .85rem;
	margin-top: var(--bcc-gap-2);
}
.bcc-address-card__msg.is-success { background: var(--bcc-accent-soft); color: var(--bcc-link-hover); }
.bcc-address-card__msg.is-error   { background: var(--bcc-claret-soft); color: var(--bcc-error-text); }

/* Details form */
.bcc-account-details__grid {
	display: grid; gap: var(--bcc-gap-4);
	grid-template-columns: 1fr;
}
@media (min-width: 560px) { .bcc-account-details__grid { grid-template-columns: 1fr 1fr; } }
.bcc-account-details__field { display: flex; flex-direction: column; gap: 4px; }
.bcc-account-details__field--wide { grid-column: 1 / -1; }
.bcc-account-details__field label {
	font-family: var(--bcc-font-sub);
	font-size: .75rem; text-transform: uppercase; letter-spacing: .06em;
	color: var(--bcc-ink-subtle); font-weight: 500;
}
.bcc-account-details__field input {
	width: 100%;
	padding: .75rem 1rem;
	border: 1.5px solid var(--bcc-rule);
	border-radius: var(--bcc-radius);
	font-family: var(--bcc-font-body); font-size: 1rem;
	color: var(--bcc-ink); background: var(--bcc-bg);
}
.bcc-account-details__field input:focus { outline: none; border-color: var(--bcc-accent-wash); background: var(--bcc-surface); }
.bcc-account-details__pwfieldset {
	border: 1px dashed var(--bcc-rule);
	border-radius: var(--bcc-radius);
	padding: var(--bcc-gap-4) var(--bcc-gap-5);
	margin: var(--bcc-gap-5) 0 var(--bcc-gap-4);
}
.bcc-account-details__pwfieldset legend {
	font-family: var(--bcc-font-sub);
	font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
	color: var(--bcc-ink-subtle); padding: 0 .5rem;
}
.bcc-account-details__actions {
	display: flex; align-items: center; gap: var(--bcc-gap-4);
	flex-wrap: wrap;
}
.bcc-account-details__msg {
	flex: 1;
	padding: .5rem .85rem;
	border-radius: var(--bcc-radius);
	font-size: .9rem;
}
.bcc-account-details__msg.is-success { background: var(--bcc-accent-soft); color: var(--bcc-link-hover); }
.bcc-account-details__msg.is-error   { background: var(--bcc-claret-soft); color: var(--bcc-error-text); }

/* ── 38. My Account login page (when logged-out) ─────────────────── */

.bcc-login-page {
	max-width: var(--bcc-container);
	margin: 0 auto;
	padding: var(--bcc-gap-7) var(--bcc-edge) var(--bcc-gap-8);
}
.bcc-login-page__head { text-align: center; margin-bottom: var(--bcc-gap-7); }
.bcc-login-page__head h1 {
	font-size: clamp(2rem, 3vw + 1rem, 3.5rem);
	color: var(--bcc-accent-text);
	margin: var(--bcc-gap-2) 0;
}
.bcc-login-page__head h1 em { color: var(--bcc-accent); font-style: normal; font-weight: normal; }
.bcc-login-page__sub {
	color: var(--bcc-ink-subtle); font-size: var(--bcc-body-lg);
	max-width: 36em; margin: 0 auto;
}
.bcc-login-grid {
	display: grid; gap: var(--bcc-gap-5);
	grid-template-columns: 1fr;
}
@media (min-width: 720px) { .bcc-login-grid { grid-template-columns: 1fr 1fr; } }

.bcc-login-card {
	background: var(--bcc-surface);
	border: 1px solid var(--bcc-rule);
	border-radius: var(--bcc-radius-lg);
	padding: var(--bcc-gap-6);
}
.bcc-login-card__head h2 {
	color: var(--bcc-accent-text);
	margin-bottom: var(--bcc-gap-5);
}
.bcc-login-card__head h2 em { color: var(--bcc-accent); font-style: normal; font-weight: normal; }
.bcc-login-card__form { display: flex; flex-direction: column; gap: var(--bcc-gap-4); }
.bcc-login-card__field { display: flex; flex-direction: column; gap: 4px; }
.bcc-login-card__field label {
	font-family: var(--bcc-font-sub);
	font-size: .75rem; text-transform: uppercase; letter-spacing: .06em;
	color: var(--bcc-ink-subtle); font-weight: 500;
}
.bcc-login-card__field input {
	width: 100%;
	padding: .8rem 1rem;
	border: 1.5px solid var(--bcc-rule);
	border-radius: var(--bcc-radius);
	font-family: var(--bcc-font-body); font-size: 1rem;
	color: var(--bcc-ink); background: var(--bcc-bg);
}
.bcc-login-card__field input:focus { outline: none; border-color: var(--bcc-accent-wash); background: var(--bcc-surface); }
.bcc-login-card__row {
	display: flex; justify-content: space-between; align-items: center;
	gap: var(--bcc-gap-3); flex-wrap: wrap;
}
.bcc-login-card__remember {
	display: inline-flex; align-items: center; gap: .4rem;
	font-size: .85rem; color: var(--bcc-ink); cursor: pointer;
}
.bcc-login-card__lost {
	font-family: var(--bcc-font-sub);
	font-size: .8rem;
	color: var(--bcc-accent);
	text-transform: uppercase; letter-spacing: .04em;
}
.bcc-login-card__lost:hover { color: var(--bcc-link-hover); }
.bcc-login-card__submit { width: 100%; justify-content: center; }
.bcc-login-card__note {
	font-size: .85rem; color: var(--bcc-ink-subtle); font-style: italic;
	margin: 0; text-align: center;
}
.bcc-login-page__footnote {
	text-align: center; color: var(--bcc-ink-subtle);
	margin-top: var(--bcc-gap-7);
	font-size: .9rem;
}
.bcc-login-page__footnote a { color: var(--bcc-accent); border-bottom: 1px solid var(--bcc-accent-wash); }
.bcc-login-page__footnote a:hover { color: var(--bcc-link-hover); }


/* ============================================================
   BCC5 — additions for sections not in the ported AP CSS:
   awards strip, breakthrough section, range cards, find-us
   stockist text variant, single-slide hero, 4-tile promise grid.
   Appended to components.css.
   ============================================================ */

/* ── Single-slide hero override ─────────────────────────────────────
   AP's .bcc-hero is built around a 3-slide carousel with absolute-
   positioned tracks. For the BCC single-slide variant we collapse
   the carousel machinery and let the single .bcc-hero-slide flow
   normally inside the section.                                       */

.bcc-hero--single .bcc-hero-track {
	position: relative;
	max-width: var(--bcc-container-wide);
	margin: 0 auto;
	display: block;
}
.bcc-hero--single .bcc-hero-slide {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: var(--bcc-gap-7);
	opacity: 1;
	transform: none;
	pointer-events: auto;
}
@media (min-width: 900px) {
	.bcc-hero--single .bcc-hero-slide {
		grid-template-columns: 1.05fr 0.95fr;
		gap: var(--bcc-gap-8);
	}
}
.bcc-hero--single .bcc-hero-copy {
	display: flex; flex-direction: column;
	gap: var(--bcc-gap-4);
	max-width: 36rem;
}
.bcc-hero--single .bcc-hero-copy .lede {
	font-size: var(--bcc-body-lg);
	color: var(--bcc-ink-subtle);
	line-height: 1.55;
	margin: 0;
}
.bcc-hero--single .bcc-hero-copy .cta-row {
	display: flex; flex-wrap: wrap; gap: var(--bcc-gap-3);
	margin-top: var(--bcc-gap-3);
}
/* .bcc-hero--single .bcc-hero-image — RETIRED. Used to wrap the pack
   image in an aspect-1:1 cream-bg rounded-rectangle "frame" with a
   damask overlay and an 80% max-width on the img inside. That frame
   was the persistent "box around the packs" issue. Packs now sit
   standalone — see the hero-image rules in main.css for the current
   styling. */

/* Hide the carousel arrows + dots for the single variant */
.bcc-hero--single .bcc-hero-dots,
.bcc-hero--single .bcc-hero-arrow {
	display: none !important;
}

/* ── Awards strip ──────────────────────────────────────────────────
   Sits between .bcc-trust and .bcc-promise. Different visual weight
   from the press marquee: solid placement of 4 award badges, centred,
   on a warm-cream backdrop.                                          */

.bcc-awards {
	padding: var(--bcc-gap-7) var(--bcc-edge);
	background: transparent;
	border-top: 1px solid var(--bcc-rule);
	border-bottom: 1px solid var(--bcc-rule);
	position: relative; overflow: hidden;
}
.bcc-awards::before { content: none; }
.bcc-awards-inner {
	position: relative; z-index: 1;
	max-width: var(--bcc-container);
	margin: 0 auto;
	display: flex; flex-direction: column; align-items: center;
	gap: var(--bcc-gap-5);
}
.bcc-awards-label {
	font-family: var(--bcc-font-sub);
	font-size: var(--bcc-label);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bcc-ink-subtle);
}
.bcc-awards-row {
	display: flex; flex-wrap: wrap;
	align-items: center; justify-content: center;
	gap: var(--bcc-gap-5) var(--bcc-gap-7);
}
.bcc-awards-item {
	display: inline-flex; align-items: center; justify-content: center;
	height: 92px;
	transition: transform .25s var(--bcc-ease), filter .25s var(--bcc-ease);
}
.bcc-awards-item img {
	max-height: 100%; width: auto;
	max-width: 200px;
	display: block;
	filter: contrast(.96);
}
.bcc-awards-item:hover {
	transform: translateY(-2px);
}
@media (max-width: 720px) {
	/* 2026-05-20: force 2×2 grid on mobile — wrapping the 4-item flex row
	   landed 3+1 (odd one out, off-centre), which read as a missing badge
	   rather than a deliberate layout. Grid with 2 columns gives a tidy
	   square that holds its shape regardless of badge widths. */
	.bcc-awards-row {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--bcc-gap-5) var(--bcc-gap-6);
		justify-items: center;
	}
	.bcc-awards-item { height: 72px; }
	.bcc-awards-item img { max-width: 140px; }
}

/* ── 4-tile promise grid ────────────────────────────────────────────
   AP's .bcc-promise-grid is repeat(3, 1fr); the BCC version has 4
   pillars. The .bcc-promise-grid--four override expands to 4 cols
   on desktop, 2x2 on tablet, single column on mobile.                */

@media (min-width: 720px) {
	.bcc-promise-grid--four {
		grid-template-columns: repeat(2, 1fr);
		row-gap: var(--bcc-gap-7);
	}
	.bcc-promise-grid--four .bcc-promise-tile + .bcc-promise-tile {
		border-left: none;
	}
	.bcc-promise-grid--four .bcc-promise-tile:nth-child(2n) {
		border-left: 1px solid var(--bcc-rule);
	}
}
@media (min-width: 1024px) {
	.bcc-promise-grid--four {
		grid-template-columns: repeat(4, 1fr);
		row-gap: 0;
	}
	.bcc-promise-grid--four .bcc-promise-tile + .bcc-promise-tile {
		border-left: 1px solid var(--bcc-rule);
	}
	.bcc-promise-grid--four .bcc-promise-tile:nth-child(2n) {
		border-left: 1px solid var(--bcc-rule);
	}
}

/* ── Breakthrough section ──────────────────────────────────────────
   Replaces AP's "category cards" section. Single editorial slab —
   centred narrative about the paper-packet engineering, with a row
   of inline pill-badges underneath.                                  */

.bcc-breakthrough {
	/* Sea Salt wash — this is THE paper-packet section, the lead brand
	   story. Sea-deep teal connects paper / coast / British seaside.
	   Section accent locks <em> highlights + strong tags + eyebrow.
	   Dark-mode variant is a lifted sea-light so accents stay sea-blue
	   in dark mode rather than reverting to the brand chilli wash. */
	--bcc-section-accent: var(--bcc-flav-sea-deep);
	--bcc-section-accent-dark: #8ec0d8;
	padding: var(--bcc-gap-8) var(--bcc-edge);
	background-color: transparent;
	background-image: linear-gradient(var(--bcc-wash-sea), var(--bcc-wash-sea));
	position: relative; overflow: hidden;
}
.bcc-breakthrough::before { content: none; }
.bcc-breakthrough__inner {
	position: relative; z-index: 1;
	max-width: 52rem;
	margin: 0 auto;
	text-align: center;
}
.bcc-breakthrough__copy .bcc-eyebrow {
	color: var(--bcc-flav-sea-deep);
	font-weight: 600;
}
[data-theme="dark"] .bcc-breakthrough__copy .bcc-eyebrow {
	color: #8ec0d8;
}
.bcc-breakthrough__copy h2 {
	margin: var(--bcc-gap-3) 0 var(--bcc-gap-5);
}
.bcc-breakthrough__copy p {
	font-size: var(--bcc-body-lg);
	line-height: 1.65;
	color: var(--bcc-ink);
	margin: 0 0 var(--bcc-gap-4);
	text-align: left;
}
.bcc-breakthrough__copy p strong {
	color: var(--bcc-flav-sea-deep);
}
[data-theme="dark"] .bcc-breakthrough__copy p strong {
	color: #8ec0d8;
}
.bcc-breakthrough__badges {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: var(--bcc-gap-3);
	margin-top: var(--bcc-gap-6);
	/* 2026-05-19: break out of __inner's 52rem readability cap up to the
	   section's edge padding. The negative margins resolve to 0 when the
	   viewport is at or below the cap, and to a wider span on desktop —
	   so badges sit in a tidy row instead of wrapping prematurely. */
	margin-left: calc(50% - 50vw + var(--bcc-edge));
	margin-right: calc(50% - 50vw + var(--bcc-edge));
}

/* ── Inline badge ──────────────────────────────────────────────────
   Used in breakthrough section and elsewhere where a small pill
   accreditation/feature marker is needed.                            */

.bcc-badge {
	display: inline-flex; align-items: center;
	font-family: var(--bcc-font-sub);
	font-size: var(--bcc-label);
	font-weight: 600;
	letter-spacing: .04em;
	/* Track the section accent — badges sit inside themed sections
	   (Sea Salt in breakthrough, etc.) so the chip colour should
	   match that section's tone. Falls back to brand chilli for
	   unthemed contexts. */
	color: var(--bcc-section-accent, var(--bcc-accent-deep));
	background: color-mix(in srgb, var(--bcc-section-accent, var(--bcc-accent)) 8%, transparent);
	border: 1px solid color-mix(in srgb, var(--bcc-section-accent, var(--bcc-accent)) 30%, transparent);
	padding: .4em .9em;
	border-radius: var(--bcc-radius-pill);
	white-space: nowrap;
}
/* Dark mode — use the section's LIFTED accent (e.g. sea-light, not
   sea-deep) so the chip text reads clearly on the dark canvas.
   Background + border tint scaled up too — the deeper accents need
   more wash to register against charcoal. */
[data-theme="dark"] .bcc-badge {
	color: var(--bcc-section-accent-dark, var(--bcc-ink));
	background: color-mix(in srgb, var(--bcc-section-accent-dark, var(--bcc-ink)) 14%, transparent);
	border-color: color-mix(in srgb, var(--bcc-section-accent-dark, var(--bcc-ink)) 40%, transparent);
}

/* ── Range cards (replaces cat-card composition) ───────────────────
   BCC has a single category but multiple flavours. Display flavours
   as a grid of cards — pack image, flavour name, price, CTA. The
   per-flavour --flavour-color CSS var (set inline from the product
   attribute) tints the radial-glow background.                       */

.bcc-range {
	padding: var(--bcc-gap-8) var(--bcc-edge);
	background: transparent;
	border-top: 1px solid var(--bcc-rule);
	border-bottom: 1px solid var(--bcc-rule);
	position: relative; overflow: hidden;
}
.bcc-range::before { content: none; }
.bcc-range-inner {
	position: relative; z-index: 1;
	max-width: var(--bcc-container-wide);
	margin: 0 auto;
}
.bcc-range .bcc-section-head { margin-bottom: var(--bcc-gap-7); }

.bcc-range-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bcc-gap-5);
}
@media (min-width: 600px) {
	.bcc-range-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
	.bcc-range-grid { grid-template-columns: repeat(4, 1fr); }
}

.bcc-range-card {
	/* Per-card --flavour-color is injected inline from the product's
	   "colour" attribute (front-page.php loop). The card uses it for:
	   border-on-hover, shadow tint on hover, and a subtle radial glow
	   behind the pack image. Defaults to ink-subtle if no flavour-color
	   was set on the product, so cards never appear "broken". */
	--flavour-color: var(--bcc-ink-subtle);
	display: flex; flex-direction: column;
	gap: var(--bcc-gap-3);
	padding: var(--bcc-gap-5);
	background: var(--bcc-surface);
	border: 1px solid var(--bcc-rule);
	border-radius: var(--bcc-radius-lg);
	color: var(--bcc-ink);
	text-decoration: none;
	text-align: center;
	transition: transform .25s var(--bcc-ease), border-color .25s var(--bcc-ease), box-shadow .25s var(--bcc-ease);
	position: relative;
	overflow: hidden;
}
/* Hover overlay removed — was tinting the card with the flavour
   colour, which the pack illustration already provides. Cleaner
   without it. Lift + border-colour change carry the hover state. */
.bcc-range-card::after { content: none; }
.bcc-range-card > * { position: relative; z-index: 1; }
.bcc-range-card:hover {
	transform: translateY(-4px);
	border-color: var(--flavour-color);
	box-shadow: 0 16px 32px rgba(28, 22, 18, .12);
}
.bcc-range-card__image {
	position: relative;
	aspect-ratio: 1 / 1.1;
	border-radius: var(--bcc-radius);
	display: flex; align-items: center; justify-content: center;
	overflow: hidden;
	/* No coloured gradient — packs sit on the card's own surface. The
	   flavour identity comes from the pack illustration itself; tinted
	   backdrops were fighting the packaging for attention. */
	background: transparent;
}
.bcc-range-card__image img {
	max-width: 85%; max-height: 92%;
	width: auto; height: auto;
	filter: drop-shadow(0 14px 20px rgba(20, 14, 12, 0.14)) drop-shadow(0 4px 8px rgba(20, 14, 12, 0.08));
	transition: transform .35s var(--bcc-ease);
}
.bcc-range-card:hover .bcc-range-card__image img {
	transform: translateY(-4px) rotate(-1deg);
}
.bcc-range-card__name {
	font-family: var(--bcc-font-display);
	font-size: clamp(1.4rem, 1.2vw + 1rem, 1.75rem);
	margin: var(--bcc-gap-2) 0 0;
	color: var(--bcc-ink);
	letter-spacing: -0.01em;
	line-height: 1.1;
}
.bcc-range-card__price {
	font-family: var(--bcc-font-sub);
	font-weight: 600;
	/* Per-flavour colour ties price visually to the pack illustration.
	   Falls back to ink for cards without a flavour-color (defensive). */
	color: var(--flavour-color, var(--bcc-ink));
	font-size: var(--bcc-body-lg);
}
[data-theme="dark"] .bcc-range-card__price {
	/* In dark mode the saturated flavour values can sit too close to
	   the dark card bg — lift via colour-mix so each price reads
	   clearly without losing the flavour cue. */
	color: color-mix(in srgb, var(--flavour-color, var(--bcc-ink)) 60%, white);
}
.bcc-range-card__price .woocommerce-Price-amount {
	font-family: inherit;
}
.bcc-range-card .cta {
	margin-top: auto;
	font-family: var(--bcc-font-sub);
	font-weight: 700;
	font-size: var(--bcc-label);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bcc-ink);
	border-top: 1px solid var(--bcc-rule);
	padding-top: var(--bcc-gap-3);
	transition: color .2s var(--bcc-ease);
}
.bcc-range-card:hover .cta {
	color: var(--flavour-color, var(--bcc-flav-chilli-deep));
}
[data-theme="dark"] .bcc-range-card .cta {
	color: var(--bcc-ink);
	border-top-color: rgba(255, 255, 255, 0.1);
}

/* ── Stockists text variant (find-us-at-your-local) ────────────────
   AP uses logo images for stockist row; BCC's anti-supermarket
   positioning means the equivalent is text-only links to types of
   venue rather than retailer logos.                                  */

.bcc-stockists-row--text {
	display: flex; flex-wrap: wrap;
	align-items: center; justify-content: center;
	gap: var(--bcc-gap-5) var(--bcc-gap-7);
	max-width: 56rem;
	margin: 0 auto;
}
.bcc-stockists-row--text a {
	font-family: var(--bcc-font-display);
	font-size: clamp(1.25rem, 1.4vw + 0.5rem, 1.75rem);
	color: var(--bcc-ink);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 4px;
	transition: color .2s var(--bcc-ease), border-color .2s var(--bcc-ease);
}
.bcc-stockists-row--text a:hover {
	color: var(--bcc-accent-deep);
	border-color: var(--bcc-accent-wash);
}
[data-theme="dark"] .bcc-stockists-row--text a:hover {
	/* accent-deep (#3a080c) reads as near-black on the dark canvas;
	   lift to accent-wash (pale crimson) for the hover state. */
	color: var(--bcc-accent-wash);
	border-color: var(--bcc-accent-wash);
}

/* ── bcc-btn--accent (renamed from bcc-btn--accent) ─────────────
   The legacy class name still exists in main.css (line ~326); these
   rules mirror it under the new name. We don't remove the legacy
   rules — they'd disappear from any pages still referencing the old
   class before the sed sweep. Defensive duplication is harmless.    */

.bcc-btn--accent {
	background: var(--bcc-accent-deep);
	color: var(--bcc-cream-stable);
	border-color: var(--bcc-accent-deep);
}
.bcc-btn--accent:hover {
	background: var(--bcc-accent);
	border-color: var(--bcc-accent);
	color: var(--bcc-cream-stable);
}
/* Dark-mode hover override. The non-dark :hover uses --bcc-accent for the
   button background, which in dark mode is the pale pink #e5b9bd (correct
   for text/icons on dark, too pale for a button bg with cream text — reads
   as washed-out pink). Invert the hover instead: cream bg with full-chilli
   text, mirroring the CTA-band button's hover pattern below. Consistent
   primary-button hover behaviour across the dark mode. */
[data-theme="dark"] .bcc-btn--accent:hover {
	background: var(--bcc-cream-stable);
	color: var(--bcc-accent-deep);
	border-color: var(--bcc-cream-stable);
}

/* ── CTA band override ─────────────────────────────────────────────
   AP's .bcc-cta-band .bcc-btn--accent uses the AP accent value.
   The .bcc-btn--accent in this context inherits the same styling. */

.bcc-cta-band .bcc-btn--accent {
	background: var(--bcc-accent);
	color: var(--bcc-cream-stable);
	border-color: var(--bcc-accent);
}
.bcc-cta-band .bcc-btn--accent:hover {
	background: var(--bcc-cream-stable);
	color: var(--bcc-accent-deep);
	border-color: var(--bcc-cream-stable);
}
/* Dark-mode: in light mode this button is dark-crimson bg + cream text. With
   --bcc-accent lifted to pale crimson in dark mode, cream-on-pale-pink fails
   contrast — and the button loses its CTA weight on the dark slab. Switch the
   bg to the deep variant (full Sweet Chilli) so cream text stays legible. */
[data-theme="dark"] .bcc-cta-band .bcc-btn--accent {
	background: var(--bcc-accent-deep);
	border-color: var(--bcc-accent-deep);
}
/* Dark-mode hover override (explicit). The dark default rule above has
   specificity 0,0,4,0 and the non-dark :hover rule has 0,0,3,0 — so the
   dark default WINS over the hover for bg + border, leaving only the
   hover's `color: var(--bcc-accent-deep)` to apply. That gave red text
   on red bg at hover state. Restate the full inverted hover here at
   matching dark-prefixed specificity (0,0,5,0) so the inversion works. */
[data-theme="dark"] .bcc-cta-band .bcc-btn--accent:hover {
	background: var(--bcc-cream-stable);
	color: var(--bcc-accent-deep);
	border-color: var(--bcc-cream-stable);
}

/* ── Trade / hospitality band ─────────────────────────────────────
   Added 2026-05-19. Surfaces the venue-acquisition CTA on the homepage
   (and is the visual cousin of /hospitality/'s hero band). Reads as a
   pale-cream slab inset into the paper canvas with eyebrow + headline +
   CTA. Mirrors the .bcc-stockists rhythm but with an action button on
   the right (desktop) / below (mobile). */
.bcc-trade {
	padding: var(--bcc-gap-8) var(--bcc-edge);
	/* 2026-05-19: paper texture added in both modes so the trade band
	   reads as a textured paper inset, matching the surrounding sections
	   that pick up the body's paper grain. background-color (not the
	   `background:` shorthand) keeps the image set here intact when the
	   dark-mode override below swaps the colour. */
	background-color: var(--bcc-surface-2);
	background-image: url('paper-light.jpg');
	background-size: 350px;
	background-repeat: repeat;
	border-top: 1px solid var(--bcc-rule);
	border-bottom: 1px solid var(--bcc-rule);
}
.bcc-trade-inner {
	/* 2026-05-19 (rev): max-width restored — see .bcc-paths__inner note.
	   Trade band needs to share the bounded rhythm of the rest of the home
	   so it doesn't stretch end-to-end on enormous monitors. */
	max-width: var(--bcc-container-wide);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--bcc-gap-6);
	align-items: center;
}
.bcc-trade__copy { max-width: 36em; }
.bcc-trade__headline {
	font-family: var(--bcc-font-display);
	font-size: var(--bcc-display-md);
	line-height: 1.1;
	margin: var(--bcc-gap-2) 0 var(--bcc-gap-3);
	color: var(--bcc-ink);
}
.bcc-trade__headline em {
	font-style: normal;
	color: var(--bcc-accent);
}
.bcc-trade__lede {
	font-size: var(--bcc-body);
	color: var(--bcc-ink-subtle);
	margin: 0;
}
.bcc-trade__cta { justify-self: end; }

@media (max-width: 720px) {
	.bcc-trade-inner {
		grid-template-columns: 1fr;
		gap: var(--bcc-gap-5);
	}
	.bcc-trade__cta { justify-self: start; }
}

[data-theme="dark"] .bcc-trade {
	/* 2026-05-19: background-color + dark paper texture (not the
	   `background:` shorthand which would wipe the image). Matches the
	   light-mode treatment above so the trade band has consistent paper
	   grain in both modes. */
	background-color: var(--bcc-surface);
	background-image: url('paper-dark.jpg');
	border-color: var(--bcc-rule);
}
/* 2026-05-19: em accent flips to the pale-crimson wash on the dark trade
   surface — the standard --bcc-accent (deep chilli) is calibrated for cream
   paper and reads near-invisible on the charcoal background here. Mirrors
   the same pattern used in .bcc-craft__heading em and the promise tiles. */
[data-theme="dark"] .bcc-trade__headline em {
	color: var(--bcc-accent-wash);
}

/* ── Award 3 dark-mode filter ─────────────────────────────────────
   Added 2026-05-19. The UK Packaging Awards 2024 logo is a dark mark
   that vanishes against the dark canvas. invert() + hue-rotate() flips
   it to a high-contrast cream variant; brightness() lifts it off the
   surface. src match works for both `/images/award3.png` and the
   PageSpeed-mangled `/images/award3.png.pagespeed.ce.*.png` filename. */
[data-theme="dark"] .bcc-awards-item img[src*="award3"] {
	filter: invert(100%) hue-rotate(180deg) brightness(120%);
}

/* ── Craft / flavour & crunch ─────────────────────────────────────
   Added 2026-05-19. Sits between .bcc-breakthrough and .bcc-range on
   the homepage — the sensory/physical case for the crisps, balancing
   the eco/provenance lead. Editorial layout (no card chrome) so it
   reads as a different register from the 4-pillar promise tiles. */
.bcc-craft {
	padding: var(--bcc-gap-8) var(--bcc-edge);
	/* 2026-05-19: neutral section-rest tint — see .bcc-paths above for
	   rationale. Craft sits between Promise (vinegar wash) and Range
	   (flat), so an alt tint here keeps the alternation continuous. */
	background-color: transparent;
	background-image: linear-gradient(var(--bcc-section-alt-tint), var(--bcc-section-alt-tint));
	border-top: 1px solid var(--bcc-rule);
	border-bottom: 1px solid var(--bcc-rule);
}
.bcc-craft__inner {
	/* 2026-05-19 (rev): max-width restored — see .bcc-paths__inner note. The
	   "surrounding sections" the prior comment cited are themselves bounded
	   at --bcc-container-wide; this inner is now bounded to match. */
	max-width: var(--bcc-container-wide);
	margin: 0 auto;
}
.bcc-craft__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--bcc-gap-7);
	margin-top: var(--bcc-gap-7);
}
.bcc-craft__tile {
	/* 2026-05-19: top border removed — tiles now rely on column whitespace
	   + the heading's visual weight to read as discrete columns. */
}
.bcc-craft__heading {
	font-family: var(--bcc-font-display);
	font-weight: normal;
	font-size: clamp(1.5rem, 1vw + 1rem, 1.875rem);
	line-height: 1.15;
	margin: 0 0 var(--bcc-gap-3);
	color: var(--bcc-ink);
	letter-spacing: 0.01em;
}
.bcc-craft__heading em {
	font-style: normal;
	color: var(--bcc-accent);
}
.bcc-craft__body {
	font-family: var(--bcc-font-body);
	font-size: var(--bcc-body);
	line-height: 1.55;
	color: var(--bcc-ink);
	margin: 0;
}
.bcc-craft__closer {
	text-align: center;
	font-style: italic;
	font-family: var(--bcc-font-body);
	font-size: var(--bcc-body);
	color: var(--bcc-ink-subtle);
	margin: var(--bcc-gap-7) auto 0;
	max-width: 28em;
}

@media (max-width: 720px) {
	.bcc-craft__grid {
		grid-template-columns: 1fr;
		gap: var(--bcc-gap-5);
	}
}

[data-theme="dark"] .bcc-craft__heading em {
	color: var(--bcc-accent-wash);
}

/* ── Range CTAs ───────────────────────────────────────────────────
   Added 2026-05-19. Sits under the homepage 4-product grid so visitors
   can fall through to either category archive. Paper is the lead story
   (accent button); Classic is the legacy range (ghost button). */
.bcc-range-ctas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--bcc-gap-4);
	margin-top: var(--bcc-gap-7);
}
@media (max-width: 560px) {
	.bcc-range-ctas {
		flex-direction: column;
		align-items: stretch;
		gap: var(--bcc-gap-3);
	}
	.bcc-range-ctas .bcc-btn {
		width: 100%;
		text-align: center;
		justify-content: center;
	}
}

/* ── Two ranges. Both true. ───────────────────────────────────────
   Phase 2 (2026-05-19): the dual-range positioning section. Sits
   between Awards and the four-pillar Promise. Two side-by-side cards
   present the Paper Range (sea-salt teal accent) and Classic Range
   (cheese-gold accent) as equal-weight choices, with credentials true
   to each. CTAs follow the established hierarchy — Paper accent-filled,
   Classic ghost-outlined.
*/
.bcc-paths {
	padding: var(--bcc-gap-8) var(--bcc-edge);
	/* 2026-05-19: neutral section-rest tint via the same transparent
	   linear-gradient trick used by the flavour washes (breakthrough,
	   promise, reviews, stockists). Lets body's paper texture continue
	   through the section while adding a subtle tonal step that
	   distinguishes Two Ranges from the flat sections around it.
	   --bcc-section-alt-tint auto-flips direction in dark mode so the
	   same selector reads as "section distinct from body" in both modes. */
	background-color: transparent;
	background-image: linear-gradient(var(--bcc-section-alt-tint), var(--bcc-section-alt-tint));
	border-top: 1px solid var(--bcc-rule);
	border-bottom: 1px solid var(--bcc-rule);
}
.bcc-paths__inner {
	/* 2026-05-19 (rev): max-width restored to var(--bcc-container-wide). The
	   prior comment claimed removal "aligned with surrounding sections" but
	   the surroundings (.bcc-promise-grid, .bcc-range-inner, .bcc-stockists-
	   inner, .bcc-reviews__inner) all bound to --bcc-container-wide too — so
	   removal made this one section span full-width on large monitors while
	   neighbours stayed bounded. Restored to match the rest of the home. */
	max-width: var(--bcc-container-wide);
	margin: 0 auto;
}
.bcc-paths__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bcc-gap-6);
	margin-top: var(--bcc-gap-7);
}
@media (max-width: 720px) {
	.bcc-paths__grid {
		grid-template-columns: 1fr;
		gap: var(--bcc-gap-5);
	}
}

.bcc-path-card {
	padding: var(--bcc-gap-6);
	border: 1px solid var(--bcc-rule);
	border-radius: var(--bcc-radius-lg);
	background: var(--bcc-surface);
	display: flex;
	flex-direction: column;
	gap: var(--bcc-gap-4);
	position: relative;
	overflow: hidden;
}

/* Per-range accent + subtle background wash. The section-accent token
   feeds eyebrow colour, heading em, and the credential bullet glyph,
   so per-range theming is one variable swap. */
.bcc-path-card--paper {
	--bcc-section-accent: var(--bcc-flav-sea-deep);
	background:
		linear-gradient(var(--bcc-wash-sea), var(--bcc-wash-sea)),
		var(--bcc-surface);
	border-color: color-mix(in srgb, var(--bcc-flav-sea-deep) 25%, var(--bcc-rule));
}
.bcc-path-card--classic {
	--bcc-section-accent: var(--bcc-flav-cheese-deep);
	background:
		linear-gradient(var(--bcc-wash-cheese), var(--bcc-wash-cheese)),
		var(--bcc-surface);
	border-color: color-mix(in srgb, var(--bcc-flav-cheese-deep) 25%, var(--bcc-rule));
}

.bcc-path-card__eyebrow {
	font-family: var(--bcc-font-sub);
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: var(--bcc-meta);
	font-weight: 700;
	color: var(--bcc-section-accent);
}

.bcc-path-card__title {
	font-family: var(--bcc-font-display);
	font-weight: normal;
	font-size: clamp(1.75rem, 1.5vw + 1rem, 2.25rem);
	line-height: 1.1;
	margin: 0;
	color: var(--bcc-ink);
}
.bcc-path-card__title em {
	color: var(--bcc-section-accent);
}

.bcc-path-card__lede {
	font-family: var(--bcc-font-body);
	font-size: var(--bcc-body);
	line-height: 1.55;
	color: var(--bcc-ink);
	margin: 0;
}

.bcc-path-card__creds {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--bcc-gap-2);
}
.bcc-path-card__creds li {
	font-family: var(--bcc-font-body);
	font-size: var(--bcc-label);
	line-height: 1.4;
	color: var(--bcc-ink);
	padding-left: 1.25em;
	position: relative;
}
.bcc-path-card__creds li::before {
	content: "•";
	position: absolute;
	left: 0;
	color: var(--bcc-section-accent);
	font-weight: 700;
}

.bcc-path-card .bcc-btn {
	align-self: flex-start;
	margin-top: auto;   /* push CTA to the bottom of each card so the
	                       two cards' buttons align on the same baseline
	                       regardless of varying lede / cred-list height */
}

/* Dark-mode lifts the wash so cards stay visibly distinct on charcoal,
   and swaps section-accent to the lighter sea/cheese variants for
   text legibility. */
[data-theme="dark"] .bcc-path-card--paper {
	--bcc-section-accent: #8ec0d8;
	background:
		linear-gradient(rgba(1, 97, 134, 0.18), rgba(1, 97, 134, 0.18)),
		var(--bcc-surface);
	border-color: rgba(142, 192, 216, 0.35);
}
[data-theme="dark"] .bcc-path-card--classic {
	--bcc-section-accent: #e0b76f;
	background:
		linear-gradient(rgba(200, 151, 36, 0.16), rgba(200, 151, 36, 0.16)),
		var(--bcc-surface);
	border-color: rgba(224, 183, 111, 0.35);
}

/* Range-themed promise tiles 03 + 04. Just sets --bcc-section-accent on
   the tile so the existing .bcc-promise-tile__num + h3 em rules pick up
   the colour — see main.css lines 2080-2105. */
.bcc-promise-tile--paper {
	--bcc-section-accent: var(--bcc-flav-sea-deep);
	--bcc-section-accent-dark: #8ec0d8;
}
.bcc-promise-tile--classic {
	--bcc-section-accent: var(--bcc-flav-cheese-deep);
	--bcc-section-accent-dark: #e0b76f;
}

/* ── Per-SKU credential badges (PDP) ──────────────────────────────
   Phase 3 (2026-05-19). Pills displayed in the PDP info column between
   the pack-size line and the price row. Drawn from postmeta via
   bcc_render_credential_badges() in mu-plugins/bcc-credentials.php.
   Visually distinct from .bcc-badge (which lives on product images
   and carries sale/stock/recyclable flags) — these are dietary trust
   signals shown at the point of decision. */
.bcc-creds {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bcc-gap-2);
	margin: var(--bcc-gap-3) 0 var(--bcc-gap-4);
}
.bcc-cred-badge {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	padding: .4em .85em;
	border-radius: var(--bcc-radius-pill);
	font-family: var(--bcc-font-sub);
	font-size: var(--bcc-label);
	font-weight: 600;
	letter-spacing: .015em;
	background: color-mix(in srgb, var(--bcc-flav-vinegar-deep) 7%, transparent);
	border: 1px solid color-mix(in srgb, var(--bcc-flav-vinegar-deep) 28%, transparent);
	color: var(--bcc-flav-vinegar-deep);
	white-space: nowrap;
}
.bcc-cred-badge__tick {
	font-weight: 700;
	font-size: 1em;
	line-height: 1;
}

/* Paper-packet badge is the only one that's about packaging not diet —
   tinted sea-salt teal to match the Paper Range card on the homepage,
   so the visual ties together across surfaces. */
.bcc-cred-badge--paper {
	background: color-mix(in srgb, var(--bcc-flav-sea-deep) 8%, transparent);
	border-color: color-mix(in srgb, var(--bcc-flav-sea-deep) 30%, transparent);
	color: var(--bcc-flav-sea-deep);
}

[data-theme="dark"] .bcc-cred-badge {
	background: color-mix(in srgb, var(--bcc-flav-vinegar) 18%, transparent);
	border-color: color-mix(in srgb, var(--bcc-flav-vinegar) 42%, transparent);
	color: #c5d39c;
}
[data-theme="dark"] .bcc-cred-badge--paper {
	background: color-mix(in srgb, #8ec0d8 18%, transparent);
	border-color: color-mix(in srgb, #8ec0d8 42%, transparent);
	color: #8ec0d8;
}

/* ── Sister-product pointer ───────────────────────────────────────
   Phase 3 (2026-05-19). Appears after add-to-cart in the PDP info
   column. Routes the customer to the equivalent product in the OTHER
   range when their dietary needs aren't met by the current SKU
   (Paper non-vegan SKUs → Classic; Classic → Paper for bigger flavour). */
.bcc-sister-pointer {
	display: flex;
	align-items: center;
	gap: var(--bcc-gap-4);
	margin: var(--bcc-gap-5) 0 var(--bcc-gap-4);
	padding: var(--bcc-gap-4);
	background: var(--bcc-surface-2);
	border: 1px solid var(--bcc-rule);
	border-left: 3px solid var(--bcc-accent);
	border-radius: var(--bcc-radius);
}
/* 2026-05-19: sister product thumbnail as a secondary click target.
   Sister pointer now lays out as [thumb] [copy + link] so the visitor
   has a visual cue for the other-range product alongside the prose case.
   Square area with the pack image centered inside; click anywhere on the
   thumbnail navigates to the sister PDP (same destination as the text
   link below). */
.bcc-sister-pointer__thumb {
	flex-shrink: 0;
	display: block;
	width: 84px; height: 84px;
	line-height: 0;
	border-radius: var(--bcc-radius);
	overflow: hidden;
	transition: transform .2s var(--bcc-ease), filter .2s var(--bcc-ease);
}
.bcc-sister-pointer__thumb img {
	width: 100%; height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 4px 8px rgba(0,0,0,.12));
}
.bcc-sister-pointer__thumb:hover { transform: translateY(-1px); }
.bcc-sister-pointer__thumb:hover img { filter: drop-shadow(0 6px 12px rgba(0,0,0,.18)); }
.bcc-sister-pointer__content {
	flex: 1 1 auto;
	min-width: 0;
}
.bcc-sister-pointer__copy {
	font-size: var(--bcc-body);
	line-height: 1.5;
	color: var(--bcc-ink);
	margin: 0 0 var(--bcc-gap-2);
}
.bcc-sister-pointer__link {
	font-family: var(--bcc-font-sub);
	font-weight: 600;
	font-size: var(--bcc-label);
	letter-spacing: .02em;
	color: var(--bcc-accent);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	transition: border-color .15s var(--bcc-ease), color .15s var(--bcc-ease);
}
.bcc-sister-pointer__link:hover {
	border-bottom-color: transparent;
	color: var(--bcc-accent-deep);
}

[data-theme="dark"] .bcc-sister-pointer {
	background: var(--bcc-surface);
	border-color: var(--bcc-rule);
}
[data-theme="dark"] .bcc-sister-pointer__link {
	color: var(--bcc-accent-wash);
}

/* ── Archive hero — range feature pills ───────────────────────────
   Added 2026-05-19. Three short credentials per range, surfaced
   directly under the hero lede. Each range's set is defined in the
   $category_intros array in archive-product.php — paper / classic /
   crisps each get their own. Drives home what THIS range is for at
   the point of category-page entry, before the product grid loads. */
.bcc-archive-hero__features {
	list-style: none;
	padding: 0;
	margin: var(--bcc-gap-5) 0 var(--bcc-gap-4);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--bcc-gap-3);
}
.bcc-archive-hero__features li {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	padding: .45em .95em;
	border-radius: var(--bcc-radius-pill);
	background: color-mix(in srgb, var(--bcc-flav-vinegar-deep) 7%, transparent);
	border: 1px solid color-mix(in srgb, var(--bcc-flav-vinegar-deep) 28%, transparent);
	color: var(--bcc-flav-vinegar-deep);
	font-family: var(--bcc-font-sub);
	font-size: var(--bcc-label);
	font-weight: 600;
	letter-spacing: .015em;
}
.bcc-archive-hero__features-tick {
	font-weight: 700;
	font-size: 1em;
	line-height: 1;
}

[data-theme="dark"] .bcc-archive-hero__features li {
	background: color-mix(in srgb, var(--bcc-flav-vinegar) 18%, transparent);
	border-color: color-mix(in srgb, var(--bcc-flav-vinegar) 42%, transparent);
	color: #c5d39c;
}

/* ── Product card range label ─────────────────────────────────────
   Added 2026-05-19. Small uppercase eyebrow ABOVE the name on each
   product card, identifying which range the SKU belongs to. Tinted
   to the range's accent (sea-salt teal for Paper, cheese-gold for
   Classic) so the visual cue matches the homepage "Two ranges. Both
   true." section and the archive feature pills. */
.bcc-product-card__range {
	font-family: var(--bcc-font-sub);
	font-size: .68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	margin-bottom: var(--bcc-gap-1);
	line-height: 1.2;
}
.bcc-product-card__range--paper   { color: var(--bcc-flav-sea-deep); }
.bcc-product-card__range--classic { color: var(--bcc-flav-cheese-deep); }

[data-theme="dark"] .bcc-product-card__range--paper   { color: #8ec0d8; }
[data-theme="dark"] .bcc-product-card__range--classic { color: #e0b76f; }