/**
 * labaronne — WooCommerce.
 *
 * WooCommerce' eigene Stylesheets sind vollstaendig abgemeldet
 * (`inc/woocommerce-hooks.php`). Alles, was der Shop aussieht, steht hier — Farben
 * ausschliesslich ueber die Tokens. Wer eine WooCommerce-Komponente vermisst, findet
 * sie hier oder sie fehlt wirklich; es gibt keine zweite Quelle mehr, die dagegenhaelt.
 *
 * Reihenfolge: Grundlagen, Meldungen, Formulare, Knoepfe, Archiv, Produktseite,
 * Warenkorb, Kasse, Konto.
 */

/* ---------- Shop-Archiv ---------- */

/*
 * Kopfzeile des Shops: „Shop" links, Anzahl und Sortierung rechts, grundlinienbündig
 * (Arthur 2026-09-15). Seit die Überschrift links steht, blieb rechts daneben sonst ein
 * leerer Streifen. Die Haarlinie, die vorher über dem Raster stand, ist weg: unter „Shop"
 * steht jetzt derselbe kurze Strich wie auf allen Seiten (`.titel-strich`), zwei Linien
 * übereinander wären eine zu viel.
 *
 * Abstand oben kommt aus `.page-header, .store-head` in main.css, der Abstand unter dem
 * Strich aus `.titel-strich` — beides wie auf jeder anderen Seite.
 */
.store-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	column-gap: var(--space-4);
}

/* Filterspalte links, Produktraster daneben eingerueckt (Variante B). */
/* Oben 0: der Abstand zum Strich unter „Shop" kommt aus `.titel-strich`, wie überall. */
.store { display: grid; grid-template-columns: 210px 1fr; gap: var(--space-5); align-items: start; padding-top: 0; }

.filters-group {
	font-family: var(--sans);
	font-size: var(--fs-micro);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 var(--space-2);
	font-weight: 400;
}
.filters-list {
	list-style: none;
	margin: 0 0 var(--space-4);
	padding: 0;
	font-size: var(--fs-body);
	line-height: 2.1;
}
.filters-list a {
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .2s, color .2s;
}
.filters-list a:hover,
.filters-list a[aria-current] {
	border-color: var(--accent-ink);
	color: var(--accent-ink);
}
.filters-count { color: var(--muted); font-size: var(--fs-small); margin-left: .35em; }

.store-top {
	display: flex;
	align-items: baseline;
	gap: var(--space-4);
	flex-wrap: wrap;
}
.store-count { font-size: var(--fs-body); color: var(--muted); }

/*
 * Filter am Handy einklappbar (2026-09-15, Arthur: „sonst nimmt es zu viel Platz weg").
 * Schalter und Begründung stehen in woocommerce/archive-product.php. Am Desktop gibt es das
 * Label nicht, dort steht die Filterspalte immer.
 */
.filters-schalter-label { display: none; }

/* WooCommerce liefert das Sortierformular — hier nur ruhig stellen. */
.woocommerce-ordering select {
	font-family: inherit;
	font-size: var(--fs-body);
	color: var(--primary);
	background: none;
	border: 0;
	border-bottom: 1px solid var(--primary);
	padding: var(--space-hair) 0;
	cursor: pointer;
}

/*
 * Das Raster teilt sich die Kachel-Stile mit der Startseite.
 * Die Selektoren sind bewusst so spezifisch: WooCommerce liefert
 * `.woocommerce ul.products li.product` mit Floats und festen Prozentbreiten mit.
 * Ein blosses `ul.products` verliert dagegen und das Raster bricht auseinander
 * (gesehen am 2026-09-09: erste Zeile mit Luecke, Kacheln versetzt).
 */
.store ul.products,
.woocommerce ul.products {
	display: grid;
	/*
	 * `minmax(0, 1fr)`, nicht `1fr` (2026-09-15, Arthur: „das rechte Produkt ist immer
	 * kleiner"). `1fr` heißt `minmax(auto, 1fr)`: Eine Kachel darf ihre Spalte über ihre
	 * Mindestbreite aufdrücken. Safari reicht dabei die Eigengröße des Fotos durch die
	 * quadratische Bildfläche (`aspect-ratio: 1`) weiter, auf dem iPhone wurde so eine Spalte
	 * breiter als die andere. In Chromes Handy-Emulation war nichts davon zu sehen.
	 * Gilt für alle Produktraster, auch `.product-grid` in main.css.
	 */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-4) var(--space-4);
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: start;
}
/*
 * WooCommerce haengt der Produktliste einen Clearfix an (`::before`/`::after` mit
 * `display: table`). In einem Float-Layout ist das unsichtbar — in einem Grid wird
 * daraus eine echte, leere Rasterzelle: die erste Zeile begann dadurch in Spalte 2
 * (gesehen am 2026-09-09).
 */
.store ul.products::before,
.store ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; display: none; }

.store ul.products li.product,
.woocommerce ul.products li.product {
	width: auto;
	float: none;
	margin: 0;
	clear: none;
	/* Zweite Absicherung zu `minmax(0, 1fr)` oben: die Kachel drückt ihre Spalte nicht auf. */
	min-width: 0;
}

/*
 * Die Farbauswahl von variation-swatches-woo bleibt im Archiv aus.
 * Grund ist nicht Geschmack: "Farbe" ist kein globales Attribut, deshalb kann das
 * Plugin keine echten Farbflaechen zeigen, sondern nur Textknoepfe ("Variante 1"…).
 * Die machen die Kacheln unterschiedlich hoch und sagen nichts. Auf der Produktseite
 * bleibt die Auswahl selbstverstaendlich sichtbar.
 * Sobald `pa_farbe` als globales Attribut existiert, gehoeren hier echte Swatches hin.
 */
.store .cfvsw-swatches-container { display: none; }
/* Schrift des Kacheltitels: gemeinsame Regel mit der Startseite in main.css. */
.product-card-flag {
	position: absolute;
	left: 0;
	top: 0;
	background: var(--surface);
	border: 1px solid var(--line-control);
	color: var(--muted);
	font-size: var(--fs-micro);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	padding: var(--space-mini) var(--space-1);
}

.store-empty { font-size: var(--fs-lead); color: var(--muted); }

/* Blaetterung */
.woocommerce-pagination { margin-top: var(--space-5); }
.woocommerce-pagination ul { list-style: none; display: flex; gap: var(--space-1); padding: 0; margin: 0; }
.woocommerce-pagination a, .woocommerce-pagination span {
	display: inline-block;
	padding: var(--space-1) var(--space-2);
	text-decoration: none;
	border: 1px solid var(--line-control);
}
.woocommerce-pagination .current { border-color: var(--accent-ink); color: var(--accent-ink); }

