/**
 * CFC Bakery — storefront (ONE file, mobile-first).
 *
 * Golden rule: zero raw brand values. Every declaration consumes the plugin's
 * Layer-1 tokens (`--cfc-bakery-*`, emitted by cfc_bakery_tokens_css_frontend()),
 * each of which resolves LIVE from the theme's `--wp--preset--*` /
 * `--wp--custom--*` vars with a computed fallback. Radius/shadow/z lines carry
 * their `--wp--custom--*` provenance inline (token-lint reads it).
 *
 * Figma source: CFC-System → page "Online bakery" (2026-07-17 overnight run).
 */

/* ---------------------------------------------------------------- shell -- */

.cfc-bakery {
	background: var(--cfc-bakery-color-warm); /* surface-warm on every frame F1–F13 (#20; was the quaternary surface) */
	color: var(--cfc-bakery-color-ink);
	font-family: var(--cfc-bakery-font-body);
	font-size: var(--cfc-bakery-text-medium);
	line-height: var(--cfc-bakery-line-body);
}

/* Full bleed at 375 (#20 — every frame F1–F13 is 375 wide with the header bar and
   the footer edge to edge): the bakery roots (the three screens' and the bare page's
   plain frame) pull out of the page gutter WordPress pads a content wrapper with
   (`--wp--style--root--padding-*`, read through --cfc-bakery-page-gutter-*; 0 with no
   such variable, so no pull). `!important` because WordPress pins a constrained
   layout's children to `margin: auto !important`; the desktop block hands the margins back. */
#cfc-bakery-app,
#cfc-bakery-checkout,
#cfc-bakery-confirmed,
#cfc-bakery-frame {
	margin-left: calc(-1 * var(--cfc-bakery-page-gutter-left)) !important;
	margin-right: calc(-1 * var(--cfc-bakery-page-gutter-right)) !important;
}

.cfc-bakery *,
.cfc-bakery *::before,
.cfc-bakery *::after {
	box-sizing: border-box;
}

.cfc-bakery__inner {
	margin: 0 auto;
	max-width: var(--cfc-bakery-layout-page);
	padding: 0 var(--cfc-bakery-space-50);
}

/* ---- the bare page (#20 note 1) ---- */
/* The plugin's own document (templates/shell/page.php) carries `cfc-bakery-shell` on
   <html> and <body>; no site header or footer is on it.
   - Overscroll: <html> takes the bars' green and <body> the page's warm ground, so the
     rubber-band areas above the header and below the footer continue the bars instead
     of flashing the page colour.
   - No scroll offset: a theme reserves one for its sticky site header, which is not here.
   - No minimum on <html> itself: a theme's `min-height: 100%` there, under WordPress's
     toolbar (a top margin on <html>), would leave staff a toolbar's worth of scroll below
     the footer. The roots carry the one-screen minimum, less the toolbar.
   - The footer at the bottom: each root is at least one screen tall
     (--cfc-bakery-screen-height: the dynamic viewport, so it follows the browser's URL
     bar, less WordPress's toolbar for staff) and a column — `.cfc-bakery__main` holds
     everything but the footer and takes the spare height, so the footer sits at the
     bottom of a short screen and is scrolled to on a long one. Inside the wrapper the
     root's children stay in normal block flow, exactly as before — but in the builder,
     where the wrapper is a column one screen tall by itself, so a short step's spare
     height sits over its buttons and the footer is below the fold ("A step shorter than
     the screen", further down).
   - The safe area: left / right once, on the root (a notch in landscape); top and bottom
     are on the bars themselves (the header bar, the builder's header, the footer, the
     price drawer). All four are 0 in an ordinary browser tab. */
html.cfc-bakery-shell {
	background: var(--cfc-bakery-color-ink);
	min-height: 0;
	scroll-padding-top: 0;
}

body.cfc-bakery-shell {
	background: var(--cfc-bakery-color-warm);
	margin: 0;
}

.cfc-bakery-shell .cfc-bakery {
	box-sizing: border-box; /* The minimum counts the root's own padding (the desktop confirmation has some). */
	display: flex;
	flex-direction: column;
	min-height: var(--cfc-bakery-screen-height);
	padding-left: var(--cfc-bakery-safe-left);
	padding-right: var(--cfc-bakery-safe-right);
}

.cfc-bakery-shell .cfc-bakery__main {
	flex: 1 0 auto;
}

/* The plain frame (templates/shell/frame.php) — the bare page's safety net around
   content that came back with no bakery root (Woo's cart-errors branch, …): the
   title-only bar, that content in the column — 16 above, 24 below, as the
   confirmation's body — and the footer. Woo's own paragraphs get their spacing back
   (the frame's class in front: the shell's `.cfc-bakery p` reset follows this block). */
.cfc-bakery-frame__body {
	padding-bottom: var(--cfc-bakery-space-60);
	padding-top: var(--cfc-bakery-space-50);
}

.cfc-bakery-frame .cfc-bakery-frame__body p {
	margin: 0 0 var(--cfc-bakery-space-50);
}

/* The display face (Lovechild) is never case-transformed: the brand uses it in title case or
   sentence case only, so its text shows as typed (#36, A930). Uppercase stays on the body and
   button faces (eyebrows, labels, buttons). */
.cfc-bakery h1,
.cfc-bakery h2,
.cfc-bakery h3 {
	font-family: var(--cfc-bakery-font-display);
	font-weight: 400;
	line-height: var(--cfc-bakery-line-snug);
	margin: 0;
	color: var(--cfc-bakery-color-ink);
}

.cfc-bakery p {
	margin: 0;
}

.cfc-bakery a:not(.cfc-bakery-btn) {
	/* Buttons rendered as <a> keep their own colour (the bare `a` rule out-ranked
	   every `.cfc-bakery-btn--*` and painted See All fresh-on-fresh; #15 hand-back, A243). */
	color: var(--cfc-bakery-color-fresh);
}

/* Section eyebrow / annotation typography — the frames' field-label eyebrow
   (Gill Sans Bold 11, 8% tracking) and Bakery/Description (13 / 1.45, text-muted), #20. */
.cfc-bakery-eyebrow {
	color: var(--cfc-bakery-color-maroon);
	font-size: var(--cfc-bakery-font-size-tag);
	font-weight: 700;
	letter-spacing: var(--cfc-bakery-tracking-tag);
	line-height: normal;
	text-transform: uppercase;
}

.cfc-bakery-caption {
	color: var(--cfc-bakery-color-text-muted);
	font-size: var(--cfc-bakery-font-size-description);
	line-height: var(--cfc-bakery-line-description);
}

/* ---- bakery footer (#20, 623:2141) ---- */
/* The strip that closes every frame: the two caps links around a dot, a short
   hairline, the co-op's name, the caps line. Full bleed, after the view (below
   the builder's CTA bar and drawer). The link selector carries the footer class
   twice over the shell's `a:not(.cfc-bakery-btn)` colour. */

.cfc-bakery-footer {
	align-items: center;
	background: var(--cfc-bakery-color-ink);
	display: flex;
	flex-direction: column;
	gap: var(--cfc-bakery-fine-6);
	justify-content: center;
	padding: var(--cfc-bakery-space-60) 0;
	padding-bottom: calc(var(--cfc-bakery-space-60) + var(--cfc-bakery-safe-bottom)); /* …plus the home indicator's strip on the bare page (0 in a browser tab), #20 note 1. */
}

.cfc-bakery-footer__nav {
	display: flex;
	gap: var(--cfc-bakery-fine-12);
	white-space: nowrap;
}

.cfc-bakery-footer__nav,
.cfc-bakery-footer__since {
	font-size: var(--cfc-bakery-font-size-tag);
	letter-spacing: var(--cfc-bakery-tracking-tag);
	line-height: var(--cfc-bakery-line-none);
	text-transform: uppercase;
}

.cfc-bakery .cfc-bakery-footer a.cfc-bakery-footer__link,
.cfc-bakery-footer__since {
	color: var(--cfc-bakery-color-surface);
	text-decoration: none;
}

.cfc-bakery .cfc-bakery-footer a.cfc-bakery-footer__link:focus-visible {
	outline: var(--cfc-bakery-btn-focus-outer-width) solid var(--cfc-bakery-color-accent-bg);
	outline-offset: var(--cfc-bakery-btn-focus-offset);
}

.cfc-bakery-footer__dot,
.cfc-bakery-footer__name {
	color: var(--cfc-bakery-color-paper);
}

.cfc-bakery-footer__rule {
	background: var(--cfc-bakery-color-paper);
	height: var(--cfc-bakery-border-hairline);
	width: var(--cfc-bakery-size-footer-rule);
}

.cfc-bakery-footer__name {
	font-size: var(--cfc-bakery-text-medium);
	font-weight: var(--cfc-bakery-weight-semibold);
	line-height: var(--cfc-bakery-line-description);
	white-space: nowrap;
}

/* ------------------------------------------------------------- sub-bar -- */
/* `bakery/final/header` 623:2134, Default mode (#20): 10 / 16 padding (54 high),
   two fixed 75 slots around the title stack, the eyebrow in lime over the title
   in cream, the links SemiBold 11. */

.cfc-bakery-bar {
	background: var(--cfc-bakery-color-ink);
	color: var(--cfc-bakery-color-paper);
	padding: var(--cfc-bakery-fine-10) var(--cfc-bakery-space-50);
	padding-top: calc(var(--cfc-bakery-fine-10) + var(--cfc-bakery-safe-top)); /* …plus the notch / Dynamic Island's strip on the bare page (0 in a browser tab), #20 note 1. */
}

.cfc-bakery-bar__row {
	/* Equal end columns keep the title on the bar's true centre whatever the
	   widths of the back link and the cart pill (José 2026-10-06, A245). */
	align-items: center;
	display: grid;
	gap: 0;
	grid-template-columns: var(--cfc-bakery-size-bar-side) minmax(0, 1fr) var(--cfc-bakery-size-bar-side);
	margin: 0 auto;
	max-width: var(--cfc-bakery-layout-page);
}

.cfc-bakery-bar__row > a:first-child {
	justify-self: start;
}

.cfc-bakery-bar__cart {
	justify-self: end;
}

/* `.cfc-bakery` in front: the shell's `a:not(.cfc-bakery-btn)` rule out-ranks a bare `.cfc-bakery-bar a`. */
.cfc-bakery .cfc-bakery-bar a {
	color: var(--cfc-bakery-color-surface);
	font-size: var(--cfc-bakery-font-size-tag);
	font-weight: var(--cfc-bakery-weight-semibold);
	letter-spacing: var(--cfc-bakery-tracking-tight);
	line-height: normal;
	text-decoration: none;
	text-transform: uppercase;
}

.cfc-bakery-bar__title {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--cfc-bakery-fine-4);
	min-width: 0;
	overflow: hidden; /* The stack never leaves its column: a long title ends in "…" clear of the 75 slots (623:2134, #20). */
	padding: 0 var(--cfc-bakery-fine-6);
	text-align: center;
	white-space: nowrap;
}

.cfc-bakery-bar__kicker {
	color: var(--cfc-bakery-color-accent-bg); /* Honeysuckle on Moss — bg-only rule n/a for the header eyebrow on dark */
	display: block;
	font-size: var(--cfc-bakery-font-size-header-eyebrow);
	font-weight: var(--cfc-bakery-weight-semibold);
	letter-spacing: var(--cfc-bakery-tracking-tag);
	line-height: var(--cfc-bakery-line-none);
	text-transform: uppercase;
}

.cfc-bakery-bar__name {
	color: var(--cfc-bakery-color-surface);
	font-family: var(--cfc-bakery-font-display);
	font-size: var(--cfc-bakery-font-size-header-title);
	line-height: var(--cfc-bakery-line-tight);
	max-width: 100%;
	overflow: hidden; /* A long title ends in "…" between the two slots; the frame's titles all fit. */
	text-overflow: ellipsis;
}

/* The cart pill: the frame's fixed 75 slot is the MINIMUM here, so a two-digit
   count grows the pill instead of clipping (the frame clips; #20 logs it). */
.cfc-bakery .cfc-bakery-bar .cfc-bakery-bar__cart {
	border: var(--cfc-bakery-border-hairline) solid var(--cfc-bakery-color-accent-bg);
	border-radius: var(--cfc-bakery-radius-pill); /* = var(--wp--custom--radius--pill) */
	color: var(--cfc-bakery-color-accent-bg);
	letter-spacing: var(--cfc-bakery-tracking-tag);
	min-width: var(--cfc-bakery-size-bar-side);
	padding: calc(var(--cfc-bakery-fine-6) - var(--cfc-bakery-border-hairline)) calc(var(--cfc-bakery-fine-12) - var(--cfc-bakery-border-hairline)); /* The frame's 6 / 12 holds its 1px stroke (623:2139 is 75 × 25, #20 review) — the line comes off the padding. */
	text-align: center;
	white-space: nowrap;
}

/* ------------------------------------------------------------- buttons -- */
/* Plugin-owned set bound to the FULL --wp--custom--button--* contract
   (contract §6 sanctions the bind-branch when theme classes can't be used).
   The base IS the library's Size=Small (`Button` 165:286 — 44 high, 16 sides,
   14 label, the drop shadow): every bakery CTA on the frames is Small (#20). */

.cfc-bakery-btn {
	align-items: center;
	background: var(--cfc-bakery-color-ink);
	border: var(--cfc-bakery-btn-border-width) solid transparent;
	border-radius: var(--cfc-bakery-btn-radius); /* = var(--wp--custom--button--radius) → var(--wp--custom--radius--sm) */
	box-shadow: var(--cfc-bakery-btn-shadow); /* = var(--wp--custom--button--shadow) */
	color: var(--cfc-bakery-color-accent-bg);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--cfc-bakery-btn-font-family);
	font-size: var(--cfc-bakery-text-small);
	font-weight: var(--cfc-bakery-btn-font-weight);
	gap: var(--cfc-bakery-space-40);
	justify-content: center;
	letter-spacing: var(--cfc-bakery-btn-letter-spacing);
	line-height: var(--cfc-bakery-btn-line-height);
	min-height: var(--cfc-bakery-btn-min-h-sm);
	padding: var(--cfc-bakery-btn-pad-top-sm) calc(var(--cfc-bakery-btn-pad-x-sm) - var(--cfc-bakery-btn-border-width)) var(--cfc-bakery-btn-pad-bottom-sm); /* The frame's 16 sides hold the stroke (`Button` 165:286 has none on the filled variants): the 2px edge comes off the padding, so the label sits 16 in (#20 review). */
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color var(--cfc-bakery-btn-transition), color var(--cfc-bakery-btn-transition), border-color var(--cfc-bakery-btn-transition);
	white-space: nowrap;
}

.cfc-bakery-btn[hidden] {
	display: none;
}

.cfc-bakery-btn:hover {
	background: var(--cfc-bakery-color-accent-bg);
	color: var(--cfc-bakery-color-ink);
}

.cfc-bakery-btn:active {
	box-shadow: none;
}

.cfc-bakery-btn:focus-visible {
	outline: var(--cfc-bakery-btn-focus-outer-width) solid var(--cfc-bakery-color-fresh);
	outline-offset: var(--cfc-bakery-btn-focus-offset);
}

.cfc-bakery-btn--secondary {
	background: var(--cfc-bakery-color-accent-bg);
	color: var(--cfc-bakery-color-ink);
}

.cfc-bakery-btn--secondary:hover {
	background: var(--cfc-bakery-color-ink);
	color: var(--cfc-bakery-color-accent-bg);
}

.cfc-bakery-btn--tertiary {
	background: var(--cfc-bakery-btn-tertiary-bg);
	color: var(--cfc-bakery-color-paper);
}

.cfc-bakery-btn--tertiary:hover {
	background: var(--cfc-bakery-color-ink);
	color: var(--cfc-bakery-color-paper);
}

.cfc-bakery-btn--outline {
	background: transparent;
	border-color: var(--cfc-bakery-color-ink);
	color: var(--cfc-bakery-color-ink);
}

.cfc-bakery-btn--outline:hover {
	background: var(--cfc-bakery-color-ink);
	color: var(--cfc-bakery-color-surface);
}

/* Redundant since the base became Small (#20); the class stays on the markup that carries it. */
.cfc-bakery-btn--sm {
	min-height: var(--cfc-bakery-btn-min-h-sm);
	padding: var(--cfc-bakery-btn-pad-top-sm) calc(var(--cfc-bakery-btn-pad-x-sm) - var(--cfc-bakery-btn-border-width)) var(--cfc-bakery-btn-pad-bottom-sm);
}

/* No storefront or checkout CTA carries --lg since #20 (no bakery node is Large). */
.cfc-bakery-btn--lg {
	min-height: var(--cfc-bakery-btn-min-h-lg);
	padding: var(--cfc-bakery-btn-pad-top-lg) calc(var(--cfc-bakery-btn-pad-x-lg) - var(--cfc-bakery-btn-border-width)) var(--cfc-bakery-btn-pad-bottom-lg);
}

.cfc-bakery-btn[disabled],
.cfc-bakery-btn--disabled {
	box-shadow: none;
	cursor: not-allowed;
	opacity: var(--cfc-bakery-disabled-opacity);
}

/* -------------------------------------------------------------- loader -- */
/* The loader inside what waits on the server (#20 note 2 — José 2026-10-14: "let's put a loader on the ones
   that we know are going to take more … maybe the counter itself transforms to a loader and appears again
   once it's done"; 2026-10-20: "a loader inside the button when actions take long"). No frame draws a
   loading state: a placeholder in the plugin's own tokens. A busy button (`.cfc-bakery-btn.is-busy` +
   aria-busy, set by the script — never `disabled`, so focus stays; WooCommerce's own `processing` class
   on the checkout form for PLACE ORDER) keeps its label in the box, so it keeps its size, but draws it
   clear (the text fill, not `color`: the ring is drawn in `currentColor`, the variant's own ink) and takes
   no tap; a ring of the button's stroke turns over the label, its quarter open. A busy stepper (the
   counter's root or the cart row's stepper with aria-busy) draws its number clear and the same ring over
   it, between the − and the + it leaves as they are. With reduced motion asked for (the shell's early
   script marks <html>), the ring stands still — its gap still says "waiting". */
@keyframes cfc-bakery-spin {
	to { transform: rotate(1turn); }
}

.cfc-bakery-btn.is-busy,
.cfc-bakery-checkout form.checkout.processing .cfc-bakery-checkout__submit {
	-webkit-text-fill-color: transparent;
	pointer-events: none;
	position: relative;
}

.cfc-bakery-stepper[aria-busy="true"],
[data-cfc-counter][aria-busy="true"] .cfc-bakery-stepper {
	position: relative;
}

.cfc-bakery-stepper[aria-busy="true"] .cfc-bakery-stepper__input,
[data-cfc-counter][aria-busy="true"] .cfc-bakery-stepper__input {
	-webkit-text-fill-color: transparent;
}

.cfc-bakery-btn.is-busy::after,
.cfc-bakery-checkout form.checkout.processing .cfc-bakery-checkout__submit::after,
.cfc-bakery-stepper[aria-busy="true"]::after,
[data-cfc-counter][aria-busy="true"] .cfc-bakery-stepper::after {
	animation: cfc-bakery-spin var(--cfc-bakery-loader-spin) linear infinite;
	border: var(--cfc-bakery-btn-border-width) solid currentColor;
	border-radius: 50%;
	border-right-color: transparent;
	content: "";
	height: var(--cfc-bakery-size-loader);
	inset: 0;
	margin: auto; /* Centred in the box both ways — over the label, and over the stepper's number (the − and + are the same width either side of it). */
	position: absolute;
	width: var(--cfc-bakery-size-loader);
}

/* The stepper's ring in the number's ink (the stepper itself carries no colour of its own). */
.cfc-bakery-stepper[aria-busy="true"]::after,
[data-cfc-counter][aria-busy="true"] .cfc-bakery-stepper::after {
	color: var(--cfc-bakery-color-ink);
}

html.cfc-bakery-reduce-motion .cfc-bakery-btn.is-busy::after,
html.cfc-bakery-reduce-motion .cfc-bakery-checkout form.checkout.processing .cfc-bakery-checkout__submit::after,
html.cfc-bakery-reduce-motion .cfc-bakery-stepper[aria-busy="true"]::after,
html.cfc-bakery-reduce-motion [data-cfc-counter][aria-busy="true"] .cfc-bakery-stepper::after {
	animation: none;
}

/* -------------------------------------------------------------- notices -- */

/* Woo's notices in the shell wear the Figma callout (bakery/final/callout 619:2112)
   without its eyebrow: the mint ground, the success bar on the left, the description
   line (A276). Two markups, one look: under a block theme (cfc-theme, and WordPress's
   own defaults with the theme off) Woo prints `.wc-block-components-notice-banner`
   with an icon; under a classic theme, `.woocommerce-info / -message / -error`.
   Woo's own chrome (border, icon, its pinned padding) is switched off here. The
   `[class]` lifts the rule over Woo's own `.is-info` / `.is-error` selectors. */
.cfc-bakery-notices .wc-block-components-notice-banner[class],
.cfc-bakery-notices .woocommerce-error,
.cfc-bakery-notices .woocommerce-message,
.cfc-bakery-notices .woocommerce-info {
	--cfc-bakery-callout-bar: var(--cfc-bakery-fine-4);
	--cfc-bakery-callout-edge: var(--cfc-bakery-color-success);
	background: linear-gradient(90deg, var(--cfc-bakery-callout-edge) calc(var(--cfc-bakery-callout-bar) + var(--cfc-bakery-radius-sm)), transparent calc(var(--cfc-bakery-callout-bar) + var(--cfc-bakery-radius-sm))); /* The callout's shape (619:2112, #20 review): the green box's left end; the mint panel is the layer below. */
	border: 0;
	border-radius: var(--cfc-bakery-radius-sm); /* = var(--wp--custom--radius--sm) */
	box-shadow: none;
	color: var(--cfc-bakery-color-ink);
	display: block;
	font-size: var(--cfc-bakery-font-size-description);
	isolation: isolate;
	line-height: var(--cfc-bakery-line-description);
	list-style: none;
	margin: var(--cfc-bakery-space-50) 0;
	padding: var(--cfc-bakery-fine-12) var(--cfc-bakery-fine-18) var(--cfc-bakery-fine-12) calc(var(--cfc-bakery-fine-18) + var(--cfc-bakery-callout-bar)) !important; /* Woo pins its banner's padding with !important */
	position: relative;
}

/* The mint panel: inset the bar's 4 from the left, round on its own corners (`::after` —
   Woo's icon holds `::before` on the classic markup and is switched off below). */
.cfc-bakery-notices .wc-block-components-notice-banner[class]::after,
.cfc-bakery-notices .woocommerce-error::after,
.cfc-bakery-notices .woocommerce-message::after,
.cfc-bakery-notices .woocommerce-info::after {
	background: var(--cfc-bakery-color-mint);
	border-radius: var(--cfc-bakery-radius-sm);
	content: "";
	display: block;
	inset: 0 0 0 var(--cfc-bakery-callout-bar);
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.cfc-bakery-notices .wc-block-components-notice-banner > svg,
.cfc-bakery-notices .woocommerce-error::before,
.cfc-bakery-notices .woocommerce-message::before,
.cfc-bakery-notices .woocommerce-info::before {
	display: none;
}

.cfc-bakery-notices .wc-block-components-notice-banner > .wc-block-components-notice-banner__content[class] {
	padding: 0;
}

.cfc-bakery-notices .wc-block-components-notice-banner > .wc-block-components-notice-banner__content ul,
.cfc-bakery-notices .woocommerce-error li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cfc-bakery-notices .wc-block-components-notice-banner__summary {
	color: inherit;
}

/* The link inside a notice ({cart-undo}): the callout's ink, underlined, in the text line */
.cfc-bakery-notices .wc-block-components-notice-banner a,
.cfc-bakery-notices .woocommerce-error a,
.cfc-bakery-notices .woocommerce-message a,
.cfc-bakery-notices .woocommerce-info a {
	color: inherit;
	float: none;
	font-weight: 700;
	text-decoration: underline;
}

/* Woo's own "View cart" / "Continue shopping" link inside a success notice
   (`.wc-forward`, the classic markup gives it a button look): the same inline
   link as {cart-undo}, not Woo's button (#18 review round 5). */
.cfc-bakery-notices .woocommerce-message .wc-forward,
.cfc-bakery-notices .wc-block-components-notice-banner .wc-forward {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: inherit;
	display: inline;
	float: none;
	font-family: inherit;
	font-size: inherit;
	font-weight: 700;
	line-height: inherit;
	margin: 0 0 0 var(--cfc-bakery-fine-2); /* #20: the admin-only space-2xs name stood here — no value on the front end. */
	padding: 0;
	text-decoration: underline;
	text-transform: none;
}

.cfc-bakery-notices .wc-block-components-notice-banner.is-error[class],
.cfc-bakery-notices .woocommerce-error {
	--cfc-bakery-callout-edge: var(--cfc-bakery-color-error-text);
	color: var(--cfc-bakery-color-error-text);
}

.cfc-bakery-notices .wc-block-components-notice-banner.is-error[class]::after,
.cfc-bakery-notices .woocommerce-error::after {
	background: var(--cfc-bakery-color-error-bg);
}

/* ------------------------------------------------------------- landing -- */

/* The marquee line under the header bar ({landing-marquee}, F1 750:2, #20):
   one static centred line on the lime — the frame describes no motion. */
.cfc-bakery-marquee {
	align-items: center;
	background: var(--cfc-bakery-color-accent-bg);
	color: var(--cfc-bakery-color-ink);
	display: flex;
	font-size: var(--cfc-bakery-font-size-header-eyebrow);
	font-weight: var(--cfc-bakery-weight-semibold);
	justify-content: center;
	letter-spacing: var(--cfc-bakery-tracking-tag);
	line-height: var(--cfc-bakery-line-none);
	overflow: hidden;
	padding: var(--cfc-bakery-space-40) var(--cfc-bakery-space-50);
	text-align: center;
	text-transform: uppercase;
}

/* The Holiday banner (#39, Figma `Holiday banner` 2127:5923): the leaf garland under the header on every
   storefront screen while a holiday season shows (under the marquee on the landing) — the one visual marker of
   "in season". The artwork is the plugin's SVG (assets/images/holiday-banner.svg), repeated across the width. */
.cfc-bakery-holiday-banner {
	background-color: var(--cfc-bakery-color-holiday-banner);
	padding: var(--cfc-bakery-space-holiday-banner) 0;
}

.cfc-bakery-holiday-banner__garland {
	background-image: url("../images/holiday-banner.svg");
	background-position: center;
	background-repeat: repeat-x;
	background-size: auto var(--cfc-bakery-size-holiday-banner);
	height: var(--cfc-bakery-size-holiday-banner);
}

.cfc-bakery-hero {
	padding-bottom: var(--cfc-bakery-space-60); /* top / bottom only: the sides are the column's 16 gutter (#20) */
	padding-top: var(--cfc-bakery-space-70);
	text-align: center;
}

/* {landing-hero-title} 633:2223 (#20): Heading/H2 — Lovechild 32 / 1.2, the sub 16 under it
   (the hero's gap). `.cfc-bakery` in front: the theme's post-content heading margins
   (`* + h1`, `h1 + *`) out-rank a bare class. */
.cfc-bakery .cfc-bakery-hero__title {
	font-size: var(--cfc-bakery-font-size-hero);
	line-height: var(--cfc-bakery-line-snug);
	margin: 0 0 var(--cfc-bakery-space-50);
}

/* {landing-hero-sub} 633:2224 (#20): Gill Sans Regular 14, line-height auto, text-muted;
   the frame's one text block holds an empty line between its two paragraphs — one
   16 line here. `.cfc-bakery` in front: the shell's `p { margin: 0 }` and the
   theme's `h1 + *` out-rank a bare class. */
.cfc-bakery .cfc-bakery-hero__lede {
	color: var(--cfc-bakery-color-text-muted);
	font-size: var(--cfc-bakery-text-small);
	line-height: normal;
	margin: var(--cfc-bakery-space-50) auto 0;
	max-width: 34em;
}

.cfc-bakery .cfc-bakery-hero__title + .cfc-bakery-hero__lede {
	margin-top: 0;
}

/* The landing in season (#44, Figma F1.1 1809:4344): the strip on maroon (quinary) with white type, the hero's
   title in maroon, the cut-off line a paragraph of the text, the photo under it at every width (343 × 257 at 375:
   4:3 across the column, radius 8), the holiday rows' chevron in salmon (nonary) — tokens the stylesheet has. */
.cfc-bakery-marquee--holiday {
	background: var(--cfc-bakery-color-maroon);
	color: var(--cfc-bakery-color-paper);
}

.cfc-bakery .cfc-bakery-hero--holiday .cfc-bakery-hero__title {
	color: var(--cfc-bakery-color-maroon);
}

.cfc-bakery-hero__photo {
	aspect-ratio: 4 / 3;
	border-radius: var(--cfc-bakery-radius-sm);
	display: block;
	height: auto;
	margin-top: var(--cfc-bakery-space-50);
	object-fit: cover;
	width: 100%;
}

.cfc-bakery .cfc-bakery-cat-row__chevron--holiday {
	color: var(--cfc-bakery-color-salmon);
}

/* Featured module (F1 / F11, the `Slider=Compact` 2-up 749:7, #20): no band —
   the warm page shows; 24 above and below, the head 6 apart, the cards 13 apart. */
.cfc-bakery-featured {
	background: transparent;
	padding: var(--cfc-bakery-space-60) 0;
}

.cfc-bakery-featured__head {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: var(--cfc-bakery-fine-6);
}

.cfc-bakery .cfc-bakery-featured__title {
	font-size: var(--cfc-bakery-font-size-section-title);
	line-height: var(--cfc-bakery-line-title);
	margin: 0; /* The theme's post-content h2 top margin out-ranks the shell's reset: the head opens on the module's 24 (`section-head` 633:2226, #20). */
}

/* One or two items: the 2-up compact grid on every width and both placements (D12, A175);
   each card keeps its own height (`featured-grid` 750:4 is items-start: 212 beside 193, #20).
   Three or more are the carousel further down (#20 note 7). */
.cfc-bakery-featured__grid {
	align-items: start;
	display: grid;
	gap: var(--cfc-bakery-fine-13);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: var(--cfc-bakery-fine-12);
}

/* `.cfc-bakery` in front: the theme's `h2 + * { margin-top: 1em }` out-ranks a bare class — the note sits the head's 6 under the title (#20). */
.cfc-bakery .cfc-bakery-featured__note {
	color: var(--cfc-bakery-color-text-muted);
	flex-basis: 100%;
	font-size: var(--cfc-bakery-font-size-description);
	line-height: var(--cfc-bakery-line-description);
	margin: 0;
}

.cfc-bakery-featured--cart {
	background: transparent;
}

/* `.cfc-bakery` in front: the theme's `h3 + * { margin-top: 1em }` out-ranks a bare class — the meta row sits the body's 4 under the name (749:12, #20). */
.cfc-bakery .cfc-bakery-featured__window {
	color: var(--cfc-bakery-color-text-muted);
	font-size: var(--cfc-bakery-font-size-description);
	line-height: var(--cfc-bakery-line-description);
	margin: 0;
}

/* The whole compact card is one link (#20 note 6): a block that fills the card — its
   full height too where the grid stretches the cards (the cart) — with nothing
   underlined inside it. `a.` in the selector: the shell's `a:not(.cfc-bakery-btn)`
   green out-ranks the class alone. The focus ring is drawn INSIDE the link, on the
   card's inner curve: the card clips at its line, so a ring outside would not show. */
.cfc-bakery a.cfc-bakery-featured__link {
	border-radius: calc(var(--cfc-bakery-radius-lg) - var(--cfc-bakery-border-hairline));
	color: var(--cfc-bakery-color-ink);
	display: block;
	height: 100%;
	text-decoration: none;
}

.cfc-bakery a.cfc-bakery-featured__link:focus-visible {
	outline: var(--cfc-bakery-btn-focus-outer-width) solid var(--cfc-bakery-color-fresh);
	outline-offset: calc(-1 * var(--cfc-bakery-btn-focus-outer-width));
}

.cfc-bakery-card {
	background: var(--cfc-bakery-color-paper);
	border: var(--cfc-bakery-border-hairline) solid var(--cfc-bakery-color-line);
	border-radius: var(--cfc-bakery-radius-lg); /* = var(--wp--custom--radius--lg) */
	overflow: hidden;
}

/* The image box is a fixed 110 high (749:8) less the card's line (the frame's stroke is inside the box); with no photo the neutral placeholder fills it. */
.cfc-bakery-card__img {
	display: block;
	height: calc(var(--cfc-bakery-size-card-img) - var(--cfc-bakery-border-hairline));
	object-fit: cover;
	width: 100%;
}

/* Two classes: the placeholder's own height / radius sit later in this file. */
.cfc-bakery-card__img.cfc-bakery-img-placeholder {
	border-radius: 0;
	height: calc(var(--cfc-bakery-size-card-img) - var(--cfc-bakery-border-hairline));
}

.cfc-bakery-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--cfc-bakery-fine-4);
	padding: var(--cfc-bakery-fine-10) calc(var(--cfc-bakery-fine-12) - var(--cfc-bakery-border-hairline)) calc(var(--cfc-bakery-fine-12) - var(--cfc-bakery-border-hairline)); /* 10 / 12 / 12 less the card's line */
}

/* Bakery/Menu Item Title. `.cfc-bakery` in front: the shell's h3 rule out-ranks a bare class. */
.cfc-bakery .cfc-bakery-card__name {
	font-family: var(--cfc-bakery-font-body);
	font-size: var(--cfc-bakery-text-medium);
	font-weight: var(--cfc-bakery-weight-semibold);
	line-height: var(--cfc-bakery-line-snug);
	margin: 0;
	text-transform: capitalize;
}

/* `.cfc-bakery` in front: on a card with no window / tag line the price follows the name, and
   the theme's heading-sibling top margin out-ranked the bare class (the body's gap is 4, 749:10, #20). */
.cfc-bakery .cfc-bakery-card__price {
	color: var(--cfc-bakery-color-success-text);
	margin: 0;
	font-size: var(--cfc-bakery-font-size-price);
	font-weight: var(--cfc-bakery-weight-semibold);
	line-height: var(--cfc-bakery-line-none);
}

/* The carousel — three or more items (#20 note 7; the full-width card 633:2230, `Slider=Add`
   624:2479). ONE white card, 12 under the head: its slides scroll sideways inside it and snap,
   one to a view, so it swipes with no script. The two chevrons and the dots are one set, laid
   where the frame draws them on a card: the chevrons on the image, the dots 12 under the
   action row and 16 from the card's foot. The card's line is inside the frame's boxes, as on
   the small card. featured.js moves the row and keeps the dots right. The card is the size
   container of its own inner width: the chevrons centre on the 4:3 picture with it (below). */
.cfc-bakery-featured__carousel {
	container-type: inline-size;
	margin-top: var(--cfc-bakery-fine-12);
	padding-bottom: calc(var(--cfc-bakery-space-50) - var(--cfc-bakery-fine-6) - var(--cfc-bakery-border-hairline)); /* 16 from the foot: less the dots' 6 (or, with no dots, the slide's) and the line */
	position: relative;
}

