/* ============================================================
   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%;
	/* 2026-05-21: rounded corners to match AP's hero treatment + other
	   image containers across the site (cards, archive heroes, all use
	   --bcc-radius-lg). The collage backdrop + vignette ::before both
	   respect overflow:hidden so the radius clips cleanly. Soft shadow
	   for the printed-photo lift on the cream canvas, mirroring AP's
	   polaroid treatment. */
	border-radius: var(--bcc-radius-lg);
	box-shadow:
		0 1px 2px rgba(28, 24, 22, 0.08),
		0 10px 30px rgba(28, 24, 22, 0.18);
}
/* 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;
	min-height: 0;
	/* 2026-05-21: rounded corners + polaroid shadow on the hero container,
	   mirroring AP's hero treatment + matching the radius used on cards,
	   archive heroes, and other image containers across the site. The
	   previous 2026-05-19 "flat against canvas" decision suited the
	   transparent-PNG packshot variant, but the new lifestyle hero
	   (pub-bartop photo, full-bleed within the container) needs the
	   rounded edges to read as a printed photograph. overflow:hidden so
	   the IMG inside is clipped to the rounded shape. */
	border-radius: var(--bcc-radius-lg);
	overflow: hidden;
	box-shadow:
		0 1px 2px rgba(28, 24, 22, 0.08),
		0 10px 30px rgba(28, 24, 22, 0.18);
}
/* 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;
	/* 2026-05-21: match container radius so the IMG's own corners are
	   rounded (belt-and-braces; the container's overflow:hidden also
	   clips, but this guarantees a clean edge even if a future override
	   removes the overflow:hidden). */
	border-radius: var(--bcc-radius-lg);
	background: transparent;
	opacity: 1;
	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);
}

/* 2026-05-21: CTA pair used inside .bcc-info-hero on the 404 page —
   accent primary + ghost secondary, side-by-side on desktop, stacking
   on narrow screens. Mirrors AP's .awp-404-cta rule. */
.bcc-404-cta {
	display: flex;
	gap: var(--bcc-gap-3);
	justify-content: center;
	flex-wrap: wrap;
	margin-top: var(--bcc-gap-5);
}

/* 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; }