/**
 * editor-friendly-ok: restyles the native WooCommerce single-product
 * summary hook output (woocommerce_single_product_summary), the same
 * documented exception product-page.css already uses. There is no
 * Gutenberg block or pattern counterpart to register add_editor_style()
 * against for this markup.
 *
 * Config checked: the Customizer already carries this banner's only
 * client-editable inputs (heading text, body text, both registered in
 * subscription-banner.php's bonza_pdp_subscription_customizer()). No
 * WooCommerce or Blocksy screen exposes container padding, radius, gap,
 * or typography for a single-product-summary hook's own markup; those
 * are template-level layout values with no admin-screen equivalent, the
 * same category as every other rule already in product-page.css.
 *
 * VidiVet subscription banner (Figma node 34476:106217, "Free Vidivet
 * subscription"; fileKey cY9QX6IwGVaaGI4r7J2RRF). Pairs with
 * product-page/subscription-banner.php.
 *
 * Loaded after product-page.css (enqueue dependency), which still holds
 * an older, incomplete ruleset for the same three class names
 * (.bpp-subscription-banner / __heading / __body: container as a column
 * with a 12px gap, no rule, no logo, no inner-content wrapper). Every
 * selector below matches that ruleset's specificity exactly (a single
 * class, 0-1-0), so per CSS cascade rules the later stylesheet wins
 * property-by-property on every property both files set. Nothing here
 * uses !important. This file's declarations below are meant to fully
 * replace, not merge with, product-page.css's version. See this PR's
 * report for the exact old rules being superseded.
 *
 * product-page.css's other .bpp-subscription-banner rule, the group-
 * rhythm `margin-top: 20px` on
 * `.single-product div.summary.entry-summary > .bpp-subscription-banner`
 * (specificity 0-4-1), is left untouched: it sets the gap ABOVE this
 * banner from the previous sibling, which is a page-level rhythm concern
 * outside this node's own box, not one of the Figma properties measured
 * for node 34476:106217.
 *
 * Container 34476:106217 is a row with exactly ONE child (the column
 * below), read live from Figma on 2026-09-17. Its 24px gap therefore
 * never renders (nothing sits on the far side of it) and is left out on
 * purpose rather than written in and reported as matched.
 */

.bpp-subscription-banner {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 28px;
	border-radius: 12px;
	background: rgba(255, 168, 37, 0.1);
}

/*
 * Inner column 34476:106219: the container's only child. Holds all four
 * pieces (heading, rule, body, logo) in that order at a 16px gap, per
 * Figma read live on 2026-09-17. The logo is this column's fourth
 * child, not a sibling of it at the row level.
 */
.bpp-subscription-banner__content {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
}

/* Figma: 16px with letter-spacing, not 18px unspaced. */
.bpp-subscription-banner__heading {
	font-family: var(--bpp-heading-font);
	font-weight: 900;
	font-size: 16px;
	line-height: 16px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--bpp-ink);
	margin: 0;
}

.bpp-subscription-banner__rule {
	width: 100%;
	height: 0;
	margin: 0;
	border: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/*
 * Body renders through wpautop() + wp_kses_post() (see
 * subscription-banner.php), so the five Figma paragraphs become real
 * <p> tags rather than raw "\n\n" text. The 16px inter-paragraph margin
 * below is the node's own geometry, not a borrowed value: the source
 * string is five paragraphs separated by blank lines, and in Figma a
 * blank line is a real empty line of text, not spacing metadata. At
 * this node's 16px line-height, that empty line occupies exactly 16px,
 * which is the visible gap between paragraphs. wpautop() turns each
 * blank line into a <p> boundary, so a 16px bottom margin reproduces
 * that gap exactly. The node's paragraphSpacing is 0; there is nothing
 * further to confirm here.
 */
.bpp-subscription-banner__body {
	font-family: var(--bpp-body-font);
	font-weight: 400;
	font-size: 16px;
	line-height: 16px;
	color: var(--bpp-ink);
	margin: 0;
}

.bpp-subscription-banner__body p {
	margin: 0 0 16px;
}

.bpp-subscription-banner__body p:last-child {
	margin-bottom: 0;
}

.bpp-subscription-banner__logo {
	display: block;
	width: 105px;
	height: 24px;
}