.cfc-bakery-featured__track {
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.cfc-bakery-featured__track::-webkit-scrollbar {
	display: none;
}

/* `position: relative`: the box "Learn More"'s cover stretches over (below — the whole slide opens the product page). */
.cfc-bakery-featured__slide {
	display: flex;
	flex: 0 0 100%;
	flex-direction: column;
	min-width: 0;
	position: relative;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

/* The image box is 4:3 at the card's full width on a phone (#20, José 2026-10-20); the desktop block keeps
   it a fixed 170 high (624:2480) less the card's line. With no photo the neutral placeholder fills it. */
.cfc-bakery-featured__photo {
	aspect-ratio: 4 / 3;
	display: block;
	flex: none;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* Two classes: the placeholder's own height / radius sit later in this file. */
.cfc-bakery-featured__photo.cfc-bakery-img-placeholder {
	border-radius: 0;
	height: auto;
}

/* `body` 624:2486: 14 above, 16 at the sides less the line; the text stack, then the action row 6 under
   it (724:3284) — at the slide's foot when a neighbour is taller, so the row and the dots never move
   between slides. The 6 under the row is half of the frame's 12 to the dots: inside the scroll box, it
   keeps the link's focus ring from being cut. */
.cfc-bakery-featured__slide-body {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	gap: var(--cfc-bakery-fine-6);
	justify-content: space-between;
	padding: var(--cfc-bakery-fine-14) calc(var(--cfc-bakery-space-50) - var(--cfc-bakery-border-hairline)) var(--cfc-bakery-fine-6);
}

/* The date + pills, the name and the description, 8 apart (724:3276). */
.cfc-bakery-featured__text {
	display: flex;
	flex-direction: column;
	gap: var(--cfc-bakery-space-40);
}

/* `meta row` 624:2487: the date and the dietary pills 8 apart, centred; a long window wraps the pills under it. */
.cfc-bakery-featured__meta {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--cfc-bakery-fine-4) var(--cfc-bakery-space-40);
}

/* The date 624:2488: Gill Sans Bold 14 at 2%, one line, success-text. */
.cfc-bakery-featured__date {
	color: var(--cfc-bakery-color-success-text);
	font-size: var(--cfc-bakery-text-small);
	font-weight: 700;
	letter-spacing: var(--cfc-bakery-tracking-tight);
	line-height: normal;
	white-space: nowrap;
}

/* The name 624:2491: Bakery/Section Title. `.cfc-bakery` in front: the shell's h3 rule and the theme's heading margins out-rank a bare class. */
.cfc-bakery .cfc-bakery-featured__name {
	font-size: var(--cfc-bakery-font-size-section-title);
	line-height: var(--cfc-bakery-line-title);
	margin: 0;
}

/* The description 624:2492: Bakery/Description, cut at two lines by `.cfc-bakery-clamp-2` on the markup. `.cfc-bakery` in front: the theme's `h3 + *` top margin. */
.cfc-bakery .cfc-bakery-featured__desc {
	color: var(--cfc-bakery-color-text-muted);
	font-size: var(--cfc-bakery-font-size-description);
	line-height: var(--cfc-bakery-line-description);
	margin: 0;
}

/* #52 — the holiday card's price row (`1981:4913`, "$XX.00 · per x"): "$29.99 lb", the unit inside the string; the compact card's price look. */
.cfc-bakery .cfc-bakery-featured__price {
	color: var(--cfc-bakery-color-success-text);
	font-size: var(--cfc-bakery-font-size-price);
	font-weight: var(--cfc-bakery-weight-semibold);
	line-height: var(--cfc-bakery-line-none);
	margin: 0;
}

/* `action row` 724:3243: 28 high with or without the stepper; the link at the left, the stepper at the right edge, at least 10 apart, both on the row's foot.
   The auto margin takes the body's spare height above the row — where `space-between` already puts it while the row is the body's last child — so that
   when the message at the largest quantity follows the row (below), the two stay together at the slide's foot instead of sharing that space out.
   A grid (José 2026-10-13, in a session: a counter adds to the cart): the link's column takes what the counter leaves, and the counter's short line
   takes a second line of its own across both — no height at all while it is empty. */
.cfc-bakery-featured__action {
	align-items: end;
	display: grid;
	gap: 0 var(--cfc-bakery-fine-10);
	grid-template-columns: minmax(0, 1fr) auto;
	margin-top: auto;
	min-height: var(--cfc-bakery-size-stepper);
}

/* "Learn More" 724:3245: Bakery/Option Label in the secondary green, one line with an ellipsis, no underline, no
   button chrome. `a.` in the selector, as the other links. The link is as wide as its words (the frame's fills the
   row; here the empty part of the row is not a link and the focus ring sits round the words); the space over the
   words is the link's own, so it is the row's 28 high under a finger and the words stay on the row's foot. */
.cfc-bakery a.cfc-bakery-featured__more {
	color: var(--cfc-bakery-color-fresh);
	flex: 0 1 auto;
	font-size: var(--cfc-bakery-font-size-option-label);
	font-weight: var(--cfc-bakery-weight-semibold);
	justify-self: start;
	line-height: var(--cfc-bakery-line-label);
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
	padding-top: calc(var(--cfc-bakery-size-stepper) - var(--cfc-bakery-font-size-option-label) * var(--cfc-bakery-line-label));
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cfc-bakery a.cfc-bakery-featured__more:focus-visible {
	outline: var(--cfc-bakery-btn-focus-outer-width) solid var(--cfc-bakery-color-fresh);
	outline-offset: var(--cfc-bakery-btn-focus-offset);
}

/* The whole slide opens the product page (José 2026-10-13, in a session: "the card itself should be a button that leads to the same
   link as Learn More"). The slide is not wrapped in a link — the counter's buttons would sit inside it: "Learn More" stays the ONE
   link, and this cover, its own box, is stretched over the slide (the slide is its containing block; the link is not positioned, so
   its `overflow` does not clip it). Its name stays "Learn More — {item}" (A176); a finger swipe of the row is a scroll, not a tap. */
.cfc-bakery a.cfc-bakery-featured__more::after {
	content: "";
	inset: 0;
	position: absolute;
}

/* The counter (the stepper 622:2133, 96 × 28) — only on an item the product page adds straight to the cart. Its wrapper steps
   aside so the counter and its short line are the action row's own cells: the counter at the right edge of the first line, the
   line across the second. */
.cfc-bakery-featured__qty {
	display: contents;
}

.cfc-bakery-featured__action .cfc-bakery-counter {
	justify-self: end;
}

/* A build item's cart icon on the carousel card (José 2026-10-14 / 2026-10-18, thread d0ed7212; the icon #20,
   2026-10-20): a link to the builder in the counter's look (`.cfc-bakery-counter__add` gives the bare icon, the
   colours, the 44 tap area and the focus ring), no underline, at the action row's right edge, and positioned so
   it paints above "Learn More"'s stretched cover as the counter does: a tap on it never opens the product page. */
.cfc-bakery a.cfc-bakery-featured__build {
	justify-self: end;
	position: relative;
	text-decoration: none;
}

.cfc-bakery-featured__action .cfc-bakery-counter__status {
	grid-column: 1 / -1;
	text-align: right;
}

.cfc-bakery-featured__action .cfc-bakery-counter__status:not(:empty) {
	margin-top: var(--cfc-bakery-fine-6);
}

/* {qty-max-note} on the carousel card (#20, A406; no frame draws it): the body's last child, after the action row —
   6 under it, the body's own gap — and at the right edge, under the counter it speaks for. Hidden, it is no flex
   item: the row keeps its 28 and the dots their place. Shown, the card is one line taller. */
.cfc-bakery-featured__slide-body .cfc-bakery-qty-note {
	position: relative; /* Above "Learn More"'s cover: positioned and later in the slide than the link, it paints over it with no z-index. */
	text-align: right;
}

/* The chevrons 624:2482 / 624:2484: 32 round, white, no line and no shadow, the glyph Gill Sans Bold 16 in ink —
   10 in from the card's outer edges, less the card's line, and centred on the picture: on a phone the 4:3
   picture is three quarters of the card's inner width high (`75cqw`, the carousel being the container), and
   `top` counts from inside the card's line, where the picture starts; the desktop block centres them on the
   170 picture (69 down, less the line). */
.cfc-bakery-featured__nav {
	align-items: center;
	appearance: none;
	background: var(--cfc-bakery-color-paper);
	border: 0;
	border-radius: var(--cfc-bakery-radius-pill); /* = var(--wp--custom--radius--pill) */
	color: var(--cfc-bakery-color-ink);
	cursor: pointer;
	display: flex;
	font-family: var(--cfc-bakery-font-body);
	font-size: var(--cfc-bakery-text-medium);
	font-weight: 700;
	height: var(--cfc-bakery-size-icon);
	justify-content: center;
	line-height: var(--cfc-bakery-line-none);
	margin: 0;
	min-height: 0;
	min-width: 0;
	padding: 0;
	position: absolute;
	top: calc((75cqw - var(--cfc-bakery-size-icon)) / 2);
	width: var(--cfc-bakery-size-icon);
}

.cfc-bakery-featured__nav--prev {
	left: calc(var(--cfc-bakery-fine-10) - var(--cfc-bakery-border-hairline));
}

.cfc-bakery-featured__nav--next {
	right: calc(var(--cfc-bakery-fine-10) - var(--cfc-bakery-border-hairline));
}

.cfc-bakery-featured__nav:focus-visible,
.cfc-bakery-featured__dot:focus-visible {
	outline: var(--cfc-bakery-btn-focus-outer-width) solid var(--cfc-bakery-color-fresh);
	outline-offset: var(--cfc-bakery-btn-focus-offset);
}

/* The dots 624:2496: 8 round, 6 apart, centred — 12 under the action row (6 of it the slide's) and 16 from the
   card's foot (6 here, the rest the card's padding). */
.cfc-bakery-featured__dots {
	display: flex;
	gap: var(--cfc-bakery-fine-6);
	justify-content: center;
	margin: var(--cfc-bakery-fine-6) 0;
}

/* As drawn (624:2497–2499): the dot at rest is surface-warm — nearly white on the white card (A394, José's call;
   a darker rest state is this one `background`) — and the current one the secondary green, the same size: the
   plugin's own 8 (`fine-8`, A403), so it is 8 under any theme. */
.cfc-bakery-featured__dot {
	appearance: none;
	background: var(--cfc-bakery-color-warm);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	height: var(--cfc-bakery-fine-8);
	margin: 0;
	min-height: 0;
	min-width: 0;
	padding: 0;
	position: relative;
	width: var(--cfc-bakery-fine-8);
}

.cfc-bakery-featured__dot[aria-current="true"] {
	background: var(--cfc-bakery-color-fresh);
}

/* What a finger can hit, without moving or drawing anything: the 8 dot's box grown to 14 × 20 (the dots are 6 apart). */
.cfc-bakery-featured__dot::after {
	content: "";
	inset: calc(-1 * var(--cfc-bakery-fine-6)) calc(-1 * var(--cfc-bakery-fine-3));
	position: absolute;
}

/* Without featured.js the row still swipes and every link opens its product page; the chevrons, the dots and
   the counter would do nothing, so they are not shown (the slide's 6 and the card's padding keep the 16 foot). */
html:not(.cfc-bakery-js) .cfc-bakery-featured__nav,
html:not(.cfc-bakery-js) .cfc-bakery-featured__dots,
html:not(.cfc-bakery-js) .cfc-bakery-featured__qty {
	display: none;
}

/* …and with no counter there is no number to be at its limit: its message goes with it (a card whose counter starts
   at the largest quantity prints the note shown, A406). */
html:not(.cfc-bakery-js) .cfc-bakery-featured__slide-body .cfc-bakery-qty-note {
	display: none;
}

/* `categories` 633:2251 (#20): 24 above and below, the title / rows / button 10 apart. */
.cfc-bakery-cats {
	padding: var(--cfc-bakery-space-60) 0;
}

.cfc-bakery .cfc-bakery-cats__title {
	font-size: var(--cfc-bakery-font-size-section-title);
	line-height: var(--cfc-bakery-line-title);
	margin: 0 0 var(--cfc-bakery-fine-10); /* top 0: the theme's post-content h2 top margin out-ranks the shell's reset */
}

/* `category-row` 619:2113 (#20): a white card on the line, 12 / 16 inside, rows 10 apart.
   `a.` in the selector: the shell's `a:not(.cfc-bakery-btn)` green out-ranked the class
   alone and painted the name secondary — the frame's name is primary (619:2114). */
.cfc-bakery a.cfc-bakery-cat-row {
	align-items: center;
	background: var(--cfc-bakery-color-paper);
	border: var(--cfc-bakery-border-hairline) solid var(--cfc-bakery-color-line);
	border-radius: var(--cfc-bakery-radius-md); /* = var(--wp--custom--radius--md) */
	color: var(--cfc-bakery-color-ink);
	display: flex;
	gap: var(--cfc-bakery-fine-12);
	margin-top: var(--cfc-bakery-fine-10);
	padding: calc(var(--cfc-bakery-fine-12) - var(--cfc-bakery-border-hairline)) calc(var(--cfc-bakery-space-50) - var(--cfc-bakery-border-hairline)); /* 12 / 16 less the line: the frame's stroke is inside the box (94 high) */
	text-decoration: none;
}

.cfc-bakery a.cfc-bakery-cat-row:first-of-type {
	margin-top: 0;
}

.cfc-bakery .cfc-bakery-cat-row:focus-visible {
	outline: var(--cfc-bakery-btn-focus-outer-width) solid var(--cfc-bakery-color-fresh);
	outline-offset: var(--cfc-bakery-btn-focus-offset);
}

.cfc-bakery-cat-row .cfc-bakery-cat-row__thumb {
	/* Scoped to out-rank the placeholder's width / height: 100% (#15 hand-back, A243). */
	border-radius: var(--cfc-bakery-radius-sm); /* = var(--wp--custom--radius--sm) */
	flex-shrink: 0;
	height: var(--cfc-bakery-size-thumb-cat); /* `category-row` 619:2113 thumb 70 × 70 (#15); the first visible item's image or the square placeholder (A233). */
	object-fit: cover;
	width: var(--cfc-bakery-size-thumb-cat);
}

/* This row's empty thumb is the quaternary fill, not the neutral grey (619:2113). */
.cfc-bakery-cat-row .cfc-bakery-cat-row__thumb.cfc-bakery-img-placeholder {
	background: var(--cfc-bakery-color-surface);
}

.cfc-bakery-cat-row__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--cfc-bakery-fine-2);
	min-width: 0;
}

.cfc-bakery-cat-row__name {
	font-family: var(--cfc-bakery-font-body);
	font-size: var(--cfc-bakery-text-medium);
	font-weight: var(--cfc-bakery-weight-semibold);
	line-height: var(--cfc-bakery-line-snug);
	text-transform: capitalize;
}

.cfc-bakery-cat-row__count {
	color: var(--cfc-bakery-color-text-muted);
	display: block;
	font-size: var(--cfc-bakery-font-size-description);
	line-height: var(--cfc-bakery-line-description);
}

.cfc-bakery-cat-row__chevron {
	color: var(--cfc-bakery-color-fresh);
	font-weight: var(--cfc-bakery-weight-semibold);
	line-height: normal;
	margin-left: auto;
}

/* ---------------------------------------------------------------- menu -- */

/* `builder-banner` 624:2167 (#20): 20 inside, the parts 10 apart, white type on the green. */
.cfc-bakery-banner {
	background: var(--cfc-bakery-color-fresh);
	border-radius: var(--cfc-bakery-radius-lg); /* = var(--wp--custom--radius--lg) */
	color: var(--cfc-bakery-color-paper);
	display: flex;
	flex-direction: column;
	gap: var(--cfc-bakery-fine-10);
	margin: var(--cfc-bakery-space-50) 0;
	padding: var(--cfc-bakery-fine-20);
}

.cfc-bakery .cfc-bakery-banner__title {
	color: var(--cfc-bakery-color-paper);
	margin: 0; /* The theme's post-content `h2 { margin-top: 1em }` out-ranks the shell's reset: the title sits on the card's 20 (624:2169, #20). */
	font-size: var(--cfc-bakery-font-size-section-title);
	line-height: var(--cfc-bakery-line-title);
}

/* `.cfc-bakery` in front: the theme's paragraph colour out-ranked the card's white (624:2170, #20). */
.cfc-bakery .cfc-bakery-banner__body {
	color: var(--cfc-bakery-color-paper);
	font-size: var(--cfc-bakery-font-size-description);
	line-height: var(--cfc-bakery-line-description);
	margin: 0;
}

.cfc-bakery-banner__row {
	align-items: center;
	display: flex;
	flex-wrap: nowrap;
	gap: var(--cfc-bakery-fine-4); /* `price-cta-row` 677:2042 is justify-between with no gap and the frame's label leaves ~10 of air; a 4px floor keeps a longer label (whatever the setting is given) from touching the price stack while the frame's own label still fits on one line (#20 review; was 8). */
	justify-content: space-between;
}

/* `price-cta-row` 677:2042 (#20): the price stack keeps its width on the left, the
   CTA hugs its label on the right and stays inside the card's 20 — a label too
   long for the row wraps inside the button instead of leaving the card. */
.cfc-bakery-banner__row .cfc-bakery-banner__price {
	flex: 0 0 auto;
}

.cfc-bakery-banner__row .cfc-bakery-btn {
	flex: 0 1 auto;
	min-width: 0;
	text-align: center;
	white-space: normal;
}

.cfc-bakery-banner__price {
	color: var(--cfc-bakery-color-paper);
	font-family: var(--cfc-bakery-font-display);
	font-size: var(--cfc-bakery-font-size-price-total);
	line-height: var(--cfc-bakery-line-tight);
}

.cfc-bakery-banner__price small {
	display: block;
	font-family: var(--cfc-bakery-font-body);
	font-size: var(--cfc-bakery-text-small);
	font-weight: 700;
	letter-spacing: var(--cfc-bakery-tracking-eyebrow);
	text-transform: uppercase;
}

/* #12 — the banner eyebrow ({builder-banner-eyebrow}, "Starting at") is the
   label over the computed price: the shared eyebrow class, recoloured for
   the green card and stacked like the <small> it replaces. White, Bold 11,
   2 above the price (#20). */
.cfc-bakery-banner__eyebrow {
	color: var(--cfc-bakery-color-paper);
	display: block;
	font-family: var(--cfc-bakery-font-body);
	font-size: var(--cfc-bakery-font-size-tag);
	letter-spacing: var(--cfc-bakery-tracking-tag);
	margin-bottom: var(--cfc-bakery-fine-2);
}

.cfc-bakery-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cfc-bakery-space-40);
	padding: var(--cfc-bakery-space-50) 0;
}

/* `pill` 618:2112 / 618:2114 (#20): Regular 13 on the line, 8 / 16 inside. */
.cfc-bakery-pill {
	background: var(--cfc-bakery-color-paper);
	border: var(--cfc-bakery-border-hairline) solid var(--cfc-bakery-color-line);
	border-radius: var(--cfc-bakery-radius-pill); /* = var(--wp--custom--radius--pill) */
	color: var(--cfc-bakery-color-ink);
	cursor: pointer;
	font-family: var(--cfc-bakery-font-body);
	font-size: var(--cfc-bakery-font-size-description);
	font-weight: 400;
	line-height: normal;
	padding: var(--cfc-bakery-space-40) var(--cfc-bakery-space-50);
	transition: background-color var(--cfc-bakery-transition-base), color var(--cfc-bakery-transition-base);
}

.cfc-bakery-pill.is-selected,
.cfc-bakery-pill[aria-pressed="true"] {
	background: var(--cfc-bakery-color-fresh);
	border-color: var(--cfc-bakery-color-fresh);
	color: var(--cfc-bakery-color-paper);
}

/* Menu row (#15) — `menu-card` 624:2166 as a white card: image left, name,
   pill tags, price + unit, one-line description, the chevron right. The whole
   row is one link (A191 / A192); the ≥bp block lays the rows two-up. Token-only.
   #20: the 1px line, 12 inside and between, the body a 4-gap column. */

.cfc-bakery-product-row {
	background: var(--cfc-bakery-color-paper);
	border: var(--cfc-bakery-border-hairline) solid var(--cfc-bakery-color-line);
	border-radius: var(--cfc-bakery-radius-md); /* = var(--wp--custom--radius--md) */
	margin-top: var(--cfc-bakery-space-50);
}

.cfc-bakery-product-row:first-child {
	margin-top: 0;
}

/* `a.` in the selector: the shell's `a:not(.cfc-bakery-btn)` green out-ranked the class
   alone and painted the name secondary — the frame's name is primary (624:2138, #20). */
.cfc-bakery a.cfc-bakery-product-row__link {
	align-items: center;
	color: var(--cfc-bakery-color-ink);
	display: flex;
	gap: var(--cfc-bakery-fine-12);
	padding: calc(var(--cfc-bakery-fine-12) - var(--cfc-bakery-border-hairline)); /* 12 less the card's line (the frame's stroke is inside) */
	text-decoration: none;
}

.cfc-bakery a.cfc-bakery-product-row__link:focus-visible {
	outline: var(--cfc-bakery-btn-focus-outer-width) solid var(--cfc-bakery-color-fresh);
	outline-offset: var(--cfc-bakery-btn-focus-offset);
}

.cfc-bakery-product-row__media {
	display: block;
	flex-shrink: 0;
	height: var(--cfc-bakery-size-thumb-menu);
	width: var(--cfc-bakery-size-thumb-menu);
}

.cfc-bakery-product-row__thumb {
	border-radius: var(--cfc-bakery-radius-sm); /* = var(--wp--custom--radius--sm) */
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.cfc-bakery-product-row__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--cfc-bakery-fine-4);
	min-width: 0;
}

.cfc-bakery-product-row__name {
	display: block;
	font-family: var(--cfc-bakery-font-body);
	font-size: var(--cfc-bakery-text-medium);
	font-weight: var(--cfc-bakery-weight-semibold);
	line-height: var(--cfc-bakery-line-snug);
	margin: 0;
	text-transform: capitalize;
}

.cfc-bakery-product-row__price {
	align-items: baseline;
	color: var(--cfc-bakery-color-success-text);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--cfc-bakery-font-size-price);
	font-weight: var(--cfc-bakery-weight-semibold);
	gap: 0 var(--cfc-bakery-fine-6);
	line-height: var(--cfc-bakery-line-none);
}

/* One line with the browser's "…" (the frame's nowrap + ellipsis). Two classes:
   the markup still carries `.cfc-bakery-clamp-2`, whose box model this out-ranks. */
.cfc-bakery-product-row .cfc-bakery-product-row__desc {
	color: var(--cfc-bakery-color-ink);
	display: block;
	font-size: var(--cfc-bakery-font-size-description);
	line-height: var(--cfc-bakery-line-description);
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* `icon/chevron-right` (32 × 32, path M12 24L20 16L12 8, stroke 2) drawn in
   CSS on the box: the `›` stays in the markup, sized away. The factors are
   tuned on the rendered ink: 9.9 × 17 for the frame's 10 × 17, centred in the
   32 box (#20 review; 0.35 / 0.25 drew 8.5 × 15). */
.cfc-bakery-product-row__chevron {
	align-items: center;
	color: var(--cfc-bakery-color-ink);
	display: flex;
	flex-shrink: 0;
	font-size: 0;
	height: var(--cfc-bakery-size-icon);
	justify-content: center;
	line-height: var(--cfc-bakery-line-none);
	width: var(--cfc-bakery-size-icon);
}

.cfc-bakery-product-row__chevron::before {
	border: solid currentColor;
	border-width: var(--cfc-bakery-btn-border-width) var(--cfc-bakery-btn-border-width) 0 0;
	content: "";
	height: calc(var(--cfc-bakery-size-icon) * var(--cfc-bakery-ratio-chevron));
	margin-right: calc(var(--cfc-bakery-size-icon) * var(--cfc-bakery-ratio-chevron-inset));
	transform: rotate(45deg);
	width: calc(var(--cfc-bakery-size-icon) * var(--cfc-bakery-ratio-chevron));
}

/* ----------------------------------------------------------------- pdp -- */

/* F4 `body` 635:2364 (#20): 16 above, 24 below, the gallery / details / accordions 14 apart. */
.cfc-bakery-pdp {
	padding-bottom: var(--cfc-bakery-space-60); /* top / bottom only: the sides are the column's 16 gutter (F4 `635:2362`, #20) */
	padding-top: var(--cfc-bakery-space-50);
}

/* The off-menu state ("That item is no longer on the menu.") — on no frame: its button the body's 14 under the line (#20). */
.cfc-bakery .cfc-bakery-pdp__gone-cta {
	margin-top: var(--cfc-bakery-fine-14);
}

/* The details column (`item-page/details` 728:2695, #20): the gallery, the name, then the
   price row with the dietary tags beside it on ONE line (the frame puts the tag after
   the unit; the tags stay their own element after the price row in the markup), then the
   description — a wrapping row whose full-width children each take a line. */
.cfc-bakery-pdp__grid > div:first-child {
	align-items: center;
	column-gap: var(--cfc-bakery-space-40);
	display: flex;
	flex-wrap: wrap;
}

.cfc-bakery-pdp__grid > div:first-child > .cfc-bakery-gallery,
.cfc-bakery-pdp__grid > div:first-child > .cfc-bakery-pdp__title,
.cfc-bakery-pdp__grid > div:first-child > .cfc-bakery-pdp__desc {
	flex: 0 0 100%;
	min-width: 0;
}

/* {pdp-item-name} 728:2677: Bakery/Section Title — Lovechild 22 / 1.15, 14 under the gallery.
   `.cfc-bakery` in front: the theme's post-content `* + h1` margin out-ranks a bare class. */
.cfc-bakery .cfc-bakery-pdp__title {
	font-size: var(--cfc-bakery-font-size-section-title);
	line-height: var(--cfc-bakery-line-title);
	margin: var(--cfc-bakery-fine-14) 0 0;
}

/* `price-row` 728:2678: 12 under the name, its parts 8 apart, centred on one line.
   `.cfc-bakery` in front: the theme's `h1 + * { margin-top: 1em }`. */
.cfc-bakery .cfc-bakery-pdp__price-row {
	align-items: center;
	display: flex;
	flex: 0 1 auto;
	flex-wrap: wrap;
	gap: var(--cfc-bakery-fine-4) var(--cfc-bakery-space-40);
	margin: var(--cfc-bakery-fine-12) 0 0;
}

.cfc-bakery .cfc-bakery-pdp__grid > div:first-child > .cfc-bakery-dietary-tags--pill {
	margin-top: var(--cfc-bakery-fine-12);
}

/* {pdp-price} 728:2679: Bakery/Price — SemiBold 15 / 1 in the secondary green (this frame's
   colour; the menu card's price is success-text). */
.cfc-bakery-pdp__price {
	align-items: center;
	color: var(--cfc-bakery-color-fresh);
	display: inline-flex;
	font-size: var(--cfc-bakery-font-size-price);
	font-weight: var(--cfc-bakery-weight-semibold);
	gap: var(--cfc-bakery-space-40);
	line-height: var(--cfc-bakery-line-none);
	white-space: nowrap;
}

/* {pdp-price-from} "Starting at" (T13): on no frame — it wears the unit text's style
   (728:2680: Regular 14, line-height auto, text-muted), 8 before the amount. */
.cfc-bakery-pdp__price-from {
	color: var(--cfc-bakery-color-text-muted);
	font-size: var(--cfc-bakery-text-small);
	font-weight: 400;
	line-height: normal;
}

/* {pdp-description} 728:2682: Bakery/Description in text-muted, 12 under the price row and
   14 over the quantity row. The two-class selectors out-rank the theme's paragraph colour. */
.cfc-bakery .cfc-bakery-pdp__desc,
.cfc-bakery .cfc-bakery-pdp__desc p {
	color: var(--cfc-bakery-color-text-muted);
	font-size: var(--cfc-bakery-font-size-description);
	line-height: var(--cfc-bakery-line-description);
}

.cfc-bakery .cfc-bakery-pdp__desc {
	margin: var(--cfc-bakery-fine-12) 0 0; /* the 14 over the quantity row is the form's own margin: it holds when an item has no description */
}

.cfc-bakery .cfc-bakery-pdp__desc p {
	margin: 0;
}

.cfc-bakery .cfc-bakery-pdp__desc p + p {
	margin-top: var(--cfc-bakery-space-40);
}

/* The tier tag, the single photo and the <details> accordion rules that
   stood here were retired by #16 (A203) — the product-page fields block at
   the end of this file replaces them. */

/* ------------------------------------------------ quantity + unit (#10) -- */
/* The stepper partial (templates/storefront/partials/stepper.php) is one
   reusable piece — #18's cart rows place it too — so its rules assume no
   product page. Token-only (A189).
   #20: `stepper` 622:2133 is ONE size everywhere — a 96 × 28 white pill on
   the line, green Bold 14 glyphs, the number SemiBold 14. Its 28 × 28 buttons
   sit under the 44 tap floor: the frame's call, logged. */

.cfc-bakery-unit {
	color: var(--cfc-bakery-color-text-muted);
	font-size: var(--cfc-bakery-font-size-description);
	font-weight: 400;
	line-height: var(--cfc-bakery-line-description);
}

.cfc-bakery-pdp__price-row .cfc-bakery-unit {
	font-size: var(--cfc-bakery-text-small);
	line-height: normal;
}

/* {pdp-add-cta} 728:2685: the stepper, then the button filling the row 24 away; the row
   sits 14 under the details' top stack (`qty-row` 728:2683 at y 118 under a 104 stack, #20). */
.cfc-bakery-pdp__buy {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--cfc-bakery-space-60);
	margin: var(--cfc-bakery-fine-14) 0 0;
}

.cfc-bakery-pdp__buy .cfc-bakery-btn {
	flex: 1 1 auto;
}

/* A simple item's counter (José 2026-10-13, in a session: a counter adds to the cart): once counter.js runs (the counter has a
   state) the form's "Add to cart" button is not shown — the counter adds by itself; without the script the form is the number field
   and the button, as before. The short line takes a row of its own like the note below: pulled up out of the row's 24 gap, by all
   of it while empty (no height) and to 6 under the counter once it says something. */
.cfc-bakery-pdp__buy .cfc-bakery-counter[data-cfc-counter-state] ~ .cfc-bakery-btn {
	display: none;
}

.cfc-bakery-pdp__buy .cfc-bakery-counter__status {
	flex-basis: 100%;
	margin-top: calc(-1 * var(--cfc-bakery-space-60));
}

.cfc-bakery-pdp__buy .cfc-bakery-counter__status:not(:empty) {
	margin-top: calc(var(--cfc-bakery-fine-6) - var(--cfc-bakery-space-60));
}

/* {qty-max-note} on the product page (#20, A406; no frame draws it): the form's last child takes the
   whole row, so it wraps onto a line of its own under the stepper — pulled up out of the row's 24 gap
   to sit 6 under the stepper's row. Hidden, it is no flex item: the row is the row it was. */
.cfc-bakery-pdp__buy .cfc-bakery-qty-note {
	flex-basis: 100%;
	margin-top: calc(var(--cfc-bakery-fine-6) - var(--cfc-bakery-space-60));
}

.cfc-bakery-stepper {
	align-items: center;
	background: var(--cfc-bakery-color-paper);
	border: var(--cfc-bakery-border-hairline) solid var(--cfc-bakery-color-line);
	border-radius: var(--cfc-bakery-radius-pill); /* = var(--wp--custom--radius--pill) */
	display: inline-flex;
	gap: var(--cfc-bakery-fine-12);
	flex: none;
	height: var(--cfc-bakery-size-stepper);
	min-height: 0;
	min-width: max-content; /* Never narrower than − n +: under a theme whose spacing squeezes the cart row the + was clipped away (theme-off pass, #20). */
	overflow: hidden;
	padding: 0 calc(var(--cfc-bakery-fine-4) - var(--cfc-bakery-border-hairline)); /* 4 less the line: the frame's stroke is inside the 96 box (622:2133) */
}

.cfc-bakery-stepper__btn {
	appearance: none;
	background: none;
	border: 0;
	border-radius: var(--cfc-bakery-radius-pill); /* = var(--wp--custom--radius--pill) */
	color: var(--cfc-bakery-color-fresh);
	cursor: pointer;
	flex: none;
	font-family: var(--cfc-bakery-btn-font-family);
	font-size: var(--cfc-bakery-text-small);
	font-weight: var(--cfc-bakery-btn-font-weight);
	height: var(--cfc-bakery-size-stepper);
	line-height: var(--cfc-bakery-line-none);
	min-width: 0;
	padding: 0;
	transition: background-color var(--cfc-bakery-btn-transition);
	width: var(--cfc-bakery-size-stepper);
}

.cfc-bakery-stepper__btn:hover:not([disabled]) {
	background: var(--cfc-bakery-color-mint);
}

.cfc-bakery-stepper__btn:focus-visible {
	outline: var(--cfc-bakery-btn-focus-outer-width) solid var(--cfc-bakery-color-fresh);
	outline-offset: calc(var(--cfc-bakery-btn-focus-offset) * -1);
}

.cfc-bakery-stepper__btn[disabled] {
	cursor: not-allowed; /* The frame draws − at full colour at the minimum (622:2134): no dimmed state (#20 review). */
}

.cfc-bakery-stepper__input {
	-moz-appearance: textfield;
	background: none;
	border: 0;
	color: var(--cfc-bakery-color-ink);
	font-family: var(--cfc-bakery-font-body);
	font-size: var(--cfc-bakery-text-small);
	font-weight: var(--cfc-bakery-weight-semibold);
	line-height: normal;
	margin: 0;
	min-height: 0;
	padding: 0;
	text-align: center;
	width: 2ch; /* Room for two digits where the field cannot hug its value (below). */
}

/* The frame's number hugs its digits (`qty` 622:2136 — the stepper is 96 wide at "1"):
   where the browser can size a field to its content, it does; elsewhere the 2ch stands. */
@supports (field-sizing: content) {
	.cfc-bakery-stepper__input {
		field-sizing: content;
		min-width: 1ch;
		width: auto;
	}
}

.cfc-bakery-stepper__input::-webkit-inner-spin-button,
.cfc-bakery-stepper__input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* The counter mode (José 2026-10-13, in a session: a counter adds to the cart) — the stepper partial with `counter`, on the three
   counters only. Not in the cart (counter.js sets the state "out"): the cart icon (`[data-cfc-counter-add]`, below). In the cart
   ("in"): the stepper as everywhere. The carousel's build link wears the cart icon's look too (`.cfc-bakery-counter__add`).
   The wrapper sits above "Learn More"'s cover on the carousel card (positioned, after the link), so a tap on it adds and never
   opens the product page. */
.cfc-bakery-counter {
	display: flex;
	flex: none;
	justify-content: flex-end;
	position: relative; /* Above the cover: positioned, after the link in the slide — tree order puts it on top, no z-index needed. */
}

.cfc-bakery-counter[data-cfc-counter-state="out"] > .cfc-bakery-stepper {
	display: none;
}

/* The cart icon (#20, José 2026-10-20, thread 1972473452; Figma "add cart" 2105:4699, partials/cart-icon.php) — the counter's own
   button and the carousel's build link alike: bare — no pill, no border, no ground — the drawing 24 high (`--cfc-bakery-size-cart-icon`,
   the frame's own 2105:4743; José 2026-10-20: at the stepper's 28 it was too big beside the "+" it replaced) centred on the
   stepper's 28 line, at its own ratio, in Co-op Fresh, Pacific Moss on hover. Its tap area is 44 high (the small button's height)
   and 6 wider on each side: the padding adds both, the negative margins give them back, so the drawing sits where a 28 would and
   flush at the edge the counter's pill takes — the swap of one for the other moves nothing else. The focus ring is drawn on that
   area; the pill radius shapes the ring (nothing else of the control is drawn). */
.cfc-bakery-counter__add {
	appearance: none;
	background: none;
	border: 0;
	border-radius: var(--cfc-bakery-radius-pill); /* = var(--wp--custom--radius--pill) */
	color: var(--cfc-bakery-color-fresh);
	cursor: pointer;
	flex: none;
	margin: calc((var(--cfc-bakery-size-stepper) - var(--cfc-bakery-btn-min-h-sm)) / 2) calc(-1 * var(--cfc-bakery-fine-6));
	min-height: 0;
	min-width: 0;
	padding: calc((var(--cfc-bakery-btn-min-h-sm) - var(--cfc-bakery-size-cart-icon)) / 2) var(--cfc-bakery-fine-6);
	transition: color var(--cfc-bakery-btn-transition);
}

.cfc-bakery-counter__add:hover:not([disabled]) {
	color: var(--cfc-bakery-color-ink);
}

.cfc-bakery-counter__add:focus-visible {
	outline: var(--cfc-bakery-btn-focus-outer-width) solid var(--cfc-bakery-color-fresh);
	outline-offset: var(--cfc-bakery-btn-focus-offset);
}

.cfc-bakery-counter__icon {
	display: block;
	height: var(--cfc-bakery-size-cart-icon);
	width: auto;
}

.cfc-bakery-counter__icon-ground {
	fill: var(--cfc-bakery-color-paper);
}

/* Until the cart has been read (counter.js), the cart icon takes no tap. */
.cfc-bakery-counter__add[disabled] {
	cursor: progress;
}

/* The class's `display` would out-rank the attribute's own. */
.cfc-bakery-counter__add[hidden] {
	display: none;
}

/* The short line beside the counter (aria-live): what went in, changed or came out, a refusal's reason, the newest-wins notice — the
   caption's look; above the cover on the carousel card. Empty, it has no height; each placement gives it its line. */
.cfc-bakery-counter__status {
	color: var(--cfc-bakery-color-text-muted);
	display: block;
	font-size: var(--cfc-bakery-font-size-description);
	line-height: var(--cfc-bakery-line-description);
	position: relative; /* Above the cover, as the counter. */
}

/* The builder summary's Quantity row carries the same stepper (#10, A187) — the
   one size since #20; it sits where the row's value does, left of the amount. */
.cfc-bakery-stepper.cfc-bakery-review__qty {
	margin-right: auto;
}

/* The message at the largest quantity — {qty-max-note}, partials/qty-note.php (#20, A406). It only
   exists when staff set a largest quantity, and shows only while the number is at it: the server
   prints it `hidden` below the maximum and stepper.js lifts that. The caption's look (Bakery/Description,
   muted), a block on a line of its own; each placement — the product page's buy row, the carousel
   card, the cart's QTY row, the builder's Quantity row — puts it 6 under its stepper's row in a rule
   beside its own. No frame draws it. */
.cfc-bakery-qty-note {
	color: var(--cfc-bakery-color-text-muted);
	display: block;
	font-size: var(--cfc-bakery-font-size-description);
	line-height: var(--cfc-bakery-line-description);
	margin: 0;
}

/* The class's `display` would out-rank the attribute's own. */
.cfc-bakery-qty-note[hidden] {
	display: none;
}

/* --------------------------------------------------------------- wizard -- */
/* `bakery/final/header` Builder mode 673:2028 (375 × 90, #20): 10 / 16 / 14
   padding, the bar row (75 · the two lime lines · 75), 10 under it the progress
   (`wizard-progress` 621:2163 — five 6px segments 6 apart, lime when done, the
   line when not), 6 under that the step label. */

.cfc-bakery-wizard__chrome {
	background: var(--cfc-bakery-color-ink);
	color: var(--cfc-bakery-color-paper);
	padding: var(--cfc-bakery-fine-10) var(--cfc-bakery-space-50) var(--cfc-bakery-fine-14);
	padding-top: calc(var(--cfc-bakery-fine-10) + var(--cfc-bakery-safe-top)); /* The builder's header is the screen's first thing: the same top safe area as the bar (#20 note 1). */
}

.cfc-bakery-wizard__chrome-inner {
	margin: 0 auto;
	max-width: var(--cfc-bakery-layout-page);
}

.cfc-bakery-wizard__top {
	align-items: center;
	display: grid; /* 75 · 1fr · 75: the step title on the true centre (A245) */
	grid-template-columns: var(--cfc-bakery-size-bar-side) minmax(0, 1fr) var(--cfc-bakery-size-bar-side);
	gap: 0;
}

.cfc-bakery-wizard__top > span {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--cfc-bakery-fine-4);
	min-width: 0;
	text-align: center;
	white-space: nowrap;
}

