/**
 * Bonza PDP: "Inside This Formula" (ClickUp 86eypb6me, PDP parity follow-up).
 * See product-page/inside-formula.php for the full docblock: Figma file
 * cY9QX6IwGVaaGI4r7J2RRF, "BASIC PRODUCT PAGE - D", Superfoods node
 * 34384:262743 and Biotics node 34920:66384.
 *
 * Config investigated: same as product-page-marketing.css, no Blocksy
 * Customizer surface exists for a bespoke marketing/data block like this.
 *
 * editor-friendly-ok: same exception this file's own PHP docblock records
 * -- restyles WooCommerce's after-summary output area, no Gutenberg
 * block/pattern counterpart exists to register add_editor_style() against.
 *
 * Depends on product-page-marketing.css for the shared --bppm-* custom
 * properties (defined on .bppm) and the .bppm-section/.bppm-eyebrow/
 * .bppm-btn base rules; loaded after it (see the enqueue in
 * inside-formula.php) so those cascade in correctly.
 *
 * Section background is white on both variants, matching Figma's own
 * frame background on this node for both Superfoods and Biotics.
 */

.bppm-formula {
	background: var(--bppm-white);
	text-align: center;
}

.bppm-formula__heading {
	font-size: 30px;
	line-height: 36px;
	color: var(--bppm-green);
}

/*
 * FIXED 2026-09-24 (ClickUp 86eypb6me, PDP round 2, q18/S12): color was
 * var(--bppm-ink) (#2E2A2A); the ledger's own text node
 * (I21316:76932;34384:262747, "45 named ingredients...") fills this at
 * rgb(116,110,96), i.e. var(--bppm-ink-muted), not the darker ink -- the
 * same muted tone already used for `.bppm-why__copy p`. max-width was an
 * arbitrary 720px; the node's own frame ("Frame 2147229720") is 800 wide at
 * every breakpoint, and the text itself measures 754.85px so it never wraps
 * inside that width -- 720px wrapped it one line early.
 */
.bppm-formula__lead {
	font-size: 20px;
	font-weight: 700;
	color: var(--bppm-ink-muted);
	max-width: 800px;
	margin: 0 auto 24px;
}

/*
 * FIXED 2026-09-24 (ClickUp 86eypb6me, Biotics follow-up q18/B5): walked the
 * Figma text node (I34926:77031;34920:66388, "Inclusion levels per 3g
 * chew:") in the 2026-09-23 desktop extract -- its fill is
 * rgb(0.1412,0.4824,0.3059), i.e. #247B4E, the same var(--bppm-green) this
 * file's parent stylesheet already defines, not var(--bppm-ink) as shipped.
 */
.bppm-formula__sub-lead {
	font-size: 20px;
	font-weight: 700;
	color: var(--bppm-green);
	margin: 0 0 24px;
}

/* Biotics-only "Gently made." intro card (ce-compare). */
.bppm-formula__compare {
	background: var(--bppm-cream);
	border-radius: 16px;
	padding: 32px;
	max-width: 800px;
	margin: 0 auto 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
}

.bppm-formula__compare-label {
	font-family: 'Nominee', var(--theme-font-family, sans-serif);
	font-weight: 900;
	font-size: 16px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--bppm-ink);
	margin: 0;
}

.bppm-formula__compare-body {
	font-family: 'Kobe1.1', var(--theme-font-family, sans-serif);
	font-size: 20px;
	line-height: 1.2;
	color: var(--bppm-ink);
	margin: 0;
	max-width: 736px;
}

/* Group/disclosure list shared by both variants. */
.bppm-formula__groups {
	max-width: 800px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: left;
}

/*
 * REVERTED 2026-09-24 (ClickUp 86eypb6me, PDP round 2, q18/S13): the M3 fix
 * above measured only ONE node -- "Frame 2147229810", the OPEN "Whole-Food
 * Foundation" group's outer wrapper, which genuinely is fills:null -- and
 * generalised that to every `.bppm-formula__group`. Re-walking the full node
 * tree (not just that one wrapper) shows the pattern is NOT uniform:
 * - The four COLLAPSED groups (Tri-Biotic Complex/Omega & Essential
 *   Fats/Joint & Mobility Support/View Full Nutritional Analysis -- Figma
 *   node ids 262818/262824/262806/34842:89609, all named "Frame 2147229816"
 *   et al.) each carry the cream fill (248,237,227 = #F8EDE3) DIRECTLY on
 *   their own outer frame, at 1px stroke rgba(0,0,0,0.12) -- not 0.06.
 * - The one OPEN group's outer wrapper is transparent, as M3 found, but its
 *   two children -- the summary row (I21316:76932;34384:262750, "Frame
 *   2147229721") and the body/content area holding the ingredient grid and
 *   PhytoPlus Blend copy (I21316:76932;34384:262756, "Frame 2147229809") --
 *   are BOTH filled the same #F8EDE3, contiguously, at the same 0.12
 *   stroke. Setting this class's own background/border to cream/0.12
 *   reproduces that exact same pixel result (one continuous cream card)
 *   more simply than duplicating the fill on two separate child wrappers,
 *   and correctly restores the four collapsed rows Figma always draws
 *   cream. Both node families independently verified in the same 2026-09-23
 *   ledger the M3 fix cited -- not re-guessed. Confirmed against the user's
 *   own reference screenshot too: sampled pixel (250,60) in the "Whole-Food
 *   Foundation" card reads #F6EAE0, matching cream within screenshot
 *   compression, not white.
 */
