/* ====================================================================
 * Variantenauswahl auf der Produktseite („Farbe“, „Größe“, weitere Attribute)
 * Quellen: Farbfelder-Plugin (woo-variation-swatches: Bild-/Farbkacheln und
 * Knopf-Typ) sowie eigene Auswahlknöpfe für alle übrigen Attribute
 * (assets/js/pdp-auswahl.js, ersetzt das native <select>).
 * Nur auf Produktseiten geladen (functions.php).
 *
 * Designkonzept (Stand 01.10.2026):
 * 1. Keine Hinterlegung: WooCommerce/Hello zeichnen Tabellenzellen grau
 *    (Hello `reset.css` Zeile 1: `table tbody>tr:nth-child(odd)>td`,
 *    Hintergrund hsla(0,0%,50%,.071), Innenabstand 15 px). Beides entfällt.
 * 2. Bündig: Beschriftung und Auswahl beginnen exakt an der linken Kante
 *    von Preis und Steuerhinweis (Innenabstand 0).
 * 3. Jede Auswahl ist ein Block: Beschriftung (Name fett, gewählter Wert
 *    normal), darunter die Auswahlfelder; zwischen zwei Blöcken 24 px.
 * 4. Ein Muster für alle Attribute: Kacheln (Bild/Farbe) und Textknöpfe
 *    („Normal“, „Groß“) sind 44 px hoch, eckig, 1 px Linie in --mb-rule-strong.
 * 5. Hover: Linie wird Tinte. Gewählt: 2 px Tintenrahmen (innen), Textknopf
 *    zusätzlich halbfett — kein Rot, keine Füllung.
 * 6. Tastaturfokus: 2 px Tintenrahmen mit Abstand. Nicht wählbare Werte
 *    sind gedämpft und gestrichelt.
 * 7. „Zurücksetzen“ ist ein ruhiger Textlink ohne Unterstreichung unter
 *    der letzten Auswahl; erscheint erst, wenn etwas gewählt ist.
 * ==================================================================== */

/* ---------- Tabelle neutralisieren ---------- */
body form.variations_form table.variations,
body form.variations_form table.variations tbody,
body form.variations_form table.variations tr {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}
body form.variations_form table.variations {
	margin: 0 0 var(--mb-space-4);
}
body form.variations_form table.variations tbody > tr {
	margin: 0 0 var(--mb-space-4);
}
body form.variations_form table.variations tbody > tr:last-child {
	margin-bottom: 0;
}
body form.variations_form table.variations tbody > tr > th,
body form.variations_form table.variations tbody > tr > td,
body form.variations_form table.variations tbody > tr:nth-child(odd) > th,
body form.variations_form table.variations tbody > tr:nth-child(odd) > td,
body form.variations_form table.variations tbody tr:hover > th,
body form.variations_form table.variations tbody tr:hover > td {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: left;
}

/* ---------- Beschriftung ---------- */
body form.variations_form table.variations th.label {
	margin: 0 0 var(--mb-space-2);
	font-family: var(--mb-font-body);
	font-size: var(--mb-fs-small);
	line-height: 1.4;
	color: var(--mb-ink-900);
}
body form.variations_form table.variations th.label label {
	display: inline;
	margin: 0;
	font-weight: var(--mb-weight-strong);
	font-size: inherit;
	line-height: inherit;
	color: var(--mb-ink-900);
	vertical-align: baseline;
}
body form.variations_form table.variations th.label .woo-selected-variation-item-name,
body form.variations_form table.variations th.label .mb-wahl__wert {
	display: inline;
	margin: 0;
	font-weight: var(--mb-weight-body);
	color: var(--mb-ink-700);
}
body form.variations_form table.variations th.label .woo-selected-variation-item-name:empty,
body form.variations_form table.variations th.label .mb-wahl__wert:empty {
	display: none;
}

