/**
 * Bonza, "Subscribe & Save" PDP band (ClickUp 86eypb6me follow-up). See
 * product-page/subscribe-band.php for the full docblock: Figma file
 * cY9QX6IwGVaaGI4r7J2RRF, "Frame 2147230054", Superfoods node 35066:79645 /
 * Biotics node 35066:75544.
 *
 * editor-friendly-ok: same documented exception product-page-marketing.css
 * already uses -- this restyles WooCommerce's own after-summary output area,
 * which has no Gutenberg block/pattern counterpart to register
 * add_editor_style() against.
 *
 * Tokens: reuses the .bppm custom-property scope (--bppm-amber, --bppm-ink,
 * --bppm-green, --bppm-white) already declared on .bppm in
 * product-page-marketing.css, and the shared .bppm-section /
 * .bppm-eyebrow / .bppm-eyebrow--on-amber / .bppm-btn / .bppm-btn--primary
 * classes from that same file rather than redeclaring any of them here.
 *
 * Contrast: the paragraph below is SUPERSEDED, kept for the history of why
 * ink was tried first -- see the perk-icon rule's own 2026-09-24 comment.
 * ORIGINAL NOTE: green-on-amber measures 2.71:1 (fails the WCAG 1.4.11 3:1
 * floor for a non-text UI graphic), so the perk check-icon's `color` -- which
 * sets the circle's `currentColor` fill via bonza_pdp_check_icon_svg() -- is
 * the ink token instead (7.35:1 on amber), not the green already used for
 * the same icon on a white/cream background elsewhere on this page
 * (.bpp-trust-row svg in product-page.css). Verified with the same WCAG
 * relative-luminance formula the rest of this project's contrast notes use.
 * That reasoning assumed the perk list sits directly on the amber band; it
 * does not -- .bppm-subscribe__card (below) already wraps the whole band's
 * content, including the perk list, in a WHITE box (confirmed live via
 * icon.closest('.bppm-subscribe__card')), so the icon was never actually on
 * amber to begin with.
 */

/*
 * FIXED 2026-09-24 (ClickUp 86eypb6me, PDP round 2, item 4b / q30): this
 * band is the LAST child (confirmed by walking the full 19-child order) of
 * the Figma frame that wraps the whole marketing stack below the buybox
 * ("Frame 2147230002", both variants, all three breakpoints), which itself
 * carries cornerRadius {topLeft:0, topRight:24, bottomRight:24,
 * bottomLeft:24} -- identical 24px at desktop/tablet/mobile. This band's
 * own frame ("Frame 2147230054") has no cornerRadius of its own; the round
 * corners only exist on the outer wrapper. Since this band sits last, its
 * OWN bottom-left/bottom-right corners are exactly where that wrapper's
 * bottom radius becomes visible -- reproduced here on just this section
 * rather than the whole stack, matching the user's own "section should have
 * rounded bottom" framing and the horizontal inset each `.bppm-section` box
 * already draws (product-page-marketing.css's --bppm-gutter pattern,
 * unchanged by this fix). No change to any earlier section: none of them
 * sits at either end of that wrapper, so none shows this radius in Figma.
 */
.bppm-subscribe {
	background: var(--bppm-amber);
	border-radius: 0 0 24px 24px;
	text-align: center;
}

/*
 * CORRECTED 2026-09-23 (86eypb6me, q30): a fresh, direct Figma extraction
 * (see the PHP file's own header docblock) found the white rounded card
 * this section's own content sits inside, on both variants: "build your
 * dog routine" node, 800x455.88, cornerRadius 16, x292/y64 on the
 * 1384-wide amber frame (i.e. centred, 292px clear either side at that
 * width, not full-bleed). Padding is not a drawn node -- reuses this
 * page's own established 48px/64px boxed-section figure (see the file
 * docblock).
 */
.bppm-subscribe__card {
	background: var(--bppm-white);
	border-radius: 16px;
	max-width: 800px;
	margin: 0 auto;
	padding: 48px 64px;
}

/*
 * FIXED 2026-09-24 (ClickUp 86eypb6me, Biotics follow-up, B1): color was
 * var(--bppm-ink) (rgb(46,42,42)), measured live via document.styleSheets ->
 * .bppm-subscribe__heading (0,1,0) beating Blocksy's own `h2` rule (0,0,1).
 * Figma's "Heading 3" text node in the subscribe frame is rgb(36,123,78) --
 * checked on BOTH templates (Biotics I34926:77031;35066:74857 AND Superfoods
 * I21316:76932;35066:79649 carry the identical fill), and this markup/CSS
 * rule is shared by both (single <h2 class="bppm-subscribe__heading"> in
 * subscribe-band.php, one shared selector), so the fix is unscoped -- it
 * corrects both templates identically rather than needing a variant class.
 * var(--bppm-green) already resolves to #247B4E == rgb(36,123,78), the exact
 * match, so no new token was needed.
 */
.bppm-subscribe__heading {
	font-size: 36px;
	line-height: 40px;
	color: var(--bppm-green);
}

.bppm-subscribe__lead {
	font-size: 20px;
	color: var(--bppm-ink);
	font-weight: 700;
	max-width: 640px;
	margin: 0 auto 24px;
}