/*
 * CORRECTED 2026-09-24 (86eypb6me, q19 borders, user decision): Figma
 * (local extractor JSON, 2026-09-23) shows the OPEN/expanded group's outer
 * wrapper stroke is 1px rgb(0,0,0) at 0.06 opacity (Superfoods node
 * I21316:76932;34384:262749, Biotics I34926:91318;34920:66390); every
 * CLOSED group frame is 1px rgb(0,0,0) at 0.12 opacity (e.g. Superfoods
 * I21316:76932;34384:262818, Biotics I34926:91318;34920:66448), both with
 * cornerRadius 12. The prior flat 0.12-on-every-state rule below matched
 * the closed groups but not the open one. Split on the native [open]
 * attribute so the lighter stroke follows whichever group is expanded.
 */
.bppm-formula__group {
	background: var(--bppm-cream);
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 12px;
}

.bppm-formula__group[open] {
	border-color: rgba(0, 0, 0, 0.06);
}

/*
 * INTEGRATION NOTE 2026-09-24 (q18 batch merge, 86eypb6me): the q18/B6 fix
 * that used to live here (`.bppm-formula--biotics .bppm-formula__group {
 * background: var(--bppm-cream) }`) is now a redundant duplicate. It was
 * written when the base `.bppm-formula__group` rule above had no
 * background at all (a since-reverted S13 regression -- see that rule's
 * own comment); the S13 revert restored cream on every group, Superfoods
 * and Biotics alike, so this Biotics-scoped override supplied nothing the
 * base rule didn't already provide. Dropped rather than kept as a no-op.
 */
.bppm-formula__group summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 15px 12px;
	cursor: pointer;
	list-style: none;
}

.bppm-formula__group summary::-webkit-details-marker {
	display: none;
}

/*
 * Text +/- indicator standing in for Figma's own dash (expanded) / chevron
 * (collapsed) vector next to each group heading -- see the PHP docblock's
 * "accordion state is data" note. Decorative only: it duplicates the
 * native <details> open/closed state the browser already exposes to
 * assistive tech, so no aria-hidden/label is needed on a ::after pseudo.
 * Escaped codepoints (`\002B`/`\2212`), not the raw glyphs, so a minify
 * step that re-encodes without an explicit @charset cannot mangle them --
 * same convention the bullet rule further down this file already uses.
 */
.bppm-formula__group summary::after {
	content: '\002B';
	flex: 0 0 auto;
	font-size: 20px;
	line-height: 1;
	color: var(--bppm-ink);
}

.bppm-formula__group[open] > summary::after {
	content: '\2212';
}

