/*
 * Kaufblock-Layout — Nutzervorgaben 2026-07-27, Runde 3:
 * - Farb-Swatches (Bilder) stehen komplett OBERHALB der Auswahl-Zeile
 *   (Wrapper `.zwcl-swatches-above` wird per purchase-layout.js VOR die
 *   `table.variations` gezogen — nicht mehr in der Farb-Zelle).
 * - Darunter: 3-Spalten-Grid „Farbe · Größe · Anzahl". Labels exakt in einer
 *   Zeile, Dropdowns/Input exakt in einer Zeile darunter.
 * - Größen-Dropdown mit sichtbarem Pfeil und gleicher Höhe wie das
 *   Anzahl-Feld.
 * - Unter 720 px werden die Spalten wieder untereinander.
 */

/* Swatches über der Auswahl-Zeile. Wird per JS aus dem Farb-TD dorthin
   verschoben; existiert bei Artikeln ohne Farbvarianten schlicht nicht. */
.woocommerce div.product form.cart .zwcl-swatches-above {
	margin: 0 0 .8rem;
}

/* Variations-Tabelle wird zu einem 3-Spalten-Grid (Farbe/Größe/Anzahl).
   Die Anzahl-Zelle wird per purchase-layout.js hier eingefügt. */
.woocommerce div.product form.cart table.variations {
	display: grid;
	grid-template-columns: 1.4fr 1fr auto;
	column-gap: 1rem;
	row-gap: .4rem;
	border: 0;
	margin: 0 0 1.1rem;
	align-items: start;
}

.woocommerce div.product form.cart table.variations tbody {
	display: contents;
}

.woocommerce div.product form.cart table.variations tr {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: .3rem;
	margin: 0;
	padding: 0;
	border: 0;
}

.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	background: none;
}

.woocommerce div.product form.cart table.variations label {
	font-weight: 600;
	font-size: .95rem;
	line-height: 1.2;
	color: inherit;
	margin: 0;
}

/* Größen-Dropdown und Anzahl-Feld: gemeinsamer Look UND exakt gleiche
   Höhe. `height` (nicht min-height) verhindert, dass ein Number-Input mit
   Browser-Default die Höhe minimal absenkt. */
.woocommerce div.product form.cart table.variations select,
.woocommerce div.product form.cart .zwcl-qty-cell input.qty {
	height: 44px;
	min-height: 44px;
	padding: .55rem .8rem;
	margin: 0;
	border: 1px solid #cfc9bd;
	border-radius: 10px;
	background-color: #fff !important;
	font-size: 1rem;
	line-height: 1.2;
	box-sizing: border-box;
	-webkit-appearance: none;
	-moz-appearance: textfield;
	appearance: none;
}

/* Native Number-Spin-Buttons ausblenden — sie machen das Input schmaler und
   verändern die vertikale Baseline. Die WC-Woo-Buttons sind separat. */
.woocommerce div.product form.cart .zwcl-qty-cell input.qty::-webkit-outer-spin-button,
.woocommerce div.product form.cart .zwcl-qty-cell input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/*
 * Größen-Dropdown: Pfeil-Chevron. !important überschreibt spätere
 * Theme-Kaskade in woocommerce.css, die alle background-Properties leerräumt.
 */
.woocommerce div.product form.cart table.variations select {
	width: 100%;
	padding-right: 2.2rem;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%232F4A3B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>") !important;
	background-repeat: no-repeat !important;
	background-position: right .85rem center !important;
	background-size: 12px 8px !important;
}

/* „Zurücksetzen"-Link (kommt bei ausgewählter Variante) unter alle Spalten */
.woocommerce div.product form.cart table.variations tr.reset_variations,
.woocommerce div.product form.cart .reset_variations {
	grid-column: 1 / -1;
	display: block;
	margin-top: .3rem;
}

/*
 * Anzahl-Zelle als dritte Grid-Spalte. TH+TD werden per purchase-layout.js
 * angelegt (analog zu Farbe/Größe), damit alle drei Zellen strukturell
 * identisch sind und Labels/Felder pixelgenau in einer Zeile stehen.
 */
.woocommerce div.product form.cart .zwcl-qty-cell {
	margin: 0;
	min-width: 5.5rem;
}

.woocommerce div.product form.cart .zwcl-qty-cell input.qty {
	width: 5.5rem;
	text-align: center;
	display: block;
}

/* .quantity ist der Wrapper um input.qty innerhalb der TD. */
.woocommerce div.product form.cart .zwcl-qty-cell .quantity {
	margin: 0;
	padding: 0;
	display: block;
}

.zwcl-qty-label {
	font-weight: 600;
	font-size: .95rem;
	line-height: 1.2;
}

/* Wenn Quantity NICHT in der Grid-Zelle sitzt (Fallback vor found_variation),
   sollen das freistehende Label und das Feld nicht doppelt-gebrandet stören. */
.woocommerce div.product form.cart .variations_button > .zwcl-qty-label,
.woocommerce div.product form.cart .variations_button > .quantity {
	display: none;
}

@media (max-width: 720px) {
	.woocommerce div.product form.cart table.variations {
		grid-template-columns: 1fr;
	}
	.woocommerce div.product form.cart .zwcl-qty-cell input.qty {
		width: 6rem;
	}
}