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

.et_pb_menu__cart-button.et_pb_menu__icon__with_count {
	--foe-badge-bg: #f5f3eb;
	--foe-badge-text: #000000;
	--foe-badge-size: 11px;

	position: relative;
	display: inline-block;
}

/**
 * Divi reserviert 10px rechts vom Icon für den Inline-Text. Als Badge sitzt
 * die Zahl über dem Icon, der Platz wird also nicht mehr gebraucht.
 */
.et_pb_menu__cart-button.et_pb_menu__icon__with_count::after {
	margin-right: 0;
}

.et_pb_menu__cart-button.et_pb_menu__icon__with_count .et_pb_menu__cart-count {
	position: absolute;
	top: -0.3em;
	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. */
.et_pb_menu__cart-button.et_pb_menu__icon__with_count .et_pb_menu__cart-count:empty {
	display: none;
}