/* ==========================================================================
   Cart off-canvas drawer, filled state - Figma to frontend
   ClickUp: 86eypb6jt
   Config investigated: no Customizer control styles the mini-cart line-item
   layout, quantity control, or panel title. Blocksy's Companion Pro renders
   plain WooCommerce mini-cart markup here, so a scoped stylesheet is the
   correct L4/L5 layer per the Blocksy implementation hierarchy.

   editor-friendly-ok: Blocksy always emits its own palette to :root (theme
   inc/classes/colors.php), so a var(--wp--preset--color--*, #hex) fallback
   here never fires and the rule would silently render Blocksy's default
   blue instead of Bonza's brand green/cream. Same documented exception
   already used by wishlist-offcanvas.css for the same panel-shell colors.
   ========================================================================== */

:root {
	/* Collapsed onto the shared --bonza-font-* namespace (hover-type-contract.md
	   typography section, CU-86eyxb3yv): --theme-headings-font-family is defined
	   nowhere in the theme (dead fallback tier, confirmed via MDN var()/guaranteed-
	   invalid-value semantics -- an undeclared custom property always falls through
	   to the next var() argument, so dropping this tier is behavior-neutral), so the
	   heading token drops it and falls straight to --theme-font-family, matching the
	   pattern already proven safe by this file's own former --bonza-font-body. Same two
	   literal values ("Nominee" / "Kobe1.1") as every other component in custom/css/. */
	--bonza-font-heading: "Nominee", var(--theme-font-family, sans-serif);
	--bonza-font-body: "Kobe1.1", var(--theme-font-family, sans-serif);
	--bcd-green: #247B4E;
	--bcd-text: #353638;
	/* FIX (audit round 6, WCAG 2.2 AA): was #6B7280, 4.19:1 on this panel's
	   #F8EDE3 cream (relative-luminance formula, verified independently) -
	   below the 4.5:1 AA floor for the normal-weight 12-13px text this token
	   is used on (.bcd-empty-copy, .bcd-price-cadence, .bcd-remove-link,
	   .bcd-shipping-estimate, the qty row). #5F6673 measures 5.01:1 on the
	   same cream (and only improves further on this panel's white areas). */
	--bcd-muted: #5F6673;
	--bcd-border: #E4E5E7;
	/* FIX (audit round 8, WCAG 2.2 AA): --bcd-green (#247B4E) text on a
	   rgba(36,123,78,*) tint composited over this panel's cream measures
	   below 4.5:1 in two places (.bcd-badge-subscription 3.89:1,
	   .bcd-empty-cta--outline:hover/:focus-visible 4.10:1) - the tinted-wash
	   pattern rounds 6/7 didn't check (they swept --bcd-muted usages and raw
	   hex declarations, not composited rgba() tints). #1F6640 measures
	   5.15:1 on the badge's composited #DFDFD1 and 5.43:1 on the CTA hover's
	   composited #E7E4D7 - used only where the tint background needs it,
	   not a wholesale --bcd-green replacement. */
	--bcd-green-dark: #1F6640;
}

/* editor-friendly-ok: panel-shell colors below match the raw-hex exception
   already documented at the top of this file (Blocksy's own :root palette
   always wins over a var(--wp--preset--color--*) fallback here). */

/* ==========================================================================
   Panel shell. width/radius/shadow (Figma component set 64:14596, Filled
   #367:52841, 445px wide) and the 76px green header band + grass-horizon
   strip image (Figma nodes 34394:263681/263682, all four variants share this
   header). Same `body` specificity-bump convention as the Wishlist
   off-canvas panel (wishlist-offcanvas.css) - Blocksy's shared offcanvas
   module prints its own inline style block in wp_footer at equal specificity
   but later in the document, so plain #woo-cart-panel rules lose without it.
   ========================================================================== */
body #woo-cart-panel {
	/* FIX (DoD pixel-diff, independent audit follow-up): the comment above
	   claimed the `body #woo-cart-panel` specificity bump was enough to beat
	   Blocksy's shared offcanvas module, which prints its OWN
	   `body #woo-cart-panel { --side-panel-width: ... }` block inline in
	   wp_footer - i.e. equal specificity, and wp_footer's block comes later
	   in the document than this enqueued stylesheet, so it was actually
	   winning. Confirmed live: the panel rendered at 500px on desktop and a
	   viewport-relative ~90vw on mobile, not the 445px/340px this variable
	   declares. `!important` on a custom property is respected by the
	   cascade same as any other declaration, so it's the correct fix here
	   (not a hack) rather than trying to out-guess wp_footer's selector. */
	--side-panel-width: 445px !important;
}

#woo-cart-panel .ct-panel-inner {
	border-radius: 24px 0 0 24px;
	box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.08);
}

/* FIX 2026-09-09: Blocksy Customizer generates a MORE specific rule just for the cart panel -
   `[data-header*="type-1"] #woo-cart-panel .ct-panel-inner` (uploads/blocksy/css/global.css,
   specificity 1-2-0) - which beats the body-prefix rule below (1-1-1) regardless of load
   order, painting the content area white instead of cream. `!important` matches this file's
   existing convention for overriding Blocksy-dynamic CSS. Confirmed live via
   document.styleSheets inspection against the rendered DOM. */
body #woo-cart-panel .ct-panel-inner {
	background-color: #F8EDE3 !important;
}

@media (max-width: 690px) {
	body #woo-cart-panel {
		/* FIX (DoD pixel-diff, independent audit follow-up): same
		   !important fix as the desktop declaration above - confirmed live
		   this was rendering at ~90vw instead of the Figma-specified 340px. */
		--side-panel-width: 340px !important;
	}

	#woo-cart-panel .ct-panel-inner {
		border-radius: 24px 0 0 24px;
	}
}

#woo-cart-panel .ct-panel-actions {
	background-color: var(--bcd-green);
	padding: 32px 20px 16px;
	min-height: 76px;
	border-bottom: none;
	align-items: center;
	position: relative;
	/* FIX (Figma parity audit): was `overflow: hidden`, which clipped the
	   ::after pattern band (top:58px height:38px, below) down to an 18px
	   sliver -- almost invisible against the solid green fill, reported as
	   "missing heading background pattern". Figma's own header frame
	   (nodes 34392:263614 / 34394:263681, both 76px tall) does not clip its
	   overflow either: the matching rect (also top:58 height:38) is designed
	   to spill ~20px past the header's own bottom edge into the cream body
	   below, the scalloped "torn edge" transition visible in the Figma
	   export. `overflow: visible` lets that full spill render. */
	overflow: visible;
}

/* ORIENTATION FIX (client-reported, 2026-09-19): the strip rendered upside
   down, a cream band biting into the green header with a green tongue
   intruding into the cream body below, the exact inverse of the intended
   "green tapers into cream" wave.

   The source PNG (1920x84) is drawn hill-side DOWN: solid green along the
   BOTTOM of the frame, cream along the top. Composited at the box's natural
   top-to-top mapping that puts cream against the green header and green in
   the cream body. `transform: scaleY(-1)` mirrors the composited box after
   size and position are resolved, so green sits against the header and cream
   against the body.

   The sibling wishlist drawer already solved this exact bug on this exact
   artwork (see `#woo-wishlist-panel .ct-panel-actions::after` in
   custom/css/wishlist-offcanvas.css, fixed 9 Sep 2026 from a client
   screenshot). That file's comment records that Figma renders this fill with
   `scaleMode: FILL`, which is CSS `cover`, NOT `auto 100%` + `repeat-x`.
   Verified 2026-09-19 by downloading both PNGs: identical 1920x84 hill
   artwork in the same orientation, the cart's copy differing only in having
   an opaque cream top where the wishlist's is transparent. The wishlist's
   four settings are therefore copied verbatim rather than re-derived.

   Confirmed live on bonza-retheme.blz.au before this was written: computed
   style moved from transform `none` / `auto 100%` / `0% 0%` / `repeat-x` to
   `matrix(1, 0, 0, -1, 0, 0)` / `cover` / `50% 50%` / `no-repeat`.

   `width: 100%` replaces the `right: 0` pair because `cover` scales against a
   resolved width, matching the wishlist rule. */
#woo-cart-panel .ct-panel-actions::after {
	content: "";
	position: absolute;
	left: 0;
	top: 58px;
	width: 100%;
	height: 38px;
	background-image: url(../assets/cart-drawer/cart-drawer-header-icon-strip.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	transform: scaleY(-1);
	pointer-events: none;
}

/* The strip bleeds 20px past the header's own 76px height (58 + 38 = 96).
   Blocksy's scrollable content area starts flush at the header's bottom edge
   with no top padding, so the first line item sat at y=84, inside that bleed
   zone; measured live at 1440 on 2026-09-19. The wishlist drawer hit the
   identical problem and clears it with 24px, so the same value is used here
   and the two drawers stay consistent; 24px also matches this file's other
   paddings. Re-measured after injecting on the live panel: the first item
   moves to y=132, clear of the 96px bleed. */
#woo-cart-panel .ct-panel-content-inner {
	padding-top: 24px;
}

/* Panel title - "Your Cart (N)" */
#woo-cart-panel .ct-panel-heading {
	font-family: var(--bonza-font-heading);
	font-weight: 900;
	font-size: 18px;
	line-height: 20px;
	color: #fff;
	text-transform: uppercase;
	position: relative;
	z-index: 1;
}

#woo-cart-panel .ct-panel-heading .total-items {
	display: none !important;
}

/* FIX (Figma parity audit, 86eypb6jt): rendered at 24x24 instead of the
   Figma-specced 20x20 (component set 64:14596's own title icon frame,
   "Shop / bag_variant", bbox 20x20 - confirmed via the offline export's
   node data). This file's SVG markup already carries width="20" height="20"
   attributes (cart-drawer-filled.php), but the unmanaged, untracked
   `assets/css/components/offcanvas.css` (outside this monorepo) declares
   its OWN `.ct-cart-panel-icon { width: 24px; height: 24px }`, which beats
   both the SVG's own attributes and Blocksy's core 15px default - found by
   walking every stylesheet and testing `el.matches()` against the live
   icon rather than guessing. This selector's specificity here
   (#woo-cart-panel .ct-cart-panel-icon, 1-1-0) already beats that vendor
   rule's bare class (0-1-0) on weight alone, so no !important is needed. */
#woo-cart-panel .ct-cart-panel-icon {
	fill: none;
	stroke: #fff;
	width: 20px;
	height: 20px;
}

/* Same specificity bump as the panel-width rule above: the shared module's
   wp_footer block also writes a literal --theme-icon-color on this exact
   selector, later in the document. */
body #woo-cart-panel .ct-toggle-close {
	--theme-icon-color: #fff;
	position: relative;
	z-index: 1;
}

/* source: DERIVED -- close (X) icon opacity dim is not a Button/Link/Selection
   component in the contract; no measured delta to cite. Color-only, no reflow. */
@media (hover: hover) {
	body #woo-cart-panel .ct-toggle-close:hover {
		--theme-icon-color: rgba(255, 255, 255, 0.75);
	}
}

/* Cart line item layout */
#woo-cart-panel .woocommerce-mini-cart li.mini_cart_item {
	display: flex !important;
	align-items: flex-start !important;
	gap: 16px !important;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--bcd-border);
}

#woo-cart-panel .woocommerce-mini-cart li.mini_cart_item:last-of-type {
	border-bottom: none;
}

/* FIX (visual audit vs Figma, 86eypb6jt): every line item sat 59px in from
   the panel edge where the design insets it 27px, so the whole row was 70px
   narrower than Figma before a single item property was even compared.
   Cause is a leftover, not this file: Blocksy's own cart-header-element-lazy
   .min.css carries `#woo-cart-panel ul { overflow-y: auto; margin: 0
   calc(var(--panel-padding, 35px) * -1); padding: 0 var(--panel-padding,
   35px) 25px }`, which bleeds the list out and pads it back in because in
   stock Blocksy the <ul> IS the scroll container. This build wraps the list
   in `.bc-cart-scroll` and scrolls that instead, so Blocksy's bleed no
   longer cancels anything - it just insets the items a second time, on top
   of `.ct-panel-content-inner`'s real 24px padding.
   Only the horizontal half is neutralised; `overflow-y` and the 25px
   padding-bottom are left alone, since those still do their original job.
   Found by walking document.styleSheets and testing el.matches() on the
   live panel, not by guessing at the cascade. Specificity here is (1,2,1)
   against Blocksy's (1,0,1), so this wins on weight and not on load order.
   With it, the row measures 397px at 1440 and 308px at 375 - the same 397
   and 308 the Figma desktop and mobile cart frames give. */
/* 86eycc4e1: flex-shrink 0 - with the FBT card now inside the scroll column
   the <ul> (a flex item, shrink 1) shrank to 83px while its two 215px rows
   overflowed it, so the card painted over the items and left ~214px blank
   below. The list must keep its content height; the region scrolls instead. */
