/* BCC5 components.css — sections 22-38 (PDP through Account login). */

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

.bcc-pdp { display: block; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* PLACE ORDER button — big, two-line: label + total. */
/* 2026-05-21: hardened with -webkit-appearance: none (strips native
   button rendering that was painting over our bg in some browsers) +
   !important on background + color so the button wins against any
   payment-plugin or browser cascade. Mirrors the AP5 fix. */
.bcc-checkout-place-order {
	-webkit-appearance: none;
	appearance: none;
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--bcc-gap-3);
	width: 100%;
	background: var(--bcc-accent) !important;
	color: #fff !important;
	border: 0; border-radius: var(--bcc-radius-pill);
	padding: 1rem 1.5rem .85rem;
	font-family: var(--bcc-font-sub); font-weight: 600;
	text-transform: uppercase; letter-spacing: .08em;
	font-size: 1rem;
	cursor: pointer;
	transition: background-color .15s, transform .15s var(--bcc-ease), box-shadow .15s;
	box-shadow: 0 8px 20px rgba(201,112,22,.28);
}
/* ID-based fallback for any submit button payment plugins (Stripe,
   WooPayments etc.) inject into #order_review without our class. */
#order_review #place_order,
#order_review #pay_order_button,
#order_review button[type="submit"],
#order_review input[type="submit"],
form.checkout #place_order,
form.checkout button[type="submit"][name="woocommerce_checkout_place_order"] {
	-webkit-appearance: none;
	appearance: none;
	display: flex; align-items: center; justify-content: center;
	gap: var(--bcc-gap-3);
	width: 100%;
	background: var(--bcc-accent) !important;
	color: #fff !important;
	border: 0; border-radius: var(--bcc-radius-pill);
	padding: 1rem 1.5rem .85rem;
	font-family: var(--bcc-font-sub); font-weight: 600;
	text-transform: uppercase; letter-spacing: .08em;
	font-size: 1rem;
	cursor: pointer;
	transition: background-color .15s, transform .15s var(--bcc-ease), box-shadow .15s;
	box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
#order_review #place_order:hover,
#order_review #pay_order_button:hover,
#order_review button[type="submit"]:hover,
#order_review input[type="submit"]:hover {
	background: var(--bcc-accent-deep) !important;
	transform: translateY(-1px);
	box-shadow: 0 12px 28px rgba(0,0,0,.24);
}
#order_review #place_order:disabled,
#order_review #pay_order_button:disabled,
#order_review button[type="submit"]:disabled,
#order_review input[type="submit"]:disabled {
	opacity: .7; cursor: wait; transform: none;
}
.bcc-checkout-place-order:hover {
	background: var(--bcc-accent-deep);
	transform: translateY(-1px);
	box-shadow: 0 12px 28px rgba(201,112,22,.36);
}
.bcc-checkout-place-order:disabled,
.bcc-checkout-place-order.loading {
	opacity: .7; cursor: wait; transform: none;
}
.bcc-checkout-place-order__total {
	font-family: var(--bcc-font-display);
	font-size: 1.4rem;
	text-transform: none; letter-spacing: 0;
	color: #fff;
	white-space: nowrap;
}
.bcc-checkout-place-order__total .woocommerce-Price-amount { color: #fff; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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