.cfc-bakery-wizard__top > button:first-child {
	justify-self: start;
}

.cfc-bakery-wizard__top > button:last-child {
	justify-self: end;
}

.cfc-bakery-wizard__top a,
.cfc-bakery-wizard__top button {
	background: none;
	border: 0;
	color: var(--cfc-bakery-color-surface);
	cursor: pointer;
	font-family: var(--cfc-bakery-font-body);
	font-size: var(--cfc-bakery-font-size-tag);
	font-weight: var(--cfc-bakery-weight-semibold);
	letter-spacing: var(--cfc-bakery-tracking-tight);
	line-height: normal;
	padding: 0;
	text-decoration: none;
	text-transform: uppercase;
	width: var(--cfc-bakery-size-bar-side);
}

.cfc-bakery-wizard__top .cfc-bakery-wizard__back {
	text-align: left;
}

.cfc-bakery-wizard__top .cfc-bakery-wizard__cancel {
	letter-spacing: var(--cfc-bakery-tracking-tag);
	text-align: right;
}

.cfc-bakery-wizard__step-title {
	color: var(--cfc-bakery-color-accent-bg);
	font-family: var(--cfc-bakery-font-display);
	font-size: var(--cfc-bakery-font-size-header-title);
	line-height: var(--cfc-bakery-line-tight);
	max-width: 100%;
	overflow: hidden;
	text-align: center;
	text-overflow: ellipsis;
}

.cfc-bakery-wizard__kicker {
	color: var(--cfc-bakery-color-accent-bg);
	display: block;
	font-family: var(--cfc-bakery-font-body);
	font-size: var(--cfc-bakery-font-size-header-eyebrow);
	font-weight: var(--cfc-bakery-weight-semibold);
	letter-spacing: var(--cfc-bakery-tracking-tag);
	line-height: var(--cfc-bakery-line-none);
	text-align: center;
	text-transform: uppercase;
}

.cfc-bakery-progress {
	display: flex;
	gap: var(--cfc-bakery-fine-6);
	margin-top: var(--cfc-bakery-fine-10);
}

.cfc-bakery-progress__bar {
	background: var(--cfc-bakery-color-line); /* The unfilled segment is the opaque line (was paper at 25%). */
	border-radius: var(--cfc-bakery-radius-pill); /* = var(--wp--custom--radius--pill) */
	flex: 1;
	height: var(--cfc-bakery-size-progress);
}

.cfc-bakery-progress__bar.is-done {
	background: var(--cfc-bakery-color-accent-bg);
}

/* A step flagged "needs a new choice" (#9, A155) — on no frame; kept on the error token (#20 logs it) */
.cfc-bakery-progress__bar.needs-choice {
	background: var(--cfc-bakery-color-error);
}

.cfc-bakery-progress__label {
	color: var(--cfc-bakery-color-surface);
	display: block;
	font-size: var(--cfc-bakery-font-size-step-label);
	font-weight: var(--cfc-bakery-weight-semibold);
	letter-spacing: var(--cfc-bakery-tracking-tag);
	line-height: var(--cfc-bakery-line-none);
	margin-top: var(--cfc-bakery-fine-6);
	text-transform: uppercase;
}

/* The step body: 16 above and on the sides (the column's gutter, #20); nothing below — the CTA bar closes it. */
.cfc-bakery-step {
	padding-bottom: 0;
	padding-top: var(--cfc-bakery-space-50);
}

/* The live summary card is the desktop column's (#20): no frame draws a summary
   over a step — header · body · cta-bar · drawer · footer, the Review card only
   at the end of step 5 — and the drawer carries the running line at this width.
   Out of the layout, still in the DOM (the wizard writes to its ids); the
   desktop block shows it again. */
.cfc-bakery-wizard__aside {
	display: none;
}

/* `section-head` 621:2117 (#20): the 22 title and its plain-text tag on one
   baseline 10 apart, the description 6 under the row. */
.cfc-bakery-sec-head {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: var(--cfc-bakery-fine-10);
	margin-top: var(--cfc-bakery-space-50);
}

.cfc-bakery-sec-head:first-child {
	margin-top: 0;
}

.cfc-bakery-sec-head h2 {
	font-size: var(--cfc-bakery-font-size-section-title);
	line-height: var(--cfc-bakery-line-title);
}

/* The theme's content rules put 1em over a heading in the post content and 1em
   over whatever follows one (22 over the title, 11 over the tag: the head stood
   47 high for the frame's 25). Out-ranked here, never touched there (#20). */
.cfc-bakery .cfc-bakery-sec-head > h2,
.cfc-bakery .cfc-bakery-sec-head > h2 + .cfc-bakery-req {
	margin: 0;
}

.cfc-bakery-sec-head + .cfc-bakery-caption {
	margin-top: var(--cfc-bakery-fine-6);
}

/* Required / Optional: Bakery/Tag as plain text — no pill, no border (#20). */
.cfc-bakery-req {
	background: none;
	border-radius: 0;
	color: var(--cfc-bakery-color-maroon);
	font-size: var(--cfc-bakery-font-size-tag);
	font-weight: 400;
	letter-spacing: var(--cfc-bakery-tracking-tag);
	line-height: var(--cfc-bakery-line-none);
	padding: 0;
	text-transform: uppercase;
}

.cfc-bakery-req--optional {
	background: transparent;
	border: 0;
	color: var(--cfc-bakery-color-text-muted);
}

/* Option cards (radio) — `option-card` 620:2126 (#20): 12 / 14 inside a 12
   radius on the line, the cards 16 apart; Selected = the mint ground and a 2px
   green edge, the type unchanged, the control filled. */
.cfc-bakery-option {
	background: var(--cfc-bakery-color-paper);
	border: var(--cfc-bakery-border-hairline) solid var(--cfc-bakery-color-line);
	border-radius: var(--cfc-bakery-radius-md); /* = var(--wp--custom--radius--md) */
	cursor: pointer;
	display: block;
	margin-top: var(--cfc-bakery-space-50);
	padding: calc(var(--cfc-bakery-fine-12) - var(--cfc-bakery-border-hairline)) calc(var(--cfc-bakery-fine-14) - var(--cfc-bakery-border-hairline)); /* 12 / 14 less the line: the frame's stroke is inside the box (64 high) */
	position: relative;
	transition: background-color var(--cfc-bakery-transition-base), border-color var(--cfc-bakery-transition-base), box-shadow var(--cfc-bakery-transition-base);
}

.cfc-bakery-option input {
	position: absolute;
	opacity: 0;
}

.cfc-bakery-option__row {
	align-items: center;
	display: flex;
	gap: var(--cfc-bakery-fine-10);
}

.cfc-bakery-option__radio {
	background: var(--cfc-bakery-color-paper);
	border: var(--cfc-bakery-border-hairline) solid var(--cfc-bakery-color-line);
	border-radius: 50%;
	flex-shrink: 0;
	height: var(--cfc-bakery-size-control);
	transition: border-color var(--cfc-bakery-transition-base), background-color var(--cfc-bakery-transition-base);
	width: var(--cfc-bakery-size-control);
}

/* The selected radio: the green disc with the white centre (the frame's r 7 / stroke 6 ring → 8 of white in 20). */
.cfc-bakery-option.is-selected .cfc-bakery-option__radio:not(.cfc-bakery-option__radio--check),
.cfc-bakery-option:has(input:checked) .cfc-bakery-option__radio:not(.cfc-bakery-option__radio--check) {
	border: calc(var(--cfc-bakery-size-control) * var(--cfc-bakery-ratio-radio-ring)) solid var(--cfc-bakery-color-fresh);
}

/* Dietary Requests rows (#5): the same card as a checkbox — a square box instead of the circle */
.cfc-bakery-option__radio--check {
	border-radius: 0;
	position: relative;
}

.cfc-bakery-option.is-selected .cfc-bakery-option__radio--check,
.cfc-bakery-option:has(input:checked) .cfc-bakery-option__radio--check {
	background: var(--cfc-bakery-color-fresh);
	border-color: var(--cfc-bakery-color-fresh);
}

/* The tick: a white Bold 14 ✓ centred on the green box */
.cfc-bakery-option.is-selected .cfc-bakery-option__radio--check::after,
.cfc-bakery-option:has(input:checked) .cfc-bakery-option__radio--check::after {
	color: var(--cfc-bakery-color-paper);
	content: "\2713";
	display: grid;
	font-size: var(--cfc-bakery-text-small);
	font-weight: 700;
	inset: 0;
	line-height: var(--cfc-bakery-line-none);
	place-items: center;
	position: absolute;
}

/* A by-recipe need on the Dietary Requests rows (#5): checked, frozen — reads as a fact, not a control. */
.cfc-bakery-option--frozen {
	cursor: default;
}

.cfc-bakery-option--frozen .cfc-bakery-option__radio--check {
	opacity: var(--cfc-bakery-disabled-opacity);
}

/* Bakery/Option Label; the supporting line is its child, 2 under it. */
.cfc-bakery-option__label {
	display: flex;
	flex: 1;
	flex-direction: column;
	font-size: var(--cfc-bakery-font-size-option-label);
	font-weight: var(--cfc-bakery-weight-semibold);
	gap: var(--cfc-bakery-fine-2);
	line-height: var(--cfc-bakery-line-label);
	min-width: 0;
}

.cfc-bakery-option__sub {
	color: var(--cfc-bakery-color-muted);
	display: block;
	font-size: var(--cfc-bakery-font-size-description);
	font-weight: 400;
	line-height: var(--cfc-bakery-line-description);
}

.cfc-bakery-option__price {
	color: var(--cfc-bakery-color-success-text);
	font-size: var(--cfc-bakery-font-size-price);
	font-weight: var(--cfc-bakery-weight-semibold);
	line-height: var(--cfc-bakery-line-none);
	white-space: nowrap;
}

/* Selected: the second pixel of the frame's 2px edge is an inset shadow, so the card keeps its size. */
.cfc-bakery-option.is-selected,
.cfc-bakery-option:has(input:checked) {
	background: var(--cfc-bakery-color-mint);
	border-color: var(--cfc-bakery-color-fresh);
	box-shadow: inset 0 0 0 var(--cfc-bakery-border-hairline) var(--cfc-bakery-color-fresh);
	color: inherit;
}

.cfc-bakery-option:has(input:focus-visible) {
	outline: var(--cfc-bakery-btn-focus-outer-width) solid var(--cfc-bakery-color-fresh);
	outline-offset: var(--cfc-bakery-btn-focus-offset);
}

/* #47 · The Protein & Dessert step's plain card (Figma 926:2237; figma §4 Q7: no thumbnail): the option card's frame and its
   type (`__row` / `__label` / `__sub` / `__price`) with no radio — the card's control is the item's counter (U34), under the
   row at its right edge. Not `.cfc-bakery-option` itself: that card hides its input (the radio's), and the counter's field must
   show. While the item is in the cart (the counter "in", modifier-wizard.js) it wears the option card's Selected look. */
.cfc-bakery-addon-card {
	background: var(--cfc-bakery-color-paper);
	border: var(--cfc-bakery-border-hairline) solid var(--cfc-bakery-color-line);
	border-radius: var(--cfc-bakery-radius-md);
	margin-top: var(--cfc-bakery-space-50);
	padding: calc(var(--cfc-bakery-fine-12) - var(--cfc-bakery-border-hairline)) calc(var(--cfc-bakery-fine-14) - var(--cfc-bakery-border-hairline));
	transition: background-color var(--cfc-bakery-transition-base), border-color var(--cfc-bakery-transition-base), box-shadow var(--cfc-bakery-transition-base);
}

.cfc-bakery-addon-card.is-selected {
	background: var(--cfc-bakery-color-mint);
	border-color: var(--cfc-bakery-color-fresh);
	box-shadow: inset 0 0 0 var(--cfc-bakery-border-hairline) var(--cfc-bakery-color-fresh);
}

.cfc-bakery-addon-card .cfc-bakery-counter {
	margin-top: var(--cfc-bakery-fine-10);
}

/* #48 · The stopped turkey (decided 2026-10-25 — the card stays; no Figma state): the `Sold out` tag (the dietary pill's
   shape in the error colours) before its counter, which the stepper partial prints with every control disabled
   (`sold_out`, data-cfc-stopped); the step's card goes to the surface colour. The product page prints the same pair. */
.cfc-bakery-sold-out {
	background: var(--cfc-bakery-color-error-bg);
	border: var(--cfc-bakery-border-hairline) solid var(--cfc-bakery-color-error-text);
	border-radius: var(--cfc-bakery-radius-sm);
	color: var(--cfc-bakery-color-error-text);
	display: inline-block;
	font-size: var(--cfc-bakery-font-size-tag);
	letter-spacing: var(--cfc-bakery-tracking-tag);
	line-height: var(--cfc-bakery-line-none);
	margin: var(--cfc-bakery-fine-10) var(--cfc-bakery-space-50) 0 0;
	padding: calc(var(--cfc-bakery-fine-3) - var(--cfc-bakery-border-hairline)) calc(var(--cfc-bakery-space-40) - var(--cfc-bakery-border-hairline));
	text-transform: uppercase;
	vertical-align: middle;
}

.cfc-bakery-addon-card.is-stopped {
	background: var(--cfc-bakery-color-surface);
}

.cfc-bakery-counter[data-cfc-stopped] button,
.cfc-bakery-counter[data-cfc-stopped] input {
	cursor: not-allowed;
	filter: grayscale(1);
}

/* Info callout — "why" blurbs, conditional notices, the 72h heads-up.
   `callout` 619:2112 (#20): a success-green box, 8 round, with the mint panel
   inset 4 from its left and round on its own left corners — the stripe reads as
   a crescent (#20 review; was a flat 4px stripe). The panel is a layer behind
   the content (`::before`), so the markup `callout()` builds is unchanged; the
   box's own ground turns mint past the panel's left curve, so no green fringes
   the right corners. 12 / 18 inside the panel. */
.cfc-bakery-callout {
	--cfc-bakery-callout-edge: var(--cfc-bakery-color-success);
	--cfc-bakery-callout-ground: var(--cfc-bakery-color-mint);
	background: linear-gradient(90deg, var(--cfc-bakery-callout-edge) calc(var(--cfc-bakery-fine-4) + var(--cfc-bakery-radius-sm)), var(--cfc-bakery-callout-ground) calc(var(--cfc-bakery-fine-4) + var(--cfc-bakery-radius-sm)));
	border-radius: var(--cfc-bakery-radius-sm); /* = var(--wp--custom--radius--sm) */
	isolation: isolate; /* Keeps the panel layer above this box's ground and under its text. */
	margin-top: var(--cfc-bakery-space-50);
	padding: var(--cfc-bakery-fine-12) var(--cfc-bakery-fine-18) var(--cfc-bakery-fine-12) calc(var(--cfc-bakery-fine-18) + var(--cfc-bakery-fine-4));
	position: relative;
}

.cfc-bakery-callout::before {
	background: var(--cfc-bakery-callout-ground);
	border-radius: var(--cfc-bakery-radius-sm);
	content: "";
	inset: 0 0 0 var(--cfc-bakery-fine-4);
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.cfc-bakery-callout__eyebrow {
	color: var(--cfc-bakery-color-success-text);
	font-size: var(--cfc-bakery-font-size-tag);
	font-weight: 700;
	letter-spacing: var(--cfc-bakery-tracking-tag);
	line-height: normal;
	text-transform: uppercase;
}

/* The naked-cake row (#6, F8): its own plain row at the bottom of the frosting list —
   after the frosting cards and the chosen frosting's Ingredients, before "Select Filling"
   (José 2026-10-18, thread 3df05bdd). No heading, no callout, no card: the markup stays
   the option card (a real checkbox in a label) and these rules take its ground, edge
   and padding off. The box is the plugin's own square check box
   (`.cfc-bakery-option__radio--check`, as on the Extras cards and the Dietary Requests
   rows); the sentence wraps beside it in the description type, not bolded. */
.cfc-bakery-frosting-addons .cfc-bakery-option,
.cfc-bakery-frosting-addons .cfc-bakery-option.is-selected,
.cfc-bakery-frosting-addons .cfc-bakery-option:has(input:checked) {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}

.cfc-bakery-frosting-addons .cfc-bakery-option__label {
	font-size: var(--cfc-bakery-font-size-description);
	font-weight: 400;
	line-height: var(--cfc-bakery-line-description);
}

.cfc-bakery-frosting-addons .cfc-bakery-option__price {
	font-size: var(--cfc-bakery-font-size-description);
	line-height: var(--cfc-bakery-line-description);
}

/* Two classes: the shell's `p { margin: 0 }` out-ranks a bare class. */
.cfc-bakery-callout .cfc-bakery-callout__body {
	color: var(--cfc-bakery-color-ink);
	font-size: var(--cfc-bakery-font-size-description);
	line-height: var(--cfc-bakery-line-description);
	margin-top: var(--cfc-bakery-fine-5);
}

/* The one-at-a-time error banner (showError) and the flagged step's sentence (#9): on no
   frame — the same shape on the error tokens (#20 logs it) */
.cfc-bakery-callout--error,
.cfc-bakery-callout--stale {
	--cfc-bakery-callout-edge: var(--cfc-bakery-color-error-text);
	--cfc-bakery-callout-ground: var(--cfc-bakery-color-error-bg);
}

.cfc-bakery-callout--error .cfc-bakery-callout__eyebrow,
.cfc-bakery-callout--error .cfc-bakery-callout__body,
.cfc-bakery-callout--stale .cfc-bakery-callout__body {
	color: var(--cfc-bakery-color-error-text);
}

.cfc-bakery-callout--stale .cfc-bakery-callout__body {
	margin-top: 0;
}

/* A banner that opens the step (the error, the stale sentence) starts where the body does — 16 under the header, not 32 (#20). */
.cfc-bakery-wizard__content > .cfc-bakery-callout:first-child {
	margin-top: 0;
}

/* Message input (F9 `text-input` 622:2132, Counter=On): label · field · counter row,
   6 apart, no box around the three (#8; #20). */
.cfc-bakery-message {
	background: none;
	border: 0;
	border-radius: 0;
	display: flex;
	flex-direction: column;
	gap: var(--cfc-bakery-fine-6);
	margin-top: var(--cfc-bakery-space-50); /* 16 under the Custom Text card, the body's one gap (639:2763, #20; was 8). */
	padding: 0;
}

.cfc-bakery-message__label {
	color: var(--cfc-bakery-color-maroon);
	display: block;
	font-size: var(--cfc-bakery-font-size-tag);
	font-weight: 700;
	letter-spacing: var(--cfc-bakery-tracking-tag);
	line-height: normal;
	margin: 0;
	text-transform: uppercase;
}

.cfc-bakery-message textarea,
.cfc-bakery-message input[type="text"] {
	background: var(--cfc-bakery-color-paper);
	border: var(--cfc-bakery-border-hairline) solid var(--cfc-bakery-color-line);
	border-radius: var(--cfc-bakery-radius-md); /* = var(--wp--custom--radius--md) */
	color: var(--cfc-bakery-color-ink);
	font-family: var(--cfc-bakery-font-body);
	font-size: var(--cfc-bakery-text-medium);
	line-height: normal;
	padding: calc(var(--cfc-bakery-fine-12) - var(--cfc-bakery-border-hairline)) calc(var(--cfc-bakery-fine-14) - var(--cfc-bakery-border-hairline)); /* 12 / 14 less the line → the frame's 42 */
	resize: vertical;
	width: 100%;
}

.cfc-bakery-message textarea::placeholder,
.cfc-bakery-message input[type="text"]::placeholder {
	color: var(--cfc-bakery-color-text-muted);
}

/* The component draws no focus state; the field takes the checkout fields' ring (it had none). */
.cfc-bakery-message textarea:focus-visible,
.cfc-bakery-message input[type="text"]:focus-visible {
	border-color: var(--cfc-bakery-color-fresh);
	outline: var(--cfc-bakery-btn-focus-outer-width) solid var(--cfc-bakery-color-fresh);
	outline-offset: var(--cfc-bakery-btn-focus-offset);
}

.cfc-bakery-message__meta {
	display: flex;
	justify-content: flex-end; /* The counter alone, where it sat beside the helper (removed, copy pass N11). */
	margin-top: 0;
}

.cfc-bakery-message__count {
	color: var(--cfc-bakery-color-text-muted);
	display: block;
	font-size: var(--cfc-bakery-font-size-description);
	line-height: normal;
}

.cfc-bakery-message__count {
	flex: none;
	font-variant-numeric: tabular-nums;
}

.cfc-bakery-message__count.is-over {
	color: var(--cfc-bakery-color-error-text);
	font-weight: 700;
}

/* Decoration TYPE dropdown (#7, F9 `dropdown` 622:2120) — a native <select> under the
   ticked extras-card, styled with tokens only; the open list is the browser's.
   #20: the CLOSED field of the component — the Bold 11 label 6 over a white
   field on the line (12 radius, 12 / 14 inside, 42 high), the green ▼ at the
   right edge drawn from two gradients (a <select> takes no pseudo-element). */
.cfc-bakery-type {
	display: flex;
	flex-direction: column;
	gap: var(--cfc-bakery-fine-6);
	margin: var(--cfc-bakery-fine-10) 0 0;
}

.cfc-bakery-type__label,
.cfc-bakery-cart__change-form .cfc-bakery-field__label {
	color: var(--cfc-bakery-color-ink);
	display: block;
	font-size: var(--cfc-bakery-font-size-tag);
	font-weight: 700;
	letter-spacing: var(--cfc-bakery-tracking-tag);
	line-height: normal;
	margin: 0;
	text-transform: uppercase;
}

/* The cart's pickup popup wears the same closed `dropdown` field (622:2103) on its location select (#20). */
.cfc-bakery-type__select,
.cfc-bakery-cart__change-form select.cfc-bakery-input {
	-webkit-appearance: none;
	appearance: none;
	background-color: var(--cfc-bakery-color-paper);
	background-image: linear-gradient(45deg, transparent 50%, var(--cfc-bakery-color-fresh) 50%), linear-gradient(135deg, var(--cfc-bakery-color-fresh) 50%, transparent 50%);
	background-position: right calc(var(--cfc-bakery-fine-14) + var(--cfc-bakery-fine-5)) center, right var(--cfc-bakery-fine-14) center;
	background-repeat: no-repeat;
	background-size: var(--cfc-bakery-fine-5) var(--cfc-bakery-fine-5);
	border: var(--cfc-bakery-border-hairline) solid var(--cfc-bakery-color-line);
	border-radius: var(--cfc-bakery-radius-md); /* = var(--wp--custom--radius--md) */
	color: var(--cfc-bakery-color-ink);
	display: block;
	font-family: var(--cfc-bakery-font-body);
	font-size: var(--cfc-bakery-text-medium);
	line-height: normal;
	min-height: 0;
	padding: calc(var(--cfc-bakery-fine-12) - var(--cfc-bakery-border-hairline)) calc(var(--cfc-bakery-fine-14) * 2 + var(--cfc-bakery-fine-10)) calc(var(--cfc-bakery-fine-12) - var(--cfc-bakery-border-hairline)) calc(var(--cfc-bakery-fine-14) - var(--cfc-bakery-border-hairline)); /* 12 / 14 less the line → the frame's 42; the right side clears the caret */
	width: 100%;
}

.cfc-bakery-type__select:focus-visible,
.cfc-bakery-cart__change-form select.cfc-bakery-input:focus-visible {
	outline: var(--cfc-bakery-btn-focus-outer-width) solid var(--cfc-bakery-color-fresh);
	outline-offset: var(--cfc-bakery-btn-focus-offset);
}

/* The builder's TYPE dropdown wears the whole component (`dropdown` 622:2120,
   #20, A144): the native select above stays the control — in place, focusable,
   the keyboard's and the screen reader's — and the wizard lays the component's
   face over it (typeFace()): the value and the text caret in a button that
   covers the field, and the Open variant's list in flow 6 under it. On a touch
   screen the wizard lays no face (`cfc-bakery-type--native`, thread e1c77354):
   the select above is the closed field and the phone's picker its one list.
   The menu's Category select and the cart popup's store select stay native. */
.cfc-bakery-type__field {
	border-radius: var(--cfc-bakery-radius-md); /* = var(--wp--custom--radius--md) */
	position: relative;
}

/* Keyboard focus is on the select under the face: the ring goes round the field. */
.cfc-bakery-type__field:has(.cfc-bakery-type__select:focus-visible) {
	outline: var(--cfc-bakery-btn-focus-outer-width) solid var(--cfc-bakery-color-fresh);
	outline-offset: var(--cfc-bakery-btn-focus-offset);
}

/* Closed 622:2105: white on the line, 12 radius, 12 / 14 inside, the value left, the caret right. */
.cfc-bakery-type__button {
	align-items: center;
	background: var(--cfc-bakery-color-paper);
	border: var(--cfc-bakery-border-hairline) solid var(--cfc-bakery-color-line);
	border-radius: var(--cfc-bakery-radius-md); /* = var(--wp--custom--radius--md) */
	color: var(--cfc-bakery-color-ink);
	cursor: pointer;
	display: flex;
	font-family: var(--cfc-bakery-font-body);
	font-size: var(--cfc-bakery-text-medium);
	gap: var(--cfc-bakery-fine-10);
	inset: 0;
	justify-content: space-between;
	line-height: normal;
	margin: 0;
	padding: 0 calc(var(--cfc-bakery-fine-14) - var(--cfc-bakery-border-hairline));
	position: absolute;
	text-align: left;
	width: 100%;
}

/* Open 622:2110: the 2px green edge — the second pixel an inset shadow, so the field keeps its size. */
.cfc-bakery-type.is-open .cfc-bakery-type__button {
	border-color: var(--cfc-bakery-color-fresh);
	box-shadow: inset 0 0 0 var(--cfc-bakery-border-hairline) var(--cfc-bakery-color-fresh);
}

.cfc-bakery-type__value {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* "Choose a type" until a type is picked: the text-input's placeholder colour (the dropdown draws no empty state). */
.cfc-bakery-type__button.is-placeholder .cfc-bakery-type__value {
	color: var(--cfc-bakery-color-text-muted);
}

/* The same placeholder colour on the bare select of a touch screen (its picker's rows stay in the ink) — a rule
   of its own: a browser without `:has()` drops the whole rule a selector list is in. */
.cfc-bakery-type--native .cfc-bakery-type__select:has(option[value=""]:checked) {
	color: var(--cfc-bakery-color-text-muted);
}

.cfc-bakery-type--native .cfc-bakery-type__select option {
	color: var(--cfc-bakery-color-ink);
}

/* ▼ / ▲ — a text glyph, Regular 14, in the green (622:2107 / 622:2112). */
.cfc-bakery-type__caret {
	color: var(--cfc-bakery-color-fresh);
	flex: none;
	font-size: var(--cfc-bakery-text-small);
	line-height: normal;
}

/* The Open list 622:2113: in flow under the field (the wrapper's 6 gap), white
   on the line, 12 radius, 4 above and below the rows; no shadow, no dividers. */
.cfc-bakery .cfc-bakery-type__menu {
	background: var(--cfc-bakery-color-paper);
	border: var(--cfc-bakery-border-hairline) solid var(--cfc-bakery-color-line);
	border-radius: var(--cfc-bakery-radius-md); /* = var(--wp--custom--radius--md) */
	list-style: none;
	margin: 0;
	overflow: hidden;
	padding: calc(var(--cfc-bakery-fine-4) - var(--cfc-bakery-border-hairline)) 0;
}

.cfc-bakery .cfc-bakery-type__menu[hidden] {
	display: none;
}

/* A row 622:2114: Regular 16, 10 / 14 inside; the chosen row (and the one under the pointer) on the mint. */
.cfc-bakery .cfc-bakery-type__option {
	color: var(--cfc-bakery-color-ink);
	cursor: pointer;
	font-size: var(--cfc-bakery-text-medium);
	line-height: normal;
	margin: 0;
	overflow: hidden;
	padding: var(--cfc-bakery-fine-10) calc(var(--cfc-bakery-fine-14) - var(--cfc-bakery-border-hairline));
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cfc-bakery .cfc-bakery-type__option:hover,
.cfc-bakery .cfc-bakery-type__option.is-selected {
	background: var(--cfc-bakery-color-mint);
}

/* `extras-card` Selected 628:2235 (#20): the ticked decoration's head and its
   TYPE dropdown in ONE card — mint, the 2px green edge, 12 / 14 inside, the
   dropdown 10 under the head. The head keeps the option card's markup with the
   card taken off it (the wrapper is the card now). */
.cfc-bakery-extra {
	background: var(--cfc-bakery-color-mint);
	border: var(--cfc-bakery-border-hairline) solid var(--cfc-bakery-color-fresh);
	border-radius: var(--cfc-bakery-radius-md); /* = var(--wp--custom--radius--md) */
	box-shadow: inset 0 0 0 var(--cfc-bakery-border-hairline) var(--cfc-bakery-color-fresh);
	margin-top: var(--cfc-bakery-space-50);
	padding: calc(var(--cfc-bakery-fine-12) - var(--cfc-bakery-border-hairline)) calc(var(--cfc-bakery-fine-14) - var(--cfc-bakery-border-hairline));
}

.cfc-bakery-extra > .cfc-bakery-option,
.cfc-bakery-extra > .cfc-bakery-option.is-selected,
.cfc-bakery-extra > .cfc-bakery-option:has(input:checked) {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	margin-top: 0;
	padding: 0;
}

/* Wizard nav — the frame's CTA bar ({builder-next-cta}): a full-bleed band on
   the builder's own background (José, 2026-10-14, 56f9aae3), 12 / 16 / 16
   inside, 24 under the step body (#20). The negative side margin is the
   column's own gutter. Previous and the last step's second button are on no
   frame and stay: the bar wraps bottom-up, so the forward button is the top
   row when two do not fit side by side. */
.cfc-bakery-wizard__nav {
	display: flex;
	flex-wrap: wrap-reverse;
	gap: var(--cfc-bakery-fine-12);
	justify-content: space-between;
	margin: var(--cfc-bakery-space-60) calc(-1 * var(--cfc-bakery-space-50)) 0;
	padding: var(--cfc-bakery-fine-12) var(--cfc-bakery-space-50) var(--cfc-bakery-space-50);
}

.cfc-bakery-wizard__nav .cfc-bakery-btn {
	flex: 1 1 auto;
}

/* Previous and the step's Next: one row on every step (`cta-bar` 636:2547 /
   637:2951, #20). Previous keeps its label's width while Next is there (Next's
   grow share takes the free space) and fills the row alone on the last step;
   Next takes the rest — the whole 343 when Previous is out — and a label too
   long for it wraps inside the button. */
.cfc-bakery-wizard__nav > #cfc-bakery-prev {
	flex: 1 0 auto;
}

.cfc-bakery-wizard__nav > #cfc-bakery-next {
	flex: 999 1 0;
	min-width: 0;
	padding-bottom: var(--cfc-bakery-fine-6); /* Two label lines still make the 44 button — the band stays the frame's 72 (637:2951); one line sits on the min-height either way (#20). */
	padding-top: var(--cfc-bakery-fine-6);
	text-align: center;
	white-space: normal;
}

/* The last step: its own CTA bar (in the step content) and this one read as one bar. */
.cfc-bakery-wizard__content:has(> .cfc-bakery-wizard__nav) + .cfc-bakery-wizard__nav {
	margin-top: 0;
	padding-top: 0;
}

/* …so the step's own bar ends on the buttons' 12 gap, not the band's 16 foot: the three buttons sit 12 apart (#20 review). */
.cfc-bakery-wizard__content:has(> .cfc-bakery-wizard__nav) > .cfc-bakery-wizard__nav {
	padding-bottom: var(--cfc-bakery-fine-12);
}

/* A step shorter than the screen (José, 2026-10-14, 382ed694): the spare height
   sits between the step's content and its buttons, and the price drawer's bar
   closes the screen, flush with its bottom edge; the footer follows below the
   fold. On the bare page the builder's wrapper is a column at least one screen
   tall without the footer, and the column runs down to the step's content,
   which takes the spare height; a step longer than the screen is laid out as
   before. `.cfc-bakery__inner` centres with auto margins, which would shrink it
   as a column's item: full width. The desktop block hands the block flow back. */
.cfc-bakery-shell .cfc-bakery[data-view="build"] > .cfc-bakery__main {
	display: flex;
	flex-direction: column;
	min-height: var(--cfc-bakery-screen-height);
}

.cfc-bakery-shell .cfc-bakery-wizard,
.cfc-bakery-shell .cfc-bakery-wizard > .cfc-bakery-step,
.cfc-bakery-shell .cfc-bakery-wizard__grid,
.cfc-bakery-shell .cfc-bakery-wizard__main {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
}

.cfc-bakery-shell .cfc-bakery-wizard__content {
	flex: 1 0 auto;
}

.cfc-bakery-shell .cfc-bakery[data-view="build"] > .cfc-bakery__main > .cfc-bakery__inner,
.cfc-bakery-shell .cfc-bakery-wizard > .cfc-bakery__inner {
	width: 100%;
}

/* The last step ends on its own bar: the spare height goes over that bar, and the
   bar's 24 moves to the card before it (an auto margin has no minimum). */
.cfc-bakery-shell .cfc-bakery-wizard__content:has(> .cfc-bakery-wizard__nav) {
	display: flex;
	flex-direction: column;
}

.cfc-bakery-shell .cfc-bakery-wizard__content:has(> .cfc-bakery-wizard__nav) > :has(+ .cfc-bakery-wizard__nav) {
	margin-bottom: var(--cfc-bakery-space-60);
}

.cfc-bakery-shell .cfc-bakery-wizard__content:has(> .cfc-bakery-wizard__nav) > .cfc-bakery-wizard__nav {
	margin-top: auto;
}

/* Sticky price drawer — `build-summary` Drawer 626:2150 (#20): the full-bleed
   green bar, round on top only, flat; the caps title, the lime total, the up
   chevron. Sticky stays (the frames draw it in flow). The
   bar is a button that opens the build sheet (F10 `639:3108`, José 2026-10-14):
   the browser's button look taken off, the text left as drawn, the lime ring
   inside it. */
.cfc-bakery-drawer {
	bottom: 0;
	padding: 0;
	pointer-events: none;
	position: sticky;
	z-index: var(--cfc-bakery-z-sticky); /* = var(--wp--custom--z--sticky) */
}

.cfc-bakery-drawer__bar {
	align-items: center;
	appearance: none;
	background: var(--cfc-bakery-color-fresh);
	border: 0;
	border-radius: var(--cfc-bakery-radius-lg) var(--cfc-bakery-radius-lg) 0 0; /* = var(--wp--custom--radius--lg), the top corners */
	box-shadow: none;
	color: var(--cfc-bakery-color-paper);
	cursor: pointer;
	display: flex;
	font: inherit;
	gap: var(--cfc-bakery-fine-12);
	justify-content: space-between;
	margin: 0;
	padding: var(--cfc-bakery-fine-12) var(--cfc-bakery-space-50);
	padding-bottom: calc(var(--cfc-bakery-fine-12) + var(--cfc-bakery-safe-bottom)); /* Stuck to the screen's bottom edge, it clears the home indicator (0 in a browser tab), #20 note 1. */
	pointer-events: auto;
	text-align: left;
	touch-action: none; /* A swipe up on the bar opens the sheet (the wizard's onSwipe(), #20 screen 10): the bar does not pan the page. */
	width: 100%;
}

.cfc-bakery-drawer__bar:focus-visible {
	outline: var(--cfc-bakery-btn-focus-outer-width) solid var(--cfc-bakery-color-accent-bg);
	outline-offset: calc(var(--cfc-bakery-btn-focus-offset) * -1);
}

.cfc-bakery-drawer__title {
	color: var(--cfc-bakery-color-accent-bg);
	font-size: var(--cfc-bakery-font-size-drawer-title);
	font-weight: var(--cfc-bakery-weight-semibold);
	line-height: var(--cfc-bakery-line-tight);
	overflow: hidden; /* One line ending in "…" (626:2150, #20) — never a character cap (A120). */
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

/* The title's box: it takes the room the price leaves, so the title can cut with "…". */
.cfc-bakery-drawer__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--cfc-bakery-fine-3);
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
}