@media (max-width: 980px) {
	.store { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
	.store ul.products, .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/*
	 * Filter zu, bis man „Filter" antippt; offen zweispaltig, Kategorie links, Preis rechts.
	 * Das Label sieht aus wie „MENÜ" im Kopf. Die Zeile unter „SHOP": Filter links,
	 * Sortierung rechts.
	 */
	.store-top {
		flex-basis: 100%;
		justify-content: space-between;
		align-items: center;
		margin-bottom: var(--space-3);
	}
	.filters-schalter-label {
		display: inline-block;
		cursor: pointer;
		font-size: var(--fs-small);
		letter-spacing: var(--track-label);
		text-transform: uppercase;
		padding: var(--space-1) 0;
		border-bottom: 1px solid var(--primary);
	}
	.filters-schalter:focus-visible ~ .store-head .filters-schalter-label {
		outline: 2px solid var(--accent-ink);
		outline-offset: 2px;
	}
	.filters { display: none; }
	/*
	 * 1,4 : 1 statt halbe-halbe: Bei gleichen Spalten rutschte die Zahl hinter
	 * „Manschettenknöpfe" in die nächste Zeile. Die Preisstufen sind kurz.
	 */
	.filters-schalter:checked ~ .store .filters {
		display: grid;
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		gap: 0 var(--space-4);
	}
	/*
	 * Ein Auswahlfeld ist so breit wie seine längste Option („Nach Preis sortieren: niedrig
	 * nach hoch"). Begrenzt, damit es neben „Filter" passt. Rutscht es doch in die nächste
	 * Zeile (etwa bei „Filter: Manschettenknöpfe"), steht es dort rechts, nicht verloren links.
	 */
	/* `form.` für mehr Gewicht: `.woocommerce .woocommerce-ordering { margin: 0 }` steht weiter unten. */
	.store-top form.woocommerce-ordering { margin-left: auto; }
	.store-top .woocommerce-ordering select { max-width: 12rem; }
}
@media (max-width: 560px) {
	/*
	 * Zwei Spalten auch auf dem Handy (2026-09-14). Einspaltig wurde `/store/` mit 33
	 * Produkten über 9000 px lang — gemessen mit scripts/mobil-pruefen.mjs.
	 */
	.store ul.products, .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2); }
	/* Drei Dinge passen nicht in eine Zeile; die Zahlen je Kategorie stehen im Filter. */
	.store-count { display: none; }
}

/*
 * WooCommerce faerbt Preise in seiner Standardfarbe (#77a464, ein Gruen). Das ist
 * Buendorfs Farbfamilie und hat in unserer Palette nichts verloren.
 */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.product-card .price {
	color: var(--muted);
	font-size: var(--fs-body);
	font-weight: 300;
}
.woocommerce ul.products li.product .price del,
.product-card .price del { color: var(--muted); opacity: .7; margin-right: .4em; }
.woocommerce ul.products li.product .price ins,
.product-card .price ins {
	text-decoration: none;
	color: var(--accent-ink);
	font-weight: 500;
}

/* Die Bildflaeche ist ein <span>; ohne display:block traegt sie die absolute Marke nicht. */
.product-card-media { display: block; }

/* ---------- Produktseite ---------- */

/*
 * Zweispaltig ohne Template-Override: WooCommerce liefert Galerie und Zusammenfassung
 * bereits als zwei Kinder von `div.product`. Die Spalten kamen bisher aus
 * woocommerce-layout.css, das wir abgemeldet haben (Float-Raster). Hier als Grid.
 */
.woocommerce div.product {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: var(--space-6);
	align-items: start;
	padding: var(--space-5) 0 var(--space-6);
}
.woocommerce div.product::before,
.woocommerce div.product::after { content: none; display: none; }

/* Der gemeinsame Rahmen aus inc/woocommerce-hooks.php. */
.woo-main { padding-bottom: var(--space-5); }

/* Breadcrumb und die Abschnitte darunter laufen über die volle Breite. */
.woocommerce .woocommerce-breadcrumb,
.woocommerce div.product .related,
.woocommerce div.product .up-sells { grid-column: 1 / -1; }

/*
 * „Ähnliche Produkte" stand ohne Abstand direkt auf dem Rahmen der ersten Kachel (gesehen
 * 2026-09-14, mobil). Eine Stufe kleiner als eine Seitenüberschrift: Das ist ein Anhang
 * der Produktseite, kein eigener Abschnitt der Seite.
 */
.woocommerce div.product .related > h2,
.woocommerce div.product .up-sells > h2 { font-size: var(--fs-h2-sm); margin-bottom: var(--space-3); }

.woocommerce .woocommerce-breadcrumb {
	font-size: var(--fs-small);
	color: var(--muted);
	padding: var(--space-3) 0 0;
	margin: 0;
}
.woocommerce .woocommerce-breadcrumb a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line); }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--accent-ink); border-color: var(--accent-ink); }

/*
 * Galerie.
 * KEIN `position: sticky`: bei kurzer rechter Spalte wanderte die Galerie über die
 * Zeilengrenze hinaus und legte sich über die Abschnitte darunter (gesehen 2026-09-09).
 * `max-width` nimmt dem Bild die Wucht — es war einen Tick zu groß.
 */
/*
 * Galerie so breit wie das Hauptbild (2026-09-14, Arthur: Miniaturen „nicht bündig").
 * Vorher war die Galerie 560 px breit, das Hauptbild aber über die Höhe auf min(52vh, 480px)
 * begrenzt — ein quadratisches Foto wurde dadurch schmaler als die Miniaturenreihe darunter.
 * Jetzt ist die Galerie selbst so breit wie diese Höhengrenze: Ein quadratisches Foto füllt
 * sie genau, Bild und Miniaturen schließen links und rechts bündig ab, und beides passt
 * zusammen in einen Bildschirm. Mobil (einspaltig) gilt keine Grenze — dort die volle Breite.
 */
@media (min-width: 981px) {
	.woocommerce div.product .woocommerce-product-gallery { max-width: min(480px, 52vh); }
}
.woocommerce div.product .woocommerce-product-gallery__wrapper { margin: 0; }