#woo-cart-panel .bc-cart-scroll > ul.woocommerce-mini-cart {
	flex-shrink: 0;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

/* FIX (visual audit vs Figma, 86eypb6jt): the thumbnail rendered at a fixed
   72px (56px under 480px) where the design gives it half the line-item row.
   Measured off the rendered Figma nodes rather than read off a spec: on the
   desktop cart frame the image box spans 198px inside a 397px row (54..450
   of a 902px @2x render), on the mobile frame 154px inside a 308px row -
   50% at both, with the same ~16px gap to the text column, so this is one
   proportional rule and not two breakpoint constants. `.ct-media-container`
   is the flex child (Blocksy wraps the <img> in that anchor), so the basis
   has to live on the anchor; sizing the <img> alone made the percentage
   resolve against a content-sized parent. aspect-ratio keeps the box square
   at any panel width; the 8px radius matches the ~7-8px corner measured on
   the same render and is unchanged. srcset already carries 300w/500w/655w
   candidates, so the larger box picks a sharper file on its own. */
#woo-cart-panel .mini_cart_item > a.ct-media-container {
	flex: 0 0 50%;
	max-width: 50%;
	line-height: 0;
}

#woo-cart-panel .mini_cart_item img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	/* FIX (visual audit vs Figma, 86eypb6jt): `cover` was harmless while the
	   box was 72px and became destructive at 198px. "Bonza 10Kg" (product 47,
	   the item Figma's own cart mock shows) has a 199x379 portrait packshot
	   as its featured image, and `cover` cropped the bag off at both ends.
	   `contain` shows the whole product and behaves identically for the
	   square catalogue images, where the two are the same thing.
	   Separately, and not a CSS problem: Figma's mock uses square lifestyle
	   renders for every cart item, so the portrait packshots in the
	   catalogue will letterbox against the cream until those assets are
	   replaced. Flagged rather than papered over. */
	object-fit: contain;
	border-radius: 8px;
}

/* Hide WC's default remove (x) icon; replaced by the "Remove" text link */
#woo-cart-panel .mini_cart_item > a.remove {
	display: none !important;
}

#woo-cart-panel .mini_cart_item a.product-title {
	font-family: var(--bonza-font-body);
	font-weight: 700;
	font-size: 15px;
	line-height: 20px;
	color: var(--bcd-text) !important;
	text-decoration: none;
	/* FIX (visual audit vs Figma, 86eypb6jt): Figma sets the line-item title
	   in caps ("BONZA 10KG"), measured at a 21px cap height on the 2x render,
	   which is this rule's own 15px. Only the case was wrong. It also matches
	   every other title in this panel, the cart heading, the
	   frequently-bought-together card and the two buttons, all of which were
	   already uppercase. */
	text-transform: uppercase;
}

/* Row layout stacks vertically: price row, then stepper, then Remove
   (Figma: three separate rows, not one merged line). */
#woo-cart-panel .mini_cart_item .quantity.bcd-qty-row {
	font-family: var(--bonza-font-body);
	font-size: 13px;
	line-height: 18px;
	color: var(--bcd-muted);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin-top: 6px;
}

/* Price + subscription-cadence row (Figma: sits directly under the item
   title, its own row, above the quantity-stepper row). */
#woo-cart-panel .mini_cart_item .bcd-price-row {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-top: 2px;
}

.bcd-qty-price {
	font-family: var(--bonza-font-body);
	font-weight: 700;
	font-size: 16px;
	color: var(--bcd-text);
}

.bcd-qty-price .woocommerce-Price-amount {
	font-family: var(--bonza-font-body);
	font-weight: 700;
	font-size: 16px;
	color: var(--bcd-text);
}

.bcd-price-cadence {
	font-family: var(--bonza-font-body);
	font-size: 13px;
	color: var(--bcd-muted);
}

/* Quantity stepper. FIX (Figma parity audit, 2026-08-31 exhaustive review,
   not yet applied until this pass): border-radius was 8px, spec is a full
   pill (999px). */
.bcd-qty-stepper {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--bcd-border);
	border-radius: 999px;
	padding: 3px 8px;
}

.bcd-qty-btn {
	width: 16px;
	height: 16px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--bcd-text);
}

/* source: DERIVED -- qty stepper +/- glyph is not a contract component;
   color-only, no reflow. */
.bcd-qty-btn:hover {
	color: var(--bcd-green);
}

.bcd-qty-btn:focus-visible {
	outline: 2px solid var(--bcd-green);
	outline-offset: 2px;
	border-radius: 2px;
}

.bcd-qty-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.bcd-qty-value {
	font-family: var(--bonza-font-body);
	font-weight: 700;
	font-size: 13px;
	color: var(--bcd-text);
	min-width: 14px;
	text-align: center;
}

.bcd-remove-link {
	font-family: var(--bonza-font-body);
	font-size: 12px;
	line-height: 18px;
	color: var(--bcd-muted) !important;
	text-decoration: underline !important;
	cursor: pointer;
}

/* source: DERIVED -- utility/destructive "Remove" action, not the contract's
   Link component (that set's live-confirmed usages are content/nav links --
   "Superfoods", "Sale", "Gift Card" -- a different semantic role). Flagging as
   a plausible Link/Child candidate for designer confirmation, not forcing the
   contract's #247B4E swap onto it without evidence. Color-only, no reflow. */
.bcd-remove-link:hover,
.bcd-remove-link:focus-visible {
	color: var(--bcd-text) !important;
}

.bcd-remove-link:focus-visible {
	outline: 2px solid var(--bcd-green);
	outline-offset: 2px;
}

/* editor-friendly-ok: colors below (coupon/badge/empty-state accents) match
   the same raw-hex exception already documented at the top of this file.
   Blocksy's own :root palette always wins over a var(--wp--preset--color--*)
   fallback on this panel, so a preset var here would silently render
   Blocksy's default blue instead of Bonza's brand green/cream/error red. */

/* ==========================================================================
   Sticky coupon/shipping/totals footer (Figma node 25972:46634, follow-up
   build 86eypb6jt). No live Figma MCP access this pass (see the docblock
   above bonza_cart_drawer_footer_extras() in cart-drawer-filled.php);
   spacing and type below reuse the panel-shell's own verified tokens
   instead of a guessed Figma pixel value.

   Structural fix: Blocksy's own .ct-panel-content-inner scrolls its WHOLE
   contents as one region (JS-measured --panel-content-height, confirmed
   from the theme's off-canvas/main.scss source). Overriding it so only
   the line-item list scrolls and the footer (coupon/shipping/totals/
   buttons) stays pinned at the bottom, the flexbox "sticky footer"
   pattern, no JS needed. This also covers the two 340px mobile variants
   (Figma Variant6 tall #2138:115523, Variant5 short #2138:115591): the
   fix is content-driven, so a short cart's footer sits directly under the
   last item and a tall cart's footer stays pinned once the list scrolls,
   in both cases without a separate mobile-only rule. Not independently
   diffed against those two Figma frames this pass.
   ========================================================================== */
#woo-cart-panel .ct-panel-content-inner {
	overflow-y: hidden;
	/* FIX (Figma parity round 5, audit finding): the sticky-footer bleed
	   rule below now deliberately overhangs this element by a few px on
	   both sides (see that rule's comment). Overflow's `visible` axis
	   computes to `auto`, not `hidden`, once the OTHER axis is non-visible
	   (CSS Overflow 3) - without this, that overhang would show a permanent
	   horizontal scrollbar on Windows/Linux Chrome/Firefox (macOS overlay
	   scrollbars hide it, which is why this was not caught visually). */
	overflow-x: hidden;
	width: 100%;
}

/* FIX (client-reported "still doesn't match Figma", 86eypb6jt): a cart with
   only 1-2 items showed a large blank cream gap (measured ~212px at 1440)
   between the last line item and the "Frequently Bought Together" card.
   Figma's own filled-state frame (367:52841) packs the list, FBT card and
   footer tightly with no such gap - confirmed against the rendered export,
   cart-desktop-b/cart-mobile-b.
   ROOT CAUSE (found by walking the live DOM, not by editing this file's own
   rule first): the <ul> is wrapped in a foreign `.bc-cart-scroll` div, added
   by a DIFFERENT, unmanaged stylesheet -
   wp-content/themes/blocksy-child/assets/css/components/offcanvas.css
   ("CU-86exbd8kg V3", a different task's build entirely, outside this
   monorepo - see CONTEXT.md's "AN ENTIRE CSS LAYER SITS OUTSIDE THE
   MONOREPO" note) - and its own "cart-offcanvas.js", neither tracked here.
   THAT wrapper, not the <ul>, is `.ct-panel-content-inner`'s real flex child,
   and that vendor file gives it `flex: 1 1 auto`, so IT (not this file's own
   <ul> rule below, which was never the cause) stretches to consume every
   pixel of leftover panel height regardless of how little content it holds.
   Measured live: `.bc-cart-scroll` was 695px tall for a 2-item cart whose
   real content (two rows + the <ul>'s own 24/25px padding) needs ~499px, a
   ~196px dead zone. Confirmed the fix by injecting the override via
   `addStyleTag` on the deployed panel before touching this file: with
   `#woo-cart-panel .bc-cart-scroll { flex: 0 1 auto !important; }` alone,
   the FBT card's gap above it went from ~212px back to the intended 16px
   (this file's own `.bcd-fbt { margin-top: 16px }`, untouched) - `!important`
   plus the `#woo-cart-panel` id prefix is required to beat that vendor
   file's own equal-specificity `#woo-cart-panel .bc-cart-scroll` rule
   regardless of stylesheet load order, the same convention already
   established elsewhere in this file for this exact competing layer.
   `min-height: 0` (kept below) still lets it compress and scroll
   (`overflow-y: auto`, that vendor file's own rule, unchanged) once a long
   cart's real content exceeds the panel's available height - the two 340px
   mobile variants (Variant6 tall / Variant5 short) this pattern was built
   for keep working exactly as before, since neither ever relied on this
   wrapper growing past its content. */
/* CORRECTION (client-reported, 2026-09-19): `flex: 0 1 auto` above killed the
   dead gap ABOVE the FBT card, but it also stopped anything in this column
   from growing, so the whole stack packed to the top and left the slack under
   the footer instead. Measured live at 1440 with a one-item cart: the
   secure-checkout line ended at y=777 against a panel bottom of 900, so 123px
   of cream sat below the last element. The client reported exactly that, and
   Figma agrees with them: the cart frame contains a frame literally named
   STICKY (445x987 on the 425 board, 340x927 on 320) whose bottom edge is flush
   with the footer frame's (Frame 1261153328, 445x272). Nothing is meant to sit
   under the footer.

   `flex: 1 1 0` rather than `1 1 auto`. That distinction is the whole fix: with
   basis `auto` the wrapper is sized from its content first and can only grow,
   so on a tall cart the footer gets pushed past the panel bottom, which is
   what an earlier attempt at this did (secure line at y=935 against a 900px
   panel, clipped by the content area's own `overflow-y: hidden`). With basis
   `0` this wrapper takes exactly the space the footer does not, in both
   directions, so the footer lands flush at the bottom whether the cart is
   sparse or overflowing.

   `min-height: 0` is required because a flex item's default `min-height: auto`
   refuses to shrink below its content, which would reintroduce that same
   overflow on a tall cart. `overflow-y: auto` then gives the item list its own
   scroll region, which is what makes a tall cart scroll the items instead of
   pushing the footer away.

   The slack on a sparse cart now sits below the last line item, inside this
   scroll region, rather than below the footer. That is the standard drawer
   behaviour and what the STICKY frame describes; Figma's own filled sample
   nearly fills the panel, so it does not depict a one-item cart either way.

   `!important` and the `#woo-cart-panel` prefix are both still needed to beat
   the unmanaged offcanvas layer's own equal-specificity rule, exactly as the
   note above records. */
/* REVERTED 2026-09-20, measured against the real deploy. `flex: 1 1 0` plus
   `min-height: 0` did NOT pin the footer, and it made things worse: measured
   at 1440, 768 and 375 with a one-item cart, the scroll wrapper grew to 398px
   instead of shrinking to the 362px that would have fit, and the secure line
   ended at y=935 against a 900px panel. The content area's `overflow-y:
   hidden` then CLIPPED it, so the fix hid content that the original 123px gap
   at least left visible.

   The box chain, measured: `.ct-panel-content-inner` is 816px with a 24px top
   pad, so 792px of content box, while its scrollHeight is 851px. Its six flex
   children measure 793px in total, which fits; the 35px that overflows is not
   accounted for by any child's own box, so something in the unmanaged
   offcanvas layer is contributing height this file cannot see. Three separate
   attempts (`margin-top: auto` on the footer group, `flex: 1 1 auto`, and
   `flex: 1 1 0`) all landed on the same 35px overflow, which says the cause is
   upstream of the flex arithmetic rather than in it.

   Left at `0 1 auto`, the known-good state: a 123px gap sits under the footer
   on a sparse cart, which is wrong against Figma's STICKY frame but is visible
   and harmless. Pinning the footer still needs doing; it needs the unmanaged
   layer's contribution identified first, not a fourth guess at the flex. */
