/**
 * Produkt-Kaufoptionen – Frontend-Kern.
 *
 * Hier steht die vollständige STRUKTUR der Optionskarten. Variabel ist
 * ausschließlich der Wert einer `--pbo-*`-Variable; die schreibt PHP als
 * Inline-Style auf `.pbo` (Konzept §4.3, §5.1).
 *
 * Genau deshalb funktioniert die Live-Vorschau im Backend ohne Reload und ohne
 * AJAX: Sie benutzt dieselbe Datei und dieselben Klassennamen und ändert nur
 * die Variablen.
 *
 * Jede Variable hat einen Fallback. Ohne Konfiguration sieht der Block deshalb
 * bereits ordentlich aus, und ein geleertes Feld fällt sauber auf das Theme
 * zurück.
 */

/* ---------- Box ---------- */
.pbo {
	box-sizing: border-box;
	margin-top: var(--pbo-box-margin-top, 0);
	margin-bottom: var(--pbo-box-margin-bottom, 18px);
	padding: var(--pbo-box-padding-y, 16px) var(--pbo-box-padding-x, 16px);
	border: var(--pbo-box-border-width, 1px) solid var(--pbo-box-border-color, #e5e7eb);
	border-radius: var(--pbo-box-radius, 10px);
	background: var(--pbo-box-bg, transparent);
	box-shadow: var(--pbo-box-shadow, none);
}

.pbo *,
.pbo *::before,
.pbo *::after {
	box-sizing: inherit;
}

.pbo-box__before,
.pbo-box__after,
.pbo-note {
	display: block;
}

.pbo-box__before {
	margin-top: var(--pbo-box-before-margin-top, 0);
	margin-bottom: var(--pbo-box-before-margin-bottom, 8px);
	color: var(--pbo-box-before-color, inherit);
	font-family: var(--pbo-box-before-font-family, inherit);
	font-size: var(--pbo-box-before-font-size, inherit);
	font-weight: var(--pbo-box-before-font-weight, 600);
	line-height: var(--pbo-box-before-line-height, inherit);
	letter-spacing: var(--pbo-box-before-letter-spacing, normal);
	text-align: var(--pbo-box-before-align, inherit);
	text-transform: var(--pbo-box-before-text-transform, none);
}

.pbo-box__after {
	margin-top: var(--pbo-box-after-margin-top, 10px);
	margin-bottom: var(--pbo-box-after-margin-bottom, 0);
	color: var(--pbo-box-after-color, #6b7280);
	font-family: var(--pbo-box-after-font-family, inherit);
	font-size: var(--pbo-box-after-font-size, 12px);
	font-weight: var(--pbo-box-after-font-weight, inherit);
	line-height: var(--pbo-box-after-line-height, inherit);
	letter-spacing: var(--pbo-box-after-letter-spacing, normal);
	text-align: var(--pbo-box-after-align, inherit);
	text-transform: var(--pbo-box-after-text-transform, none);
}

.pbo-note {
	margin-top: var(--pbo-note-margin-top, 10px);
	margin-bottom: var(--pbo-note-margin-bottom, 0);
	color: var(--pbo-note-color, #4b5563);
	font-family: var(--pbo-note-font-family, inherit);
	font-size: var(--pbo-note-font-size, 13px);
	font-weight: var(--pbo-note-font-weight, inherit);
	line-height: var(--pbo-note-line-height, inherit);
	letter-spacing: var(--pbo-note-letter-spacing, normal);
	text-align: var(--pbo-note-align, inherit);
	text-transform: var(--pbo-note-text-transform, none);
}

/* ---------- Kartenraster ----------
   Ohne eigenen Außenabstand: Was über dem Raster an Luft steht, bestimmt der
   Außenabstand unten der Zeile darüber („Text über der Gruppe"), sonst der
   Innenabstand des Kastens. Früher lag hier zusätzlich `--pbo-box-gap` – die
   Variable war wirkungslos, weil die Regel darunter sie in jedem Fall wieder
   auf 0 setzte, in dem es eine Zeile darüber überhaupt gab. */
.pbo-options {
	display: grid;
	grid-template-columns: repeat(var(--pbo-option-columns, 3), minmax(0, 1fr));
	gap: var(--pbo-option-gap, 10px);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------- Optionskarte ---------- */
.pbo-option {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: var(--pbo-option-padding-y, 12px) var(--pbo-option-padding-x, 14px);
	border: var(--pbo-option-border-width, 1px) solid var(--pbo-option-border-color, #d1d5db);
	border-radius: var(--pbo-option-radius, 8px);
	background: var(--pbo-option-bg, #fff);
	box-shadow: var(--pbo-option-shadow, none);
	color: var(--pbo-option-text-color, inherit);
	cursor: pointer;
	text-align: var(--pbo-option-align, left);
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.pbo-option:hover {
	border-color: var(--pbo-option-border-color-hover, #9ca3af);
	border-width: var(--pbo-option-border-width-hover, 1px);
	border-radius: var(--pbo-option-radius-hover, 8px);
	background: var(--pbo-option-bg-hover, #f9fafb);
	box-shadow: var(--pbo-option-shadow-hover, none);
	color: var(--pbo-option-text-color-hover, inherit);
}

.pbo-option.is-selected {
	border-color: var(--pbo-option-border-color-selected, #111827);
	border-width: var(--pbo-option-border-width-selected, 2px);
	border-radius: var(--pbo-option-radius-selected, 8px);
	background: var(--pbo-option-bg-selected, #f3f4f6);
	box-shadow: var(--pbo-option-shadow-selected, none);
	color: var(--pbo-option-text-color-selected, inherit);
}

/* Der Radio bleibt bedienbar (Tastatur, Screenreader), ist aber unsichtbar –
   sichtbar ist der gestaltbare Punkt `.pbo-option__radio`. */
.pbo-option__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	opacity: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}


/* Verweis-Karte (Vorteils-Sets): dasselbe Aussehen, andere Bauart. Sie ist ein
   `<a>` statt eines `<label>` – ohne diese beiden Zeilen erbte sie Unterstrich
   und Linkfarbe des Themes und sähe in jedem Shop anders aus. Der Fokusrahmen
   oben greift über `:focus-within` auch hier, weil das Element selbst
   fokussierbar ist. */
a.pbo-option {
	color: var(--pbo-option-text-color, inherit);
	text-decoration: none;
}

a.pbo-option:hover,
a.pbo-option:focus {
	color: var(--pbo-option-text-color-hover, inherit);
	text-decoration: none;
}

/* Action cards contain two independent controls. The title link stretches
   across the card while the CTA remains above that hit area. */
.pbo[data-pbo-kind="action"] .pbo-option { cursor: default; }
.pbo[data-pbo-kind="action"] .pbo-option__title-link { color: inherit; text-decoration: none; }
.pbo[data-pbo-kind="action"] .pbo-option__title-link::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.pbo[data-pbo-kind="action"] .pbo-option__actions { position: relative; z-index: 1; display: flex; gap: 8px; order: 4; margin: var(--pbo-card-button-margin-top, 10px) 0 0; }
.pbo[data-pbo-kind="action"] .pbo-option__cta { width: var(--pbo-card-button-width, 100%); padding: var(--pbo-card-button-padding-y, 9px) var(--pbo-card-button-padding-x, 14px); border: 0; border-radius: var(--pbo-card-button-radius, 6px); background: var(--pbo-card-button-bg, #111827); color: var(--pbo-card-button-color, #fff); font-family: var(--pbo-card-button-font-family, inherit); font-size: var(--pbo-card-button-font-size, 14px); font-weight: var(--pbo-card-button-font-weight, 600); text-align: center; text-decoration: none; cursor: pointer; }
.pbo[data-pbo-kind="action"] .pbo-option__cta:hover { background: var(--pbo-card-button-bg-hover, #374151); color: var(--pbo-card-button-color-hover, #fff); }
.pbo[data-pbo-kind="action"] .pbo-option__cta.is-added { background: var(--pbo-card-button-bg-added, #166534); color: var(--pbo-card-button-color-added, #fff); }
.pbo-option__qty { width: 4.5rem; }

/* Die Karte des Produkts, auf dessen Seite der Kunde gerade steht. Sie führt
   nirgendwohin – der Zeiger soll das zeigen. */
a.pbo-option[aria-current="page"] {
	cursor: default;
}

.pbo-option__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

/* ---------- Auswahlpunkt ---------- */
.pbo-option__radio {
	position: absolute;
	top: var(--pbo-option-padding-y, 12px);
	right: var(--pbo-option-padding-x, 14px);
	width: var(--pbo-option-radio-size, 18px);
	height: var(--pbo-option-radio-size, 18px);
	border: 2px solid var(--pbo-option-radio-border, #9ca3af);
	border-radius: 50%;
	background: transparent;
}

.pbo-option.is-selected .pbo-option__radio {
	border-color: var(--pbo-option-radio-color, #111827);
	box-shadow: inset 0 0 0 3px var(--pbo-option-radio-color, #111827);
}

.pbo[data-pbo-radio="0"] .pbo-option__radio {
	display: none;
}

/* ---------- Produktbild ---------- */
.pbo-option__media {
	display: block;
	margin-bottom: var(--pbo-option-media-gap, 8px);
}

/* Der `.pbo`-Vorfahre steht hier allein wegen der Gewichtung: Themes und
   WooCommerce setzen `img { height: auto }` mit derselben Stärke wie ein
   einfaches `.pbo-option__media img`. Wessen Regel gewinnt, hinge dann an der
   Ladereihenfolge der Stylesheets – mit dem zusätzlichen Vorfahren bleibt die
   eingestellte Bildhöhe verlässlich stehen. */
.pbo .pbo-option__media img {
	display: block;
	width: 100%;
	height: var(--pbo-option-media-size, 96px);
	border-radius: var(--pbo-option-media-radius, 6px);
	/* Wie das Bild diese Fläche ausfüllt, ist Einstellungssache: Design →
	   Optionskarte → „Produktbild in der Karte". `cover` schneidet ab, `contain`
	   zeigt alles und lässt dafür Ränder frei. */
	object-fit: var(--pbo-option-media-fit, cover);
	object-position: var(--pbo-option-media-position, center);
}

/* ---------- Textzonen der Karte ---------- */
.pbo-option__prefix {
	margin-top: var(--pbo-option-prefix-margin-top, 0);
	margin-bottom: var(--pbo-option-prefix-margin-bottom, 0);
	color: var(--pbo-option-prefix-color, #6b7280);
	font-family: var(--pbo-option-prefix-font-family, inherit);
	font-size: var(--pbo-option-prefix-font-size, 12px);
	font-weight: var(--pbo-option-prefix-font-weight, inherit);
	line-height: var(--pbo-option-prefix-line-height, inherit);
	letter-spacing: var(--pbo-option-prefix-letter-spacing, normal);
	text-align: var(--pbo-option-prefix-align, inherit);
	text-transform: var(--pbo-option-prefix-text-transform, none);
}

.pbo-option__title {
	margin-top: var(--pbo-option-title-margin-top, 0);
	margin-bottom: var(--pbo-option-title-margin-bottom, 0);
	color: var(--pbo-option-title-color, inherit);
	font-family: var(--pbo-option-title-font-family, inherit);
	font-size: var(--pbo-option-title-font-size, 15px);
	font-weight: var(--pbo-option-title-font-weight, 600);
	line-height: var(--pbo-option-title-line-height, inherit);
	letter-spacing: var(--pbo-option-title-letter-spacing, normal);
	text-align: var(--pbo-option-title-align, inherit);
	text-transform: var(--pbo-option-title-text-transform, none);
}

.pbo-option__suffix {
	margin-top: var(--pbo-option-suffix-margin-top, 0);
	margin-bottom: var(--pbo-option-suffix-margin-bottom, 0);
	color: var(--pbo-option-suffix-color, #6b7280);
	font-family: var(--pbo-option-suffix-font-family, inherit);
	font-size: var(--pbo-option-suffix-font-size, 12px);
	font-weight: var(--pbo-option-suffix-font-weight, inherit);
	line-height: var(--pbo-option-suffix-line-height, inherit);
	letter-spacing: var(--pbo-option-suffix-letter-spacing, normal);
	text-align: var(--pbo-option-suffix-align, inherit);
	text-transform: var(--pbo-option-suffix-text-transform, none);
}

/* ---------- Preis ---------- */
.pbo-option__price {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pbo-price-strike-gap, 6px);
	align-items: baseline;
	/* Die Ausrichtung gilt der ganzen Zeile – „nur", Preis, Streichpreis und
	   „pro Stück" stehen darin nebeneinander und sind je so breit wie ihr
	   Inhalt. `text-align` allein bewegte darin nichts; erst `justify-content`
	   schiebt die Gruppe an die gewählte Kante. Beide lesen dieselbe Variable,
	   damit auch umgebrochener Text mitwandert. */
	justify-content: var(--pbo-price-align, normal);
	text-align: var(--pbo-price-align, inherit);
	margin-top: var(--pbo-price-margin-top, 0);
	margin-bottom: var(--pbo-price-margin-bottom, 0);
	color: var(--pbo-price-color, inherit);
	font-family: var(--pbo-price-font-family, inherit);
	font-size: var(--pbo-price-font-size, 18px);
	font-weight: var(--pbo-price-font-weight, 700);
	line-height: var(--pbo-price-line-height, inherit);
	letter-spacing: var(--pbo-price-letter-spacing, normal);
	text-transform: var(--pbo-price-text-transform, none);
}

.pbo-option__price-strike {
	margin-top: var(--pbo-price-strike-margin-top, 0);
	margin-bottom: var(--pbo-price-strike-margin-bottom, 0);
	color: var(--pbo-price-strike-color, #6b7280);
	font-family: var(--pbo-price-strike-font-family, inherit);
	font-size: var(--pbo-price-strike-font-size, 13px);
	font-weight: var(--pbo-price-strike-font-weight, 400);
	line-height: var(--pbo-price-strike-line-height, inherit);
	letter-spacing: var(--pbo-price-strike-letter-spacing, normal);
	text-decoration: line-through;
	text-transform: var(--pbo-price-strike-text-transform, none);
}

.pbo-option__price-prefix {
	margin-top: var(--pbo-option-price-prefix-margin-top, 0);
	margin-bottom: var(--pbo-option-price-prefix-margin-bottom, 0);
	color: var(--pbo-option-price-prefix-color, inherit);
	font-family: var(--pbo-option-price-prefix-font-family, inherit);
	font-size: var(--pbo-option-price-prefix-font-size, inherit);
	font-weight: var(--pbo-option-price-prefix-font-weight, 400);
	line-height: var(--pbo-option-price-prefix-line-height, inherit);
	letter-spacing: var(--pbo-option-price-prefix-letter-spacing, normal);
	text-transform: var(--pbo-option-price-prefix-text-transform, none);
}

.pbo-option__price-suffix {
	margin-top: var(--pbo-option-price-suffix-margin-top, 0);
	margin-bottom: var(--pbo-option-price-suffix-margin-bottom, 0);
	color: var(--pbo-option-price-suffix-color, #6b7280);
	font-family: var(--pbo-option-price-suffix-font-family, inherit);
	font-size: var(--pbo-option-price-suffix-font-size, 12px);
	font-weight: var(--pbo-option-price-suffix-font-weight, 400);
	line-height: var(--pbo-option-price-suffix-line-height, inherit);
	letter-spacing: var(--pbo-option-price-suffix-letter-spacing, normal);
	text-transform: var(--pbo-option-price-suffix-text-transform, none);
}

/* ---------- Badge: acht Anker plus „im Textfluss" ---------- */
.pbo-option__badge {
	position: absolute;
	z-index: 2;
	display: inline-block;
	padding: var(--pbo-badge-padding-y, 4px) var(--pbo-badge-padding-x, 10px);
	border-radius: var(--pbo-badge-radius, 999px);
	background: var(--pbo-badge-bg, #111827);
	color: var(--pbo-badge-color, #fff);
	font-family: var(--pbo-badge-font-family, inherit);
	font-size: var(--pbo-badge-font-size, 12px);
	font-weight: var(--pbo-badge-font-weight, 600);
	letter-spacing: var(--pbo-badge-letter-spacing, normal);
	line-height: 1.2;
	text-transform: var(--pbo-badge-text-transform, none);
	white-space: nowrap;
	pointer-events: none;
}

/* Anker */
.pbo[data-pbo-badge^="top-"] .pbo-option__badge { top: 0; bottom: auto; }
.pbo[data-pbo-badge^="middle-"] .pbo-option__badge { top: 50%; bottom: auto; }
.pbo[data-pbo-badge^="bottom-"] .pbo-option__badge { top: auto; bottom: 0; }
.pbo[data-pbo-badge$="-left"] .pbo-option__badge { left: 0; right: auto; }
.pbo[data-pbo-badge$="-center"] .pbo-option__badge { left: 50%; right: auto; }
.pbo[data-pbo-badge$="-right"] .pbo-option__badge { left: auto; right: 0; }

/* Zentrierung und Offset stehen bewusst in EINEM transform – nur so addieren
   sich die beiden Verschiebungen sauber (Konzept §5.5). */
.pbo[data-pbo-badge="top-left"] .pbo-option__badge,
.pbo[data-pbo-badge="top-right"] .pbo-option__badge,
.pbo[data-pbo-badge="middle-left"] .pbo-option__badge,
.pbo[data-pbo-badge="middle-right"] .pbo-option__badge {
	transform: translate(0, -50%) translate(var(--pbo-badge-offset-x, 0px), var(--pbo-badge-offset-y, 0px));
}

.pbo[data-pbo-badge="top-center"] .pbo-option__badge {
	transform: translate(-50%, -50%) translate(var(--pbo-badge-offset-x, 0px), var(--pbo-badge-offset-y, 0px));
}

.pbo[data-pbo-badge="bottom-left"] .pbo-option__badge,
.pbo[data-pbo-badge="bottom-right"] .pbo-option__badge {
	transform: translate(0, 50%) translate(var(--pbo-badge-offset-x, 0px), var(--pbo-badge-offset-y, 0px));
}

.pbo[data-pbo-badge="bottom-center"] .pbo-option__badge {
	transform: translate(-50%, 50%) translate(var(--pbo-badge-offset-x, 0px), var(--pbo-badge-offset-y, 0px));
}

/* Neunte Möglichkeit: kein Überlagern, sondern eine Zeile über dem Titel. */
.pbo[data-pbo-badge="inline"] .pbo-option__badge {
	position: static;
	align-self: flex-start;
	order: -1;
	transform: none;
}

/* ---------- Warenkorb-Zeile ---------- */
.pbo-cart-note {
	/* Ohne `block` wirken weder Ausrichtung noch Außenabstand: Ein Inline-Span
	   ist genau so breit wie sein Text und hat keine Zeile, in der er sich
	   ausrichten könnte. */
	display: block;
	margin-top: var(--pbo-cart-note-margin-top, 0);
	margin-bottom: var(--pbo-cart-note-margin-bottom, 0);
	color: var(--pbo-cart-note-color, inherit);
	font-family: var(--pbo-cart-note-font-family, inherit);
	font-size: var(--pbo-cart-note-font-size, 13px);
	font-weight: var(--pbo-cart-note-font-weight, inherit);
	line-height: var(--pbo-cart-note-line-height, inherit);
	letter-spacing: var(--pbo-cart-note-letter-spacing, normal);
	text-align: var(--pbo-cart-note-align, inherit);
	text-transform: var(--pbo-cart-note-text-transform, none);
}

/* ---------- Mengenfeld und Button ---------- */
.pbo-cart-styled .qty,
.pbo-preview-cart .pbo-qty {
	width: var(--pbo-qty-width, auto);
	height: var(--pbo-qty-height, auto);
	border-color: var(--pbo-qty-border-color, currentColor);
	border-radius: var(--pbo-qty-radius, 0);
	background: var(--pbo-qty-bg, transparent);
}

.pbo-cart-styled .single_add_to_cart_button,
.pbo-preview-cart .pbo-button {
	width: var(--pbo-button-width, auto);
	padding: var(--pbo-button-padding-y, 0.6em) var(--pbo-button-padding-x, 1.2em);
	border: var(--pbo-button-border-width, 0) solid var(--pbo-button-border-color, transparent);
	border-radius: var(--pbo-button-radius, 0);
	background: var(--pbo-button-bg, initial);
	color: var(--pbo-button-color, inherit);
	font-family: var(--pbo-button-font-family, inherit);
	font-size: var(--pbo-button-font-size, inherit);
	font-weight: var(--pbo-button-font-weight, inherit);
}

.pbo-cart-styled .single_add_to_cart_button:hover,
.pbo-preview-cart .pbo-button:hover {
	background: var(--pbo-button-bg-hover, initial);
	color: var(--pbo-button-color-hover, inherit);
}

.pbo-button__suffix {
	margin-left: 0.5em;
	color: var(--pbo-button-suffix-color, inherit);
	font-family: var(--pbo-button-suffix-font-family, inherit);
	font-size: var(--pbo-button-suffix-font-size, 12px);
	font-weight: var(--pbo-button-suffix-font-weight, inherit);
	line-height: var(--pbo-button-suffix-line-height, inherit);
	letter-spacing: var(--pbo-button-suffix-letter-spacing, normal);
	text-transform: var(--pbo-button-suffix-text-transform, none);
}

/* Wenn die Karte selbst die Mengenwahl ist, stört ein zweites Mengenfeld.
   Ob es verschwindet, entscheidet die Einstellung „Mengenfeld auf der
   Produktseite" – gesetzt wird die Klasse von JavaScript, damit ohne JS alles
   bedienbar bleibt. */
.pbo-qty-hidden {
	display: none !important;
}

/* ---------- Hinweis auf die nächste Stufe ----------
   Eigene Komponente statt geliehener `--pbo-note-*`-Werte: Der Satz „Noch 2
   Stück bis −4 %" hat eine andere Aufgabe als der Hinweis darüber – er soll
   auffallen, solange er etwas zu sagen hat. Wer beides gleich haben will,
   stellt dieselben Werte ein; geliehen ließen sie sich nie trennen. */
.pbo-next-hint {
	display: block;
	margin-top: var(--pbo-hint-next-tier-margin-top, 8px);
	margin-bottom: var(--pbo-hint-next-tier-margin-bottom, 0);
	color: var(--pbo-hint-next-tier-color, #4b5563);
	font-family: var(--pbo-hint-next-tier-font-family, inherit);
	font-size: var(--pbo-hint-next-tier-font-size, 13px);
	font-weight: var(--pbo-hint-next-tier-font-weight, inherit);
	line-height: var(--pbo-hint-next-tier-line-height, inherit);
	letter-spacing: var(--pbo-hint-next-tier-letter-spacing, normal);
	text-align: var(--pbo-hint-next-tier-align, inherit);
	text-transform: var(--pbo-hint-next-tier-text-transform, none);
}

/* Auf der höchsten Stufe gibt es nichts mehr zu melden. Die Zeile bleibt dann
   trotzdem stehen: Klappte sie weg, spränge bei jeder Mengenänderung alles
   darunter hoch und runter – Pflichtangaben, Mengenfeld, „In den Warenkorb".

   Das geschützte Leerzeichen erzeugt genau die Zeilenhöhe, die auch echter Text
   erzeugt. Eine feste `min-height` müsste sie raten und läge bei jeder anderen
   Schriftgröße daneben. `visibility: hidden` wiederum reicht nicht: Ein
   Element ohne Inhalt ist auch unsichtbar noch null Pixel hoch.

   Die Zeile entsteht überhaupt nur, wenn ein Hinweistext eingestellt ist und
   die Staffel je einen Hinweis zeigen kann – das entscheidet
   `frontend-tiers.js`. */
.pbo-next-hint.is-blank::before {
	content: "\00a0";
}

/* Sicherheitsnetz für eine leere Zeile, die nicht aus dem Skript stammt – etwa
   aus zwischengespeichertem Seiten-HTML. */
.pbo-next-hint:empty:not(.is-blank) {
	display: none;
}