.cfc-bakery-drawer__price {
	color: var(--cfc-bakery-color-accent-bg);
	font-family: var(--cfc-bakery-font-display);
	font-size: var(--cfc-bakery-font-size-price-total);
	line-height: var(--cfc-bakery-line-tight);
}

/* `icon/chevron-right` turned to point up (the frame's −90°), in the lime. */
.cfc-bakery-drawer__chevron {
	color: var(--cfc-bakery-color-accent-bg);
	flex-shrink: 0;
	height: var(--cfc-bakery-size-icon);
	transform: rotate(-90deg);
	width: var(--cfc-bakery-size-icon);
}

/* Calendar (date picker) — `calendar` 622:2449, day 622:2438, legend 622:2439
   (#20): a white card on the line, 16 / 8 inside; days up to 44 square (the
   frame's fixed 44 — they shrink together where the card is narrower, as in
   the checkout card and the pickup popup), 2 apart across, 8 down. */
.cfc-bakery-cal {
	background: var(--cfc-bakery-color-paper);
	border: var(--cfc-bakery-border-hairline) solid var(--cfc-bakery-color-line);
	border-radius: var(--cfc-bakery-radius-lg); /* = var(--wp--custom--radius--lg) */
	margin-top: var(--cfc-bakery-space-50);
	padding: calc(var(--cfc-bakery-space-50) - var(--cfc-bakery-border-hairline)) calc(var(--cfc-bakery-space-40) - var(--cfc-bakery-border-hairline)); /* 16 / 8 less the line: the frame's stroke is inside the box (the grid starts 8 from the card's edge, #20). */
}

.cfc-bakery-cal__head {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: var(--cfc-bakery-space-40);
}

.cfc-bakery-cal__month {
	font-family: var(--cfc-bakery-font-display);
	font-size: var(--cfc-bakery-font-size-section-title);
	font-weight: 400;
	line-height: var(--cfc-bakery-line-title);
}

.cfc-bakery-cal__nav {
	background: none;
	border: 0;
	color: var(--cfc-bakery-color-fresh);
	cursor: pointer;
	font-family: inherit; /* The browser's button font otherwise: the glyphs are Gill Sans Bold 20 (622:2451, #20 review). */
	font-size: var(--cfc-bakery-text-large);
	font-weight: 700;
	line-height: var(--cfc-bakery-line-none);
	margin: 0 calc(-1 * var(--cfc-bakery-fine-6)); /* The glyphs sit on the grid's edges (622:2451 at x 0, 622:2453 at the right, #20); the padding stays as the tap area. */
	padding: 0 var(--cfc-bakery-fine-6);
}

.cfc-bakery-cal__nav[disabled] {
	opacity: var(--cfc-bakery-disabled-opacity);
}

.cfc-bakery-cal__grid {
	column-gap: var(--cfc-bakery-fine-2);
	display: grid;
	grid-template-columns: repeat(7, minmax(0, var(--cfc-bakery-size-day)));
	row-gap: var(--cfc-bakery-space-40);
}

.cfc-bakery-cal__dow {
	color: var(--cfc-bakery-color-text-muted);
	font-size: var(--cfc-bakery-text-small);
	font-weight: 700;
	height: var(--cfc-bakery-space-60);
	line-height: var(--cfc-bakery-space-60);
	text-align: center;
}

.cfc-bakery-cal__day {
	aspect-ratio: 1;
	background: var(--cfc-bakery-color-mint);
	border: 0;
	border-radius: var(--cfc-bakery-radius-sm); /* = var(--wp--custom--radius--sm) */
	color: var(--cfc-bakery-color-ink);
	cursor: pointer;
	font-family: var(--cfc-bakery-font-body);
	font-size: var(--cfc-bakery-text-small);
	padding: 0;
	text-align: center;
	transition: background-color var(--cfc-bakery-transition-base);
}

.cfc-bakery-cal__day--empty {
	background: transparent;
	cursor: default;
}

/* Exactly three day states (#4): available (default), unavailable, selected.
   The server's lead/closed/full reasons collapse to ONE treatment here:
   the neutral grey, the muted number struck through (#20). A day of the
   month outside the payload (#57: past, beyond the horizon, not a pickup
   day) wears the same treatment — the full month, greyed, never missing. */
.cfc-bakery-cal__day--unavailable,
.cfc-bakery-cal__day--outside {
	background: var(--cfc-bakery-color-neutral-200);
	color: var(--cfc-bakery-color-text-muted);
	cursor: not-allowed;
	opacity: 1;
	text-decoration: line-through;
}

.cfc-bakery-cal__day.is-selected {
	background: var(--cfc-bakery-color-fresh);
	color: var(--cfc-bakery-color-paper);
	font-weight: 700;
}

.cfc-bakery-cal__legend {
	color: var(--cfc-bakery-color-text-muted);
	display: flex;
	flex-wrap: wrap;
	gap: var(--cfc-bakery-space-50);
	font-size: var(--cfc-bakery-text-small);
	line-height: normal; /* The legend row is the label's own height — 16 in the frame (622:2439, #20; was the body's 1.5). */
	margin-top: var(--cfc-bakery-fine-12);
}

.cfc-bakery-cal__legend span::before {
	border-radius: var(--cfc-bakery-radius-sm); /* = var(--wp--custom--radius--sm) */
	content: "";
	display: inline-block;
	height: var(--cfc-bakery-fine-14);
	margin-right: var(--cfc-bakery-fine-6);
	vertical-align: middle;
	width: var(--cfc-bakery-fine-14);
}

.cfc-bakery-cal__legend .leg-available::before { background: var(--cfc-bakery-color-mint); }
.cfc-bakery-cal__legend .leg-unavailable::before { background: var(--cfc-bakery-color-neutral-200); opacity: 1; }
.cfc-bakery-cal__legend .leg-selected::before { background: var(--cfc-bakery-color-fresh); }

/* Confirm-cancel popup (F10b, `popup` 739:2269) — opened by the builder header's CANCEL.
   Plain DOM; the wizard script traps focus. Scrim = ink @60% (Figma).
   #20: the card is a 16-gap column — title, body, fields, actions. */
.cfc-bakery-popup {
	align-items: center;
	display: flex;
	inset: 0;
	justify-content: center;
	overflow-y: auto; /* A card taller than the screen (the cart's pickup popup at 667 high) scrolls into reach; the card's auto margins centre it when it fits (#20 review). */
	overscroll-behavior: contain; /* A scroll that reaches the card's end stops there, never passed to the page (#20 screen 10, thread 486a58b5). */
	padding: var(--cfc-bakery-space-50);
	position: fixed;
	z-index: var(--cfc-bakery-z-modal); /* = var(--wp--custom--z--modal) */
}

.cfc-bakery-popup[hidden] {
	display: none;
}

/* While any shared popup is open — the build sheet, the builder's cancel popup, the cart's
   pickup popup — the page behind does not scroll (José, screen 10, thread 486a58b5: "block
   the scrolling, it could be confusing"). The page keeps its place: it is not moved, only
   held, and scrolls again from there when the popup closes. */
html:has(.cfc-bakery-popup:not([hidden])) {
	overflow: hidden;
}

.cfc-bakery-popup__scrim {
	background: color-mix(in srgb, var(--cfc-bakery-color-ink) var(--cfc-bakery-alpha-scrim), transparent); /* The frames' scrim: the ink at the scrim alpha (639:3109; 766:2652 prints no opacity and looks the same). */
	inset: 0;
	position: fixed; /* Stays over the whole screen while a tall card scrolls (#20 review; was absolute). */
}

.cfc-bakery-popup__card {
	background: var(--cfc-bakery-color-paper);
	border-radius: var(--cfc-bakery-radius-lg); /* = var(--wp--custom--radius--lg) */
	box-shadow: var(--cfc-bakery-shadow-float); /* = var(--wp--custom--shadow--float) */
	color: var(--cfc-bakery-color-ink);
	display: flex;
	flex-direction: column;
	gap: var(--cfc-bakery-space-50);
	margin: auto; /* Centred when it fits, top-aligned and reachable when it does not (#20 review). */
	max-width: var(--cfc-bakery-size-popup);
	padding: var(--cfc-bakery-space-60);
	position: relative;
	width: 100%;
}

.cfc-bakery .cfc-bakery-popup__title {
	font-size: var(--cfc-bakery-font-size-section-title);
	line-height: var(--cfc-bakery-line-title);
	margin: 0;
}

.cfc-bakery-popup__body {
	color: var(--cfc-bakery-color-text-muted);
	font-size: var(--cfc-bakery-font-size-description);
	line-height: var(--cfc-bakery-line-description);
	margin: 0;
}

/* The theme puts 1em over whatever follows a heading in the post content: 13 more
   between the title and the body than the card's 16 gap (the card stood 241 high
   for the frame's 228). Out-ranked here (#20). */
.cfc-bakery .cfc-bakery-popup__card > .cfc-bakery-popup__title + .cfc-bakery-popup__body {
	margin: 0;
}

.cfc-bakery-popup__actions {
	display: flex;
	flex-direction: column;
	gap: var(--cfc-bakery-space-50);
	margin-top: 0;
}

.cfc-bakery-popup__actions .cfc-bakery-btn {
	width: 100%;
}

/* The popup's Outline button sits on the mint (the instance's own fill). */
.cfc-bakery-popup__actions .cfc-bakery-btn--outline {
	background: var(--cfc-bakery-color-mint);
}

.cfc-bakery-popup__actions .cfc-bakery-btn--outline:hover {
	background: var(--cfc-bakery-color-ink);
}

/* The build sheet (F10 `639:3108`, José 2026-10-14, 52bd3957) — the popup above with the
   `build-summary` Review card in it; its green head is the review card's band with the down
   chevron that closes it; the rows and the total are the review card's own rules (below).
   The page behind is held by the shared popup's rule above.
   A drawer grown out of the price bar (#20 screen 10, José 2026-10-14, thread 2909bb08; full
   width, José 2026-10-18): edge to edge and standing on the screen's bottom edge as the bar
   does, round on top only as the bar is, so its green head is where the bar's green went —
   the card covers the bar while it is open. It slides up out of the bottom edge and back
   down into it (José's staging notes, 2026-10-19: "open and close without leaving the
   dresser"): popup.js lays every popup it shows out once in `cfc-bakery-popup--opening`,
   puts every popup it closes in `cfc-bakery-popup--closing` until the card's transition
   ends, and holds it in `cfc-bakery-popup--moving` the whole time the card moves; only the
   sheet gives those states a meaning — the card a whole height down, the scrim clear, and
   the popup not scrolling (clipped), so nothing can carry the card above its place while it
   is below it. The wizard drops the slide both ways for a visitor who asks for less motion
   (`cfc-bakery-wizard--reduced-motion`): popup.js then shows and hides it at once. */
.cfc-bakery-popup--sheet {
	padding: 0;
}

.cfc-bakery-popup--sheet .cfc-bakery-popup__card {
	border-radius: var(--cfc-bakery-radius-lg) var(--cfc-bakery-radius-lg) 0 0; /* = var(--wp--custom--radius--lg), the top corners — the bar's */
	gap: 0;
	margin: auto 0 0;
	max-width: none;
	overflow: hidden;
	padding: 0 0 var(--cfc-bakery-safe-bottom); /* On the bottom edge, the total clears the home indicator as the bar does (0 in a browser tab). */
	transition: translate var(--cfc-bakery-transition-base);
}

.cfc-bakery-popup--sheet .cfc-bakery-popup__scrim {
	transition: opacity var(--cfc-bakery-transition-base);
}

/* The start state jumps (no transition into it): popup.js puts it on a sheet already shown
   and focused, and the slide is the way back from it. */
.cfc-bakery-popup--sheet.cfc-bakery-popup--opening .cfc-bakery-popup__card {
	transition: none;
	translate: 0 100%; /* Its own height down: just under the screen's bottom edge. */
}

.cfc-bakery-popup--sheet.cfc-bakery-popup--opening .cfc-bakery-popup__scrim {
	opacity: 0;
	transition: none;
}

/* The way down: the same end as the start state, reached on the transition above. */
.cfc-bakery-popup--sheet.cfc-bakery-popup--closing .cfc-bakery-popup__card {
	translate: 0 100%;
}

.cfc-bakery-popup--sheet.cfc-bakery-popup--closing .cfc-bakery-popup__scrim {
	opacity: 0;
}

/* While the card moves the popup does not scroll: the card's translate cannot add room to
   scroll into, and no focus reveal or late scroll can lift the card off the bottom edge
   (`clip` is no scroll box at all; `hidden` for a browser without it). */
.cfc-bakery-popup--sheet.cfc-bakery-popup--moving {
	overflow: hidden;
	overflow: clip;
}

.cfc-bakery-wizard--reduced-motion .cfc-bakery-popup--sheet .cfc-bakery-popup__card,
.cfc-bakery-wizard--reduced-motion .cfc-bakery-popup--sheet .cfc-bakery-popup__scrim {
	transition: none;
}

/* The head closes the drawer: a tap anywhere on it is a tap on its chevron (the chevron's
   box stretched over the head; the button keeps its name and its focus ring), and a drag
   down on it is the wizard's (onSwipe()) — the head takes no panning of its own. */
.cfc-bakery-popup__head {
	align-items: center;
	background: var(--cfc-bakery-color-fresh);
	color: var(--cfc-bakery-color-paper);
	display: flex;
	gap: var(--cfc-bakery-fine-12);
	padding: var(--cfc-bakery-fine-14) var(--cfc-bakery-space-50);
	position: relative;
	touch-action: none;
}

.cfc-bakery-popup__close::after {
	content: "";
	inset: 0;
	position: absolute;
}

.cfc-bakery-popup__head-text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--cfc-bakery-fine-3);
	min-width: 0;
}

.cfc-bakery .cfc-bakery-popup--sheet .cfc-bakery-popup__title {
	font-family: var(--cfc-bakery-font-body);
}

.cfc-bakery-popup__close {
	appearance: none;
	background: none;
	border: 0;
	color: var(--cfc-bakery-color-accent-bg);
	cursor: pointer;
	display: flex;
	flex-shrink: 0;
	margin: 0;
	padding: 0;
}

.cfc-bakery-popup__close:focus-visible {
	outline: var(--cfc-bakery-btn-focus-outer-width) solid var(--cfc-bakery-color-accent-bg);
	outline-offset: var(--cfc-bakery-btn-focus-offset);
}

/* `icon/chevron-right` turned to point down (the frame's +90°), in the lime. */
.cfc-bakery-popup__close-icon {
	height: var(--cfc-bakery-size-icon);
	transform: rotate(90deg);
	width: var(--cfc-bakery-size-icon);
}

/* Review summary card (end of the last step) — `build-summary` Review 626:2200,
   rows 625:2160 (#20): a white card on the line under a green band; rows with
   no rules — the 71 step name in maroon, the pencil, the value, the 56 amount
   in green; one line over the Lovechild total. */
.cfc-bakery-review {
	background: var(--cfc-bakery-color-paper);
	border: var(--cfc-bakery-border-hairline) solid var(--cfc-bakery-color-line);
	border-radius: var(--cfc-bakery-radius-lg); /* = var(--wp--custom--radius--lg) */
	margin-top: var(--cfc-bakery-space-50);
	overflow: hidden;
}

.cfc-bakery-review__band {
	background: var(--cfc-bakery-color-fresh);
	color: var(--cfc-bakery-color-paper);
	display: flex;
	flex-direction: column;
	gap: var(--cfc-bakery-fine-3);
	padding: var(--cfc-bakery-fine-14) var(--cfc-bakery-space-50);
}

/* Bakery/Drawer Title — the review band's and the build sheet's head */
.cfc-bakery-review__band strong,
.cfc-bakery .cfc-bakery-popup--sheet .cfc-bakery-popup__title {
	color: var(--cfc-bakery-color-accent-bg);
	font-size: var(--cfc-bakery-font-size-drawer-title);
	font-weight: var(--cfc-bakery-weight-semibold);
	line-height: var(--cfc-bakery-line-tight);
	text-transform: uppercase;
}

.cfc-bakery-review__rows {
	padding: var(--cfc-bakery-fine-4) var(--cfc-bakery-space-50) 0;
}

.cfc-bakery-review__row {
	align-items: center;
	border-top: 0;
	display: flex;
	gap: var(--cfc-bakery-fine-17);
	font-size: var(--cfc-bakery-font-size-summary-row);
	padding: var(--cfc-bakery-fine-8) 0; /* 8 above and below with the theme and without: the plugin's own step, not the theme's spacing-40. */
}

.cfc-bakery-review__row:first-child {
	border-top: 0;
}

/* {qty-max-note} in the builder's Quantity row (#20, A406; no frame draws it): the wizard adds this modifier and the
   note only while the quantity is at the largest one. The row then wraps — the note takes the whole second line, 6
   under the line the stepper is on (the row's own 17 is its column gap). No modifier: the row as it always was. */
.cfc-bakery-review__row--note {
	flex-wrap: wrap;
	row-gap: var(--cfc-bakery-fine-6);
}

.cfc-bakery-review__row--note .cfc-bakery-qty-note {
	flex-basis: 100%;
}

.cfc-bakery-review__key {
	color: var(--cfc-bakery-color-maroon);
	flex: 0 0 var(--cfc-bakery-size-summary-key);
	line-height: var(--cfc-bakery-line-description);
}

.cfc-bakery-review__val {
	flex: 1;
	font-weight: var(--cfc-bakery-weight-semibold);
	line-height: normal; /* LH auto on the pencil, the value and the amount (625:2155 / 2153 / 2154, #20); the step name keeps 1.45. */
	min-width: 0;
	text-align: left;
}

/* An empty summary row reads "Not yet selected" — its step not passed yet, or its pick cleared (#9, A155) —
   Regular, muted, left-aligned as every value (#20, threads 1972470919 / 1966618069; José 2026-10-20); "None" keeps the row's
   own look */
.cfc-bakery-review__val.is-stale,
.cfc-bakery-review__val.is-unset {
	color: var(--cfc-bakery-color-text-muted);
	font-weight: 400;
}

/* The pencil ({summary-edit}) between the step name and the value; a row with
   nothing to edit carries the same-width blank so the values line up. */
.cfc-bakery-review__edit {
	color: var(--cfc-bakery-color-fresh);
	flex: 0 0 auto;
	font-weight: 400;
	line-height: normal;
	min-width: var(--cfc-bakery-fine-13);
	text-align: center;
	text-decoration: none;
}

/* Itemized amount column (#6): the base on Size, a signed delta per priced entry */
.cfc-bakery-review__amt {
	color: var(--cfc-bakery-color-success-text);
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	font-weight: var(--cfc-bakery-weight-semibold);
	line-height: normal;
	min-width: var(--cfc-bakery-size-summary-amt);
	text-align: right;
}

.cfc-bakery-review__amt:empty {
	display: none;
}

.cfc-bakery-review__total {
	align-items: center;
	border-top: var(--cfc-bakery-border-hairline) solid var(--cfc-bakery-color-line);
	display: flex;
	justify-content: space-between;
	margin: 0 var(--cfc-bakery-space-50);
	padding: var(--cfc-bakery-space-40) 0 var(--cfc-bakery-space-50);
}

/* Bakery/Price Total, both sides */
.cfc-bakery-review__total strong {
	font-family: var(--cfc-bakery-font-display);
	font-size: var(--cfc-bakery-font-size-price-total);
	font-weight: 400;
	line-height: var(--cfc-bakery-line-tight);
}

.cfc-bakery-review__total-amt {
	color: var(--cfc-bakery-color-fresh);
	font-family: var(--cfc-bakery-font-display);
	font-size: var(--cfc-bakery-font-size-price-total);
	line-height: var(--cfc-bakery-line-tight);
}

/* Staff banner (storefront shown to a logged-in bakery user) */
.cfc-bakery-staff-note {
	background: var(--cfc-bakery-color-honey);
	color: var(--cfc-bakery-color-ink);
	font-size: var(--cfc-bakery-text-small);
	padding: var(--cfc-bakery-space-40) var(--cfc-bakery-space-50);
	text-align: center;
}

/* ------------------------------------------------------------ desktop -- */

