/**
 * Bristle Up Catalog Display — catalog tile & product-page styling.
 *
 * Small, restrained components designed to sit inside arbitrary WooCommerce
 * themes. Everything is driven by CSS custom properties so a theme (or a child
 * theme / customizer) can override the palette without touching this file.
 *
 * Palette is locked by design review (SPEC B §B6.4):
 *   - Earn banner  = blue
 *   - Spend banner = purple (deliberately NOT green, to avoid colliding with
 *     the green in-stock pill)
 *   - Stock pill   = green / amber / red by state
 */

:root {
	/* Stock pill states */
	--bcd-stock-in-bg:    #e7f6ec;
	--bcd-stock-in-fg:    #1a7f37;
	--bcd-stock-low-bg:   #fdf3e3;
	--bcd-stock-low-fg:   #9a6700;
	--bcd-stock-out-bg:   #fbeaea;
	--bcd-stock-out-fg:   #b42318;

	/* Earn banner (blue) */
	--bcd-earn-bg:        #e8f0fe;
	--bcd-earn-fg:        #1652c2;
	--bcd-earn-border:    #c7dbfb;

	/* Spend banner (purple) */
	--bcd-spend-bg:       #f0eafc;
	--bcd-spend-fg:       #6b2fb3;
	--bcd-spend-border:   #ddccf5;

	/* Shared shape tokens */
	--bcd-radius:         999px;
	--bcd-banner-radius:  6px;
	--bcd-font-size:      0.78em;
	--bcd-gap:            0.4em;
}

/* ------------------------------------------------------------------ */
/* Stock pill                                                          */
/* ------------------------------------------------------------------ */

.bcd-stock-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	margin-left: var(--bcd-gap);
	padding: 0.15em 0.6em;
	border-radius: var(--bcd-radius);
	font-size: var(--bcd-font-size);
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0.01em;
	white-space: nowrap;
	vertical-align: middle;
}

.bcd-stock-pill::before {
	content: "";
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.85;
}

.bcd-stock-pill--in {
	background: var(--bcd-stock-in-bg);
	color: var(--bcd-stock-in-fg);
}

.bcd-stock-pill--low {
	background: var(--bcd-stock-low-bg);
	color: var(--bcd-stock-low-fg);
}

.bcd-stock-pill--back {
	background: #e8f0fe;
	color: #1a3d7c;
}

.bcd-stock-pill--out {
	background: var(--bcd-stock-out-bg);
	color: var(--bcd-stock-out-fg);
}

/* ------------------------------------------------------------------ */
/* Indicators strip: stock pill + Free Express pill on one row         */
/* ------------------------------------------------------------------ */

.bcd-indicators {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bcd-gap);
	vertical-align: middle;
}

/* Inside the strip the stock pill no longer needs its price-row left margin;
   the strip's gap handles spacing between the two pills. */
.bcd-indicators .bcd-stock-pill {
	margin-left: 0;
}

/* Free Express rendered as a PILL matching the stock pill's size, overriding
   the larger stacked-banner padding/marker it would otherwise inherit from
   .bcd-banner. Admin colours still apply via the inline style on the element. */
.bcd-ship-pill.bcd-banner {
	padding: 0.15em 0.6em;
	border: 0;
	border-radius: var(--bcd-radius);
	font-size: var(--bcd-font-size);
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0.01em;
	white-space: nowrap;
	vertical-align: middle;
	gap: 0.35em;
}

/* Replace the square banner marker with a round dot to match the stock pill. */
.bcd-ship-pill.bcd-banner::before {
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	opacity: 0.85;
}

/* ------------------------------------------------------------------ */
/* Banners (earn / spend)                                              */
/* ------------------------------------------------------------------ */

.bcd-banners {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bcd-gap);
	/* Hug the price: minimal top margin so the FIRST active banner sits directly
	   below the price. Because the framework emits NO container and NO element
	   for disabled/empty banners, there is never leftover whitespace from a
	   hidden banner — the gap only applies between banners that actually render,
	   and the container itself is absent when nothing renders. */
	margin: 0.35em 0 0.2em;
}

.bcd-banners:empty {
	display: none; /* belt-and-braces: never reserve space for an empty row */
	margin: 0;
}

.bcd-banners--single {
	margin: 0.5em 0 0.35em;
}

/* Catalog tiles: the banner stack now renders immediately after the indicators
   row (same hook), so it only needs a small, consistent gap to hug it — no
   structural whitespace remains. */
.bcd-banners--catalog {
	margin: 0.3em 0 0.2em;
}

.bcd-banner {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.28em 0.7em;
	border-radius: var(--bcd-banner-radius);
	border: 1px solid transparent;
	font-size: var(--bcd-font-size);
	font-weight: 600;
	line-height: 1.5;
}

.bcd-banner::before {
	content: "";
	display: inline-block;
	width: 0.7em;
	height: 0.7em;
	border-radius: 2px;
	background: currentColor;
	opacity: 0.55;
}

.bcd-banner--earn {
	background: var(--bcd-earn-bg);
	color: var(--bcd-earn-fg);
	border-color: var(--bcd-earn-border);
}

.bcd-banner--spend {
	background: var(--bcd-spend-bg);
	color: var(--bcd-spend-fg);
	border-color: var(--bcd-spend-border);
}

/* Free-shipping banner. Greenish default; admins can recolour via inline style
   (which overrides these), and the class stays for theming. */
.bcd-banner--ship {
	background: #e6f4ea;
	color: #1e6b34;
	border-color: rgba(30, 107, 52, 0.25);
}

/* ------------------------------------------------------------------ */
/* Loop-context tightening: keep pill on the price row, banners under   */
/* ------------------------------------------------------------------ */

.woocommerce ul.products li.product .bcd-banners {
	justify-content: flex-start;
}

/* Respect reduced-motion / high-contrast users: nothing animates, and the
   pills/banners rely on text + colour + a shape marker, not colour alone. */
@media (prefers-contrast: more) {
	.bcd-stock-pill,
	.bcd-banner {
		border: 1px solid currentColor;
	}
}