/* ============================================================
   Product Badge — per-product pill, data-driven.
   Placed as first child of .wpdl-product-card (position:relative),
   overlays the image top / inline-start. Variant class sets the
   semantic colour; everything else is shared with the showcase pill.
   Tokens only. Local stacking (z-index:2) stays literal per guide.
   ============================================================ */

.wpdl-product-badge {
	position: absolute;
	top: var(--wp--custom--space--3);
	inset-inline-start: var(--wp--custom--space--3);
	z-index: 2;
	padding: 0.25rem 0.625rem; /* 4px × 10px */
	background-color: var(--wp--custom--semantic--color--accent--primary);
	color: var(--wp--custom--semantic--color--badge--text);
	font-family: var(--wp--custom--font--family--body);
	font-size: 0.6875rem; /* 11px */
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.2;
	border-radius: var(--wp--custom--radius--full);
	box-shadow: var(--wp--custom--shadow--sm);
	pointer-events: none;
	white-space: nowrap;
}

/* ── Per-variant semantic colour ────────────────────────────── */
.wpdl-product-badge--sale     { background-color: var(--wp--custom--semantic--color--badge--sale); }
.wpdl-product-badge--new      { background-color: var(--wp--custom--semantic--color--badge--new); }
.wpdl-product-badge--featured { background-color: var(--wp--custom--semantic--color--badge--best-seller); }
.wpdl-product-badge--hot      { background-color: var(--wp--custom--semantic--color--badge--hot); }
.wpdl-product-badge--limited  { background-color: var(--wp--custom--semantic--color--badge--limited); }

/* ── Editor preview — no product context, render inline ─────── */
.wpdl-product-badge--preview {
	position: static;
	display: inline-block;
}