#woo-cart-panel .bc-cart-scroll {
	flex: 0 1 auto !important;
}

/* RESOLVED 2026-09-21 (CU-86eypb6jt). The "35px overflow" that sank all three
   earlier attempts was never overflow. It is this file's OWN deliberate
   bottom-edge bleed further down:

     #woo-cart-panel .ct-panel-content-inner > .bc-mini-cart-secure {
       margin-bottom: calc(var(--panel-padding, 35px) * -1);
       padding-bottom: var(--panel-padding, 35px);
     }

   The negative margin cancels that padding for LAYOUT, so a box-based probe
   sees a 35px overhang and reads it as content spilling past the panel floor,
   while the padding still paints as white. Measuring INK (leaf nodes carrying
   text or media) instead of boxes shows zero content below the floor in any
   configuration. That is why "the cause is upstream of the flex arithmetic"
   looked true: two of the three attempts were actually correct and were
   rejected on a false reading.

   Measured live on v1 at 320/375/425/768/1024/1440/2560, sparse and long carts:

     flex: 1 1 auto on .bc-cart-scroll closes the bottom gap, but the wrapper
       then grows past its own <ul> and reopens a 133px to 181px DEAD ZONE
       inside the scroll region on a sparse cart. That is precisely the ~196px
       zone the `0 1 auto` above was added to kill, just moved where the old
       probe (measuring from the wrapper's bottom, not the <ul>'s) could not
       see it. Rejected.

     margin-top: auto on the first footer child (below) leaves `0 1 auto`
       alone, so the dead zone stays at 0 and the gap before .bcd-fbt stays at
       its intended 16px, while the leftover slack moves above the footer group
       and the footer sits on the panel floor.

   Sparse cart, before and after: gap under the last ink 135px to 182px becomes
   2px at every width; dead zone 0 before and after; gap before .bcd-fbt 16px
   before and after; zero ink below the panel floor. Long carts are byte
   identical to before, since a scrolling cart has no slack to redistribute.

   It also FIXES the bleed rather than risking it. Baseline measured
   `.bc-mini-cart-secure`'s box ending 100px short of the panel floor, so the
   edge-to-edge white fill Figma's STICKY node asks for was not reaching the
   bottom at all. With the footer pinned it does. Do NOT "simplify" this by
   zeroing that padding/margin pair: that closes the gap too, and silently
   deletes the bleed.

   The declaration itself cannot live here. The footer-bleed rule further down
   sets `margin: 0 calc(var(--panel-padding) * -1)` on this same element, and
   that shorthand resets margin-top to 0. At equal specificity the later rule
   wins, so a `margin-top: auto` placed at this point in the file is dead on
   arrival. It is applied after that shorthand instead, next to the sibling
   `margin-top: 0` rule. */

#woo-cart-panel .ct-panel-content-inner .woocommerce-mini-cart {
	overflow-y: auto;
	min-height: 0;
	width: 100%;
	/* FIX (round 2 live verification): the header's own ::after pattern band
	   deliberately spills to top:58px + height:38px = 96px (see that rule's
	   comment), 20px past the header's flat 76px box. Round 2 added a
	   badge-row as the first thing inside the first line item; without this
	   padding it started at ~84px - still inside that 96px spill zone - so
	   the torn-edge graphic's jagged lower edge visually clipped through the
	   top badge (Subscription) at some horizontal positions. 24px clears the
	   spill zone with a small margin. */
	padding-top: 24px;
}

#woo-cart-panel .ct-panel-content-inner > .bcd-drawer-footer-extras,
#woo-cart-panel .ct-panel-content-inner > .woocommerce-mini-cart__total,
#woo-cart-panel .ct-panel-content-inner > .bc-mini-cart-totals,
#woo-cart-panel .ct-panel-content-inner > .woocommerce-mini-cart__buttons,
#woo-cart-panel .ct-panel-content-inner > .bc-mini-cart-secure {
	flex-shrink: 0;
	/* FIX (Figma parity round 5 - footer left/right/bottom alignment bug):
	   `width: 100%` resolves against `.ct-panel-content-inner`'s own content
	   box, which is real Blocksy padding (measured live at 24px, not the
	   35px these elements' own `margin: 0 calc(var(--panel-padding) * -1)`
	   assumes). A negative margin shifts a box's position but never changes
	   its width, so with a fixed 100% width the box slid 35px left while
	   staying the same (narrower) width - overhanging ~11px past the left
	   edge but landing ~59px short of the right edge, leaving cream visible
	   on the right (and, since that shortfall runs the full height of the
	   sticky footer, at the bottom-right corner too - one root cause for
	   the reported "left/right/bottom" regression, not three). Widening by
	   exactly twice the panel padding makes the box's overhang past
	   `.ct-panel-inner`'s edges the SAME on both sides (symmetric, not
	   literally flush/0px - the overhang equals panel-padding minus the
	   parent's real padding, so it is only 0 if those two happen to match),
	   regardless of what `.ct-panel-content-inner`'s real padding is.
	   Confirmed live via getBoundingClientRect() before/after, 2026-09-10. */
	width: calc(100% + var(--panel-padding, 35px) * 2);
}

/* editor-friendly-ok: white fill below matches the same raw-hex exception
   already documented at the top of this file (Blocksy's own :root palette
   always wins over a var(--wp--preset--color--*) fallback on this panel).
   FIX (Figma parity audit, corrected in audit round 3): the sticky
   totals/checkout area is white in the design (node 25972:46634 "STICKY"),
   edge to edge, not the panel's cream, with a torn paper-edge transition
   into the cream item-list area above it -- both completely missing before
   the first pass of this fix.

   Round-3 correction: the first pass bled only `.woocommerce-mini-cart__total`
   and `.woocommerce-mini-cart__buttons` to white using a wrong -24px bleed
   (Blocksy's real `.ct-panel-content-inner` padding is `var(--panel-padding,
   35px)`, 25px under 690px, confirmed live in main.min.css -- not 24px), and
   used a -48px negative-margin overlap to fake reaching the panel's bottom
   edge, which actually painted `__total`'s white background OVER the
   `.bc-mini-cart-totals` Shipping/Order-Total rows in between (real DOM
   order, confirmed live via a wc-ajax=add_to_cart fragment pull: .woocommerce-mini-cart,
   .woocommerce-mini-cart__total, .bc-mini-cart-totals, .woocommerce-mini-cart__buttons,
   .bc-mini-cart-secure -- five siblings, not two). Fixed by giving EVERY ONE
   of those four footer siblings the same white fill + the correct
   `--panel-padding` bleed (so they render as one continuous white block,
   not white/cream/white/cream), zeroing the vertical margin between them,
   and moving the bottom-edge bleed to the ACTUAL last child
   (`.bc-mini-cart-secure`) instead of faking it from the first one.

   Reuses the SAME torn-edge artwork already built for the navbar-overlay
   drawer (own copy per this repo's per-feature asset convention).
   contrast-exempt: background-color only, no text color changes here --
   this footer's text already uses var(--bcd-text) #353638 against the
   panel's #F8EDE3 cream elsewhere in this file; white (#FFFFFF) has a
   HIGHER luminance than #F8EDE3, so #353638-on-white is strictly higher
   contrast than the already-shipped #353638-on-cream pairing, never a
   regression. */
#woo-cart-panel .ct-panel-content-inner > .woocommerce-mini-cart__total,
#woo-cart-panel .ct-panel-content-inner > .bc-mini-cart-totals,
#woo-cart-panel .ct-panel-content-inner > .woocommerce-mini-cart__buttons,
#woo-cart-panel .ct-panel-content-inner > .bc-mini-cart-secure {
	background-color: #FFFFFF;
	margin: 0 calc(var(--panel-padding, 35px) * -1);
	padding-left: var(--panel-padding, 35px);
	padding-right: var(--panel-padding, 35px);
}

#woo-cart-panel .ct-panel-content-inner > .bc-mini-cart-totals,
#woo-cart-panel .ct-panel-content-inner > .woocommerce-mini-cart__buttons {
	margin-top: 0;
}

#woo-cart-panel .ct-panel-content-inner > .woocommerce-mini-cart__total {
	position: relative;
	/* Pins the footer group to the panel floor on a sparse cart. See the long
	   comment above `.bc-cart-scroll` for why this, and not a flex change, is
	   the fix. It MUST stay below the `margin: 0 calc(...)` shorthand above,
	   which resets margin-top on this same element at equal specificity. */
	margin-top: auto;
}

#woo-cart-panel .ct-panel-content-inner > .woocommerce-mini-cart__total::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -24px;
	height: 24px;
	background-image: url(../assets/cart-drawer/cart-drawer-footer-divider-icon-strip.png);
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: left top;
	pointer-events: none;
}

/* Bottom-edge bleed lives on the ACTUAL last footer child so the white
   fill reaches the panel's real bottom edge, matching Figma's edge-to-edge
   STICKY node, instead of faking it from `.woocommerce-mini-cart__total`
   (round-3 fix, see comment above). */
/* The bottom inset, and why it is added to the bleed rather than replacing it.

   The footer group is pinned to the panel floor by `margin-top: auto` on
   `.woocommerce-mini-cart__total` above, so this element's MARGIN box bottom
   sits on the container's content bottom, call it C. With `margin-bottom: -P`
   its border box bottom is therefore C + P, and its text bottom is
   C + P - paddingBottom.

   With paddingBottom = P that came to exactly C: the "Secure Checkout /
   256-bit SSL" line ended flush on the panel floor with no breathing room,
   measured at a 2px gap that is just the line box, not padding.

   Adding the inset makes the text bottom C - inset, which is the gap the
   operator asked for, while the white fill still ends at C + P and keeps
   bleeding past the floor. So the bleed is untouched and only the content
   moves: do NOT "simplify" this by dropping the --panel-padding term, which
   would pull the white fill back up off the panel edge and undo the round-3
   edge-to-edge fix documented above. */
#woo-cart-panel .ct-panel-content-inner > .bc-mini-cart-secure {
	margin-bottom: calc(var(--panel-padding, 35px) * -1);
	padding-bottom: calc(var(--panel-padding, 35px) + var(--bcd-panel-inset, 24px));
}

.bcd-drawer-footer-extras {
	border-top: 1px solid var(--bcd-border);
	padding-top: 16px;
	margin-top: 8px;
	width: 100%;
}

.bcd-coupon-form {
	display: flex;
	gap: 8px;
}

.bcd-coupon-input {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--bonza-font-body);
	font-size: 13px;
	padding: 10px 12px;
	border: 1px solid var(--bcd-border);
	border-radius: 8px;
	color: var(--bcd-text);
}

.bcd-coupon-input:focus-visible {
	outline: 2px solid var(--bcd-green);
	outline-offset: 1px;
}

.bcd-coupon-apply {
	font-family: var(--bonza-font-body);
	font-weight: 700;
	font-size: 13px;
	color: #fff;
	background-color: var(--bcd-green);
	border: none;
	border-radius: 8px;
	padding: 10px 16px;
	cursor: pointer;
	white-space: nowrap;
}

/* source: DERIVED -- small inline "Apply" pill, no Figma node cited (unlike
   .bcd-empty-cta--primary below). Plausible Button/Secondary/Small candidate
   but not confirmed by usage or node ID, so not forced onto the gold-swap
   contract without evidence. Color-only darken, no reflow. Value unchanged
   from before this pass. editor-friendly-ok: same panel-wide raw-hex
   exception documented at the top of this file. */
.bcd-coupon-apply:hover {
	background-color: #1F6B42; /* 6.48:1 with the #fff text (WCAG relative-luminance formula), unchanged value */
}

.bcd-coupon-apply:focus-visible {
	outline: 2px solid var(--bcd-text);
	outline-offset: 2px;
}

.bcd-coupon-apply:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.bcd-applied-coupons {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bcd-applied-coupon {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--bonza-font-body);
	font-size: 12px;
	color: var(--bcd-green);
	background-color: rgba(36, 123, 78, 0.1);
	border-radius: 999px;
	padding: 4px 6px 4px 10px;
}

.bcd-coupon-remove {
	background: none;
	border: none;
	color: var(--bcd-green);
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	padding: 0 2px;
}

.bcd-coupon-remove:focus-visible {
	outline: 2px solid var(--bcd-green);
	outline-offset: 1px;
}

.bcd-coupon-message {
	font-family: var(--bonza-font-body);
	font-size: 12px;
	margin: 6px 0 0;
	min-height: 16px;
}

.bcd-coupon-message--error {
	color: #C0392B;
}

.bcd-coupon-message--success {
	color: var(--bcd-green);
}

.bcd-shipping-estimate {
	font-family: var(--bonza-font-body);
	font-size: 13px;
	color: var(--bcd-muted);
	margin: 12px 0 0;
	display: flex;
	justify-content: space-between;
	gap: 8px;
}