/*
 * DIVIDER ADDED 2026-09-24 (86eypb6me, q19 divider audit, user report):
 * Superfoods' open-group header frame (I21316:76932;34384:262750, "Frame
 * 2147229721", 800x62) carries a REAL strokeBottomWeight:1 paint at
 * rgba(0,0,0,0.12) -- confirmed non-null `strokes`, not just the
 * always-present-but-unpainted strokeWeight defaults every frame in this
 * export carries. This is the divider between the group header and its
 * ingredient cards/PhytoPlus band. Biotics' equivalent header frame
 * (I34926:77031;34920:66391 in the same 2026-09-23 desktop extract) has
 * `strokes: null` -- no paint at all -- so this stays scoped to
 * .bppm-formula--superfoods, not applied to both product templates.
 *
 * SPACING ADDED 2026-09-24 (86eypb6me, q19 divider gap, user report "divider
 * lacks spacing like figma", Superfoods "Whole-Food Foundation" group). Named
 * the live winning rules first (document.styleSheets + el.matches() on
 * https://bonza-retheme.blz.au/product/vegan-plant-based-dog-food/): only
 * this file's own `.bppm-formula__group summary { padding: 15px 12px }` and
 * the `[open] > summary` border-bottom above govern the header, and only
 * `.bppm-formula__cards { padding: 0 12px 22px }` (line further down) governs
 * the cards grid -- no competing/higher-specificity rule anywhere else in
 * document.styleSheets, and getBoundingClientRect() confirmed the header's
 * own bottom edge and the cards grid's own top edge were the SAME pixel
 * (9670.17), i.e. the reported ~0px gap, precisely.
 *
 * The border itself is correctly full-bleed -- strokeAlign INSIDE on that
 * same 800-wide header frame, no inset -- so the live full-bleed line already
 * matches Figma; only the SPACE around it was missing. The header frame's own
 * paddingBottom:15 already matches `.bppm-formula__group summary`'s
 * `padding: 15px 12px` exactly (text to line = 15px, correct, no change
 * needed there). The missing gap BELOW the line: the parent open-group
 * wrapper (I21316:76932;34384:262749, "Frame 2147229810") has
 * itemSpacing:0/padding:0, so nothing there supplies it -- it comes from the
 * header's own next sibling, the content frame (I21316:76932;34384:262756,
 * "Frame 2147229809", wraps the cards grid + PhytoPlus band), which carries
 * paddingTop:22 (also paddingBottom:22/paddingLeft:12/paddingRight:12/
 * itemSpacing:22 between its own two children -- the existing
 * `.bppm-formula__cards` padding-bottom:22/12 L-R already reproduce three of
 * those four values; only padding-top was ever 0). This file has no element
 * for that wrapper frame -- `.bppm-formula__cards` is the markup's actual
 * first child after `summary` -- so adding padding-top:22px to it directly
 * supplies the missing 22px with no new element. Confirmed IDENTICAL at all
 * three breakpoints in the same 2026-09-23 extract: desktop
 * I21316:76932;34384:262756 (800w), tablet I23310:35546;34384:262756 (648w),
 * mobile I29629:112443;34384:262756 (348w) -- every one paddingTop/Bottom:22,
 * paddingLeft/Right:12 -- one rule, no breakpoint-specific media query
 * needed.
 *
 * The four Superfoods groups Figma drew CLOSED (Tri-Biotic Complex, Omega &
 * Essential Fats, Joint & Mobility Support, View Full Nutritional Analysis)
 * share this exact header component -- their own closed-state frames
 * (I21316:76932;34384:262818/262824/262806, "Frame 2147229816/17/14") carry
 * the identical padding:15/12/15/12 + strokeBottomWeight:1 this rule already
 * targets -- so the `[open] > summary` divider above already applies to them
 * too once a user expands one live. Figma drew these four CLOSED ONLY (no
 * open-state node exists for any of them in this export), so there is no
 * Figma content-frame to re-measure a gap value from the way 262756 was
 * measured above; the same 22px is applied below to `.bppm-formula__row-list`
 * (their shared expanded-content class, confirmed as each group's own direct
 * `<details>` child in inside-formula.php) as the only Figma-sourced value
 * this component has for header-to-content spacing, on the strength of the
 * identical header -- stated as an inference from the shared header, not a
 * re-measured Figma value, because Figma has none to measure here. Scoped
 * the same way as the divider itself (`.bppm-formula--superfoods` +
 * `[open] > summary`'s sibling selector family) and NOT touching the base
 * (unscoped) `.bppm-formula__row-list` padding, because that same class is
 * reused by Biotics' "View Full Composition"/"View Full Nutritional
 * Analysis" disclosures, which have no header divider (confirmed above,
 * Biotics' equivalent header frame strokes:null) and stay untouched per this
 * round's own scope.
 */
.bppm-formula--superfoods .bppm-formula__group[open] > summary {
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.bppm-formula--superfoods .bppm-formula__group[open] > .bppm-formula__row-list {
	padding-top: 22px;
}

.bppm-formula__group-summary-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bppm-formula__group-title {
	font-family: 'Nominee', var(--theme-font-family, sans-serif);
	font-weight: 900;
	font-size: 14px;
	text-transform: uppercase;
	color: var(--bppm-ink);
}

/*
 * --bppm-ink-muted is Figma's own rgb(116, 110, 96): 4.40:1 on the cream
 * group background, just under the 4.5:1 floor for text this size (14px
 * regular is not large text). #6B6558, the same one-step-darker remap
 * product-page-marketing.css already established for this identical
 * situation, clears at 5.02:1. editor-friendly-ok
 */
.bppm-formula__group-dose {
	font-family: 'Kobe1.1', var(--theme-font-family, sans-serif);
	font-weight: 400;
	font-size: 14px;
	color: #6B6558;
}

/*
 * editor-friendly-ok: #6B6558 (same remap as .bppm-formula__group-dose
 * above), not an opacity blend on --bppm-ink: an opacity value composites
 * toward whatever sits behind it (cream here, white inside
 * .bppm-formula__phyto), so its actual contrast is never a number this
 * file states -- it is only ever as good as an unguarded arithmetic
 * coincidence that a later background-colour change could quietly break.
 * An explicit colour is a stated, checkable value instead.
 */
.bppm-formula__placeholder,
.bppm-formula__row-list-note {
	font-style: italic;
	color: #6B6558;
	margin: 0;
	padding: 0 12px 22px;
	font-size: 14px;
}

.bppm-formula__row-list-note {
	font-style: normal;
	color: var(--bppm-ink);
	padding-bottom: 8px;
}

/*
 * Superfoods: 4-ingredient-card grid (Whole-Food Foundation). padding-top
 * ADDED 2026-09-24 (86eypb6me, q19 divider gap) -- see the divider rule's own
 * comment above for the full measurement: this 0 was the direct cause of the
 * reported ~0px header-to-card gap. 22px matches the wrapping content frame's
 * own paddingTop (I21316:76932;34384:262756) exactly, same value already
 * used for padding-bottom/left/right below.
 */
.bppm-formula__cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	padding: 22px 12px;
}

