/* ====================================================================
 * Shop-Listing-Feinschliff (WooCommerce-Loop, Elementor-Archive-Widget)
 * Ergänzt den Loop-Override aus pages.css. Bewusst eigene Datei, damit
 * parallele pages.css-Arbeit nicht kollidiert; kann später in den
 * WOOCOMMERCE-LOOP-OVERRIDE-Block von pages.css gefaltet werden.
 * Lädt nach allen Design-System-Styles → gewinnt bei gleicher Spezifität.
 * ==================================================================== */

/*
 * Das Listing rendert über Elementors Archive-Products-Widget:
 * div.woocommerce > ul.products.elementor-grid > li.product. Das
 * Widget-CSS überschreibt das display:flex der Karte aus pages.css, die
 * Karte fällt auf display:block zurück. In einem Block-Container ist
 * margin-top:auto wirkungslos (= 0), deshalb klebte der Button am Inhalt
 * statt am unteren Kartenrand. Wir erzwingen die Flex-Spalte zurück —
 * !important, weil das Elementor-Kit hier höher gewichtet (siehe
 * known-issues.md, „Elementor-Bridge").
 */
.woocommerce ul.products li.product {
	display: flex !important;
	flex-direction: column !important;
}

/*
 * Versand-Lead + Button als Gruppe an den unteren Kartenrand binden:
 * margin-top:auto schiebt Lead und nachfolgenden Button nach unten,
 * dadurch liegen alle Buttons einer Reihe auf gleicher Höhe (die Karten
 * strecken sich im Grid ohnehin auf die Reihenhöhe). padding links/rechts
 * richtet die Zeile an Titel/Preis aus — vorher saß sie bündig am linken
 * Kartenrand.
 */
.woocommerce ul.products li.product .mb-loop-lead {
	display: flex;
	margin-top: auto;
	padding-left: var(--mb-space-3);
	padding-right: var(--mb-space-3);
}

/*
 * Kategorie-Spec-Zeile („Bodenbelag" …) saß bündig am linken Kartenrand,
 * während Titel/Preis eingerückt sind. Gleiches Padding zur Ausrichtung.
 */
.woocommerce ul.products li.product .mb-loop-spec {
	padding-left: var(--mb-space-3);
	padding-right: var(--mb-space-3);
}

/*
 * Button lag mit width:100% PLUS seitlichen Margins über den Kartenrand
 * hinaus (lief rechts heraus). width:auto + seitliche Margins: der
 * Flex-Stretch füllt die Kachel abzüglich der Ränder — Button sitzt mit
 * sauberem Abstand in der Kachel (wie im Mockup). Oben/unten-Margin bleibt
 * aus dem pages.css-Shorthand erhalten.
 */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
	width: auto;
	margin-left: var(--mb-space-3);
	margin-right: var(--mb-space-3);
}

/*
 * WooCommerce-German-Market-Zusatzinfos („Enthält 19% MwSt.", „zzgl. Versand")
 * werden als .wgm-info (woocommerce-de_price_taxrate / woocommerce_de_versandkosten)
 * NACH dem .price ausgegeben und liegen damit außerhalb dessen Padding — sie
 * klebten am linken Kartenrand. Gleiche Einrückung wie Titel/Preis/Lead.
 */
.woocommerce ul.products li.product .wgm-info {
	padding-left: var(--mb-space-3);
	padding-right: var(--mb-space-3);
}

/*
 * Ab-Preis pro Laufmeter der Dielen: Laufmeter-Preis groß (erbt die normale
 * .price-Optik), Quadratmeter-Umrechnung klein und gedämpft darunter.
 */
.woocommerce ul.products li.product .mb-abprice__lfm {
	display: block;
}
.woocommerce ul.products li.product .mb-abprice__m2 {
	display: block;
	font-size: var(--mb-fs-meta);
	color: var(--mb-ink-500);
	text-transform: none;
	letter-spacing: 0;
	margin-top: 2px;
}
.woocommerce ul.products li.product .mb-abprice__tax {
	margin-left: 4px;
}