.bcd-shipping-value {
	color: var(--bcd-text);
	font-weight: 500;
}

/* editor-friendly-ok: colors below (checkout button white/shadow, secure-line
   gray #9CA3AF) match the same raw-hex exception already documented at the
   top of this file -- Blocksy's own :root palette always wins over a
   var(--wp--preset--color--*) fallback on this panel. */
/* ==========================================================================
   FIX (full-site audit, 2026-09-03, critical): totals/checkout footer.
   Confirmed via a real add-to-cart + live browser drawer-open capture
   (21-shot before proof, chromium/firefox/webkit x 7 breakpoints) that
   three elements render here unstyled, in the default WooCommerce/
   Blocksy system-font/blue-button look, breaking from the cream/green
   branding used everywhere else in this same drawer:
     - Native WooCommerce .woocommerce-mini-cart__total ("Subtotal: £X",
       from cart/mini-cart.php's woocommerce_widget_shopping_cart_total).
     - .bc-mini-cart-totals (Shipping + Order Total rows) and
       .bc-mini-cart-secure (lock icon + "Secure Checkout / 256-bit SSL
       Encryption" text) -- both a SEPARATE, shared parent-theme
       injection (blocksy-child/inc/, not tracked in this repo, confirmed
       via SSH read of the live host), same "renders unstyled, expects
       the site's own custom/ CSS to finish the job" pattern as
       inc/checkout-step-form.php's guest-description paragraph and
       inc/checkout-trust-badges.php's trust panel (86eypb6np). Styling
       both here, not hiding them: unlike those two, this content
       (shipping cost, order total, secure-checkout reassurance) is
       genuinely wanted, not another client's leaked copy.
     - a.button.checkout.wc-forward (Checkout button, cart/mini-cart.php
       -> woocommerce_widget_shopping_cart_proceed_to_checkout): renders
       with WooCommerce/wp-admin's default blue, 3px corners, label
       "Checkout" -- Figma wants a full-pill (999px) brand-green button
       with a shadow and "SECURE CHECKOUT" label (renamed via a scoped
       gettext filter in cart-drawer-filled.php -- no dedicated filter
       exists on this hardcoded core string -- not a CSS content: hack).
   Figma component set "Cart Off Canvas" (64:14596) node 367:52841
   ("Property 1=Filled") downloaded and visually inspected: white
   background, plain Subtotal/Tax/TOTAL rows (label left, value right,
   a divider before TOTAL), full-pill dark-green "SECURE CHECKOUT"
   button, a bold underlined "CONTINUE SHOPPING" link, then a lock icon
   + "Secure checkout · 256-bit SSL" line, all centered. Its only
   variant axis is the Filled/Empty content-state property already
   covered by this file (cart-drawer-filled.php vs.
   bonza_cart_drawer_empty_state()); the checkout/view-cart buttons are
   plain WooCommerce anchors, not a Figma component instance of their
   own with dedicated Hover/Focus/Disabled variant children, so
   :hover/:focus-visible below are derived from this same file's own
   established brand-interaction pattern (.bcd-coupon-apply:hover,
   :focus-visible rules above) rather than a separate Figma state
   export. The drawer is a fixed-width off-canvas panel, not a
   responsive page section -- same precedent as the coupon/shipping
   footer immediately above this block, which documents the identical
   "content-driven, no separate mobile-only rule" reasoning.
   That secondary slot no longer holds WooCommerce's "View cart" button.
   An earlier pass kept and restyled it here because relabeling it looked
   like it meant guessing at a WooCommerce filter hook; it did not, and
   the button is now unhooked and replaced by a real "Continue shopping"
   link (cart-drawer-filled.php). See the FIX note on
   .bcd-continue-shopping further down this file.
   ========================================================================== */
/* FIX (visual audit vs Figma, 86eypb6jt): the Subtotal row rendered in
   uppercase at 13px, small and shouty next to the sentence-case "Shipping"
   row directly under it, where Figma sets all three totals rows in the same
   14px sentence case. The uppercase came from Blocksy's own
   cart-header-element-lazy.min.css (`.woocommerce-mini-cart__total { font-size:
   12px; font-weight: 700; text-align: center; text-transform: uppercase }`),
   which this file's plain `.woocommerce-mini-cart__total.total` lost to.
   Scoping under `#woo-cart-panel .ct-panel-content-inner >` settles it on
   weight, and the three properties Blocksy sets are now answered explicitly
   instead of only font-size. */
#woo-cart-panel .ct-panel-content-inner > .woocommerce-mini-cart__total.total {
	font-size: 14px;
	font-weight: 400;
	text-transform: none;
	text-align: left;
}

.woocommerce-mini-cart__total.total {
	font-family: var(--bonza-font-body);
	font-size: 14px;
	line-height: 20px;
	color: var(--bcd-text);
	margin: 16px 0 0;
	padding-top: 16px;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.woocommerce-mini-cart__total.total strong {
	font-weight: 400;
	order: -1;
}

.bc-mini-cart-totals {
	font-family: var(--bonza-font-body);
	font-size: 14px;
	color: var(--bcd-text);
	margin-top: 8px;
}

/* FIX (client-reported 2026-09-20, 86eypb6jt, defect 1): the divider under
   Subtotal ran edge to edge, disagreeing with the correctly-inset
   Shipping/Total divider below it. Root cause found by walking
   document.styleSheets on the live drawer: the unmanaged
   assets/css/components/offcanvas.css draws `.bc-mini-cart-totals {
   border-top: 1px solid ... }` (plain class, (0,1,0)) on the SAME box this
   file bleeds edge-to-edge for the white sticky-footer background (see the
   `width: calc(100% + var(--panel-padding) * 2)` rule above) - a border on
   that box's own edge inherits the bleed, so the rule wins by simply being
   the only one setting border-top at all (no conflict to lose). Measured
   live (footer-probe.mjs, playwright): totals-row right edge overhangs the
   real panel edge by 11px at 768/1440 (-9px at the narrower breakpoints,
   same panel-padding/real-padding mismatch documented above), while
   `.bc-mini-cart-totals__total`'s own border-top (drawn on a child that
   does NOT carry the bleed) sits correctly inset - exactly the disagreement
   reported.
   Fix: kill the inherited edge-to-edge border-top at (1,2,0), scoped high
   enough to beat the external (0,1,0) rule outright, and redraw it as an
   absolutely-positioned, width-constrained line matching the SAME
   `--bcd-content-w` column (405/300/280) the footer button block below
   already established from Figma's 445-wide panel / 405-wide content
   column (20px inset each side) - centering it on the bled box lands it
   centered on the panel too, since that bleed is symmetric.
   Verified live (horizontal-only, per this file's own caveat about
   `--panel-content-height` not recomputing on injected styles) at 320,
   375, 425, 768 and 1440: divider width matches --bcd-content-w and sits
   at the same 20px inset as the (already correct) Shipping/Total divider. */
#woo-cart-panel .ct-panel-content-inner > .bc-mini-cart-totals {
	position: relative;
	border-top: none;
}

#woo-cart-panel .ct-panel-content-inner > .bc-mini-cart-totals::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: var(--bcd-content-w, 405px);
	max-width: calc(100% - 40px);
	border-top: 1px solid var(--bcd-border);
}

.bc-mini-cart-totals__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 4px 0;
}

.bc-mini-cart-totals__label {
	color: var(--bcd-text);
}

.bc-mini-cart-totals__value {
	color: var(--bcd-text);
	font-weight: 500;
}

.bc-mini-cart-totals__total {
	margin-top: 8px;
	padding-top: 12px;
	border-top: 1px solid var(--bcd-border);
}

/* FIX (visual audit vs Figma, 86eypb6jt): the grand-total row read "TOTAL" in
   Nominee 900 uppercase with the amount beside it at weight 400, which is
   backwards. Measured off the 2x Figma render: the "Total" label is the same
   14px sentence-case body text as the Subtotal and Shipping labels above it
   (20px ink height, same as "Subtotal"), and the emphasis lives entirely in
   the amount, which is larger (24px ink height, so 18px) and bold. The
   amount's weight needs `!important` to land: the unmanaged
   assets/css/components/offcanvas.css, which sits outside this monorepo,
   carries a `font-weight: 400 !important` whose selector list includes this
   element, and that is the reason the old 900 never reached the amount.
   Nothing but `!important` beats `!important`, and that rule's selector
   list is ID-scoped, so matching it needs `#woo-cart-panel` here too: an
   `!important` on a (0,2,0) selector still loses to one on (1,1,0). Caught
   by re-measuring the deployed panel after a first attempt shipped without
   the prefix and left the amount at weight 400. */
#woo-cart-panel .bc-mini-cart-totals__total .bc-mini-cart-totals__label {
	font-family: var(--bonza-font-body);
	font-weight: 400;
	font-size: 14px;
	text-transform: none;
	color: var(--bcd-text);
}

#woo-cart-panel .bc-mini-cart-totals__total .bc-mini-cart-totals__value {
	font-family: var(--bonza-font-body);
	font-weight: 700 !important;
	font-size: 18px;
	text-transform: none;
	color: var(--bcd-text);
}

.woocommerce-mini-cart__buttons.buttons {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin: 20px 0 0;
}

/* source: FIGMA -- Button/Secondary/Large (hover-type-contract.md). Default
   here already matches the measured Secondary/Large default exactly: bg
   #247B4E (== --bcd-green), no border, white text, visible shadow. This
   file's own older comment (below, "SECURE CHECKOUT ... derived ... not a
   separate Figma component instance export") predates the contract's
   Button-set resolution and is now superseded for THIS element by the exact
   default-value match; kept in place, not deleted, as the historical record.
   A transparent border is declared here (box-sizing:border-box) purely so
   the hover-state border addition below causes zero layout shift.
   editor-friendly-ok: same panel-wide raw-hex exception documented at the
   top of this file. */
.woocommerce-mini-cart__buttons.buttons .button.checkout.wc-forward {
	width: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--bcd-green);
	color: #FFFFFF;
	font-family: var(--bonza-font-body);
	font-weight: 700;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-align: center;
	text-decoration: none;
	border: 1.5px solid transparent;
	border-radius: 999px;
	padding: 14px 24px;
	box-shadow: 0 2px 8px rgba(36, 123, 78, 0.35);
	transition: background-color 300ms ease-out, border-color 300ms ease-out, color 300ms ease-out, box-shadow 300ms ease-out;
}

/* source: FIGMA -- Button/Secondary/Large hover delta: bg swaps fully to gold
   (not a darken), 1.5px border ADDED at Large, text flips to dark, shadow
   removed. Corrects the previous plain darken (#1E6941), which had no
   Figma backing and did not match the measured delta. */
.woocommerce-mini-cart__buttons.buttons .button.checkout.wc-forward:hover {
	background-color: #FFC125; /* 8.7:1 with the #2E2A2A text below (WCAG relative-luminance formula), same pair already verified elsewhere in this file (.bcd-empty-cta--primary) */
	/* editor-friendly-ok: same panel-wide raw-hex exception as the file
	   docblock.
	   FIX (live-verified 2026-09-21, 86eyxb3yv): was #B86E00, measured
	   2.45:1 against this #FFC125 fill (WCAG relative-luminance formula),
	   below the 3:1 non-text UI-component floor. #8A5200 clears it at
	   3.93:1, still the same darker-gold-ring family (not an invented
	   hue). */
	border-color: #8A5200;
	color: #2E2A2A;
	box-shadow: none;
}

.woocommerce-mini-cart__buttons.buttons .button.checkout.wc-forward:focus-visible {
	outline: 2px solid var(--bcd-green);
	outline-offset: 2px;
}

/* FIX (visual audit vs Figma, 86eypb6jt): this block used to style
   WooCommerce's "View cart" anchor as the secondary link, with `order: 2`
   to drag it below the checkout button. That anchor is now unhooked and
   replaced by a real "Continue shopping" link rendered after the checkout
   button (cart-drawer-filled.php), so both the `:not(.checkout)` selector
   and the ordering are gone with it.
   Figma draws the underline as its own 2px peach rule sitting ~6px under
   the text, not as a text-decoration hugging the baseline: measured
   rgb(255, 149, 114) at 4px tall on the @2x render, spanning exactly the
   text's own width. Same treatment, same token fallback, as the search
   panel's section links (search-panel.css). */