@media (min-width: 782px) {
	/* The desktop pass (#28): one content column on every screen (--cfc-bakery-layout-content, the
	   theme's content size), the bands edge to edge, one size mapping, one sticky offset (16,
	   space-50). Cross-screen rules first, then each screen in the order of the flow. #20's 375
	   pass changed several base rules; where desktop keeps what it had, the rule says so. */

	/* ---- Cross-screen: the roots, the column, the bands, the size mapping ---- */

	/* The roots' own margins come back (#20 pulled them out of the page gutter at 375), and every
	   root holds the content column — the theme's constrained layout caps the storefront and the
	   checkout there already; this also caps the confirmation (whose wrapper is core's `alignwide`,
	   80rem) and every root when the theme is off. */
	#cfc-bakery-app,
	#cfc-bakery-checkout,
	#cfc-bakery-confirmed,
	#cfc-bakery-frame {
		margin-left: auto !important;
		margin-right: auto !important;
		max-width: max(var(--cfc-bakery-layout-content), var(--cfc-bakery-layout-content-min));
	}

	/* The content column inside the roots: the view's column, the header bar's row and the
	   builder header's row (the base rules hold them at the 80rem page width). */
	.cfc-bakery__inner,
	.cfc-bakery-bar__row,
	.cfc-bakery-wizard__chrome-inner {
		max-width: max(var(--cfc-bakery-layout-content), var(--cfc-bakery-layout-content-min));
	}

	/* The bands paint their colour across the whole viewport while their content stays on the
	   column: a filled border image with a sideways outset. Its outset is ink overflow — painted,
	   never laid out — so no element is wider than the page and nothing can scroll sideways,
	   whatever the theme does with `overflow-x` (a 100vw box would overflow by a classic scrollbar). */
	.cfc-bakery-bar,
	.cfc-bakery-wizard__chrome,
	.cfc-bakery-footer {
		border-image: linear-gradient(var(--cfc-bakery-color-ink), var(--cfc-bakery-color-ink)) fill 0 / 0 / 0 var(--cfc-bakery-layout-bleed);
	}

	.cfc-bakery-marquee {
		border-image: linear-gradient(var(--cfc-bakery-color-accent-bg), var(--cfc-bakery-color-accent-bg)) fill 0 / 0 / 0 var(--cfc-bakery-layout-bleed);
	}

	/* #39: the Holiday banner bleeds as the marquee above it does — the grey band, and the garland tiled from the
	   centre at the artwork's own 375 × 29 (an unsliced border image is drawn unscaled; 29 = the strip's height). */
	.cfc-bakery-holiday-banner {
		border-image: linear-gradient(var(--cfc-bakery-color-holiday-banner), var(--cfc-bakery-color-holiday-banner)) fill 0 / 0 / 0 var(--cfc-bakery-layout-bleed);
	}

	.cfc-bakery-holiday-banner__garland {
		background-image: none;
		border-image: url("../images/holiday-banner.svg") 0 fill / 0 / 0 var(--cfc-bakery-layout-bleed) repeat;
	}

	/* #44: the holiday strip bleeds on its own maroon, as the bakery's does on the lime. */
	.cfc-bakery-marquee--holiday {
		border-image: linear-gradient(var(--cfc-bakery-color-maroon), var(--cfc-bakery-color-maroon)) fill 0 / 0 / 0 var(--cfc-bakery-layout-bleed);
	}

	/* The size mapping (decision 10): each bakery-only Figma size snaps to the nearest theme size;
	   eyebrow, step label, drawer title and tag stay (nothing smaller exists). The header title's
	   `large` makes the bar 60 high (54 at 375). `html .cfc-bakery` out-ranks the server's `:root`
	   snapshot and the `body` block whichever order they load in; every bakery root carries the class. */
	html .cfc-bakery {
		--cfc-bakery-font-size-hero: var(--cfc-bakery-text-xx-large);
		--cfc-bakery-font-size-section-title: var(--cfc-bakery-text-large);
		--cfc-bakery-font-size-header-title: var(--cfc-bakery-text-large);
		--cfc-bakery-font-size-price: var(--cfc-bakery-text-medium);
		--cfc-bakery-font-size-option-label: var(--cfc-bakery-text-medium);
		--cfc-bakery-font-size-description: var(--cfc-bakery-text-small);
		--cfc-bakery-font-size-summary-row: var(--cfc-bakery-text-small);
	}

	/* The hero, the product page and the builder's step: no side padding — the column is the gutter. */
	.cfc-bakery-hero,
	.cfc-bakery-pdp,
	.cfc-bakery-step {
		padding-left: 0;
		padding-right: 0;
	}

	/* The banner row (the menu's and the builder's) carries phone-width spacing in its base rule;
	   desktop keeps the wrapping 16-gap row. */
	.cfc-bakery-banner__row {
		flex-wrap: wrap;
		gap: var(--cfc-bakery-space-50);
	}

	/* ---- F1 Landing (A) ---- */

	/* The text left-aligned, as before #20's centred 375 hero (the sub's margins are zeroed below). */
	.cfc-bakery-hero {
		text-align: left;
	}

	/* The title sat flush on the hero's top padding (the shell's heading reset out-ranked its own
	   margin) with one line of air before the sub — a theme rule's then; the 16 here. Its size is
	   the mapping's (hero → xx-large). */
	#cfc-bakery-app .cfc-bakery-hero__title {
		margin: 0 0 var(--cfc-bakery-space-50);
	}

	#cfc-bakery-app .cfc-bakery-hero__lede {
		font-size: var(--cfc-bakery-text-medium);
		line-height: var(--cfc-bakery-line-body);
		margin: 0;
	}

	/* Decision 5 A: with pictures set (`--media`), the text left and the 4:3 slideshow right. The
	   text sits in the middle of the box's height (the 1fr rows above and below). With none, the
	   section is today's block and the text spans the column — no empty box. */
	#cfc-bakery-app .cfc-bakery-hero--media {
		column-gap: var(--cfc-bakery-space-80);
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: 1fr auto auto auto 1fr;
	}

	#cfc-bakery-app .cfc-bakery-hero--media > * {
		grid-column: 1;
	}

	#cfc-bakery-app .cfc-bakery-hero--media > .cfc-bakery-hero__title {
		grid-row: 2;
	}

	#cfc-bakery-app .cfc-bakery-hero--media > .cfc-bakery-hero__title + .cfc-bakery-hero__lede {
		grid-row: 3;
	}

	#cfc-bakery-app .cfc-bakery-hero--media > .cfc-bakery-hero__lede + .cfc-bakery-hero__lede {
		grid-row: 4;
	}

	/* The slideshow box: shown at desktop over its `hidden` (which keeps it off the 375 page), the
	   whole height of the text's rows; no ground of its own (José: no grey box ever ships) — the first picture paints over the page. */
	#cfc-bakery-app .cfc-bakery-hero--media > .cfc-bakery-hero__media {
		aspect-ratio: 4 / 3;
		border-radius: var(--cfc-bakery-radius-lg);
		display: block;
		grid-column: 2;
		grid-row: 1 / -1;
		overflow: hidden;
		position: relative;
	}

	/* The slides stacked in the box; hero.js moves `is-active` and the pictures cross-fade. */
	#cfc-bakery-app .cfc-bakery-hero__slide {
		display: block;
		height: 100%;
		inset: 0;
		object-fit: cover;
		opacity: 0;
		position: absolute;
		transition: opacity var(--cfc-bakery-transition-base);
		width: 100%;
	}

	#cfc-bakery-app .cfc-bakery-hero__slide.is-active {
		opacity: 1;
	}

	html.cfc-bakery-reduce-motion #cfc-bakery-app .cfc-bakery-hero__slide {
		transition: none;
	}

	/* #44: the holiday hero as #28's F1 A lays the bakery's out — the text left, in the middle of the photo's
	   height; the photo right, 4:3, the radius of #28's box. */
	#cfc-bakery-app .cfc-bakery-hero--holiday {
		align-items: center;
		column-gap: var(--cfc-bakery-space-80);
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	#cfc-bakery-app .cfc-bakery-hero--holiday > .cfc-bakery-hero__photo {
		border-radius: var(--cfc-bakery-radius-lg);
		margin-top: 0;
	}

	/* The compact cards (one or two items) keep the grid's stretch. */
	#cfc-bakery-app .cfc-bakery-featured__grid {
		align-items: normal;
	}

	/* The Seasonal Specials carousel (the landing's and the cart's): the picture a fixed 170 high
	   (624:2480) less the card's line, with or without a photo, and the chevrons centred on it
	   (69 down, less the line) — the phone's 4:3 picture is the base rule's (#20, 2026-10-20). */
	.cfc-bakery-featured__photo {
		aspect-ratio: auto;
		height: calc(var(--cfc-bakery-size-carousel-img) - var(--cfc-bakery-border-hairline));
	}

	.cfc-bakery-featured__photo.cfc-bakery-img-placeholder {
		aspect-ratio: auto;
		height: calc(var(--cfc-bakery-size-carousel-img) - var(--cfc-bakery-border-hairline));
	}

	.cfc-bakery-featured__nav {
		top: calc((var(--cfc-bakery-size-carousel-img) - var(--cfc-bakery-size-icon)) / 2 - var(--cfc-bakery-border-hairline));
	}

	/* Decision 5 A: every item fits the view (`--static`, featured.php: no more items than
	   `data-cfc-per-view`) — a static row of equal cards: the one white card steps back, each
	   slide becomes a card, no sideways scroll, no snap, no chevrons, no dots. */
	#cfc-bakery-app .cfc-bakery-featured--static .cfc-bakery-featured__carousel {
		background: transparent;
		border: 0;
		overflow: visible;
		padding-bottom: 0;
	}

	#cfc-bakery-app .cfc-bakery-featured--static .cfc-bakery-featured__track {
		display: grid;
		gap: var(--cfc-bakery-space-50);
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		overflow: visible;
		scroll-snap-type: none;
	}

	#cfc-bakery-app .cfc-bakery-featured--static .cfc-bakery-featured__slide {
		background: var(--cfc-bakery-color-paper);
		border: var(--cfc-bakery-border-hairline) solid var(--cfc-bakery-color-line);
		border-radius: var(--cfc-bakery-radius-lg);
		overflow: hidden;
		padding-bottom: var(--cfc-bakery-fine-10); /* the dots' 6 and the card's padding are gone: 16 from the foot */
	}

	#cfc-bakery-app .cfc-bakery-featured--static .cfc-bakery-featured__nav,
	#cfc-bakery-app .cfc-bakery-featured--static .cfc-bakery-featured__dots {
		display: none;
	}

	/* Decision 5 A: more items than fit — the carousel shows the placement's count of slides
	   (`data-cfc-per-view`: 3 on the landing, 2 for the cart's cross-sell, F11) in the one white
	   card; featured.js moves one card per click, endless. Each slide is exactly its share of the
	   track (no gap: the script's one-card step is the slide's width). A hairline left of each
	   slide parts them — a shadow, so it takes no width, and the first slide's falls outside the
	   track's scroll box, so the card's edge is never doubled. */
	#cfc-bakery-app .cfc-bakery-featured[data-cfc-per-view]:not(.cfc-bakery-featured--static) .cfc-bakery-featured__slide {
		box-shadow: calc(-1 * var(--cfc-bakery-border-hairline)) 0 0 0 var(--cfc-bakery-color-line);
	}

	#cfc-bakery-app .cfc-bakery-featured[data-cfc-per-view="3"]:not(.cfc-bakery-featured--static) .cfc-bakery-featured__slide {
		flex: 0 0 calc(100% / 3);
	}

	/* Decision 5 A: the categories a 3-up grid of cards; the title and See All across the row. */
	#cfc-bakery-app .cfc-bakery-cats {
		padding: var(--cfc-bakery-space-70) 0;
	}

	#cfc-bakery-app .cfc-bakery-cats > .cfc-bakery__inner {
		display: grid;
		gap: var(--cfc-bakery-space-50);
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* The grid's gap spaces the cards — the list's own top margins go. */
	#cfc-bakery-app .cfc-bakery-cats .cfc-bakery-cats__title,
	#cfc-bakery-app .cfc-bakery-cats a.cfc-bakery-cat-row,
	#cfc-bakery-app .cfc-bakery-cats .cfc-bakery-cats__all {
		margin: 0;
	}

	/* The section title and the caption take the whole row. */
	#cfc-bakery-app .cfc-bakery-cats .cfc-bakery-cats__title,
	#cfc-bakery-app .cfc-bakery-cats .cfc-bakery-caption {
		grid-column: 1 / -1;
	}

	/* See All on a line of its own under the grid, its label's width. */
	#cfc-bakery-app .cfc-bakery-cats .cfc-bakery-cats__all {
		grid-column: 1 / -1;
		justify-self: start;
		width: auto;
	}

	/* ---- F2 Menu (today's desktop; only the cross-screen rules above are new) ---- */

	/* The Category list hangs from its chip again, the chips neither scroll nor pull out, the list
	   starts under the filter row, the groups 24 apart. */
	#cfc-bakery-app .cfc-bakery-filter-cat {
		position: relative;
	}

	#cfc-bakery-app .cfc-bakery-popover {
		margin-top: var(--cfc-bakery-space-40);
		right: auto;
		top: 100%;
		width: max-content;
	}

	html.cfc-bakery-js #cfc-bakery-app .cfc-bakery-filter-row .cfc-bakery-pills {
		flex: 1 1 auto;
		flex-wrap: wrap;
		margin: 0;
		overflow-x: visible;
		padding: 0;
	}

	#cfc-bakery-app .cfc-bakery-menu__list {
		padding-top: 0;
	}

	#cfc-bakery-app .cfc-bakery-menu-group:not([hidden]) ~ .cfc-bakery-menu-group:not([hidden]) {
		margin-top: var(--cfc-bakery-space-60);
	}

	/* Menu rows two-up inside a group; the banner spans the row (#15). */
	.cfc-bakery-menu-group__body {
		display: grid;
		gap: var(--cfc-bakery-space-50);
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cfc-bakery-product-row {
		margin-top: 0;
	}

	.cfc-bakery-menu-group__banner {
		grid-column: 1 / -1;
	}

	.cfc-bakery-filter-row {
		flex-wrap: nowrap;
	}

	/* ---- F4 Item page (A) ---- */

	#cfc-bakery-app .cfc-bakery-pdp {
		padding-bottom: var(--cfc-bakery-space-70);
	}

	/* Decision 6 A: two columns — the image about 55% on the left, everything else on the right,
	   the 375 DOM order unchanged (an as-is item the same). The two wrapper divs step aside
	   (`display: contents`) so the gallery and each detail are the grid's own items: the gallery
	   spans every row, the details stack in the right column, the price row and the dietary tags
	   share one line as at 375. Columns: image · gutter (space-80) · price · tags; the image is the
	   ratio token's share OF THE WHOLE column (an fr pair would share only what the auto price
	   column leaves — 45%, the browser pass of 2026-10-20), the tags take the rest. Rows: eight auto
	   rows for the details, then a 1fr row that takes the image's extra height. */
	#cfc-bakery-app .cfc-bakery-pdp__grid {
		column-gap: 0;
		display: grid;
		grid-template-columns: [media-start] minmax(0, calc(100% * var(--cfc-bakery-ratio-media-column))) [media-end] var(--cfc-bakery-space-80) [info-start] auto [tags-start] minmax(0, 1fr) [info-end];
		grid-template-rows: repeat(8, auto) 1fr;
		row-gap: 0;
	}

	#cfc-bakery-app .cfc-bakery-pdp__grid > div {
		display: contents;
	}

	/* The image column, sticky while the right side scrolls (the bar scrolls away: 16 under the
	   viewport's top, every sticky column's offset); the 4:3 main image. */
	#cfc-bakery-app .cfc-bakery-pdp__grid .cfc-bakery-gallery {
		align-self: start;
		grid-column: media-start / media-end;
		grid-row: 1 / -1;
		position: sticky;
		top: var(--cfc-bakery-space-50);
	}

	/* #29 unit 6 (STATUS §4; A634: staff place phone orders on the storefront logged in, so they
	   see WordPress's admin bar): the bar covers the 16 under the screen's top that every sticky
	   column stands at. Core adds `admin-bar` to the body whenever the bar shows and sets
	   --wp-admin--admin-bar--height on html (wp-includes/css/admin-bar.css: 32, 46 at 782 and
	   under), read through --cfc-bakery-admin-bar-height (golden rule 3: the stylesheet reads
	   --cfc-bakery-* only). Each sticky rule on the 16 offset has a twin right after it: 16 under
	   the bar. The five here sit in this block, so they hold from 782 up, where the bar is fixed;
	   the pickup lock's card, sticky at every width, has its twin beside its own rule. */
	body.admin-bar #cfc-bakery-app .cfc-bakery-pdp__grid .cfc-bakery-gallery {
		top: calc(var(--cfc-bakery-space-50) + var(--cfc-bakery-admin-bar-height));
	}

	#cfc-bakery-app .cfc-bakery-gallery__hero {
		aspect-ratio: 4 / 3;
	}

	/* The right column — name, price, description, the stepper and its button, then the
	   Ingredients / details cards (auto-placed under them), top to bottom. */
	#cfc-bakery-app .cfc-bakery-pdp__grid .cfc-bakery-pdp__title,
	#cfc-bakery-app .cfc-bakery-pdp__grid .cfc-bakery-pdp__desc,
	#cfc-bakery-app .cfc-bakery-pdp__grid .cfc-bakery-pdp__buy,
	#cfc-bakery-app .cfc-bakery-pdp__grid .cfc-bakery-accordion {
		grid-column: info-start / info-end;
		min-width: 0;
	}

	/* The name keeps today's desktop xx-large (not the mapping's section title) and opens the
	   right column, level with the image. */
	#cfc-bakery-app .cfc-bakery-pdp__title {
		font-size: var(--cfc-bakery-text-xx-large);
		grid-row: 1;
		line-height: var(--cfc-bakery-line-snug);
		margin-top: 0;
	}

	#cfc-bakery-app .cfc-bakery-pdp__grid .cfc-bakery-pdp__price-row {
		align-self: center;
		grid-column: info-start / tags-start;
		grid-row: 2;
	}

	/* The dietary tags beside the price, 8 after it (the 375 row's gap). */
	#cfc-bakery-app .cfc-bakery-pdp__grid .cfc-bakery-dietary-tags--pill {
		align-self: center;
		grid-column: tags-start / info-end;
		grid-row: 2;
		margin-inline-start: var(--cfc-bakery-space-40);
	}

	#cfc-bakery-app .cfc-bakery-pdp__grid .cfc-bakery-pdp__desc {
		grid-row: 3;
	}

	/* The stepper row under the description — the as-is item's cart icon / counter is the same
	   form, so it lands in this spot too. 24 under the text. */
	#cfc-bakery-app .cfc-bakery-pdp__buy {
		grid-row: 4;
		margin-top: var(--cfc-bakery-space-60);
	}

	/* ---- F5 / F9 Builder (A) ---- */

	/* The builder's column down to the step's content (the base rule, a step shorter than the
	   phone's screen) is the 375 pass's: desktop keeps its block flow, its grid and the last
	   step's card with nothing under it. The `:has()` selectors stand in rules of their own — a
	   browser without `:has()` drops the whole rule a selector list is in. */
	.cfc-bakery-shell .cfc-bakery[data-view="build"] > .cfc-bakery__main {
		display: block;
		min-height: 0;
	}

	.cfc-bakery-shell .cfc-bakery-wizard,
	.cfc-bakery-shell .cfc-bakery-wizard > .cfc-bakery-step,
	.cfc-bakery-shell .cfc-bakery-wizard__main {
		display: block;
	}

	.cfc-bakery-shell .cfc-bakery-wizard__content:has(> .cfc-bakery-wizard__nav) {
		display: block;
	}

	.cfc-bakery-shell .cfc-bakery-wizard__grid {
		display: grid;
	}

	.cfc-bakery-shell .cfc-bakery-wizard__content:has(> .cfc-bakery-wizard__nav) > :has(+ .cfc-bakery-wizard__nav) {
		margin-bottom: 0;
	}

	/* Decision 7 A, while the wizard says the column is on (`--column`, modifier-wizard.js, set at
	   this same width): the build summary is a 320 (20rem) sticky left column, always open, the
	   step takes the rest, 24 between (F5 A 2149:46 / F9 A 2150:18); the price bar is not shown
	   (the column carries the running total); step 5's inline review card is not shown (the column
	   is the review). The column's card starts level with the step's first heading. */
	.cfc-bakery-wizard--column .cfc-bakery-wizard__grid {
		align-items: start;
		gap: var(--cfc-bakery-space-60);
		grid-template-columns: var(--cfc-bakery-layout-side-column) minmax(0, 1fr);
	}

	.cfc-bakery-wizard--column .cfc-bakery-wizard__aside {
		display: block; /* #20 hides it in the base rule (no frame draws it at 375). */
		position: sticky;
		top: var(--cfc-bakery-space-50);
	}

	body.admin-bar .cfc-bakery-wizard--column .cfc-bakery-wizard__aside {
		top: calc(var(--cfc-bakery-space-50) + var(--cfc-bakery-admin-bar-height));
	}

	.cfc-bakery-wizard--column .cfc-bakery-wizard__aside > .cfc-bakery-review {
		margin-top: 0;
	}

	.cfc-bakery-wizard--column .cfc-bakery-drawer,
	.cfc-bakery-wizard--column .cfc-bakery-wizard__content #cfc-bakery-review {
		display: none;
	}

	/* Step 5: the wizard moves its two buttons into the nav row under the step and marks the row it
	   left `is-empty` — that row takes no room. As specific as the base `:has()` rules on it. */
	.cfc-bakery-wizard--column .cfc-bakery-wizard__content > .cfc-bakery-wizard__nav.is-empty {
		display: none;
	}

	/* The nav row: no bleed (the step has no side padding here), 16 above and below, each button its
	   label's width, Next at the row's end (on the first step Previous is out of the row). It wraps
	   as the 375 bar does — bottom-up, 12 apart — when its buttons do not fit on one line: on step 5,
	   Previous, Add & keep shopping and Add to cart share one row when they fit, else the forward
	   buttons go up a row each. */
	.cfc-bakery-wizard__nav {
		flex-wrap: wrap-reverse;
		gap: var(--cfc-bakery-fine-12);
		margin: 0;
		padding: var(--cfc-bakery-space-50) 0;
	}

	.cfc-bakery-wizard__nav .cfc-bakery-btn,
	.cfc-bakery-wizard__nav > #cfc-bakery-prev,
	.cfc-bakery-wizard__nav > #cfc-bakery-next {
		flex: 0 1 auto;
	}

	.cfc-bakery-wizard__nav > #cfc-bakery-next {
		margin-left: auto;
	}

	/* Step 5's two buttons after Previous take the row's free width (the base rule's grow), so a
	   wrapped one fills its own row as at 375. */
	.cfc-bakery-wizard__nav > #cfc-bakery-prev ~ .cfc-bakery-btn:not(#cfc-bakery-next) {
		flex: 1 1 auto;
	}

	.cfc-bakery-wizard__content:has(> .cfc-bakery-wizard__nav) + .cfc-bakery-wizard__nav {
		padding-top: var(--cfc-bakery-space-50);
	}

	.cfc-bakery-wizard__content:has(> .cfc-bakery-wizard__nav) > .cfc-bakery-wizard__nav {
		padding-bottom: var(--cfc-bakery-space-50);
	}

	/* The pickup calendar is its own card on the step column's left edge: the base card (white, the
	   line, the summary card's large radius) with 24 inside; the month and its two arrows on one
	   row, 16 over the weekday row; an even 7-column grid filling the card (6 between the days, the
	   days square). The card is the popup card's width (26rem), so a day stays near the phone's 44.
	   The store cards under it — with their head — fill the step column (José's staging check of
	   stage 3, 2026-10-21: the centred card and the narrow store cards "look off"; the calendar keeps
	   its size, sits left, the store cards take the column). Available days are ringed in the green
	   under the pointer; selected (green, white, bold) and unavailable (grey, muted, struck through)
	   are the base rules'. date-picker.js marks no "today". */
	.cfc-bakery-wizard--column #cfc-bakery-cal-host {
		max-width: var(--cfc-bakery-size-popup);
	}

	.cfc-bakery-wizard--column #cfc-bakery-cal-host .cfc-bakery-cal {
		padding: calc(var(--cfc-bakery-space-60) - var(--cfc-bakery-border-hairline));
	}

	.cfc-bakery-wizard--column #cfc-bakery-cal-host .cfc-bakery-cal__head {
		margin-bottom: var(--cfc-bakery-space-50);
	}

	.cfc-bakery-wizard--column #cfc-bakery-cal-host .cfc-bakery-cal__grid {
		gap: var(--cfc-bakery-fine-6);
		grid-template-columns: repeat(7, minmax(0, 1fr));
	}

	.cfc-bakery-wizard--column #cfc-bakery-cal-host .cfc-bakery-cal__day:enabled:not(.is-selected):hover {
		box-shadow: inset 0 0 0 var(--cfc-bakery-border-hairline) var(--cfc-bakery-color-fresh);
	}

	.cfc-bakery-size-grid {
		display: grid;
		gap: var(--cfc-bakery-space-40);
		grid-template-columns: 1fr 1fr;
	}

	.cfc-bakery-size-grid .cfc-bakery-option {
		margin-top: 0;
	}

	/* ---- F11 Cart (B) ---- */

	/* Decision 8 B (frame F11 B 2151:95): the lines left (about 60%), the summary panel right,
	   sticky. cart.js moves the totals and the CTA row into the panel at this width and shows it. */
	#cfc-bakery-cart {
		align-items: start; /* each column its own height (the sticky panel needs it) */
		column-gap: var(--cfc-bakery-space-60);
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	}

	#cfc-bakery-cart > * {
		grid-column: 1;
	}

	/* The cart card keeps its 24 head margin (#20's 375 pass dropped it) and opens the first row,
	   beside the panel. */
	#cfc-bakery-cart .cfc-bakery-cart__card {
		grid-row: 1;
		margin-top: var(--cfc-bakery-space-60);
	}

	/* The panel (its look is `.cfc-bakery-panel`'s): the totals over the CTA row, 16 apart, level
	   with the card, beside the card, the cross-sell and the Change form. Not shown while hidden
	   (no script, or under this width). */
	#cfc-bakery-cart > .cfc-bakery-cart__summary:not([hidden]) {
		display: grid;
		gap: var(--cfc-bakery-space-50);
		grid-column: 2;
		grid-row: 1 / span 3;
		margin-top: var(--cfc-bakery-space-60);
		position: sticky;
		top: var(--cfc-bakery-space-50);
	}

	body.admin-bar #cfc-bakery-cart > .cfc-bakery-cart__summary:not([hidden]) {
		top: calc(var(--cfc-bakery-space-50) + var(--cfc-bakery-admin-bar-height));
	}

	/* The panel's CTA row: the two buttons side by side while both fit the panel (1280, 1440),
	   each on its own full row when they do not (834's 298 panel clipped "KEEP SHOPPING" in the
	   base rule's equal halves — the browser pass of 2026-10-21). Printed order kept (Keep
	   shopping, then Checkout): no `order`, the tab order follows the screen. */
	#cfc-bakery-cart > .cfc-bakery-cart__summary .cfc-bakery-cart__ctas {
		display: flex;
		flex-wrap: wrap;
	}

	#cfc-bakery-cart > .cfc-bakery-cart__summary .cfc-bakery-cart__ctas > .cfc-bakery-btn {
		flex: 1 1 auto;
	}

	/* The cross-sell keeps its own 16 gutter and its 24 head padding (#20's 375 pass changed both). */
	#cfc-bakery-cart .cfc-bakery__inner {
		padding-left: var(--cfc-bakery-space-50);
		padding-right: var(--cfc-bakery-space-50);
	}

	#cfc-bakery-cart .cfc-bakery-featured--cart {
		padding-top: var(--cfc-bakery-space-60);
	}

	/* #52: the holiday cart's second carousel keeps the first's foot as the gap (the base rule, at this rule's rank). */
	#cfc-bakery-cart .cfc-bakery-featured--holiday + .cfc-bakery-featured--holiday {
		padding-top: 0;
	}

	/* "Add To Your Order": two cards in view (`data-cfc-per-view="2"`); one or two items are the
	   static pair (the compact grid), more the landing's carousel with two in view. */
	#cfc-bakery-app .cfc-bakery-featured[data-cfc-per-view="2"]:not(.cfc-bakery-featured--static) .cfc-bakery-featured__slide {
		flex: 0 0 calc(100% / 2);
	}

	/* ---- The review step (#32 A1) ---- */

	/* One centred column — the card and its CTA row, no side panel (the cart's two columns hold a list beside
	   its summary; the step is one decision). The card keeps the cart card's 24 head margin. */
	#cfc-bakery-app .cfc-bakery-change-review {
		max-width: var(--cfc-bakery-size-review);
	}

	#cfc-bakery-app .cfc-bakery-change-review__card {
		margin-top: var(--cfc-bakery-space-60);
	}

	/* ---- F12 Checkout (B) ---- */

	/* The body keeps its 32 foot (#20's 375 pass made it 24). */
	#cfc-bakery-checkout .cfc-bakery-checkout__body {
		padding-bottom: var(--cfc-bakery-space-70);
	}

	/* Decision 8 B (frame F12 B 2151:226): the fields left (about 58%) — Customer Details, Confirm
	   Pickup Details, Payment Method, PLACE ORDER — and the order summary right, sticky. A grid on
	   Woo's form: its blocks are the form's own children. */
	#cfc-bakery-checkout .cfc-bakery-checkout__form {
		align-items: start;
		column-gap: var(--cfc-bakery-space-60);
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}

	#cfc-bakery-checkout .cfc-bakery-checkout__form > * {
		grid-column: 1;
	}

	#cfc-bakery-checkout .cfc-bakery-checkout__form > #order_review {
		grid-column: 2;
		grid-row: 1 / span 3;
		position: sticky;
		top: var(--cfc-bakery-space-50);
	}

	body.admin-bar #cfc-bakery-checkout .cfc-bakery-checkout__form > #order_review {
		top: calc(var(--cfc-bakery-space-50) + var(--cfc-bakery-admin-bar-height));
	}

	/* A theme-page checkout (#26 B1, José 2026-11-02: "the top part is cut by the navbar when
	   scroll"): inside the theme's page a header the theme keeps at the top (sticky or fixed)
	   covers the 16 the column stands at, so the column stands 16 under the edge checkout.js
	   measures from the page itself — every header, nav or banner (WordPress's toolbar among
	   them) that sticks, the lowest edge they cover, written on <body> over the token's own 0
	   (tokens.php, A1931); no theme value is written here (golden rule 1). Unmeasured — no
	   script — the token is 0 and the column stands at the 16 (the toolbar's twin above yields
	   to this rule on the site path: with the script the toolbar is in the measure). */
	body.cfc-bakery-checkout-site #cfc-bakery-checkout .cfc-bakery-checkout__form > #order_review {
		top: calc(var(--cfc-bakery-space-50) + var(--cfc-bakery-site-header-h));
	}

	/* The summary is fixed open at this width (checkout.js opens it): its row is a heading, not a
	   toggle — no pointer, no chevron (the marker is off in the base rules). With scripts only
	   (`html.cfc-bakery-js`): without JS nothing opens it, so the row stays a toggle with its
	   chevron (review round 2). */
	html.cfc-bakery-js #cfc-bakery-checkout .cfc-bakery-checkout__summary-row {
		cursor: default;
		pointer-events: none;
	}

	html.cfc-bakery-js #cfc-bakery-checkout .cfc-bakery-checkout__summary-chevron {
		display: none;
	}

	/* ---- F13 Confirmation (B) ---- */

	/* F13 B (2158:16, "maches b of cart and checkout"): the bar at the top as on the cart and the
	   checkout — the root's padding and the body's 16 / 24 are the base rules' now. The left
	   column stacks the dark Order Confirmed card, Pickup Details and Add to calendar in their DOM
	   order; the order summary is right, sticky. */
	#cfc-bakery-confirmed > .cfc-bakery__main > .cfc-bakery__inner {
		align-items: start;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}

	#cfc-bakery-confirmed > .cfc-bakery__main > .cfc-bakery__inner > * {
		grid-column: 1;
	}

	#cfc-bakery-confirmed > .cfc-bakery__main > .cfc-bakery__inner > .cfc-bakery-order {
		grid-column: 2;
		grid-row: 1 / span 3;
		position: sticky;
		top: var(--cfc-bakery-space-50);
	}

	body.admin-bar #cfc-bakery-confirmed > .cfc-bakery__main > .cfc-bakery__inner > .cfc-bakery-order {
		top: calc(var(--cfc-bakery-space-50) + var(--cfc-bakery-admin-bar-height));
	}

	/* The add-to-calendar button hugs its label with a centred caption in both states (the menu
	   the column's width), as before #20's 375 pass. */
	#cfc-bakery-confirmed .cfc-bakery-atc {
		justify-self: stretch;
	}

	#cfc-bakery-confirmed .cfc-bakery-atc[open] > .cfc-bakery-atc__toggle {
		width: auto;
	}

	#cfc-bakery-confirmed .cfc-bakery-reminder .cfc-bakery-reminder__sub {
		justify-self: center;
		text-align: center;
	}
}

/* ------------------------------------------ product page fields (#16) -- */
/* Gallery (`pdp-gallery` 627:2236, DV-C5): the 4:3 hero and a centered row
   of two square thumbs; the slot whose photo is on the hero is outlined
   (A196). Three slots always render — an empty one is the placeholder
   frame (A197; since #20 the frames' flat neutral-200 fill, no border — the
   page is the warm surface now), a piece #15 places on the menu card's square slot too. The thumb box is the canvas
   56px = 3.5rem, the button min-height token (the one 3.5rem the front end
   carries). Token-only. */

/* `main-image` 627:2237 (#20): 343 × 260 at 375 — held as that ratio (a 4:3 photo loses
   about 1% of its height to the crop); the empty slot's placeholder fills the box. */
.cfc-bakery-gallery__hero {
	aspect-ratio: var(--cfc-bakery-ratio-pdp-hero);
	background: var(--cfc-bakery-color-paper);
	border-radius: var(--cfc-bakery-radius-lg);
	overflow: hidden;
	width: 100%;
}

.cfc-bakery-gallery__hero > .cfc-bakery-img-placeholder {
	aspect-ratio: auto;
	height: 100%;
}

.cfc-bakery-gallery__img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* `thumbs` 627:2239: 10 under the main image, the thumbs 8 apart, centred. `.cfc-bakery`
   in front: the theme's post-content `ul { margin-bottom: 0.25em }` out-ranks a bare class (#20). */
.cfc-bakery .cfc-bakery-gallery__thumbs {
	display: flex;
	gap: var(--cfc-bakery-space-40);
	justify-content: center;
	list-style: none;
	margin: var(--cfc-bakery-fine-10) 0 0;
	padding: 0;
}

.cfc-bakery-gallery__slot {
	aspect-ratio: 1;
	flex: 0 0 var(--cfc-bakery-btn-min-h-lg);
	width: var(--cfc-bakery-btn-min-h-lg);
}

.cfc-bakery-gallery__thumb {
	border-radius: var(--cfc-bakery-radius-sm);
	display: block;
	height: 100%;
	overflow: hidden;
	transition: outline-color var(--cfc-bakery-transition-base);
	outline: var(--cfc-bakery-btn-border-width) solid transparent;
	outline-offset: calc(-1 * var(--cfc-bakery-btn-border-width)); /* the 2px ring INSIDE the 56 box, as `thumb-1` 627:2240 strokes it (#20; was 2 outside) */
}

.cfc-bakery-gallery__thumb.is-selected,
.cfc-bakery-gallery__thumb:focus-visible {
	outline-color: var(--cfc-bakery-color-fresh);
}

.cfc-bakery-img-placeholder {
	background: var(--cfc-bakery-color-neutral-200);
	border: 0;
	border-radius: var(--cfc-bakery-radius-sm);
	box-sizing: border-box;
	display: block;
	height: 100%;
	width: 100%;
}

.cfc-bakery-img-placeholder--4x3 {
	aspect-ratio: 4 / 3;
	border-radius: inherit;
}

.cfc-bakery-img-placeholder--square {
	aspect-ratio: 1;
}

/* Dietary tags (`dietary-tag` 618:2111, A198): the pill form by the price
   on the product page; the text form is the menu row's (#15) — plain green
   `tag • tag`. #20: the tag is Bakery/Tag (Regular 11) on the mint inside a
   1px success-text line, 8 radius, 3 / 8 inside, tags 6 apart. */

/* `.cfc-bakery` in front: the theme's post-content `ul { margin-bottom: 0.25em }` out-ranked
   the bare class and pushed the next line 4 further than the body's gap (727:2276, #20). */
.cfc-bakery .cfc-bakery-dietary-tags--pill {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cfc-bakery-fine-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

.cfc-bakery-dietary-tags--pill .cfc-bakery-dietary-tag {
	background: var(--cfc-bakery-color-mint);
	border: var(--cfc-bakery-border-hairline) solid var(--cfc-bakery-color-success-text);
	border-radius: var(--cfc-bakery-radius-sm);
	color: var(--cfc-bakery-color-success-text);
	font-size: var(--cfc-bakery-font-size-tag);
	font-weight: 400;
	letter-spacing: var(--cfc-bakery-tracking-tag);
	line-height: var(--cfc-bakery-line-none);
	padding: calc(var(--cfc-bakery-fine-3) - var(--cfc-bakery-border-hairline)) calc(var(--cfc-bakery-space-40) - var(--cfc-bakery-border-hairline));
	text-align: center;
	text-transform: uppercase;
}

.cfc-bakery-dietary-tags--text {
	color: var(--cfc-bakery-color-fresh);
	font-size: var(--cfc-bakery-text-small);
	font-weight: 700;
}

/* Clamp utility (A201): #15 applies -2 to the card description, the
   accordion bodies take -3. The "…" is the browser's, the line count
   survives any font size. */

.cfc-bakery-clamp-2,
.cfc-bakery-clamp-3 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cfc-bakery-clamp-2 {
	-webkit-line-clamp: 2;
}

.cfc-bakery-clamp-3 {
	-webkit-line-clamp: 3;
}

/* Accordion (`accordion` 623:2153, DV-A16): a mint card with a line under
   it (#20; was white), the caps title in ink as a button, `+` affordance
   (`–` when expanded), body clamped to three lines until tapped (A200).
   Without JS the body is unclamped. */

.cfc-bakery-accordion {
	background: var(--cfc-bakery-color-mint);
	border-bottom: var(--cfc-bakery-border-hairline) solid var(--cfc-bakery-color-line);
	border-radius: var(--cfc-bakery-radius-md);
	margin-top: var(--cfc-bakery-fine-14); /* the body's 14 under the quantity row (635:2364) */
	padding: var(--cfc-bakery-fine-14) var(--cfc-bakery-space-50) calc(var(--cfc-bakery-fine-14) - var(--cfc-bakery-border-hairline)); /* 14 / 16, the bottom less the line: the frame's stroke is inside the box (112 high at three lines) */
}

/* `accordions` 635:2391: the cards 12 apart (#20). */
.cfc-bakery-accordion + .cfc-bakery-accordion {
	margin-top: var(--cfc-bakery-fine-12);
}

.cfc-bakery .cfc-bakery-accordion__title {
	font-size: var(--cfc-bakery-font-size-tag);
	line-height: normal;
	margin: 0;
}

.cfc-bakery-accordion__toggle {
	align-items: center;
	appearance: none;
	background: none;
	border: 0;
	color: var(--cfc-bakery-color-ink);
	cursor: pointer;
	display: flex;
	font-family: var(--cfc-bakery-font-body);
	font-size: var(--cfc-bakery-font-size-tag);
	font-weight: var(--cfc-bakery-weight-semibold);
	gap: var(--cfc-bakery-space-40);
	justify-content: space-between;
	letter-spacing: var(--cfc-bakery-tracking-tag);
	line-height: normal;
	margin: 0;
	padding: 0;
	text-align: left;
	text-transform: uppercase;
	width: 100%;
}

.cfc-bakery-accordion__toggle:focus-visible {
	outline: var(--cfc-bakery-btn-focus-outer-width) solid var(--cfc-bakery-color-fresh);
	outline-offset: var(--cfc-bakery-btn-focus-offset);
}

/* "+" on a card cut at three lines, "–" on an open one (José, 2026-10-14, a3238095). */
.cfc-bakery-accordion__icon::before {
	content: "+";
	font-size: var(--cfc-bakery-text-medium);
	font-weight: var(--cfc-bakery-weight-semibold);
	letter-spacing: 0;
	line-height: normal; /* the glyph's own line sets the head's height, as on the frame (623:2147: 16, line-height auto, #20) */
}

.cfc-bakery-accordion.is-expanded .cfc-bakery-accordion__icon::before {
	content: "\2013"; /* the frame's en dash */
}

/* No glyph on a card whose text fits (`is-static`, A200) nor without JS (nothing
   toggles) — hidden, not removed, so its head keeps the height of the others (#20). */
.cfc-bakery-accordion.is-static .cfc-bakery-accordion__icon,
html:not(.cfc-bakery-js) .cfc-bakery-accordion__icon {
	visibility: hidden;
}

.cfc-bakery-accordion.is-static .cfc-bakery-accordion__toggle,
html:not(.cfc-bakery-js) .cfc-bakery-accordion__toggle {
	cursor: default;
}

/* `.cfc-bakery` in front: the theme's `h2 + * { margin-top: 1em }` out-ranked the bare
   class (13 for the frame's 8 between head and body, 623:2144, #20). */
.cfc-bakery .cfc-bakery-accordion__body {
	color: var(--cfc-bakery-color-ink);
	font-size: var(--cfc-bakery-font-size-description);
	line-height: var(--cfc-bakery-line-description);
	margin-top: var(--cfc-bakery-fine-8); /* #29 unit 4 (STATUS §4 "accordion's body reads the theme's spacing"): the plugin's own 8 (A403), not the theme's spacing-40 — 8 with the theme off too. */
}

/* `.cfc-bakery` in front: the theme's paragraph size / line (16 / 1.5) out-ranked the
   body's Bakery/Description 13 / 1.45 on the paragraphs inside it (623:2148, #20). */
.cfc-bakery .cfc-bakery-accordion__body p {
	color: inherit;
	font-size: inherit;
	line-height: inherit;
	margin: 0;
}

.cfc-bakery .cfc-bakery-accordion__body p + p {
	margin-top: var(--cfc-bakery-fine-8); /* #29 unit 4: the same plugin-owned 8 as the head-to-body gap above; `.cfc-bakery` in front, or the `margin: 0` rule above (0,2,1) out-ranks this one (0,1,2) and the gap computes 0. */
}

html:not(.cfc-bakery-js) .cfc-bakery-accordion__body {
	display: block;
	-webkit-line-clamp: unset;
	overflow: visible;
}

/* The builder's Ingredients card (#20 screen 8, thread 3f5fffaf): the callout (619:2112) under
   a chosen option — its ground, edge, radius, padding and the 16 above it are `.cfc-bakery-callout`'s
   own. The title is the callout's eyebrow on a real button (the h3 holds it, no type of its own: the
   button is its only, block-level child), the "+" / "–" at its right end, out of the flow so the
   head is the eyebrow's line alone. The list is in the callout's body type, cut at two lines
   (`.cfc-bakery-clamp-2` on the body). */
.cfc-bakery .cfc-bakery-ingredients__title {
	margin: 0; /* `.cfc-bakery` in front: the theme's heading margin (`.wp-block-post-content h3`, 1em) out-ranks the plugin's bare `h3` reset; with it the eyebrow stands where the callout's does. */
}

.cfc-bakery-ingredients__toggle {
	align-items: center;
	appearance: none;
	background: none;
	border: 0;
	cursor: pointer;
	display: flex;
	font-family: var(--cfc-bakery-font-body);
	margin: 0;
	padding: 0;
	position: relative;
	text-align: left;
	width: 100%;
}

.cfc-bakery-ingredients__toggle:focus-visible {
	outline: var(--cfc-bakery-btn-focus-outer-width) solid var(--cfc-bakery-color-fresh);
	outline-offset: var(--cfc-bakery-btn-focus-offset);
}

.cfc-bakery-ingredients__icon {
	align-items: center;
	display: flex;
	inset: 0 0 0 auto;
	position: absolute;
}

/* "+" on a card cut at two lines, "–" on an open one, none on a card whose list fits
   (`is-static`) — hidden, not removed. */
.cfc-bakery-ingredients__icon::before {
	content: "+";
	font-size: var(--cfc-bakery-text-medium);
	font-weight: var(--cfc-bakery-weight-semibold);
	letter-spacing: 0;
	line-height: normal;
}

.cfc-bakery-ingredients.is-expanded .cfc-bakery-ingredients__icon::before {
	content: "\2013";
}

.cfc-bakery-ingredients.is-static .cfc-bakery-ingredients__icon {
	visibility: hidden;
}

.cfc-bakery-ingredients.is-static .cfc-bakery-ingredients__toggle {
	cursor: default;
}

/* `.cfc-bakery` in front: the theme's paragraph size / line out-rank the body's on the paragraphs inside it. */
.cfc-bakery .cfc-bakery-ingredients__body p {
	color: inherit;
	font-size: inherit;
	line-height: inherit;
	margin: 0;
}

.cfc-bakery .cfc-bakery-ingredients__body p + p {
	margin-top: var(--cfc-bakery-fine-8);
}

/* ------------------------------------------- confirmation screen (#14) -- */
/* F13 `642:2968` on Woo's order-received page. Token-only; the dropdown is
   styled against the `add-to-calendar` component's roles (surface, ink,
   hairline, radius, spacing) — pixel parity is #20's (A210). */

/* #20: at 375 the bar is the first thing and the footer the last, flush (the root's
   own 24 / 48 padding lives on in the desktop block); the body `642:2976` is padded
   16 above and 24 below (16 on the sides is the column's gutter). */
.cfc-bakery-confirmed {
	padding: 0;
}

.cfc-bakery-confirmed > .cfc-bakery__main > .cfc-bakery__inner { /* The body is the wrapper's child since #20 note 1 (the root's own children are the wrapper and the footer). */
	display: grid;
	gap: var(--cfc-bakery-space-60); /* the body's 24 between its four blocks (642:2976) */
	grid-template-columns: minmax(0, 1fr);
	padding-bottom: var(--cfc-bakery-space-60);
	padding-top: var(--cfc-bakery-space-50);
}

/* 1 · hero-status — the dark card (628:2210). #20: 24 / 20 inside, the 22
   title over the order number (Bold 11) and the sub, all in the cream, 6 apart;
   the changes block under a 1px line. */
.cfc-bakery-status {
	background: var(--cfc-bakery-color-ink);
	border-radius: var(--cfc-bakery-radius-lg); /* = var(--wp--custom--radius--lg) */
	color: var(--cfc-bakery-color-paper);
	padding: var(--cfc-bakery-space-60) var(--cfc-bakery-fine-20);
}

.cfc-bakery .cfc-bakery-status__eyebrow {
	color: var(--cfc-bakery-color-surface);
	font-size: var(--cfc-bakery-font-size-tag);
	font-weight: 700;
	letter-spacing: var(--cfc-bakery-tracking-tag);
	line-height: normal;
	margin-top: var(--cfc-bakery-fine-6);
	text-transform: uppercase;
}

.cfc-bakery .cfc-bakery-status__title {
	color: var(--cfc-bakery-color-surface);
	font-size: var(--cfc-bakery-font-size-section-title);
	line-height: var(--cfc-bakery-line-title);
	margin: 0;
}

.cfc-bakery .cfc-bakery-status__sub {
	color: var(--cfc-bakery-color-surface);
	font-size: var(--cfc-bakery-font-size-description);
	line-height: var(--cfc-bakery-line-description);
	margin-top: var(--cfc-bakery-fine-6);
}

/* The divider 728:2392 sits 12 under the text group and 12 over the changes block (the stack's gap, 728:2384). */
.cfc-bakery-status__changes {
	border-top: var(--cfc-bakery-border-hairline) solid var(--cfc-bakery-color-line);
	margin-top: var(--cfc-bakery-fine-12);
	padding-top: var(--cfc-bakery-fine-12);
}

.cfc-bakery .cfc-bakery-status__changes-title {
	color: var(--cfc-bakery-color-surface);
	font-family: var(--cfc-bakery-font-body);
	font-size: var(--cfc-bakery-font-size-description);
	font-weight: 700;
	letter-spacing: normal;
	line-height: var(--cfc-bakery-line-description);
	margin: 0 0 var(--cfc-bakery-fine-5); /* the body starts 24 under the title's top: a 19 line + 5 (728:2370 → 728:2373) */
	text-transform: none;
}

.cfc-bakery-status__changes-body {
	color: var(--cfc-bakery-color-surface);
	font-size: var(--cfc-bakery-font-size-description);
	line-height: var(--cfc-bakery-line-description);
}

.cfc-bakery .cfc-bakery-status__changes-body + .cfc-bakery-status__changes-body {
	margin-top: var(--cfc-bakery-fine-5);
}

/* The `a.` lifts the rule over the shell's `a:not(.cfc-bakery-btn)` green; the colour is the
   block's own text colour — the frame draws the number as plain text (I642:2977;728:2373, #20). */
.cfc-bakery a.cfc-bakery-status__phone-link {
	color: var(--cfc-bakery-color-surface);
	font-weight: 700;
}

/* The self-service row at the changes block's end (#24 lane A, A2; decisions 5, 7, 10 — no
   frame draws it, a placeholder in the block's own rhythm): the Cancel button (the Secondary,
   the calendar control's own) 12 under the text; a closed door's reason line 5 under it, in the
   block's text style; without JS the popup's body line and its YES 12 apart under the button. */
.cfc-bakery .cfc-bakery-selfserve,
.cfc-bakery .cfc-bakery-selfserve__nojs,
.cfc-bakery .cfc-bakery-selfserve__nojs .cfc-bakery-selfserve__form {
	margin-top: var(--cfc-bakery-fine-12);
}

.cfc-bakery .cfc-bakery-selfserve[data-cfc-door="closed"] {
	margin-top: var(--cfc-bakery-fine-5);
}

/* #24 lane B (A750): an open row holds Change (or, on an order of more than one cake, its reason
   line) then Cancel — side by side where they fit, wrapped 12 apart where they do not (375). */
.cfc-bakery .cfc-bakery-selfserve[data-cfc-door="open"] {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--cfc-bakery-fine-12);
}