.bppm-subscribe__perks {
	list-style: none;
	margin: 0 auto 32px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 460px;
	text-align: left;
}

.bppm-subscribe__perk {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-family: 'Kobe1.1', var(--theme-font-text-family, sans-serif);
	font-weight: 700;
	font-size: 16px;
	line-height: 20px;
	color: var(--bppm-ink);
}

/*
 * FIXED 2026-09-24 (ClickUp 86eypb6me, PDP round 2, item 4a / q30): color
 * was --bppm-ink, rgb(46,42,42) -- measured live via getComputedStyle,
 * matching the task report. That was a real defect, not the file header's
 * amber-contrast reasoning correctly applied: this icon sits inside
 * .bppm-subscribe__card (confirmed live via icon.closest()), which is
 * WHITE, not on the amber band directly, so the 2.71:1 green-on-amber
 * figure never applied here. Figma's own icon (Superfoods
 * I21316:76932;35066:79961, "check_circle_24dp..." frame, checked on both
 * variants) draws the same recipe this SVG already uses -- a colored
 * circle with a white checkmark on top (here: a 13.33px green
 * (rgb(36,123,78) = #247B4E) compound circle-plus-checkmark-cutout shape,
 * backed by a 9.85px white ellipse showing through the cutout) -- so no new
 * SVG asset is needed, only the color. #247B4E already equals
 * var(--bppm-green) (established elsewhere in this file), 5.23:1 on white,
 * comfortably passing 3:1.
 */
.bppm-subscribe__perk-icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	color: var(--bppm-green);
}

.bppm-subscribe__perk-icon svg {
	width: 18px;
	height: 18px;
	display: block;
}

.bppm-subscribe__cta {
	/* Figma's Button instance measures 400x48 inside the 800-wide card
	   (half width, centred) -- see the PHP file's header docblock. */
	width: 400px;
	max-width: 100%;
	margin: 0 0 24px;
}

.bppm-subscribe__rating {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	margin: 0;
}

.bppm-subscribe__rating-top {
	display: flex;
	align-items: center;
	gap: 6px;
}

.bppm-subscribe__rating-stars svg {
	display: block;
	width: 82px;
	height: 15px;
}

/*
 * FIXED 2026-09-24 (ClickUp 86eypb6me, q18 S28): was var(--bppm-ink) (#2E2A2A,
 * ink/black). Figma's own "4.9/5" text node (id 34203:83822, MEASURED live
 * this session) fills rgb(36,123,78) = #247B4E, already declared on this file
 * as --bppm-green (see file docblock line ~13) and already used for the perk
 * check-icons a few rules below -- the rating VALUE next to the stars was the
 * one sibling element still on the ink token. #247B4E on white measures
 * 5.23:1, passing WCAG 2.2 AA's 4.5:1 normal-text threshold.
 */
.bppm-subscribe__rating-value {
	font-family: var(--wp--preset--font-family--nominee, 'Nominee', sans-serif);
	font-weight: 900;
	font-size: 18px;
	text-transform: uppercase;
	color: var(--bppm-green);
}

.bppm-subscribe__rating-award {
	font-family: var(--wp--preset--font-family--kobe, 'Kobe1.1', sans-serif);
	font-weight: 700;
	font-size: 12px;
	line-height: 14px;
	color: var(--bppm-ink);
}

.bppm-subscribe__rating-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 4px;
}

.bppm-subscribe__rating-brand svg:first-child {
	width: 70px;
	height: 17px;
	color: var(--bppm-ink);
}

.bppm-subscribe__rating-brand svg:last-child {
	width: 33.75px;
	height: 33.75px;
}

/* Mobile, Blocksy's own breakpoint (690px), same convention
   product-page-marketing.css already uses. */
@media (max-width: 690px) {
	.bppm-subscribe__perks {
		max-width: 100%;
	}

	.bppm-subscribe__card {
		padding: 32px 20px;
	}

	/*
	 * FIXED 2026-09-24 (86eypb6me q18-buybox S29): this used to be
	 * width:100%, stretching the CTA edge-to-edge inside the perks
	 * column at every width below 690px. Figma draws this button at a
	 * FIXED width on every breakpoint, never full-bleed: read live from
	 * the extractor's own MOBILE frame ("Frame 2147230054" instance
	 * I34926:91318;35066:75544, 388px card) the button INSTANCE
	 * (I34926:91318;35066:75124) measures 268x48, not 388. The TABLET
	 * frame (696px card, instance I34926:86442;35066:75544) measures its
	 * own button INSTANCE (I34926:86442;35066:75124) at 400x48 -- the
	 * exact same 400px the base (desktop) rule above already uses, so
	 * tablet needs no separate override and correctly falls through to
	 * that base rule; only true mobile (this 690px bucket) gets its own
	 * narrower fixed width. .bppm-subscribe's own text-align:center
	 * (unchanged) centers this fixed-width inline-flex button
	 * horizontally, matching Figma's centred instance on both frames.
	 */
	.bppm-subscribe__cta {
		width: 268px;
	}
}