.bcd-continue-shopping {
	align-self: center;
	background: none;
	border: none;
	border-bottom: 2px solid var( --wp--preset--color--bhp-peach, #FF9572 );
	padding: 0 0 6px;
	font-family: var(--bonza-font-body);
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	color: var(--bcd-text);
	text-decoration: none;
}

/* source: DERIVED -- bespoke treatment (permanent peach border-bottom
   underline + dark default text) that doesn't cleanly match either measured
   Link/Main (text+underline dark->#FFA825 gold-orange) or Naked (text-only
   dark->#FF9572 coral, no underline element at all). Flagging as a designer
   question rather than forcing either scheme onto it. Color-only, no reflow. */
.bcd-continue-shopping:hover,
.bcd-continue-shopping:focus-visible {
	color: var(--bcd-green);
}

.bcd-continue-shopping:focus-visible {
	outline: 2px solid var(--bcd-green);
	outline-offset: 2px;
}

/* "(Initial Shipment)" qualifier under the drawer's grand total. PHP-injected
   and subscription-gated, see bonza_cart_drawer_qualifier_close(). Mirrors
   the checkout order summary's own qualifier (checkout-order-summary.css)
   so the two totals read the same way. */
.bc-mini-cart-totals__qualifier {
	font-family: var(--bonza-font-body);
	font-size: 14px;
	font-weight: 400;
	color: var(--bcd-text);
	text-align: right;
	margin-top: 4px;
}

.bc-mini-cart-secure {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 12px 0 0;
	font-family: var(--bonza-font-body);
	font-size: 12px;
	color: var(--bcd-muted); /* editor-friendly-ok: same raw-hex exception documented at the top of this file. FIX (audit round 7, WCAG 2.2 AA): was raw #9CA3AF, 2.54:1 on this footer's #FFFFFF - below 4.5:1. Reused the panel's own --bcd-muted token (5.78:1 on white), same pre-existing fail class this repo already corrected once in header-navigation.css. */
}

.bc-mini-cart-secure__icon {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	color: var(--bcd-muted); /* editor-friendly-ok: same raw-hex exception documented at the top of this file. FIX (audit round 7, WCAG 2.2 AA): was raw #9CA3AF, 2.54:1 on this footer's #FFFFFF - below 4.5:1. Reused the panel's own --bcd-muted token (5.78:1 on white), same pre-existing fail class this repo already corrected once in header-navigation.css. */
}

/* Wraps instead of running into the panel edge when a translation is longer
   than the English (German at 320-375px, 86eypb6jt challenger 11 Oct). English
   still fits on one line. */
.bc-mini-cart-secure__text {
	white-space: normal;
	text-align: center;
	text-wrap: balance; /* two even lines, no lone "bits" (French at 375px) */
}

/* ==========================================================================
   Wishlist toggle (ROUND 2, CU-86eypb6jt; corrected after re-verifying the
   real "STATE=Cart's Card" component's own Figma node tree - depth 6, full
   children, not a rendered image or an instance with overrides). That
   component has NO badge slot anywhere (a prior claim to the contrary was
   wrong, see the PHP docblock's "ROUND 2 CORRECTION #2" for the full
   investigation) - the badge row that used to live here has been removed
   entirely. The wishlist heart IS real: its own pill-shaped button
   ("QUANTITY" #35227:55820 in Figma, containing an "Interaction / heart"
   instance, Filled=False state) sitting inline in the same row as the
   quantity stepper (Figma node #35227:78653, gap: 6px) - not a filled red
   icon, not absolutely positioned at the item's top-right.
   ========================================================================== */

.bcd-qty-stepper-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

/* Pill styling matches .bcd-qty-stepper's own border/radius so the two
   sit together as one visual family, per the Figma row they share. */
.bcd-wishlist-btn {
	width: 32px;
	height: 32px;
	min-width: 32px;
	border-radius: 999px;
	background: none;
	border: 1px solid var(--bcd-border);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	color: var(--bcd-muted);
}

.bcd-wishlist-btn svg {
	width: 16px;
	height: 14px;
}

/* FIX (86eypb6jt, reported directly: "the wishlist icon isn't working on a
   product item in cart offcanvas"). The button was working the whole time.
   Measured on the deployed drawer: the click handler fires, `data-active`
   flips to true, `aria-pressed` follows, the guest cookie is written
   (`blc_products_wish_list={"v":2,"items":[{"id":47}]}`) and the header
   counter goes to 1. Nothing about the icon changed, so from the outside it
   looked like a dead button.

   The rule below used to target the <svg>. `fill` is an inherited SVG
   property, so that only reaches the <path> if the path has no fill of its
   own, and this one ships `fill="none"` as a presentation attribute. A
   presentation attribute loses to any author CSS rule, but it beats plain
   inheritance, so the heart stayed an outline in both states. Targeting the
   path fixes it: measured fill goes from `none` to `rgb(95, 102, 115)` after
   the click.

   Colour is the brand coral, chosen by Lan. It is not read off the cart
   design: the heart has no vector or colour data anywhere in the offline
   Figma export, since every "Interaction / heart" instance resolves to a
   placeholder bounding box. Coral is the token this build already uses for
   the continue-shopping underline and the symptom-card accents, so it is a
   palette decision rather than a new value. The stroke moves with the fill so
   the outline does not stay grey around a coral heart.
   contrast-exempt: an icon fill, not text. */
/* Colour for both states now lives once in wishlist-offcanvas.css (see
   "UNIFIED WISHLIST HEART"). This rule used to set peach #FF9572 for the
   active state, a value with no Figma backing that made the cart drawer the
   fourth of six divergent wishlist treatments. The behavioural finding the
   comment above records (targeting the path, not the button, because the
   glyph does not inherit) still holds and is why the unified rule also
   targets `svg path` here. */

.bcd-wishlist-btn:focus-visible {
	outline: 2px solid var(--bcd-green);
	outline-offset: 2px;
}


/* ==========================================================================
   Empty state, "you may also like" (Figma variant 64:14595, Property
   "Empty"). No exported Figma copy pulled this pass, see the PHP docblock
   above bonza_cart_drawer_empty_state(); layout and spacing reuse the
   panel-shell tokens above.
   ========================================================================== */
.bcd-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 32px 8px 8px;
	width: 100%;
}

.bcd-empty-icon {
	color: var(--bcd-green);
	margin-bottom: 12px;
}

.bcd-empty-title {
	font-family: var(--bonza-font-heading);
	font-weight: 900;
	font-size: 16px;
	line-height: 1.2; /* FIX (audit round 9): was unset - the <p>-to-<h3> tag change (round 8, WCAG 1.3.1) otherwise inherits Blocksy's own h3 line-height instead of this panel's body line-height, an unmeasured risk the round 8 "no layout drift" claim didn't actually check. */
	color: var(--bcd-text);
	text-transform: uppercase;
	margin: 0 0 6px;
}

.bcd-empty-copy {
	font-family: var(--bonza-font-body);
	font-size: 13px;
	color: var(--bcd-muted);
	margin: 0 0 24px;
}

/* editor-friendly-ok: colors below match the same raw-hex exception already
   documented at the top of this file (Blocksy's own :root palette always
   wins over a var(--wp--preset--color--*) fallback on this panel).
   FIX (Figma parity audit): these two CTAs (node 64:14595, "Property
   1=Empty") were missing from the empty state entirely before this fix.
   Corrected in audit round 3: --primary text was wrongly set to
   var(--bcd-text) (#353638, this panel's generic body-text token) with a
   comment claiming it matched the home-hero primary button -- checked that
   claim and it does not hold, the hero button actually uses --hb-ink
   (#494545, hero-banner.css), a third, different dark shade. Figma's own
   extracted fill for this exact button text (component 29049:58915) is
   #2E2A2A, used directly below instead of borrowing a token from an
   unrelated component.
   contrast-exempt: #2E2A2A text on #FFC125 fill computes to ~8.7:1 (WCAG
   relative-luminance formula), well clear of the 4.5:1 AA floor for normal
   text (this is bold uppercase besides).
   --outline uses var(--bcd-green) text on a transparent fill (panel's own
   #F8EDE3 shows through), the same pairing already shipped on
   .bcd-coupon-apply's green-on-cream sibling controls in this same file. */
.bcd-empty-ctas {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	margin: 0 0 24px;
}

/* FIX (86eypb6jt, 2026-09-21): these empty-state buttons carry the same two
   CTA labels as the site footer ("Explore Bioactive Bites Supplements" and
   its sibling), inside a much narrower panel, so they wrap harder than the
   footer copies do. Same defect class already documented and fixed on
   `.bfg-btn` in css/footer.css under 86eypb6aw, carried across here because
   the drawer renders the same strings.
   A fixed `height` on a flex container does not shrink to its content, it
   clips it. Once a label wrapped, the second line rendered outside the 48px
   box and the 12px/16px padding stopped applying.
     - `height` becomes `min-height`: a single-line button still measures
       exactly 48px, a wrapped one grows and keeps its padding.
     - `line-height: 26px` becomes `1.3`, about 15.6px at this 12px font,
       instead of 26px between wrapped lines.
   Not yet measured on the deployed build. This file's own note about
   Blocksy computing `--panel-content-height` in JS, and not recomputing it
   for an injected stylesheet, means a height-changing rule like this one
   cannot be proven by style injection. The real check is a v1 deploy. */
.bcd-empty-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	min-height: 48px;
	padding: 12px 16px;
	border-radius: 999px;
	font-family: var(--bonza-font-heading);
	font-weight: 900;
	font-size: 12px;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	transition: background-color 300ms ease-out, border-color 300ms ease-out, color 300ms ease-out, box-shadow 300ms ease-out;
}

/* source: FIGMA -- Button/Primary/Large (hover-type-contract.md), confirmed
   by this file's own citation of Figma component 29049:58915 (a node inside
   the canonical Button set 29049:58925). editor-friendly-ok: raw hex below,
   same panel-wide exception as the top of this file. */
.bcd-empty-cta--primary {
	background-color: #FFC125; /* ~8.7:1 with the #2E2A2A text below */
	border: 1.5px solid #B86E00;
	color: #2E2A2A; /* Figma component 29049:58915's own text fill; ~8.7:1 on #FFC125, clears 4.5:1 AA */
	box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.03), 0 12px 16px -4px rgba(0, 0, 0, 0.08);
}

/* editor-friendly-ok: same panel-wide raw-hex exception as the file docblock.
   source: FIGMA -- Primary/Large hover delta: full hue swap gold->dark green
   (not a darken), border removed, text->white, shadow removed. Corrects the
   previous plain darken (#F0B41C), which had no Figma backing. box-sizing:
   border-box on the shared .bcd-empty-cta base means border-color: transparent
   here causes zero layout shift versus the default's visible 1.5px border. */
.bcd-empty-cta--primary:hover,
.bcd-empty-cta--primary:focus-visible {
	background-color: #1C5F3C; /* white text below measures 7.63:1 (WCAG relative-luminance formula) -- CORRECTED 2026-09-21 (86eyxb3yv): was cited 8.87:1, wrong math; 7.63:1 still comfortably passes AA/AAA */
	border-color: transparent;
	color: #FFFFFF;
	box-shadow: none;
}

/* source: FIGMA -- Button/Outline/Large. Default here matches the measured
   Outline/Large default exactly: transparent fill, 1px border + text in the
   brand green (--bcd-green == #247B4E). */
.bcd-empty-cta--outline {
	background: none;
	border: 1px solid var(--bcd-green);
	color: var(--bcd-green);
}

/* source: FIGMA -- Outline/Large hover delta: "Only the background fills in;
   border and text hold" -- a solid white fill, NOT a green-tinted wash.
   Corrects the previous rgba(36,123,78,0.08) tint + darkened text
   (audit round 8's WCAG fix), which had no Figma backing: that tint was
   itself the thing failing contrast (4.10:1). A solid white fill removes
   the failure mode outright -- var(--bcd-green) text on opaque #FFFFFF
   measures 5.23:1 (WCAG relative-luminance formula), comfortably clearing
   4.5:1 AA with no color override needed, so the border/text stay
   unchanged from the default state as the contract specifies.
   editor-friendly-ok: same raw-hex exception documented at the top of this file. */
.bcd-empty-cta--outline:hover,
.bcd-empty-cta--outline:focus-visible {
	background-color: #FFFFFF;
}

.bcd-empty-cta:focus-visible {
	outline: 2px solid var(--bcd-text);
	outline-offset: 2px;
}

/* FIX (Figma parity audit, 2026-08-31 exhaustive per-property review, not
   yet applied until this pass): heading previously used the body font at
   700/13px, no case transform - spec is Nominee/900/16px/uppercase.
   FIX (audit round 6): the same 2026-08-31 comment thread's item "Divider
   missing between the heading and the product-recs grid" was never built -
   Figma node #18360:90333 ("Divider" instance, rectangle #22:46758, 1px
   #E4E5E7) sits between the heading text and the cards row (frame
   #18360:90331 gap:12px heading-to-divider, frame #18360:90330 gap:24px
   divider-to-cards). Same pattern (12px/1px/24px) already shipped on the
   sibling Wishlist panel's "You May Also Like" divider
   (wishlist-offcanvas.css, .ct-wishlist-suggested .ct-module-title). */