/*
 * Auch die HÖHE begrenzen, nicht nur die Breite. Die Originale sind quadratisch bis
 * hochkant; mit reiner Breitenbegrenzung wurde das Hauptbild so hoch, dass die Miniaturen
 * unter den Bildschirmrand rutschten (Arthur 2026-09-09). Bild und Miniaturen müssen
 * zusammen in einen Bildschirm passen.
 */
/*
 * `width: auto` mit begrenzter Hoehe, NICHT `width: 100%` mit `object-fit: contain`.
 *
 * Mit `contain` blieb das `<img>`-Element ueber die volle Spaltenbreite stehen, waehrend das
 * Foto darin einpasste — seit es einen Rahmen gibt, sah man das sofort: die Linie lief links
 * und rechts am Foto vorbei ins Leere (2026-09-10). Jetzt ist das Element so gross wie das
 * Bild, der Rahmen klebt daran.
 *
 * Die Hoehenbegrenzung bleibt (Arthur 2026-09-09): Die Originale sind quadratisch bis
 * hochkant, ohne sie rutschen die Miniaturen unter den Bildschirmrand. Bild und Miniaturen
 * muessen zusammen in einen Bildschirm passen.
 */
/*
 * Seit 2026-09-14 steckt die Höhengrenze in der Breite der Galerie (oben). Ein quadratisches
 * oder querformatiges Foto füllt sie damit ganz. Die `max-height` fängt nur noch Hochformate
 * ab: Die werden dann schmaler statt höher als der Bildschirm und stehen mittig.
 * `width: auto` bleibt — mit `width: 100%` und begrenzter Höhe wäre das Foto verzerrt.
 */
.woocommerce div.product .woocommerce-product-gallery__image img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 70vh;
	margin-inline: auto;
}
/* Keine Fläche hinter dem Galeriebild — das Foto bringt seinen eigenen Grund mit. */
.woocommerce div.product .woocommerce-product-gallery__image { background: none; }
/*
 * Alle Miniaturen in EINER Reihe, gleich breit, bündig mit dem Bild darüber — bei vier wie
 * bei sieben. Vorher vier feste Spalten: Die fünfte Miniatur rutschte allein in eine zweite
 * Zeile (Arthur 2026-09-14).
 */
.woocommerce div.product .flex-control-thumbs {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: var(--space-1);
	list-style: none;
	margin: var(--space-1) 0 0;
	padding: 0;
}
.woocommerce div.product .flex-control-thumbs li { margin: 0; }
/* `cover`: Jede Miniatur füllt ihr Quadrat ganz, ohne Ränder — sonst wirkt die Reihe unruhig. */
.woocommerce div.product .flex-control-thumbs img {
	background: none;
	border: 1px solid transparent;
	cursor: pointer;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}
.woocommerce div.product .flex-control-thumbs img.flex-active { border-color: var(--accent-ink); }

/*
 * Angebots-Marke: überall ausgeblendet (Arthur 2026-09-09).
 * Der durchgestrichene Preis zeigt die Reduzierung bereits — eine zweite Marke daneben
 * ist Doppelung und riss auf der Produktseite eine Lücke über dem Bild auf.
 * Nicht im Template entfernt, sondern hier: WooCommerce gibt sie über einen eigenen Hook
 * aus, und ein `remove_action` würde sie auch aus künftigen Ansichten nehmen, in denen
 * sie sinnvoll sein kann.
 */
.woocommerce span.onsale { display: none; }

/* ---------- Zusammenfassung: eine Spalte mit klarer Reihenfolge ---------- */

.woocommerce div.product .summary { margin: 0; }

.product-eyebrow {
	font-size: var(--fs-micro);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 var(--space-1);
}

/*
 * Beschreibung: **linke Spalte, unter dem Foto** (Arthur 2026-09-10).
 *
 * `grid-column: 1` haelt sie in der Bildspalte statt ueber die volle Breite laufen zu
 * lassen. Rechts bleibt damit nur, was zum Kaufen noetig ist, und der Warenkorb-Knopf
 * steht wieder oben im Bild statt unter vier Absaetzen Fliesstext.
 */
.woocommerce div.product .product-description {
	grid-column: 1;
	margin: var(--space-6) 0 0;
	max-width: 68ch;
}
.product-description h2 {
	font-size: var(--fs-h2-sm);
	margin: 0 0 var(--space-3);
}
/* Die Kurzbeschreibung fuehrt an, deshalb eine Spur groesser als der Rest. */
.product-description-lead p { font-size: var(--fs-lead); color: var(--primary); }
.product-description p { color: var(--muted); }
.product-description p:last-child { margin-bottom: 0; }

/*
 * Faktenliste neben dem Warenkorb (Arthur 2026-09-10: „nur ein paar Bullets").
 * Quelle ist die `<ul>` aus der Kurzbeschreibung — siehe labaronne_kurzbeschreibung_teilen().
 */
.product-bullets { margin: var(--space-3) 0 0; }
/*
 * `.woocommerce ul { list-style: none }` weiter unten in dieser Datei hat dieselbe
 * Spezifitaet und stand spaeter — die Punkte fehlten deshalb. Der zusaetzliche
 * `.woocommerce`-Vorsatz sticht das, ohne `!important`.
 */
.woocommerce .product-bullets ul,
.woocommerce .product-more ul {
	list-style: disc;
	margin: 0;
	padding-left: 1.15em;
	font-size: var(--fs-body);
	line-height: 1.75;
	color: var(--muted);
}
.product-bullets li,
.product-more li { margin: 0; }
.product-bullets li::marker,
.product-more li::marker { color: var(--line-control); }
/*
 * Jeder Punkt beginnt groß. Im Bestand stehen manche klein („ideal für …", „bruchfest") —
 * angeglichen wird nur in der Anzeige, der Text im Backend bleibt, wie er ist.
 */
.product-bullets li::first-letter,
.product-more li::first-letter { text-transform: uppercase; }

/*
 * Karaffen (Arthur 2026-09-14): Einleitungssatz unter dem Preis, darunter Fassungsvermögen und
 * Größe, dann „Details" zum Aufklappen — natives <details>, ohne JavaScript bedienbar. Die
 * Beschriftung wie „Details" im Cookie-Banner (main.css, .consent-details).
 */
