/**
 * Tag / badge: template-parts/ui/tag.php (Style Guide 2299:1309).
 * Label/S uppercase pill. BUNDLE uses the NEW colors as in the homepage
 * "Bundle deals" cards (2098:4206).
 */

.tag {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: var(--radius-pill);
	background: var(--tag-bg);
	color: var(--tag-fg);
	font-family: var(--font-body);
	font-size: var(--text-label-s);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-label-s);
	letter-spacing: var(--tracking-label-s);
	text-transform: uppercase;
	white-space: nowrap;
}

.tag--new,
.tag--bundle {
	--tag-bg: var(--color-orange);
	--tag-fg: var(--color-white);
}

.tag--bestseller {
	--tag-bg: var(--color-yellow);
	--tag-fg: var(--color-ink);
}

.tag--sale {
	--tag-bg: var(--color-green-dark);
	--tag-fg: var(--color-white);
}