/* Re-QA 20 Oct: plain 1fr tracks cannot shrink below their content (120px icon plus
   long names), so the grid ran past its container and the right column was clipped
   at 320-420 and 720-770. minmax(0, 1fr) plus a shrinkable icon keeps it inside. */
.bppm-formula__card {
	min-width: 0;
	overflow-wrap: anywhere;
}

.bppm-formula__card {
	background: var(--bppm-white);
	border: 1px solid rgb(243, 244, 246);
	border-radius: 12px;
	padding: 16px 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

/*
 * Figma's per-ingredient illustration in a 120px circle ("ing-item-card").
 * CORRECTED 2026-09-23: this used to say no such asset existed and drew an
 * 80px cream stand-in. The eight illustrations were in the Figma export all
 * along; they are now imported to the Media Library and rendered here. The
 * cream fill stays as the placeholder while an image loads, or where one is
 * missing.
 */
.bppm-formula__card-icon {
	width: min(120px, 100%);
	aspect-ratio: 1;
	height: auto;
	border-radius: 999px;
	overflow: hidden;
	background: var(--bppm-cream);
	margin-bottom: 8px;
	flex: none;
}

.bppm-formula__card-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.bppm-formula__card-name {
	font-family: 'Nominee', var(--theme-font-family, sans-serif);
	font-weight: 900;
	font-size: 14px;
	color: var(--bppm-ink);
	margin: 0;
	text-align: center;
}

.bppm-formula__card-pct {
	font-family: 'Nominee', var(--theme-font-family, sans-serif);
	font-weight: 900;
	font-size: 16px;
	color: var(--bppm-green);
}

.bppm-formula__card-role {
	font-family: 'Kobe1.1', var(--theme-font-family, sans-serif);
	font-size: 14px;
	color: var(--bppm-ink);
	margin: 0;
	text-align: center;
}

/* Superfoods: PhytoPlus® Blend card, plain (not an accordion group). */
/*
 * CORRECTED 2026-09-23 (86eypb6me, q15): this used to render as its own
 * white bordered card, a sibling of the "Whole-Food Foundation" `<details>`
 * box, with left-aligned text. Figma draws it INSIDE that same accordion
 * box (same cream fill, no border/radius of its own, no white background),
 * directly below the 8 ingredient cards, separated only by a thin top
 * divider, and every line centred. inside-formula.php now nests the markup
 * to match; this rule drops the box styling and centres the text instead.
 * editor-friendly-ok: same no-Gutenberg-surface exception this file's own
 * PHP docblock records.
 */
/*
 * FIXED 2026-09-24 (ClickUp 86eypb6me, PDP round 2, q18/S14): border-top
 * removed. Walked the PhytoPlus block's own node (I21316:76932;34509:109001,
 * "Component 89") and its parent content frame (I21316:76932;34384:262756):
 * both stroke:null. No divider exists here in Figma; this line had no
 * source.
 */
.bppm-formula__phyto {
	padding: 16px 20px 20px;
	text-align: center;
}

.bppm-formula__phyto-title {
	font-family: 'Nominee', var(--theme-font-family, sans-serif);
	font-weight: 900;
	font-size: 16px;
	color: var(--bppm-ink);
	margin: 0 0 4px;
	text-align: center;
}

.bppm-formula__phyto-sub {
	font-family: 'Kobe1.1', var(--theme-font-family, sans-serif);
	font-weight: 700;
	font-size: 14px;
	/* editor-friendly-ok: #6B6558, same remap as .bppm-formula__group-dose
	   above, 5.02:1 -- now on the SAME cream group background as that rule
	   (this box no longer has its own white fill), so that measurement
	   applies unchanged rather than the stale "white inside .bppm-formula__phyto"
	   caveat a comment further up this file records for the old white box. */
	color: #6B6558;
	margin: 0 0 8px;
	text-align: center;
}

.bppm-formula__inline-toggle summary {
	display: block;
	padding: 0;
	font-family: 'Kobe1.1', var(--theme-font-family, sans-serif);
	font-weight: 700;
	font-size: 14px;
	color: #1F6B42; /* established remap, matches .bppm-accordion summary */
	text-decoration: underline;
	cursor: pointer;
	list-style: none;
}

.bppm-formula__inline-toggle summary::-webkit-details-marker {
	display: none;
}

/*
 * 86eypb6me S23: a plus sign was rendering after "Show all ingredients"
 * (Figma's toggle draws plain underlined text, no glyph). NAMED the winning
 * rule live via document.styleSheets rather than guessing: this file's own
 * `.bppm-formula__group summary::after { content: "+"; }` (line 138 above,
 * meant for the OUTER "Whole-Food Foundation" group's own disclosure row)
 * is a descendant selector with no direct-child combinator, so it also
 * matches the PhytoPlus toggle's `<summary>` -- inside-formula.php nests
 * `.bppm-formula__inline-toggle` INSIDE that same open `.bppm-formula__group`
 * `<details>` (see that file's 2026-09-23 "moved inside this <details>" note),
 * so the toggle's summary is a descendant of `.bppm-formula__group` too, and
 * the outer row's own "+"/"-" indicator leaked onto it. Both selectors are
 * (0,1,1); this rule sits later in the same file, so it wins by source order
 * and needs no extra specificity. `::marker` is zeroed alongside `::before`/
 * `::after` for the same defensive reason list-style:none + the WebKit-marker
 * rule above already exist: belt and braces against whichever pseudo an
 * engine actually reads for a leaked native/author marker.
 */
.bppm-formula__inline-toggle summary::marker {
	content: none;
}

.bppm-formula__inline-toggle summary::before,
.bppm-formula__inline-toggle summary::after {
	content: none;
}

/*
 * Blocksy/Perfmatters reset outlines in several places on this site, so a
 * keyboard user can lose the focus ring on a disclosure toggle with no
 * other affordance; matches the outline treatment .bpp-btn:focus-visible
 * already uses. Declared once here, after both selectors it targets have
 * already appeared above, to keep this file's specificity in ascending
 * source order.
 */
.bppm-formula__group summary:focus-visible,
.bppm-formula__inline-toggle summary:focus-visible {
	outline: 2px solid var(--bppm-green);
	outline-offset: 2px;
}

.bppm-formula__inline-toggle .bppm-formula__placeholder {
	padding: 8px 0 0;
}

/*
 * ADDED 2026-09-23 (86eypb6me, q16): the PhytoPlus 28-ingredient list this
 * toggle expands to, replacing the "not yet supplied" placeholder now that
 * production has confirmed all 28 names (see inside-formula.php docblock).
 * A plain comma-separated run rather than the .bppm-formula__row layout
 * (which pairs a name with a value); these 28 names carry no individual
 * value the way the composition/analysis rows do.
 */
.bppm-formula__phyto-list {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 6px;
	font-size: 14px;
	color: var(--bppm-ink);
}

.bppm-formula__phyto-list li:not(:last-child)::after {
	content: ",";
}

/* Biotics: ingredient cards within each open group. */
.bppm-formula__ingredients {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0 12px 22px;
}

.bppm-formula__ingredient {
	background: var(--bppm-white);
	border: 1px solid rgb(229, 226, 219);
	border-radius: 16px;
	padding: 12px;
}

.bppm-formula__ingredient-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 8px;
}