.product-intro { margin: var(--space-3) 0 0; }
.product-intro p { margin: 0; font-size: var(--fs-body); line-height: 1.75; color: var(--muted); max-width: 60ch; }
/* Bei den Pancale-Tellern steht der Satz im Bestand in einem <blockquote> — kein Zitat, also kein Einzug. */
.product-intro blockquote { margin: 0; padding: 0; border: 0; font-style: normal; }
.product-intro + .product-bullets { margin-top: var(--space-2); }
.product-more { margin: var(--space-2) 0 0; }
.product-more summary {
	cursor: pointer;
	font-size: var(--fs-small);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--accent-ink);
	padding: var(--space-1) 0;
}
.woocommerce .product-more ul { margin-top: var(--space-1); }

/* Produktdaten als Aufzählung statt Tabelle (Vorgabe Arthur 2026-09-09). */
.product-facts {
	margin: var(--space-4) 0 0;
	padding: 0;
	border-top: 1px solid var(--line);
}
.product-fact {
	display: grid;
	grid-template-columns: 9.5rem 1fr;
	gap: var(--space-3);
	padding: var(--space-2) 0;
	border-bottom: 1px solid var(--line);
}
.product-fact dt { color: var(--muted); margin: 0; }
.product-fact dd { margin: 0; }

.woocommerce div.product .product_title {
	font-size: var(--fs-h2);
	line-height: var(--lh-heading);
	margin: 0 0 var(--space-2);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--serif);
	font-size: var(--fs-price);
	font-weight: 600;
	color: var(--primary);
	margin: 0 0 var(--space-micro);
}
.woocommerce div.product p.price del { font-size: var(--fs-lead); }
.woocommerce div.product p.price ins { color: var(--accent-ink); }

/* Germanized: Pflichtangaben. Nicht wegstylen, nur ruhig setzen (shop.md §3). */
.woocommerce-gzd-additional-info,
.wc-gzd-additional-info {
	font-size: var(--fs-small);
	color: var(--muted);
	margin: 0 0 var(--space-mini);
	display: block;
}
.woocommerce-gzd-additional-info a,
.wc-gzd-additional-info a { color: var(--accent-ink); }

.woocommerce div.product .stock { font-size: var(--fs-body); color: var(--accent-ink); margin: var(--space-2) 0 0; }
.woocommerce div.product .stock.out-of-stock { color: var(--muted); }

/*
 * Kaufzeile: Menge und Knopf auf EINER Linie, gleiche Höhe, gleiche Kante.
 * Vorher standen sie untereinander in unterschiedlichen Höhen — Arthur: „sehen komisch aus".
 * Die Varianten-Tabelle bleibt darüber, sie ist eine eigene Entscheidung.
 */
.woocommerce div.product form.cart {
	margin: var(--space-4) 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--space-2);
}
.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .single_variation_wrap,
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart { flex-basis: 100%; }
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--space-2);
}
/*
 * Kein Abstand unter der Auswahl-Tabelle (2026-09-14). Zusammen mit dem Zeilenabstand, der
 * Zellpolsterung, dem reservierten „Zurücksetzen"-Link und dem Abstand über der Kaufzeile
 * klafften zwischen Farbe und Menge über 100 px (Arthur/TODO). Den Abstand gibt jetzt allein
 * die Lücke des Formulars (`gap`).
 */
.woocommerce div.product form.cart .variations { margin-bottom: 0; width: 100%; }
/*
 * Die Auswahl kommt aus WooCommerce als <table>. Als Tabelle gesetzt schiebt die
 * Kopfspalte die Farbfelder weit nach rechts und Beschriftung und Knopf stehen nicht mehr
 * auf einer Linie. Deshalb Blocksatz: Beschriftung oben, Auswahl darunter — dieselbe
 * Anordnung wie bei den Formularfeldern auf /kontakt/ (Label ueber dem Feld).
 * `role="presentation"` steht bereits am Tabellen-Element, die Semantik geht nicht verloren.
 */
.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .variations tbody,
.woocommerce div.product form.cart .variations tr,
.woocommerce div.product form.cart .variations td { display: block; }
.woocommerce div.product form.cart .variations tr { margin-bottom: var(--space-3); }
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td { text-align: left; padding: 0 0 var(--space-1); }
.woocommerce div.product form.cart .variations label {
	font-size: var(--fs-small);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 400;
}
/*
 * `variation-swatches-woo` steht auf „Beschriftung: keine" und blendet die Kopfzelle der
 * Auswahl mit `.cfvsw-label-none table.variations tr th.label { display: none !important }`
 * aus (swatches.css:278). Ergebnis waren zwei Knopfreihen ohne Bezeichnung — der Kunde sah
 * „Grün" und „Groß/Klein", ohne zu wissen, was er da wählt. Gefunden 2026-09-10.
 *
 * `!important` hier ist die Gegenwehr gegen ein `!important` aus fremdem CSS, nicht
 * Bequemlichkeit. In unserem Stylesheet, weil dieses die einzige Quelle fuers Aussehen des
 * Shops ist (shop.md §4b) — eine Plugin-Einstellung muesste auf Live erneut gesetzt werden
 * und faellt bei einem Plugin-Reset still zurueck.
 */
.cfvsw-label-none table.variations tr th.label { display: block !important; }
.woocommerce div.product form.cart .quantity { margin: 0; flex: none; }
.woocommerce div.product form.cart .quantity input {
	font-family: inherit;
	font-size: var(--fs-body);
	height: var(--control-h);
	padding: 0 var(--space-1);
	width: 88px;
	text-align: center;
	background: var(--surface);
	border: 1px solid var(--line-control);
	color: var(--primary);
}
.woocommerce div.product form.cart .button,
.woocommerce div.product form.cart button.button {
	flex: 1 1 220px;
	height: var(--control-h);
	background: var(--accent-ink);
	color: var(--on-dark);
	border: 1px solid var(--accent-ink);
	border-radius: 0;
	font-family: inherit;
	font-weight: 500;
	font-size: var(--fs-small);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	padding: 0 var(--space-4);
	transition: background .25s, border-color .25s;
}
.woocommerce div.product form.cart .button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.woocommerce div.product form.cart .button:disabled { background: var(--line); border-color: var(--line); color: var(--muted); }
.woocommerce div.product form.cart .quantity { margin-right: var(--space-2); }
/* Kein eigener Abstand — die Lücke des Formulars genügt (Varianten-Abschnitt weiter unten). */
.woocommerce div.product form.cart .single_variation_wrap { margin-top: 0; }

.woocommerce div.product .product_meta {
	margin-top: var(--space-4);
	padding-top: var(--space-2);
	border-top: 1px solid var(--line);
	font-size: var(--fs-small);
	color: var(--muted);
}
.woocommerce div.product .product_meta a { color: var(--accent-ink); text-decoration: none; }

