/*
 * Warenkorb-Symbol im Kopfbereich — Baustein woocommerce/mini-cart.
 *
 * Wie beim Konto-Symbol haengt WooCommerce diesen Baustein ueber Block Hooks
 * selbst ein; er traegt keine Blockattribute. Die FARBE steht in theme.json
 * (styles.blocks["woocommerce/mini-cart"].color.text = accent-1) — hier steht
 * nur, was theme.json fuer einen fremden Baustein nicht ausdruecken kann.
 *
 * EIGENE DATEI, nicht mit kopf-symbol-konto.css zusammengelegt: eine Datei
 * unter ZWEI Blocktypen registriert laedt WordPress zweimal komplett aus
 * (in dieser Codebasis schon einmal passiert, siehe Kommentar zu
 * hh_block_styles() in functions.php, Fixrunde 2 bei hero-start.css).
 *
 * 1) GROESSE DES SYMBOLS. Entwurf 20x20, WooCommerce liefert 23x23.
 *
 * 2) DIE MENGENBLASE. Der Entwurf zeigt einen kleinen Kreis, der oben rechts
 *    aus dem Symbol herausragt; WooCommerce liefert eine groessere weisse
 *    Pille, die auf dem hellen Seitengrund gedacht ist. Gemessen am
 *    gerenderten Kopf, jeweils Entwurf gegen gebaut:
 *        Groesse      15x15        gegen 19x19
 *        Grund        #5E0068      gegen #FFFFFF
 *        Schrift      #FEFEBE      gegen #80008B
 *        Schriftgrad  9px, 800     gegen 13,125px, 400
 *        Versatz      -6 / -7      gegen 1,875 / -8,86
 *    !important AN DEN ZWEI FARBEN IST KEINE NACHLAESSIGKEIT, sondern der
 *    einzige Weg. WooCommerce schreibt die Blasenfarben als INLINE-STIL an
 *    das Element selbst - gemessen am gerenderten Kopf:
 *        style="background-color: rgb(254,254,190); color: rgb(94,0,104)"
 *    Es leitet sie aus der Textfarbe des Bausteins ab (also aus accent-1)
 *    und dreht sie gegenueber dem Entwurf GENAU UM: dort ist der Grund
 *    primary-dark und die Ziffer accent-1. Ein Inline-Stil schlaegt jede
 *    Stylesheet-Regel, unabhaengig von der Spezifitaet; ohne !important
 *    bliebe diese Regel wirkungslos. Die uebrigen Eigenschaften brauchen
 *    es NICHT - sie stehen in keinem Inline-Stil und greifen so.
 *
 *    `padding` und `min-width` muessen mit zurueckgesetzt werden: WooCommerce
 *    haelt die Pille ueber `min-width: 18,75px` und `padding: 0 3,28px` breit,
 *    eine blosse `width`-Angabe bliebe dagegen wirkungslos.
 *
 * ⚠️ NICHT behoben, weil es keine Groessenfrage ist: Der Entwurf zeichnet den
 * Warenkorb als STRICHZEICHNUNG (fill:none, stroke). WooCommerces Symbol ist
 * eine FLAECHE (fill:currentColor, kein stroke) — nachgesehen an den
 * SVG-Attributen, nicht vermutet. Das anzugleichen hiesse, WooCommerces
 * eigenes SVG zu ersetzen; das ist eine andere Entscheidung als „Groesse".
 *
 * Ausschliesslich Token, keine Hexfarbe, keine absolute Laenge (P2).
 */

.wp-block-woocommerce-mini-cart .wc-block-mini-cart__icon {
	width: var(--wp--custom--abmessung--symbol-warenkorb);
	height: var(--wp--custom--abmessung--symbol-warenkorb);
}

.wp-block-woocommerce-mini-cart .wc-block-mini-cart__badge {
	top: var(--wp--custom--versatz--mengenblase-oben);
	right: var(--wp--custom--versatz--mengenblase-rechts);
	width: var(--wp--custom--abmessung--mengenblase);
	min-width: var(--wp--custom--abmessung--mengenblase);
	height: var(--wp--custom--abmessung--mengenblase);
	padding: 0;
	justify-content: center;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primary-dark) !important;
	color: var(--wp--preset--color--accent-1) !important;
	font-size: var(--wp--custom--schriftgroesse--mengenblase);
	font-weight: 800;
	line-height: 1;
}

/*
 * Seitliches Polster = halbe Symbolluecke. Die Gruppe hat gap:0; erst die
 * gleichen Polster aller drei Symbole ergeben die 13px des Entwurfs.
 * Begruendung und Abwaegung stehen in kopf-symbolgruppe.css.
 */
.wp-block-woocommerce-mini-cart .wc-block-mini-cart__button {
	padding-left: calc(var(--wp--custom--abstand--symbolgruppe) / 2);
	padding-right: calc(var(--wp--custom--abstand--symbolgruppe) / 2);
}