/**
 * Buddy Up affiliate notices — base styles.
 *
 * Scoped entirely to .spx- classes: never targets Salient (.nectar-*,
 * .wpb_*) or any other theme wrapper. Must look correct with no theme help
 * at all (verified against the default Twenty Twenty-Four theme).
 *
 * Two shapes on the page:
 *  - .spx-buddy-up-notice--product is a standalone element on the single
 *    product page (nothing else provides it a background/border), so it
 *    carries its own light card treatment.
 *  - .spx-buddy-up-notice--applied / --invalid are inline spans nested
 *    inside WooCommerce's own .woocommerce-message / .woocommerce-info
 *    wrapper (added via wc_add_notice()) — that wrapper already provides
 *    the box, so these stay unboxed and just inherit surrounding text
 *    colour/size.
 */

.spx-buddy-up-notice {
	--spx-notice-gap: 0.5em;

	font-family: inherit;
	font-size: inherit;
	color: inherit;
	line-height: 1.5;
}

.spx-buddy-up-notice a {
	color: inherit;
}

/**
 * The product notice is a standalone card: SPR pink background, white text,
 * a heading (Special Offer £X) plus a body paragraph. Block layout, not
 * flex — the heading/body are already block-level elements on their own
 * lines; flex here previously broke text flow, since the body paragraph's
 * inline <span>/<ins> price markup made the browser treat each surrounding
 * run of plain text as its own anonymous flex item (each wrapping
 * independently into narrow columns instead of flowing as one paragraph).
 */
.spx-buddy-up-notice--product {
	--spx-notice-bg: #df2793;
	--spx-notice-color: #fff;
	--spx-notice-border-color: #df2793;
	--spx-notice-radius: 0.5rem;
	--spx-notice-padding-inline: 1.25em;
	--spx-notice-padding-block: 1em;
	--spx-notice-margin-block-start: 1em;
	--spx-notice-margin-block-end: 1.5em;

	display: block;
	margin-block: var(--spx-notice-margin-block-start) var(--spx-notice-margin-block-end);
	padding-inline: var(--spx-notice-padding-inline);
	padding-block: var(--spx-notice-padding-block);
	border: 1px solid var(--spx-notice-border-color);
	border-radius: var(--spx-notice-radius);
	background: var(--spx-notice-bg);
	color: var(--spx-notice-color);
}

.spx-buddy-up-notice--product a {
	color: inherit;
}

.spx-buddy-up-notice__heading {
	margin: 0 0 0.35em;
	font-size: 1.375em;
	font-weight: 700;
	line-height: 1.2;
	color: inherit;
}

.spx-buddy-up-notice__body {
	margin: 0;
	color: inherit;
}

.spx-buddy-up-notice--applied,
.spx-buddy-up-notice--invalid {
	display: inline-flex;
	align-items: baseline;
	gap: var(--spx-notice-gap);
}

/**
 * Hide WooCommerce's own product price whenever the Buddy Up product notice
 * is present — the notice's own heading price becomes the price display
 * instead. Scoped with :has() to exactly the product pages the notice
 * actually renders on; no extra body/template markup needed. `.price` is
 * WooCommerce core's own class on both the default single-price element and
 * (nested inside it) the variation-specific price swapped in by
 * WooCommerce's variation JS, so hiding the single outer selector covers
 * simple and variable products alike.
 *
 * !important is deliberate: this deliberately overrides third-party theme
 * CSS (e.g. Salient's own `.summary p.price` rule, see theme-salient.css)
 * that WordPress gives no load-order guarantee against — we never declared
 * a stylesheet dependency on the theme's own CSS, and shouldn't have to.
 *
 * This only ever hides the DISPLAYED price — the underlying price remains in
 * the page's HTML/structured data (schema.org), which is intentional: see
 * the Diagnostics conversation this was scoped against. Deliberately left
 * unprefixed (not Salient-specific) — `.summary .price` is WooCommerce
 * core's own markup (confirmed also relied on by Salient's own CSS, see
 * theme-salient.css), so this holds for any theme built on WooCommerce's
 * default template structure.
 */
.summary:has(.spx-buddy-up-notice--product) .price {
	display: none !important;
}