/**
 * Badge — small pill labels.
 *
 * Variants:
 *   .slist-badge              — default muted pill
 *   .slist-badge--age         — 21+ / 18+ pills
 *   .slist-badge--sale        — sold out / sale
 *   .slist-badge--status      — on sale (green), generic status
 */

.slist-badge {
	display: inline-block;
	padding: 6px 14px;
	font-family: var(--slist-font-body);
	font-size: 11px;
	font-weight: var(--slist-weight-semibold);
	letter-spacing: var(--slist-ls-wide);
	text-transform: uppercase;
	color: var(--slist-text-secondary);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--slist-separator);
	border-radius: var(--slist-radius-pill);
	line-height: 1.3;
	white-space: nowrap;
}

/* Age gating — subtle */
.slist-badge--age {
	color: var(--slist-text-quaternary);
	background: rgba(255, 255, 255, 0.04);
	border-color: var(--slist-separator);
}

/* Sold out — red fill */
.slist-badge--sale {
	background: var(--slist-primary);
	border-color: var(--slist-primary);
	color: #ffffff;
}

/* On sale — green tint */
.slist-badge--status {
	background: var(--slist-success-tint);
	border-color: transparent;
	color: var(--slist-success);
}

/* Override WooCommerce "Sale!" flash */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
	display: inline-block;
	padding: 6px 14px;
	font-family: var(--slist-font-body);
	font-size: 11px;
	font-weight: var(--slist-weight-semibold);
	letter-spacing: var(--slist-ls-wide);
	text-transform: uppercase;
	color: #ffffff;
	background: var(--slist-primary);
	border: 1px solid var(--slist-primary);
	border-radius: var(--slist-radius-pill);
	line-height: 1.3;
	min-height: auto;
	min-width: auto;
	position: absolute;
	top: 12px;
	right: 12px;
	left: auto;
	margin: 0;
}

/* Legacy selector compatibility */
.slist-age-badge {
	display: inline-block;
	padding: 6px 14px;
	font-size: 11px;
	font-weight: var(--slist-weight-semibold);
	letter-spacing: var(--slist-ls-wide);
	border: 1px solid var(--slist-separator);
	border-radius: var(--slist-radius-pill);
	color: var(--slist-text-quaternary);
	text-transform: uppercase;
}