@media (max-width: 980px) {
	.woocommerce div.product { grid-template-columns: 1fr; gap: var(--space-4); }
	.woocommerce div.product .woocommerce-product-gallery { position: static; }
}

/* ---------- Warenkorb, Kasse, Konto ---------- */

/*
 * Diese drei Seiten sind normale WordPress-Seiten mit einem Shortcode. Die volle Breite
 * bekommen sie in `page.php` (`wrap` statt `narrow`), für Kopf UND Inhalt. Bis 2026-09-15
 * wurde hier per CSS nur der Inhalt verbreitert. Seit die Überschrift links steht, stand sie
 * dadurch 270 px neben ihrem Inhalt (Arthur: „bei Kasse etc. die Position vergleichen").
 * Struktur und Ablauf bleiben unangetastet, das ist WooCommerce (CLAUDE.md).
 */

/* Knoepfe — WooCommerce liefert sie sonst lila. */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	background: var(--accent-ink);
	color: var(--on-dark);
	border: 1px solid var(--accent-ink);
	border-radius: 0;
	font-family: inherit;
	font-weight: 500;
	font-size: var(--fs-small);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	padding: var(--space-2) var(--space-4);
	line-height: 1.2;
	transition: background .25s, border-color .25s;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
	color: var(--on-dark);
}
.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce a.button.alt { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--on-dark); }
.woocommerce .button:disabled,
.woocommerce button.button:disabled[disabled] {
	background: var(--line);
	border-color: var(--line);
	color: var(--muted);
}

/* Sekundaere Knoepfe ruhiger: Gutschein, Warenkorb aktualisieren. */
.woocommerce .coupon .button,
.woocommerce button[name="update_cart"] {
	background: transparent;
	color: var(--primary);
	border-color: var(--primary);
}
.woocommerce .coupon .button:hover,
.woocommerce button[name="update_cart"]:hover {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--bg);
}

/* Tabellen */
.woocommerce table.shop_table {
	border: 0;
	border-collapse: collapse;
	border-radius: 0;
	width: 100%;
	margin: 0 0 var(--space-4);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border: 0;
	border-bottom: 1px solid var(--line);
	padding: var(--space-2) var(--space-2);
	text-align: left;
	font-weight: 400;
}
.woocommerce table.shop_table thead th {
	font-size: var(--fs-micro);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--muted);
	border-bottom: 1px solid var(--primary);
}
.woocommerce table.shop_table td.product-remove { width: 2.5rem; padding-left: 0; }
.woocommerce table.shop_table td.product-thumbnail img { width: 68px; height: auto; background: var(--surface); }
.woocommerce table.shop_table td.product-name a { color: var(--primary); text-decoration: none; border-bottom: 1px solid var(--line); }
.woocommerce table.shop_table td.product-name a:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.woocommerce a.remove {
	color: var(--muted) !important;
	font-size: var(--fs-h3);
	line-height: 1;
	font-weight: 300;
}
.woocommerce a.remove:hover { color: var(--accent-ink) !important; background: none; }

.woocommerce .quantity input.qty {
	font-family: inherit;
	padding: var(--space-1) var(--space-mini);
	width: 68px;
	text-align: center;
	background: var(--surface);
	border: 1px solid var(--line-control);
	color: var(--primary);
}

/* Warenkorb: Formular und Summen nebeneinander statt untereinander. */
@media (min-width: 981px) {
	.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
	.woocommerce-cart form.woocommerce-cart-form { margin-bottom: 0; }
	.woocommerce-cart .cart-collaterals {
		width: 100%;
		max-width: 460px;
		margin-left: auto;
	}
}
.woocommerce .cart_totals h2,
.woocommerce-checkout h3 {
	font-family: var(--serif);
	font-size: var(--fs-h2-sm);
	margin: 0 0 var(--space-2);
}
.woocommerce .cart_totals table.shop_table td,
.woocommerce .cart_totals table.shop_table th { padding: var(--space-2) 0; }
.woocommerce .wc-proceed-to-checkout { padding: 0; }
.woocommerce .wc-proceed-to-checkout a.checkout-button {
	display: block;
	text-align: center;
	font-size: var(--fs-body);
	padding: var(--space-2) var(--space-4);
}

/* Meldungen */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: var(--surface);
	border: 1px solid var(--line);
	border-top: 2px solid var(--accent-ink);
	border-radius: 0;
	color: var(--primary);
	padding: var(--space-2) var(--space-3);
	margin: 0 0 var(--space-4);
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-3);
	align-items: center;
	justify-content: space-between;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { content: none; }
.woocommerce-error { border-top-color: var(--danger); }

/* Kasse: zwei Spalten */
@media (min-width: 981px) {
	.woocommerce-checkout form.checkout {
		display: grid;
		grid-template-columns: 1.05fr .95fr;
		gap: var(--space-6);
		align-items: start;
	}
	.woocommerce-checkout form.checkout #customer_details { grid-column: 1; }
	.woocommerce-checkout form.checkout > h3#order_review_heading,
	.woocommerce-checkout form.checkout > #order_review { grid-column: 2; }
	.woocommerce-checkout form.checkout .woocommerce-additional-fields { margin-top: var(--space-3); }
}
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; }

/* Formularfelder */
/*
 * `max-width: none` hebt die Lesebreite auf (Arthur 2026-09-17: „wie sieht das denn aus hier
 * mit den versch. Breiten??").
 *
 * WooCommerce baut jede Formularzeile als `<p>`. In `main.css` steht für Absätze
 * `max-width: min(66ch, 100%)` — die Lesebreite für Fließtext. Bei dieser Schrift sind 66
 * Zeichen **717,7 px**, und genau dort hörten Firmenname, Straße und E-Mail auf, während
 * Vorname/Nachname und PLZ/Ort bis 766 liefen. Zweispaltige Zeilen fielen nicht auf, weil
 * 372 px ohnehin unter der Grenze liegen.
 *
 * Gemessen, nicht geraten: `maxWidth: min(717.679px, 100%)` stand auf **jeder** Zeile.
 * Eine Lesebreite ist für Fließtext gedacht, nicht für Eingabefelder.
 */
