/*
 * Veredelungs-Konfigurator (Modul veredelung).
 * Mobile-first, reine Tap-Bedienung: Chips >= 44px, Zeichnung 100% Breite,
 * kein Hover als Voraussetzung (Hover ist nur Desktop-Komfort).
 * Farben über Theme-Tokens (--zcf-*) mit Fallbacks für Mail-/Fremdkontexte.
 */

.zwcl-vrd {
	margin: 0 0 1rem;
}

/* ---------- Einklapp-Kopf ---------- */

.zwcl-vrd__toggle {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	min-height: 48px;
	padding: 0.7rem 1rem;
	border: 1px solid var(--zcf-forest, #2f6b45);
	border-radius: var(--radius-pill, 999px);
	background: transparent;
	color: var(--zcf-forest, #2f6b45);
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	text-align: left;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.zwcl-vrd__toggle:hover,
.zwcl-vrd__toggle:focus-visible {
	background: var(--zcf-forest, #2f6b45);
	color: var(--zcf-white, #fff);
}

.zwcl-vrd__toggle-icon::before {
	content: "+";
	display: inline-block;
	font-size: 1.3rem;
	line-height: 1;
	transition: transform 0.18s ease;
}

.zwcl-vrd__toggle[aria-expanded="true"] .zwcl-vrd__toggle-icon::before {
	transform: rotate(45deg);
}

.zwcl-vrd__badge {
	margin-left: auto;
	min-width: 1.6em;
	padding: 0.15em 0.5em;
	border-radius: 999px;
	background: var(--zcf-forest, #2f6b45);
	color: var(--zcf-white, #fff);
	font-size: 0.85rem;
	text-align: center;
}

.zwcl-vrd__toggle:hover .zwcl-vrd__badge,
.zwcl-vrd__toggle[aria-expanded="true"]:hover .zwcl-vrd__badge {
	background: var(--zcf-white, #fff);
	color: var(--zcf-forest, #2f6b45);
}

/* ---------- Panel ---------- */

.zwcl-vrd__panel {
	margin-top: 0.7rem;
	padding: 0.9rem;
	border: 1px solid #e2d9cc;
	border-radius: 12px;
	background: #f8f6f2;
}

.zwcl-vrd__hint {
	margin: 0 0 0.8rem;
	font-size: 0.88rem;
	line-height: 1.5;
	color: #4c5a61;
}

.zwcl-vrd__add {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
	margin: 0.2rem 0 0.8rem;
	padding: 0.5rem 1rem;
	border: 1px dashed var(--zcf-forest, #2f6b45);
	border-radius: var(--radius-pill, 999px);
	background: transparent;
	color: var(--zcf-forest, #2f6b45);
	font-weight: 650;
	cursor: pointer;
}

.zwcl-vrd__add:hover,
.zwcl-vrd__add:focus-visible {
	background: rgba(47, 107, 69, 0.08);
}

/* ---------- Platzierungs-Karte ---------- */

.zwcl-vrd-card {
	margin: 0 0 0.9rem;
	padding: 0.9rem;
	border: 1px solid #e2d9cc;
	border-radius: 10px;
	background: var(--zcf-white, #fff);
}

.zwcl-vrd-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}

.zwcl-vrd-card__title {
	margin: 0;
	font-size: 1rem;
}

.zwcl-vrd-card__remove {
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: #8a5a44;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.zwcl-vrd-card__remove:hover,
.zwcl-vrd-card__remove:focus-visible {
	background: rgba(138, 90, 68, 0.1);
}

/* Ansicht-Tabs (Vorne/Hinten) */

.zwcl-vrd-card__views {
	display: flex;
	gap: 0.4rem;
	margin-bottom: 0.6rem;
}

.zwcl-vrd-card__viewtab {
	flex: 1 1 0;
	min-height: 44px;
	border: 1px solid #cfc4b3;
	border-radius: 8px;
	background: transparent;
	color: var(--zcf-ink, #23434a);
	font-weight: 650;
	cursor: pointer;
}

.zwcl-vrd-card__viewtab[aria-selected="true"] {
	border-color: var(--zcf-forest, #2f6b45);
	background: var(--zcf-forest, #2f6b45);
	color: var(--zcf-white, #fff);
}

/* Zeichnung + Zonen */

.zwcl-vrd-card__drawing {
	max-width: 300px;
	margin: 0 auto 0.6rem;
	color: #8b9298; /* Strichfarbe der Zeichnung (currentColor) */
}

.zwcl-vrd-card__drawing svg {
	display: block;
	width: 100%;
	height: auto;
}

.zwcl-vrd-zone {
	cursor: pointer;
	color: #a9b0b5; /* gestrichelte Zonenkontur, heller als die Zeichnung */
	transition: fill 0.15s ease;
}

.zwcl-vrd-zone:hover {
	fill: rgba(47, 107, 69, 0.12);
}

/* Gewählte Positionen deutlich markieren (Nutzerwunsch 2026-07-24):
   kräftige Füllung + durchgezogene, dickere Kontur. */
.zwcl-vrd-zone.is-active {
	fill: rgba(47, 107, 69, 0.42);
	color: var(--zcf-forest, #2f6b45);
	stroke-dasharray: none;
	stroke-width: 2.5;
}

/* Logo-/Haken-Marker in gewählten Zonen (per JS eingefügt). */
.zwcl-vrd-zonelogo--mark circle {
	fill: var(--zcf-forest, #2f6b45);
}

.zwcl-vrd-zonelogo--mark text {
	fill: var(--zcf-white, #fff);
	font-weight: 700;
}

/* Beschriftung über der Zeichnung (Desktop: beide Ansichten nebeneinander). */
.zwcl-vrd-card__viewlabel {
	margin: 0 0 0.25rem;
	font-size: 0.8rem;
	font-weight: 650;
	color: #8b9298;
	text-align: center;
	display: none; /* mobil übernehmen die Tabs die Beschriftung */
}

/* Gewählte Positionen als Tags unter dem Dropdown. */
.zwcl-vrd-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: -0.2rem 0 0.8rem;
	padding: 0;
	list-style: none;
}

.zwcl-vrd-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.4rem 0.3rem 0.75rem;
	border-radius: var(--radius-pill, 999px);
	background: var(--zcf-forest, #2f6b45);
	color: var(--zcf-white, #fff);
	font-size: 0.85rem;
	line-height: 1.2;
}

.zwcl-vrd-tag__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.22);
	color: var(--zcf-white, #fff);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}

.zwcl-vrd-tag__remove:hover,
.zwcl-vrd-tag__remove:focus-visible {
	background: rgba(255, 255, 255, 0.4);
	outline: none;
}

/* Mobil: Punkt am Ansicht-Tab, wenn dort Positionen gewählt sind. */
.zwcl-vrd-tabdot {
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	margin-left: 0.35rem;
	border-radius: 50%;
	background: currentColor;
	vertical-align: middle;
}

/* Chips (Zonen + Technik) — der führende, barrierearme Auswahlweg */

.zwcl-vrd-card__zones,
.zwcl-vrd-card__technik {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: 0 0 0.8rem;
	padding: 0;
	border: none;
}

.zwcl-vrd-card__zones legend,
.zwcl-vrd-card__technik legend {
	width: 100%;
	padding: 0;
	margin-bottom: 0.35rem;
}

.zwcl-vrd-chip {
	display: inline-flex;
}

.zwcl-vrd-chip input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.zwcl-vrd-chip span {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.45rem 0.9rem;
	border: 1px solid #cfc4b3;
	border-radius: var(--radius-pill, 999px);
	background: var(--zcf-white, #fff);
	color: var(--zcf-ink, #23434a);
	font-size: 0.9rem;
	line-height: 1.25;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.zwcl-vrd-chip input:checked + span {
	border-color: var(--zcf-forest, #2f6b45);
	background: var(--zcf-forest, #2f6b45);
	color: var(--zcf-white, #fff);
}

.zwcl-vrd-chip input:focus-visible + span {
	outline: 2px solid var(--zcf-forest, #2f6b45);
	outline-offset: 2px;
}

/* Logo-Bereich */

.zwcl-vrd-card__logo {
	margin-bottom: 0.8rem;
}

.zwcl-vrd-card__library {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: 0.35rem 0;
}

.zwcl-vrd-liblogo {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.3rem 0.8rem 0.3rem 0.3rem;
	border: 1px solid #cfc4b3;
	border-radius: 8px;
	background: var(--zcf-white, #fff);
	cursor: pointer;
	font-size: 0.9rem;
}

.zwcl-vrd-liblogo img {
	max-width: 44px;
	max-height: 34px;
	border-radius: 4px;
}

.zwcl-vrd-liblogo.is-active {
	border-color: var(--zcf-forest, #2f6b45);
	box-shadow: 0 0 0 2px rgba(47, 107, 69, 0.25);
}

.zwcl-vrd-liblogo-wrap {
	position: relative;
	display: inline-flex;
}

/* Kleines Lösch-Kreuz oben rechts an der gespeicherten „Meine Logos"-Kachel. */
.zwcl-vrd-liblogo-del {
	position: absolute;
	top: -0.4rem;
	right: -0.4rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.4rem;
	height: 1.4rem;
	border: 1px solid #cfc4b3;
	border-radius: 50%;
	background: var(--zcf-white, #fff);
	color: #9d3131;
	font-size: 0.95rem;
	line-height: 1;
	cursor: pointer;
}

.zwcl-vrd-liblogo-del:hover,
.zwcl-vrd-liblogo-del:focus-visible {
	background: #9d3131;
	color: var(--zcf-white, #fff);
	outline: none;
}

.zwcl-vrd-card__or {
	margin: 0.3rem 0;
	font-size: 0.85rem;
	color: #64717a;
}

.zwcl-vrd-upload input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.zwcl-vrd-upload__button {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.5rem 1rem;
	border: 1px solid var(--zcf-ink, #23434a);
	border-radius: var(--radius-pill, 999px);
	background: var(--zcf-white, #fff);
	color: var(--zcf-ink, #23434a);
	font-size: 0.9rem;
	cursor: pointer;
}

.zwcl-vrd-upload input:focus-visible + .zwcl-vrd-upload__button {
	outline: 2px solid var(--zcf-forest, #2f6b45);
	outline-offset: 2px;
}

.zwcl-vrd-card__saveas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
	margin: 0.5rem 0 0;
	font-size: 0.88rem;
}

.zwcl-vrd-card__saveas input[type="checkbox"] {
	width: 22px;
	height: 22px;
}

.zwcl-vrd-card__saveas input[type="text"] {
	flex: 1 1 12em;
	min-height: 40px;
	padding: 0.35rem 0.6rem;
	border: 1px solid #cfc4b3;
	border-radius: 8px;
}

.zwcl-vrd-card__preview {
	position: relative;
	display: inline-block;
	margin-top: 0.5rem;
	padding-right: 1.9rem;
}

.zwcl-vrd-card__preview[hidden] {
	display: none;
}

.zwcl-vrd-card__preview .zwcl-vrd-status {
	font-size: 0.85rem;
	color: #64717a;
}

.zwcl-vrd-card__preview .zwcl-vrd-status--error {
	color: #9d3131;
}

/* Kleines Entfernen-Kreuz oben rechts an der Logo-Vorschau (wie Positions-Tags). */
.zwcl-vrd-card__logo-x {
	position: absolute;
	top: 0;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	border: none;
	border-radius: 50%;
	background: var(--zcf-ink, #23434a);
	color: var(--zcf-white, #fff);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}

.zwcl-vrd-card__logo-x:hover,
.zwcl-vrd-card__logo-x:focus-visible {
	background: #9d3131;
	outline: none;
}

/* Detailfelder */

.zwcl-vrd-field {
	margin: 0 0 0.6rem;
}

.zwcl-vrd-field__label {
	display: block;
	margin-bottom: 0.25rem;
	font-size: 0.85rem;
	font-weight: 650;
	color: var(--zcf-ink, #23434a);
}

.zwcl-vrd-field textarea,
.zwcl-vrd-field input[type="number"] {
	width: 100%;
	padding: 0.5rem 0.6rem;
	border: 1px solid #cfc4b3;
	border-radius: 8px;
	font-size: 16px; /* verhindert iOS-Auto-Zoom */
}

.zwcl-vrd-field--breite input {
	max-width: 8em;
}

/* ---------- Warenkorb/Kasse ---------- */

.zwcl-vrd-cart {
	display: block;
	font-size: 0.88rem;
	line-height: 1.5;
}

.zwcl-vrd-cart__logo {
	display: inline-block;
	margin-left: 0.4rem;
	vertical-align: middle;
}

.zwcl-vrd-cart__logo img {
	max-width: 60px;
	max-height: 36px;
}

.zwcl-vrd-notice {
	margin: 0.6rem 0;
	padding: 0.6rem 0.9rem;
	border-left: 3px solid var(--zcf-forest, #2f6b45);
	background: #f8f6f2;
	font-size: 0.88rem;
	color: var(--zcf-ink, #23434a);
}

/* ---------- Preisstaffel-Anzeige (nur PDP) ---------- */

.zwcl-vrd-card__preis {
	margin: 0.2rem 0 0;
	padding: 0.55rem 0.9rem;
	border-radius: 8px;
	background: rgba(47, 107, 69, 0.08);
	color: var(--zcf-ink, #23434a);
	font-size: 0.92rem;
}

.zwcl-vrd-card__preis strong {
	color: var(--zcf-forest, #2f6b45);
	font-size: 1.05rem;
}

.zwcl-vrd__summe {
	margin: 0.8rem 0 0.4rem;
	padding: 0.7rem 1rem;
	border-radius: 8px;
	background: var(--zcf-forest, #2f6b45);
	color: var(--zcf-white, #fff);
	font-size: 0.95rem;
}

.zwcl-vrd__summe strong {
	font-size: 1.1rem;
}

/* Mengen-/Angebotshinweis (ab 5 Stück günstigere Preise). */
.zwcl-vrd__mengenhinweis {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	margin: 0.6rem 0 0.2rem;
	padding: 0.6rem 0.9rem;
	border-radius: 8px;
	background: rgba(214, 133, 95, 0.12);
	color: #8a4a2c;
	font-size: 0.9rem;
	line-height: 1.4;
}

.zwcl-vrd__mengenhinweis-icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 50%;
	background: #d6855f;
	color: #fff;
	font-weight: 700;
	font-size: 0.85rem;
	line-height: 1;
}

/* Pflicht-Markierung: Breite fehlt für die Preisstufe. */
.zwcl-vrd-card--breite-fehlt .zwcl-vrd-field--breite .zwcl-vrd-field__label {
	color: #a3512f;
	font-weight: 650;
}

.zwcl-vrd-card--breite-fehlt .zwcl-vrd-field--breite input {
	border-color: #d0855f;
}

/* ---------- Sonderwunsch -> Angebot (Panel in der Karte) ---------- */

.zwcl-vrd-angebot {
	margin: 0.2rem 0 0.8rem;
	padding: 0.9rem 1rem;
	border: 1px dashed var(--zcf-forest, #2f6b45);
	border-radius: 10px;
	background: rgba(47, 107, 69, 0.05);
}

.zwcl-vrd-angebot__text {
	margin: 0 0 0.6rem;
	font-size: 0.9rem;
	color: var(--zcf-ink, #23434a);
}

.zwcl-vrd-angebot__cta {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.6rem 1.2rem;
	border: none;
	border-radius: 10px;
	background: var(--zcf-forest, #2f6b45);
	color: var(--zcf-white, #fff);
	font-weight: 650;
	font-size: 0.95rem;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.zwcl-vrd-angebot__cta:hover,
.zwcl-vrd-angebot__cta:focus-visible {
	background: #24543a;
	outline: none;
}

.zwcl-vrd-angebot__cta:disabled {
	opacity: 0.6;
	cursor: wait;
}

/* ---------- Auswahl per Dropdown (Position + Technik) ---------- */

.zwcl-vrd-select {
	width: 100%;
	min-height: 44px;
	padding: 0.5rem 2.3rem 0.5rem 0.9rem;
	border: 1px solid #cfc4b3;
	border-radius: 10px;
	background-color: var(--zcf-white, #fff);
	color: var(--zcf-ink, #23434a);
	font-size: 0.95rem;
	line-height: 1.3;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232f6b45' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.85rem center;
}

.zwcl-vrd-select:hover {
	border-color: var(--zcf-forest, #2f6b45);
}

.zwcl-vrd-select:focus-visible {
	outline: none;
	border-color: var(--zcf-forest, #2f6b45);
	box-shadow: 0 0 0 3px rgba(47, 107, 69, 0.18);
}

/* ---------- Sprung-Knopf im Kaufformular (Band-Variante) ----------
 * Angeglichen an "In den Warenkorb" und "Angebot anfordern" (Pill,
 * volle Breite, min-height 52px) — in Terracotta als warmer Akzent
 * neben dem Forest-Grün der beiden Hauptaktionen (Axel 2026-07-27).
 */

.zwcl-vrd__jump {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	width: 100%;
	min-height: 52px;
	margin: 0.4rem 0 0.2rem;
	padding: 0.75rem 1.4rem;
	border: 1px solid var(--zcf-terracotta, #C97955);
	border-radius: 999px;
	background: var(--zcf-terracotta, #C97955);
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	cursor: pointer;
	text-align: center;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.zwcl-vrd__jump:hover,
.zwcl-vrd__jump:focus-visible {
	background: #b96944;
	border-color: #b96944;
	color: #fff;
	outline: none;
}

.zwcl-vrd__jump-text {
	flex: 1;
}

.zwcl-vrd__jump-icon::before {
	content: "+";
	display: inline-block;
	font-size: 1.3rem;
	line-height: 1;
}

/* ---------- Band: volle Breite unter dem Artikel (PDP) ---------- */

.zwcl-vrd--band {
	margin: 0.5rem 0 1.5rem;
	padding-top: 1.4rem;
	border-top: 1px solid #e6ded0;
}

/* Direktes Kind des .product-Grids → über die volle Breite spannen, ohne die
   Nachbar-Module (Passform/Pflege/Zertifikate) aus ihren Spalten zu drücken. */
.woocommerce div.product > .zwcl-vrd--band {
	grid-column: 1 / -1;
}

/* WooCommerce liefert in layout.css noch die Float-Regel width:48 % für
   Galerie + Summary mit; das Theme legt .product aber als CSS-Grid an — ohne
   Korrektur ist jede Spalte nur 48 % ihrer Grid-Spalte breit (Bild und rechte
   Spalte viel zu schmal). Auf volle Grid-Spaltenbreite zurückholen. */
.woocommerce div.product div.images,
.woocommerce div.product div.summary {
	width: 100% !important;
	float: none;
}

/* ---------- Tablet/Desktop ---------- */

@media (min-width: 768px) {
	.zwcl-vrd__panel {
		padding: 1.2rem;
	}

	.zwcl-vrd-card {
		padding: 1.1rem;
	}

	/* Karten-Body: links die Zeichnung(en), rechts die Auswahl. Im Band
	   bekommt die Zeichnung mehr Platz (volle Artikelbreite). */
	.zwcl-vrd-card__body {
		display: grid;
		grid-template-columns: minmax(240px, 380px) 1fr;
		gap: 1.5rem;
		align-items: start;
	}

	.zwcl-vrd--band .zwcl-vrd-card__body {
		grid-template-columns: minmax(300px, 480px) 1fr;
		gap: 2rem;
	}

	.zwcl-vrd-card__drawing {
		margin: 0;
		max-width: none;
	}

	/* Vorne + Hinten NEBENEINANDER (Nutzerwunsch 2026-07-24): beide
	   Ansichten gleichzeitig sichtbar und markierbar, Tabs entfallen. */
	.zwcl-vrd-card__views {
		display: none;
	}

	.zwcl-vrd-card__visual {
		display: grid;
		/* auto-fit: Schemas mit nur einer Ansicht bekommen die volle Breite */
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
		gap: 0.75rem;
		align-items: start;
	}

	.zwcl-vrd-card__view[hidden] {
		display: block; /* mobil versteckt der Tab-Zustand — Desktop zeigt beide */
	}

	.zwcl-vrd-card__viewlabel {
		display: block;
	}

	/* Logo + Details im rechten Bereich zweispaltig, spart Höhe. */
	.zwcl-vrd--band .zwcl-vrd-card__details {
		display: grid;
		grid-template-columns: 1fr 2fr;
		gap: 1rem;
		align-items: start;
	}
}