/**
 * Auswahl der Gestellfarbe auf der Produktseite
 *
 * Steht im Warenkorb-Formular über Menge und Knopf und sieht aus wie das
 * Mengenfeld daneben: weiße Fläche, Rahmen #e5e3dd, 8 px Rundung, 46 px hoch.
 * Die Rahmenfarbe hat keine globale - sie steht auch im Custom CSS des
 * Warenkorb-Widgets fest.
 *
 * Schrift und Farben kommen aus dem Elementor-Kit. Der zweite Wert in jedem
 * var() greift nur, wenn der Kit einmal fehlt.
 *
 * Jede Regel beginnt mit .sana-gestell: Der Kit gestaltet label und select
 * über .elementor-kit-N, und ohne die zusätzliche Klasse gewönne er.
 */

.sana-gestell {
	--sana-gestell-primary: var(--e-global-color-primary, #222d43);
	--sana-gestell-secondary: var(--e-global-color-secondary, #d3d0c7);
	--sana-gestell-border: #e5e3dd;
	--sana-gestell-radius: 8px;
	--sana-gestell-height: 46px;
	--sana-gestell-swatch: 30px;

	position: relative;
	margin: 0 0 16px;
	color: var(--sana-gestell-primary);
	font-family: var(--e-global-typography-text-font-family, "Source Sans Pro"), sans-serif;
	font-size: var(--e-global-typography-text-font-size, 16px);
	font-weight: var(--e-global-typography-text-font-weight, 400);
	letter-spacing: var(--e-global-typography-text-letter-spacing, 0.05em);
	line-height: 1.25;
}

.sana-gestell .sana-gestell__label {
	display: block;
	margin: 0 0 8px;
	padding: 0;
	color: inherit;
	font-family: var(--e-global-typography-z8yxp8z-font-family, "Source Sans Pro"), sans-serif;
	font-size: var(--e-global-typography-z8yxp8z-font-size, 16px);
	font-weight: var(--e-global-typography-z8yxp8z-font-weight, 700);
	letter-spacing: var(--e-global-typography-z8yxp8z-letter-spacing, 0.05em);
	line-height: var(--e-global-typography-z8yxp8z-line-height, 1.2em);
}

/* Das native Auswahlfeld - so sieht man es ohne JavaScript und für den
   Augenblick, bis das Skript geladen ist. Gleich hoch wie die Combobox, damit
   beim Tausch nichts springt. */
.sana-gestell .sana-gestell__select {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: var(--sana-gestell-height);
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--sana-gestell-border);
	border-radius: var(--sana-gestell-radius);
	background-color: #fff;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
}

/* Mit dem Skript bleibt es im Formular, aber unsichtbar. Nicht display: none -
   sonst prüft der Browser required nicht mehr. Ohne Übergang: Das Theme gibt
   jedem select "transition: all .3s" mit, es schrumpfte sonst erst sichtbar. */
.sana-gestell.is-enhanced .sana-gestell__select {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
	transition: none;
}

/* Hülle um Combobox und Liste: Bezugspunkt, an dem die Liste aufklappt. */
.sana-gestell .sana-gestell__field {
	position: relative;
}

.sana-gestell .sana-gestell__combo {
	display: flex;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	min-height: var(--sana-gestell-height);
	padding: 7px 16px;
	border: 1px solid var(--sana-gestell-border);
	border-radius: var(--sana-gestell-radius);
	background: #fff;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	transition: border-color 0.15s ease;
}

.sana-gestell .sana-gestell__combo:hover {
	border-color: var(--sana-gestell-secondary);
}

.sana-gestell .sana-gestell__combo[aria-expanded="true"] {
	border-color: var(--sana-gestell-primary);
}

.sana-gestell .sana-gestell__combo:focus {
	outline: none;
}

.sana-gestell .sana-gestell__combo:focus-visible {
	outline: 2px solid var(--sana-gestell-primary);
	outline-offset: 2px;
}

/* Dasselbe Rot wie der Punkt bei "Derzeit nicht verfügbar". */
.sana-gestell .sana-gestell__combo[aria-invalid="true"] {
	border-color: #b91c1c;
}

.sana-gestell .sana-gestell__value {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

/* Lange Namen brechen um, statt abgeschnitten zu werden - "RAL 9006
   Weißaluminium matt glatt" passt auf dem Telefon nicht in eine Zeile, und
   gerade die Nummer und die Oberfläche am Ende sollen zu lesen sein. Das Feld
   wird dann eben höher.

   text-wrap: balance verteilt die Zeilen gleichmäßig. So rutscht "matt glatt"
   zusammen in die zweite Zeile, statt dass "glatt" allein dort steht. Browser,
   die es nicht kennen, brechen wie gewohnt um. */
.sana-gestell .sana-gestell__text {
	min-width: 0;
	text-wrap: balance;
}

/* "Bitte auswählen" etwas zurückgenommen, damit es nicht wie eine Farbe
   aussieht. */
.sana-gestell .sana-gestell__combo.is-empty .sana-gestell__text {
	opacity: 0.7;
}

.sana-gestell .sana-gestell__chevron {
	flex: none;
	width: 13px;
	height: auto;
	transition: transform 0.2s ease;
}

.sana-gestell .sana-gestell__combo[aria-expanded="true"] .sana-gestell__chevron {
	transform: rotate(180deg);
}

/* Die Liste. Am Schreibtisch passen alle zehn Farben hinein (10 × 42 px und
   Polster); wo die Namen umbrechen oder der Bildschirm niedrig ist, rollt sie
   in sich. */
.sana-gestell .sana-gestell__list {
	position: absolute;
	z-index: 30;
	top: calc(100% + 4px);
	right: 0;
	left: 0;
	box-sizing: border-box;
	max-height: min(470px, 60vh);
	margin: 0;
	padding: 4px 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 1px solid var(--sana-gestell-border);
	border-radius: var(--sana-gestell-radius);
	background: #fff;
	box-shadow: 0 12px 32px rgba(34, 45, 67, 0.14);
}

.sana-gestell .sana-gestell__list[hidden] {
	display: none;
}

.sana-gestell .sana-gestell__field.is-above .sana-gestell__list {
	top: auto;
	bottom: calc(100% + 4px);
}

.sana-gestell .sana-gestell__option {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 16px;
	cursor: pointer;
}

/* Markiert - mit der Maus oder der Tastatur. Die erste Zeile ist der Rückfall
   für Browser ohne color-mix. */
.sana-gestell .sana-gestell__option.is-active {
	background: #f6f6f4;
	background: color-mix(in srgb, var(--sana-gestell-secondary) 20%, white);
}

.sana-gestell .sana-gestell__option[aria-selected="true"] {
	font-weight: 700;
}

/* Haken hinter der gewählten Farbe. */
.sana-gestell .sana-gestell__option[aria-selected="true"]::after {
	content: "";
	flex: none;
	width: 10px;
	height: 5px;
	margin: -3px 2px 0 auto;
	border-bottom: 2px solid currentColor;
	border-left: 2px solid currentColor;
	transform: rotate(-45deg);
}

/* Wie oben beim gewählten Namen: gleichmäßig umbrechen. */
.sana-gestell .sana-gestell__name {
	min-width: 0;
	text-wrap: balance;
}

/* Der Kreis: 30 × 30 px, rund. Darin das Vorschaubild, füllend beschnitten,
   oder der Farbwert, den das Skript - an der Warenkorbposition das Plugin -
   als Hintergrund setzt. Fehlt beides, bleibt eine schwach gefüllte Fläche
   stehen - wie bei [farben] sieht man so sofort, wo etwas fehlt.

   Dieselben Regeln gelten in der Auswahl (.sana-gestell) und an der
   Warenkorbposition (.sana-gestell-item, siehe unten). */
.sana-gestell .sana-gestell__swatch,
.sana-gestell-item .sana-gestell__swatch {
	position: relative;
	display: block;
	flex: none;
	overflow: hidden;
	width: var(--sana-gestell-swatch);
	height: var(--sana-gestell-swatch);
	border-radius: 100%;
	background: #efeee9;
	background: color-mix(in srgb, var(--sana-gestell-secondary) 25%, white);
}

/* Ein feiner Ring über dem Bild: sonst verschwinden die drei Weißtöne auf dem
   weißen Grund der Liste. */
.sana-gestell .sana-gestell__swatch::after,
.sana-gestell-item .sana-gestell__swatch::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(34, 45, 67, 0.15);
}

.sana-gestell .sana-gestell__swatch img,
.sana-gestell-item .sana-gestell__swatch img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
}