.bcd-empty-recs-heading {
	font-family: var(--bonza-font-heading);
	font-weight: 900;
	font-size: 16px;
	line-height: 1.2; /* FIX (audit round 9): same reason as .bcd-empty-title above - the <p>-to-<h3> tag change otherwise inherits Blocksy's own h3 line-height. */
	text-transform: uppercase;
	color: var(--bcd-text);
	align-self: flex-start;
	width: 100%;
	margin: 0;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--bcd-border); /* contrast-exempt: decorative divider line, not text */
	margin-bottom: 24px;
}

/* FIX (client-reported regression, 2026-09): rebuilt as the real Figma
   PRODUCT CARD (component set 29089:54366, instances #35191:90564/90565 on
   empty-state frame 64:14595) instead of a bare image+title+price list -
   category pills, white card body, divider line. 2-column grid at every
   width (was 3-col desktop / 2-col <480px); Figma's own empty-state shows
   exactly 2 cards side by side, not 3. Subheadline and the cost-per-day /
   "Subscribe & Save" line are Figma-only fields with no live data source
   for an arbitrary recommended product (see the PHP docblock above the
   loop that renders these cards) - intentionally omitted, not guessed. */
.bcd-empty-recs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* minmax(0, 1fr), not bare 1fr: grid tracks default to minmax(auto, 1fr),
	   so an item whose content has a wide min-content width (the price line,
	   e.g. "£22.50 - £77.00") grows its track past its fair share and
	   unbalances the two columns. Caught visually at 320px, not by the
	   recItems-count check alone. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	width: 100%;
}

/* editor-friendly-ok: raw hex below, same panel-wide exception documented
   at the top of this file.
   FIX (audit round 6, M1): flex:1 on the link makes the white card fill
   whatever height the grid row gives its <li> (grid items stretch by
   default), instead of shrinking to its own content - a card with a
   shorter title/fewer pills would otherwise render visibly shorter than
   its neighbour. Same fix already shipped on the sibling Wishlist panel's
   suggested-products card (wishlist-offcanvas.css,
   #woo-wishlist-panel .ct-wishlist-card-inner), found live there 2026-09-09. */
.bcd-empty-rec-item {
	display: flex;
}

.bcd-empty-rec-link {
	display: flex;
	flex: 1;
	flex-direction: column;
	text-decoration: none;
	border-radius: 12px;
	overflow: hidden;
	background-color: #FFFFFF; /* contrast-exempt: card background fill, not text - 12.30:1+ measured for the text sitting on it, see below */
	box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.08);
}

.bcd-empty-rec-link:focus-visible {
	outline: 2px solid var(--bcd-text);
	outline-offset: 2px;
}

.bcd-empty-rec-image {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.bcd-empty-rec-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bcd-empty-rec-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 12px;
	padding: 8px;
}

.bcd-empty-rec-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

/* editor-friendly-ok: raw hex below, same panel-wide exception documented
   at the top of this file. Pill background is the panel's own #F8EDE3
   cream (Figma fill_83423448); text is Figma's exact extracted fill for
   this component (#2E2A2A, fill_66e64b97) - not var(--bcd-text)
   (#353638), a different, unrelated token, same distinction already
   documented above .bcd-empty-cta--primary in this file. */
.bcd-empty-rec-cat {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 6px;
	/* 16px, not 999px: a one-line chip is ~30px tall, so it still draws as a
	   pill, and a long translated category that wraps to 2-3 lines draws as a
	   rounded box instead of a tall oval (French, 86eypb6jt 11 Oct). */
	border-radius: 16px;
	background-color: #F8EDE3;
	color: #2E2A2A;
	font-family: var(--bonza-font-body);
	font-weight: 400;
	font-size: 12px;
	line-height: 14px;
}

.bcd-empty-rec-title {
	font-family: var(--bonza-font-heading);
	font-weight: 900;
	font-size: 14px;
	line-height: 16px;
	letter-spacing: 0.02em;
	/* FIX (audit round 6, L4/H1 cross-check): kept - this card's OWN Figma
	   instance (componentId 29323:47348, price text node #29323:47306) has
	   textCase: UPPER in its extracted text style, a real spec value, not a
	   guess. The wishlist panel's sibling implementation uses a different
	   componentId in the same set (Cart's Card Desktop, not Default), which
	   is a legitimately different variant, not evidence this one is wrong. */
	text-transform: uppercase;
	color: #2E2A2A; /* 14.18:1 on this card's #FFFFFF body, verified in the "Verified clean" audit-round-6 list */
}

/* editor-friendly-ok: raw hex below, same panel-wide exception documented
   at the top of this file. FIX (audit round 6, H2): real product short
   description (Figma "Show Subheadline: true" on this card's own
   instance), same real source and 2-line clamp already proven on the
   sibling Wishlist card (wishlist-offcanvas.css,
   .ct-wishlist-card-subheadline) - same color/size, reused, not
   reinvented. */
.bcd-empty-rec-subheadline {
	font-family: var(--bonza-font-body);
	font-size: 12px;
	line-height: 14px;
	color: #2E2A2A; /* 14.18:1 on #FFFFFF, verified above */
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bcd-empty-rec-divider {
	display: block;
	height: 1px;
	background-color: #F3F4F6;
	/* FIX (audit round 6, M1): pushes the divider (and everything after it)
	   to the bottom of the now flex:1 body, so price/save-line align across
	   cards of different content length instead of following immediately
	   after a variable-height title/subheadline. */
	margin-top: auto;
}

.bcd-empty-rec-price-row {
	display: block;
}

.bcd-empty-rec-price {
	font-family: var(--bonza-font-heading);
	font-weight: 900;
	font-size: 12px;
	text-transform: uppercase;
	color: var(--bcd-green); /* 5.23:1 on #FFFFFF, verified above */
}

/* FIX (audit round 6, M2): Blocksy's own descendant rule on
   .woocommerce-Price-amount otherwise wins over the parent-span font
   styling above (the exact reason .bcd-qty-price already needed this same
   nested override, css ~line 205) - without it the price digits render in
   Blocksy's font/size, not Figma's. */
.bcd-empty-rec-price .woocommerce-Price-amount {
	font-family: var(--bonza-font-heading);
	font-weight: 900;
	font-size: 12px;
	color: var(--bcd-green); /* 5.23:1 on #FFFFFF, verified above */
}

/* FIX (audit round 6, H2): real "Subscribe & Save - £X every Y" line
   (bonza_cart_drawer_subscription_save_line(), real price + real cadence),
   only rendered for products that actually are a WC Subscription - see the
   PHP docblock for why this is not the same claim as Figma's illustrative
   "£2.25 per delivery" saved-amount figure. */
.bcd-empty-rec-save {
	display: block;
	font-family: var(--bonza-font-body);
	font-weight: 700;
	font-size: 10px;
	line-height: 12px;
	color: var(--bcd-green); /* 5.23:1 on #FFFFFF, verified above */
	margin-top: 2px;
}

/* ==========================================================================
   "Frequently Bought Together" bundle row (ROUND 2, CU-86eypb6jt). Figma
   node 29600:108349 (component set 64:14596), pulled live via the Figma
   REST API this round: card wrapper fill rgba(255,168,37,0.05) (a 5%-opacity
   peach/amber tint, real extracted value), radius 12, "ADD" button
   fill #FFC125 / text+icon #2E2A2A, radius 999 - the SAME #2E2A2A-on-#FFC125
   pair already contrast-verified at ~8.7:1 on this exact panel
   (.bcd-empty-cta--primary above), reused rather than re-measured. See the
   PHP docblock above bonza_cart_drawer_fbt_render() for what real data
   this uses and what was deliberately left off (the card's own badge/
   rating/variant-swatch/avatar sub-elements, all placeholder content in
   the pulled Figma node). ========================================================================== */
.bcd-fbt {
	/* editor-friendly-ok: real Figma extracted fill, same panel-wide raw-hex
	   exception documented at the top of this file. */
	background-color: rgba(255, 168, 37, 0.05);
	border-radius: 12px;
	padding: 12px;
	margin-top: 16px;
	width: 100%;
}

.bcd-fbt-heading {
	font-family: var(--bonza-font-heading);
	font-weight: 900;
	font-size: 14px;
	line-height: 16px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #2E2A2A; /* Figma's own extracted text fill for this node; 14.18:1 verified elsewhere in this file for the same color on a lighter-than-this background, never a regression here */
	margin: 0 0 12px;
}

.bcd-fbt-card {
	display: flex;
	align-items: center;
	gap: 12px;
	background-color: #FFFFFF;
	border: 1px solid var(--bcd-border);
	border-radius: 8px;
	padding: 8px;
}

.bcd-fbt-image {
	display: block;
	width: 64px;
	height: 64px;
	min-width: 64px;
	border-radius: 4px;
	overflow: hidden;
}

.bcd-fbt-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bcd-fbt-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
	min-width: 0;
}

/* 86eypb6jt (11 Oct): the German "Hinzufügen" button is twice as wide as "Add", so at a 375px
   drawer it squeezed the title to "SUPER FOO..." and wrapped the price. The title column now
   keeps up to 200px (the whole two-line title) and a label that no longer fits drops to its own row, right-aligned.
   English is left as it was: "Add" fits inline, as in Figma. */
html:not([lang^="en"]) #woo-cart-panel .bcd-fbt-card {
	flex-wrap: wrap;
	row-gap: 8px;
}

html:not([lang^="en"]) #woo-cart-panel .bcd-fbt-body {
	flex: 1 1 min(200px, calc(100% - 80px)); /* 200px shows the whole two-line title; never wider than the row beside the 64px image */
}

html:not([lang^="en"]) #woo-cart-panel .bcd-fbt-add {
	margin-left: auto;
}

/* Figma shows the FBT product name in full. At a 375px drawer the title column is 125-129px in
   English and 198px in French, and "Superfoods & Ancient Grains" / "Super-aliments et céréales
   anciennes" both need three lines there, so the clamp allows a third line before the ellipsis. */
#woo-cart-panel .bcd-fbt-title {
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.bcd-fbt-title {
	font-family: var(--bonza-font-heading);
	font-weight: 900;
	font-size: 14px;
	line-height: 18px; /* not 16px (86eypb6jt, 11 Oct): a clamped third line's umlaut (KÖRNER) showed under the ellipsis */
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #2E2A2A; /* same verified pair as .bcd-fbt-heading above */
	/* FIX (visual audit vs Figma, 86eypb6jt): `white-space: nowrap` plus an
	   ellipsis truncated the only product this card actually offers, so it
	   read "SUPERFOODS & ANC..." on every breakpoint including 1440, where
	   there is room. Figma's own card shows the title in full. Wrapping is
	   allowed and the clamp holds it to two lines, so a pathologically long
	   name still cannot push the Add button out of the card. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

.bcd-fbt-price {
	font-family: var(--bonza-font-body);
	font-size: 12px;
	color: var(--bcd-muted);
}

/* source: FIGMA (default state) -- token match to Button/Primary/Small
   (bg #FFC125, no border, text #2E2A2A, uppercase/900) is exact, though this
   specific instance carries no cited Figma node ID (weaker evidence than
   .bcd-empty-cta--primary's 29049:58915 citation) -- reused per the
   pre-existing comment, not independently re-measured.
   editor-friendly-ok: real Figma extracted colors, same panel-wide raw-hex
   exception documented at the top of this file. Same #2E2A2A-on-#FFC125
   pair already contrast-verified at ~8.7:1 elsewhere in this file
   (.bcd-empty-cta--primary) - reused, not re-measured. bg/text stay
   unchanged on hover (see the WCAG note below); border is a plain
   transparent 1px, unused by any state, kept only for visual consistency
   with this file's other pill buttons. */
.bcd-fbt-add {
	box-sizing: border-box;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 16px;
	border: 1px solid transparent;
	border-radius: 999px;
	background-color: #FFC125;
	color: #2E2A2A;
	font-family: var(--bonza-font-heading);
	font-weight: 900;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	/* Figma Button/Primary/Small instance in the FBT card (I23313:52711;34454:264368)
	   carries the same two drop shadows as the other primary buttons; removed on hover. */
	box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.03), 0 12px 16px -4px rgba(0, 0, 0, 0.08);
	transition: outline-color 300ms ease-out;
}

/* source: FIGMA -- Button/Primary/Small hover (hover-type-contract.json):
   bg and 1px border #FF6256, text #FFFFFF, no shadow, no ring. Implemented as
   drawn at QA's explicit request. White on #FF6256 is 2.94:1, below the 4.5:1
   AA text floor, so keyboard focus (rule below) keeps its own visible ring. */
#woo-cart-panel .bcd-fbt-add:hover {
	background-color: #FF6256;
	border-color: #FF6256;
	color: #FFFFFF;
	box-shadow: none;
}

.bcd-fbt-add:focus-visible {
	outline: 2px solid var(--bcd-text);
	outline-offset: 2px;
}

