/**
 * Bonza, basic product page: torn/wavy band-boundary dividers (ClickUp
 * 86eypb6me). See product-page/product-page-marketing.php,
 * bonza_pdp_divider_image(), for the full docblock and the Figma node ids.
 *
 * Kept in its own sheet instead of product-page-marketing.css: that file
 * owns .bppm-section itself and this sheet is enqueued after it, so its
 * rules win any specificity tie by source order without needing to touch
 * that file.
 *
 * Config investigated: same as product-page-marketing.css, which this sheet
 * is a split of -- no Blocksy Customizer surface exists for this bespoke
 * marketing block, and there is no native WooCommerce tab/upsell/related
 * layout to configure instead. editor-friendly-ok: restyles WooCommerce's
 * own after-summary output, which has no Gutenberg block/pattern
 * counterpart to register add_editor_style() against, the same documented
 * exception product-page-marketing.css already uses.
 *
 * Sizing: every one of the 7 divider nodes in Figma (21316:76931, desktop)
 * measures exactly 1384x118.36842346191406, the same 11.6944:1 aspect ratio
 * at all three frames the file draws (696x59.52631759643555 tablet,
 * 388x33.18421173095703 mobile) -- expressed below as aspect-ratio so the
 * strip scales continuously instead of jumping between three fixed heights.
 *
 * Horizontal fit REVERSED 2026-09-23 (86eypb6me), superseding the
 * 2026-09-18 correction this comment used to describe. That correction made
 * the divider run the full band width because PR #842 had just made
 * .bppm-section itself full-bleed, and a divider fixed at Figma's literal
 * 1384px would have shown a growing bare strip of band colour past 1512px
 * wide. .bppm-section is an inset BOX again as of this task (see
 * product-page-marketing.css's --bppm-gutter and .bppm-section rules, built
 * from figma-section-boxes.py's ledger walk), which removes the reason for
 * that departure: the divider now goes back to matching Figma's own literal
 * node width and position -- the same inset box every section around it
 * uses, via the same --bppm-gutter margin-inline the section box uses,
 * rather than a fixed 1384px (which would stop scaling down below 1512).
 *
 * Every one of the 7 dividers sits with a measured 0px gap against the
 * section before it and after it in Figma (confirmed node-by-node, not
 * assumed), so no extra margin-block is applied here -- margin-inline is the
 * box inset, margin-block stays 0 and it is simply another block in the
 * normal flow between two <section> elements.
 */
.bppm-divider {
	display: block;
	margin-inline: var(--bppm-gutter);
	height: auto; /* overrides product-page-marketing.css's dead height:118px scaffold rule; without this the box stays a fixed 118px at every breakpoint while .bppm-divider__img inside it correctly shrinks, leaving blank space around the image below desktop. */
}

.bppm-divider__img {
	display: block;
	width: 100%;
	aspect-ratio: 1384 / 118.36842346191406;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}