/**
 * Produkt-Kaufoptionen – Modul „Mengenrabatt" im Frontend.
 *
 * Bewusst klein: Alles Gestaltbare steckt in `frontend-core.css` und in den
 * `--pbo-*`-Variablen. Hier stehen nur die Struktur-Unterschiede der beiden
 * Darstellungen (Konzept §6.2) – wer nur Mengenrabatt nutzt, lädt damit auch
 * nur diese wenigen Zeilen zusätzlich.
 */

/* „bar": schmale Staffel-Leiste, Bild wird nicht gerendert. */
.pbo[data-pbo-module="tiers"][data-pbo-display="bar"] .pbo-option__media {
	display: none;
}

/* „cards": Bild oben, Inhalt darunter – die Karte ist die Mengenwahl. */
.pbo[data-pbo-module="tiers"][data-pbo-display="cards"] .pbo-option {
	gap: 8px;
}

.pbo[data-pbo-module="tiers"][data-pbo-display="cards"] .pbo-option__title {
	margin-top: 2px;
}

/* Hervorgehobene Stufe: etwas mehr Präsenz, ohne das Design zu überschreiben. */
.pbo[data-pbo-module="tiers"] .pbo-option[data-pbo-highlight="1"] {
	z-index: 1;
}

@media (max-width: 480px) {
	/* Auf sehr schmalen Geräten hat der Auswahlpunkt neben dem Text keinen
	   Platz mehr – er rutscht dann unter den rechten Rand der Karte. Ohne
	   Auswahlpunkt („Einfache Karte“) gibt es nichts freizuhalten. */
	.pbo[data-pbo-module="tiers"]:not([data-pbo-radio="0"]) .pbo-option {
		padding-right: calc( var(--pbo-option-padding-x, 14px) + var(--pbo-option-radio-size, 18px) + 8px );
	}
}