.bppm-formula__ingredient-title {
	font-family: 'Nominee', var(--theme-font-family, sans-serif);
	font-weight: 900;
	font-size: 12px;
	text-transform: none;
	color: var(--bppm-ink);
	margin: 0;
}

/*
 * Empty-by-default pill: Figma node "Dosage Label" reproduced by shape,
 * never by number unless a caller passes one -- see the PHP docblock
 * (ClickUp 86eypb6kn dosing dispute). `min-width`/`height` keep the pill
 * visible as a placeholder shape even with no text content.
 *
 * FIXED 2026-09-24 (86eypb6me, q18/B6): added the text styling ("Dosage
 * Text" node, I34926:91318;35039:62970, 2026-09-23 extract) that a
 * FILLED chip needs and never had -- fill rgb(0.1412,0.4824,0.3059) =
 * #247B4E (var(--bppm-green)), 'Kobe1.1' bold, padding 4px 10px replacing
 * the old fixed height/min-width now that real content can be present,
 * `white-space:nowrap` so "142.5mg active dosage" cannot wrap inside the
 * pill shape.
 *
 * CORRECTED 2026-09-24 (86eypb6me, q19 follow-up): the line above said
 * 14px; re-walking the SAME node this comment already cites shows
 * fontSize: 10 on "Dosage Text", not 14 -- the prior write-up did not
 * match its own source. Every other value on this rule (padding, radius,
 * background, color) was re-checked against the same node at the same
 * time and is unchanged; only font-size was wrong.
 */
.bppm-formula__dose-chip {
	display: inline-flex;
	align-items: center;
	min-width: 28px;
	min-height: 19px;
	padding: 4px 10px;
	border-radius: 6px;
	background: rgba(47, 160, 102, 0.102);
	color: var(--bppm-green);
	font-family: 'Kobe1.1', var(--theme-font-family, sans-serif);
	font-weight: 700;
	font-size: 10px;
	/* NEW-3/M19: a long dose list must wrap inside the card, not run past it. */
	white-space: normal;
	overflow-wrap: anywhere;
	max-width: 100%;
	flex: 0 1 auto;
}

