/**
 * Warenkorb-Zähler als kleines Badge über dem Warenkorb-Symbol.
 *
 * Farben liegen als Custom Properties oben – so lassen sie sich zentral
 * anpassen, ohne die einzelnen Regeln anzufassen.
 */

.foe-warenkorb {
	--foe-badge-bg: var(--wp--preset--color--gold, #f8bf3b);
	--foe-badge-text: var(--wp--preset--color--navy, #142543);
	--foe-badge-size: 11px;

	position: relative;
	display: inline-flex;
	align-items: center;
	color: inherit;
	line-height: 1;
	text-decoration: none;
}

.foe-warenkorb__icon {
	display: block;
}

.foe-warenkorb__zahl {
	position: absolute;
	top: -0.4em;
	right: -0.6em;
	min-width: 1.5em;
	padding: 0 0.35em;
	box-sizing: border-box;
	border-radius: 999px;
	background: var(--foe-badge-bg);
	color: var(--foe-badge-text);
	font-size: var(--foe-badge-size);
	font-weight: 700;
	line-height: 1.5em;
	text-align: center;
	white-space: nowrap;

	/* Klicks sollen am Warenkorb-Link landen, nicht am Badge. */
	pointer-events: none;
}

/* Leerer Warenkorb – FOE_Warenkorb gibt dann ein leeres Span aus, weil
   WooCommerce Fragmente per Selektor ersetzt und das Element im DOM bleiben
   muss. */
.foe-warenkorb__zahl:empty {
	display: none;
}