/* ---------- Auswahlfelder: Kacheln (Plugin) und Knöpfe (Plugin + eigene) ---------- */
body form.variations_form .variable-items-wrapper,
body form.variations_form .mb-wahl {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mb-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

:is(
	body.woo-variation-swatches form.variations_form .variable-items-wrapper .variable-item[role="radio"]:not(.radio-variable-item),
	body form.variations_form .mb-wahl .mb-wahl__item[role="radio"]
) {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 3px;
	background-color: var(--mb-card);
	color: var(--mb-ink-900);
	border: 1px solid var(--mb-rule-strong);
	border-radius: 0;
	box-shadow: none;
	outline: 0;
	cursor: pointer;
	font-family: var(--mb-font-body);
	font-size: var(--mb-fs-small);
	line-height: 1.2;
	text-transform: none;
	text-decoration: none;
	transition: border-color var(--mb-dur-fast) var(--mb-ease-cut),
		box-shadow var(--mb-dur-fast) var(--mb-ease-cut);
}

/* Textknöpfe („Normal“, „Groß“, Maße …) */
:is(
	body.woo-variation-swatches form.variations_form .variable-items-wrapper .variable-item.button-variable-item[role="radio"]:not(.radio-variable-item),
	body form.variations_form .mb-wahl .mb-wahl__item[role="radio"]
) {
	width: auto;
	min-width: 44px;
	padding: 0 var(--mb-space-3);
}
body.woo-variation-swatches form.variations_form .variable-item.button-variable-item .variable-item-span {
	padding: 0;
	font-size: inherit;
	line-height: 1.2;
	color: inherit;
}

/* Bild- und Farbkachel füllen die Fläche eckig */
body.woo-variation-swatches form.variations_form .variable-item .variable-item-contents,
body.woo-variation-swatches form.variations_form .variable-item .variable-item-image,
body.woo-variation-swatches form.variations_form .variable-item .variable-item-span-color {
	width: 100%;
	height: 100%;
	border-radius: 0;
}
body.woo-variation-swatches form.variations_form .variable-item .variable-item-image {
	object-fit: cover;
}

/* Hover — nur mit Maus */
@media (hover: hover) {
	:is(
		body.woo-variation-swatches form.variations_form .variable-items-wrapper .variable-item[role="radio"]:not(.radio-variable-item),
		body form.variations_form .mb-wahl .mb-wahl__item[role="radio"]
	):hover {
		background-color: var(--mb-card);
		color: var(--mb-ink-900);
		border-color: var(--mb-ink-900);
		box-shadow: none;
	}
}

/* Gewählt: 2 px Tintenrahmen, innen gezeichnet (Rahmenbreite bleibt gleich) */
:is(
	body.woo-variation-swatches form.variations_form .variable-items-wrapper .variable-item[role="radio"]:not(.radio-variable-item).selected,
	body form.variations_form .mb-wahl .mb-wahl__item[role="radio"].is-selected
),
:is(
	body.woo-variation-swatches form.variations_form .variable-items-wrapper .variable-item[role="radio"]:not(.radio-variable-item).selected:hover,
	body form.variations_form .mb-wahl .mb-wahl__item[role="radio"].is-selected:hover
) {
	background-color: var(--mb-card);
	color: var(--mb-ink-900);
	border-color: var(--mb-ink-900);
	box-shadow: inset 0 0 0 1px var(--mb-ink-900);
	font-weight: var(--mb-weight-strong);
}

/* Tastaturfokus */
:is(
	body.woo-variation-swatches form.variations_form .variable-items-wrapper .variable-item[role="radio"]:not(.radio-variable-item),
	body form.variations_form .mb-wahl .mb-wahl__item[role="radio"]
):focus-visible {
	outline: 2px solid var(--mb-ink-900);
	outline-offset: 3px;
}

/* Nicht wählbar: gedämpft, gestrichelt */
:is(
	body.woo-variation-swatches form.variations_form .variable-items-wrapper .variable-item[role="radio"]:not(.radio-variable-item).disabled,
	body form.variations_form .mb-wahl .mb-wahl__item[role="radio"].is-disabled
) {
	border-style: dashed;
	cursor: not-allowed;
}
body form.variations_form .mb-wahl .mb-wahl__item.is-disabled {
	color: var(--mb-ink-600);
	opacity: 0.55;
}

/* Gewählt-Haken des Plugins etwas ruhiger und mittig */
body.woo-variation-swatches form.variations_form .variable-item.selected .variable-item-contents::before {
	background-size: 55%;
}

/* ---------- Eigene Auswahlknöpfe: ersetzen das native <select> ---------- */
/* Spezifität über `.woocommerce div.product form.cart .variations select` (inline-block) */
body form.variations_form.cart table.variations td.value select.mb-wahl__native {
	display: none;
}

/* ---------- „Zurücksetzen“ ---------- */
body form.variations_form a.reset_variations {
	display: inline-block;
	margin: var(--mb-space-3) 0 0;
	padding: 0;
	font-family: var(--mb-font-body);
	font-size: var(--mb-fs-small);
	line-height: 1.4;
	color: var(--mb-ink-600);
	text-decoration: none;
	background: transparent;
	border: 0;
}
body form.variations_form a.reset_variations[style*="hidden"] {
	display: none;
}
body form.variations_form a.reset_variations:hover,
body form.variations_form a.reset_variations:focus {
	color: var(--mb-ink-900);
	text-decoration: none;
}
body form.variations_form a.reset_variations:focus-visible {
	outline: 2px solid var(--mb-ink-900);
	outline-offset: 3px;
}

/* ---------- Ausgewählte Variante: Preis und Hinweis ---------- */
body form.variations_form .single_variation_wrap .woocommerce-variation {
	margin: 0 0 var(--mb-space-3);
}

@media (max-width: 767px) {
	body form.variations_form table.variations tbody > tr {
		margin-bottom: var(--mb-space-4);
	}
}

@media (prefers-reduced-motion: reduce) {
	body form.variations_form .variable-item,
	body form.variations_form .mb-wahl__item {
		transition: none;
	}
}