.woocommerce form .form-row { padding: 0 0 var(--space-2); margin: 0; display: block; max-width: none; }
.woocommerce form .form-row label {
	display: block;
	font-size: var(--fs-small);
	margin-bottom: var(--space-mini);
	letter-spacing: var(--track-label);
}
.woocommerce form .form-row .required { color: var(--accent-ink); text-decoration: none; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
	font-family: inherit;
	font-size: var(--fs-body);
	padding: var(--space-2) var(--space-2);
	height: auto;
	background: var(--surface);
	border: 1px solid var(--line-control);
	border-radius: 0;
	color: var(--primary);
	width: 100%;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	outline: 2px solid var(--accent-ink);
	outline-offset: 1px;
	border-color: var(--accent-ink);
}
.woocommerce .select2-container .select2-selection__rendered { line-height: 1.4; padding: 0; color: var(--primary); }
.woocommerce .select2-container .select2-selection--single { display: flex; align-items: center; }

/* Zahlarten */
.woocommerce-checkout #payment {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 0;
	padding: var(--space-3);
}
.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 1px solid var(--line);
	padding: 0 0 var(--space-2);
	margin: 0 0 var(--space-2);
	list-style: none;
}
.woocommerce-checkout #payment ul.payment_methods li { margin-bottom: var(--space-1); }
.woocommerce-checkout #payment ul.payment_methods label { font-weight: 500; }
.woocommerce-checkout #payment div.payment_box {
	background: var(--bg);
	border-radius: 0;
	font-size: var(--fs-body);
	color: var(--muted);
	margin: var(--space-1) 0 0;
	padding: var(--space-2) var(--space-2);
}
.woocommerce-checkout #payment div.payment_box::before { content: none; }
.woocommerce-checkout #payment .form-row.place-order { padding: 0; margin: 0; }
.woocommerce-checkout #payment #place_order { width: 100%; padding: var(--space-2) var(--space-4); font-size: var(--fs-body); }

/*
 * Germanized haengt hier die Pflicht-Kaestchen und die Button-Loesung ein.
 * Nur Abstand geben, nie ausblenden oder umbenennen (shop.md §3).
 */
.woocommerce-checkout .wc-gzd-checkbox-placeholder,
.woocommerce-checkout .legal { margin: 0 0 var(--space-2); font-size: var(--fs-body); }
.woocommerce-checkout .wc-gzd-checkbox-placeholder a { color: var(--accent-ink); }

/*
 * Konto, angemeldet: Navigation links, Inhalt daneben. Nur mit `.logged-in` — abgemeldet
 * steht hier das Anmeldeformular, und die 220-px-Spalte schluckte dann den leeren
 * Hinweis-Container.
 */
.woocommerce-account.logged-in .woocommerce { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-5); align-items: start; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; line-height: 2.2; }
.woocommerce-account .woocommerce-MyAccount-navigation a { text-decoration: none; border-bottom: 1px solid transparent; }
.woocommerce-account .woocommerce-MyAccount-navigation a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a { color: var(--accent-ink); border-color: var(--accent-ink); }
.woocommerce-account .woocommerce-MyAccount-content { width: auto; float: none; }
/*
 * Abgemeldet: Anmelden und Registrieren nebeneinander (2026-09-15, Arthur: „sieht total
 * komisch aus"). WooCommerce liefert dafür `#customer_login.col2-set`, die Spalten kamen aber
 * aus dem abgemeldeten woocommerce-layout. Deshalb standen beide Formulare halb breit
 * untereinander, mit Überschriften fast so groß wie die <h1>.
 *
 * Jetzt zwei gleich breite Spalten, die weißen Flächen gleich hoch (Zeile `1fr`), die
 * Überschriften in der Abschnittsstufe wie auf /about-us/.
 */
#customer_login {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-5) var(--space-6);
}
#customer_login > .col-1,
#customer_login > .col-2 {
	width: auto;
	float: none;
	display: grid;
	grid-template-rows: auto 1fr;
}
#customer_login h2 { font-size: var(--fs-h2-sm); margin: 0 0 var(--space-3); }
.woocommerce-account form.login,
.woocommerce-account form.register {
	border: 1px solid var(--line);
	border-radius: 0;
	padding: var(--space-5);
	background: var(--surface);
	margin: 0;
}

/*
 * „Passwort anzeigen": WooCommerce setzt einen Knopf ans Passwortfeld, dessen Aussehen
 * (Augen-Symbol) aus dem abgemeldeten woocommerce-general kam. Ohne das stand er als leere
 * Mini-Pille unter dem Feld (gesehen 2026-09-14, /mein-account/). Jetzt ein Textknopf rechts
 * im Feld. Vorleseprogramme lesen WooCommerces eigenes aria-label, nicht diesen Text.
 */
.woocommerce .password-input { position: relative; display: block; }
.woocommerce form .form-row .password-input input.input-text { padding-right: 6.5rem; }
.woocommerce .show-password-input {
	position: absolute;
	top: 50%;
	right: var(--space-2);
	transform: translateY(-50%);
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: var(--fs-small);
	color: var(--accent-ink);
}
.woocommerce .show-password-input::after { content: "Anzeigen"; }
.woocommerce .show-password-input.display-password::after { content: "Verbergen"; }

@media (max-width: 980px) {
	.woocommerce-account.logged-in .woocommerce { grid-template-columns: 1fr; gap: var(--space-4); }
	#customer_login { grid-template-columns: 1fr; }
	.woocommerce-account form.login,
	.woocommerce-account form.register { padding: var(--space-4) var(--space-3); }
	.woocommerce-cart .cart-collaterals { max-width: none; }
}

/* ==========================================================================
   Was bisher aus WooCommerce' eigenem Stylesheet kam.
   Ab hier ist nichts mehr uebermalt — das ist die Grundausstattung selbst.
   ========================================================================== */

/* ---------- Aufraeumen ---------- */

.woocommerce .clear { clear: both; }
.woocommerce ul { list-style: none; }
.woocommerce .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* ---------- Auswahlfelder (selectWoo/select2) ----------
   Steckte in woocommerce-general. Ohne diese Regeln ist die Laenderauswahl in der
   Kasse eine unformatierte Liste. */

.select2-container { width: 100% !important; font-family: var(--sans); }
.select2-container .select2-selection--single {
	height: auto;
	background: var(--surface);
	border: 1px solid var(--line-control);
	border-radius: 0;
	padding: var(--space-2) var(--space-2);
	display: flex;
	align-items: center;
}
.select2-container--open .select2-selection--single { border-color: var(--accent-ink); }
.select2-container .select2-selection__rendered { padding: 0; line-height: 1.4; color: var(--primary); }
.select2-container .select2-selection__arrow { height: 100%; right: 12px; }
.select2-dropdown {
	background: var(--surface);
	border: 1px solid var(--accent-ink);
	border-radius: 0;
	color: var(--primary);
}
.select2-container .select2-search--dropdown .select2-search__field {
	font-family: inherit;
	padding: var(--space-1) var(--space-2);
	border: 1px solid var(--line);
	background: var(--bg);
}
.select2-results__option { padding: var(--space-1) var(--space-2); }
.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--accent-ink);
	color: var(--on-dark);
}