/*
 * Hide the pill while it is EMPTY. Operator report 2026-09-21: it renders as a
 * grey rounded box in the top right of every ingredient card and reads as a
 * rendering fault.
 *
 * This does not overturn the decision above, it completes it. The 86eypb6kn
 * dispute is about the NUMBER, never the shape, and a pill with no number
 * inside it communicates nothing: Figma's "Dosage Label" is a shape WRAPPED
 * AROUND a figure, so without the figure there is no node being reproduced,
 * only a coloured rectangle.
 *
 * `:empty` rather than deleting the element, so the moment a real dose is
 * approved and printed into the span the pill reappears at its exact Figma
 * shape with no further CSS change. `bonza_pdp_formula_dose_chip()` and the
 * markup stay exactly as they are.
 */
.bppm-formula__dose-chip:empty {
	display: none;
}

/*
 * CORRECTED 2026-09-24 (86eypb6me, q19 divider audit, user report): this
 * rule drew its divider ABOVE the description (border-top, between the
 * card header and the description). Every Biotics ingredient card in the
 * 2026-09-23 desktop extract (checked all 8 cards across all 6 card-based
 * groups: Postbiotics, Probiotic, Prebiotics, Omega-3 & Omega-6, Gut &
 * Barrier Support, Antioxidants & Botanicals) has a real LINE node
 * (e.g. I34926:77031;35039:62972, 728w, rgb(229,226,219) op1, 1px) BELOW
 * the description and ABOVE the "Citations Section" (Clinical References)
 * -- never above the description. Its own card header frame ("Frame
 * 2147230039"/"Card 1 Header") carries no stroke. Measured gap: 12px from
 * description text to the line, 12px from the line to the citations block
 * (I34926:77031;35039:62971 bottom to :62972 = 12px; :62972 to :62973 top
 * = 12px), reproduced below as padding-bottom/margin-bottom instead of
 * the old padding-top/margin-bottom.
 */
.bppm-formula__ingredient-desc {
	font-family: 'Kobe1.1', var(--theme-font-family, sans-serif);
	font-size: 14px;
	color: var(--bppm-ink);
	margin: 0 0 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgb(229, 226, 219);
}