/* "In den Warenkorb", solange keine Gestellfarbe gewählt ist. Gesperrt ist er
   über disabled; hier wird er blass und nimmt keinen Zeiger mehr an - sonst
   schaltete das Überfahren auf die Hover-Farbe aus dem Widget, als ließe er
   sich klicken.

   Die Farben muss er zurückbekommen: WooCommerce färbt gesperrte Knöpfe mit
   button.alt:disabled[disabled] in seinem eigenen Lila, und diese Regel wiegt
   schwerer als die aus dem Widget. Welche Farben der Knopf eigentlich hat,
   liest das Skript vor dem Sperren aus und legt sie in die beiden Variablen.
   Daher auch der lange Selektor - er muss die Regel von WooCommerce schlagen. */
form.cart button.single_add_to_cart_button.button.sana-gestell-pending:disabled[disabled] {
	background-color: var(--sana-gestell-button-bg, var(--e-global-color-primary, #222d43));
	color: var(--sana-gestell-button-color, #fff);
	opacity: 0.5;
	pointer-events: none;
}

/* ------------------------------------------------------------------
   Gestellfarbe an der Warenkorbposition
   ------------------------------------------------------------------

   Im Warenkorb, im Mini-Warenkorb der Kopfzeile und in der Kasse steht unter
   dem Produktnamen "Gestellfarbe:" und dahinter Farbkreis und Name - gebaut wie
   ein Eintrag der Auswahl. Das Markup liefert das Plugin, die Liste darum
   (dl.variation mit dt und dd) WooCommerce. Schrift und Farbe erbt es von dort. */

.sana-gestell-item {
	--sana-gestell-secondary: var(--e-global-color-secondary, #d3d0c7);
	--sana-gestell-swatch: 30px;

	display: inline-flex;
	align-items: center;
	gap: 12px;
	vertical-align: middle;
}

.sana-gestell-item .sana-gestell-item__name {
	min-width: 0;
	text-wrap: balance;
}

/* "Gestellfarbe:" auf Höhe der Kreismitte. WooCommerce lässt die Beschriftung
   links fließen, Elementor stellt sie im Mini-Warenkorb in ein Raster - in
   beiden Fällen stand sie sonst oben am Kreis. */
dl.variation dt:has(+ dd .sana-gestell-item) {
	line-height: 30px;
}

/* Im Warenkorb am Telefon und in der Kasse ist die Zelle mit dem Produktnamen
   eine Flex-Zeile (Custom CSS der beiden Widgets). Die Angaben der Position
   kämen dort als schmale dritte Spalte neben den Namen; so bekommen sie eine
   eigene Zeile darunter. :has() beschränkt das auf Zeilen mit Angaben - ohne
   Gestellfarbe bleibt alles, wie es war. */
.woocommerce td.product-name:has(> dl.variation) {
	flex-wrap: wrap;
}

.woocommerce td.product-name > dl.variation {
	flex: 0 0 100%;
	margin: 6px 0 0;
}

/* Warenkorb am Telefon: Der Name bleibt neben "Produkt:" stehen. Mit dem
   Umbruch von oben rutschte ein langer Name sonst in eine eigene Zeile. */
.woocommerce table.cart td.product-name:has(> dl.variation) > a {
	flex: 1 1 0;
	min-width: 0;
}