.cfc-bakery .cfc-bakery-selfserve__reason,
.cfc-bakery .cfc-bakery-selfserve__note {
	color: var(--cfc-bakery-color-surface);
	font-size: var(--cfc-bakery-font-size-description);
	line-height: var(--cfc-bakery-line-description);
}

/* The cancel popup's NO and YES live in its form, in the fields slot (YES must submit; the
   partial prints only type="button" actions): the partial's own actions row is empty, and goes. */
.cfc-bakery-popup--selfserve .cfc-bakery-popup__card > .cfc-bakery-popup__actions {
	display: none;
}

/* #51 — a holiday order's Change pickup (no frame draws it, a placeholder in the cart pickup popup's
   own shape, 622:2120): the day and the store 12 apart, each the `dropdown` wrapper — the label 6 over
   the closed field (12 radius, 12 / 14 inside, the green ▼ from two gradients) — then the actions; the
   line the POST came back with sits 12 over the row, bold. */
.cfc-bakery-selfserve__pickup-form {
	display: grid;
	gap: var(--cfc-bakery-fine-12);
}

.cfc-bakery-selfserve__pickup-form .cfc-bakery-field {
	display: grid;
	gap: var(--cfc-bakery-fine-6);
	margin: 0;
}

.cfc-bakery-selfserve__pickup-form .cfc-bakery-field__label {
	color: var(--cfc-bakery-color-maroon);
	display: block;
	font-size: var(--cfc-bakery-font-size-tag);
	font-weight: 700;
	letter-spacing: var(--cfc-bakery-tracking-tag);
	line-height: normal;
	margin: 0;
	text-transform: uppercase;
}

.cfc-bakery-selfserve__pickup-form select.cfc-bakery-input {
	-webkit-appearance: none;
	appearance: none;
	background-color: var(--cfc-bakery-color-paper);
	background-image: linear-gradient(45deg, transparent 50%, var(--cfc-bakery-color-fresh) 50%), linear-gradient(135deg, var(--cfc-bakery-color-fresh) 50%, transparent 50%);
	background-position: right calc(var(--cfc-bakery-fine-14) + var(--cfc-bakery-fine-5)) center, right var(--cfc-bakery-fine-14) center;
	background-repeat: no-repeat;
	background-size: var(--cfc-bakery-fine-5) var(--cfc-bakery-fine-5);
	border: var(--cfc-bakery-border-hairline) solid var(--cfc-bakery-color-line);
	border-radius: var(--cfc-bakery-radius-md);
	color: var(--cfc-bakery-color-ink);
	display: block;
	font-family: var(--cfc-bakery-font-body);
	font-size: var(--cfc-bakery-text-medium);
	line-height: normal;
	min-height: 0;
	padding: calc(var(--cfc-bakery-fine-12) - var(--cfc-bakery-border-hairline)) calc(var(--cfc-bakery-fine-14) * 2 + var(--cfc-bakery-fine-10)) calc(var(--cfc-bakery-fine-12) - var(--cfc-bakery-border-hairline)) calc(var(--cfc-bakery-fine-14) - var(--cfc-bakery-border-hairline));
	width: 100%;
}

.cfc-bakery-selfserve__pickup-form select.cfc-bakery-input:focus-visible {
	outline: var(--cfc-bakery-btn-focus-outer-width) solid var(--cfc-bakery-color-fresh);
	outline-offset: var(--cfc-bakery-btn-focus-offset);
}

.cfc-bakery .cfc-bakery-selfserve__notice {
	font-weight: 700;
	margin: var(--cfc-bakery-fine-12) 0 0;
}

/* 2 · 3 · the paper panels (the menu owns .cfc-bakery-card). #20: the white card of
   F11 `780:2518`, F12 `782:2805` / `783:2509` / `782:2806` and F13 `784:2510` — no
   border, radius lg, 20 above and below, 16 on the sides; its children 12 apart (each
   screen's own grid). The title is the `section-head` 621:2117 title: Bakery/Section
   Title (Lovechild 22 / 1.15, Title Case as typed — #36), no margin of its own. */
.cfc-bakery-panel {
	background: var(--cfc-bakery-color-paper);
	border-radius: var(--cfc-bakery-radius-lg); /* = var(--wp--custom--radius--lg) */
	margin-top: 0; /* the screens' grids space the cards (16 on F11 / F12, 24 on F13) */
	padding: var(--cfc-bakery-fine-20) var(--cfc-bakery-space-50);
}

/* `order-card` 784:2510: the head, the lines, the totals — 12 apart. */
.cfc-bakery-order {
	display: grid;
	gap: var(--cfc-bakery-fine-12);
}

.cfc-bakery .cfc-bakery-panel__title {
	font-size: var(--cfc-bakery-font-size-section-title);
	line-height: var(--cfc-bakery-line-title);
	margin: 0;
}

/* The order-lines partial (#14 · reused by #18 / #19). #20, F13 `order-line` 784:2515:
   the lines 12 apart with no rule between them; name (Bakery/Option Label, maroon)
   and line total (Bakery/Price in the secondary green) 8 apart on one row. The frame
   draws name + price only; the build's quantity, size, option and message lines
   (DV-C13 — structure, kept) sit 3 under it in the Description role, as the cart
   row's config line does (627:2215). */
.cfc-bakery-lines {
	display: grid;
	gap: var(--cfc-bakery-fine-12);
	list-style: none;
	margin: 0;
	padding: 0;
}

.cfc-bakery-lines__item {
	display: grid;
	gap: var(--cfc-bakery-fine-3);
	grid-template-columns: minmax(0, 1fr);
}

.cfc-bakery-lines__row {
	align-items: flex-start;
	display: flex;
	gap: var(--cfc-bakery-space-40);
	justify-content: space-between;
}

.cfc-bakery-lines__name {
	color: var(--cfc-bakery-color-maroon);
	flex: 1 1 0;
	font-size: var(--cfc-bakery-font-size-option-label);
	font-weight: var(--cfc-bakery-weight-semibold);
	line-height: var(--cfc-bakery-line-label);
	min-width: 0;
}

.cfc-bakery-lines__price {
	color: var(--cfc-bakery-color-fresh);
	flex: 0 0 auto;
	font-size: var(--cfc-bakery-font-size-price);
	font-variant-numeric: tabular-nums;
	font-weight: var(--cfc-bakery-weight-semibold);
	line-height: var(--cfc-bakery-line-none);
}

.cfc-bakery-lines__qty,
.cfc-bakery-lines__size,
.cfc-bakery-lines__config,
.cfc-bakery-lines__message,
.cfc-bakery-lines__mod {
	color: var(--cfc-bakery-color-text-muted);
	font-size: var(--cfc-bakery-font-size-description);
	line-height: var(--cfc-bakery-line-description);
	margin: 0;
}

.cfc-bakery-lines__mod {
	display: flex;
	gap: var(--cfc-bakery-space-40);
}

.cfc-bakery-lines__mod-val {
	color: var(--cfc-bakery-color-ink);
	flex: 1;
}

.cfc-bakery-lines__mod-amt {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
}

.cfc-bakery-lines__mod-amt:empty {
	display: none;
}

/* The totals block (cart-totals.php — F11 640:2886 / 780:2526 / 780:2529 / 780:2523,
   F13 784:2521 / 784:2524 / 784:2525, the F12 summary's open body; #20): rows 12
   apart, straight under the lines (no rule over the block); SUBTOTAL / TAXES in
   Bakery/Summary Row (Regular 13 / 1.3, ink, caps); the 1px divider 12 over Grand
   Total; Grand Total in Bakery/Price Total (Lovechild 20 / 1.1) on both sides. */
.cfc-bakery-lines__totals {
	display: grid;
	gap: var(--cfc-bakery-fine-12);
	margin: 0;
}

.cfc-bakery-lines__total-row {
	align-items: flex-start;
	display: flex;
	gap: var(--cfc-bakery-space-40);
	justify-content: space-between;
}

.cfc-bakery-lines__total-row--grand {
	border-top: var(--cfc-bakery-border-hairline) solid var(--cfc-bakery-color-line);
	padding-top: var(--cfc-bakery-fine-12);
}

.cfc-bakery-lines__total-label,
.cfc-bakery-lines__total-amt {
	color: var(--cfc-bakery-color-ink);
	font-size: var(--cfc-bakery-font-size-summary-row);
	font-weight: 400;
	line-height: var(--cfc-bakery-line-summary);
	margin: 0;
}

.cfc-bakery-lines__total-label {
	text-transform: uppercase;
}

.cfc-bakery-lines__total-amt {
	font-variant-numeric: tabular-nums;
}

.cfc-bakery-lines__total-label--grand,
.cfc-bakery-lines__total-amt--grand {
	font-family: var(--cfc-bakery-font-display);
	font-size: var(--cfc-bakery-font-size-price-total);
	line-height: var(--cfc-bakery-line-tight);
	text-transform: none;
}

/* "Pickup Details" — `pickup-confirmation` 642:2982 (#20): the one bordered card of
   the screen — mint, a 1px line, 16 inside; its seven lines 6 apart with no rule
   between them: the title, LOCATION (the field-label eyebrow), the store
   (Bakery/Option Label), the address (Regular 14, LH auto), PICKUP DATE, the date
   (Bold 20, LH auto), the note (Regular 14, muted). The build's hours line (A209)
   is one more line in the note's role. */
.cfc-bakery-panel.cfc-bakery-pickup-info {
	background: var(--cfc-bakery-color-mint);
	border: var(--cfc-bakery-border-hairline) solid var(--cfc-bakery-color-line);
	display: grid;
	gap: var(--cfc-bakery-fine-6);
	padding: calc(var(--cfc-bakery-space-50) - var(--cfc-bakery-border-hairline)); /* 16 with the line inside */
}

.cfc-bakery-pickup-info__facts,
.cfc-bakery-pickup-info__fact,
.cfc-bakery-pickup-info__value {
	display: grid;
	gap: var(--cfc-bakery-fine-6);
	margin: 0;
}

.cfc-bakery-pickup-info__label {
	color: var(--cfc-bakery-color-maroon);
	font-size: var(--cfc-bakery-font-size-tag);
	font-weight: 700;
	letter-spacing: var(--cfc-bakery-tracking-tag);
	line-height: normal;
	text-transform: uppercase;
}

/* The date 642:2984 (the dd's own <strong>). */
.cfc-bakery-pickup-info__value > strong {
	font-size: var(--cfc-bakery-text-large);
	font-weight: 700;
	line-height: normal;
}

/* The store 785:2476 — two classes over the date's rule. */
.cfc-bakery-pickup-info__value > strong.cfc-bakery-pickup-info__store {
	font-size: var(--cfc-bakery-font-size-option-label);
	font-weight: var(--cfc-bakery-weight-semibold);
	line-height: var(--cfc-bakery-line-label);
}

.cfc-bakery-pickup-info__address {
	display: block;
	font-size: var(--cfc-bakery-text-small);
	line-height: normal;
}

.cfc-bakery-pickup-info__note,
.cfc-bakery-pickup-info__hours {
	color: var(--cfc-bakery-color-text-muted);
	font-size: var(--cfc-bakery-text-small);
	line-height: normal;
}

/* 2b · "Your details" (#32 A2, José's staging note — no frame draws it, a placeholder in the
   pickup card's own rhythm): a plain panel like "What you ordered" — the title, then each
   label (the pickup card's caps eyebrow) over its value (body text), 8 between the rows. An
   email address or a long note wraps inside the column. The title 12 over the rows, the order
   card's own gap. */
.cfc-bakery-details {
	display: grid;
	gap: var(--cfc-bakery-fine-12);
}

.cfc-bakery-details__facts {
	display: grid;
	gap: var(--cfc-bakery-space-40);
	margin: 0;
}

.cfc-bakery-details__fact {
	display: grid;
	gap: var(--cfc-bakery-fine-6);
	margin: 0;
}

.cfc-bakery-details__label {
	color: var(--cfc-bakery-color-maroon);
	font-size: var(--cfc-bakery-font-size-tag);
	font-weight: 700;
	letter-spacing: var(--cfc-bakery-tracking-tag);
	line-height: normal;
	text-transform: uppercase;
}

.cfc-bakery .cfc-bakery-details__value {
	margin: 0;
	overflow-wrap: anywhere;
}

/* The cancelled hero's phone line and a replacement's lines (#32 A2): the sub's style, 5 under
   the line above. */
.cfc-bakery .cfc-bakery-status__sub + .cfc-bakery-status__replaces,
.cfc-bakery .cfc-bakery-status__refund + .cfc-bakery-status__cancelled-phone {
	margin-top: var(--cfc-bakery-fine-5);
}

/* 4 · add-to-calendar (678:2359) — a <details>, no JS. #20: the caption 8 over the
   toggle. Closed (678:2346): the caption centred, the Secondary / Small button hugging
   its label. Open (628:2215, the state F13 draws — 642:2988): the caption left, the
   button the column's width, the menu 8 under it. */
.cfc-bakery-reminder {
	display: grid;
	gap: var(--cfc-bakery-space-40);
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	text-align: center;
}

.cfc-bakery-reminder__sub {
	color: var(--cfc-bakery-color-text-muted);
	font-size: var(--cfc-bakery-text-small);
	line-height: normal;
}

.cfc-bakery-reminder:has(.cfc-bakery-atc[open]) .cfc-bakery-reminder__sub {
	justify-self: stretch;
	text-align: left;
}

.cfc-bakery-atc {
	display: block;
}

.cfc-bakery-atc[open] {
	justify-self: stretch;
}

.cfc-bakery-atc__toggle {
	gap: var(--cfc-bakery-fine-4); /* the label, then the chevron 4 away (its stroke sits 6 inside its 24 box) */
	list-style: none; /* Secondary / Small hugging its label, centred by the block (#20; was full width) */
}

.cfc-bakery-atc[open] > .cfc-bakery-atc__toggle {
	width: 100%;
}

.cfc-bakery-atc__toggle::-webkit-details-marker {
	display: none;
}

/* The screens' shared stroked chevron (`icon/chevron-right` 170:47) in a 24 box on the 44 button, in the
   button's colour: pointing down while the menu is shut, up once open — as the checkout summary's (#20, 2026-10-20). */
.cfc-bakery-atc__chevron {
	color: inherit;
	display: inline-flex;
	flex: none;
	transform: rotate(90deg);
	transition: transform var(--cfc-bakery-transition-base);
}

.cfc-bakery-atc__chevron svg {
	height: var(--cfc-bakery-size-icon-sm);
	width: var(--cfc-bakery-size-icon-sm);
}

.cfc-bakery-atc[open] > .cfc-bakery-atc__toggle .cfc-bakery-atc__chevron {
	transform: rotate(-90deg);
}

/* `calendar-menu` 785:2770: white, a 1px line, radius md, 4 above and below the rows,
   no rule between them, no shadow; a row is 10 / 14 around Regular 16 (LH auto) in the
   ink; the pointed / focused row takes the mint (the frame's first row, 785:2771). */
.cfc-bakery-atc__menu {
	background: var(--cfc-bakery-color-paper);
	border: var(--cfc-bakery-border-hairline) solid var(--cfc-bakery-color-line);
	border-radius: var(--cfc-bakery-radius-md); /* = var(--wp--custom--radius--md) */
	list-style: none;
	margin: var(--cfc-bakery-space-40) 0 0;
	overflow: hidden;
	padding: calc(var(--cfc-bakery-fine-4) - var(--cfc-bakery-border-hairline)) 0; /* 4 with the line inside */
	text-align: left;
}

.cfc-bakery a.cfc-bakery-atc__link { /* `a.`: over the shell's green `a:not(.cfc-bakery-btn)` — the rows are ink (785:2772) */
	color: var(--cfc-bakery-color-ink);
	display: block;
	font-size: var(--cfc-bakery-text-medium);
	font-weight: 400;
	line-height: normal;
	padding: var(--cfc-bakery-fine-10) calc(var(--cfc-bakery-fine-14) - var(--cfc-bakery-border-hairline));
	text-decoration: none;
	white-space: nowrap;
}

.cfc-bakery a.cfc-bakery-atc__link:hover,
.cfc-bakery a.cfc-bakery-atc__link:focus-visible {
	background: var(--cfc-bakery-color-mint);
	color: var(--cfc-bakery-color-ink);
}

/* ------------------------------------------------- menu template (#15) -- */
/* F2 `634:2260` / F3 `634:2319`: the filter row (`filter-row` 751:6 — chips,
   the Category chip + its popover, the round search control), the grouped
   list with collapsible headers, the empty state, the landing's See All
   button. Token-only; pixel parity is #20's. Without JS (html:not(.cfc-bakery-js))
   the popover button and the search toggle never show, the native <select>
   and the Search button do, and the group headers are static. */

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

/* `filter-bar` 634:2268 (#20): 16 above, 12 below; the row's parts 8 apart. The popover
   hangs from this row (see .cfc-bakery-popover). */
.cfc-bakery-filter-row {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--cfc-bakery-space-40);
	padding: var(--cfc-bakery-space-50) 0 var(--cfc-bakery-fine-12);
	position: relative;
}

.cfc-bakery-filter-row .cfc-bakery-pills {
	flex: 1 1 auto;
	padding: 0;
}

/* `filter-row` 751:6 (#20) is ONE 32 px row — the chips left, the round search right —
   and it clips what does not fit. The real labels ("Gluten-Free", a category's name)
   are longer than the frame's samples, so with JS the chip group keeps its one line
   and scrolls sideways under the search control (no scrollbar; menu.js brings the
   selected chip into view). The 6 of padding / negative margin keeps a chip's focus
   ring from being cut by the scroll box. Without JS the select and the Search button
   need the room: the row wraps as before. */
html.cfc-bakery-js .cfc-bakery-filter-row .cfc-bakery-pills {
	flex: 1 1 0;
	flex-wrap: nowrap;
	margin: calc(-1 * var(--cfc-bakery-fine-6)) 0 calc(-1 * var(--cfc-bakery-fine-6)) calc(-1 * var(--cfc-bakery-fine-6));
	min-width: 0;
	overflow-x: auto;
	padding: var(--cfc-bakery-fine-6) 0 var(--cfc-bakery-fine-6) var(--cfc-bakery-fine-6);
	scrollbar-width: none;
}

html.cfc-bakery-js .cfc-bakery-filter-row .cfc-bakery-pills::-webkit-scrollbar {
	display: none;
}

/* `pill` 618:2112 / 618:2114 in the row: 31 high (8 + the 13 px line at auto + 8), the
   1 px line inside the 8 / 16 box as the frame strokes it (All 47, GF 48 wide). Under
   the 44 tap floor: the frame's call, logged with the stepper's (#20). */