.bppm-formula__citations {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bppm-formula__citations-label {
	font-family: 'Kobe1.1', var(--theme-font-family, sans-serif);
	font-weight: 700;
	font-size: 14px;
	color: var(--bppm-ink);
	margin: 0;
}

.bppm-formula__citation-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bppm-formula__citation {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 14px;
	color: var(--bppm-ink-muted);
}

/*
 * CORRECTED 2026-09-24 (86eypb6me, q19 follow-up): this was a plain
 * rounded-rect swatch standing in for Figma's page-fold icon. The colour
 * values already matched Figma's "Doc Icon" node
 * (I34926:91318;35039:62976, 16x18) exactly -- rgba(36,123,78,.12) fill /
 * rgba(36,123,78,.5) stroke == #247B4E at those same two opacities -- so
 * only the SHAPE was wrong. Both real vector paths ("Page" and "Fold")
 * pulled verbatim from the extracted SVG assets and combined into one
 * inline background-image at the node's own 16x18 size, same colour
 * values now expressed as SVG paint instead of CSS background/border.
 */
.bppm-formula__citation-icon {
	flex: 0 0 auto;
	width: 16px;
	height: 18px;
	margin-top: 2px;
	background-image: url("data:image/svg+xml,%3Csvg width='16' height='18' viewBox='0 0 16 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H9L14 5V18H0V0Z' fill='%23247B4E' fill-opacity='0.12'/%3E%3Cpath d='M8.79297 0.5L13.5 5.20703V17.5H0.5V0.5H8.79297Z' stroke='%23247B4E' stroke-opacity='0.5'/%3E%3Cpath d='M9.5 0V5H14.5' stroke='%23247B4E' stroke-opacity='0.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
}

/*
 * CORRECTED 2026-09-24 (86eypb6me, q19 follow-up): Figma's "Citation
 * Title" node (I34926:91318;35039:62980) is var(--bppm-green) at 12px,
 * not var(--bppm-ink) inheriting the parent's 14px -- the only rule that
 * matches this selector on the live page (browser_evaluate walk of
 * document.styleSheets, 2026-09-24), so no cascade conflict to reconcile.
 */
.bppm-formula__citation cite {
	font-style: normal;
	font-weight: 700;
	font-size: 12px;
	color: var(--bppm-green);
}

/*
 * Figma draws the finding as its own short line under the citation title,
 * marked with a leading round marker rather than joining title and finding
 * inline with punctuation. One citation only, so a real <ul> is not
 * warranted here; the marker is drawn with a CSS pseudo-element instead.
 * The `/ ''` alternative-text form tells VoiceOver/NVDA to skip announcing
 * "bullet" for this purely visual marker. A browser that does not parse the
 * `/ alt` syntax (Firefox before 128, Safari before 17.4) drops that whole
 * declaration, so the plain form comes first and stays as the fallback; the
 * marker is never lost, only announced. Found by the pre-push code review.
 */
.bppm-formula__citation-finding::before {
	content: '\2022\0020';
	content: '\2022\0020' / '';
}

/*
 * CORRECTED 2026-09-24 (ClickUp 86eypb6me, Biotics follow-up q18/B7):
 * walked the "View Full Composition" node in the 2026-09-23 desktop
 * extract node-by-node (I34926:91318;35039:66641, "Ingredient Declaration
 * Table") rather than the surrounding accordion group this file already
 * covers: cornerRadius 16 (not this file's usual 12), fill #F8EDE3 (this
 * group's own .bppm-formula--biotics rule above already supplies that),
 * a 1px solid rgb(0.1804,0.1647,0.1647) = #2E2A2A stroke (not the usual
 * rgba(0,0,0,0.06)), and each "Row - <name>" child carries its own fill:
 * transparent on the FIRST row (1-indexed odd rows), solid #FFFFFF on the
 * second (even rows) -- confirmed on two consecutive rows via their own
 * `fills` arrays, not assumed. No per-row border in the extract (no
 * `strokes` on any Row frame), so the old per-row divider is removed in
 * favour of the alternating fill Figma actually draws. Horizontal padding
 * moves from the list (12px) onto each row (Figma's own 16px) so the
 * alternating fill reaches the full card width.
 *
 * MOVED 2026-09-24 (86eypb6me, q19 follow-up): the border/radius/clip
 * above used to sit on `.bppm-formula__group--table` (the WHOLE
 * accordion box: title, intro copy, and rows together). Re-walking both
 * table nodes (Composition: I34926:91318;35039:66641; Nutritional
 * Analysis: I34926:91318;35039:67197, "Nutritional Analysis Table",
 * same cornerRadius 16 / same #2E2A2A 1px stroke / clipsContent true)
 * shows the border wraps ONLY the row table -- the group's own title and
 * intro-copy siblings sit OUTSIDE both nodes, at the same tree depth, not
 * inside them. The `--table` modifier class is gone (it carried nothing
 * else); `.bppm-formula__row-table` below is now on the row list itself
 * (Composition, a single <ul>) or on a wrapper div around all four
 * Nutritional Analysis sub-sections together, since Figma draws that as
 * one continuous bordered card, not four.
 */
.bppm-formula__row-table {
	border: 1px solid #2E2A2A;
	border-radius: 16px;
	overflow: hidden;
}

/* Biotics: "View Full Composition" / "View Full Nutritional Analysis" rows. */
.bppm-formula__row-list {
	list-style: none;
	margin: 0;
	padding: 0 0 12px;
	display: flex;
	flex-direction: column;
}

.bppm-formula__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 16px;
	font-size: 14px;
}

.bppm-formula__row-list .bppm-formula__row:nth-child(even) {
	background: var(--bppm-white);
}

.bppm-formula__row-name {
	color: var(--bppm-ink);
	flex: 1 1 auto;
	min-width: 0;
}

/* editor-friendly-ok: #6B6558, same remap as .bppm-formula__group-dose --
   14px bold sits under the large-text threshold, so --bppm-ink-muted's
   4.40:1 on the cream .bppm-formula__group background fails the 4.5:1 AA
   floor here too; this value is currently always empty (see file docblock)
   but is styled to the same accessible standard as filled text regardless. */
.bppm-formula__row-value {
	color: #6B6558;
	font-weight: 700;
	min-width: 24px;
	text-align: right;
	flex: 0 0 auto;
	white-space: nowrap;
}

.bppm-formula__analysis-heading {
	font-family: 'Nominee', var(--theme-font-family, sans-serif);
	font-weight: 900;
	font-size: 12px;
	text-transform: uppercase;
	color: var(--bppm-ink);
	margin: 0;
	padding: 8px 12px 4px;
}

/*
 * REMOVED 2026-09-23 (86eypb6me, q17): this file used to carry
 * `.bppm-formula__basket-link`/`--inline` here for an "add to basket"
 * button both Figma frames actually draw with `visible: false` -- see
 * inside-formula.php's own docblock and bonza_pdp_how_it_works_section()'s
 * `mech-stage` note for the same disabled-legacy-layer pattern found
 * elsewhere on this page. The markup and its two call sites are gone;
 * these two now-dead rules are removed with them rather than left orphaned.
 */

/* Mobile, Blocksy's own breakpoint (690px), same convention
   product-page.css/product-page-marketing.css already use. */
@media (max-width: 690px) {
	.bppm-formula__heading {
		font-size: 20px;
		line-height: 1.2;
	}

	.bppm-formula__lead,
	.bppm-formula__sub-lead {
		font-size: 18px;
	}

	.bppm-formula__group-title,
	.bppm-formula__group-dose,
	.bppm-formula__card-name,
	.bppm-formula__card-role {
		font-size: 12px;
	}

	.bppm-formula__card-pct {
		font-size: 14px;
	}

	.bppm-formula__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bppm-formula__compare-body {
		font-size: 16px;
	}
}

/* S8: every ingredient name in capitals, whatever case the data uses. */
.bppm-formula__card-name {
	text-transform: uppercase;
}

/* S16/B10: the in-copy link to this section stands out from the prose. */
.bppm-link-formula,
.bppm-link-formula:visited {
	color: #247B4E;
	font-weight: 700;
	text-decoration: underline;
}

.bppm-link-formula:focus-visible {
	outline: 2px solid #247B4E;
	outline-offset: 2px;
}

/*
 * M20: DE/NL compounds are wider than the card, so the heading takes the full
 * card width (float spacer keeps only line 1 clear of the marker). Decision 23 Oct
 * (Lan): the heading keeps its 16px size (never smaller than the description) and
 * wraps onto two or more lines instead of shrinking; a compound wider than the box
 * hyphenates (lang attribute) or breaks at the box edge, so nothing leaves the card.
 */
@media (max-width: 500px) {
	.single-product .bppm-formula__group > summary {
		display: block;
		padding-inline-end: 12px;
	}

	html .single-product .bppm-formula__group > summary::after {
		top: 15px;
		transform: none;
	}

	.bppm-formula__group-summary-text {
		display: block;
		min-width: 0;
	}

	.single-product .bppm-formula__group > summary .bppm-formula__group-title {
		display: block;
		font-size: 16px;
		overflow-wrap: anywhere;
		word-break: normal;
		hyphens: auto;
	}

	.bppm-formula__group-title::before {
		content: '';
		float: right;
		width: 26px;
		height: 1.2em;
	}
}

/* M20: at 360px and below, narrower summary padding gives the wrapped heading more room. */
@media (max-width: 360px) {
	.single-product .bppm-formula__group > summary {
		padding-inline: 4px;
	}

	html .single-product .bppm-formula__group > summary::after {
		right: 4px;
	}
}

/*
 * M19 (z8udzkgnh5): the longest single word in an active-ingredient name
 * ("(Methylsulfonylmethane)", "(RRR-Alpha-Tocopherol)") is ~15.2em wide and is
 * not split (G39), so at 360px and below it ran past the card edge. The card's
 * text box is 100vw - 132px here, so the title font scales with it; wrapping
 * still happens at the space or the "(". At 420px and up the 16px size fits.
 */
@media (max-width: 420px) {
	.single-product .bppm-formula__ingredient .bppm-formula__ingredient-title {
		font-size: clamp(11px, calc((100vw - 132px) / 15.8), 16px);
		overflow-wrap: normal;
		word-break: normal;
		hyphens: manual;
	}
}

/*
 * M20 follow-up (z8udzkgngt): DE/NL ingredient-card names and descriptions ("Kartoffelprotein",
 * "Aminosaeureverdaulichkeit", "Schmackhaftigkeitsverstaerker") are wider than the 95-103px text
 * box of a two-column phone card. Decision 23 Oct (Lan): phones show two cards per row in every
 * language, as in Figma; the wrapping rule that keeps long words inside the card is the last
 * block of this file.
 */
@media (max-width: 520px) {
	/* Every language shares one layout on phones: two columns. */
	.bppm-formula__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * M20 follow-up 2 (z8udzkgngt): above 520px the DE/NL/FR/ES cards still cut long words
 * at the 4-column and 2-column widths. Same rule as below 520px (no split, no hyphenation,
 * G39): 2 columns from 521 to 1023px, and a font that follows the card's own width
 * (container query, floor 11px). English is left as it was.
 */
@media (min-width: 521px) {
	html:not([lang^="en"]) .single-product .bppm-formula__card {
		container-type: inline-size;
	}

	html:not([lang^="en"]) .single-product .bppm-formula__card-name,
	html:not([lang^="en"]) .single-product .bppm-formula__card-role {
		font-size: clamp(11px, calc((100cqw - 28px) / 13.2), 16px);
		overflow-wrap: normal;
		word-break: normal;
		hyphens: manual;
	}
}

@media (min-width: 521px) and (max-width: 1023px) {
	html:not([lang^="en"]) .bppm-formula__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * M20 follow-up 3 (z8udzkgngt): English cards cut words too ("Chickpeas", "Nutritional",
 * "Ashwagandha" at 320-425 and 768). Columns stay as they are; the same no-split text rules
 * and the card-width font (floor 11px) apply at every width.
 */
html[lang^="en"] .single-product .bppm-formula__card {
	container-type: inline-size;
}

html[lang^="en"] .single-product .bppm-formula__card-name,
html[lang^="en"] .single-product .bppm-formula__card-role {
	font-size: clamp(11px, calc((100cqw - 28px) / 13.2), 16px);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
}

/*
 * M20 (z8udzkgngt, 23 Oct): on phones the cards are two per row in every language, so a long
 * name or description hyphenates (lang attribute) or breaks at the card edge instead of
 * running past it. Last in the file so it outranks the per-language no-split rules above.
 */
@media (max-width: 520px) {
	html[lang] .single-product .bppm-formula__card {
		container-type: inline-size;
	}

	html[lang] .single-product .bppm-formula__card-name,
	html[lang] .single-product .bppm-formula__card-role {
		font-size: clamp(11px, calc((100cqw - 28px) / 13.2), 16px);
		overflow-wrap: anywhere;
		word-break: break-word;
		hyphens: auto;
	}
}