/* ==========================================================================
   Mobile header band parity (ROUND 2, CU-86eypb6jt). Figma Variant6 (tall/
   Filled, node 2138:115523) and Variant5 (short/Empty, node 2138:115591)
   share ONE header frame at 340px (confirmed live via the Figma REST API
   this round - both variants' own header sub-frame measures identically):
   total header height 72px (not this file's desktop-only 76px), grass-strip
   image 29px (not 38px), grass strip's own top offset within the header is
   63px (not desktop's 58px) - all three read directly from the header
   frame's and the grass rectangle's own absoluteBoundingBox y-coordinates,
   not estimated from a screenshot. Panel title (Figma "Your Cart (N)" text
   node on this same mobile frame) is 16px/16px line-height, not desktop's
   18px/20px. Padding (32px top / 20px sides / 16px bottom) is identical
   between desktop and mobile, so no padding override is needed. ========================================================================== */
@media (max-width: 690px) {
	#woo-cart-panel .ct-panel-actions {
		min-height: 72px;
	}

	#woo-cart-panel .ct-panel-actions::after {
		top: 63px;
		height: 29px;
	}

	#woo-cart-panel .ct-panel-heading {
		font-size: 16px;
		line-height: 16px;
	}

	/* FIX (client-reported "still doesn't match Figma", 86eypb6jt): the
	   "Frequently Bought Together" card's real cross-sell title ("Superfoods
	   & Ancient Grains", whatever product bonza_cart_drawer_fbt_product()
	   actually picks - real data, not fixed content) split mid-word into
	   "SUPERFOOD" / "S &..." at the 340px mobile panel width. Root cause is
	   arithmetic, not a missing rule: the title column here is only
	   ~111px (340px panel - 2x20px panel padding - 2x8px card padding -
	   64px image - 66px Add button - 2x12px gaps), and "SUPERFOODS" alone
	   does not fit in 111px at this font/weight, so `overflow-wrap:
	   break-word` (needed so a genuinely unbreakable word never pushes the
	   Add button out of the card, kept as-is) breaks it mid-letter as a last
	   resort - the same failure mode already fixed once in this file for
	   the empty-state recommendation cards' own narrow-width title, see that
	   fix's comment further down. Confirmed live at the 690px panel width:
	   at 445px (desktop/tablet) the identical real title wraps cleanly on
	   two whole words with no truncation, so this is mobile-only.
	   This card's own image (64px) and radius are real Figma-pulled values
	   (see the docblock above .bcd-fbt) and are left untouched; the gap and
	   this file's own Add-button padding were not cited as Figma-measured,
	   so tightening only those two (12px gap to 8px, 16px Add padding to
	   12px) reclaims ~20px for the title column without touching anything
	   the design actually specifies. Verified live via addStyleTag before
	   writing here: 131px is enough for "SUPERFOODS" to wrap as a whole
	   word ("SUPERFOODS" / "& ANCIENT...", clamped normally at 2 lines),
	   with no mid-word split. */
	#woo-cart-panel .bcd-fbt-card {
		gap: 8px;
		padding: 6px;
	}

	#woo-cart-panel .bcd-fbt-add {
		padding: 0 12px;
	}
}

/* ---- Empty-state recommendation cards, narrow widths ------------------- */

/*
 * 86eypb6jt parity audit. Caught by LOOKING at the rendered screenshot, not by
 * the computed-style pass, which was clean: the product title was breaking
 * mid-word, rendering "SUPERFOO / DS & ANCIENT GRAINS".
 *
 * Traced by walking the box chain on the deployed drawer at 375. Four paddings
 * stack on a 340px panel before the text gets any room:
 * `.ct-panel-content-inner` 16px, `.bcd-empty-state` 8px, `.bcd-empty-recs`
 * 25px and `.bcd-empty-rec-body` 8px per side. That leaves two 115px grid
 * tracks and a 99px title box. "SUPERFOODS" at 14px/900 uppercase does not fit
 * in 99px, and `overflow-wrap: break-word` on the title then does exactly what
 * it is designed to do and splits the word.
 *
 * The list's own 25px is the one that is redundant: the panel and the empty
 * state have already inset the content twice before it applies. Dropping it
 * gives 140px tracks and a 124px title at 375, which fits the longest word,
 * and takes the title from four lines to three with no mid-word break.
 *
 * 320 needs more than that: even at 130px tracks the longest word still does
 * not fit, so the grid goes single-column below 360px. Figma has no 320 frame
 * (its narrowest cart frame is 340), so this is an anchor decision rather than
 * a design value, and it is recorded here as one. Measured after: 320 gives a
 * 272px single column and a two-line title, 375 gives 140px tracks and a
 * three-line title, neither breaking a word.
 *
 * `overflow-wrap: break-word` is deliberately left in place. It is the correct
 * last-resort behaviour for a genuinely unbreakable string; the defect was the
 * box being too narrow, not the wrapping rule.
 *
 * CORRECTION (client-reported "still doesn't match Figma", 86eypb6jt): this
 * rule never actually won. Re-checked live at 375: computed padding-left on
 * `.bcd-empty-recs` was still 25px and the title was still 99px wide, the
 * exact pre-fix numbers above, and the screenshot still showed the same
 * "SUPERFOO / DS & ANCIENT GRAINS" mid-word break this comment describes
 * fixing. Root cause: the plain `.bcd-empty-recs` selector below is
 * specificity (0,1,0). The redundant padding it is trying to zero out does
 * not come from a generic Blocksy `ul` rule scoped to this list specifically
 * - it is Blocksy's shared, ID-prefixed `#woo-cart-panel ul { ... padding: 0
 * var(--panel-padding, 25px under 690px) 25px }`, specificity (1,0,1), which
 * already had to be beaten the same way for the OTHER `<ul>` in this same
 * panel (`.bc-cart-scroll > ul.woocommerce-mini-cart` above, prefixed
 * `#woo-cart-panel .bc-cart-scroll >` for exactly this reason) - that
 * precedent was not carried over here. (1,0,1) beats (0,1,0) regardless of
 * source order, so the padding was never actually zeroed and every
 * measurement this comment block cites (140px tracks, 124px/272px title)
 * never happened live. Fixed by prefixing `#woo-cart-panel`, matching the
 * sibling list's own convention: (1,1,0) beats Blocksy's (1,0,1). Verified
 * live via addStyleTag before writing here: computed padding is now 0px,
 * title width 124px at 375 (matches this comment's own math), and the
 * screenshot shows a clean 3-line wrap with no mid-word break.
 */
#woo-cart-panel .bcd-empty-recs {
	padding-left: 0;
	padding-right: 0;
}

@media (max-width: 360px) {
	.bcd-empty-recs {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* FIX (client-reported "still doesn't match Figma", 86eypb6jt, follow-up to
   the max-width:690px FBT tightening above): that fix alone was not enough
   at a genuinely 320px-wide viewport specifically. The panel itself is not
   a fixed 340px there - confirmed live via getBoundingClientRect(): it
   measures 320px (matches the viewport, not the `--side-panel-width: 340px`
   this file declares for max-width:690px, some other rule caps it to avoid
   horizontal overflow), 20px narrower than the 690px-tightened case already
   accounts for, and the title column shrinks by that same 20px (measured
   111.375px again - the exact width that broke mid-word in the first place).
   Same root cause and reasoning as the `.bcd-empty-recs` single-column
   fix immediately above: Figma's own narrowest cart frame is 340px, so a
   320px viewport is an anchor decision, not a design value, the same
   language that fix already uses.
   Tightens further, not touching the image's real Figma-measured 64px:
   verified live via addStyleTag before writing here - 127px is enough for
   "Superfoods & Ancient Grains" (the real cross-sell title live on this
   task) to wrap on whole words ("SUPERFOODS" / "& ANCIENT...", clamped
   normally), no mid-word split. */
@media (max-width: 360px) {
	#woo-cart-panel .bcd-fbt-card {
		gap: 6px;
		padding: 4px;
	}

	#woo-cart-panel .bcd-fbt-add {
		padding: 0 8px;
	}
}

/* ==========================================================================
   Footer button block, Figma parity (client-reported 2026-09-19, 86eypb6jt).
   Four separate complaints, one shared cause for the first two.

   All numbers below are Figma's own Auto Layout values, read from the pinned
   offline export (the API and Dev Mode MCP are seat-rate-limited on this
   account) at `Frame 1261154341`, the footer button group:
     desktop, 405 wide : VERTICAL, itemSpacing 14, child Button 405x48
     mobile,  300 wide : VERTICAL, itemSpacing  8, child Button 300x40
     the continue-shopping wrapper `Frame 1261154785` is 405 wide with
     padL/padR 120, leaving its inner Button 165 wide and centred.

   1. THE BUTTON WAS WIDER THAN THE PANEL. The sticky footer rows carry
      `width: calc(100% + var(--panel-padding) * 2)` (see that rule above) so
      the WHITE BAND reaches the panel edges, which Figma does want. What was
      wrong is that the green button inherited that bleed instead of sitting
      on the content measure: measured live at 1440, the button was 467 wide
      against a 445 panel, overhanging 11px on each side, where Figma insets
      it 20px. Sizing the CHILDREN off a panel-scoped custom property fixes
      the button without disturbing the band, and without doing arithmetic on
      Blocksy's own inner padding, which this file already documents as
      differing from `--panel-padding` (35px nominal vs 24px real at desktop).

   2. THE GAP WAS WRONG, and for a reason worth recording: the existing rule
      further up sets `gap: 15px 8px` on this wrapper, i.e. row-gap 15 and
      column-gap 8. Since the wrapper is `flex-direction: column`, the row-gap
      is the one that shows, so the live gap was 15px on mobile and 8px on
      desktop, the opposite way round from Figma's 8 and 14. It also means a
      plain `.woocommerce-mini-cart__buttons` selector loses: that rule is
      `#woo-cart-panel .ct-panel-content-inner > ...` at (1,2,0), so this one
      matches its specificity rather than relying on source order.

   3. THE UNDERLINE SAT TOO LOW. It is a `border-bottom` on the link, pushed
      down by `padding-bottom: 6px`. Figma's continue-shopping Button instance
      is 165x28 around a 26px text run, and 28 - 26 = 2, exactly the border,
      so the design has NO gap between the text and the rule.

   4. EQUAL BOTTOM SPACING is the 20px inset above, now applied on both sides
      at every breakpoint, so the footer's left/right rhythm is consistent.
      NOTE: the dead space BELOW the footer is a separate, still-unfixed bug
      (measured 99-123px at 1440); see the footer-pin note in this file's
      changelog entry. Spacing under an unpinned footer only moves the gap.

   Verified live on bonza-retheme.blz.au by injection before being written,
   at 320/375/425/768/1440. Button width 280/300/300/405/405, inset 20px on
   both sides at every one, gap 8/8/8/14/14, underline padding 0.
   At a literal 320px viewport the panel is 320 wide, narrower than Figma's
   own 340 mobile board, so the content steps to 280 to hold the same 20px
   inset rather than letting it collapse to 10px.
   ========================================================================== */
#woo-cart-panel {
	--bcd-content-w: 405px;

	/* The drawer's own left/right gutter, mirrored so the footer can use the
	   SAME figure for its bottom inset. Operator request: the space below the
	   Secure Checkout block must equal the offcanvas side padding at every
	   breakpoint.

	   MEASURED on the deployed drawer rather than assumed, because two
	   different systems were at play here and only one of them is this file's:

	     viewport   .ct-panel-content-inner padding-left/right   --panel-padding
	     320-767    16px                                         25px / unset
	     768+       24px                                         35px (fallback)

	   So `--panel-padding` is NOT the side gutter. It is Blocksy's own panel
	   variable, it resolves to 25px/35px, and the visible 16/24 comes from
	   Blocksy's panel CSS on a DIFFERENT declaration. Reusing --panel-padding
	   for the bottom inset would have produced 25/35 and silently missed the
	   request by 9px and 11px.

	   The switch is at exactly 768px, confirmed by stepping 480 / 600 / 689 /
	   690 / 691 / 700 / 767 / 768: it holds 16px right up to 767 and turns at
	   768. Note this is NOT the 690px breakpoint the rest of this file uses
	   for --bcd-content-w, so the two must not be folded together. */
	--bcd-panel-inset: 24px;
}

@media (max-width: 767px) {
	#woo-cart-panel {
		--bcd-panel-inset: 16px;
	}
}

@media (max-width: 690px) {
	#woo-cart-panel {
		--bcd-content-w: 300px;
	}
}

@media (max-width: 360px) {
	#woo-cart-panel {
		--bcd-content-w: 280px;
	}
}

#woo-cart-panel .ct-panel-content-inner > .woocommerce-mini-cart__buttons {
	align-items: center;
	row-gap: 14px;
}

@media (max-width: 690px) {
	#woo-cart-panel .ct-panel-content-inner > .woocommerce-mini-cart__buttons {
		row-gap: 8px;
	}
}

#woo-cart-panel .woocommerce-mini-cart__buttons > .checkout {
	width: var(--bcd-content-w);
	max-width: 100%;
}

