/**
 * Affiliate Commerce Manager — storefront styles.
 *
 * SCOPING
 * Every selector is anchored to a plugin class (.acm-*). There are no element
 * selectors, no :root, no universal selector, and nothing that styles
 * WooCommerce or WordPress markup the plugin does not own. The plugin cannot
 * restyle a theme by accident.
 *
 * THEMING
 * Colours and spacing come from CSS custom properties declared on the plugin's
 * own containers, not on :root. A theme or child theme overrides the look by
 * redeclaring a variable on .acm-offers or .acm-badges — no !important needed,
 * no plugin file edited. Defaults are deliberately neutral greys and a single
 * accent; no brand colour is baked in.
 */

.acm-subtitle,
.acm-badges,
.acm-price-block,
.acm-offers {
	--acm-text: #1f2328;
	--acm-muted: #5b6470;
	--acm-border: #d1d5db;
	--acm-surface: #f6f7f8;
	/* Each surface reads its OWN variable, so one colour cannot repaint four
	 * components. Frontend\Assets emits only what an administrator configured,
	 * resolving specific → general accent → nothing; whatever is left unset falls
	 * back to the neutral defaults declared here, so no brand colour is ever
	 * compiled into this file. */
	--acm-accent: var(--acm-button-color, #1f2328);
	--acm-accent-text: var(--acm-button-text, #ffffff);
	--acm-price-value: var(--acm-price-color, var(--acm-accent-color, #1f2328));
	--acm-radius: 6px;
	--acm-gap: 12px;

	/* FEATURED CARD TEXT — deliberately NOT derived from the accent.
	 *
	 * The featured card's surface follows the configured button colour, which can
	 * be any hue. Its text must stay readable on that surface regardless, so
	 * these are fixed light neutrals rather than anything the accent feeds. A
	 * site configured red, blue, green or purple gets the same legible card. */
	--acm-featured-text: #ffffff;
	--acm-featured-muted: rgba(255, 255, 255, 0.82);
	--acm-featured-rule: rgba(255, 255, 255, 0.9);
	--acm-featured-coupon-border: rgba(255, 255, 255, 0.65);
}

/* Subtitle ------------------------------------------------------------- */

.acm-subtitle {
	color: var(--acm-muted);
	font-size: 1.05em;
	line-height: 1.45;
	margin: 0 0 12px;
}

/* Badges --------------------------------------------------------------- */

.acm-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
}

/* A badge must read as a badge, not as stray text beside a button: pill shape,
 * its own surface, tight tracking, and a weight that separates it from the
 * label next to it. Whatever wording the administrator types uses the style
 * they selected — no badge text is special-cased anywhere. */
.acm-badge {
	background: var(--acm-surface);
	border: 1px solid var(--acm-border);
	border-radius: 999px;
	color: var(--acm-text);
	display: inline-block;
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.5;
	padding: 3px 10px;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * BADGE PALETTES
 *
 * A badge's appearance follows the STYLE the administrator chose for it, and
 * nothing else. In v0.7.7 the accent and highlight styles read the global badge
 * colour, so configuring any site-wide colour repainted every product badge —
 * a product badge reading "USA MADE PRODUCT" would turn the same red as the
 * price, regardless of the style stored against it.
 *
 * Two rules keep them apart:
 *
 *   1. Each style has a fixed, theme-neutral palette. Warning stays warm,
 *      neutral stays grey, positive stays green.
 *   2. Only the OFFER badge (.acm-offer__badge, inside a CTA) consults the
 *      configurable badge colour, because that is the badge the setting was
 *      added for.
 *
 * A product badge is therefore never recoloured by the price, button, coupon or
 * general accent settings.
 * ------------------------------------------------------------------------- */

.acm-badge--accent {
	background: #1f2328;
	border-color: #1f2328;
	color: #ffffff;
}

.acm-badge--positive {
	background: #e8f5ec;
	border-color: #bcdcc7;
	color: #17512c;
}

.acm-badge--warning {
	background: #fdf3e3;
	border-color: #ecd7a8;
	color: #6b4a04;
}

/* HIGHLIGHT — warm gold.
 *
 * Scoped to this one STYLE, not to badges generally: an administrator picks
 * "Highlight" per badge, so changing this palette changes exactly the badges
 * they chose it for. Warm gold reads as a distinction on both a light card and
 * the dark featured one, which the previous cool blue-grey did not. */
.acm-badge--highlight {
	background: #f6e2a8;
	border-color: #e6cd8a;
	color: #4a3708;
	font-weight: 700;
}

.acm-badge--outline {
	background: transparent;
	border-color: var(--acm-text);
	color: var(--acm-text);
}

.acm-badge--neutral {
	background: var(--acm-surface);
	border-color: var(--acm-border);
	color: var(--acm-text);
}

/* OFFER badges only — the ones inside a CTA — follow the configurable badge
 * colour when their style asks for it. */
.acm-offer__badge.acm-badge--accent,
.acm-offer__badge.acm-badge--highlight {
	background: var(--acm-badge-color, var(--acm-accent-color, #1f2328));
	border-color: var(--acm-badge-color, var(--acm-accent-color, #1f2328));
	color: var(--acm-badge-text, #ffffff);
}

/* Price ---------------------------------------------------------------- */

.acm-price-block {
	margin: 0 0 14px;
}

/* THE BASE CLASS SETS COLOUR AND NOTHING ELSE.
 *
 * `.acm-price` reaches places this plugin does not control: a third-party search
 * widget calling get_price_html(), a mini card, a related-products carousel, a
 * block. Until v0.7.9 it carried single-product typography, so an autocomplete
 * suggestion rendered the price at hero size.
 *
 * Size, weight and spacing are therefore modifier-only. Anything that merely
 * asks WooCommerce for a price string inherits the surrounding typography and
 * gets the configured colour — which is the part that should travel everywhere. */
.acm-price {
	color: var(--acm-price-value);
}

/* Compact: cards, archives, search suggestions, widgets. Deliberately inherits
 * font-size and line-height from whatever is around it. */
.acm-price--loop {
	display: inline;
	font-size: inherit;
	font-weight: 600;
	line-height: inherit;
}

/* Prominent: the plugin's own product-page block only. Scoped to BOTH the
 * modifier and the plugin-owned wrapper, so the large treatment cannot be
 * inherited by a stray element that happens to carry the modifier. */
.acm-price-block .acm-price--single,
.acm-price-block .acm-price {
	display: block;
	font-size: 1.75em;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.15;
}

.acm-price-note {
	color: var(--acm-muted);
	display: block;
	font-size: 0.85em;
	margin-top: 4px;
}

/* Offers --------------------------------------------------------------- */

.acm-offers {
	margin: 0 0 20px;
}

.acm-offers__list {
	display: flex;
	flex-direction: column;
	gap: var(--acm-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* THE CARD IS THE <li>, NOT THE <a> (v0.8.1).
 *
 * Until now the background, border and radius lived on the anchor, so the
 * coupon row — a sibling below it — floated outside the visual card and read as
 * unrelated to the vendor above it. Moving the chrome up one level makes the
 * anchor and the coupon row two parts of one card, which is what "the coupon
 * belongs to this offer" has to look like.
 *
 * `overflow: hidden` so the anchor's own hover surface is clipped to the
 * rounded corners. */
/* Each vendor is an independently selectable card, so the boundary between one
 * and the next has to be obvious at a glance. A solid neutral border does the
 * separating; the shadow only reinforces it. Deliberately a NEUTRAL grey rather
 * than the accent — an accent-coloured border would compete with the CTA inside
 * the card it is supposed to be framing. */
.acm-offer {
	background: #ffffff;
	border: 1px solid var(--acm-border);
	border-radius: var(--acm-radius);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	margin: 0;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* The featured offer's surface now belongs to the card, so the coupon row sits
 * on the dark background with it rather than beside it. */
.acm-offer:first-child {
	background: var(--acm-accent);
	border-color: var(--acm-accent);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
	color: var(--acm-featured-text);
}

/* CONTRAST ON THE FEATURED CARD.
 *
 * `color: inherit` on the anchor was not enough on the real site: themes style
 * links with selectors more specific than a single class (`.entry-content a`,
 * `.woocommerce a`, and so on), so the theme's link colour won and the vendor
 * name and label rendered in the site's accent — dark red on near-black.
 *
 * These rules name the elements directly and use a token that has nothing to do
 * with the configured accent, so the card stays readable whatever the site's
 * palette is. Scoped to the featured card only; light cards keep using the
 * accent, where it has a light background to sit on. */
.acm-offer:first-child .acm-offer__link,
.acm-offer:first-child .acm-offer__link:hover,
.acm-offer:first-child .acm-offer__link:focus,
.acm-offer:first-child .acm-offer__text,
.acm-offer:first-child .acm-offer__label {
	color: var(--acm-featured-text);
}

.acm-offer:first-child .acm-offer__vendor {
	color: var(--acm-featured-muted);
	opacity: 1;
}

.acm-offer:first-child .acm-offer__label-text {
	border-bottom-color: var(--acm-featured-rule);
}

.acm-offer:first-child .acm-offer__external-icon {
	color: var(--acm-featured-text);
}

.acm-offer:first-child .acm-offer-coupon__label {
	color: var(--acm-featured-text);
	opacity: 1;
}

/* The anchor is now the card's top region: transparent, inheriting the card's
 * colour, carrying only its own padding and interactive states. */
.acm-offer__link {
	align-items: center;
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	display: flex;
	gap: 10px;
	justify-content: space-between;
	padding: 12px 16px;
	text-decoration: none;
	transition: background-color 0.15s ease;
	width: 100%;
}



/* HOVER, NOW THAT THE CARD IS THE <li>.
 *
 * Lifting or shadowing the anchor would detach it from the coupon row beneath
 * it — the exact disconnection this release exists to fix. So elevation moved to
 * the card, and the anchor signals hover with its own surface tint.
 *
 * Light card. */
.acm-offer:hover {
	border-color: var(--acm-text);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.acm-offer__link:hover,
.acm-offer__link:focus {
	background: rgba(0, 0, 0, 0.045);
}

.acm-offer__link:active {
	background: rgba(0, 0, 0, 0.075);
}

/* Featured card. A translucent WHITE tint, so the surface still lightens on
 * hover — the v0.7.6 finding that darkening an already-dark button reads as
 * "nothing happened" still applies. */
/* Lightens, never darkens, and text contrast is untouched — the tint sits under
 * the text rather than on it. */
.acm-offer:first-child:hover {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

.acm-offer:first-child .acm-offer__link:hover,
.acm-offer:first-child .acm-offer__link:focus {
	background: rgba(255, 255, 255, 0.14);
}

.acm-offer:first-child .acm-offer__link:active {
	background: rgba(255, 255, 255, 0.22);
}

@media (prefers-reduced-motion: reduce) {
	.acm-offer,
	.acm-offer__link {
		transition: none;
	}
}

.acm-offer__link:focus-visible {
	outline: 2px solid var(--acm-text);
	outline-offset: 2px;
}

.acm-offer:first-child .acm-offer__link:focus-visible {
	outline-color: var(--acm-accent);
}

.acm-offer__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.acm-offer__vendor {
	font-size: 0.8em;
	opacity: 0.75;
	overflow-wrap: anywhere;
}

.acm-offer__label {
	font-weight: 700;
	overflow-wrap: anywhere;
}

/* Underline the LABEL only — never the vendor name above it — so the actionable
 * half of the button reads as something you click. A pseudo-element rather than
 * text-decoration, because it can sit a couple of pixels clear of the text and
 * thicken on hover without shifting the line. */
.acm-offer__label-text {
	border-bottom: 2px solid currentColor;
	display: inline;
	padding-bottom: 2px;
}

.acm-offer__link:hover .acm-offer__label-text,
.acm-offer__link:focus-visible .acm-offer__label-text {
	border-bottom-width: 3px;
}

/* The icon inherits the CTA's text colour, never the badge's. A badge sitting
 * beside it must not be able to recolour it. */
.acm-offer__link .acm-offer__external-icon,
.acm-offer__link .acm-offer__icon {
	color: inherit;
}

/* Right-hand group: badge AND icon, never one instead of the other.
 * Both elements previously carried `margin-left: auto` and competed for the
 * same slot, which is why a badged offer appeared to lose its icon. */
/* Reserves space for badge AND icon. No absolute positioning, and only this
 * element carries the auto margin. */
.acm-offer__meta {
	align-items: center;
	display: flex;
	/* Shrinkable and wrappable as of v1.1.0-rc.4: an offer can now carry
	 * several badges, and a fixed group would push them off the card. The icon
	 * below stays at a fixed size regardless, so it is never the thing that
	 * gives way. */
	flex: 0 1 auto;
	flex-wrap: wrap;
	gap: 6px 10px;
	justify-content: flex-end;
	margin-left: auto;
	min-width: 0;
}

.acm-offer__badge {
	flex: 0 0 auto;
}

/* Full opacity and explicit dimensions. At 0.7 on a dark CTA this was
 * effectively invisible; it inherits the button's text colour so it stays
 * legible on both the accent and the light variants. */
/* THE ICON.
 *
 * A text glyph as of v0.7.9. Four rounds of SVG hardening were defeated by the
 * real theme, so the icon no longer depends on SVG rendering at all — a
 * character cannot be collapsed by an `svg {}` rule, has no viewBox to
 * mis-scale, and takes its size from font-size rather than a width the theme
 * can zero.
 *
 * The dimension and display rules keep their scoped !important: these are
 * plugin-owned classes on plugin-owned markup, the override is demonstrated
 * rather than hypothetical, and the blast radius is one element the plugin
 * rendered itself.
 *
 * `color` is deliberately absent — the glyph inherits the CTA's text colour,
 * which is what makes it correct on both the filled primary button and the
 * light secondary one.
 */
.acm-offer__external-icon {
	align-items: center !important;
	display: inline-flex !important;
	flex: 0 0 20px !important;
	font-size: 18px !important;
	font-style: normal !important;
	font-weight: 400 !important;
	height: 20px !important;
	justify-content: center !important;
	line-height: 1 !important;
	min-width: 20px !important;
	opacity: 1 !important;
	overflow: visible !important;
	text-decoration: none !important;
	visibility: visible !important;
	width: 20px !important;
}

.acm-offer__link:hover .acm-offer__external-icon {
	transform: translate(1px, -1px);
}

@media (prefers-reduced-motion: reduce) {
	.acm-offer__link:hover .acm-offer__external-icon {
		transform: none;
	}
}

/* Disclosure ----------------------------------------------------------- */

.acm-disclosure {
	color: var(--acm-muted);
	font-size: 0.85em;
	line-height: 1.5;
	margin: 0 0 10px;
}

.acm-offers .acm-disclosure:last-child {
	margin: 10px 0 0;
}

/* Archive -------------------------------------------------------------- */

.acm-read-more {
	overflow-wrap: anywhere;
}

/* Narrow viewports ------------------------------------------------------ */

@media screen and (max-width: 600px) {
	.acm-offer__link {
		align-items: flex-start;
		flex-wrap: wrap;
		padding: 12px 14px;
	}

	.acm-offer__badge {
		margin-left: 0;
	}

	.acm-price-block .acm-price--single,
	.acm-price-block .acm-price {
		font-size: 1.3em;
	}
}

/* -------------------------------------------------- *
 * No-price state (v0.7.2)
 *
 * When a product has no affiliate price the plugin outputs nothing at all —
 * these rules exist for the wrapper a THEME may print around it. They are
 * scoped to .acm-no-price, a class the plugin puts on the card itself, so a
 * rule can only affect a card the plugin has already decided has no price.
 *
 * Only WooCommerce's own price element is targeted here. Anything theme-
 * specific belongs in Settings → Display → Hide theme price wrappers, or in
 * the acm_price_wrapper_selectors filter — never in this file.
 * -------------------------------------------------- */

.acm-no-price > .price,
.acm-no-price .woocommerce-Price-amount:empty,
.acm-no-price .price:empty {
	display: none;
}

/* No price means no gap: the CTA moves up rather than leaving a hole. */
.acm-no-price .acm-price-block {
	display: none;
}

/* -------------------------------------------------- *
 * Per-offer coupon row (v0.8.1)
 *
 * A full-width row INSIDE the offer card, below the vendor block. The card
 * itself now carries the background and border (see .acm-offer above), so this
 * row sits on the same surface as the vendor above it rather than floating
 * underneath as a detached fragment.
 *
 * Label left, code button right, dashed outline around the whole row.
 * -------------------------------------------------- */

.acm-offer-coupon {
	align-items: center;
	border: 1px dashed var(--acm-coupon-border, rgba(0, 0, 0, 0.28));
	border-radius: calc(var(--acm-radius, 6px) - 2px);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	justify-content: space-between;
	/* Inset from the card edge so the dashed outline reads as belonging to the
	 * card rather than replacing its border. */
	margin: 0 12px 12px;
	padding: 8px 12px;
}

.acm-offer-coupon__label {
	color: inherit;
	flex: 0 1 auto;
	font-size: 0.9375rem;
	font-weight: 400;
	opacity: 0.85;
}

/* One control: code and copy glyph together, so the whole pill copies. */
.acm-offer-coupon__button {
	align-items: center;
	background: var(--acm-coupon-color, var(--acm-accent-color, #1f2328));
	border: 0;
	border-radius: 4px;
	color: var(--acm-coupon-code-color, #ffffff);
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	font: inherit;
	gap: 10px;
	justify-content: space-between;
	line-height: 1.2;
	margin: 0;
	min-height: 34px;
	padding: 5px 12px;
	transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.acm-offer-coupon__code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.06em;
}

/* A glyph, not an SVG — same reasoning as the external-link icon. It inherits
 * the button's text colour, so it can never disappear against the accent. */
.acm-offer-coupon__icon {
	color: inherit;
	display: inline-flex !important;
	flex: 0 0 auto;
	font-size: 15px !important;
	line-height: 1 !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.acm-offer-coupon__button:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	filter: brightness(1.1);
}

.acm-offer-coupon__button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.acm-offer-coupon__button:active {
	filter: brightness(0.95);
}

/* The featured card is dark, so the dashed outline needs a light stroke to stay
 * visible — and the label needs to be legible on it. */
/* Light dashed stroke, or it disappears against the dark surface. */
.acm-offer:first-child .acm-offer-coupon {
	border-color: var(--acm-featured-coupon-border);
}

/* Per-offer status. Sits at the end of the row and is absent until used, so
 * confirming a copy never adds height to the card. */
.acm-offer-coupon__status {
	color: inherit;
	flex: 1 0 100%;
	font-size: 0.8125rem;
	font-weight: 600;
	margin-top: -2px;
	opacity: 0.9;
	order: 3;
	text-align: right;
}

.acm-offer-coupon__status:empty {
	display: none;
}

.acm-offer-coupon--copied .acm-offer-coupon__button {
	box-shadow: 0 0 0 2px currentColor;
}

@media (max-width: 480px) {
	/* Stack cleanly rather than overflow, and keep a comfortable tap target. */
	.acm-offer-coupon {
		align-items: stretch;
		flex-direction: column;
		gap: 6px;
	}

	.acm-offer-coupon__button {
		justify-content: space-between;
		min-height: 42px;
		width: 100%;
	}

	.acm-offer-coupon__status {
		text-align: left;
	}
}

/* -------------------------------------------------- *
 * More options
 *
 * Visually secondary on purpose: it must not read as a fourth vendor sitting
 * among the affiliate CTAs. Transparent, bordered, centred, with a small
 * chevron — nothing like the filled primary button.
 * -------------------------------------------------- */

/* Clear of the last card, so the control never reads as part of it. */
.acm-offers__more {
	align-items: center;
	background: transparent;
	border: 1px solid var(--acm-border);
	border-radius: var(--acm-radius, 6px);
	color: var(--acm-text);
	cursor: pointer;
	display: flex;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	gap: 8px;
	justify-content: center;
	letter-spacing: 0.04em;
	margin: 14px 0 0;
	padding: 9px 14px;
	text-transform: uppercase;
	transition: background-color 0.15s ease, border-color 0.15s ease;
	width: 100%;
}

.acm-offers__more:hover {
	background: var(--acm-surface);
	border-color: var(--acm-text);
}

.acm-offers__more:focus-visible {
	outline: 2px solid var(--acm-text);
	outline-offset: 2px;
}

.acm-offers__more-chevron {
	border-bottom: 2px solid currentColor;
	border-right: 2px solid currentColor;
	display: inline-block;
	height: 7px;
	transform: rotate(45deg) translate(-2px, -2px);
	width: 7px;
}

.acm-offers__more--expanded .acm-offers__more-chevron {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.acm-offers__count {
	color: var(--acm-muted);
	font-size: 0.8125rem;
	margin: 8px 0 0;
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.acm-offer-coupon__button,
	.acm-offers__more {
		transition: none;
	}
}

@media (max-width: 600px) {
	.acm-offer-coupon {
		gap: 6px;
	}

	.acm-offer-coupon__button {
		/* Comfortable tap target on a phone. */
		min-height: 40px;
	}
}

/* -------------------------------------------------- *
 * Affiliate CTA states
 *
 * The v0.7.3 block that lived here duplicated the rules above and gave the icon
 * its own `margin-left: auto`, competing with the badge for the same position.
 * Both variants' states are now defined once, beside the base rule.
 * -------------------------------------------------- */

.acm-offer > a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* -------------------------------------------------- *
 * Coming soon (single product page, v0.8.5)
 *
 * Fills the affiliate-offer area when a product has no renderable offer.
 * Archives never show this — every product card keeps its normal clickable CTA.
 *
 * Prominent on purpose: at ordinary body weight it read as another sentence of
 * copy rather than the product's status. It is now a centred status band with a
 * strong accent-derived border and tinted surface.
 *
 * STILL NOT A BUTTON. No cursor change, no hover treatment, no transition,
 * nothing focusable — the markup has no href, role or tabindex, and the styling
 * deliberately avoids anything that would imply otherwise. Prominence and
 * interactivity are separate things.
 *
 * COLOUR COMES FROM THE CONFIGURED ACCENT, never a hardcoded brand value.
 * `color-mix` derives a soft tint from whatever accent the site set, and every
 * declaration carries a neutral fallback so a site with no accent configured
 * gets a polished grey band rather than nothing.
 * -------------------------------------------------- */

.acm-single-coming-soon {
	/* Soft tint of the configured accent, falling back to a neutral surface.
	 * A browser without color-mix support simply takes the fallback. */
	background: var(--acm-surface, #f6f7f8);
	background: color-mix(in srgb, var(--acm-accent-color, #1f2328) 7%, #ffffff);
	border: 1px solid var(--acm-border, #d1d5db);
	border-color: color-mix(in srgb, var(--acm-accent-color, #1f2328) 35%, #ffffff);
	/* The one piece of accent emphasis, per the "clean, no icons" preference. */
	border-left: 4px solid var(--acm-accent-color, var(--acm-text, #1f2328));
	border-radius: var(--acm-radius, 6px);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 16px;
	min-height: 64px;
	padding: 14px 20px;
	text-align: center;
	/* Status text, not a control. */
	cursor: default;
}

.acm-single-coming-soon__label {
	color: var(--acm-accent-color, var(--acm-text, #1f2328));
	display: block;
	font-family: inherit;
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
}

@media (max-width: 600px) {
	.acm-single-coming-soon {
		min-height: 56px;
		padding: 12px 14px;
	}

	.acm-single-coming-soon__label {
		font-size: 1.0625rem;
		letter-spacing: 0.04em;
	}
}

/* -------------------------------------------------- *
 * Computed offer tags (v1.1.0)
 *
 * As of rc.5 these sit in the same right-hand group as the typed badges and
 * reuse the .acm-badge pill, so a calculated tag and a badge read as one row of
 * labels rather than two competing treatments. The uppercasing comes from that
 * shared pill, which means the configured wording is never altered in storage —
 * an administrator who wants mixed case removes the transform in their theme.
 *
 * Only the colouring is tag-specific below.
 * -------------------------------------------------- */

.acm-offer__tag {
	flex: 0 0 auto;
}

/* The two comparative tags are the ones a visitor is actually choosing on, so
 * they get the accent outline. The absolute ones stay neutral. */
.acm-offer__tag--best_price,
.acm-offer__tag--fastest_delivery {
	border-color: var(--acm-price-value);
	color: var(--acm-price-value);
}

/* FEATURED CARD. Same reasoning as the coupon label above: the dark surface
 * needs tokens that owe nothing to the configured accent, or a red-on-black
 * palette makes these unreadable. */
.acm-offer:first-child .acm-offer__tag {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--acm-featured-coupon-border);
	color: var(--acm-featured-text);
}

.acm-offer:first-child .acm-offer__tag--best_price,
.acm-offer:first-child .acm-offer__tag--fastest_delivery {
	background: rgba(255, 255, 255, 0.2);
	border-color: var(--acm-featured-rule);
	color: var(--acm-featured-text);
}