.cfc-bakery .cfc-bakery-filter-row .cfc-bakery-pill {
	color: var(--cfc-bakery-color-ink);
	flex: none;
	line-height: normal;
	min-height: 0;
	padding: calc(var(--cfc-bakery-space-40) - var(--cfc-bakery-border-hairline)) calc(var(--cfc-bakery-space-50) - var(--cfc-bakery-border-hairline));
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

.cfc-bakery .cfc-bakery-filter-row .cfc-bakery-pill.is-selected,
.cfc-bakery .cfc-bakery-filter-row .cfc-bakery-pill[aria-pressed="true"] {
	color: var(--cfc-bakery-color-paper);
}

.cfc-bakery .cfc-bakery-filter-row .cfc-bakery-pill:focus-visible {
	outline: var(--cfc-bakery-btn-focus-outer-width) solid var(--cfc-bakery-color-fresh);
	outline-offset: var(--cfc-bakery-btn-focus-offset);
}

/* Category chip (with its dropdown chevron) + popover (the F10b popup discipline, A237). */

/* The chip is not the popover's anchor at 375 (#20): the list hangs from the filter
   row, so the chip group can scroll without clipping it. */
.cfc-bakery-filter-cat {
	position: static;
}

/* The open list is the `dropdown` menu (622:2113 — its component description names the
   menu's Category filter, #20): white on the 1px line, 12 radius, 4 above and below the
   rows, no shadow, the row's full width, 6 under the chips (the row's 12 of bottom
   padding less 6). An overlay here — the component draws it in the flow. */
.cfc-bakery-popover {
	background: var(--cfc-bakery-color-paper);
	border: var(--cfc-bakery-border-hairline) solid var(--cfc-bakery-color-line);
	border-radius: var(--cfc-bakery-radius-md); /* = var(--wp--custom--radius--md) */
	left: 0;
	list-style: none;
	margin: 0;
	overflow: hidden;
	padding: calc(var(--cfc-bakery-fine-4) - var(--cfc-bakery-border-hairline)) 0;
	position: absolute;
	right: 0;
	top: calc(100% - var(--cfc-bakery-fine-6));
	z-index: var(--cfc-bakery-z-raised); /* = var(--wp--custom--z--raised) */
}

.cfc-bakery-popover[hidden] {
	display: none;
}

/* `menu-item` 622:2114: Gill Sans Regular 16 at line-height auto in primary, 10 / 14 inside.
   `a.` and the list's class in the selectors: the shell's `a:not(.cfc-bakery-btn)` green and the
   theme's post-content underline on links inside a list item out-ranked the class alone. */
.cfc-bakery .cfc-bakery-popover a.cfc-bakery-popover__option {
	color: var(--cfc-bakery-color-ink);
	display: block;
	font-size: var(--cfc-bakery-text-medium);
	font-weight: 400;
	line-height: normal;
	padding: var(--cfc-bakery-fine-10) var(--cfc-bakery-fine-14);
	text-decoration: none;
	white-space: nowrap;
}

/* The component's one highlighted row is the mint fill — no weight or colour change
   (622:2114); here it marks the selected category and the row under the pointer / focus. */
.cfc-bakery .cfc-bakery-popover a.cfc-bakery-popover__option:hover,
.cfc-bakery .cfc-bakery-popover a.cfc-bakery-popover__option:focus-visible,
.cfc-bakery .cfc-bakery-popover a.cfc-bakery-popover__option[aria-selected="true"] {
	background: var(--cfc-bakery-color-mint);
	color: var(--cfc-bakery-color-ink);
	outline: none;
}

/* A keyboard user still needs to tell focus from selection: an inset ring on the focused row. */
.cfc-bakery .cfc-bakery-popover a.cfc-bakery-popover__option:focus-visible {
	box-shadow: inset 0 0 0 var(--cfc-bakery-btn-border-width) var(--cfc-bakery-color-fresh);
}

/* The Category chip's dropdown chevron (José 2026-10-06: the F2 pill's
   annotation wins over D14 — a chip that opens a list needs its affordance). */
.cfc-bakery .cfc-bakery-filter-cat__button {
	gap: var(--cfc-bakery-space-40);
}

.cfc-bakery-filter-cat__caret {
	flex-shrink: 0;
	transition: transform var(--cfc-bakery-transition-base);
}

.cfc-bakery-filter-cat__button[aria-expanded="true"] .cfc-bakery-filter-cat__caret {
	transform: rotate(180deg);
}

.cfc-bakery-filter-cat__select {
	width: auto;
}

html.cfc-bakery-js .cfc-bakery .cfc-bakery-filter-cat__fallback,
html.cfc-bakery-js .cfc-bakery .cfc-bakery-search__submit,
html:not(.cfc-bakery-js) .cfc-bakery .cfc-bakery-filter-cat__button,
html:not(.cfc-bakery-js) .cfc-bakery .cfc-bakery-search__toggle {
	/* `.cfc-bakery` scopes these above the filter-row pill rule's display (#15 hand-back, A243). */
	display: none;
}

/* Search control (`search-control` 749:2561, a 32 px round outlined
   magnifier). The master has no open state: with JS the field expands in
   place to the right of the button and the button becomes "clear" (A238);
   without JS the field + Search button show. */

.cfc-bakery-search {
	align-items: center;
	display: flex;
	flex: 1 1 100%;
	gap: var(--cfc-bakery-space-40);
}

.cfc-bakery-search__toggle {
	align-items: center;
	background: var(--cfc-bakery-color-paper);
	border: var(--cfc-bakery-border-hairline) solid var(--cfc-bakery-color-line);
	border-radius: var(--cfc-bakery-radius-pill); /* = var(--wp--custom--radius--pill) */
	color: var(--cfc-bakery-color-ink); /* the frame's glyph is the dark green, not the secondary (751:16, #20) */
	cursor: pointer;
	display: inline-flex;
	flex-shrink: 0;
	height: var(--cfc-bakery-size-icon); /* 32 × 32 as drawn (749:2561, #20; was the 44 button floor — logged with the stepper's) */
	justify-content: center;
	padding: 0;
	width: var(--cfc-bakery-size-icon);
}

.cfc-bakery-search__toggle:focus-visible {
	outline: var(--cfc-bakery-btn-focus-outer-width) solid var(--cfc-bakery-color-fresh);
	outline-offset: var(--cfc-bakery-btn-focus-offset);
}

/* The magnifier's ink is 13 × 12 in the 32 circle (F2 frame). The drawing fills 19 of its 24 units,
   so a 16 box draws 12.7 × 12.7 (measured, #20 review; the 14 box drew 11.1, an 18 box 14.25). */
.cfc-bakery-search__icon {
	display: block;
	height: calc(var(--cfc-bakery-fine-18) - var(--cfc-bakery-fine-2));
	width: calc(var(--cfc-bakery-fine-18) - var(--cfc-bakery-fine-2));
}

/* The open field — on no frame (the master has no open state): a pill on the line, as
   tall as the control beside it, Gill Sans Regular 16 like the frames' other fields (#20). */
.cfc-bakery-search__input {
	background: var(--cfc-bakery-color-paper);
	border: var(--cfc-bakery-border-hairline) solid var(--cfc-bakery-color-line);
	border-radius: var(--cfc-bakery-radius-pill); /* = var(--wp--custom--radius--pill) */
	color: var(--cfc-bakery-color-ink);
	flex: 1 1 auto;
	font-family: var(--cfc-bakery-font-body);
	font-size: var(--cfc-bakery-text-medium);
	line-height: normal;
	margin: 0;
	min-height: var(--cfc-bakery-size-icon);
	min-width: 0;
	padding: 0 var(--cfc-bakery-space-50);
}

.cfc-bakery-search__input:focus-visible {
	border-color: var(--cfc-bakery-color-fresh);
	outline: var(--cfc-bakery-btn-focus-outer-width) solid var(--cfc-bakery-color-fresh);
	outline-offset: var(--cfc-bakery-btn-focus-offset);
}

html.cfc-bakery-js .cfc-bakery-search {
	flex: 0 0 auto;
}

html.cfc-bakery-js .cfc-bakery-search:not(.is-open) .cfc-bakery-search__input {
	display: none;
}

html.cfc-bakery-js .cfc-bakery-search.is-open {
	flex: 1 1 100%;
}

html.cfc-bakery-js .cfc-bakery-search.is-open .cfc-bakery-search__toggle {
	background: var(--cfc-bakery-color-fresh);
	border-color: var(--cfc-bakery-color-fresh);
	color: var(--cfc-bakery-color-paper);
}

/* Grouped list: serif caps headers that collapse (A236), the banner last. */

/* `item-list` 634:2274 (#20): 24 above and below; every child — head, card, banner, the
   next head — 16 from the one before (the frame has no wider gap between groups). */
.cfc-bakery-menu__list {
	padding-bottom: var(--cfc-bakery-space-60);
	padding-top: var(--cfc-bakery-space-60);
}

/* The first group the customer SEES opens the list on its 24 — also when hidden
   groups stand before it in the markup (a category filter); every shown group after
   a shown one sits 16 under it. */
.cfc-bakery-menu-group,
.cfc-bakery-menu-group:first-child {
	margin-top: 0;
}

.cfc-bakery-menu-group:not([hidden]) ~ .cfc-bakery-menu-group:not([hidden]) {
	margin-top: var(--cfc-bakery-space-50);
}

.cfc-bakery-menu-group[hidden] {
	display: none;
}

/* `{menu-group-header}` 634:2275 (#20): Bakery/Section Title — Lovechild 22 / 1.15, no
   tracking, the group's label as typed — Title Case, never caps (#36). `.cfc-bakery` in front: the theme's post-content
   `h2 { margin-top: 1em }` out-ranks the shell's reset. */
.cfc-bakery .cfc-bakery-menu-group__title {
	font-size: var(--cfc-bakery-font-size-section-title);
	line-height: var(--cfc-bakery-line-title);
	margin: 0 0 var(--cfc-bakery-space-50);
}

.cfc-bakery .cfc-bakery-menu-group__toggle {
	align-items: center;
	background: none;
	border: 0;
	color: var(--cfc-bakery-color-ink);
	cursor: pointer;
	display: flex;
	font: inherit;
	gap: var(--cfc-bakery-space-40);
	justify-content: space-between;
	letter-spacing: 0;
	padding: 0;
	text-align: left;
	width: 100%;
}

.cfc-bakery .cfc-bakery-menu-group__toggle:focus-visible {
	outline: var(--cfc-bakery-btn-focus-outer-width) solid var(--cfc-bakery-color-fresh);
	outline-offset: var(--cfc-bakery-btn-focus-offset);
}

.cfc-bakery-menu-group__chevron {
	color: var(--cfc-bakery-color-ink); /* `collapse-chevron` 751:85 is the dark green on the frame (#20; was the secondary) */
	flex-shrink: 0;
	transition: transform var(--cfc-bakery-transition-base);
}

.cfc-bakery-menu-group__toggle[aria-expanded="false"] .cfc-bakery-menu-group__chevron {
	transform: rotate(-90deg);
}

html:not(.cfc-bakery-js) .cfc-bakery-menu-group__chevron {
	display: none;
}

html:not(.cfc-bakery-js) .cfc-bakery .cfc-bakery-menu-group__toggle {
	cursor: default;
}

.cfc-bakery-menu-group__body[hidden] {
	display: none;
}

.cfc-bakery-menu-group__banner {
	margin-top: var(--cfc-bakery-space-50);
}

.cfc-bakery-menu-group__banner .cfc-bakery-banner {
	margin: 0;
}

.cfc-bakery-menu__empty {
	padding: var(--cfc-bakery-space-60) 0;
	text-align: center;
}

.cfc-bakery-menu__empty[hidden],
.cfc-bakery-product-row[hidden],
.cfc-bakery-menu-group__banner[hidden] {
	display: none;
}

/* Landing (#15): the See All button under the category rows (`{landing-view-all-cta}`, F1 633:2271). */

.cfc-bakery .cfc-bakery-cats__all {
	margin-top: var(--cfc-bakery-fine-10); /* the list's own 10 gap (633:2251, #20) */
	width: 100%;
}

/* ---------------------------------------------------------- cart (#18) -- */
/* F11 `640:2843`: the white card (`cart-card` 780:2518) with the pickup
   line, the cart rows (`cart-row` 627:2210), the totals block, the two CTAs
   side by side (`cta-row` 781:2521), the cross-sell below. Token-only;
   the panel / lines / featured rules above do the rest. */

.cfc-bakery-cart {
	display: grid;
	gap: var(--cfc-bakery-space-50);
	grid-template-columns: minmax(0, 1fr); /* The column is the 343 gutter box, never its widest child (the card and the CTA row ran 2 past the root, #20). */
	padding-top: var(--cfc-bakery-space-50);
}

/* The cross-sell's own column sits inside the cart's: one 16 gutter, not two (F11 `640:2843`, #20). */
.cfc-bakery-cart .cfc-bakery__inner {
	padding-left: 0;
	padding-right: 0;
}

.cfc-bakery-cart[aria-busy="true"] {
	opacity: var(--cfc-bakery-disabled-opacity);
}

/* `cart-card` 780:2518 (#20): 20 / 16 inside (the panel's), every child 12 apart —
   the pickup line, the section head, the rows, SUBTOTAL, TAXES, the divider, Grand
   Total. The fragment wrappers (pickup, rows, totals) and Woo's form have no box of
   their own, so their content is the card's children and an empty one costs no gap. */
.cfc-bakery-cart__card {
	display: grid;
	gap: var(--cfc-bakery-fine-12);
	margin-top: 0;
}

.cfc-bakery-cart__card > [data-cfc-cart-pickup],
.cfc-bakery-cart__card > [data-cfc-cart-totals],
.cfc-bakery-cart__card > .cfc-bakery-cart__form,
.cfc-bakery-cart__form > [data-cfc-cart-rows] {
	display: contents;
}

/* Pickup line (decision 11; on no frame — F11 owes a Figma correction): the field
   pattern of `text-input` 622:2132 — the label eyebrow (Bold 11 caps, maroon) 6 over
   its value line (Regular 14, as the F13 address 642:2985), the text link (Bakery/Option
   Label in the secondary green, as "Learn More" 724:3245) at the line's end. The
   "needed" line (#20, A357) reads as a placeholder: the muted text. */
.cfc-bakery-cart__pickup {
	align-items: baseline;
	column-gap: var(--cfc-bakery-fine-12);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	margin: 0;
	row-gap: var(--cfc-bakery-fine-6);
}

.cfc-bakery-cart__pickup-label {
	color: var(--cfc-bakery-color-maroon);
	font-size: var(--cfc-bakery-font-size-tag);
	font-weight: 700;
	grid-column: 1 / -1;
	letter-spacing: var(--cfc-bakery-tracking-tag);
	line-height: normal;
	text-transform: uppercase;
}

.cfc-bakery-cart__pickup-when {
	color: var(--cfc-bakery-color-ink);
	font-size: var(--cfc-bakery-text-small);
	line-height: normal;
}

.cfc-bakery-cart__pickup--needed .cfc-bakery-cart__pickup-when {
	color: var(--cfc-bakery-color-text-muted);
}

/* The text links. Change / Choose (and the no-JS disclosure's summary): Bakery/Option
   Label, green. Remove: `627:2226` — Regular 13, LH auto, error-text, no underline;
   Edit (decision 9, on no frame) wears the same link in the green. Three classes and the
   element: the theme underlines every link in a content paragraph or list item
   (`.wp-block-post-content :where(p, li) a:not(.wp-element-button)`, loaded later). */
.cfc-bakery .cfc-bakery-cart a.cfc-bakery-cart__pickup-change,
.cfc-bakery .cfc-bakery-cart a.cfc-bakery-cart-row__remove,
.cfc-bakery .cfc-bakery-cart a.cfc-bakery-cart-row__edit,
.cfc-bakery-cart__change-summary {
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
	text-decoration: none;
}

.cfc-bakery-cart__pickup-change,
.cfc-bakery-cart__change-summary {
	color: var(--cfc-bakery-color-fresh);
	font-size: var(--cfc-bakery-font-size-option-label);
	font-weight: var(--cfc-bakery-weight-semibold);
	line-height: var(--cfc-bakery-line-label);
}

.cfc-bakery-cart-row__remove,
.cfc-bakery-cart-row__edit {
	font-size: var(--cfc-bakery-font-size-description);
	font-weight: 400;
	line-height: normal;
}

.cfc-bakery .cfc-bakery-cart a.cfc-bakery-cart__pickup-change:hover,
.cfc-bakery .cfc-bakery-cart a.cfc-bakery-cart__pickup-change:focus-visible,
.cfc-bakery .cfc-bakery-cart a.cfc-bakery-cart-row__remove:hover,
.cfc-bakery .cfc-bakery-cart a.cfc-bakery-cart-row__remove:focus-visible,
.cfc-bakery .cfc-bakery-cart a.cfc-bakery-cart-row__edit:hover,
.cfc-bakery .cfc-bakery-cart a.cfc-bakery-cart-row__edit:focus-visible {
	text-decoration: underline;
}

/* Section head 780:2519 — Bakery/Section Title, title only. */
.cfc-bakery .cfc-bakery-cart__title {
	margin: 0;
}

/* Rows — 12 apart like every child of the card (two classes: the theme gives a content list a foot margin). */
.cfc-bakery .cfc-bakery-cart__rows {
	display: grid;
	gap: var(--cfc-bakery-fine-12);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* `cart-row` 627:2210 (#20): thumb · text block · right column, 12 apart, 12 above
   and below, a 1px line under every row (the last one too — it is the line over
   SUBTOTAL). The QTY row is the text block's third line (3 under the config line);
   the right column (price / Remove / Edit) runs beside both, so the 96-wide stepper
   never meets the links. */
.cfc-bakery-cart-row {
	border-bottom: var(--cfc-bakery-border-hairline) solid var(--cfc-bakery-color-line);
	column-gap: var(--cfc-bakery-fine-12);
	display: grid;
	grid-template-areas:
		"thumb text right"
		"thumb qty right";
	grid-template-columns: var(--cfc-bakery-size-thumb-cart) minmax(0, 1fr) auto;
	grid-template-rows: auto 1fr;
	padding: var(--cfc-bakery-fine-12) 0;
	row-gap: var(--cfc-bakery-fine-3);
}

.cfc-bakery-cart-row__thumb {
	grid-area: thumb;
}

.cfc-bakery-cart-row__text {
	grid-area: text;
}

.cfc-bakery-cart-row__qty {
	grid-area: qty;
}

.cfc-bakery-cart-row__right {
	grid-area: right;
}

/* The row's stepper is the one 96 × 28 stepper (#20 retired the compact overrides that stood here). */

/* Thumb 627:2211: 64 × 64 on the warm surface, radius sm. */
.cfc-bakery-cart-row__thumb {
	align-self: start;
	aspect-ratio: 1;
	background: var(--cfc-bakery-color-warm);
	border-radius: var(--cfc-bakery-radius-sm); /* = var(--wp--custom--radius--sm) */
	display: block;
	overflow: hidden;
	width: var(--cfc-bakery-size-thumb-cart);
}

.cfc-bakery-cart-row__thumb .cfc-bakery-img-placeholder {
	background: transparent; /* the thumb's own warm fill shows (the frame's placeholder, 627:2211) */
}

.cfc-bakery-cart-row__img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* Text block 627:2213: its lines 3 apart. */
.cfc-bakery-cart-row__text {
	align-content: start;
	display: grid;
	gap: var(--cfc-bakery-fine-3);
	min-width: 0;
}

/* {cart-item-name} 627:2214 — Bakery/Option Label in the maroon; wraps. */
.cfc-bakery-cart-row__name {
	color: var(--cfc-bakery-color-maroon);
	font-size: var(--cfc-bakery-font-size-option-label);
	font-weight: var(--cfc-bakery-weight-semibold);
	line-height: var(--cfc-bakery-line-label);
}

/* {cart-item-config} 627:2215: Regular 13 / 1.45, one line, CSS-clipped (A120). */
.cfc-bakery-cart-row__config {
	color: var(--cfc-bakery-color-text-muted);
	font-size: var(--cfc-bakery-font-size-description);
	line-height: var(--cfc-bakery-line-description);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cfc-bakery-cart-row__stale {
	color: var(--cfc-bakery-color-error-text);
	font-size: var(--cfc-bakery-font-size-description);
	font-weight: 700;
	line-height: var(--cfc-bakery-line-description);
}

/* qty-row 627:2216: QTY (SemiBold 14, LH auto, 2% tracking, muted) 8 from the stepper. */
.cfc-bakery-cart-row__qty {
	align-items: center;
	align-self: start;
	display: flex;
	gap: var(--cfc-bakery-space-40);
}

.cfc-bakery-cart-row__qty-label {
	color: var(--cfc-bakery-color-text-muted);
	font-size: var(--cfc-bakery-text-small);
	font-weight: var(--cfc-bakery-weight-semibold);
	letter-spacing: var(--cfc-bakery-tracking-tight);
	line-height: normal;
	text-transform: uppercase;
}

/* {qty-max-note} in the cart's QTY row (#20, A406; no frame draws it). With a largest quantity set the
   template prints this modifier and puts QTY and the stepper in an inner line: the row becomes a column
   — that line, then the note 6 under it — and the line repeats the base row's own (centred, 8 apart, no
   wrap), so QTY and the stepper sit exactly where they do without a limit, at any width, note or no
   note. Nothing here wraps: letting the row wrap dropped the stepper under QTY at 320 wide. After the
   base rule above: the same weight, so the order decides. */
.cfc-bakery-cart-row__qty--note {
	align-items: flex-start;
	flex-direction: column;
	gap: var(--cfc-bakery-fine-6);
}

.cfc-bakery-cart-row__qty-line {
	align-items: center;
	display: flex;
	gap: var(--cfc-bakery-space-40);
}

/* Right column 627:2224: the price over Remove, 6 apart, right aligned. */
.cfc-bakery-cart-row__right {
	align-items: flex-end;
	display: flex;
	flex-direction: column;
	gap: var(--cfc-bakery-fine-6);
	text-align: right;
}

/* {cart-item-price} 627:2225 — Bakery/Price. */
.cfc-bakery-cart-row__price {
	color: var(--cfc-bakery-color-success-text);
	font-size: var(--cfc-bakery-font-size-price);
	font-variant-numeric: tabular-nums;
	font-weight: var(--cfc-bakery-weight-semibold);
	line-height: var(--cfc-bakery-line-none);
}

/* #49: a holiday protein's price per unit under its line price — "$29.99 lb", no slash (U35; no frame draws it):
   the sub line's muted Regular 13, on one line. */
.cfc-bakery-cart-row__unit-price {
	color: var(--cfc-bakery-color-text-muted);
	font-size: var(--cfc-bakery-font-size-description);
	font-variant-numeric: tabular-nums;
	line-height: var(--cfc-bakery-line-description);
	white-space: nowrap;
}

/* Three classes: the shell's `a:not(.cfc-bakery-btn)` green out-ranks one. */
.cfc-bakery a.cfc-bakery-cart-row__remove {
	color: var(--cfc-bakery-color-error-text);
}

.cfc-bakery-cart__empty {
	color: var(--cfc-bakery-color-text-muted);
	margin: 0;
}

.cfc-bakery-cart__update {
	margin: var(--cfc-bakery-space-40) 0 0;
}

/* The totals block (SUBTOTAL · TAXES · divider · Grand Total, 640:2886 / 780:2526 /
   780:2529 / 780:2523) is the shared partial's — see "the totals block" above. */

/* CTA row: two EQUAL buttons side by side (D16), 12 apart (`cta-row` 781:2521, #20) —
   minmax(0, …) so the longer label cannot widen its half. */
.cfc-bakery-cart__ctas {
	display: grid;
	gap: var(--cfc-bakery-fine-12);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.cfc-bakery-cart__ctas--empty {
	grid-template-columns: minmax(0, 1fr);
}

/* The cross-sell `featured-module` 728:2825 (#20): the body's 24 foot + the module's
   24 head sit between the CTA row and "Add to Your Order" (the column's 16 gap is
   part of it); the two compact cards are 12 apart here (`featured-grid` 781:2530 —
   the landing's are 13). */
.cfc-bakery-cart .cfc-bakery-featured--cart {
	padding-top: calc(2 * var(--cfc-bakery-space-60) - var(--cfc-bakery-space-50));
}

/* #52 — the holiday cart's second carousel ("Add Pie") sits the first's 24 foot under it (the desktop block repeats it over its own head padding). */
.cfc-bakery-cart .cfc-bakery-featured--holiday + .cfc-bakery-featured--holiday {
	padding-top: 0;
}

.cfc-bakery-cart .cfc-bakery-featured--cart .cfc-bakery-featured__grid {
	align-items: stretch; /* Both cards the row's height (`featured-grid` 781:2530 stretches them, #20 review). */
	gap: var(--cfc-bakery-fine-12);
}

/* The Change disclosure (no-JS) — the same form rides inside the popup with JS. */
.cfc-bakery-cart__change-form {
	display: grid;
	gap: var(--cfc-bakery-space-40);
	margin-top: var(--cfc-bakery-space-40);
}

.cfc-bakery-cart__change-actions {
	margin: 0;
}

/* The form's fields: the `dropdown` wrapper — the label 6 over the field (622:2120, #20). */
.cfc-bakery-cart__change-form .cfc-bakery-field {
	display: grid;
	gap: var(--cfc-bakery-fine-6);
	margin: 0;
}

/* cart.js hides the native date field once the calendar mounts: the grid above must not un-hide it (#20 screen pass). */
.cfc-bakery-cart__change-form .cfc-bakery-field[hidden] {
	display: none;
}

.cfc-bakery-cart__change-form .cfc-bakery-field .cfc-bakery-field__label {
	color: var(--cfc-bakery-color-maroon); /* the dropdown label's default colour (622:2104); the type label's ink is the extras card's override */
}

/* UPDATE PICKUP: full width, stacked 16 over KEEP MY PICKUP like the popup's own actions (`cancel-popup` 739:2269, #20). */
.cfc-bakery-cart__change-actions .cfc-bakery-btn {
	width: 100%;
}

.cfc-bakery-popup__fields .cfc-bakery-cart__change-actions {
	margin-top: var(--cfc-bakery-space-40); /* + the form's 8 gap = the card's 16 */
}

.cfc-bakery-popup__fields:empty {
	display: none;
}

/* The calendar leads the form (the date first, then the store — step 1's order, José, screen 11,
   thread 8f941f58): flush under the body's 16, and the store field 16 under it, the popup card's
   own rhythm (`cancel-popup` 739:2269): the form's 8 + 8. */
.cfc-bakery-popup__fields .cfc-bakery-cart__change-host .cfc-bakery-cal {
	margin-bottom: var(--cfc-bakery-space-40);
	margin-top: 0;
}

/* The pickup popup's two wordings (partials/popup.php `alt`, cart.php): the change of a saved
   pickup shows; while the cart's pickup line asks for a first choice (the line every in-place
   change re-renders), the first-choice title, body and button show and Keep goes — the scrim
   and Escape close it (José, screen 11, thread 8f941f58). */
.cfc-bakery-popup__wording--alt {
	display: none;
}

.cfc-bakery-cart:has(.cfc-bakery-cart__pickup--needed) .cfc-bakery-popup__wording,
.cfc-bakery-cart:has(.cfc-bakery-cart__pickup--needed) .cfc-bakery-popup__actions {
	display: none;
}

.cfc-bakery-cart:has(.cfc-bakery-cart__pickup--needed) .cfc-bakery-popup__wording--alt {
	display: inline;
}

.cfc-bakery-popup__fields .cfc-bakery-cart__change-form {
	margin-top: 0; /* The popup card's own 16 gap (#20). */
	text-align: left;
}

/* The builder's locked pickup step (decision 10): the controls greyed and inert, and on top of
   them, shown with no tap (José, screen 10, thread 0f488550; 2026-10-19), the card — a popup's
   card (the popup card's ground, radius, shadow, padding and 16 gap): the cart's pickup in bold,
   the popup's body line, then Update full width. The greyed step and the card share one grid
   cell, so the card lies over the step; it is sticky in that cell — 16 under the section's top,
   16 under the screen's top while the step scrolls beneath it, carried off with the section's
   end. */
.cfc-bakery-pickup-lock {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.cfc-bakery-pickup-lock__inner,
.cfc-bakery-pickup-lock__card {
	grid-area: 1 / 1;
}

.cfc-bakery-pickup-lock__inner {
	opacity: var(--cfc-bakery-disabled-opacity);
}

.cfc-bakery-pickup-lock__card {
	align-self: start;
	background: var(--cfc-bakery-color-paper);
	border-radius: var(--cfc-bakery-radius-lg); /* = var(--wp--custom--radius--lg) */
	box-shadow: var(--cfc-bakery-shadow-float); /* = var(--wp--custom--shadow--float) */
	color: var(--cfc-bakery-color-ink);
	display: flex;
	flex-direction: column;
	gap: var(--cfc-bakery-space-50);
	margin-top: var(--cfc-bakery-space-50);
	padding: var(--cfc-bakery-space-60);
	position: sticky;
	top: var(--cfc-bakery-space-50);
}

/* #29 unit 6: the admin bar's twin (the why at the item page's gallery, in the desktop block).
   From 601 up the bar is fixed and the card stands 16 under it. At 600 and under core makes the
   bar scroll with the page and zeroes its own sticky offsets; this twin does not, so once the
   bar has scrolled away the card stands the bar's 46 lower than 16 — a gap, never a cover;
   accepted (staff only, on a phone). */
body.admin-bar .cfc-bakery-pickup-lock__card {
	top: calc(var(--cfc-bakery-space-50) + var(--cfc-bakery-admin-bar-height));
}

.cfc-bakery-pickup-lock__current {
	color: var(--cfc-bakery-color-ink);
	font-size: var(--cfc-bakery-font-size-description);
	font-weight: 700;
	line-height: var(--cfc-bakery-line-description);
}

.cfc-bakery-pickup-lock__card .cfc-bakery-btn {
	width: 100%;
}

/* ------------------------------------------------ review step (#32 A1) -- */
/* A change's review step (call 14 — on no frame): the cart's column and rhythm. The white card
   holds its children 12 apart (the cart card's), the CTA row is the cart's, 16 under it. The
   item's name is the cart row's (Bakery/Option Label, maroon). Each changed field: its label as
   the pickup line's eyebrow (Bold 11 caps, maroon) 6 over its line (Regular 14 — the old value
   muted, the arrow muted, the new value ink and semibold). The money block is the callout — the
   one thing a customer must not miss — its text at the line's 14, not the description's 13. The
   "which order" line is muted fine print; its link is the cart's green text link. */
.cfc-bakery-change-review {
	display: grid;
	gap: var(--cfc-bakery-space-50);
	grid-template-columns: minmax(0, 1fr);
	padding-top: var(--cfc-bakery-space-50);
}

.cfc-bakery-change-review__card {
	display: grid;
	gap: var(--cfc-bakery-fine-12);
}

.cfc-bakery-change-review__card > .cfc-bakery-change-review__totals {
	display: contents;
}

.cfc-bakery .cfc-bakery-change-review__product {
	color: var(--cfc-bakery-color-maroon);
	font-size: var(--cfc-bakery-font-size-option-label);
	font-weight: var(--cfc-bakery-weight-semibold);
	line-height: var(--cfc-bakery-line-label);
	margin: 0;
}

.cfc-bakery-change-review__changes {
	display: grid;
	gap: var(--cfc-bakery-fine-12);
	margin: 0;
}

.cfc-bakery-change-review__change {
	display: grid;
	gap: var(--cfc-bakery-fine-6);
}

.cfc-bakery-change-review__label {
	color: var(--cfc-bakery-color-maroon);
	font-size: var(--cfc-bakery-font-size-tag);
	font-weight: 700;
	letter-spacing: var(--cfc-bakery-tracking-tag);
	line-height: normal;
	text-transform: uppercase;
}

.cfc-bakery-change-review__values {
	color: var(--cfc-bakery-color-ink);
	font-size: var(--cfc-bakery-text-small);
	line-height: var(--cfc-bakery-line-description);
	margin: 0;
}

.cfc-bakery-change-review__arrow {
	color: var(--cfc-bakery-color-text-muted); /* The old value stays ink (it is content, AA); the weights carry was → now (the design pass, A820). */
}

.cfc-bakery-change-review__now {
	font-weight: var(--cfc-bakery-weight-semibold);
}

.cfc-bakery .cfc-bakery-change-review__note,
.cfc-bakery .cfc-bakery-change-review__changing {
	color: var(--cfc-bakery-color-text-muted);
	font-size: var(--cfc-bakery-font-size-description);
	line-height: var(--cfc-bakery-line-description);
	margin: 0;
}

.cfc-bakery-change-review .cfc-bakery-change-review__money {
	margin-top: 0;
}

/* The list's foot: a hairline 12 under the last change, as the cart's rows sit over SUBTOTAL (the design pass, A820). */
.cfc-bakery-change-review__changes {
	border-bottom: var(--cfc-bakery-border-hairline) solid var(--cfc-bakery-color-line);
	padding-bottom: var(--cfc-bakery-fine-12);
}

/* The CTA row wraps instead of clipping: the two buttons side by side while both fit, each on its own full row when
   they do not ("CONTINUE TO PAYMENT" clipped its half at 375 — the design pass, A820; the cart panel's 782 rule). */
.cfc-bakery-change-review .cfc-bakery-change-review__ctas {
	display: flex;
	flex-wrap: wrap;
}

.cfc-bakery-change-review .cfc-bakery-change-review__ctas > .cfc-bakery-btn {
	flex: 1 1 auto;
}

.cfc-bakery-change-review__money .cfc-bakery-callout__body {
	font-size: var(--cfc-bakery-text-small);
	margin-top: 0;
}

/* The amounts stand out of the money sentence: semibold, nothing else (the design pass's SHOULD FIX, José 2026-10-25, A908). */
.cfc-bakery-change-review__money .cfc-bakery-change-review__amount {
	font-weight: var(--cfc-bakery-weight-semibold);
}

/* Three classes and the element, as the cart's text links: the theme underlines every link in a content paragraph. */
.cfc-bakery .cfc-bakery-change-review a.cfc-bakery-change-review__original {
	color: var(--cfc-bakery-color-fresh);
	font-weight: var(--cfc-bakery-weight-semibold);
	text-decoration: none;
}

.cfc-bakery .cfc-bakery-change-review a.cfc-bakery-change-review__original:hover,
.cfc-bakery .cfc-bakery-change-review a.cfc-bakery-change-review__original:focus-visible {
	text-decoration: underline;
}

.cfc-bakery .cfc-bakery-change-review a.cfc-bakery-change-review__original:focus-visible {
	outline: var(--cfc-bakery-btn-focus-outer-width) solid var(--cfc-bakery-color-fresh);
	outline-offset: var(--cfc-bakery-btn-focus-offset);
}

/* ------------------------------------------------------ checkout (#19) -- */
/* F12 `641:2902` on Woo's classic checkout: the header bar (the shell's
   rules above), the collapsible summary (`order-summary` 782:2509), the
   express block (627:2227 — the gateway's own black lockups, D2, drawn by
   its iframe: nothing here), three white cards (782:2805 / 783:2509 /
   782:2806) with the `text-input` anatomy on Woo's `.form-row` markup
   (maroon caps label, white field, field radius — DV-A3 / DV-C12), the
   `pill` radios, the `dropdown` button over the shared picker, PLACE ORDER
   as the Primary button. WooPayments reads the card element's appearance
   from the COMPUTED styles of `#billing_first_name`, `.form-row label`,
   `#place_order` and the payment box backgrounds — so these rules are the
   gateway's styling API too. Token-only. */

/* `body` 641:2910 (#20): 16 above, 24 below, its blocks 16 apart. */
.cfc-bakery-checkout__body {
	display: grid;
	gap: var(--cfc-bakery-space-50);
	grid-template-columns: minmax(0, 1fr);
	padding-bottom: var(--cfc-bakery-space-60);
	padding-top: var(--cfc-bakery-space-50);
}

/* The notices slot holds Woo's empty wrapper until there is something to say: no box,
   so it costs the body no gap (the summary starts 16 under the bar, 782:2509). */
.cfc-bakery-checkout__body > .cfc-bakery-notices:not(:has(> :not(.woocommerce-notices-wrapper:empty))) {
	display: none;
}

.cfc-bakery-checkout__form {
	display: grid;
	gap: var(--cfc-bakery-space-50);
}

/* The three cards `details-card` 782:2805 / `pickup-card` 783:2509 / `payment-card`
   782:2806 (#20): the panel (white, radius lg, 20 / 16) with its children 12 apart —
   20 apart in Payment Method. Woo's clearfix pseudo-elements on the billing wrapper
   would each take a row of the grid (and its gap): off. */
.cfc-bakery-checkout__card {
	display: grid;
	gap: var(--cfc-bakery-fine-12);
	grid-template-columns: minmax(0, 1fr);
	margin-top: 0;
}

.cfc-bakery-checkout .cfc-bakery-checkout__form.woocommerce-checkout .cfc-bakery-checkout__card::before,
.cfc-bakery-checkout .cfc-bakery-checkout__form.woocommerce-checkout .cfc-bakery-checkout__card::after,
.cfc-bakery-checkout .cfc-bakery-checkout__form.woocommerce-checkout .cfc-bakery-checkout__place-order::before,
.cfc-bakery-checkout .cfc-bakery-checkout__form.woocommerce-checkout .cfc-bakery-checkout__place-order::after {
	content: none;
	display: none;
}

.cfc-bakery-checkout__payment {
	gap: var(--cfc-bakery-fine-20);
}

/* The head is the panel's title (Bakery/Section Title — `section-head` 641:2920 /
   641:2936 / 641:2959). */
.cfc-bakery .cfc-bakery-checkout__card-title {
	margin: 0;
}

/* The head's description (641:2936 only — Customer Details and Payment Method have
   none): Bakery/Description, 6 under the title (the card's 12 less 6). `.cfc-bakery p.`
   over the shell's `p { margin: 0 }`. */
.cfc-bakery p.cfc-bakery-checkout__card-note {
	color: var(--cfc-bakery-color-text-muted);
	font-size: var(--cfc-bakery-font-size-description);
	line-height: var(--cfc-bakery-line-description);
	margin: calc(var(--cfc-bakery-fine-6) - var(--cfc-bakery-fine-12)) 0 0;
}

/* The summary — a native <details>, Woo's fragment element */
.cfc-bakery-checkout__summary {
	background: var(--cfc-bakery-color-paper);
	border-radius: var(--cfc-bakery-radius-lg); /* = var(--wp--custom--radius--lg) */
	padding: var(--cfc-bakery-space-50);
}

.cfc-bakery-checkout__summary-row {
	align-items: center;
	cursor: pointer;
	display: flex;
	gap: var(--cfc-bakery-space-40);
	list-style: none;
}

.cfc-bakery-checkout__summary-row::-webkit-details-marker {
	display: none;
}

.cfc-bakery-checkout__summary-row:focus-visible {
	outline: var(--cfc-bakery-btn-focus-outer-width) solid var(--cfc-bakery-color-fresh);
	outline-offset: var(--cfc-bakery-btn-focus-offset);
}

/* {checkout-summary-line} 782:2510 — Bakery/Option Label. */
.cfc-bakery-checkout__summary-line {
	flex: 1 1 0;
	font-size: var(--cfc-bakery-font-size-option-label);
	font-weight: var(--cfc-bakery-weight-semibold);
	line-height: var(--cfc-bakery-line-label);
	min-width: 0;
}

/* {checkout-summary-total} 782:2511 — Bakery/Price Total. */
.cfc-bakery-checkout__summary-total {
	flex: none;
	font-family: var(--cfc-bakery-font-display);
	font-size: var(--cfc-bakery-font-size-price-total);
	font-variant-numeric: tabular-nums;
	line-height: var(--cfc-bakery-line-tight);
}

/* `icon/chevron-right` 806:2769 in its 32 box (the row is 32 high → the 64 card):
   drawn pointing DOWN while collapsed (the frame), up once open. */
.cfc-bakery-checkout__summary-chevron {
	color: var(--cfc-bakery-color-ink);
	display: inline-flex;
	flex: none;
	transform: rotate(90deg);
	transition: transform var(--cfc-bakery-transition-base);
}

.cfc-bakery-checkout__summary-chevron svg {
	height: var(--cfc-bakery-size-icon);
	width: var(--cfc-bakery-size-icon);
}

.cfc-bakery-checkout__summary[open] .cfc-bakery-checkout__summary-chevron {
	transform: rotate(-90deg);
}

/* The open body (on no frame — annotation 782:2509: "full line items + Taxes + bold
   Grand Total, same rows as the cart card"): under a 1px line, the card's 12 rhythm. */
/* The open summary mirrors the cart card's rows, whose price is success-text (`627:2225`);
   the confirmation's order card shares the class and keeps `secondary` (784:2517) (#20 review). */
.cfc-bakery-checkout .cfc-bakery-checkout__summary .cfc-bakery-lines__price {
	color: var(--cfc-bakery-color-success-text);
}

.cfc-bakery-checkout__summary-body {
	border-top: var(--cfc-bakery-border-hairline) solid var(--cfc-bakery-color-line);
	display: grid;
	gap: var(--cfc-bakery-fine-12);
	grid-template-columns: minmax(0, 1fr);
	margin-top: var(--cfc-bakery-fine-12);
	padding-top: var(--cfc-bakery-fine-12);
}

/* Express pay — inside the Payment Method card, above the card element (#13
   decision 7, F12 782:2806): the wallet buttons are the gateway's iframe;
   {checkout-or} follows their presence (checkout.js); the gateway's own
   "— OR —" never shows. The block's gap is the card's rhythm (buttons → OR row). */
.cfc-bakery-checkout__express {
	display: grid;
	gap: var(--cfc-bakery-fine-20); /* `express-pay` 641:2911 → `or-row` 1749:2988: the card's 20 */
	grid-template-columns: minmax(0, 1fr);
	min-height: 0; /* A length to glide to: `auto` does not transition. */
	transition: min-height var(--cfc-bakery-transition-base);
}

/* The wallet's place, kept from the first paint (#20, thread bb2cff13; A344): the slot is printed
   `--waiting`, so until checkout.js knows, WooPayments' wrapper is held at the button's height and
   the OR row keeps its box unseen — a wallet that paints moves nothing under it. checkout.js takes
   the class away when the wallet shows, or after its wait (CFC_BAKERY_WALLET_WAIT) when none did,
   and at once when the gateway printed no wallet element; the place then glides shut (the slot's
   min-height pinned and let go, the gateways' gap with it). Only the wrapper is held: with no
   wrapper printed, nothing (never the OR row) takes the place. */
.cfc-bakery-checkout__express--waiting > .wcpay-express-checkout-wrapper {
	--cfc-bakery-express-wallet: var(--cfc-bakery-btn-min-h-md); /* The wallet button's height: WooPayments' default, 48 (the medium button's 3rem). */
	min-height: var(--cfc-bakery-express-wallet);
}

.cfc-bakery-checkout__express--waiting > [data-cfc-checkout-or][hidden] {
	display: flex;
	visibility: hidden;
}

/* WooPayments puts 4px over its ready wallet element (`express-checkout.css`): the button
   stood 24 under the Payment Method head for the frame's 20. One class more than the
   gateway's rule, so load order does not matter (#20 review). */
.cfc-bakery-checkout .cfc-bakery-checkout__express .wcpay-express-checkout-wrapper #wcpay-express-checkout-element.is-ready:first-child { /* token-exception: ID selector, not a color */
	margin-top: 0;
}

/* No wallet (the divider hidden — server-side without JS, by checkout.js
   with it): the block is zero-height but still a row of the card's grid, so
   the gateways box takes back the second gap. A row with a wallet keeps both, and so does
   the slot still waiting (its unseen OR row holds the place). */
.cfc-bakery-checkout__express:not(.cfc-bakery-checkout__express--waiting):has(> [data-cfc-checkout-or][hidden]) + .cfc-bakery-checkout__gateways {
	margin-top: calc(-1 * var(--cfc-bakery-fine-20));
}

/* …and that gap glides with the wallet's place when it closes. */
.cfc-bakery-checkout__gateways {
	transition: margin-top var(--cfc-bakery-transition-base);
}

/* A visitor who asks for less motion: checkout.js puts `--reduced-motion` on the slot and the
   place lets go at once — no glide of the slot nor of the gateways' gap. */
.cfc-bakery-checkout__express--reduced-motion,
.cfc-bakery-checkout__express--reduced-motion + .cfc-bakery-checkout__gateways {
	transition: none;
}

.cfc-bakery-checkout #wcpay-express-checkout-button-separator { /* token-exception: ID selector, not a color */
	display: none !important;
}

/* `or-row` 1749:2988: line · OR PAY WITH CARD (Bold 14, LH auto, 4% tracking, muted) · line, 10 apart. */
.cfc-bakery-checkout__or {
	align-items: center;
	color: var(--cfc-bakery-color-text-muted);
	display: flex;
	font-size: var(--cfc-bakery-text-small);
	font-weight: 700;
	gap: var(--cfc-bakery-fine-10);
	letter-spacing: var(--cfc-bakery-tracking-caps);
	line-height: normal;
	margin: 0;
	text-transform: uppercase;
	white-space: nowrap;
}

.cfc-bakery-checkout__or::before,
.cfc-bakery-checkout__or::after {
	border-top: var(--cfc-bakery-border-hairline) solid var(--cfc-bakery-color-line);
	content: "";
	flex: 1;
}

.cfc-bakery-checkout__or[hidden] {
	display: none;
}

/* Fields — Woo's .form-row markup and the plugin's own, one anatomy */
.cfc-bakery-checkout__details {
	display: grid;
	gap: var(--cfc-bakery-space-50);
	grid-template-columns: minmax(0, 1fr);
}

/* The inputs of a card: 12 apart (782:2805 / `Frame 289` 1749:2987). */
.cfc-bakery-checkout__fields {
	display: grid;
	gap: var(--cfc-bakery-fine-12);
	grid-template-columns: minmax(0, 1fr);
}

/* BILLING ZIP CODE is the last of the card fields (`Frame 289` 1749:2987 — 12 apart, 641:2980 under
   the card element), not a block of the Payment Method card (20 apart): it gives 8 back. */
.cfc-bakery-checkout__payment > .cfc-bakery-checkout__zip {
	margin-top: calc(var(--cfc-bakery-fine-12) - var(--cfc-bakery-fine-20));
}

/* A row that holds a hidden input only (the country under BILLING ZIP CODE) has no box: no row, no gap. */
.cfc-bakery-checkout .cfc-bakery-checkout__form.woocommerce-checkout .cfc-bakery-checkout__fields > .form-row:has(input[type="hidden"]):not(:has(label, .input-text, select, textarea)) {
	display: none;
}

/* Markup with no visible box must not take a row of these grids (each row
   costs a gap): Woo's order-attribution element (hidden inputs, printed in
   Customer Details), a clearing div other plugins print in a card, and the
   order group while it holds hidden fields only (form-shipping.php drops
   Woo's wrapper class then). Their inputs still post with the form. */
.cfc-bakery-checkout wc-order-attribution-inputs,
.cfc-bakery-checkout__additional:not(.woocommerce-additional-fields),
.cfc-bakery-checkout__additional:not(.woocommerce-additional-fields) > .woocommerce-additional-fields__field-wrapper {
	display: contents;
}

.cfc-bakery-checkout__card > .clear:empty {
	display: none;
}

/* Woo 11's own form rules — `.woocommerce form .form-row …` at (0,3,1), its :focus (0,4,1),
   its invalid / validated rows (0,4,2) — out-rank a three-class selector: the typed text
   drew black, the border and radius Woo's, the focus ring currentColor (browser check
   2026-10-09, A304). The form's two classes in every rule below keep the fields on the
   plugin's tokens. */
.cfc-bakery-checkout .cfc-bakery-checkout__form.woocommerce-checkout .form-row {
	float: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

.cfc-bakery-checkout .cfc-bakery-checkout__form.woocommerce-checkout .form-row label,
.cfc-bakery-checkout .cfc-bakery-checkout__form .cfc-bakery-checkout__label { /* the form's class too: Woo's block-theme sheet gives every `.woocommerce-page label` a 0.7em foot */
	color: var(--cfc-bakery-color-maroon);
	display: block;
	font-size: var(--cfc-bakery-font-size-tag); /* the `text-input` label: Bold 11, 8% tracking, 6 over the field (#20) */
	font-weight: 700;
	letter-spacing: var(--cfc-bakery-tracking-tag);
	line-height: normal;
	margin: 0 0 var(--cfc-bakery-fine-6);
	padding: 0;
	text-transform: uppercase;
}

.cfc-bakery-checkout .cfc-bakery-checkout__form.woocommerce-checkout .form-row label .required {
	color: inherit;
	text-decoration: none;
}

/* A checkbox line in the form — the Mailchimp newsletter opt-in rides Woo's after-billing
   hook (label.woocommerce-form__label-for-checkbox wrapping its box); Woo's own checkbox
   fields carry label.checkbox. A quiet consent sentence beside its box, in the shell's body
   rhythm — not a field label (José's browser check 2026-10-09, A307). */
.cfc-bakery-checkout .cfc-bakery-checkout__form.woocommerce-checkout .form-row label.woocommerce-form__label-for-checkbox,
.cfc-bakery-checkout .cfc-bakery-checkout__form.woocommerce-checkout .form-row label.checkbox {
	align-items: flex-start;
	color: var(--cfc-bakery-color-ink);
	display: flex;
	font-size: var(--cfc-bakery-text-small);
	font-weight: 400;
	gap: var(--cfc-bakery-space-40);
	letter-spacing: normal;
	line-height: var(--cfc-bakery-line-body); /* The shell's body line, not the label's. */
	margin: var(--cfc-bakery-space-40) 0 0;
	text-transform: none;
}

.cfc-bakery-checkout .cfc-bakery-checkout__form.woocommerce-checkout .form-row label.woocommerce-form__label-for-checkbox .input-checkbox,
.cfc-bakery-checkout .cfc-bakery-checkout__form.woocommerce-checkout .form-row label.checkbox .input-checkbox {
	accent-color: var(--cfc-bakery-color-fresh);
	flex: none;
	height: var(--cfc-bakery-space-50);
	margin: calc((var(--cfc-bakery-line-body) * var(--cfc-bakery-text-small) - var(--cfc-bakery-space-50)) / 2) 0 0; /* Centred on the first line of the sentence (the shell's body line-height). */
	width: var(--cfc-bakery-space-50);
}

.cfc-bakery-checkout .cfc-bakery-checkout__form.woocommerce-checkout .form-row .woocommerce-input-wrapper {
	display: block;
}

.cfc-bakery-checkout .cfc-bakery-checkout__form.woocommerce-checkout .form-row .input-text,
.cfc-bakery-checkout .cfc-bakery-checkout__form.woocommerce-checkout .form-row select, /* #26: a membership checkout's country / state selects (Woo's own fields), the same field. */
.cfc-bakery-checkout__input,
.cfc-bakery-checkout__dropdown {
	appearance: none;
	background: var(--cfc-bakery-color-paper);
	border: var(--cfc-bakery-border-hairline) solid var(--cfc-bakery-color-line);
	border-radius: var(--cfc-bakery-radius-md); /* = var(--wp--custom--radius--md) — the frame's field radius */
	box-shadow: none;
	box-sizing: border-box;
	color: var(--cfc-bakery-color-ink);
	display: block;
	font-family: var(--cfc-bakery-font-body);
	font-size: var(--cfc-bakery-text-medium);
	line-height: normal;
	min-height: 0;
	padding: calc(var(--cfc-bakery-fine-12) - var(--cfc-bakery-border-hairline)) calc(var(--cfc-bakery-fine-14) - var(--cfc-bakery-border-hairline)); /* 12 / 14 less the line → the frame's 42-high field (`text-input` 622:2132 / `dropdown` 622:2120, #20) */
	width: 100%;
}

/* The theme pins every Woo input to `padding: 0.5em !important` (its components/_forms.css):
   Woo's own rows took 8 all round and stood 37 high beside the plugin's 42. Same 12 / 14,
   pinned over it (#20). */
.cfc-bakery-checkout .cfc-bakery-checkout__form.woocommerce-checkout .form-row .input-text {
	padding: calc(var(--cfc-bakery-fine-12) - var(--cfc-bakery-border-hairline)) calc(var(--cfc-bakery-fine-14) - var(--cfc-bakery-border-hairline)) !important;
}

.cfc-bakery-checkout .cfc-bakery-checkout__form.woocommerce-checkout .form-row .input-text::placeholder,
.cfc-bakery-checkout__input::placeholder {
	color: var(--cfc-bakery-color-text-muted); /* The theme's muted text: a sample reads as a sample, not as what was typed (browser check 2026-10-09, A301). */
}

/* Woo's row classes land on PLACE ORDER (`validate`; the other plugin's phone rule on
   blur): before an attempt has failed nothing paints (A302), and Woo's validated-green
   border and red label never do. Before the :focus rule on purpose — a flagged field
   focused is fresh; the error rule below out-ranks both (A304). */
.cfc-bakery-checkout .cfc-bakery-checkout__form.woocommerce-checkout .form-row.woocommerce-invalid .input-text,
.cfc-bakery-checkout .cfc-bakery-checkout__form.woocommerce-checkout .form-row.woocommerce-validated .input-text {
	border-color: var(--cfc-bakery-color-line);
}

.cfc-bakery-checkout .cfc-bakery-checkout__form.woocommerce-checkout .form-row.woocommerce-invalid label {
	color: var(--cfc-bakery-color-maroon);
}

.cfc-bakery-checkout .cfc-bakery-checkout__form.woocommerce-checkout .form-row .input-text:focus,
.cfc-bakery-checkout .cfc-bakery-checkout__form.woocommerce-checkout .form-row select:focus,
.cfc-bakery-checkout__input:focus,
.cfc-bakery-checkout__dropdown:focus-visible {
	border-color: var(--cfc-bakery-color-fresh);
	outline: var(--cfc-bakery-btn-focus-outer-width) solid var(--cfc-bakery-color-fresh);
	outline-offset: var(--cfc-bakery-btn-focus-offset);
}

/* Woo's invalid class paints only once PLACE ORDER has failed (the shell is marked on
   checkout_error, A302) — never on leaving a field. The plugin's own is-invalid (the aged
   pickup, A273) is server-rendered and paints at once. */
.cfc-bakery-checkout[data-cfc-checkout-tried] .cfc-bakery-checkout__form.woocommerce-checkout .form-row.woocommerce-invalid .input-text,
.cfc-bakery-checkout .is-invalid .cfc-bakery-checkout__input,
.cfc-bakery-checkout .is-invalid .cfc-bakery-checkout__dropdown {
	border-color: var(--cfc-bakery-color-error);
}

.cfc-bakery-checkout__field {
	border: 0;
	margin: 0;
	min-width: 0;
	padding: 0;
}

.cfc-bakery-checkout__field legend {
	padding: 0;
}

/* `helper-row` 622:2129: Regular 13, LH auto, 6 under the field; the inline error wears the same line.
   (`.cfc-bakery p.` over the shell's `p { margin: 0 }` — the helper sat flush under its field.) */
.cfc-bakery p.cfc-bakery-checkout__helper,
.cfc-bakery p.cfc-bakery-checkout__error {
	font-size: var(--cfc-bakery-font-size-description);
	line-height: normal;
	margin: var(--cfc-bakery-fine-6) 0 0;
}

.cfc-bakery-checkout__helper {
	color: var(--cfc-bakery-color-text-muted);
}

.cfc-bakery-checkout__error {
	color: var(--cfc-bakery-color-error-text);
	font-weight: 700;
}

/* Errors on PLACE ORDER, not on leaving a field (browser check 2026-10-09, A302): Woo's
   inline message (show_inline_errors — under the field the server's notice named) wears
   the error text; the other plugin's "… is a required field" span, which Woo's blur-time
   class used to reveal, stays off — one message per field. */
.cfc-bakery-checkout .cfc-bakery-checkout__form.woocommerce-checkout .form-row .checkout-inline-error-message {
	color: var(--cfc-bakery-color-error-text);
	font-size: var(--cfc-bakery-font-size-description);
	font-weight: 700;
	line-height: normal;
	margin: var(--cfc-bakery-fine-6) 0 0;
}

.cfc-bakery-checkout form.checkout p.form-row span.error {
	display: none !important; /* Out-ranks the other plugin's `display: block !important`. */
}

/* LOCATION — segmented pills over native radios (618:2112 / 618:2114); the label 8
   over the pills (`location-field` 783:2513), the pills 8 apart, each 31 high. */
.cfc-bakery-checkout .cfc-bakery-checkout__form .cfc-bakery-checkout__location > .cfc-bakery-checkout__label {
	margin-bottom: var(--cfc-bakery-space-40);
}

.cfc-bakery-checkout__pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cfc-bakery-space-40);
}

.cfc-bakery-checkout .cfc-bakery-checkout__form .cfc-bakery-checkout__pill { /* over `.woocommerce-page label`'s foot margin */
	cursor: pointer;
	display: inline-flex;
	margin: 0;
	position: relative;
}

.cfc-bakery-checkout__pill-input {
	appearance: none;
	cursor: pointer;
	height: 100%;
	inset: 0;
	margin: 0;
	opacity: 0;
	position: absolute;
	width: 100%;
}

.cfc-bakery-checkout__pill-label {
	background: var(--cfc-bakery-color-paper);
	border: var(--cfc-bakery-border-hairline) solid var(--cfc-bakery-color-line);
	border-radius: var(--cfc-bakery-radius-pill); /* = var(--wp--custom--radius--pill) */
	color: var(--cfc-bakery-color-ink);
	display: inline-block;
	font-size: var(--cfc-bakery-font-size-description);
	line-height: normal;
	padding: calc(var(--cfc-bakery-space-40) - var(--cfc-bakery-border-hairline)) calc(var(--cfc-bakery-space-50) - var(--cfc-bakery-border-hairline)); /* the `pill`: 8 / 16 with the line inside (#20) */
	transition: background-color var(--cfc-bakery-transition-base), color var(--cfc-bakery-transition-base), border-color var(--cfc-bakery-transition-base);
}

.cfc-bakery-checkout__pill-input:checked + .cfc-bakery-checkout__pill-label {
	background: var(--cfc-bakery-color-fresh);
	border-color: var(--cfc-bakery-color-fresh);
	color: var(--cfc-bakery-color-paper);
}

.cfc-bakery-checkout__pill-input:focus-visible + .cfc-bakery-checkout__pill-label {
	outline: var(--cfc-bakery-btn-focus-outer-width) solid var(--cfc-bakery-color-fresh);
	outline-offset: var(--cfc-bakery-btn-focus-offset);
}

/* PICKUP DAY — the `dropdown` button (622:2120) over the shared picker */
.cfc-bakery-checkout__day {
	position: relative;
}

.cfc-bakery-checkout__dropdown {
	align-items: center;
	cursor: pointer;
	display: flex;
	gap: var(--cfc-bakery-space-40);
	justify-content: space-between;
	text-align: left;
}

.cfc-bakery-checkout__dropdown[hidden],
.cfc-bakery-checkout__native[hidden],
.cfc-bakery-checkout__cal[hidden] {
	display: none;
}

.cfc-bakery-checkout__day.is-open .cfc-bakery-checkout__dropdown {
	border-color: var(--cfc-bakery-color-fresh);
	box-shadow: inset 0 0 0 var(--cfc-bakery-border-hairline) var(--cfc-bakery-color-fresh); /* The Open field's 2px edge: the line plus one inset (#20). */
}

.cfc-bakery-checkout__dropdown-caret {
	color: var(--cfc-bakery-color-fresh);
	font-size: var(--cfc-bakery-text-small);
	transition: transform var(--cfc-bakery-transition-base);
}

.cfc-bakery-checkout__day.is-open .cfc-bakery-checkout__dropdown-caret {
	transform: rotate(180deg);
}

/* The open picker stands where the `dropdown`'s menu does (622:2113): in the flow, 6 under
   the field, the calendar card's own 1px line, no shadow (#20). */
.cfc-bakery-checkout__cal {
	margin-top: var(--cfc-bakery-fine-6);
}

.cfc-bakery-checkout__cal .cfc-bakery-cal {
	border: var(--cfc-bakery-border-hairline) solid var(--cfc-bakery-color-line);
	box-shadow: none;
	margin-top: 0;
}

/* Payment Method — Woo's gateway list, the one card gateway: its radio and
   title step aside (they stay in the DOM for Woo's JS), the card element
   (the gateway's iframe) draws CARD NUMBER / EXPIRATION DATE / CVC. */
.cfc-bakery-checkout__gateways .wc_payment_methods {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cfc-bakery-checkout__gateways .wc_payment_method {
	margin: 0;
	padding: 0;
}

.cfc-bakery-checkout__gateways .wc_payment_methods > li:only-child > .input-radio,
.cfc-bakery-checkout__gateways .wc_payment_methods > li:only-child > label {
	clip-path: inset(50%);
	height: auto;
	margin: 0;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: auto;
}

.cfc-bakery-checkout__gateways .payment_box {
	background: transparent;
	margin: 0;
	padding: 0;
}

.cfc-bakery-checkout__gateways .payment_box::before {
	display: none;
}

.cfc-bakery-checkout__gateways .payment_box p {
	color: var(--cfc-bakery-color-text-muted);
	font-size: var(--cfc-bakery-text-small);
	margin: 0 0 var(--cfc-bakery-space-40);
}

/* Woo's own sheet dresses the gateway list by id (`.woocommerce-checkout #payment`: a
   tinted rounded box, a padded list with a rule under it, a grey padded payment box
   with a pointer) and out-ranks the class rules above: the card fields stood in a
   purple box inside the white card. By id, on the plugin's element only — the frame's
   card fields sit straight on the card (`Frame 289` 1749:2987, #20). The payment box's
   background is also what WooPayments reads for its card element. */
.cfc-bakery-checkout #payment.cfc-bakery-checkout__gateways { /* token-exception: ID selector, not a color */
	background: transparent;
	border-radius: 0;
}

.cfc-bakery-checkout #payment.cfc-bakery-checkout__gateways ul.wc_payment_methods { /* token-exception: ID selector, not a color */
	border-bottom: 0;
	margin: 0;
	padding: 0;
}

.cfc-bakery-checkout #payment.cfc-bakery-checkout__gateways ul.wc_payment_methods li.wc_payment_method { /* token-exception: ID selector, not a color */
	margin: 0;
	padding: 0;
}

.cfc-bakery-checkout #payment.cfc-bakery-checkout__gateways div.payment_box { /* token-exception: ID selector, not a color */
	background-color: transparent;
	border-radius: 0;
	color: var(--cfc-bakery-color-ink);
	margin: 0;
	padding: 0;
}