/* ---------- Ladeschleier (blockUI) ---------- */

.blockUI.blockOverlay { position: relative; }
.blockUI.blockOverlay::before,
.woocommerce .loader::before {
	content: '';
	position: absolute;
	top: 50%; left: 50%;
	width: 24px; height: 24px;
	/*
	 * Der einzige freie px-Wert im ganzen Theme, und das mit Absicht: -12px ist die
	 * halbe Kreiselbreite und zentriert ihn gegen `top/left: 50%`. Das ist Geometrie,
	 * kein Rhythmus — hier gehoert kein Abstands-Token hin. Aendert sich die Groesse,
	 * aendert sich dieser Wert mit.
	 */
	margin: -12px 0 0 -12px;
	border: 2px solid var(--line);
	border-top-color: var(--accent-ink);
	border-radius: 50%;
	animation: labaronne-spin .8s linear infinite;
}
@keyframes labaronne-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.blockUI.blockOverlay::before { animation: none; border-top-color: var(--line); }
}

/* ---------- Sternebewertungen ---------- */

.woocommerce .star-rating {
	float: none;
	overflow: hidden;
	position: relative;
	height: 1.2em;
	line-height: 1.2;
	font-size: .9em;
	width: 5.4em;
	font-family: star;
	color: var(--accent-ink);
}
.woocommerce .star-rating::before {
	content: '\73\73\73\73\73';
	color: var(--line);
	float: left;
	top: 0; left: 0;
	position: absolute;
}
.woocommerce .star-rating span {
	overflow: hidden;
	float: left;
	top: 0; left: 0;
	position: absolute;
	padding-top: 1.5em;
}
.woocommerce .star-rating span::before { content: '\53\53\53\53\53'; top: 0; position: absolute; left: 0; }
.woocommerce .woocommerce-product-rating { margin-bottom: var(--space-2); }

/* ---------- Produktgalerie ---------- */

.woocommerce div.product div.images { margin-bottom: 0; }
/*
 * KEIN `width: 100%` hier (2026-09-14). Diese Regel wiegt schwerer als die Galerie-Regel
 * weiter oben (`width: auto` + Höhenbegrenzung) — zusammen zogen sie jedes Foto auf volle
 * Breite und kappten zugleich die Höhe: verzerrt (Arthur: „alle verzerrt"). Die Miniaturen
 * bringen ihre Breite selbst mit.
 */
.woocommerce div.product div.images img { display: block; height: auto; }
.woocommerce div.product .woocommerce-product-gallery { position: relative; }
/*
 * Vergrößerung (PhotoSwipe, seit 2026-09-14 wieder an, inc/setup.php): Ein Klick aufs Foto
 * öffnet sie, mit Schließen-Knopf und Wischgesten. Den Lupen-Auslöser, den WooCommerce als
 * Emoji-Zeichen setzt, braucht es dafür nicht — er bleibt ausgeblendet. Der Mauszeiger zeigt,
 * dass das Foto sich vergrößern lässt.
 */
.woocommerce-product-gallery__trigger { display: none; }
.woocommerce div.product .woocommerce-product-gallery__image a { cursor: zoom-in; }
.woocommerce div.product div.images .flex-control-thumbs { overflow: hidden; zoom: 1; }

/* ---------- Varianten ---------- */

/*
 * „Zurücksetzen" rechts neben der Beschriftung („FARBE"), nicht darunter. WooCommerce
 * blendet den Link über `visibility` ein und aus — darunter hielt er auch unsichtbar seine
 * Zeile frei und vergrößerte die Lücke zur Kaufzeile (2026-09-14). Absolut gesetzt nimmt er
 * keinen Platz. Dazu die letzten Abstände unter der Auswahl weg.
 */
.woocommerce div.product form.cart .variations tr { position: relative; }
.woocommerce div.product form.cart .variations tr:last-child { margin-bottom: 0; }
.woocommerce div.product form.cart .variations td.value { padding-bottom: 0; }
.woocommerce div.product form.cart .reset_variations {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	font-size: var(--fs-small);
	color: var(--muted);
}
/*
 * Kaufzone geordnet (Arthur 2026-09-14): Auswahl → Menge und Knopf → darunter klein
 * Verfügbarkeit und Lieferzeit. WooCommerce setzt die Angaben zur gewählten Variante
 * (Preis, „Vorrätig"/„Nicht vorrätig") VOR die Kaufzeile; `order` holt sie optisch darunter,
 * ohne das Markup anzufassen. Die Lieferzeit hängt inc/woocommerce-hooks.php hinter den Knopf.
 */
.woocommerce div.product form.cart .single_variation_wrap { display: flex; flex-direction: column; gap: var(--space-1); }
.woocommerce div.product form.cart .single_variation { order: 2; }
.woocommerce div.product form.cart .woocommerce-variation-price { margin: 0; }
.woocommerce div.product form.cart .woocommerce-variation-availability,
.woocommerce div.product form.cart .woocommerce-variation-availability p { font-size: var(--fs-small); margin: 0; }
.woocommerce div.product .stock.in-stock { color: var(--muted); }
.woocommerce div.product .stock.out-of-stock { color: var(--danger); }
/* Germanizeds Lieferzeit heißt `p.wc-gzd-additional-info.delivery-time-info` (geprüft 2026-09-14). */
.woocommerce div.product .summary > .delivery-time-info { margin-top: var(--space-1); }

/* ---------- Bestellbestaetigung und Bestelluebersicht ---------- */

.woocommerce .woocommerce-order { padding-bottom: var(--space-7); }
.woocommerce .woocommerce-thankyou-order-received {
	font-family: var(--serif);
	font-size: var(--fs-h2-sm);
	margin-bottom: var(--space-3);
}
.woocommerce ul.order_details {
	list-style: none;
	margin: 0 0 var(--space-4);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4) var(--space-5);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding: var(--space-3) 0;
}
.woocommerce ul.order_details li {
	font-size: var(--fs-micro);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--muted);
}
.woocommerce ul.order_details li strong {
	display: block;
	font-family: var(--serif);
	font-size: var(--fs-h3);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--primary);
	margin-top: var(--space-mini);
}
.woocommerce .woocommerce-customer-details address {
	font-style: normal;
	border: 1px solid var(--line);
	padding: var(--space-3) var(--space-3);
	background: var(--surface);
}