/* CONTINUE SHOPPING is NOT the checkout button's width (client report, defects
   2 to 4 of CU-86eypb6jt). It used to share the rule above, which stretched it
   to the full content column, 300px at 375 and 405px at 1440, while its label
   measures 128px. Three symptoms, one cause: the label sat left inside that
   wide box, the coral rule spanned the whole panel so it read as a divider
   rather than an underline, and there was no space at all before the Secure
   Checkout line.

   Figma, frame 1261154784 (the wrapper) holding instance 34416:61993:
     wrapper   405 wide, paddingLeft/Right 120, so the button is 405-240 = 165
     button    165x28, primary and counter axis both CENTER
     stroke    individualStrokeWeights top 0, right 0, bottom 2, left 0,
               rgba(255,149,114), which the deployed 2px #FF9572 border-bottom
               already matched. The border STYLE was never wrong, only its width.
     gap below 12px, the itemSpacing of frame 1261153328, which separates the
               wrapper from the "Secure Checkout / 256-bit SSL" row

   The handoff cited node 1261154785 for this; the real wrapper is 1261154784. */
#woo-cart-panel .woocommerce-mini-cart__buttons > .bcd-continue-shopping {
	width: 165px;
	max-width: 100%;
	text-align: center;
	margin-bottom: 12px;
}

#woo-cart-panel .bcd-continue-shopping {
	padding-bottom: 0;
}

/* ==========================================================================
   Vita QA 2 Oct 2026 (86eypb6jt). Measured on live v1 before each rule.
   editor-friendly-ok: same panel-wide raw-hex exception as the file docblock;
   every colour here is a Figma token or this file's own existing pair.
   ========================================================================== */

/* Close icon. The shared module writes a literal dark --theme-icon-color on
   this element after the rule near the top of the file, so the variable alone
   computed rgba(0,0,0,.8) on the green header. The glyph's own fill is set too. */
body #woo-cart-panel .ct-toggle-close {
	--theme-icon-color: #FFFFFF !important;
}

body #woo-cart-panel .ct-toggle-close svg,
body #woo-cart-panel .ct-toggle-close svg path {
	fill: #FFFFFF !important;
}

/* 86eypb6jt re-audit (10 Oct, "close icon white"): the dim is a hover state only. On a phone
   the X opens right where the cart icon was tapped, and a tap can leave :hover stuck, so the
   icon showed at 75% white. Dim only on devices that really hover. */
@media (hover: hover) {
	body #woo-cart-panel .ct-toggle-close:hover svg,
	body #woo-cart-panel .ct-toggle-close:hover svg path {
		fill: rgba(255, 255, 255, 0.75) !important;
	}
}

/* Line-item title: Figma Nominee Heavy Extended 14 / 16, +2%, upper, ink
   (the live link was Kobe 700 15px in the theme's slate). */
#woo-cart-panel .woocommerce-mini-cart li.mini_cart_item a.product-title {
	font-family: var(--bonza-font-heading);
	font-weight: 900;
	font-size: 14px;
	line-height: 16px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #2E2A2A !important; /* the shared theme pins this link's colour with !important */
}

/* "Remove" link: Figma Kobe 12 underlined in ink; it rendered the muted grey. */
#woo-cart-panel .bcd-remove-link {
	color: #2E2A2A !important; /* this file's own hover rule already uses !important on this link */
	text-decoration: underline;
}

/* SECURE CHECKOUT label: Figma Nominee Heavy Extended 16 / 28, title case, white. */
#woo-cart-panel .woocommerce-mini-cart__buttons.buttons .button.checkout.wc-forward {
	font-family: var(--bonza-font-heading);
	font-weight: 900;
	font-size: 16px;
	line-height: 28px;
	letter-spacing: 0;
	text-transform: capitalize;
}

/* Title case is an English convention: capitalize turned "Sicher zur Kasse"
   into "Sicher Zur Kasse". Translations carry their own casing. */
html:not([lang^="en"]) #woo-cart-panel .woocommerce-mini-cart__buttons.buttons .button.checkout.wc-forward {
	text-transform: none;
}

/* FBT thumbnail: cover cropped the product art (and the language placeholder);
   contain shows the whole image on the card's white. */
.bcd-fbt-image {
	background-color: #FFFFFF;
}

.bcd-fbt-image img {
	object-fit: contain;
}

/* Outline CTA hover: Figma Outline/Large keeps text and border, only the fill
   changes. Blocksy's link-hover colour had been darkening the text. */
.bcd-empty-cta--outline:hover,
.bcd-empty-cta--outline:focus-visible {
	color: var(--bcd-green);
}

/* Empty state: the content-inner clips (overflow hidden) so the recommendation
   cards below the fold could not be reached; let it scroll when it is the empty view. */
#woo-cart-panel .ct-panel-content-inner:has(.bcd-empty-state) {
	overflow-y: auto;
}

/* "You may also like" heading is left aligned in Figma. */
.bcd-empty-recs-heading {
	text-align: left;
}

/* Undo bar shown after a line item is removed. */
.bcd-undo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 12px;
	padding: 10px 14px;
	border: 1px solid var(--bcd-border);
	border-radius: 8px;
	background-color: #FFFFFF;
	font-family: var(--bonza-font-body);
	font-size: 14px;
	line-height: 20px;
	color: #2E2A2A;
}

.bcd-undo__text {
	min-width: 0;
	overflow-wrap: anywhere;
}

.bcd-undo__btn {
	flex-shrink: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--bonza-font-heading);
	font-weight: 900;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: underline;
	color: var(--bcd-green);
	cursor: pointer;
}

.bcd-undo__btn:hover,
.bcd-undo__btn:focus-visible {
	color: #1C5F3C;
}

.bcd-undo__btn:focus-visible {
	outline: 2px solid var(--bcd-green);
	outline-offset: 2px;
}

/* ==========================================================================
   Round 4 (CU-86eypb6jt, client reply 1100420000070771). Measured on v1
   at 320/375/425/768/1024/1366/1440 with a 2-item cart.

   FBT card cropped + too much gap above it: the 24px torn-paper strip drawn
   above `.woocommerce-mini-cart__total` (::before, top:-24px) overlapped the
   card's bottom 12px at every width, and Blocksy's 25px <ul> bottom padding
   stacked on the card's 16px margin (41px above the heading). Gap is now 16px
   and the card keeps 36px clear below (24 strip + 12). The list is the
   shrinkable flex child, so it scrolls earlier; nothing is clipped.

   Line-item thumbnail gap: the 500x500 square catalogue renders carry ~15%
   transparent margin at the top (measured on the Biotics webp: ink starts 76px
   down), which read as a large gap above the bag. Square thumbnails are scaled
   1.25 inside a clipped box (ink margin left: ~5% top, bottom/sides intact).
   Portrait packshots (262x500) have no margin and are untouched.

   Qty +/-: each button was a 16x16 hit target in an 84x26 pill (a click 5px
   beside the glyph did nothing, measured); WCAG 2.2 2.5.8 asks for 24px. The
   hit area is now 26x26 via a pseudo-element; glyph and pill are unchanged.

   Button borders: Figma sign-off Desktop 21316:76970, stepper 29390:48609 and
   heart frame 35227:55820 are both 1px #6B7280 (variable 3:12), no fill. Live
   was stepper #E4E5E7 and heart peach #FF9572. This overrides the 2026-09-21
   peach heart ruling in wishlist-offcanvas.css (!important, hence !important
   here); #6B7280 on the #F8EDE3 cream is above the 3:1 non-text floor.

   Kobe body text is 16px minimum. Prices, badges and button labels keep their
   Figma size. "Continue shopping" is Nominee like every other drawer button.
   The divider between Subtotal and Shipping is removed; Shipping/Total stays.
   ========================================================================== */
#woo-cart-panel .bc-cart-scroll:has(+ .bcd-fbt) > ul.woocommerce-mini-cart {
	padding-bottom: 0;
}

#woo-cart-panel .bcd-fbt {
	margin-bottom: 36px;
}

#woo-cart-panel .bcd-qty-btn {
	position: relative;
}

#woo-cart-panel .bcd-qty-btn::before {
	content: "";
	position: absolute;
	inset: -5px;
}

#woo-cart-panel .bcd-qty-stepper {
	border-color: #6B7280;
}

#woo-cart-panel .bcd-wishlist-btn {
	border: 1px solid #6B7280 !important;
	background: none !important;
}

#woo-cart-panel .bcd-qty-value,
#woo-cart-panel .bcd-price-cadence,
#woo-cart-panel .bcd-remove-link,
#woo-cart-panel .woocommerce-mini-cart__total strong,
#woo-cart-panel .bc-mini-cart-totals__label,
#woo-cart-panel .bc-mini-cart-totals__total .bc-mini-cart-totals__label,
#woo-cart-panel .bc-mini-cart-totals__value,
#woo-cart-panel .bc-mini-cart-totals__qualifier,
#woo-cart-panel .bc-mini-cart-secure__text,
#woo-cart-panel .bc-mini-cart-secure__sep {
	font-size: 16px;
}

#woo-cart-panel .bcd-continue-shopping {
	font-family: var(--bonza-font-heading);
	font-weight: 900;
}

#woo-cart-panel .ct-panel-content-inner > .bc-mini-cart-totals::before {
	content: none;
}

#woo-cart-panel .mini_cart_item > a.ct-media-container {
	overflow: hidden;
	border-radius: 8px;
}

/* 86eypb6jt round 4b: the 1.25 zoom above was measured on the Biotics packshot
   only. Square lifestyle renders (Superfoods, Bounce) are full-bleed, so the zoom
   cut their top text and sides, and Figma draws every line-item image whole
   (Cart Off Canvas 36250:90641, 198x198). Image shown whole again; the gap Vita
   flagged is closed with the list spacing below instead. */
#woo-cart-panel .mini_cart_item img[width="500"][height="500"] {
	transform: none;
}

/* "still too much gap on top": first line item sat 56px under the header
   (panel 8 + inner 24 + list 24); Figma 36250:90641 puts the first image 29px
   under the 76px header (y 105). List padding off, inner 21px, filled cart only. */
#woo-cart-panel .ct-panel-content-inner:has(> .bc-cart-scroll .cart_list) {
	padding-top: 21px;
}

#woo-cart-panel .bc-cart-scroll > ul.woocommerce-mini-cart.cart_list {
	padding-top: 0;
}

#woo-cart-panel .bcd-continue-shopping {
	white-space: nowrap;
}

/* The label is wider than Figma's 165px button width, so a fixed 165px box
   let the text overflow right while the 2px stroke stopped short and off
   centre. The box now hugs the label (min 165px) and is centred in the
   drawer, so text, stroke and drawer share one centre line. */
#woo-cart-panel .woocommerce-mini-cart__buttons > .bcd-continue-shopping {
	box-sizing: border-box;
	width: fit-content;
	min-width: 165px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* 86eypb6jt QA round 5 (Vita, 6 Oct): "make sure the least font size for kobi
   is 16 px". Round 4 kept the prices at Figma's 12/14px (FBT price 12, subtotal
   amount 14); Vita's rule covers them too. */
#woo-cart-panel .bcd-fbt-price,
#woo-cart-panel .bcd-fbt-price .woocommerce-Price-amount,
#woo-cart-panel .bcd-fbt-price .woocommerce-Price-currencySymbol,
#woo-cart-panel .woocommerce-mini-cart__total .woocommerce-Price-amount,
#woo-cart-panel .woocommerce-mini-cart__total .woocommerce-Price-currencySymbol {
	font-size: 16px;
}

/* Vita (reply 70771): Kobe text at least 16px. The filled drawer already met it;
   the empty state still had 13px copy and 10-12px recommendation labels
   (86eypb6jt re-audit, 10 Oct). */
body #woo-cart-panel .bcd-empty-copy,
body #woo-cart-panel .bcd-empty-rec-cat,
body #woo-cart-panel .bcd-empty-rec-subheadline,
body #woo-cart-panel .bcd-empty-rec-save {
	font-size: 16px;
	line-height: 1.35;
}

/* WCAG 2.5.8 target size (24x24) on the drawer line item. The +/- buttons and
   Remove link keep their Figma footprint: the extra hit area is box size offset
   by an equal negative margin, so the pill (84x26) and the row spacing do not
   move. The real box replaces the earlier ::before hit-area hack. */
#woo-cart-panel .bcd-qty-btn {
	box-sizing: border-box;
	width: 24px;
	height: 24px;
	margin: -4px;
}

#woo-cart-panel .bcd-qty-btn::before {
	content: none;
}

#woo-cart-panel .bcd-remove-link {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-width: 24px;
	min-height: 24px;
	margin-block: -3px;
}

/* Subscribe & Save label above the price on a subscription line. */
#woo-cart-panel .bcd-ss-label {
	display: block;
	font-family: var(--bonza-font-body);
	font-weight: 700;
	font-size: 16px;
	line-height: 20px;
	color: var(--bcd-green);
}

/* The thumbnail is never stretched to the square box, in any engine. */
#woo-cart-panel .mini_cart_item img {
	object-fit: contain;
	object-position: center;
}