.cfc-bakery-checkout #payment.cfc-bakery-checkout__gateways div.payment_box::before { /* token-exception: ID selector, not a color */
	display: none;
}

/* The gateway pads its card element 7 all round; its iframe already pulls out by its
   own 4 so the fields meet the card's content edge. */
.cfc-bakery-checkout__gateways .wcpay-upe-form .wcpay-upe-element {
	margin-bottom: 0;
	padding: 0;
}

.cfc-bakery-checkout__gateways .wc-payment-form {
	border: 0;
	margin: 0;
	padding: 0 !important; /* The gateway pins its fieldset padding inline. */
}

/* Specificity on purpose: the theme's `.woocommerce-checkout #place_order { width: auto }`
   and its `.form-row` display rules sit on the same markup (browser check 2026-10-08). */
.cfc-bakery-checkout .form-row.place-order.cfc-bakery-checkout__place-order {
	display: grid;
	gap: var(--cfc-bakery-space-40);
}

/* Woo's privacy sentence (on no frame): fine print in the Description role, the Payment Method card's last line. */
.cfc-bakery-checkout .woocommerce-privacy-policy-text p,
.cfc-bakery-checkout .woocommerce-terms-and-conditions-wrapper p {
	color: var(--cfc-bakery-color-text-muted);
	font-size: var(--cfc-bakery-font-size-description);
	line-height: var(--cfc-bakery-line-description);
	margin: 0;
}

.cfc-bakery-checkout .woocommerce-terms-and-conditions-wrapper a {
	color: inherit;
}

.cfc-bakery-checkout .cfc-bakery-checkout__place-order #place_order.cfc-bakery-btn { /* token-exception: ID selector, not a color */
	display: flex;
	width: 100%;
}

.cfc-bakery-checkout .cfc-bakery-staff-note {
	margin: 0;
}

/* Woo's AJAX error group lands at the top of the form before checkout.js
   moves it into the shell's notices: the same callout there too (A276). */
.cfc-bakery-checkout .woocommerce-NoticeGroup .woocommerce-error,
.cfc-bakery-checkout .woocommerce-NoticeGroup .woocommerce-message,
.cfc-bakery-checkout .woocommerce-NoticeGroup .woocommerce-info,
.cfc-bakery-checkout .woocommerce-NoticeGroup .wc-block-components-notice-banner[class] {
	--cfc-bakery-callout-edge: var(--cfc-bakery-color-success);
	background: linear-gradient(90deg, var(--cfc-bakery-callout-edge) calc(var(--cfc-bakery-fine-4) + var(--cfc-bakery-radius-sm)), transparent calc(var(--cfc-bakery-fine-4) + var(--cfc-bakery-radius-sm))); /* The callout's shape, as the shell's notices draw it (#20 review): the edge here, the panel in `::after`. */
	border: 0;
	border-radius: var(--cfc-bakery-radius-sm); /* = var(--wp--custom--radius--sm) */
	box-shadow: none;
	color: var(--cfc-bakery-color-ink);
	font-size: var(--cfc-bakery-font-size-description);
	isolation: isolate;
	line-height: var(--cfc-bakery-line-description);
	list-style: none;
	margin: 0;
	padding: var(--cfc-bakery-fine-12) var(--cfc-bakery-fine-18) var(--cfc-bakery-fine-12) calc(var(--cfc-bakery-fine-18) + var(--cfc-bakery-fine-4)) !important;
	position: relative;
}

.cfc-bakery-checkout .woocommerce-NoticeGroup .woocommerce-error::after,
.cfc-bakery-checkout .woocommerce-NoticeGroup .woocommerce-message::after,
.cfc-bakery-checkout .woocommerce-NoticeGroup .woocommerce-info::after,
.cfc-bakery-checkout .woocommerce-NoticeGroup .wc-block-components-notice-banner[class]::after {
	background: var(--cfc-bakery-color-mint);
	border-radius: var(--cfc-bakery-radius-sm);
	content: "";
	display: block;
	inset: 0 0 0 var(--cfc-bakery-fine-4);
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.cfc-bakery-checkout .woocommerce-NoticeGroup .woocommerce-error,
.cfc-bakery-checkout .woocommerce-NoticeGroup .wc-block-components-notice-banner.is-error[class] {
	--cfc-bakery-callout-edge: var(--cfc-bakery-color-error-text);
	color: var(--cfc-bakery-color-error-text);
}

.cfc-bakery-checkout .woocommerce-NoticeGroup .woocommerce-error::after,
.cfc-bakery-checkout .woocommerce-NoticeGroup .wc-block-components-notice-banner.is-error[class]::after {
	background: var(--cfc-bakery-color-error-bg);
}

.cfc-bakery-checkout .woocommerce-NoticeGroup .woocommerce-error::before,
.cfc-bakery-checkout .woocommerce-NoticeGroup .woocommerce-message::before,
.cfc-bakery-checkout .woocommerce-NoticeGroup .wc-block-components-notice-banner > svg {
	display: none;
}

.cfc-bakery-checkout .woocommerce-NoticeGroup .woocommerce-error li {
	list-style: none;
	margin: 0;
}

.cfc-bakery-checkout .woocommerce-NoticeGroup .woocommerce-error li + li {
	margin-top: calc(var(--cfc-bakery-space-40) / 2);
}

/* ---- The theme-page checkout (#26, José 2026-11-01) ---- */
/* A membership, event, payment or donation cart gets the same root, cards and fields
   inside the THEME's page (its header, its own "Checkout" heading, its footer) — the body
   carries `cfc-bakery-checkout-site`, the contract the theme's companion change scopes its
   old checkout CSS by (decision 10). The rules above already dress Woo's own billing
   fields and the theme's conditional fields (`.form-row`, `.input-text`, `select`, the
   checkbox label) through Woo's generic classes; what follows is the little the theme's
   page adds. The theme's own boxes (its per-product message on the before-form hook, its
   agreement scrollbox on the before-submit hook) keep the theme's styling: the plugin
   styles their CONTAINERS only — the notices slot, the fields grid, the place-order block
   (decision 6). Nothing here reaches a bakery checkout (its body has no such class). */

/* The root's ground (#26 B5, José 2026-11-02: "the whole checkout in the theme is framed
   in a light box, lets remove that so it looks identical to the plugin example"): the
   shell rule above paints every bakery root warm (`.cfc-bakery`), and on the bare page
   the body is that same warm ground, so there is no box to see; inside the theme's page
   the root's warm fill reads as a lighter box over the theme's own page ground. Here the
   root is transparent — the page's ground shows behind the cards, as the bare page's
   does — and nothing more: the root carries no border, shadow or padding (read on Local
   in headless Chrome, A1936). The bakery checkout keeps its warm root. */
body.cfc-bakery-checkout-site .cfc-bakery-checkout {
	background: transparent;
}

/* Woo's country / state selects: the same box as a text field (the shared rule above),
   with the native caret back — `appearance: none` there would hide it. */
body.cfc-bakery-checkout-site .cfc-bakery-checkout .cfc-bakery-checkout__form.woocommerce-checkout .form-row select {
	appearance: auto;
}

/* selectWoo dresses the country / state selects on the classic checkout (Woo's own
   script): its box takes the field's own box and type. */
body.cfc-bakery-checkout-site .cfc-bakery-checkout .cfc-bakery-checkout__form.woocommerce-checkout .form-row .select2-container .select2-selection--single {
	background: var(--cfc-bakery-color-paper);
	border: var(--cfc-bakery-border-hairline) solid var(--cfc-bakery-color-line);
	border-radius: var(--cfc-bakery-radius-md);
	height: auto;
}

body.cfc-bakery-checkout-site .cfc-bakery-checkout .cfc-bakery-checkout__form.woocommerce-checkout .form-row .select2-container .select2-selection--single .select2-selection__rendered {
	color: var(--cfc-bakery-color-ink);
	font-family: var(--cfc-bakery-font-body);
	font-size: var(--cfc-bakery-text-medium);
	line-height: normal;
	padding: calc(var(--cfc-bakery-fine-12) - var(--cfc-bakery-border-hairline)) calc(var(--cfc-bakery-fine-14) - var(--cfc-bakery-border-hairline));
}

body.cfc-bakery-checkout-site .cfc-bakery-checkout .cfc-bakery-checkout__form.woocommerce-checkout .form-row .select2-container .select2-selection--single .select2-selection__arrow {
	height: 100%;
	right: var(--cfc-bakery-fine-6);
}

body.cfc-bakery-checkout-site .cfc-bakery-checkout .cfc-bakery-checkout__form.woocommerce-checkout .form-row .select2-container--open .select2-selection--single,
body.cfc-bakery-checkout-site .cfc-bakery-checkout .cfc-bakery-checkout__form.woocommerce-checkout .form-row .select2-container--focus .select2-selection--single {
	border-color: var(--cfc-bakery-color-fresh);
	outline: var(--cfc-bakery-btn-focus-outer-width) solid var(--cfc-bakery-color-fresh);
	outline-offset: var(--cfc-bakery-btn-focus-offset);
}

/* What a hook appends after a field inside a fields grid (the theme's help note under
   its member-number field — a block of its own, not a row): fine print, hugging the
   field above it. By position, not by the theme's class. */
body.cfc-bakery-checkout-site .cfc-bakery-checkout .cfc-bakery-checkout__fields > :not(.form-row):not(.woocommerce-account-fields):not(.create-account) {
	color: var(--cfc-bakery-color-text-muted);
	font-size: var(--cfc-bakery-font-size-description);
	line-height: var(--cfc-bakery-line-description);
	margin: calc(var(--cfc-bakery-fine-6) - var(--cfc-bakery-fine-12)) 0 0;
}

body.cfc-bakery-checkout-site .cfc-bakery-checkout .cfc-bakery-checkout__fields > :not(.form-row) a {
	color: inherit;
}

/* Woo's login and coupon forms (the before-form hook, the site's settings — both off
   today): their rows and inputs take the field rules, their toggle line the callout's
   notice look (the notices block above covers `.woocommerce-info`). */
body.cfc-bakery-checkout-site .cfc-bakery-checkout .cfc-bakery-notices form .form-row {
	float: none;
	margin: 0 0 var(--cfc-bakery-fine-12);
	padding: 0;
	width: 100%;
}

body.cfc-bakery-checkout-site .cfc-bakery-checkout .cfc-bakery-notices form .form-row label {
	color: var(--cfc-bakery-color-maroon);
	display: block;
	font-size: var(--cfc-bakery-font-size-tag);
	font-weight: 700;
	letter-spacing: var(--cfc-bakery-tracking-tag);
	line-height: normal;
	margin: 0 0 var(--cfc-bakery-fine-6);
	text-transform: uppercase;
}

body.cfc-bakery-checkout-site .cfc-bakery-checkout .cfc-bakery-notices form .form-row .input-text {
	background: var(--cfc-bakery-color-paper);
	border: var(--cfc-bakery-border-hairline) solid var(--cfc-bakery-color-line);
	border-radius: var(--cfc-bakery-radius-md);
	box-sizing: border-box;
	color: var(--cfc-bakery-color-ink);
	font-family: var(--cfc-bakery-font-body);
	font-size: var(--cfc-bakery-text-medium);
	padding: calc(var(--cfc-bakery-fine-12) - var(--cfc-bakery-border-hairline)) calc(var(--cfc-bakery-fine-14) - var(--cfc-bakery-border-hairline)) !important;
	width: 100%;
}

/* The before-form slot holds the theme's message too (its own box, the theme's style):
   the slot's children stack in the body's rhythm whatever each one's margin — the
   notices keep their own. */
body.cfc-bakery-checkout-site .cfc-bakery-checkout .cfc-bakery-notices > :not(.woocommerce-notices-wrapper):not(.woocommerce-error):not(.woocommerce-message):not(.woocommerce-info):not(.wc-block-components-notice-banner) {
	margin-bottom: var(--cfc-bakery-space-50);
}

body.cfc-bakery-checkout-site .cfc-bakery-checkout .cfc-bakery-notices > :last-child {
	margin-bottom: 0;
}

/* The before-submit slot: the theme's agreement box (and any consent line a plugin hooks
   there) sits in the place-order block's grid, its own margin not doubled by the gap. */
body.cfc-bakery-checkout-site .cfc-bakery-checkout .form-row.place-order.cfc-bakery-checkout__place-order > :not(button):not(noscript):not(input) {
	margin-bottom: 0;
}

/* ---- Loading feedback (#30, José 2026-10-21: "waiting between every click") ----
   Every screen change is a full page load. From the tap until the next page paints the
   page is LEAVING (leaving.js puts `cfc-bakery-leaving` on html): the wrapper's children
   and the footer dim to --cfc-bakery-alpha-leaving and pulse down to the low alpha, the
   tapped link carries the loader ring — a `cfc-bakery-btn` link the buttons' own `is-busy`,
   any other link an `is-leaving` ring after its text. The WAIT CARD (partials/wait.php,
   the wrapper's last child) is a popup to the eye — the popup's scrim and card — with the
   ring around a small cake and one title line; the builder shows it from Add to cart, the
   checkout from PLACE ORDER. Reduced motion stops the pulse, the bob, the rings and the
   fade (the html class the inline script sets before first paint), as the buttons' ring. Check 23's at-rule,
   animation and token pins were moved for these rules on purpose (#30). */
@keyframes cfc-bakery-pulse {
	0%, 100% { opacity: var(--cfc-bakery-alpha-leaving); }
	50% { opacity: var(--cfc-bakery-alpha-leaving-low); }
}

@keyframes cfc-bakery-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(calc(-1 * var(--cfc-bakery-fine-3))); }
}

html.cfc-bakery-leaving .cfc-bakery {
	cursor: progress;
}

html.cfc-bakery-leaving .cfc-bakery__main > :not(.cfc-bakery-wait),
html.cfc-bakery-leaving .cfc-bakery-footer {
	animation: cfc-bakery-pulse calc(var(--cfc-bakery-loader-spin) * 2) ease-in-out infinite;
	opacity: var(--cfc-bakery-alpha-leaving);
	pointer-events: none; /* A second tap while leaving does nothing (the buttons' guard, for links). */
}

html.cfc-bakery-leaving.cfc-bakery-reduce-motion .cfc-bakery__main > :not(.cfc-bakery-wait),
html.cfc-bakery-leaving.cfc-bakery-reduce-motion .cfc-bakery-footer {
	animation: none;
}

.cfc-bakery a.is-leaving::after {
	animation: cfc-bakery-spin var(--cfc-bakery-loader-spin) linear infinite;
	border: var(--cfc-bakery-border-hairline) solid currentColor;
	border-radius: 50%;
	border-right-color: transparent;
	content: "";
	display: inline-block;
	flex: none; /* the links are flex rows: a ring that could shrink beside a long name flattened to a pill (José's phone check) */
	height: var(--cfc-bakery-size-loader);
	margin-left: var(--cfc-bakery-space-40);
	vertical-align: middle;
	width: var(--cfc-bakery-size-loader);
}

html.cfc-bakery-reduce-motion .cfc-bakery a.is-leaving::after {
	animation: none;
}

.cfc-bakery-wait__card {
	align-items: center;
	text-align: center;
}

.cfc-bakery-wait__mark {
	display: grid;
	height: var(--cfc-bakery-size-wait-mark);
	place-items: center;
	position: relative;
	width: var(--cfc-bakery-size-wait-mark);
}

.cfc-bakery-wait__ring {
	animation: cfc-bakery-spin calc(var(--cfc-bakery-loader-spin) * 2) linear infinite;
	border: var(--cfc-bakery-btn-border-width) solid var(--cfc-bakery-color-mint);
	border-radius: 50%;
	border-top-color: var(--cfc-bakery-color-fresh);
	inset: 0;
	position: absolute;
}

.cfc-bakery-wait__cake {
	animation: cfc-bakery-bob calc(var(--cfc-bakery-loader-spin) * 2) ease-in-out infinite;
	height: var(--cfc-bakery-size-icon); /* a sized grid item in the mark's centre — absolute with only an inset left the SVG at its 300×150 default, low and off to one side (José's phone check) */
	width: var(--cfc-bakery-size-icon);
}

html.cfc-bakery-reduce-motion .cfc-bakery-wait__ring,
html.cfc-bakery-reduce-motion .cfc-bakery-wait__cake {
	animation: none;
}

.cfc-bakery-wait__plate { fill: var(--cfc-bakery-color-surface); }
.cfc-bakery-wait__icing { fill: var(--cfc-bakery-color-fresh); }
.cfc-bakery-wait__cherry { fill: var(--cfc-bakery-color-accent-bg); }

/* The co-op's leaf in the mark on a theme-page checkout (#26 B2, José 2026-11-02: "the screen
   loader mentions the bakery and has the bakery icon … you can use this icon instead"): the cake's
   box and bob, the ink token through currentColor (the export's own fill is not written). */
.cfc-bakery-wait__leaf {
	animation: cfc-bakery-bob calc(var(--cfc-bakery-loader-spin) * 2) ease-in-out infinite;
	color: var(--cfc-bakery-color-ink);
	height: var(--cfc-bakery-size-icon);
	width: var(--cfc-bakery-size-icon);
}

html.cfc-bakery-reduce-motion .cfc-bakery-wait__leaf {
	animation: none;
}

/* A soft cross-fade between two bakery pages where the browser has cross-document view
   transitions (Chrome 126+, Safari 18.2+; the browser's own quarter-second); elsewhere the
   plain swap. The leaving page is already dimmed, so the fade reads as the new page rising
   out of it. */
@view-transition {
	navigation: auto;
}

html.cfc-bakery-reduce-motion::view-transition-old(root),
html.cfc-bakery-reduce-motion::view-transition-new(root) {
	animation: none;
}