/*
 * Packungsgrößen-Auswahl auf der Listing-Karte — design-spec.md §5.4a (open-questions #65)
 * Nur geladen, wo WooCommerce-Produktkarten gerendert werden (is_woocommerce()).
 */

.zs-variant-list {
	list-style: none;
	margin: var(--zs-space-2) 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--zs-space-1);
}

.zs-variant-row label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--zs-space-2);
	min-height: 44px;
	padding: var(--zs-space-1) var(--zs-space-2);
	border-radius: var(--zs-radius-sm);
	border: 1px solid transparent;
	font-family: var(--zs-font-text);
	font-size: var(--zs-fs-small);
	cursor: pointer;
}

.zs-variant-row input[type="radio"] {
	accent-color: var(--zs-primary);
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin: 0;
}

.zs-variant-qty {
	flex: 1;
	margin-left: var(--zs-space-2);
	color: var(--zs-ink);
	/*
	 * Fix #66: nowrap fehlte hier (war irrtümlich nur auf .zs-variant-price gesetzt).
	 * Als Flex-Kind mit flex:1 hat der Span standardmäßig min-width:auto und kann
	 * unter seiner Inhaltsbreite schrumpfen — Text bricht dann um (bestätigt per
	 * Chrome-Rendering: "10/25/50 Samen" liefen zweizeilig, nur "5 Samen" einzeilig).
	 */
	white-space: nowrap;
}

.zs-variant-price {
	font-weight: 600;
	color: var(--zs-ink);
	white-space: nowrap;
}

.zs-variant-row.zs-variant-selected label {
	background: var(--zs-bg);
	border-color: var(--zs-primary);
}

.zs-variant-row.zs-variant-oos label {
	cursor: not-allowed;
}

.zs-variant-row.zs-variant-oos .zs-variant-qty,
.zs-variant-row.zs-variant-oos .zs-variant-price {
	text-decoration: line-through;
	color: #9A968A;
}

.zs-loop-price {
	font-family: var(--zs-font-display);
	font-weight: 600;
	color: var(--zs-ink);
	margin: var(--zs-space-2) 0;
}

/*
 * Nebenwirkung von #66 (nowrap auf .zs-variant-qty): Flex-Kinder mit nowrap
 * bekommen ein min-content, das ihrer vollen Textbreite entspricht — die
 * Karte kann dann nicht mehr unter diese Breite schrumpfen. Bei der
 * 2-spaltigen Mobil-Grid (<768px) ist die Spaltenbreite schmaler als dieses
 * min-content, wodurch die Karte aus ihrer Grid-Spur herauswächst und die
 * ganze Seite horizontal scrollt (bestätigt per Chrome-Rendering:
 * document.documentElement.scrollWidth > clientWidth bei 375px/320px).
 * Fix: Schrift/Abstand in der Zeile auf schmalen Breiten verkleinern, damit
 * "50 Samen — 159,00 €" wieder in die schmalere Spalte passt.
 */
@media (max-width: 767px) {
	.zs-variant-row label {
		gap: var(--zs-space-1);
		padding: var(--zs-space-1);
	}
	.zs-variant-qty,
	.zs-variant-price {
		font-size: var(--zs-fs-micro);
	}
}