/* ---------- Passwortstaerke ---------- */

.woocommerce form .woocommerce-password-strength {
	text-align: left;
	font-size: var(--fs-small);
	padding: var(--space-mini) 0 0;
}
.woocommerce form .woocommerce-password-strength.short,
.woocommerce form .woocommerce-password-strength.bad { color: var(--danger); }
.woocommerce form .woocommerce-password-strength.good,
.woocommerce form .woocommerce-password-strength.strong { color: var(--success); }
.woocommerce form .woocommerce-password-hint { font-size: var(--fs-small); color: var(--muted); }

/* ---------- Ergebnis- und Sortierleiste im Archiv ---------- */

.woocommerce .woocommerce-result-count { font-size: var(--fs-body); color: var(--muted); margin: 0; }
.woocommerce .woocommerce-ordering { margin: 0; }

/* ---------- Kleinigkeiten ---------- */

.woocommerce mark, .woocommerce ins { background: none; color: inherit; }
.woocommerce .required { color: var(--accent-ink); }
.woocommerce small.note { color: var(--muted); font-size: var(--fs-small); }

/* ---------- Germanized ----------
   Die Ausgaben bleiben unangetastet — nur ihr Aussehen kommt jetzt von hier.
   Nichts davon darf ausgeblendet werden: es sind Pflichtangaben (shop.md §3). */

.wc-gzd-additional-info,
.woocommerce-gzd-additional-info {
	display: block;
	font-size: var(--fs-small);
	color: var(--muted);
	margin: 0 0 var(--space-micro);
	line-height: 1.5;
}
.wc-gzd-additional-info a { color: var(--accent-ink); }
.wc-gzd-additional-info.tax-info,
.wc-gzd-additional-info.shipping-costs-info { display: inline; margin-right: .4em; }

.wc-gzd-checkbox-placeholder {
	display: flex;
	gap: var(--space-1);
	align-items: flex-start;
	margin: 0 0 var(--space-2);
	font-size: var(--fs-body);
	line-height: 1.55;
}
.wc-gzd-checkbox-placeholder input[type="checkbox"] { width: auto; margin-top: .35em; flex: none; }
.wc-gzd-checkbox-placeholder label { margin: 0; font-size: inherit; }
.wc-gzd-checkbox-placeholder a { color: var(--accent-ink); }

.woocommerce-gzd-legal-checkbox-text { font-size: var(--fs-body); color: var(--primary); }
.wc-gzd-order-submit { margin-top: var(--space-3); }
.wc-gzd-place-order .button { width: 100%; }

/* Warenkorb-Zeilen von Germanized */
.wc-gzd-cart-item-name-wrapper { display: block; }
.wc-gzd-cart-item-thumbnail img { width: 68px; height: auto; background: var(--surface); }

/*
 * EU-Gewährleistungsmitteilung (R8, inc/gewaehrleistung.php) auf der Produktseite: der Satz
 * unter Kaufbereich und Lieferzeit. Neutral wie ein Rechtstext-Link, kein Abzeichen (G9).
 */
.summary > .gewaehr-hinweis { margin: var(--space-2) 0 0; font-size: var(--fs-small); }
.gewaehr-hinweis .wc-gzd-popover-trigger { color: var(--accent-ink); }

/*
 * Das Aufklappfenster ist ein natives `popover`-Element — der Browser zentriert es und legt
 * es über alles. Der Leitfaden der Kommission verlangt, dass die Mitteilung in Standardgröße
 * lesbar ist: am Desktop deshalb bis 860 px breit (Fließtext rund 15 px). Auf dem Handy
 * bleibt das Bild mindestens 660 px breit (rund 12 px) und lässt sich seitlich schieben —
 * verkleinert auf Handybreite wäre die Schrift nur noch etwa 6 px groß. Nur proportional,
 * kein Zuschnitt (G10).
 */
.wc-gzd-popover {
	width: min(860px, 94vw);
	max-height: 94vh;
	padding: 0;
	border: 1px solid var(--line-control);
	background: var(--surface);
	overflow-x: hidden;
	overflow-y: auto;
}
.wc-gzd-popover::backdrop { background: rgba(26, 28, 24, .45); }
.wc-gzd-popover-header { display: flex; justify-content: flex-end; padding: var(--space-1); }
.wc-gzd-popover-close svg { width: 24px; height: 24px; fill: var(--primary); display: block; }
.wc-gzd-popover-content { padding: 0 var(--space-2) var(--space-2); overflow-x: auto; }
.wc-gzd-popover-content img { display: block; width: 100%; min-width: 660px; height: auto; }
.wc-gzd-popover-caption { font-size: var(--fs-small); margin: var(--space-1) 0 0; }
.wc-gzd-popover-caption a { color: var(--accent-ink); }

/* Lieferzeit und Grundpreis, sobald gepflegt */
.wc-gzd-delivery-time-info,
.wc-gzd-unit-price-info {
	display: block;
	font-size: var(--fs-small);
	color: var(--muted);
	margin-top: var(--space-micro);
}

/* ---------- Farbauswahl (variation-swatches-woo) ----------
   Das Plugin-CSS bleibt geladen, weil es die Zustandslogik traegt. Das Aussehen
   kommt von hier. Echte Farbflaechen sind erst moeglich, wenn `pa_farbe` als
   globales Attribut existiert — bis dahin sind es Textknoepfe. */

.cfvsw-swatches-container { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0 0 var(--space-1); }
.cfvsw-swatches-container .cfvsw-swatches-option {
	border: 1px solid var(--line);
	border-radius: 0;
	background: var(--surface);
	padding: var(--space-1) var(--space-2);
	font-size: var(--fs-small);
	line-height: 1.2;
	color: var(--primary);
	cursor: pointer;
	transition: border-color .2s, color .2s;
	box-shadow: none;
	min-width: 0;
	min-height: 0;
	width: auto;
	height: auto;
}
.cfvsw-swatches-container .cfvsw-swatches-option:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.cfvsw-swatches-container .cfvsw-selected-swatch {
	border-color: var(--primary);
	box-shadow: inset 0 0 0 1px var(--primary);
}
.cfvsw-swatches-container .cfvsw-out-of-stock { opacity: .4; }
.cfvsw-swatches-container .cfvsw-swatch-inner { border-radius: 0; }