/* ==========================================================================
   Shop – product page, configurator (Printerei Shop plugin), cart, checkout,
   customer account. Loaded on WooCommerce pages only. Uses tokens.css only.
   WooCommerce's own stylesheets are switched off (inc/woocommerce.php).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Product order page: compact head + step-by-step order form
   -------------------------------------------------------------------------- */
.product-order {
	padding-block: var(--space-6) var(--section-y);
	background: var(--color-surface-alt);
	scroll-margin-top: calc(var(--header-bar-h) + var(--space-4));
}

.product-order .breadcrumbs {
	margin-bottom: var(--space-6);
}

.product-order__head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: var(--space-4) var(--space-6);
	margin-bottom: var(--space-8);
}

@media (min-width: 1024px) {
	.product-order__head {
		grid-template-columns: auto minmax(0, 1fr) auto;
	}
}

.product-order__thumb {
	position: relative;
	display: grid;
	place-items: center;
	width: 5.5rem;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--accent-soft, var(--color-secondary-soft));
}

@media (min-width: 768px) {
	.product-order__thumb {
		width: 8rem;
		border-radius: var(--radius-lg);
	}
}

.product-order__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: var(--shadow-mockup);
}

.product-order__img.mockup--photo {
	object-fit: cover;
	filter: none;
}

.product-order__icon {
	--icon-size: var(--icon-lg);
	color: var(--accent-ink, var(--color-secondary));
}

.product-order__intro {
	display: grid;
	gap: var(--space-1);
	min-width: 0;
}

.product-order__intro .eyebrow {
	margin: 0;
}

.product-order__title {
	font-size: var(--fs-2xl);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
}

.product-order__lead {
	max-width: var(--measure);
	color: var(--color-text-muted);
}

@media (max-width: 767px) {
	.product-order__head {
		margin-bottom: var(--space-6);
	}

	.product-order__title {
		font-size: var(--fs-2xl);
	}

	/* Phones: the steps start right away, the intro text is in the description below. */
	.product-order__lead {
		display: none;
	}
}

.product-order__facts {
	display: flex;
	flex-wrap: wrap;
	grid-column: 1 / -1;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-sm);
}

@media (min-width: 1024px) {
	.product-order__facts {
		grid-column: auto;
		flex-direction: column;
		align-items: flex-end;
	}
}

.product-order__facts li {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-1) var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	color: var(--color-text-muted);
}

.product-order__facts .icon {
	color: var(--color-secondary);
}

.product-order__from strong {
	font-weight: var(--fw-black);
	color: var(--color-text);
}

/* Step navigation */
.wizard {
	position: relative;
}

.wz-nav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: var(--space-2);
	margin: 0 0 var(--space-4);
	padding: 0;
	list-style: none;
}

@media (max-width: 767px) {
	.wz-nav {
		grid-auto-flow: column;
		grid-auto-columns: minmax(11rem, 1fr); /* wide enough for long words like "Druckpositionen" */
		grid-template-columns: none;
		margin-inline: calc(var(--gutter) * -1);
		padding-inline: var(--gutter);
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scroll-padding-inline: var(--gutter); /* snap to the page edge, not the screen edge */
		scrollbar-width: none;
	}

	.wz-nav::-webkit-scrollbar {
		display: none;
	}

	/* Sideways rows: the first item sits at the start, the last at the end, every one between stops in the middle. */
	.wz-nav__item {
		scroll-snap-align: center;
	}

	.wz-nav__item:first-child {
		scroll-snap-align: start;
	}

	.wz-nav__item:last-child {
		scroll-snap-align: end;
	}
}

.wz-nav__link {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	height: 100%;
	padding: var(--space-3) var(--space-4);
	border: var(--control-border) solid transparent;
	border-radius: var(--radius-md);
	color: var(--color-text);
	text-decoration: none;
	box-sizing: border-box;
	transition:
		background-color var(--dur-fast) var(--ease-out),
		border-color var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
	.wz-nav__link:hover {
		background: var(--color-surface);
		color: var(--color-text);
	}
}

.wz-nav__link:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.wz-nav__link[aria-current="step"] {
	border-color: var(--color-secondary);
	background: var(--color-surface);
}

/* Steps not reached yet: visible, but not clickable (the order is filled in step by step). */
.wizard.is-js .wz-nav__link.is-locked {
	opacity: 0.55;
	cursor: not-allowed;
}

@media (hover: hover) {
	.wizard.is-js .wz-nav__link.is-locked:hover {
		background: transparent;
	}
}

.wz-nav__num {
	display: grid;
	flex: none;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--radius-pill);
	background: var(--color-surface-sunk);
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
}

.wz-nav__link[aria-current="step"] .wz-nav__num {
	background: var(--color-secondary);
	color: var(--color-on-secondary);
}

.wz-nav__link.is-done .wz-nav__num {
	background: var(--color-success);
	color: var(--color-on-secondary);
	font-size: 0;
}

.wz-nav__link.is-done .wz-nav__num::after {
	content: "✓";
	font-size: var(--fs-sm);
}

.wz-nav__text {
	display: grid;
	min-width: 0;
	line-height: var(--lh-snug);
}

.wz-nav__label {
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	overflow-wrap: anywhere; /* safety net: a word longer than the box breaks instead of spilling out */
}

.wz-nav__value {
	overflow: hidden;
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wz-nav__value:empty {
	display: none;
}

/* Step card + panels */
.wz-card {
	padding: var(--space-6) var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	background: var(--color-surface);
}

@media (min-width: 768px) {
	.wz-card {
		padding: var(--space-8);
	}
}

.wz-panel:focus,
.wz-panel:focus-visible {
	outline: none; /* the panel only receives focus so screen readers start at the new step */
	box-shadow: none;
}

.wz-panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* wide content may not push the panel past the card */
	align-content: start;
	gap: var(--space-6);
	outline: none;
}

/* Without JavaScript all steps are listed below each other. */
.wz-panel + .wz-panel {
	margin-top: var(--space-10);
	padding-top: var(--space-10);
	border-top: 1px solid var(--color-border);
}

.wizard.is-js .wz-panel:not(.is-active) {
	display: none;
}

.wizard.is-js .wz-panel + .wz-panel {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

@media (min-width: 768px) {
	.wizard.is-js .wz-panel {
		min-height: 22rem;
	}
}

.wz-panel__title {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-size: var(--fs-xl);
	letter-spacing: var(--ls-snug);
}

.wz-panel__num {
	display: grid;
	flex: none;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--radius-pill);
	background: var(--color-secondary);
	color: var(--color-on-secondary);
	font-size: var(--fs-sm);
}

.wizard.is-js .wz-panel__num {
	display: none;
}

.wz-panel__lead {
	margin-top: calc(var(--space-4) * -1);
	color: var(--color-text-muted);
}

.wz-panel__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-4) var(--space-6);
}

.wz-panel__head .wz-panel__lead {
	margin-top: var(--space-1);
}

/* Option groups + tiles */
.wz-group {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.wz-group + .wz-group,
.wz-group + .wz-upload {
	margin-top: var(--space-2);
}

/* "Datencheck & Gestaltung" inside the own-file pane, above the upload */
.wz-upload__pane > .wz-group {
	margin-bottom: var(--space-8);
}

.wz-group__title {
	margin-bottom: var(--space-3);
	padding: 0;
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
}

.wz-group__help {
	margin-bottom: var(--space-3);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

/* Tiles share the row; --n (number of choices) keeps a few tiles from growing too wide. */
.wz-options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: var(--space-3);
	max-width: calc(var(--n, 4) * 17rem);
}

.wz-options--sheet {
	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
	max-width: calc(var(--n, 5) * 15rem);
}

/* Six or more formats (Plakate): an even grid – 3 × 2, or 4 + 3 for seven – instead of 5 + 1
   (phones: the sideways row). --cols comes from the markup. */
.wz-options--sheet.wz-options--many {
	grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
	max-width: calc(var(--cols, 3) * 15.5rem);
}

.wz-options--paper {
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	max-width: calc(var(--n, 4) * 18rem);
}

.wz-options--sides {
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	max-width: calc(var(--n, 2) * 20rem);
}

.wz-option,
.wz-qty__card {
	position: relative;
	display: flex;
	min-width: 0; /* long labels wrap instead of widening the tile */
	cursor: pointer;
}

/* An option not offered with the other choices (configurator.js, data-only). */
.wz-option[hidden] {
	display: none;
}

.wz-option__input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.wz-option__body,
.wz-qty__body {
	position: relative;
	display: grid;
	flex: 1;
	align-content: start;
	gap: var(--space-1);
	padding: var(--space-4) var(--space-10) var(--space-4) var(--space-4);
	border: var(--control-border) solid var(--color-border-strong);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	transition:
		border-color var(--dur-fast) var(--ease-out),
		background-color var(--dur-fast) var(--ease-out),
		box-shadow var(--dur-fast) var(--ease-out);
}

/* Radio dot / checkbox square */
.wz-option__body::after {
	content: "";
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	width: 1.125rem;
	height: 1.125rem;
	border: var(--control-border) solid var(--color-border-strong);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	transition: all var(--dur-fast) var(--ease-out);
}

.wz-option__input[type="checkbox"] + .wz-option__body::after {
	border-radius: var(--radius-xs);
}

@media (hover: hover) {
	.wz-option:hover .wz-option__body,
	.wz-qty__card:hover .wz-qty__body {
		border-color: var(--c-teal-300);
	}
}

.wz-option__input:checked + .wz-option__body,
.wz-option__input:checked + .wz-qty__body {
	border-color: var(--color-secondary);
	background: var(--color-secondary-soft);
}

.wz-option__input:checked + .wz-option__body::after {
	border-color: var(--color-secondary);
	background: var(--color-secondary);
	box-shadow: inset 0 0 0 3px var(--color-surface);
}

.wz-option__input[type="checkbox"]:checked + .wz-option__body::after {
	box-shadow: none;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center / 75% no-repeat,
		var(--color-secondary);
}

.wz-option__input:focus-visible + .wz-option__body,
.wz-option__input:focus-visible + .wz-qty__body {
	box-shadow: var(--focus-ring);
}

.wz-option__label {
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	overflow-wrap: anywhere;
}

.wz-option__note {
	font-size: var(--fs-sm);
	line-height: var(--lh-snug);
	color: var(--color-text-muted);
}

.wz-option__extra {
	margin-top: var(--space-1);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	color: var(--color-text-muted);
}

.wz-option__input:checked + .wz-option__body .wz-option__extra {
	color: var(--color-secondary);
}

/* Ecken: the chosen card shows its corner – Eckig turns square, Abgerundet rounder */
.wz-option--square .wz-option__body,
.wz-option--round .wz-option__body {
	transition:
		border-color var(--dur-fast) var(--ease-out),
		background-color var(--dur-fast) var(--ease-out),
		box-shadow var(--dur-fast) var(--ease-out),
		border-radius var(--dur-slow) var(--ease-in-out);
}

.wz-option--square .wz-option__input:checked + .wz-option__body {
	border-radius: 0;
}

.wz-option--round .wz-option__input:checked + .wz-option__body {
	border-radius: var(--radius-xl);
}

/* Formats: sheets drawn to scale */
.wz-options--sheet .wz-option__body {
	justify-items: center;
	padding: var(--space-5) var(--space-4) var(--space-4);
	text-align: center;
}

.wz-options--sheet .wz-option__label {
	font-size: var(--fs-md);
}

.wz-visual--sheet {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 7.75rem;
	margin-bottom: var(--space-3);
}

.wz-visual--sheet span {
	width: var(--w);
	height: var(--h);
	border: var(--control-border) solid var(--color-border-strong);
	border-radius: calc(var(--radius-xs) / 2);
	background: var(--color-surface);
	/* Hoch-/Querformat: the sheet turns smoothly into its new shape */
	transition:
		width var(--dur-slow) var(--ease-in-out),
		height var(--dur-slow) var(--ease-in-out),
		border-color var(--dur-fast) var(--ease-out);
}

/* Folded formats: a light dashed fold line across the middle of the open sheet */
.wz-visual--sheet .is-folded {
	position: relative;
}

.wz-visual--sheet .is-folded::after {
	content: "";
	position: absolute;
	border: 0 dashed var(--color-border-strong);
	opacity: 0.7;
}

.wz-visual--sheet .is-fold-v::after {
	top: 3px;
	bottom: 3px;
	left: 50%;
	border-left-width: 1px;
}

.wz-visual--sheet .is-fold-h::after {
	left: 3px;
	right: 3px;
	top: 50%;
	border-top-width: 1px;
}

@media (max-width: 599px) {
	.wz-visual--sheet {
		height: 4.75rem;
		margin-bottom: var(--space-2);
	}

	/* Smaller sheets (real size, not a transform, so the tile layout shrinks too) */
	.wz-visual--sheet span {
		width: calc(var(--w) * 0.6);
		height: calc(var(--h) * 0.6);
	}

	.wz-options--sheet .wz-option__label {
		font-size: var(--fs-md);
	}
}

/* Screens (Digital Menüboard): a dark screen with a thin bezel and a soft glare. */
.wz-visual--sheet .is-screen {
	border: 2px solid var(--c-gray-900);
	border-radius: 3px;
	background: linear-gradient(135deg, var(--c-gray-600) 0%, var(--c-gray-850) 55%, var(--c-gray-900) 100%);
}

.wz-option__input:checked + .wz-option__body .wz-visual--sheet .is-screen {
	border-color: var(--color-secondary-active);
	background: linear-gradient(135deg, var(--color-secondary-hover) 0%, var(--color-secondary) 55%, var(--color-secondary-active) 100%);
}

/* Round formats (stickers): a circle. */
.wz-visual--sheet .is-round {
	border-radius: 50%;
}

/* «Eigene Grösse»: a dashed sheet – any size – that takes the typed shape. */
.wz-visual--sheet .is-custom {
	border-style: dashed;
	background: repeating-linear-gradient(135deg, transparent 0 6px, var(--color-surface-alt) 6px 7px), var(--color-surface);
}

/* Width × height of «Eigene Grösse», under the format tiles. */
.wz-custom {
	max-width: 30rem;
	margin-top: var(--space-4);
	padding: var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface-alt);
}

.wz-custom[hidden] {
	display: none;
}

.wz-custom__title {
	margin: 0 0 var(--space-3);
	font-weight: var(--fw-semibold);
}

.wz-custom__fields {
	display: flex;
	align-items: flex-end;
	gap: var(--space-3);
}

.wz-custom__field {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
}

.wz-custom__input {
	position: relative;
	display: block;
}

.wz-custom__input .input {
	width: 100%;
	padding-right: 2.75rem;
	font-variant-numeric: tabular-nums;
}

.wz-custom__unit {
	position: absolute;
	top: 50%;
	right: var(--space-3);
	transform: translateY(-50%);
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	pointer-events: none;
}

.wz-custom__times {
	padding-bottom: 0.7rem;
	color: var(--color-text-muted);
}

.wz-custom__hint {
	margin: var(--space-3) 0 0;
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}

/* Phones: the format tiles become one sideways row like the product rows – from card edge to
   card edge, first tile at the start, last at the end, the others snap to the middle. With few
   tiles they simply share the width. */
@media (max-width: 767px) {
	.wz-options--sheet {
		display: flex;
		gap: var(--space-3);
		max-width: none;
		margin-inline: calc(var(--space-4) * -1);
		padding: var(--space-1) var(--space-4) var(--space-2);
		overflow-x: auto;
		overflow-y: hidden; /* Sideways only: the row never moves up or down under the finger. */
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--space-4);
		scrollbar-width: none;
		touch-action: pan-x pan-y;
		-webkit-overflow-scrolling: touch;
	}

	.wz-options--sheet::-webkit-scrollbar {
		display: none;
	}

	.wz-options--sheet > .wz-option {
		flex: 1 0 8.75rem;
		scroll-snap-align: center;
	}

	.wz-options--sheet > .wz-option:first-child {
		scroll-snap-align: start;
	}

	.wz-options--sheet > .wz-option:last-child {
		scroll-snap-align: end;
	}
}

.wz-option__input:checked + .wz-option__body .wz-visual--sheet span {
	border-color: var(--color-secondary);
}

/* Papers: swatch + weight bar */
.wz-options--paper .wz-option__body {
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: var(--space-3);
}

.wz-visual--paper {
	grid-column: 1;
	grid-row: 1 / span 2;
	align-self: start;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	background: var(--color-surface-alt);
}

.wz-visual--gloss {
	background: linear-gradient(135deg, var(--c-white) 0%, var(--c-gray-100) 42%, var(--c-white) 52%, var(--c-gray-100) 100%);
}

.wz-visual--recycled {
	background: var(--c-paper-recycled);
}

.wz-visual--kraft {
	background: var(--c-paper-kraft);
}

.wz-visual--paper.is-firm {
	box-shadow: 0 2px 0 var(--color-border-strong);
}

.wz-visual--paper.is-thick {
	box-shadow: 0 2px 0 var(--color-border-strong), 0 4px 0 var(--c-gray-400);
}

/* Laminated: the sheet sits inside a clear film that runs past its edge. */
.wz-visual--paper.is-laminated {
	border-color: var(--c-gray-400);
	box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.85), inset 0 0 0 5px var(--color-border-strong);
}

.wz-options--paper .wz-option__label,
.wz-options--paper .wz-option__note {
	grid-column: 2;
}

.wz-options--paper .wz-option__label {
	grid-row: 1;
}

.wz-options--paper .wz-option__note {
	grid-row: 2;
}

.wz-options--paper .wz-option__extra {
	grid-column: 2;
	grid-row: 3;
}

/* Business cards / flyers: swatch and name in one row, description and price below over the whole tile. */
.wizard--card .wz-options--paper .wz-visual--paper {
	grid-row: 1;
	align-self: center;
}

.wizard--card .wz-options--paper .wz-option__label {
	align-self: center;
}

.wizard--card .wz-options--paper :is(.wz-option__note, .wz-option__extra) {
	grid-column: 1 / -1;
}

.wizard--card .wz-options--paper .wz-option__note {
	margin-top: var(--space-1);
}

/* Print sides: front / back */
.wz-visual--sides {
	display: flex;
	gap: var(--space-1);
	margin-bottom: var(--space-2);
}

.wz-visual--sides span {
	width: 1.5rem;
	height: 2.125rem;
	border-radius: calc(var(--radius-xs) / 2);
	background: var(--color-secondary);
}

.wz-visual--sides span + span {
	border: var(--control-border) dashed var(--color-border-strong);
	background: var(--color-surface);
	box-sizing: border-box;
}

.wz-visual--sides.is-both span + span {
	border: 0;
	background: var(--color-secondary);
}

/* Standard / express switch: a white thumb slides to the chosen option */
.wz-seg {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-1);
	min-width: min(100%, 26rem);
	margin: 0;
	padding: var(--space-1);
	border: 0;
	border-radius: var(--radius-md);
	background: var(--color-surface-sunk);
}

.wz-seg__thumb {
	position: absolute;
	top: var(--space-1);
	bottom: var(--space-1);
	left: var(--space-1);
	width: calc((100% - var(--space-1) * 3) / 2);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	box-shadow: var(--shadow-xs);
	transition: transform var(--dur-base) var(--ease-out);
}

.wz-seg:has(input[value="1"]:checked) .wz-seg__thumb {
	transform: translateX(calc(100% + var(--space-1)));
}

/* Keyboard focus ring on the thumb */
.wz-seg:has(input:focus-visible) .wz-seg__thumb {
	box-shadow: var(--focus-ring);
}

.wz-seg__item {
	position: relative;
	display: flex;
	min-width: 0;
	cursor: pointer;
}

.wz-seg__item input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/* Same three lines in both options, so nothing jumps when switching. */
.wz-seg__item > span {
	display: grid;
	flex: 1;
	align-content: start;
	padding: var(--space-2) var(--space-3);
	color: var(--color-text-muted);
	line-height: var(--lh-snug);
	transition: color var(--dur-base) var(--ease-out);
}

.wz-seg__item input:checked + span {
	color: var(--color-secondary);
}

.wz-seg__item strong {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--fs-sm);
}

.wz-seg__item strong .icon {
	--icon-size: var(--icon-xs);
	color: var(--c-magenta-500);
}

.wz-seg__item small {
	font-size: var(--fs-xs);
}

.wz-seg__price {
	font-weight: var(--fw-semibold);
}

@media (max-width: 599px) {
	.wz-seg {
		flex: 1 1 100%;
	}
}

/* Hoch-/Querformat switch above the formats (same sliding thumb) */
.wz-seg--orient {
	width: min(100%, 22rem);
	min-width: 0;
}

.wz-seg--orient:has(input[value="quer"]:checked) .wz-seg__thumb {
	transform: translateX(calc(100% + var(--space-1)));
}

.wz-seg--orient .wz-seg__item > span {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
}

.wz-orient__shape {
	flex: none;
	width: 0.75rem;
	height: 1.0625rem;
	border: 2px solid currentColor;
	border-radius: 2px;
}

.wz-orient__shape--quer {
	width: 1.0625rem;
	height: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
	.wz-seg__thumb {
		transition: none;
	}
}

/* Quantity cards */
.wz-qty {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
	gap: var(--space-3);
}

.wz-qty__body {
	gap: 0;
	padding: var(--space-4);
	font-variant-numeric: tabular-nums;
}

.wz-qty__qty {
	font-weight: var(--fw-bold);
}

.wz-qty__total {
	font-size: var(--fs-lg);
	font-weight: var(--fw-black);
	letter-spacing: var(--ls-tight);
}

.wz-qty__unit {
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
}

@media (max-width: 599px) {
	/* Phones: always two price cards per row. */
	.wz-qty {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-2);
	}

	.wz-qty__body {
		padding: var(--space-3);
	}

	.wz-qty__total {
		font-size: var(--fs-lg);
	}
}

.wz-qty__custom {
	max-width: 16rem;
	margin-top: var(--space-4);
}

/* Textile sizes */
.config-sizes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
	gap: var(--space-3);
	clear: both;
}

.config-size {
	display: grid;
	gap: var(--space-1);
	text-align: center;
}

.config-size__label {
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
}

.config-size__input {
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.config-sizes__total {
	margin-top: var(--space-3);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--color-secondary);
}

.config-sizes__total:empty {
	display: none;
}

/* Upload */
.config-upload {
	display: grid;
	gap: var(--space-3);
	clear: both;
}

.config-upload__drop {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	column-gap: var(--space-3);
	min-height: 4.75rem;
	padding: var(--space-3) var(--space-4);
	border: 2px dashed var(--color-border-strong);
	border-radius: var(--radius-md);
	background: var(--color-surface-alt);
	text-align: start;
	cursor: pointer;
	transition:
		border-color var(--dur-fast) var(--ease-out),
		background-color var(--dur-fast) var(--ease-out);
}

.config-upload__drop.is-over {
	border-color: var(--color-secondary);
	background: var(--color-secondary-soft);
}
@media (hover: hover) {
	.config-upload__drop:hover {
		border-color: var(--color-secondary);
		background: var(--color-secondary-soft);
	}
}

.config-upload__drop:has(input:focus-visible) {
	box-shadow: var(--focus-ring);
}

.config-upload__input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

.config-upload__icon {
	grid-row: span 2;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--radius-tile);
	background: var(--color-surface);
	color: var(--color-secondary);
	box-shadow: var(--shadow-xs);
	--icon-size: var(--icon-md);
}

.config-upload__text {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.config-upload__text strong {
	font-size: var(--fs-base);
	color: var(--color-secondary);
}

/* Touch screens can't drag files in */
@media (hover: none) {
	.config-upload__or {
		display: none;
	}
}

.config-upload__hint {
	font-size: var(--fs-xs);
	line-height: 1.4;
	color: var(--color-text-muted);
}

/* Hint pieces wrap as a whole */
.config-upload__part {
	white-space: nowrap;
}

@media (max-width: 599px) {
	.config-upload__max {
		display: none;
	}
}

.config-upload__file {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-height: 4.75rem;
	padding: var(--space-3) var(--space-4);
	border: var(--control-border) solid var(--color-secondary);
	border-radius: var(--radius-md);
	background: var(--color-secondary-soft);
	overflow: hidden;
}

.config-upload__file[hidden],
.config-upload__drop[hidden] {
	display: none;
}

.config-upload__file-icon {
	color: var(--color-secondary);
	--icon-size: var(--icon-md);
}

.config-upload__file-text {
	display: grid;
	flex: 1;
	min-width: 0;
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
}

.config-upload__file-text strong {
	overflow: hidden;
	font-size: var(--fs-sm);
	color: var(--color-text);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.config-upload__progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--color-border);
}

.config-upload__progress span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--color-secondary);
	transition: width var(--dur-fast) linear;
}

.config-upload__warnings {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	background: var(--c-yellow-50);
	color: var(--c-yellow-800);
	font-size: var(--fs-xs);
	list-style: none;
}

.config-upload__warnings[hidden],
.config-upload__error[hidden] {
	display: none;
}

.config-upload__error {
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--color-error);
}

.config-check {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-4);
	font-size: var(--fs-sm);
	cursor: pointer;
}

.config-check[hidden] {
	display: none;
}

.config-check input {
	width: 1.125rem;
	height: 1.125rem;
	accent-color: var(--color-secondary);
}

/* Upload preview */
.wz-preview {
	display: grid;
	gap: var(--space-2);
	margin-top: var(--space-2);
}

.wz-preview[hidden] {
	display: none;
}

.wz-preview__title {
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
}

.wz-preview__pages {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
}

.wz-preview__page {
	display: grid;
	justify-items: center;
	gap: var(--space-1);
	margin: 0;
}

.wz-preview__page img {
	display: block;
	width: auto;
	height: auto;
	max-width: min(13rem, 40vw);
	max-height: 13rem;
	border: 1px solid var(--color-border-strong);
	border-radius: calc(var(--radius-xs) / 2);
	background: var(--color-surface);
}

.wz-preview__page figcaption,
.wz-preview__note {
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
}

.wz-upload .config-check {
	margin-top: var(--space-3);
}

/* Steps (left) + order summary (right) */
.wz-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: var(--space-6);
}

/* Long step names ("Weiter: Form, Material & Schutzlaminat") wrap inside the button
   instead of pushing the summary wider than its card. */
.wz-summary > * {
	min-width: 0;
}

.wz-summary [data-submit] {
	height: auto;
	padding-block: var(--space-3);
	line-height: var(--lh-snug);
	text-align: center;
	white-space: normal;
}

.wz-main {
	min-width: 0;
}

@media (min-width: 1024px) {
	.wz-layout {
		grid-template-columns: minmax(0, 1fr) 22.5rem;
		gap: var(--space-8);
	}

	.wz-summary {
		position: sticky;
		top: calc(var(--header-bar-h) + var(--space-4));
	}
}

.wz-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-top: var(--space-6);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border);
}

.wz-card__foot [hidden] {
	display: inline-flex;
	visibility: hidden;
}

.wizard:not(.is-js) .wz-card__foot {
	display: none;
}

@media (max-width: 1023px) {
	/* The bar at the bottom of the screen has back / next on small screens. */
	.wz-card__foot {
		display: none;
	}
}

.wz-card__count {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

/* Order summary */
.wz-summary {
	display: grid;
	gap: var(--space-3);
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	background: var(--color-surface);
}

.wz-summary__head {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.wz-summary__thumb {
	position: relative;
	flex: none;
	width: 3.5rem;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: var(--accent-soft, var(--color-secondary-soft));
}

.wz-summary__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.wz-summary__img.mockup--photo {
	object-fit: cover;
}

.wz-summary__titles {
	display: grid;
	min-width: 0;
	line-height: var(--lh-snug);
}

.wz-summary__eyebrow {
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.wz-summary__product {
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
}

.wz-summary__lines {
	display: grid;
	border-top: 1px solid var(--color-border);
}

.wz-summary__row {
	display: flex;
	justify-content: space-between;
	gap: var(--space-3);
	width: 100%;
	padding: var(--space-2);
	border: 0;
	border-bottom: 1px solid var(--color-surface-alt);
	border-radius: var(--radius-xs);
	background: transparent;
	color: var(--color-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease-out);
}

/* The rows of the open step: name in the accent colour – no grey blocks, all rows look alike */
.wz-summary__row.is-current .wz-summary__key {
	color: var(--color-secondary);
	font-weight: var(--fw-semibold);
}

@media (hover: hover) {
	.wz-summary__row:hover {
		background: var(--color-surface-alt);
	}
}

.wz-summary__row:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.wz-summary__key {
	flex: none;
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.wz-summary__val {
	min-width: 0;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	text-align: right;
	overflow-wrap: anywhere;
}

/* Steps still to come: just the step name and "folgt" */
.wz-summary__row.is-todo {
	cursor: default;
}

@media (hover: hover) {
	.wz-summary__row.is-todo:hover {
		background: transparent;
	}
}

.wz-summary__row.is-todo .wz-summary__key,
.wz-summary__row.is-todo .wz-summary__val {
	color: var(--color-text-subtle);
	font-weight: var(--fw-regular);
}

/* Options of steps not visited yet: the preselected defaults, shown quieter. */
.wz-summary__row.is-pending .wz-summary__val {
	font-weight: var(--fw-regular);
	color: var(--color-text-muted);
}

.wizard.is-js .wz-summary__row.is-locked {
	cursor: default;
}

@media (hover: hover) {
	.wizard.is-js .wz-summary__row.is-locked:hover {
		background: transparent;
	}
}

.wz-summary__val.is-open {
	color: var(--c-yellow-800);
}

/* Small preview of the uploaded file (page 1 + 2) */
.wz-summary__preview {
	display: flex;
	gap: var(--space-2);
	padding-block: var(--space-1);
}

.wz-summary__preview[hidden] {
	display: none;
}

.wz-summary__preview img {
	display: block;
	width: auto;
	height: 4.5rem;
	border: 1px solid var(--color-border-strong);
	border-radius: calc(var(--radius-xs) / 2);
	background: var(--color-surface);
}

.wz-summary__ready {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-control);
	background: var(--color-secondary-soft);
	font-size: var(--fs-sm);
	color: var(--color-secondary);
}

.wz-summary__ready .icon {
	--icon-size: var(--icon-xs);
}

.wz-summary__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
	margin-top: var(--space-1);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
}

.wz-summary__caption {
	display: grid;
	line-height: var(--lh-snug);
}

.wz-summary__total small {
	font-size: var(--fs-xs);
	font-weight: var(--fw-regular);
	color: var(--color-text-muted);
}

.wz-summary__total strong {
	white-space: nowrap; /* "CHF 1'275.25" always on one line */
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-snug);
	font-variant-numeric: tabular-nums;
	transition: opacity var(--dur-fast) var(--ease-out);
}

.wz-summary__meta {
	margin: calc(var(--space-2) * -1) 0 0;
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	text-align: right;
}

.wz-summary__error,
.wz-bar__error {
	margin: 0;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-control);
	background: var(--color-primary-soft);
	color: var(--color-error);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
}

.wz-summary__error[hidden],
.wz-bar__error[hidden] {
	display: none;
}

.wz-summary__trust {
	display: grid;
	gap: var(--space-2);
	margin: var(--space-1) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
}

.wz-summary__trust li {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.wz-summary__trust .icon {
	--icon-size: var(--icon-xs);
	color: var(--color-secondary);
}

/* While a new price loads: no flash. The price only dims if the answer takes
   long (after a short pause, softly); normally it simply rolls to the new value. */
.wizard.is-loading .wz-summary__total strong,
.wizard.is-loading .wz-bar__total {
	opacity: 0.55;
	transition-delay: 450ms;
}

[data-submit].is-busy {
	opacity: 0.7;
	pointer-events: none;
}

/* Phones + tablets: price and next step stay at the bottom of the screen. */
.wz-bar {
	position: sticky;
	bottom: 0;
	z-index: var(--z-raised);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-4);
	margin: var(--space-4) calc(var(--gutter) * -1) 0;
	padding: var(--space-3) var(--gutter);
	border-top: 1px solid var(--color-border);
	background: var(--color-surface);
}

.wizard:not(.is-js) .wz-bar {
	position: static;
}

@media (min-width: 1024px) {
	.wz-bar {
		display: none;
	}
}

/* Phone keyboard open: the bar leaves the bottom of the screen and waits at the end of the form. */
.is-typing .wz-bar {
	position: static;
}

.wz-bar__info {
	display: grid;
	flex: 1 1 auto;
	min-width: 0;
	line-height: var(--lh-snug);
}

.wz-bar__total {
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
	font-variant-numeric: tabular-nums;
	transition: opacity var(--dur-fast) var(--ease-out);
}

.wz-bar__ready {
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
}

.wz-bar__actions {
	display: flex;
	gap: var(--space-2);
}

.wz-bar__actions [hidden] {
	display: none;
}

.wz-bar__error {
	flex-basis: 100%;
}

@media (max-width: 599px) {
	.wz-bar__actions {
		flex: 1 1 100%;
	}

	.wz-bar__actions [data-submit] {
		flex: 1;
	}
}

/* --------------------------------------------------------------------------
   Shop pages: header + checkout steps
   -------------------------------------------------------------------------- */
.shop-page {
	padding-block: var(--space-6) var(--section-y);
}

.shop-page__head {
	display: grid;
	gap: var(--space-5);
	margin-bottom: var(--space-10);
}

.shop-page__title {
	font-size: var(--fs-3xl);
	letter-spacing: var(--ls-tight);
}

.shop-steps {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-6);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.shop-steps__item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--color-text-muted);
}

.shop-steps__item + .shop-steps__item::before {
	content: "";
	width: 2rem;
	height: 2px;
	margin-right: var(--space-4);
	border-radius: var(--radius-pill);
	background: var(--color-border-strong);
}

.shop-steps__num {
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border: var(--control-border) solid var(--color-border-strong);
	border-radius: var(--radius-pill);
	font-size: var(--fs-xs);
}

.shop-steps__item.is-current {
	color: var(--color-text);
}

.shop-steps__item.is-current .shop-steps__num {
	border-color: var(--color-primary);
	background: var(--color-primary);
	color: var(--color-on-primary);
}

.shop-steps__item.is-done .shop-steps__num {
	border-color: var(--color-secondary);
	background: var(--color-secondary);
	color: var(--color-on-secondary);
}

/* Phones: all three steps on one line; the lines between them take the room that is left. */
@media (max-width: 599px) {
	.shop-steps {
		flex-wrap: nowrap;
		gap: 0;
	}

	.shop-steps__item {
		gap: var(--space-1);
		min-width: 0;
		white-space: nowrap;
	}

	.shop-steps__item + .shop-steps__item {
		flex: 1 1 auto;
	}

	.shop-steps__item + .shop-steps__item::before {
		flex: 1 1 auto;
		width: auto;
		min-width: var(--space-2);
		margin-inline: var(--space-2);
	}

	.shop-steps__num {
		flex: none;
		width: 1.5rem;
		height: 1.5rem;
	}
}

/* --------------------------------------------------------------------------
   WooCommerce basics: notices, buttons, forms
   -------------------------------------------------------------------------- */
.woocommerce-notices-wrapper:empty {
	display: none;
}

/* WooCommerce focuses notices for screen readers; no visible ring needed on these */
.woocommerce-message:focus,
.woocommerce-error:focus,
.woocommerce-info:focus,
.woocommerce-NoticeGroup:focus {
	outline: none;
	box-shadow: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-error,
.wc-block-components-notice-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin: 0 0 var(--space-6);
	padding: var(--space-4) var(--space-5);
	border-radius: var(--radius-control);
	background: var(--color-secondary-soft);
	color: var(--color-secondary);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	list-style: none;
}

.woocommerce-error {
	display: grid;
	background: var(--color-primary-soft);
	color: var(--color-error);
}

.woocommerce-info {
	background: var(--color-surface-alt);
	color: var(--color-text);
}

.woocommerce-message a:not(.button),
.woocommerce-info a:not(.button),
.woocommerce-error a:not(.button) {
	color: inherit;
}

.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: var(--control-h);
	padding: 0 var(--control-px);
	border: var(--control-border) solid var(--color-secondary);
	border-radius: var(--radius-control);
	background: var(--color-surface);
	color: var(--color-secondary);
	font: inherit;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color var(--dur-base) var(--ease-out),
		color var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out),
		transform var(--dur-base) var(--ease-out);
}

@media (hover: hover) {
	.woocommerce .button:hover,
	.woocommerce button.button:hover,
	.woocommerce a.button:hover {
		background: var(--color-secondary);
		color: var(--color-on-secondary);
	}
}

.woocommerce .button:disabled,
.woocommerce button.button:disabled,
.woocommerce .button.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Main call to action: red, like .btn--primary */
.woocommerce a.checkout-button,
.woocommerce #place_order,
.woocommerce .button.alt,
.woocommerce button.button.alt {
	min-height: var(--control-h-lg);
	padding: 0 var(--control-px-lg);
	border-color: transparent;
	background: var(--color-primary);
	color: var(--color-on-primary);
	font-size: var(--fs-md);
}

@media (hover: hover) {
	.woocommerce a.checkout-button:hover,
	.woocommerce #place_order:hover,
	.woocommerce .button.alt:hover,
	.woocommerce button.button.alt:hover {
		background: var(--color-primary-hover);
		color: var(--color-on-primary);
		transform: translateY(-1px);
	}
}

.woocommerce .button:focus-visible,
.woocommerce a.checkout-button:focus-visible {
	box-shadow: var(--focus-ring);
}

.woocommerce form .form-row {
	display: grid;
	align-content: start;
	gap: var(--space-2);
	margin: 0 0 var(--space-4);
}

.woocommerce form .form-row label {
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--color-text);
}

.woocommerce form .form-row .required {
	color: var(--color-primary-text);
	text-decoration: none;
}

.woocommerce form .form-row .optional {
	font-weight: var(--fw-regular);
	color: var(--color-text-muted);
}

.woocommerce form .input-text,
.woocommerce form select,
.woocommerce form textarea {
	width: 100%;
	min-height: var(--control-h);
	padding: 0 var(--space-4);
	border: var(--control-border) solid var(--color-border-strong);
	border-radius: var(--radius-control);
	background: var(--color-field);
	color: var(--color-text);
	font: inherit;
	font-size: var(--fs-base);
	transition:
		border-color var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out);
}

/* textarea.input-text: beats ".woocommerce form .input-text" (padding 0 16px),
   so the first line keeps the same inset from the top as from the left. */
.woocommerce form textarea,
.woocommerce form textarea.input-text {
	min-height: 7rem;
	padding: var(--space-3) var(--space-4);
	line-height: var(--lh-base);
	resize: vertical;
}

@media (hover: hover) {
	.woocommerce form .input-text:hover,
	.woocommerce form select:hover {
		border-color: var(--c-gray-400);
	}
}

.woocommerce form .input-text:focus,
.woocommerce form select:focus,
.woocommerce form textarea:focus {
	border-color: var(--color-focus);
	box-shadow: 0 0 0 3px var(--c-cyan-50);
	outline: none;
}

.woocommerce form .woocommerce-invalid .input-text,
.woocommerce form .woocommerce-invalid select,
.woocommerce form .woocommerce-invalid .pr-select__button {
	border-color: var(--color-error);
}

/* WooCommerce's error under a field */
.woocommerce .checkout-inline-error-message {
	margin: 0;
	color: var(--color-error);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
}

.woocommerce form .form-row input[type="checkbox"],
.woocommerce form .form-row input[type="radio"],
.woocommerce ul#shipping_method input[type="radio"],
.woocommerce ul.payment_methods input[type="radio"] {
	width: 1.125rem;
	height: 1.125rem;
	margin: 0;
	accent-color: var(--color-secondary);
}

.woocommerce form .form-row .woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: flex-start;
	gap: var(--space-3);
	font-weight: var(--fw-regular);
	line-height: 1.45;
}

/* The box sits centred on the first text line – also when the text wraps */
.woocommerce form .form-row .woocommerce-form__label-for-checkbox input[type="checkbox"] {
	flex: none;
	margin: calc((1lh - 1.125rem) / 2) 0 0;
}

@media (min-width: 640px) {
	.woocommerce form .form-row-first,
	.woocommerce form .form-row-last {
		display: inline-grid;
		width: calc(50% - var(--space-2));
		vertical-align: top;
	}

	.woocommerce form .form-row-first {
		margin-right: var(--space-4);
	}
}

/* --------------------------------------------------------------------------
   Tables (cart, checkout review, orders)
   -------------------------------------------------------------------------- */
.woocommerce table.shop_table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	background: var(--color-surface);
	font-size: var(--fs-sm);
	overflow: hidden;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: var(--space-4) var(--space-5);
	border-bottom: 1px solid var(--color-border);
	text-align: left;
	vertical-align: middle;
}

.woocommerce table.shop_table thead th {
	background: var(--color-surface-alt);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.woocommerce table.shop_table tr:last-child > th,
.woocommerce table.shop_table tr:last-child > td {
	border-bottom: 0;
}

.woocommerce table.shop_table .product-name a {
	font-size: var(--fs-base);
	font-weight: var(--fw-bold);
	color: var(--color-text);
	text-decoration: none;
}

@media (hover: hover) {
	.woocommerce table.shop_table .product-name a:hover {
		color: var(--color-secondary);
	}
}

.woocommerce .product-thumbnail img {
	width: 4.5rem;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: contain;
	border-radius: var(--radius-sm);
	background: var(--color-surface-alt);
}

.woocommerce .product-remove a.remove {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--radius-pill);
	color: var(--color-text-muted);
	font-size: 1.25rem;
	line-height: 1;
	text-decoration: none;
}

@media (hover: hover) {
	.woocommerce .product-remove a.remove:hover {
		background: var(--color-primary-soft);
		color: var(--color-error);
	}
}

/* Job details under the product name (WooCommerce prints a <dl class="variation">) */
.woocommerce dl.variation {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--space-1) var(--space-3);
	margin: var(--space-2) 0 0;
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
}

.woocommerce dl.variation dt {
	font-weight: var(--fw-medium);
}

.woocommerce dl.variation dd {
	margin: 0;
	color: var(--color-text);
}

.woocommerce dl.variation dd p {
	margin: 0;
}

.woocommerce .product-subtotal,
.woocommerce .product-total,
.woocommerce .product-price {
	font-weight: var(--fw-bold);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.cart-qty {
	font-weight: var(--fw-semibold);
	white-space: nowrap;
}

.woocommerce .order-total th,
.woocommerce .order-total td {
	font-size: var(--fs-lg);
}

.woocommerce .order-total .amount {
	font-weight: var(--fw-black);
}

.woocommerce .includes_tax,
.woocommerce .tax_label {
	display: block;
	font-size: var(--fs-xs);
	font-weight: var(--fw-regular);
	color: var(--color-text-muted);
}

/* Shipping methods */
.woocommerce ul#shipping_method {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul#shipping_method li {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.woocommerce .woocommerce-shipping-destination,
.woocommerce .woocommerce-shipping-calculator {
	margin-top: var(--space-2);
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
}

/* Responsive cart table (WooCommerce adds data-title to each cell) */
@media (max-width: 767px) {
	.woocommerce table.shop_table_responsive thead {
		display: none;
	}

	.woocommerce table.shop_table_responsive tr {
		display: grid;
		border-bottom: 1px solid var(--color-border);
	}

	.woocommerce table.shop_table_responsive td {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: 0 0.3em; /* «CHF 439.20 für 2 Artikel» stays together on the right */
		border: 0;
		padding: var(--space-2) var(--space-4);
		text-align: right;
	}

	.woocommerce table.shop_table_responsive td::before {
		content: attr(data-title);
		margin-right: auto;
		padding-right: var(--space-4);
		font-weight: var(--fw-semibold);
		color: var(--color-text-muted);
		text-align: left;
	}

	.woocommerce table.shop_table_responsive td.product-remove::before,
	.woocommerce table.shop_table_responsive td.product-thumbnail::before,
	.woocommerce table.shop_table_responsive td.actions::before {
		display: none;
	}

	.woocommerce table.shop_table_responsive td.product-name {
		display: block;
		text-align: left;
	}

	.woocommerce table.shop_table_responsive td.product-name::before {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Cart (templates of the Printerei Shop plugin)
   1 · products, 2 · delivery, "So geht es weiter" – order summary on the right
   -------------------------------------------------------------------------- */
.cart-page {
	display: grid;
	gap: var(--space-8);
	align-items: start;
}

.cart-page__main {
	display: grid;
	gap: var(--space-10);
	min-width: 0;
}

/* Phones + tablets: summary with "Zur Kasse" right after the delivery choice, "So geht es weiter" last. */
@media (max-width: 1023px) {
	.cart-page {
		gap: var(--space-10);
	}

	.cart-page__main {
		display: contents;
	}

	.cart-flow {
		order: 1;
	}
}

@media (min-width: 1024px) {
	.cart-page {
		grid-template-columns: minmax(0, 1fr) 22.5rem;
	}

	.cart-page__summary {
		position: sticky;
		top: calc(var(--header-bar-h) + var(--space-6));
	}
}

.cart-page__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.cart-page__actions[hidden] {
	display: none;
}

.cart-block {
	display: grid;
	gap: var(--space-4);
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.cart-block__title {
	display: flex;
	align-items: flex-start; /* A title on two lines: the number stays with the first line. */
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-snug);
}

/* A legend is not a grid item: give it its own spacing. */
legend.cart-block__title {
	margin-bottom: var(--space-4);
}

.cart-block__num {
	display: grid;
	place-items: center;
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	margin-top: calc((var(--fs-lg) * var(--lh-snug) - 1.75rem) / 2); /* Centred on the first line. */
	border-radius: var(--radius-pill);
	background: var(--color-secondary-soft);
	color: var(--color-secondary);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
}

/* 1 · Products */
.cart-items {
	display: grid;
	gap: var(--space-3);
}

.cart-item {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4) var(--space-5);
	align-items: flex-start;
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	background: var(--color-surface);
}

.cart-item__media {
	display: flex;
	flex: none;
	gap: var(--space-2);
	align-items: center;
	justify-content: center;
	width: 6.5rem;
	height: 6.5rem;
	padding: var(--space-2);
	border-radius: var(--radius-tile);
	background: var(--accent-soft, var(--color-surface-alt));
}

.cart-item__media--pages {
	width: auto;
	height: auto;
	min-height: 6.5rem;
	padding: var(--space-3);
	background: var(--color-surface-alt);
}

.cart-item__page {
	display: block;
	width: auto;
	height: auto;
	max-width: 4.5rem;
	max-height: 6.25rem;
	border: 1px solid var(--color-border-strong);
	border-radius: 3px;
	background: var(--color-field);
}

.cart-item__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.cart-item__body {
	display: grid;
	flex: 1 1 18rem;
	gap: var(--space-2);
	min-width: 0;
}

.cart-item__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-1) var(--space-4);
}

.cart-item__title {
	margin: 0;
	font-size: var(--fs-md);
	line-height: var(--lh-snug);
}

.cart-item__price {
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.cart-item__specs {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	line-height: 1.5;
}

.cart-item__file {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	margin: 0;
	font-size: var(--fs-sm);
	overflow-wrap: anywhere;
}

.cart-item__file .icon,
.cart-item__warnings .icon {
	--icon-size: var(--icon-xs);
	flex: none;
	margin-top: 0.15em;
}

.cart-item__file .icon {
	color: var(--color-success);
}

.cart-item__file.is-later .icon {
	color: var(--color-text-muted);
}

.cart-item__warnings {
	display: grid;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--c-yellow-800);
	font-size: var(--fs-xs);
}

.cart-item__warnings li {
	display: flex;
	gap: var(--space-2);
}

.cart-item__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	margin: var(--space-1) 0 0 calc(var(--space-3) * -1);
}

/* WooCommerce's cart script finds the remove link as ".product-remove > a". */
.cart-item__actions .product-remove {
	display: contents;
}

.cart-item__action {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: var(--control-h-sm);
	padding: 0 var(--space-3);
	border-radius: var(--radius-control);
	color: var(--color-secondary);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	text-decoration: none;
	transition:
		background-color var(--dur-fast) var(--ease-out),
		color var(--dur-fast) var(--ease-out);
}

.cart-item__action .icon {
	--icon-size: var(--icon-xs);
}

@media (hover: hover) {
	.cart-item__action:hover {
		background: var(--color-surface-alt);
		color: var(--color-secondary-hover);
	}
}

.cart-item__action--remove {
	color: var(--color-text-muted);
}

@media (hover: hover) {
	.cart-item__action--remove:hover {
		color: var(--color-error);
	}
}

.cart-item__action:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

/* 2 · Delivery */
.cart-ship {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--space-3);
}

.cart-ship__option {
	position: relative;
	display: flex;
	gap: var(--space-4);
	align-items: flex-start;
	padding: var(--space-4) calc(var(--space-5) + 1.75rem) var(--space-4) var(--space-4);
	border: var(--control-border) solid var(--color-border-strong);
	border-radius: var(--radius-tile);
	background: var(--color-surface);
	cursor: pointer;
	transition:
		border-color var(--dur-fast) var(--ease-out),
		background-color var(--dur-fast) var(--ease-out);
}

/* Radio dot, same as the options of the order form */
.cart-ship__option::after {
	content: "";
	position: absolute;
	top: var(--space-4);
	right: var(--space-4);
	width: 1.125rem;
	height: 1.125rem;
	border: var(--control-border) solid var(--color-border-strong);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	transition: all var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
	.cart-ship__option:hover {
		border-color: var(--c-teal-300);
	}
}

.cart-ship__option:has(.cart-ship__input:checked) {
	border-color: var(--color-secondary);
	background: var(--color-secondary-soft);
}

.cart-ship__option:has(.cart-ship__input:checked)::after {
	border-color: var(--color-secondary);
	background: var(--color-secondary);
	box-shadow: inset 0 0 0 3px var(--color-surface);
}

.cart-ship__option:has(.cart-ship__input:focus-visible) {
	box-shadow: var(--focus-ring);
}

.cart-ship__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.cart-ship__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	color: var(--color-secondary);
}

.cart-ship__text {
	display: grid;
	flex: 1;
	gap: 2px;
	min-width: 0;
	line-height: var(--lh-snug);
}

.cart-ship__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0 var(--space-3);
}

.cart-ship__name {
	min-width: 0;
	font-weight: var(--fw-bold);
}

/* Phones: no icon, so name and price fit on one line (cart and checkout alike). */
@media (max-width: 599px) {
	.cart-ship__icon {
		display: none;
	}
}

.cart-ship__price {
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	white-space: nowrap;
}

.cart-ship__price.is-free {
	color: var(--color-success);
}

.cart-ship__desc {
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
	line-height: 1.45;
}

.cart-ship__when {
	margin-top: var(--space-1);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
}

/* So geht es weiter */
.cart-flow {
	padding: var(--space-5) var(--space-6);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	background: var(--color-surface);
}

.cart-flow__title {
	margin: 0;
	font-size: var(--fs-md);
}

.cart-flow__steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
	gap: var(--space-5) var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cart-flow__step,
.cart-flow__variant {
	display: grid;
	align-content: start;
	gap: var(--space-1);
}

.cart-flow__variant[hidden] {
	display: none;
}

.cart-flow__num {
	display: grid;
	place-items: center;
	width: 1.625rem;
	height: 1.625rem;
	margin-bottom: var(--space-1);
	border-radius: var(--radius-pill);
	background: var(--color-surface-sunk);
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
}

.cart-flow__step.is-now .cart-flow__num {
	background: var(--color-secondary);
	color: var(--color-on-secondary);
}

.cart-flow__name {
	font-size: var(--fs-sm);
}

.cart-flow__text {
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
	line-height: 1.45;
}

/* Order summary */
.cart-summary {
	display: grid;
	gap: var(--space-4);
	padding: var(--space-6);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	background: var(--color-surface);
}

.cart-summary__title {
	margin: 0;
	font-size: var(--fs-md);
}

.cart-summary__when {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-tile);
	background: var(--color-secondary-soft);
}

.cart-summary__when .icon {
	flex: none;
	color: var(--color-secondary);
}

.cart-summary__when > span {
	display: grid;
	line-height: var(--lh-snug);
}

.cart-summary__when-caption {
	color: var(--color-secondary);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
}

.cart-summary__lines {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	font-size: var(--fs-sm);
}

.cart-summary__line {
	display: flex;
	justify-content: space-between;
	gap: var(--space-3);
}

.cart-summary__line dt {
	min-width: 0;
	color: var(--color-text-muted);
}

.cart-summary__line dd {
	margin: 0;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.cart-summary__line.is-discount dt,
.cart-summary__line.is-discount dd {
	color: var(--color-success);
}

/* Voucher: a link that opens the field */
.cart-coupon {
	display: grid;
	gap: var(--space-2);
}

.cart-coupon.is-busy {
	opacity: 0.6;
}

.cart-coupon__toggle {
	display: inline-flex;
	justify-self: start;
	align-items: center;
	gap: var(--space-2);
	min-height: 2rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-link);
	font: inherit;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	cursor: pointer;
}

.cart-coupon__toggle .icon {
	--icon-size: var(--icon-xs);
}

@media (hover: hover) {
	.cart-coupon__toggle:hover {
		color: var(--color-link-hover);
	}
}

.cart-coupon__toggle:focus-visible {
	outline: none;
	border-radius: var(--radius-xs);
	box-shadow: var(--focus-ring);
}

.cart-coupon__toggle[hidden],
.cart-coupon__form[hidden],
.cart-coupon__error[hidden] {
	display: none;
}

.cart-coupon__form {
	display: flex;
	gap: var(--space-2);
}

.cart-coupon__input {
	flex: 1;
	min-width: 0;
	min-height: var(--control-h-sm);
	text-transform: uppercase;
}

.cart-coupon__input::placeholder {
	text-transform: none;
}

.cart-coupon__input[aria-invalid="true"] {
	border-color: var(--color-error);
}

.cart-coupon__error {
	margin: 0;
	color: var(--color-error);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
}

.cart-coupon__applied {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	color: var(--color-success);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
}

.cart-coupon__applied .icon {
	--icon-size: var(--icon-xs);
}

.cart-coupon__remove {
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
	font-weight: var(--fw-regular);
}

.cart-summary__total {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-3);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border);
}

.cart-summary__caption {
	display: grid;
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
}

.cart-summary__caption small {
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
	font-weight: var(--fw-regular);
}

.cart-summary__amount {
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-snug);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.cart-summary__cta {
	display: grid;
	gap: var(--space-2);
}

.cart-summary__pay {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
	text-align: center;
}

.cart-summary__pay .icon {
	--icon-size: var(--icon-xs);
	flex: none;
}

.cart-summary__more {
	justify-self: center;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	text-decoration: none;
}

@media (hover: hover) {
	.cart-summary__more:hover {
		text-decoration: underline;
	}
}

/* Empty cart */
.cart-empty-state {
	display: grid;
	justify-items: center;
	gap: var(--space-3);
	max-width: 34rem;
	margin: 0 auto;
	padding: var(--space-12) var(--space-6);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	background: var(--color-surface);
	text-align: center;
}

.cart-empty-state__icon {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: var(--radius-pill);
	background: var(--color-secondary-soft);
	color: var(--color-secondary);
}

.cart-empty-state__title {
	margin: var(--space-2) 0 0;
	font-size: var(--fs-xl);
}

.cart-empty-state__text {
	margin: 0;
	color: var(--color-text-muted);
}

.cart-empty-state .btn {
	margin-top: var(--space-3);
}

@media (max-width: 479px) {
	.cart-item,
	.cart-summary {
		padding: var(--space-4);
	}

	.cart-flow {
		padding: var(--space-4);
	}

	.cart-item__media {
		width: 5rem;
		height: 5rem;
	}

	.cart-item__media--pages {
		width: auto;
		height: auto;
		min-height: 0;
		padding: var(--space-2);
	}

	.cart-item__page {
		max-width: 3.5rem;
		max-height: 5rem;
	}
}

/* "Ändern" from the cart: hint above the order form */
.wz-edit-note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-3);
	margin: 0 0 var(--space-4);
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--c-teal-100);
	border-radius: var(--radius-tile);
	background: var(--color-secondary-soft);
	font-size: var(--fs-sm);
}

.wz-edit-note .icon {
	--icon-size: var(--icon-xs);
	flex: none;
	color: var(--color-secondary);
}

.wz-edit-note span {
	flex: 1 1 16rem;
}

.wz-edit-note a {
	font-weight: var(--fw-semibold);
}

/* Password fields: WooCommerce's "show password" eye inside the field */
.woocommerce .password-input {
	position: relative;
	display: block;
}

.woocommerce .password-input input {
	padding-right: var(--space-12);
}

.woocommerce .show-password-input {
	position: absolute;
	top: 50%;
	right: var(--space-2);
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: var(--radius-xs);
	background: none;
	color: var(--color-text-muted);
	transform: translateY(-50%);
	cursor: pointer;
}

.woocommerce .show-password-input::before {
	content: "";
	width: var(--icon-sm);
	height: var(--icon-sm);
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0'/%3E%3Cpath d='M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0'/%3E%3Cpath d='M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.woocommerce .show-password-input.display-password::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.585 10.587a2 2 0 0 0 2.829 2.828'/%3E%3Cpath d='M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.585 10.587a2 2 0 0 0 2.829 2.828'/%3E%3Cpath d='M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
}

@media (hover: hover) {
	.woocommerce .show-password-input:hover {
		color: var(--color-text);
	}
}

.woocommerce .show-password-input:focus-visible {
	box-shadow: var(--focus-ring);
}

/* --------------------------------------------------------------------------
   Checkout (templates of the Printerei Shop plugin)
   Left: 1 Kontakt · 2 Rechnungsadresse · 3 Lieferung · 4 Zahlung · Bemerkungen
   Right: order summary with AGB and the order button
   -------------------------------------------------------------------------- */
.co-page {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-8);
	align-items: start;
}

.co-page > .woocommerce-NoticeGroup,
.co-page > .woocommerce-notices-wrapper,
.co-page > .woocommerce-error,
.co-page > .woocommerce-message,
.co-page > .woocommerce-info {
	grid-column: 1 / -1;
	margin: 0;
}

@media (min-width: 1024px) {
	.co-page {
		grid-template-columns: minmax(0, 1fr) 24rem;
	}

	.co-page__summary {
		position: sticky;
		top: calc(var(--header-bar-h) + var(--space-6));
	}
}

.co-page__main,
.co-steps,
.co-billing {
	display: grid;
	gap: var(--space-4);
	min-width: 0;
}

/* Hidden helper fields of WooCommerce (order attribution, in checkout and register
   forms) must never take a grid row – otherwise they add an extra gap. */
wc-order-attribution-inputs {
	display: contents;
}

.co-card {
	min-width: 0;
	padding: var(--space-6);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	background: var(--color-surface);
}

.co-card__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-1) var(--space-4);
	margin-bottom: var(--space-5);
}

.co-card__title {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0 0 var(--space-5);
	font-size: var(--fs-lg);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-snug);
}

.co-card__head .co-card__title {
	margin: 0;
}

.co-card__num {
	display: grid;
	place-items: center;
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: var(--radius-pill);
	background: var(--color-secondary-soft);
	color: var(--color-secondary);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
}

.co-card__optional {
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	font-weight: var(--fw-regular);
}

.co-card__aside {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}

.co-card__aside a {
	font-weight: var(--fw-semibold);
}

.co-card__note {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	margin: var(--space-4) 0 0;
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
	line-height: 1.5;
}

.co-card__note .icon {
	--icon-size: var(--icon-xs);
	flex: none;
	color: var(--color-secondary);
}

.co-card__note[hidden] {
	display: none;
}

/* Fields: 6-column grid – street + small house number, postcode + city */
.co-fields {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--space-4);
}

.woocommerce form .co-fields .form-row {
	grid-column: 1 / -1;
	width: auto;
	margin: 0;
}

.woocommerce form .co-fields .form-row-street {
	grid-column: 1 / span 4;
}

.woocommerce form .co-fields .form-row-number {
	grid-column: 5 / span 2;
}

.woocommerce form .co-fields .form-row-postcode {
	grid-column: 1 / span 2;
}

.woocommerce form .co-fields .form-row-city {
	grid-column: 3 / span 4;
}

@media (min-width: 640px) {
	.woocommerce form .co-fields .form-row-first {
		grid-column: 1 / span 3;
		margin: 0;
	}

	.woocommerce form .co-fields .form-row-last {
		grid-column: 4 / span 3;
	}

	.woocommerce form .co-fields .form-row-street {
		grid-column: 1 / span 5;
	}

	.woocommerce form .co-fields .form-row-number {
		grid-column: 6 / span 1;
	}

	.woocommerce form .co-fields .form-row-country {
		grid-column: 1 / span 3;
	}
}

/* Checkboxes: plain text, not a field label */
.woocommerce form .co-check {
	display: inline-flex;
	align-items: flex-start;
	gap: var(--space-3);
	font-size: var(--fs-sm);
	font-weight: var(--fw-regular);
	line-height: 1.45;
	cursor: pointer;
}

.woocommerce form .co-check input,
.woocommerce form .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	/* Centered on the first text line (also when the text wraps) */
	margin: calc((1lh - 1.125rem) / 2) 0 0;
	accent-color: var(--color-secondary);
}

.co-check__hint {
	color: var(--color-text-muted);
}

.woocommerce form .create-account,
.woocommerce form .co-ship-address__toggle {
	margin: 0;
}

.co-account {
	display: grid;
	gap: var(--space-4);
	margin-top: var(--space-4);
}

.woocommerce-additional-fields__field-wrapper .form-row {
	margin: 0;
}

.woocommerce form .woocommerce-additional-fields__field-wrapper textarea {
	min-height: 6rem;
}

/* 3 · Delivery (tiles from the cart) */
.co-ship {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Pickup note and "An eine andere Adresse liefern" sit in the same grid cell;
   the hidden one only turns invisible, so the slot keeps the height of the
   taller one and the card never jumps when switching pickup ↔ post. */
.co-ship-after {
	display: grid;
	margin-top: var(--space-4);
}

.co-ship-after > * {
	display: flex;
	grid-area: 1 / 1;
	align-items: center;
	min-height: 1.5rem;
	margin: 0;
}

.co-ship-after > [hidden] {
	display: flex;
	visibility: hidden;
}

.co-ship-address {
	margin-top: var(--space-4);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border);
}

/* 4 · Payment */
.co-pay__list {
	display: grid;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.co-pay__list > .wc_payment_method {
	padding: var(--space-4) var(--space-5);
	border: var(--control-border) solid var(--color-border-strong);
	border-radius: var(--radius-tile);
	background: var(--color-field);
	transition:
		border-color var(--dur-fast) var(--ease-out),
		background-color var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
	.co-pay__list > .wc_payment_method:hover {
		border-color: var(--c-teal-300);
	}
}

.co-pay__list > .wc_payment_method:has(input:checked) {
	border-color: var(--color-secondary);
	background: var(--color-secondary-soft);
}

.co-pay__list > .wc_payment_method:has(input:focus-visible) {
	box-shadow: var(--focus-ring);
}

.co-pay__list > .wc_payment_method > label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-left: var(--space-3);
	font-weight: var(--fw-bold);
	cursor: pointer;
}

.co-pay__list > .wc_payment_method > label img {
	width: auto;
	max-height: 1.5rem;
}

.co-pay__list .payment_box {
	margin: var(--space-2) 0 0 calc(1.125rem + var(--space-3));
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}

.co-pay__list .payment_box p {
	margin: 0;
}

.co-pay__none .woocommerce-info,
.co-pay__none .woocommerce-message {
	margin: 0;
}

/* Order summary */
.co-summary {
	display: grid;
	gap: var(--space-4);
	padding: var(--space-6);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	background: var(--color-surface);
}

.co-summary__title {
	margin: 0;
	font-size: var(--fs-lg);
}

.co-review {
	display: grid;
	gap: var(--space-4);
}

.co-review__items {
	display: grid;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.co-review__item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
}

.co-review__media {
	display: grid;
	place-items: center;
	flex: none;
	width: 3.5rem;
	height: 3.5rem;
	padding: var(--space-1);
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: var(--accent-soft, var(--color-surface-alt));
}

.co-review__media img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.co-review__media.is-page {
	background: var(--color-surface-alt);
}

.co-review__media.is-page img {
	width: auto;
	height: 100%;
	border: 1px solid var(--color-border-strong);
	border-radius: 2px;
	background: var(--color-field);
}

.co-review__text {
	display: grid;
	flex: 1;
	gap: 2px;
	min-width: 0;
}

.co-review__head {
	display: flex;
	justify-content: space-between;
	gap: var(--space-3);
}

.co-review__price {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.co-review__specs {
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.co-review__lines {
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border);
}

.co-summary__submit {
	display: grid;
	gap: var(--space-4);
	margin: 0;
}

.co-summary__submit #place_order {
	width: 100%;
	padding-inline: var(--space-4);
	white-space: normal;
	line-height: var(--lh-snug);
}

.co-summary__back {
	justify-self: center;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	text-decoration: none;
}

@media (hover: hover) {
	.co-summary__back:hover {
		text-decoration: underline;
	}
}

/* AGB + privacy note */
.woocommerce-terms-and-conditions-wrapper {
	display: grid;
	gap: var(--space-3);
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
}

.woocommerce-terms-and-conditions-wrapper .woocommerce-privacy-policy-text p {
	margin: 0;
}

.woocommerce form .woocommerce-terms-and-conditions-wrapper .form-row {
	margin: 0;
}

.woocommerce form .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox {
	align-items: flex-start;
	gap: var(--space-3);
	color: var(--color-text);
	font-size: var(--fs-sm);
	line-height: 1.45;
}

/* The AGB box is clearly required – no lone star at the line end */
.woocommerce-terms-and-conditions-wrapper .required {
	display: none;
}

.woocommerce-terms-and-conditions {
	max-height: 12rem;
	padding: var(--space-3) var(--space-4);
	overflow: auto;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-field);
}

/* Login (opens above the checkout via "Schon Kunde? Anmelden") – on the account
   page the form already sits in a card, so no second frame there. */
.woocommerce-checkout form.woocommerce-form-login {
	margin-bottom: var(--space-6);
	padding: var(--space-6);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	background: var(--color-surface);
}

@media (max-width: 479px) {
	.co-card,
	.co-summary {
		padding: var(--space-5) var(--space-4);
	}
}

/* --------------------------------------------------------------------------
   Order received + customer account
   -------------------------------------------------------------------------- */
.woocommerce-order {
	display: grid;
	gap: var(--space-8);
}

.woocommerce-thankyou-order-received {
	padding: var(--space-5) var(--space-6);
	border-radius: var(--radius-card);
	background: var(--c-teal-50);
	color: var(--color-success);
	font-size: var(--fs-lg);
	font-weight: var(--fw-semibold);
}

ul.woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.woocommerce-order-overview li {
	display: grid;
	gap: var(--space-1);
	padding: var(--space-4) var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
}

ul.woocommerce-order-overview li strong {
	font-size: var(--fs-base);
	color: var(--color-text);
}

.woocommerce-order-details__title,
.woocommerce-column__title,
.woocommerce-customer-details h2 {
	margin-bottom: var(--space-4);
	font-size: var(--fs-xl);
}

.woocommerce-customer-details address {
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	font-style: normal;
	line-height: var(--lh-base);
}

.woocommerce-account .woocommerce {
	display: grid;
	gap: var(--space-8);
	align-items: start;
}

@media (min-width: 900px) {
	.woocommerce-account.logged-in .woocommerce {
		grid-template-columns: 16rem minmax(0, 1fr);
	}
}

.woocommerce-MyAccount-navigation ul {
	display: grid;
	gap: var(--space-1);
	margin: 0;
	padding: var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	list-style: none;
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-control);
	color: var(--color-text);
	font-weight: var(--fw-semibold);
	text-decoration: none;
}

@media (hover: hover) {
	.woocommerce-MyAccount-navigation a:hover {
		background: var(--color-surface-alt);
	}
}

.woocommerce-MyAccount-navigation .is-active a {
	background: var(--color-secondary);
	color: var(--color-on-secondary);
}

.woocommerce-account .u-columns {
	display: grid;
	gap: var(--space-8);
}

@media (min-width: 900px) {
	.woocommerce-account .u-columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
	padding: var(--space-8);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	background: var(--color-surface);
}

/* Login / register: one even rhythm (16px) between every part of the form */
.woocommerce-account form.woocommerce-form-login,
.woocommerce-account form.woocommerce-form-register {
	display: grid;
	gap: var(--space-4);
}

.woocommerce-account form.woocommerce-form-login > *,
.woocommerce-account form.woocommerce-form-register > * {
	margin: 0;
}

.woocommerce-form-login .form-row:has(> button[type="submit"]) {
	gap: var(--space-4);
}

.woocommerce-form-register > p:not(.form-row),
.woocommerce-form-register .woocommerce-privacy-policy-text {
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}

.woocommerce-form-register .woocommerce-privacy-policy-text p {
	margin: 0;
}

.woocommerce-account .u-column1 h2,
.woocommerce-account .u-column2 h2 {
	margin-bottom: var(--space-5);
	font-size: var(--fs-xl);
}

.woocommerce-account .woocommerce-orders-table .button {
	min-height: var(--control-h-sm);
	margin: var(--space-1);
}

.woocommerce .woocommerce-pagination,
.woocommerce .woocommerce-Addresses {
	margin-top: var(--space-6);
}

mark.order-number,
mark.order-date,
mark.order-status {
	background: none;
	color: var(--color-text);
	font-weight: var(--fw-semibold);
}

.woocommerce .blockUI.blockOverlay {
	border-radius: var(--radius-card);
}

/* Job details on order pages (WooCommerce prints <ul class="wc-item-meta">) */
.woocommerce ul.wc-item-meta {
	display: grid;
	gap: var(--space-1);
	margin: var(--space-2) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
}

.woocommerce ul.wc-item-meta li {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--space-2);
}

.woocommerce ul.wc-item-meta .wc-item-meta-label {
	min-width: 10rem;
	font-weight: var(--fw-medium);
}

.woocommerce ul.wc-item-meta p {
	margin: 0;
	color: var(--color-text);
}

.woocommerce-table--order-details td.product-total,
.woocommerce-table--order-details tfoot td {
	text-align: right;
	vertical-align: top;
}

/* ==========================================================================
   Textile order page ("Textilien bedrucken")
   Printerei Shop: configurator-textile.php (markup) + textile.js (preview,
   − / + per size, discount bar). Uses the wizard styles above.
   ========================================================================== */
.tx-card {
	container: tx-card / inline-size;
}

/* Preview next to the options only when the card is wide enough for both
   (large screens); otherwise a compact preview on top. */
.tx-body {
	display: grid;
	gap: var(--space-5);
}

@container tx-card (min-width: 44rem) {
	.tx-body {
		grid-template-columns: minmax(13rem, 19rem) minmax(0, 1fr);
		align-items: start;
		gap: var(--space-8);
	}
}

.tx-panels {
	container: tx-panels / inline-size;
	min-width: 0;
}

.wizard--textile.is-js .wz-panel {
	min-height: 0;
}

/* Live preview (drawn by textile.js – without JavaScript there is nothing to show) */
.wizard:not(.is-js) .tx-stage {
	display: none;
}

.tx-stage {
	display: grid;
	justify-items: center;
	gap: var(--space-3);
}

.tx-stage__box {
	display: grid;
	place-items: center;
	width: 100%;
	padding: var(--space-3);
	border-radius: var(--radius-card);
	background: var(--color-surface-sunk);
}

.tx-stage__art {
	width: 100%;
	max-width: 15rem; /* As big as the mug: the 3D T-shirt needs the room (no jump when it fades in). */
	aspect-ratio: 300 / 276;
}

@container tx-card (min-width: 44rem) {
	.tx-stage {
		position: sticky;
		top: calc(var(--header-bar-h) + var(--space-4));
	}

	.tx-stage__box {
		padding: var(--space-5) var(--space-4);
	}

	.tx-stage__art {
		max-width: 17.5rem;
	}
}

.tx-stage__art svg {
	display: block;
	width: 100%;
	height: auto;
}

.tx-views {
	display: inline-grid; /* Equal buttons, so the thumb fits both. */
	gap: var(--space-1);
	padding: var(--space-1);
	border-radius: var(--radius-md);
	background: var(--color-surface-sunk);
}

.tx-views__btn {
	height: 2.25rem;
	padding: 0 var(--space-4);
	border: 0;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	cursor: pointer;
	transition:
		background-color var(--dur-fast) var(--ease-out),
		color var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
	.tx-views__btn:hover {
		color: var(--color-heading);
	}
}

.tx-views__btn[aria-pressed="true"] {
	color: var(--color-heading);
}

.tx-views__btn:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.tx-stage__note {
	max-width: 18rem;
	margin: 0;
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	text-align: center;
}

/* Group titles with a note on the right ("Brust links ist inklusive") */
.tx-group__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-1) var(--space-3);
	width: 100%;
}

.tx-group__aside {
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
}

/* Shared tile look */
.tx-garment__body,
.tx-colour__body,
.tx-option__body {
	border: var(--control-border) solid var(--color-border-strong);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	transition:
		border-color var(--dur-fast) var(--ease-out),
		background-color var(--dur-fast) var(--ease-out),
		box-shadow var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
	.tx-garment:hover .tx-garment__body,
	.tx-colour:hover .tx-colour__body,
	label.tx-option:hover .tx-option__body {
		border-color: var(--c-teal-300);
	}
}

.wz-option__input:checked + .tx-garment__body,
.wz-option__input:checked + .tx-colour__body,
.wz-option__input:checked + .tx-option__body {
	border-color: var(--color-secondary);
	background: var(--color-secondary-soft);
}

.wz-option__input:focus-visible + .tx-garment__body,
.wz-option__input:focus-visible + .tx-colour__body,
.wz-option__input:focus-visible + .tx-option__body {
	box-shadow: var(--focus-ring);
}

/* Textile cards */
.tx-garments {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
	gap: var(--space-3);
}

.tx-garment,
.tx-colour,
.tx-option {
	position: relative;
	display: flex;
	min-width: 0;
}

.tx-option[hidden] {
	display: none; /* A position not offered for this textile («Front gross» on the polo). */
}

.tx-garment,
.tx-colour,
label.tx-option {
	cursor: pointer;
}

.tx-garment__body {
	display: grid;
	flex: 1;
	align-content: start;
	gap: 2px;
	padding: var(--space-2) var(--space-2) var(--space-3);
}

.tx-garment__img {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	margin-bottom: var(--space-2);
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: var(--color-surface-sunk);
}

.tx-garment__img img {
	width: 88%;
	height: 88%;
	object-fit: contain;
}

.tx-garment__name {
	padding: 0 var(--space-1);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
}

.tx-garment__price {
	padding: 0 var(--space-1);
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	white-space: nowrap; /* "ab CHF 11.99 / Stk." on one line */
}

.wz-option__input:checked + .tx-garment__body .tx-garment__price,
.wz-option__input:checked + .tx-colour__body .tx-colour__extra,
.wz-option__input:checked + .tx-option__body .tx-option__extra {
	color: var(--color-secondary);
}

/* Colours: equal tiles, two per row when there is room */
.tx-colours {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-3);
}

@container tx-panels (min-width: 24rem) {
	.tx-colours {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.tx-colour[hidden] {
	display: none;
}

.tx-colour__body {
	display: flex;
	flex: 1;
	align-items: center;
	gap: var(--space-3);
	min-height: 3.75rem;
	padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
}

.tx-colour__swatch {
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--radius-pill);
	background: var(--swatch);
	box-shadow: inset 0 0 0 1px rgb(20 33 32 / 0.18);
	transition: box-shadow var(--dur-fast) var(--ease-out);
}

.wz-option__input:checked + .tx-colour__body .tx-colour__swatch {
	box-shadow:
		inset 0 0 0 1px rgb(20 33 32 / 0.18),
		0 0 0 3px var(--color-surface),
		0 0 0 5px var(--color-secondary);
}

.tx-colour__text {
	display: grid;
	min-width: 0;
	line-height: var(--lh-snug);
}

.tx-colour__name {
	font-weight: var(--fw-bold);
	overflow-wrap: anywhere;
}

.tx-colour__extra {
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	white-space: nowrap;
}

/* Options: tiles with a dot (Qualität) or a list with check boxes (Druckpositionen) */
.tx-options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: var(--space-3);
}

.tx-options--list {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-2);
}

.tx-option__body {
	display: grid;
	flex: 1;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"text mark"
		"extra extra";
	gap: var(--space-1) var(--space-3);
	padding: var(--space-4);
}

.tx-options--list .tx-option__body {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-height: 3.75rem;
	padding: var(--space-2) var(--space-4);
}

.tx-option__mark {
	display: grid;
	flex: none;
	grid-area: mark;
	place-items: center;
	width: 1.25rem;
	height: 1.25rem;
	border: var(--control-border) solid var(--color-border-strong);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	color: transparent;
	transition: all var(--dur-fast) var(--ease-out);
}

.tx-options--list .tx-option__mark {
	border-radius: var(--radius-xs);
}

.tx-option__mark .icon {
	--icon-size: 0.875rem;
	stroke-width: 3;
}

.wz-option__input:checked + .tx-option__body .tx-option__mark {
	border-color: var(--color-secondary);
	background: var(--color-secondary);
	box-shadow: inset 0 0 0 3px var(--color-surface);
}

.tx-options--list .wz-option__input:checked[type="checkbox"] + .tx-option__body .tx-option__mark,
.tx-option--included:not(.tx-option--radio) .tx-option__mark {
	border-color: var(--color-secondary);
	background: var(--color-secondary);
	color: var(--c-white);
	box-shadow: none;
}

.tx-option__text {
	display: grid;
	grid-area: text;
	flex: 1;
	min-width: 0;
	line-height: var(--lh-snug);
}

.tx-option__label {
	font-weight: var(--fw-bold);
	overflow-wrap: anywhere;
}

.tx-option__note {
	margin-top: 2px;
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.tx-option__extra {
	grid-area: extra;
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	color: var(--color-text-muted);
	white-space: nowrap;
}

.tx-options--list .tx-option__extra {
	margin-left: auto;
	font-size: var(--fs-sm);
}

.tx-option--included:not(.tx-option--radio) .tx-option__body {
	border-color: var(--color-border);
	background: var(--color-surface-sunk);
}

.tx-option__extra.is-included {
	color: var(--color-secondary);
}

@media (max-width: 479px) {
	.tx-options--list .tx-option__body {
		flex-wrap: wrap;
		padding-block: var(--space-3);
	}

	/* The text takes the row; the price goes below it. */
	.tx-options--list .tx-option__text {
		flex-basis: calc(100% - 1.25rem - var(--space-3));
	}

	.tx-options--list .tx-option__extra {
		margin-left: calc(1.25rem + var(--space-3));
	}
}

/* Sizes: − / number / + per size, two per row, the total as the last tile */
.tx-sizes {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-2) var(--space-3);
}

/* Two sizes per row when there is room (a row needs about 12.5rem) */
@container tx-panels (min-width: 26rem) {
	.tx-sizes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.tx-size {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 3.5rem;
	padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	transition:
		border-color var(--dur-fast) var(--ease-out),
		background-color var(--dur-fast) var(--ease-out);
}

.tx-size.has-qty {
	border-color: var(--c-teal-300);
	background: var(--color-secondary-soft);
}

.tx-size__label {
	flex: 1;
	font-weight: var(--fw-bold);
	color: var(--color-text-muted);
}

.tx-size.has-qty .tx-size__label {
	color: var(--color-heading);
}

.tx-size__btn {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--color-surface-sunk);
	color: var(--color-heading);
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease-out);
}

.tx-size.has-qty .tx-size__btn {
	background: var(--color-surface);
}

@media (hover: hover) {
	.tx-size__btn:hover {
		background: var(--color-border);
	}
}

.tx-size__btn:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.tx-size__btn .icon {
	--icon-size: 1rem;
}

.tx-size__input {
	width: 3rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	color: var(--color-text-muted);
	font: inherit;
	font-weight: var(--fw-bold);
	font-variant-numeric: tabular-nums;
	text-align: center;
	appearance: textfield;
}

.tx-size__input::-webkit-inner-spin-button,
.tx-size__input::-webkit-outer-spin-button {
	margin: 0;
	appearance: none;
}

.tx-size.has-qty .tx-size__input {
	border-color: var(--c-teal-300);
	color: var(--color-heading);
}

.tx-size__input:focus {
	border-color: var(--color-secondary);
	outline: none;
	box-shadow: var(--focus-ring);
}

.tx-sizes__total {
	display: grid;
	align-content: center;
	min-height: 3.5rem;
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-md);
	background: var(--c-gray-850);
	color: var(--color-on-dark);
	line-height: var(--lh-snug);
}

.tx-sizes__total span {
	font-size: var(--fs-xs);
	color: var(--color-on-dark-muted);
}

.tx-sizes__total strong {
	font-variant-numeric: tabular-nums;
}

.tx-qty {
	margin: var(--space-3) 0 0;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--color-secondary);
}

.tx-seg {
	margin-top: var(--space-2);
}

/* Quantity discount: full width of the card, below preview and sizes */
.tx-discount {
	margin-top: var(--space-6);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border);
}

.tx-discount[hidden] {
	display: none;
}

.tx-discount__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-1) var(--space-4);
	margin-bottom: var(--space-4);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.tx-discount__title {
	font-weight: var(--fw-semibold);
}

.tx-discount__track {
	position: relative;
	height: 4px;
	margin: 0 4px;
	border-radius: var(--radius-pill);
	background: var(--color-border);
}

.tx-discount__fill {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 0;
	border-radius: var(--radius-pill);
	background: var(--c-teal-300);
	transition: width var(--dur-base) var(--ease-out);
}

.tx-discount__tiers {
	position: relative;
	height: 2.5rem;
	margin: var(--space-3) 4px 0;
	padding: 0;
	list-style: none;
}

.tx-discount__tier {
	position: absolute;
	top: 0;
	left: var(--at);
	display: grid;
	justify-items: center;
	font-size: var(--fs-xs);
	line-height: var(--lh-snug);
	text-align: center;
	white-space: nowrap;
	transform: translateX(-50%);
}

.tx-discount__tier:first-child {
	justify-items: start;
	text-align: left;
	transform: none;
}

.tx-discount__tier:last-child {
	justify-items: end;
	text-align: right;
	transform: translateX(-100%);
}

/* Dot on the line above each level */
.tx-discount__tier::before {
	content: "";
	position: absolute;
	top: calc(var(--space-3) * -1 - 8px);
	left: 50%;
	width: 8px;
	height: 8px;
	margin-left: -4px;
	border-radius: var(--radius-pill);
	background: var(--color-border-strong);
	box-shadow: 0 0 0 2px var(--color-surface);
}

.tx-discount__tier:first-child::before {
	left: 0;
}

.tx-discount__tier:last-child::before {
	left: 100%;
}

.tx-discount__tier.is-reached::before {
	background: var(--c-teal-300);
}

.tx-discount__tier span {
	color: var(--color-text-muted);
}

.tx-discount__tier strong {
	font-size: var(--fs-sm);
	font-weight: var(--fw-regular);
	color: var(--color-text);
}

.tx-discount__tier.is-active strong {
	font-weight: var(--fw-semibold);
	color: var(--color-secondary);
}

@media (max-width: 599px) {
	/* Phones: the levels as a small table, the line stays on top. */
	.tx-discount__tiers {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-3) var(--space-2);
		height: auto;
	}

	.tx-discount__tier,
	.tx-discount__tier:first-child,
	.tx-discount__tier:last-child {
		position: static;
		justify-items: start;
		text-align: left;
		transform: none;
	}

	.tx-discount__tier::before {
		display: none;
	}
}

/* Summary: price per piece until the sizes are chosen */
.wz-summary__total[hidden],
.tx-from[hidden] {
	display: none;
}

.tx-from {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-2) var(--space-3);
	margin-top: var(--space-1);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
}

.tx-from small {
	font-size: var(--fs-xs);
	font-weight: var(--fw-regular);
	color: var(--color-text-muted);
}

.tx-from__price {
	white-space: nowrap;
}

.tx-from__price span {
	font-weight: var(--fw-regular);
	color: var(--color-text-muted);
}

.tx-from__price strong {
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
	font-variant-numeric: tabular-nums;
}

.tx-from__note {
	flex-basis: 100%;
	margin: 0;
	font-size: var(--fs-xs);
	font-weight: var(--fw-regular);
	color: var(--color-text-muted);
}

/* Summary thumbnail: the garment in the chosen colour */
.tx-thumb {
	display: grid;
	place-items: center;
	background: var(--color-surface-sunk);
}

.tx-thumb svg {
	width: 88%;
	height: auto;
}

/* ==========================================================================
   Mug order page ("Tassen bedrucken") – the textile layout with a 3D mug
   ========================================================================== */

/* Turning mug: drawn by mug.js, dragged sideways to turn */
.mug-stage__box {
	position: relative;
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}

.mug-stage__box.is-dragging {
	cursor: grabbing;
}

.mug-stage__art {
	display: grid;
	width: 100%;
	max-width: 15rem;
	aspect-ratio: 300 / 260;
}

@container tx-card (min-width: 44rem) {
	.mug-stage__art {
		max-width: 17.5rem;
	}
}

/* Only the outer drawing: the slices inside are nested <svg>s with their own sizes. */
.mug-stage__art > svg {
	display: block;
	grid-area: 1 / 1;
	width: 100%;
	height: auto;
}

/* The real 3D mug (WebGL) fades in over the drawn one. */
.mug-stage__art > canvas {
	display: block;
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity var(--dur-slow) var(--ease-out);
}

.mug-stage__art > svg {
	transition: opacity var(--dur-slow) var(--ease-out);
}

.mug-stage__art.is-3d > canvas {
	opacity: 1;
}

.mug-stage__art.is-3d > svg {
	opacity: 0;
}

/* Hot / cold: the previous picture fading out on top (mug.js). */
.mug-stage__art > .is-ghost {
	pointer-events: none;
}

.mug-stage__hint {
	position: absolute;
	bottom: var(--space-3);
	left: 50%;
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: 0.25rem var(--space-3);
	border-radius: var(--radius-pill);
	background: rgb(255 255 255 / 0.92);
	box-shadow: var(--shadow-xs);
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	white-space: nowrap;
	pointer-events: none;
	translate: -50% 0;
	transition: opacity var(--dur-slow) var(--ease-out);
}

.mug-stage__hint .icon {
	--icon-size: 0.875rem;
}

.mug-stage__hint.is-gone {
	opacity: 0;
}

/* Keyboard: the mug turns with the arrow keys */
.mug-stage__box:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

/* «Motiv anpassen»: a closed row under the mug that opens to the motif tools */
.mug-edit {
	contain: inline-size; /* Its width comes from the column, never from its text: a long «Füllen · … · verschoben» must not widen the column (the mug would grow and jump). */
	width: 100%;
	max-width: 21rem;
	margin-inline: auto;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	interpolate-size: allow-keywords;
}

.mug-edit[hidden] {
	display: none;
}

.mug-edit::details-content {
	block-size: 0;
	overflow: clip;
	transition:
		block-size var(--dur-slow) var(--ease-in-out),
		content-visibility var(--dur-slow) allow-discrete;
}

.mug-edit[open]::details-content {
	block-size: auto;
}

.mug-edit__summary {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 2.75rem;
	padding: var(--space-2) var(--space-3);
	color: var(--color-text);
	font-size: var(--fs-sm);
	list-style: none;
	cursor: pointer;
}

.mug-edit__summary::-webkit-details-marker {
	display: none;
}

.mug-edit__icon,
.mug-edit__chevron {
	display: grid;
	flex: none;
	place-items: center;
	color: var(--color-secondary);
}

.mug-edit__icon .icon,
.mug-edit__chevron .icon {
	--icon-size: 1.125rem;
}

.mug-edit__chevron {
	color: var(--color-text-muted);
	transition: transform var(--dur-base) var(--ease-out);
}

.mug-edit[open] .mug-edit__chevron {
	transform: rotate(180deg);
}

.mug-edit__title {
	flex: none;
	font-weight: var(--fw-semibold);
}

.mug-edit__state {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
	font-variant-numeric: tabular-nums;
	text-align: right;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mug-edit__body {
	display: grid;
	gap: var(--space-3);
	padding: 0 var(--space-3) var(--space-3);
}

/* The print area: the motif can be dragged; outside the area is cut off */
.mug-edit__crop {
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
	overflow: hidden;
	border: 1px dashed var(--color-secondary);
	border-radius: var(--radius-xs);
	background-color: var(--c-white);
	background-image: conic-gradient(var(--color-surface-alt) 25%, transparent 0 50%, var(--color-surface-alt) 0 75%, transparent 0);
	background-size: 12px 12px;
	cursor: grab;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

.mug-edit__crop.is-moving {
	cursor: grabbing;
}

.mug-edit__crop:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

.mug-edit__crop canvas {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 9.5rem; /* Compact: the print area as a strip, also on phones */
}

.mug-edit__hint {
	margin: calc(var(--space-2) * -1) 0 0;
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
	text-align: center;
}

/* Einpassen | Füllen */
.mug-edit__fit {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-1);
	padding: var(--space-1);
	border-radius: var(--radius-md);
	background: var(--color-surface-alt);
}

.mug-edit__fit-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	min-height: 2.25rem;
	padding: 0 var(--space-2);
	border: 0;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	cursor: pointer;
	transition:
		background-color var(--dur-base) var(--ease-out),
		color var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out);
}

.mug-edit__fit-btn .icon {
	--icon-size: 1rem;
}

.mug-edit__fit-btn[aria-checked="true"] {
	color: var(--color-secondary);
}

/* Two files: which side is adjusted (filled, so it reads apart from Einpassen / Füllen) */
.mug-edit__sides {
	--seg-thumb: var(--color-secondary);
}

.mug-edit__sides[hidden] {
	display: none;
}

.mug-edit__sides .mug-edit__fit-btn[aria-checked="true"] {
	color: var(--c-white);
}

/* Size: − slider + value */
.mug-edit__zoom {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto 3.25rem;
	align-items: center;
	gap: var(--space-2);
}

.mug-edit__value {
	color: var(--color-text);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/* Turn, mirror, centre, reset */
.mug-edit__tools {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--space-2);
}

.mug-edit__tool {
	display: grid;
	place-items: center;
	align-content: center;
	gap: 2px;
	min-height: 2.5rem;
	padding: var(--space-1) 0;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	color: var(--color-text);
	cursor: pointer;
	transition:
		border-color var(--dur-fast) var(--ease-out),
		color var(--dur-fast) var(--ease-out);
}

.mug-edit__tool .icon {
	--icon-size: 1.125rem;
}

.mug-edit__tool-label {
	color: var(--color-text-muted);
	font-size: 0.6875rem;
	line-height: 1.1;
}

.mug-edit__tool--round {
	width: 2.25rem;
	height: 2.25rem;
	min-height: 0;
	padding: 0;
	border-radius: var(--radius-pill);
}

@media (hover: hover) {
	.mug-edit__tool:hover {
		border-color: var(--color-secondary);
		color: var(--color-secondary);
	}
}

.mug-edit__tool:active {
	transform: scale(0.96);
}

.mug-size__range {
	--fill: 100%;
	width: 100%;
	height: 1.75rem;
	margin: 0;
	background: transparent;
	cursor: pointer;
	appearance: none;
}

.mug-size__range::-webkit-slider-runnable-track {
	height: 0.375rem;
	border-radius: var(--radius-pill);
	background: linear-gradient(to right, var(--color-secondary) var(--fill), var(--color-border-strong) var(--fill));
}

.mug-size__range::-moz-range-track {
	height: 0.375rem;
	border-radius: var(--radius-pill);
	background: var(--color-border-strong);
}

.mug-size__range::-moz-range-progress {
	height: 0.375rem;
	border-radius: var(--radius-pill);
	background: var(--color-secondary);
}

.mug-size__range::-webkit-slider-thumb {
	width: 1.375rem;
	height: 1.375rem;
	margin-top: -0.5rem;
	border: 2px solid var(--color-secondary);
	border-radius: 50%;
	background: var(--color-surface);
	box-shadow: 0 2px 6px rgb(14 43 44 / 0.18);
	appearance: none;
	transition: transform var(--dur-fast) var(--ease-out);
}

.mug-size__range::-moz-range-thumb {
	width: 1.125rem;
	height: 1.125rem;
	border: 2px solid var(--color-secondary);
	border-radius: 50%;
	background: var(--color-surface);
	box-shadow: 0 2px 6px rgb(14 43 44 / 0.18);
}

.mug-size__range:active::-webkit-slider-thumb {
	transform: scale(1.12);
}

.mug-size__range:focus-visible {
	outline: 2px solid var(--color-focus, var(--color-secondary));
	outline-offset: 2px;
	border-radius: var(--radius-pill);
}

/* Zaubertasse: hot / cold, in the top corner of the picture */
.mug-heat {
	position: absolute;
	top: var(--space-2);
	right: var(--space-2);
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	height: 2.25rem;
	padding: 0 var(--space-3);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	cursor: pointer;
	transition:
		border-color var(--dur-base) var(--ease-out),
		background-color var(--dur-base) var(--ease-out),
		color var(--dur-base) var(--ease-out);
}

.mug-heat .icon {
	--icon-size: 1rem;
}

.mug-heat.is-hot {
	border-color: var(--c-magenta-500);
	background: var(--c-magenta-50);
	color: var(--c-magenta-700);
}

.mug-heat[hidden] {
	display: none;
}

/* Step 1: two mug cards side by side */
.mug-types {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mug-type__img {
	aspect-ratio: 4 / 3;
	background: var(--c-white);
}

.mug-type__img img {
	width: 92%;
	height: 92%;
	mix-blend-mode: multiply;
}

.mug-type__note {
	padding: 0 var(--space-1);
	font-size: var(--fs-xs);
	line-height: var(--lh-snug);
	color: var(--color-text-muted);
}

.mug-type .tx-garment__price {
	margin-top: var(--space-1);
}

/* Beidseitig: «Seite 1» / «Seite 2» above the two upload fields */
.mug-up__side {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--space-1);
	margin: 0 0 var(--space-2);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--color-text);
}

.mug-up__side[hidden],
.mug-up2[hidden],
.mug-up__same[hidden] {
	display: none;
}

.mug-up__same {
	font-size: var(--fs-xs);
	font-weight: var(--fw-regular);
	color: var(--color-text-muted);
}

.mug-up__same::before {
	content: "· ";
}

.mug-up2 {
	margin-top: var(--space-5);
}

/* Two classes: .ai__note sets margin: 0 further down */
.ai__note.mug-magic-note {
	margin-top: var(--space-3);
}

/* Step 2: the hand for one-sided print (same sliding switch as Standard / Express) */
.mug-side {
	margin-top: var(--space-6);
}

.mug-side[hidden] {
	display: none;
}

.wz-seg--side {
	width: 100%;
}

.wz-seg--side:has(input[value="links"]:checked) .wz-seg__thumb {
	transform: translateX(calc(100% + var(--space-1)));
}

/* Step 3: "Anzahl Tassen" and the dropdown on one row («Andere Menge …» adds a number field) */
.mug-qty__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
}

.mug-qty__label {
	flex: none;
	color: var(--color-text);
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
}

.mug-qty__fields {
	display: flex;
	flex: 0 1 18rem;
	gap: var(--space-2);
	min-width: 0;
}

.mug-qty__fields .pr-select {
	flex: 1 1 auto;
	min-width: 0;
}

.mug-qty__input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
}

/* «Andere Menge»: the number field and a small button back to the list replace the dropdown */
.mug-qty.is-other .pr-select {
	display: none;
}

.mug-qty__back {
	flex: none;
}

.mug-qty__back[hidden] {
	display: none;
}

.mug-qty__input[hidden] {
	display: none;
}

.mug-qty__text {
	margin: var(--space-2) 0 0;
	font-weight: var(--fw-semibold);
	color: var(--color-secondary);
}

/* Step 2: einseitig, beidseitig, rundum in one row */
.mug-prints {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-2);
}

.mug-prints .tx-option__body {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"text"
		"extra";
	align-content: start;
	gap: var(--space-1);
	padding: var(--space-3);
}

/* The chosen tile is marked by its colour – no extra radio circle in the small tiles */
.mug-prints .tx-option__mark {
	display: none;
}

.mug-prints .tx-option__label {
	font-size: var(--fs-sm);
}

.mug-prints .tx-option__note,
.mug-prints .tx-option__extra {
	font-size: var(--fs-xs);
	white-space: normal; /* "ohne Aufpreis" may take two lines in a narrow tile */
}

/* Remove a file: a bin */
.config-upload__remove {
	--ib-size: 2.5rem;
	flex: none;
	color: var(--color-text-muted);
}

@media (hover: hover) {
	.config-upload__remove:hover {
		border-color: var(--c-red-500, var(--color-primary));
		color: var(--c-red-500, var(--color-primary));
	}
}

.wizard--mug .tx-seg {
	margin-top: var(--space-6);
}

/* Step 4: background, print template, remarks */
.mug-bg {
	display: grid;
	gap: var(--space-3);
	margin-top: var(--space-3);
	padding: var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
}

.mug-bg[hidden],
.mug-bg [hidden] {
	display: none;
}

.mug-bg__ok,
.mug-bg__info,
.mug-bg__hint {
	display: flex;
	gap: var(--space-2);
	margin: 0;
	font-size: var(--fs-sm);
	line-height: var(--lh-snug);
	color: var(--color-text-muted);
}

.mug-bg__ok {
	align-items: center;
	font-weight: var(--fw-semibold);
	color: var(--color-secondary);
}

.mug-bg__ok .icon,
.mug-bg__info .icon,
.mug-bg__hint .icon {
	--icon-size: 1.125rem;
	flex: none;
	color: var(--color-secondary);
}

.mug-switch {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	cursor: pointer;
}

.mug-switch__text {
	display: grid;
	flex: 1;
	line-height: var(--lh-snug);
}

.mug-switch__text span {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.mug-switch__input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.mug-switch__track {
	position: relative;
	flex: none;
	width: 2.875rem;
	height: 1.75rem;
	border-radius: var(--radius-pill);
	background: var(--color-border-strong);
	transition: background-color var(--dur-base) var(--ease-out);
}

.mug-switch__track::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: calc(1.75rem - 6px);
	height: calc(1.75rem - 6px);
	border-radius: 50%;
	background: var(--c-white);
	box-shadow: var(--shadow-xs);
	transition: transform var(--dur-base) var(--ease-out);
}

.mug-switch__input:checked + .mug-switch__track {
	background: var(--color-secondary);
}

.mug-switch__input:checked + .mug-switch__track::after {
	transform: translateX(1.125rem);
}

.mug-switch__input:focus-visible + .mug-switch__track {
	box-shadow: var(--focus-ring);
}

/* The comparison already shows the original – no second preview below. */
.wizard--mug:has(.mug-bg__compare:not([hidden])) [data-file-preview] {
	display: none;
}

.mug-bg__compare {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-3);
	margin-top: var(--space-3);
}

.mug-bg__compare figure {
	margin: 0;
}

.mug-bg__compare figcaption {
	margin-top: var(--space-1);
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	text-align: center;
}

.mug-bg__pic {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	padding: var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--c-white);
}

/* Checkerboard: shows what became transparent */
.mug-bg__pic.is-cut {
	background: conic-gradient(var(--color-surface-sunk) 25%, var(--c-white) 0 50%, var(--color-surface-sunk) 0 75%, var(--c-white) 0) 0 0 / 1rem 1rem;
}

.mug-bg__pic img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.mug-bg__hint {
	grid-column: 1 / -1;
}

.mug-template {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin: var(--space-3) 0 0;
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.mug-template .icon {
	--icon-size: 1rem;
	color: var(--color-secondary);
}

.mug-template a {
	font-weight: var(--fw-semibold);
}

/* Remarks: a quiet line that opens to the text field */
.mug-note {
	margin-top: var(--space-2); /* The panel's own gap already sits above. */
	border-top: 1px solid var(--color-border);
	interpolate-size: allow-keywords;
}

.mug-note::details-content {
	block-size: 0;
	overflow: clip;
	transition:
		block-size var(--dur-slow) var(--ease-in-out),
		content-visibility var(--dur-slow) allow-discrete;
}

.mug-note[open]::details-content {
	block-size: auto;
}

.mug-note__summary {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-4) 0;
	color: var(--color-text);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	list-style: none;
	cursor: pointer;
}

.mug-note__summary::-webkit-details-marker {
	display: none;
}

.mug-note__toggle {
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	flex: none;
	border-radius: var(--radius-pill);
	background: var(--color-secondary-soft);
	color: var(--color-secondary);
	transition: transform var(--dur-base) var(--ease-out);
}

.mug-note__toggle .icon {
	--icon-size: 0.875rem;
}

.mug-note[open] .mug-note__toggle {
	transform: rotate(45deg);
}

.mug-note__field {
	padding-bottom: var(--space-2);
}

.mug-note textarea {
	min-height: 5rem;
	resize: vertical;
}

.mug-note__opt {
	font-weight: var(--fw-regular);
	color: var(--color-text-muted);
}

/* ==========================================================================
   KI-Gestaltung (Druckdaten step: "Datei hochladen | Mit KI gestalten")
   ========================================================================== */

/* Tabs above the upload */
.ai-switch {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-1);
	margin-bottom: var(--space-5);
	padding: var(--space-1);
	border-radius: var(--radius-md);
	background: var(--color-surface-sunk);
}

.ai-switch[hidden],
.ai[hidden],
.wz-upload__pane[hidden] {
	display: none;
}

.ai-switch__tab {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: 2.75rem;
	padding: 0 var(--space-3);
	border: 0;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--color-text-muted);
	font-size: var(--fs-base);
	font-weight: var(--fw-semibold);
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
	.ai-switch__tab:hover {
		color: var(--color-text);
	}
}

.ai-switch__tab[aria-selected="true"] {
	color: var(--color-secondary);
}

.ai-switch__tab .icon {
	width: 1.125rem;
	height: 1.125rem;
}

/* The panel */
.ai {
	container: ai / inline-size;
	display: grid;
	gap: var(--space-5);
}

/* Segmented buttons (orientation, sides, input mode) */
.ai-seg {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: var(--space-1);
	padding: var(--space-1);
	border-radius: var(--radius-md);
	background: var(--color-surface-sunk);
}

.ai-seg[hidden] {
	display: none;
}

.ai-seg__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: 2.375rem;
	padding: 0 var(--space-3);
	border: 0;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	white-space: nowrap;
	cursor: pointer;
}

@media (hover: hover) {
	.ai-seg__item:hover {
		color: var(--color-text);
	}
}

.ai-seg__item[aria-checked="true"],
.ai-seg__item[aria-selected="true"] {
	color: var(--color-secondary);
}

.ai-seg__shape {
	flex: none;
	border: 1.5px solid currentColor;
	border-radius: 2px;
}

.ai-seg__shape--hoch {
	width: 0.75rem;
	height: 1rem;
}

.ai-seg__shape--quer {
	width: 1rem;
	height: 0.75rem;
}

/* Format line */
.ai__format {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3) var(--space-4);
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

.ai__format-text {
	display: grid;
	gap: 2px;
	min-width: 0;
	line-height: var(--lh-snug);
}

.ai__format-text strong {
	font-size: var(--fs-base);
}

.ai__format-text span {
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
}

/* Credits */
.ai__credits {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3) var(--space-4);
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--c-teal-100);
	border-radius: var(--radius-md);
	background: var(--color-secondary-soft);
}

.ai__credits-icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--radius-sm);
	background: var(--color-secondary);
	color: var(--color-on-secondary);
}

.ai__credits-body {
	flex: 1 1 14rem;
	min-width: 0;
}

.ai__credits-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
	margin: 0 0 var(--space-2);
	font-size: var(--fs-sm);
}

.ai__credits-head span {
	color: var(--color-secondary);
	font-weight: var(--fw-bold);
	font-variant-numeric: tabular-nums;
}

.ai__meter {
	height: 0.5rem;
	overflow: hidden;
	border-radius: var(--radius-pill);
	background: var(--c-teal-100);
}

.ai__meter span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--color-secondary);
	transition: width var(--dur-slow) var(--ease-out);
}

.ai[data-credits="low"] .ai__meter span,
.ai[data-credits="low"] .ai__credits-head span {
	background-color: #B7791F;
	color: #8A5A12;
}

.ai[data-credits="low"] .ai__credits-head span,
.ai[data-credits="empty"] .ai__credits-head span {
	background: none;
}

.ai[data-credits="empty"] .ai__credits-head span {
	color: var(--color-error);
}

.ai__credits-sub {
	margin: var(--space-2) 0 0;
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
	line-height: var(--lh-snug);
}

.ai__buy {
	flex: none;
	white-space: nowrap;
}

/* Two columns: preview left, form right (when there is room) */
.ai__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-6);
	align-items: start;
}

@container ai (min-width: 46rem) {
	.ai__grid {
		grid-template-columns: minmax(15rem, 19.5rem) minmax(0, 1fr);
		gap: var(--space-8);
	}

	.ai__stage-col {
		position: sticky;
		top: calc(var(--header-h, 4.5rem) + var(--space-4));
	}
}

.ai__stage-col,
.ai__form-col {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-4);
	min-width: 0;
}

.ai__form-col {
	gap: var(--space-6);
}

/* Stage */
.ai__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	padding: var(--space-4);
	border-radius: var(--radius-lg);
	background: var(--color-surface-alt);
}

.ai__stage.is-busy {
	min-height: 18rem;
}

.ai__stage.is-pair {
	align-items: start;
}

.ai__stage.is-pair.is-wide {
	flex-direction: column;
	align-items: stretch;
}

.ai-page {
	display: grid;
	gap: var(--space-2);
	width: 100%;
	margin: 0;
}

.ai__stage.is-pair:not(.is-wide) .ai-page {
	width: calc(50% - var(--space-2));
}

.ai-page__sheet,
.ai-page__ref {
	position: relative;
	overflow: hidden;
	background: var(--color-surface);
	box-shadow: 0 10px 24px rgb(14 43 44 / 0.16);
}

.ai-page__sheet img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ai-page__sheet.is-fit .ai-page__trim {
	object-fit: contain;
}

/* A template is a final-size design: it sits exactly in the Endformat (box set by ai.js) … */
/* … and a soft copy of it fills the bleed around (only shows in the 3 mm band). */
.ai-page__sheet .ai-page__fill {
	filter: blur(6px) saturate(1.1);
	transform: scale(1.06);
}

.ai-page__ref img {
	display: block;
	width: 100%;
	height: auto;
}

.ai-page figcaption {
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	text-align: center;
}

.ai-guides {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.ai-guides rect,
.ai-guides path {
	vector-effect: non-scaling-stroke;
}

.ai-guides__bleed {
	fill: rgb(230 0 126 / 0.16);
}

.ai-guides__edge {
	fill: none;
	stroke: var(--c-magenta-500);
	stroke-width: 1.5;
	stroke-dasharray: 5 4;
}

.ai-guides__trim {
	fill: none;
	stroke: var(--color-text);
	stroke-width: 1.25;
}

/* White edge under the crop marks: visible on dark and light designs */
.ai-guides__trim-halo {
	fill: none;
	stroke: var(--c-white);
	stroke-width: 3.25;
}

.ai-guides__safe {
	fill: none;
	stroke: var(--c-cyan-500);
	stroke-width: 1.5;
	stroke-dasharray: 5 4;
}

/* Busy */
.ai-busy {
	display: grid;
	justify-items: center;
	gap: var(--space-2);
	max-width: 16rem;
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
	text-align: center;
}

.ai-busy strong {
	color: var(--color-secondary);
	font-size: var(--fs-sm);
}

.ai-busy__spin {
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: var(--space-2);
	border: 3px solid var(--c-teal-100);
	border-top-color: var(--color-secondary);
	border-radius: 50%;
	animation: ai-spin 0.9s linear infinite;
}

.ai-busy__time {
	font-variant-numeric: tabular-nums;
}

@keyframes ai-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ai-busy__spin {
		animation-duration: 3s;
	}
}

/* Legend + guide switch */
.ai__legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2) var(--space-3);
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
}

.ai__legend-items {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-3);
}

.ai__legend-items > span:not([hidden]) {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

.ai__line {
	width: 0.875rem;
	border-top: 2px dashed var(--c-magenta-500);
}

/* Endformat: a crop mark (corner), not a line – the print has no border */
.ai__line--trim {
	width: 0.625rem;
	height: 0.625rem;
	border-top: 1.5px solid var(--color-text);
	border-left: 1.5px solid var(--color-text);
	transform: translate(0.125rem, 0.25rem);
}

.ai__line--safe {
	border-top-color: var(--c-cyan-500);
}

.ai__toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-text);
	font-weight: var(--fw-semibold);
	cursor: pointer;
}

.ai__toggle input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.ai__toggle-track {
	position: relative;
	width: 2.25rem;
	height: 1.375rem;
	border-radius: var(--radius-pill);
	background: var(--color-border-strong);
	transition: background-color var(--dur-fast) var(--ease-out);
}

.ai__toggle-track::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: var(--c-white);
	box-shadow: var(--shadow-xs);
	transition: transform var(--dur-fast) var(--ease-out);
}

.ai__toggle input:checked + .ai__toggle-track {
	background: var(--color-secondary);
}

.ai__toggle input:checked + .ai__toggle-track::after {
	transform: translateX(0.875rem);
}

.ai__toggle input:focus-visible + .ai__toggle-track {
	box-shadow: var(--focus-ring);
}

.ai__trim {
	margin: calc(var(--space-2) * -1) 0 0;
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
}

.ai__note,
.ai__privacy {
	display: flex;
	gap: var(--space-2);
	margin: 0;
	font-size: var(--fs-xs);
	line-height: 1.45;
}

.ai__note {
	padding: var(--space-3);
	border-radius: var(--radius-sm);
	background: var(--color-secondary-soft);
	color: var(--color-secondary);
}

.ai__note[hidden] {
	display: none;
}

.ai__privacy {
	margin-top: var(--space-3);
	color: var(--color-text-muted);
}

.ai__note .icon,
.ai__privacy .icon {
	flex: none;
	width: 1rem;
	height: 1rem;
	margin-top: 1px;
	color: var(--color-secondary);
}

/* Change by command + versions */
.ai__edit {
	display: grid;
	gap: var(--space-3);
	padding: var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
}

.ai__edit[hidden] {
	display: none;
}

.ai__edit-label {
	font-size: var(--fs-base);
	font-weight: var(--fw-semibold);
}

.ai__edit-label span {
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
}

.ai__cmd {
	display: flex;
	gap: var(--space-2);
}

.ai__cmd .input {
	flex: 1;
	min-width: 0;
}

.ai__send {
	flex: none;
	width: var(--control-h);
	padding: 0;
}

.ai__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.ai__chip {
	min-height: 2rem;
	padding: 0 var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background: var(--color-surface-alt);
	color: var(--color-text);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	cursor: pointer;
}

@media (hover: hover) {
	.ai__chip:hover {
		border-color: var(--color-secondary);
		color: var(--color-secondary);
	}
}

.ai__chip:disabled,
.ai__send:disabled {
	opacity: 0.5;
	cursor: wait;
}

.ai__versions-title {
	margin: var(--space-2) 0 0;
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
}

.ai__versions-title span {
	font-weight: var(--fw-medium);
}

.ai__versions {
	display: grid;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ai-version {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	width: 100%;
	padding: var(--space-2) var(--space-3);
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--color-text);
	font-size: var(--fs-xs);
	text-align: left;
	cursor: pointer;
}

@media (hover: hover) {
	.ai-version:hover {
		background: var(--color-surface-alt);
	}
}

.ai-version.is-current {
	border-color: var(--color-secondary);
	background: var(--color-secondary-soft);
}

.ai-version strong {
	flex: none;
	width: 1.75rem;
	color: var(--color-text-muted);
}

.ai-version.is-current strong {
	color: var(--color-secondary);
}

.ai-version span {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ai-version time {
	flex: none;
	color: var(--color-text-muted);
	font-variant-numeric: tabular-nums;
}

/* Form blocks */
.ai__block {
	display: grid;
	gap: var(--space-3);
	min-width: 0;
}

.ai__block[hidden] {
	display: none;
}

.ai__block-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
}

.ai__title {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
}

.ai__num {
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--color-secondary-soft);
	color: var(--color-secondary);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
}

.ai__lead {
	margin: calc(var(--space-2) * -1) 0 0;
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}

.ai__arrows {
	display: flex;
	gap: var(--space-2);
}

.ai__arrow {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--color-border-strong);
	border-radius: 50%;
	background: var(--color-surface);
	color: var(--color-text);
	cursor: pointer;
}

@media (hover: hover) {
	.ai__arrow:hover:not(:disabled) {
		border-color: var(--color-secondary);
		color: var(--color-secondary);
	}
}

.ai__arrow .icon {
	width: 1.125rem;
	height: 1.125rem;
}

/* Reference carousel: 2 designs in full, a fifth of the next one fades out to show there is more.
   The chosen design scrolls to the middle (ai.js); the first stays left, the last right. */
.ai__track {
	--ai-fade: 3.5rem;
	--fade-l: 0px;
	--fade-r: 0px;
	display: grid;
	grid-auto-columns: calc((100% - var(--space-3) * 2) / 2.2);
	grid-auto-flow: column;
	gap: var(--space-3);
	padding: var(--space-2) 4px; /* the outline of the chosen design is never cut */
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	/* Light fade on the side with more designs (the edge stays visible at 30 %); it slides in and out. */
	--fade-mask: linear-gradient(
		90deg,
		rgb(0 0 0 / 0.3) 0,
		rgb(0 0 0 / 0.5) calc(var(--fade-l) * 0.3),
		rgb(0 0 0 / 0.75) calc(var(--fade-l) * 0.6),
		rgb(0 0 0 / 0.92) calc(var(--fade-l) * 0.85),
		rgb(0 0 0) var(--fade-l),
		rgb(0 0 0) calc(100% - var(--fade-r)),
		rgb(0 0 0 / 0.92) calc(100% - var(--fade-r) * 0.85),
		rgb(0 0 0 / 0.75) calc(100% - var(--fade-r) * 0.6),
		rgb(0 0 0 / 0.5) calc(100% - var(--fade-r) * 0.3),
		rgb(0 0 0 / 0.3) 100%
	);
	-webkit-mask-image: var(--fade-mask);
	mask-image: var(--fade-mask);
	transition:
		--fade-l var(--dur-slow) var(--ease-out),
		--fade-r var(--dur-slow) var(--ease-out);
}

@property --fade-l {
	syntax: "<length>";
	inherits: true;
	initial-value: 0px;
}

@property --fade-r {
	syntax: "<length>";
	inherits: true;
	initial-value: 0px;
}

.ai__track::-webkit-scrollbar {
	display: none;
}

.ai__track.has-before {
	--fade-l: var(--ai-fade);
}

.ai__track.has-after {
	--fade-r: var(--ai-fade);
}

/* Narrow and wide designs: one in full and a part of the next. */
@container ai (max-width: 30rem) {
	.ai__track {
		--ai-fade: 2.5rem;
	}

	.ai.is-wide .ai__track {
		grid-auto-columns: calc((100% - var(--space-3)) / 1.25);
	}
}

.ai-ref {
	position: relative;
	scroll-snap-align: center;
}

.ai__arrow:disabled {
	border-color: var(--color-border);
	color: var(--color-text-subtle);
	cursor: default;
}

.ai-ref__pick {
	display: grid;
	gap: var(--space-2);
	width: 100%;
	height: 100%;
	padding: var(--space-2) var(--space-2) var(--space-3);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	color: var(--color-text);
	text-align: left;
	cursor: pointer;
	transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
	.ai-ref__pick:hover {
		border-color: var(--color-border-strong);
	}
}

.ai-ref__pick[aria-checked="true"] {
	border-color: var(--color-secondary);
	background: var(--color-secondary-soft);
}

.ai-ref__img {
	display: block;
	aspect-ratio: var(--ai-ref-ratio, 2 / 3);
	transition: aspect-ratio var(--dur-slow) var(--ease-in-out); /* upright ↔ wide designs */
	overflow: hidden;
	border-radius: var(--radius-xs);
	background: var(--color-surface-alt);
}

.ai-ref__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Only a picture of the other orientation exists: shown whole instead of cut. */
.ai-ref__img.is-fit img {
	object-fit: contain;
}

.ai-ref__text {
	display: grid;
	gap: 2px;
	padding: 0 var(--space-1);
	line-height: var(--lh-snug);
}

.ai-ref__text strong {
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
}

.ai-ref__text span {
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
}

.ai-ref__check {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	display: none;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--color-secondary);
	box-shadow: 0 0 0 2px var(--c-white);
	color: var(--c-white);
	pointer-events: none;
}

.ai-ref__pick[aria-checked="true"] + .ai-ref__check {
	display: grid;
}

.ai-ref__check .icon {
	width: 0.875rem;
	height: 0.875rem;
	stroke-width: 3;
}

.ai-ref__zoom {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.94);
	box-shadow: 0 1px 4px rgb(14 43 44 / 0.25);
	color: var(--color-text);
	cursor: pointer;
}

@media (hover: hover) {
	.ai-ref__zoom:hover {
		color: var(--color-secondary);
	}
}

.ai-ref__zoom .icon {
	width: 1rem;
	height: 1rem;
}

/* Content fields */
.ai__fields {
	display: grid;
	gap: var(--space-4);
}

.ai__fields[hidden],
.ai__fields [hidden] {
	display: none;
}

/* Two short fields side by side (business card: Name | Funktion …) */
.ai__pair {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-4);
}

@container ai (min-width: 28rem) {
	.ai__pair {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.ai__pill {
	justify-self: start;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill);
	background: var(--color-secondary-soft);
	color: var(--color-secondary);
	font-size: 0.75rem;
	font-weight: var(--fw-bold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ai__back {
	display: grid;
	gap: var(--space-4);
	padding-top: var(--space-4);
	border-top: 1px dashed var(--color-border-strong);
}

.ai__hint-inline {
	color: var(--color-text-muted);
	font-weight: var(--fw-regular);
}

.ai__textarea {
	padding-block: var(--space-3);
	line-height: 1.5;
	resize: vertical;
}

.ai__hint {
	margin: calc(var(--space-2) * -1) 0 0;
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
}

.ai__label {
	margin: var(--space-2) 0 0;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
}

.ai__label span {
	color: var(--color-text-muted);
	font-weight: var(--fw-regular);
}

/* Logo */
.ai-logo__drop {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	border: 1.5px dashed var(--color-border-strong);
	border-radius: var(--radius-md);
	background: var(--color-surface-alt);
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	cursor: pointer;
}

@media (hover: hover) {
	.ai-logo__drop:hover {
		border-color: var(--color-secondary);
		background: var(--color-secondary-soft);
	}
}

.ai-logo__drop:has(input:focus-visible) {
	box-shadow: var(--focus-ring);
}

.ai-logo__drop.is-busy {
	opacity: 0.6;
	cursor: wait;
}

.ai-logo__drop[hidden],
.ai-logo__file[hidden] {
	display: none;
}

.ai-logo__drop strong {
	color: var(--color-secondary);
}

.ai-logo__drop .icon {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	color: var(--color-secondary);
}

.ai-logo__input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

.ai-logo__file {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--c-teal-100);
	border-radius: var(--radius-md);
	background: var(--color-secondary-soft);
}

.ai-logo__thumb {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xs);
	background: var(--color-surface);
}

.ai-logo__thumb img {
	max-width: 85%;
	max-height: 85%;
}

/* Photo (mugs): fills its little frame. */
.ai-photo__thumb {
	overflow: hidden;
}

.ai-photo__thumb img {
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	object-fit: cover;
}

.ai-logo__name {
	display: grid;
	flex: 1;
	min-width: 0;
	font-size: var(--fs-xs);
	line-height: var(--lh-snug);
}

.ai-logo__name strong {
	overflow: hidden;
	font-size: var(--fs-sm);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ai-logo__name span {
	color: var(--color-secondary);
}

/* Generate */
.ai__go {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.ai__generate {
	flex-wrap: wrap;
	min-height: 3.25rem;
	white-space: normal;
}

.ai__generate[hidden] {
	display: none;
}

.ai__cost {
	padding: 2px var(--space-2);
	border-radius: var(--radius-pill);
	background: rgb(255 255 255 / 0.18);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
}

.ai__empty {
	display: grid;
	gap: var(--space-2);
	padding: var(--space-4);
	border: 1px solid #F3D9A4;
	border-radius: var(--radius-md);
	background: #FFF8E8;
	font-size: var(--fs-sm);
}

.ai__empty[hidden],
.ai__unavailable[hidden],
.ai__error[hidden] {
	display: none;
}

.ai__empty p {
	margin: 0;
}

.ai__empty-title {
	font-weight: var(--fw-bold);
}

.ai__small {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
	line-height: 1.45;
}

.ai__unavailable,
.ai__error {
	margin: var(--space-3) 0 0;
	padding: var(--space-3);
	border-radius: var(--radius-sm);
	background: var(--color-primary-soft);
	color: var(--color-error);
	font-size: var(--fs-sm);
}

/* Take over */
.ai__use {
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border);
}

.ai__check {
	align-items: flex-start;
	margin: 0;
	padding: var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	line-height: 1.45;
}

.ai__check:has(input:checked) {
	border-color: var(--c-teal-100);
	background: var(--color-secondary-soft);
}

.ai__check input {
	flex: none;
	margin-top: 2px;
}

.ai__take[aria-disabled="true"] {
	opacity: 0.55;
	box-shadow: none;
	cursor: not-allowed;
}

.ai__take.is-done {
	background: var(--color-success);
	opacity: 1;
	cursor: default;
}

.ai.is-busy .ai__generate,
.ai.is-busy .ai-version {
	cursor: wait;
}

/* Large view of a reference */
.ai-lightbox {
	width: min(100% - 2rem, 70rem);
	max-width: none;
	max-height: none;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
}

.ai-lightbox::backdrop {
	background: rgb(14 43 44 / 0.78);
}

.ai-lightbox__inner {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-4);
}

.ai-lightbox__figure {
	display: grid;
	justify-items: center;
	gap: var(--space-4);
	margin: 0;
}

.ai-lightbox__figure img {
	display: block;
	max-width: 100%;
	max-height: 72vh;
	border-radius: var(--radius-xs);
	box-shadow: var(--shadow-lg);
}

.ai-lightbox__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-3) var(--space-5);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	background: var(--color-surface);
}

.ai-lightbox__text {
	display: grid;
	gap: 2px;
	max-width: 30rem;
	line-height: var(--lh-snug);
}

.ai-lightbox__text span {
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}

.ai-lightbox__bar .btn.is-done {
	background: var(--color-success);
}

.ai-lightbox__nav,
.ai-lightbox__close {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border: 0;
	border-radius: 50%;
	background: var(--color-surface);
	color: var(--color-text);
	cursor: pointer;
}

.ai-lightbox__close {
	position: absolute;
	top: calc(var(--space-12) * -1);
	right: 0;
	width: 2.75rem;
	height: 2.75rem;
}

@media (max-width: 639px) {
	.ai-lightbox__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.ai-lightbox__figure {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.ai-lightbox__nav {
		justify-self: center;
	}

	.ai-lightbox__figure img {
		max-height: 58vh;
	}
}

/* KI-Guthaben line in cart and checkout */
.cart-item__icon {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: var(--radius-sm);
	background: var(--color-secondary);
	color: var(--color-on-secondary);
}

.cart-item__icon .icon {
	width: 1.5rem;
	height: 1.5rem;
}

/* KI-Gestaltung on narrow screens */
@media (max-width: 479px) {
	.ai-switch__tab {
		gap: var(--space-1);
		padding: 0 var(--space-2);
		font-size: var(--fs-sm);
	}
}

@container ai (max-width: 46rem) {
	/* One column: the preview stays a comfortable size, not the full width. */
	.ai__stage:not(.is-pair):not(.is-wide) .ai-page {
		max-width: 17rem;
	}
}

/* ==========================================================================
   Motion – nothing jumps. Every duration is a token, so "reduce motion"
   (tokens.css / base.css) turns all of this into instant changes.
   Texts that change (prices, sizes, step values) fade in from the scripts;
   blocks that appear (lose "hidden") fade up from main.js.
   ========================================================================== */
@keyframes pr-step-next {
	from {
		opacity: 0;
		translate: 2rem 0;
	}
}

@keyframes pr-step-back {
	from {
		opacity: 0;
		translate: -2rem 0;
	}
}

@keyframes pr-pop {
	from {
		opacity: 0;
		scale: 0.4;
	}
}

/* A new step slides in from the side it comes from (the card glides to its new height).
   The card clips sideways so the slide never widens the page on phones. */
.wizard.is-js .wz-card {
	overflow-x: clip;
	overflow-clip-margin: var(--space-2); /* focus rings near the edge stay visible */
}

/* The new step comes in just after the old one has started to leave (configurator.js). */
.wizard.is-js .wz-panel.is-active {
	animation: pr-step-next var(--dur-slow) var(--ease-out) calc(var(--dur-slow) * 0.3) backwards;
}

.wizard.is-js[data-dir="back"] .wz-panel.is-active {
	animation-name: pr-step-back;
}

/* Prices roll to their new value (configurator.js): equal-width digits, so nothing wobbles,
   and an amount never breaks in the middle while it counts. */
.wz-seg__price,
.wz-option__extra,
.wz-summary__meta,
.config-sizes__total,
.tx-discount__tier strong {
	font-variant-numeric: tabular-nums;
}

.wz-summary__meta > span,
.wz-qty__total,
.wz-qty__unit,
.wz-seg__price {
	white-space: nowrap;
}

/* Long values ("Gestaltung durch uns") break into even lines, not one lonely word. */
.wz-summary__val {
	text-wrap: balance;
}

/* The tick on the chosen design pops in. */
.ai-ref__pick[aria-checked="true"] + .ai-ref__check {
	animation: pr-pop var(--dur-base) var(--ease-spring);
}

/* Segmented controls of the KI-Gestaltung: a white thumb slides to the choice
   (2 or 3 options, the position comes from the chosen one). */
.ai-switch,
.ai-seg {
	--n: 2;
	--i: 0;
	position: relative;
	isolation: isolate;
}

.ai-seg:has(> :nth-child(3)) {
	--n: 3;
}

.ai-switch:has(> :nth-child(2)[aria-selected="true"]),
.ai-seg:has(> :nth-child(2):is([aria-checked="true"], [aria-selected="true"])) {
	--i: 1;
}

.ai-seg:has(> :nth-child(3):is([aria-checked="true"], [aria-selected="true"])) {
	--i: 2;
}

.ai-switch::before,
.ai-seg::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: var(--space-1);
	bottom: var(--space-1);
	left: var(--space-1);
	width: calc((100% - var(--space-1) * (var(--n) + 1)) / var(--n));
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	box-shadow: var(--shadow-xs);
	transform: translateX(calc((100% + var(--space-1)) * var(--i)));
	transition: transform var(--dur-slow) var(--ease-out);
}

.ai-seg__item {
	transition: color var(--dur-base) var(--ease-out);
}

/* Print guides fade in and out. */
.ai-guides {
	transition: opacity var(--dur-base) var(--ease-out);
}

.ai__stage.no-guides .ai-guides {
	opacity: 0;
}

/* Lightbox: fades and grows in, fades out again. */
.ai-lightbox,
.ai-lightbox::backdrop {
	transition:
		opacity var(--dur-base) var(--ease-out),
		scale var(--dur-base) var(--ease-out),
		overlay var(--dur-base) allow-discrete,
		display var(--dur-base) allow-discrete;
}

.ai-lightbox,
.ai-lightbox::backdrop {
	opacity: 0;
}

.ai-lightbox {
	scale: 0.96;
}

.ai-lightbox[open],
.ai-lightbox[open]::backdrop {
	opacity: 1;
}

.ai-lightbox[open] {
	scale: 1;
}

@starting-style {
	.ai-lightbox[open],
	.ai-lightbox[open]::backdrop {
		opacity: 0;
	}

	.ai-lightbox[open] {
		scale: 0.96;
	}
}

/* Textile page: the new garment drawing lies under the old one, which fades away. */
.tx-stage__art,
.tx-thumb {
	display: grid;
}

.tx-stage__art > svg,
.tx-thumb > svg {
	grid-area: 1 / 1;
}

/* Photo of the garment (textile.js): recoloured and printed in a canvas.
   --tx-photo tells textile.js that these styles are here (else it keeps the drawing). */
.tx-stage__art {
	--tx-photo: 1;
}

.tx-stage__art > canvas,
.tx-thumb > canvas {
	display: block;
	grid-area: 1 / 1;
	width: 100%;
	height: auto;
}

.tx-thumb > canvas {
	place-self: center;
	width: 92%;
}

.tx-thumb > svg {
	place-self: center;
}

.tx-size__label,
.tx-size__input,
.tx-size__btn {
	transition:
		color var(--dur-base) var(--ease-out),
		border-color var(--dur-base) var(--ease-out),
		background-color var(--dur-base) var(--ease-out);
}

.tx-discount__tier::before,
.tx-discount__tier strong {
	transition:
		background-color var(--dur-base) var(--ease-out),
		color var(--dur-base) var(--ease-out);
}

/* ==========================================================================
   Phones: a short, calm order page – only what is needed to order
   ========================================================================== */
@media (max-width: 599px) {
	/* Head: picture and name – price and date are in the bar at the bottom */
	.product-order .breadcrumbs,
	.product-order__head .eyebrow,
	.product-order__lead,
	.product-order__facts {
		display: none;
	}

	.product-order__head {
		gap: var(--space-3);
		margin-bottom: var(--space-4);
	}

	.product-order__thumb {
		width: 3.5rem;
	}

	.product-order__title {
		font-size: var(--fs-xl);
	}

	/* Steps: number and name only */
	.wz-nav__value {
		display: none;
	}

	.wz-nav__link {
		gap: var(--space-2);
		padding: var(--space-2) var(--space-3);
	}

	/* The red bar at the bottom already shows price, date and the button */
	.wz-summary__ready,
	.wz-summary__trust,
	.wz-summary [data-submit] {
		display: none;
	}

	/* Mug page */
	.wizard--mug .tx-lead,
	.wizard--mug .tx-stage__note,
	.wizard--mug .mug-type__note,
	.wizard--mug .tx-option__note,
	.wizard--mug .mug-side .tx-group__aside,
	.wizard--mug .wz-seg--side small,
	.wizard--mug .tx-discount__tiers,
	.wizard--mug .mug-template,
	.wizard--mug .mug-bg__hint,
	.wizard--mug .ai__lead,
	.wizard--mug .ai__hint {
		display: none;
	}

	/* The mug: smaller, the controls close together */
	.wizard--mug .mug-stage {
		gap: var(--space-2);
	}

	.wizard--mug .mug-stage__box {
		padding: var(--space-2);
	}

	.wizard--mug .mug-stage__art {
		max-width: 12rem;
	}

	.wizard--mug .mug-stage__hint {
		bottom: var(--space-2);
		font-size: var(--fs-xs);
	}

	.wizard--mug .mug-edit {
		max-width: none;
	}

	.wizard--mug .mug-prints .tx-option__body {
		padding: var(--space-3) var(--space-2);
		text-align: center;
	}

	/* The motif is on the mug above – no second preview of the file */
	.wizard--mug .wz-preview {
		display: none;
	}

	/* The upload title is said by the tab "Datei hochladen" (kept for screen readers) */
	.wizard--mug #wz-upload-title {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.wizard--mug .mug-bg__compare {
		max-width: 18rem;
	}
}


/* --------------------------------------------------------------------------
   Textile 3D designer (plugin: textile-designer.js + garment-3d.js)
   --tx-3d tells the script that these styles are here (else the photo stays).
   -------------------------------------------------------------------------- */
.tx-stage__art {
	--tx-3d: 1;
}

.tx-stage__art.is-3d {
	position: relative;
	touch-action: pan-y;
	cursor: grab;
}

.tx-stage__art > .tx-stage__3d {
	animation: tx-3d-in var(--dur-slow) var(--ease-out);
}

.tx-stage__3d.is-turning {
	cursor: grabbing;
}

@keyframes tx-3d-in {
	from {
		opacity: 0;
	}
}

.txd-views {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
}

.txd-views[hidden],
.txd[hidden],
.txd__edit[hidden],
.txd__text[hidden],
.txd__warn[hidden],
.txd__empty[hidden],
.txd__zone[hidden] {
	display: none;
}

.txd-views .tx-views__btn {
	padding: 0 var(--space-3);
}

/* Zoom: two small buttons in the top right corner of the stage. */
.tx-stage__box:has(.txd-zoom) {
	position: relative;
}

.txd-zoom {
	position: absolute;
	top: var(--space-2);
	right: var(--space-2);
	display: grid;
	gap: 2px;
	padding: 2px;
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	box-shadow: var(--shadow-xs);
}

.txd-zoom[hidden] {
	display: none;
}

.txd-zoom__btn {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--color-text-muted);
	cursor: pointer;
	transition:
		background-color var(--dur-fast) var(--ease-out),
		color var(--dur-fast) var(--ease-out);
}

.txd-zoom__btn .icon {
	--icon-size: 1.125rem;
}

@media (hover: hover) {
	.txd-zoom__btn:hover {
		background: var(--color-surface-sunk);
		color: var(--color-heading);
	}
}

.txd-zoom__btn:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

/* The panel in the step «Ihr Logo» */
.txd {
	display: grid;
	gap: var(--space-3);
	margin-top: var(--space-6);
}

.txd__zones {
	border-radius: var(--radius-md);
	background: var(--color-surface-sunk);
}

.txd__zone {
	min-width: 0;
	height: 2.25rem;
	padding: 0 var(--space-2);
	border: 0;
	border-radius: var(--radius-sm);
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	white-space: nowrap;
	cursor: pointer;
}

.txd__zone[aria-selected="true"] {
	color: var(--color-heading);
}
@media (hover: hover) {
	.txd__zone:hover {
		color: var(--color-heading);
	}
}

.txd__zone:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.txd__box {
	display: grid;
	gap: var(--space-3);
	padding: var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	background: var(--color-surface);
}

.txd__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2) var(--space-3);
}

.txd__area {
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	font-variant-numeric: tabular-nums;
}

.txd__add {
	display: flex;
	gap: var(--space-2);
}

.txd__list {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.txd__list:empty {
	display: none;
}

.txd__list li {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.txd__item {
	display: flex;
	flex: 1;
	align-items: center;
	gap: var(--space-2);
	min-width: 0;
	min-height: 2.75rem;
	padding: 0 var(--space-3);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	color: var(--color-text);
	font-size: var(--fs-sm);
	text-align: left;
	cursor: pointer;
	transition:
		border-color var(--dur-fast) var(--ease-out),
		box-shadow var(--dur-fast) var(--ease-out);
}

.txd__item span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.txd__item .icon {
	--icon-size: 1.125rem;
	flex: none;
	color: var(--color-text-muted);
}

.txd__item.is-selected {
	border-color: var(--color-secondary);
	box-shadow: inset 0 0 0 1px var(--color-secondary);
}

.txd__item:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.txd__empty {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}

.txd__edit {
	display: grid;
	gap: var(--space-3);
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-border);
}

.txd__text {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 11rem);
	gap: var(--space-3);
}

.txd__text > :last-child {
	grid-column: 1 / -1;
}

.txd__field,
.txd__row {
	display: grid;
	gap: var(--space-1);
	min-width: 0;
}

.txd__label {
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
}

.txd__input {
	width: 100%;
	height: 2.75rem;
	padding: 0 var(--space-3);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	background: var(--color-field, var(--color-surface));
	color: var(--color-text);
	font: inherit;
	font-size: var(--fs-base);
}

.txd__input:focus-visible {
	outline: none;
	border-color: var(--color-secondary);
	box-shadow: var(--focus-ring);
}

.txd__colours {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.txd__swatch {
	position: relative;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 1px solid rgb(0 0 0 / 0.15);
	border-radius: var(--radius-pill);
	background: var(--swatch);
	cursor: pointer;
	transition: box-shadow var(--dur-fast) var(--ease-out);
}

.txd__swatch[aria-checked="true"] {
	box-shadow:
		0 0 0 2px var(--color-surface),
		0 0 0 4px var(--color-secondary);
}

.txd__swatch:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 2px var(--color-surface),
		var(--focus-ring);
}

.txd__swatch--own {
	overflow: hidden;
	background: conic-gradient(#e53935, #fdd835, #43a047, #1e88e5, #8e24aa, #e53935);
}

.txd__swatch--own input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.txd__swatch--own:focus-within {
	box-shadow:
		0 0 0 2px var(--color-surface),
		var(--focus-ring);
}

.txd .mug-edit__zoom {
	grid-template-columns: auto minmax(0, 1fr) auto 6.5rem;
}

.txd__value {
	white-space: nowrap;
}

.txd__warn {
	margin: 0;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	background: var(--c-yellow-50);
	color: var(--c-yellow-800);
	font-size: var(--fs-xs);
}

.txd__actions {
	display: flex;
	justify-content: space-between;
	gap: var(--space-2);
}

.txd__status {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}

.txd__status:empty {
	display: none;
}

@media (max-width: 599px) {
	.txd__text {
		grid-template-columns: minmax(0, 1fr);
	}

	.txd .mug-edit__zoom {
		grid-template-columns: auto minmax(0, 1fr) auto 5.5rem;
	}
}

/* Phones and tablets: while designing (step «Ihr Logo» with the 3D garment) the
   garment stays in view above the panel, a little smaller. (A block instead of the
   grid, so the stage may stick over the whole step.) */
@container tx-card (max-width: 43.99rem) {
	.tx-body:has(.wz-panel.is-active[data-type="files"]):has(.tx-stage__art.is-3d) {
		display: block;
	}

	.tx-body:has(.wz-panel.is-active[data-type="files"]) .tx-stage:has(.tx-stage__art.is-3d) {
		position: sticky;
		top: var(--header-h);
		z-index: 2;
		margin: 0 calc(var(--space-2) * -1) var(--space-5);
		padding: var(--space-2) var(--space-2) var(--space-3);
		background: var(--color-surface);
		box-shadow: 0 10px 12px -12px rgb(14 43 44 / 0.25);
	}

	.tx-body:has(.wz-panel.is-active[data-type="files"]) .tx-stage__art.is-3d {
		max-width: 10.5rem;
	}

	.tx-body:has(.wz-panel.is-active[data-type="files"]) .tx-stage:has(.tx-stage__art.is-3d) .tx-stage__box {
		padding: var(--space-2);
	}

	.tx-body:has(.wz-panel.is-active[data-type="files"]) .tx-stage:has(.tx-stage__art.is-3d) .tx-stage__note {
		display: none;
	}
}

/* Front: «Brust links» or «Front gross» – two round radios above the extra positions. */
.tx-option--radio .tx-option__mark {
	border-radius: var(--radius-pill);
}

.tx-options--list .wz-option__input:checked[type="radio"] + .tx-option__body .tx-option__mark {
	border-color: var(--color-secondary);
	background: var(--color-secondary);
	box-shadow: inset 0 0 0 4px var(--color-surface);
}

.tx-option--radio + .tx-option:not(.tx-option--radio) {
	margin-top: var(--space-2); /* The extra positions (back, sleeve) stand a little apart. */
}

/* Textiles: «Gleiches Logo für alle Druckpositionen» – unticked, one upload field per position. */
.tx-same {
	margin: 0 0 var(--space-3);
}

.tx-same[hidden],
.tx-up[hidden],
.tx-up__side[hidden] {
	display: none;
}

.tx-up__side {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--space-1);
	margin: 0 0 var(--space-2);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--color-text);
}

.tx-up__where {
	font-weight: var(--fw-regular);
	color: var(--color-text-muted);
}

.tx-up {
	margin-top: var(--space-5);
}

/* «Logo-Aufbereitung» right under the logo upload (and its preview). */
.wz-upload > .tx-group {
	margin-top: var(--space-5);
}

/* Textile pages: «Anderes Textil wählen» under the page title. */
.product-order__switch {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	justify-self: start;
	margin-top: var(--space-1);
	color: var(--color-link);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	text-decoration: none;
}

.product-order__switch .icon {
	--icon-size: 1rem;
}

@media (hover: hover) {
	.product-order__switch:hover span {
		text-decoration: underline;
		text-underline-offset: 0.15em;
	}
}

.product-order__switch:focus-visible {
	outline: none;
	border-radius: var(--radius-xs);
	box-shadow: var(--focus-ring);
}

/* --------------------------------------------------------------------------
   Step change (configurator.js): the old step slides out while the new one
   slides in; the finished step's check pops; phones get a progress strip and
   the order summary opens from the price bar.
   -------------------------------------------------------------------------- */
.wizard.is-js .wz-card {
	position: relative;
}

.wizard.is-js .wz-panel.is-leaving {
	position: absolute;
	display: grid;
	pointer-events: none;
}

.wz-nav__link.is-new-done .wz-nav__num::after {
	display: inline-block;
	animation: pr-pop var(--dur-slow) cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wz-nav__num {
	transition:
		background-color var(--dur-base) var(--ease-out),
		color var(--dur-base) var(--ease-out);
}

/* Progress strip: «Schritt 2 von 4 · Druckpositionen» and a bar that fills. */
.wz-progress {
	display: none;
}

@media (max-width: 1023px) {
	/* Phones and tablets: the strip with its dots is the step list; no second numbered list. */
	.wizard.is-js .wz-progress + .wz-nav {
		display: none;
	}
}

@media (max-width: 1023px) {
	.wizard.is-js .wz-progress {
		position: sticky;
		top: var(--header-h);
		z-index: var(--z-raised);
		display: grid;
		gap: var(--space-2);
		margin: 0 calc(var(--gutter) * -1) var(--space-3);
		padding: var(--space-2) var(--gutter) var(--space-3);
		background: var(--color-surface-alt);
		box-shadow: 0 1px 0 var(--color-border);
	}
}

.wz-progress__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
}

.wz-progress__count {
	flex: none;
	font-weight: var(--fw-semibold);
	font-variant-numeric: tabular-nums;
}

.wz-progress__count b {
	color: var(--color-heading);
}

.wz-progress__name {
	overflow: hidden;
	color: var(--color-heading);
	font-weight: var(--fw-bold);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wz-progress__name.is-swap {
	animation: wz-name-in var(--dur-base) var(--ease-out);
}

@keyframes wz-name-in {
	from {
		opacity: 0;
		translate: 0 6px;
	}
}

/* The line with one dot per step (first at the start, last at the end). */
.wz-progress__track {
	position: relative;
	height: 14px;
	margin-inline: 7px; /* Room for the end dots. */
}

.wz-progress__track::before,
.wz-progress__fill {
	position: absolute;
	top: 50%;
	left: 0;
	height: 4px;
	margin-top: -2px;
	border-radius: var(--radius-pill);
}

.wz-progress__track::before {
	content: "";
	right: 0;
	background: var(--color-border-strong);
}

.wz-progress__fill {
	width: 0;
	background: var(--color-secondary);
	transition: width var(--dur-slow) var(--ease-out);
}

.wz-progress__dot {
	position: absolute;
	top: 50%;
	display: grid;
	place-items: center;
	width: 2rem; /* Tap area; the dot itself is the pip inside. */
	height: 2rem;
	margin: -1rem 0 0 -1rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.wz-progress__dot:disabled {
	cursor: default;
}

.wz-progress__dot:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.wz-progress__pip {
	position: relative;
	width: 10px;
	height: 10px;
	border: 2px solid var(--color-border-strong);
	border-radius: 50%;
	background: var(--color-surface);
	transition:
		background-color var(--dur-fast) var(--ease-out),
		border-color var(--dur-fast) var(--ease-out),
		scale var(--dur-base) var(--ease-out);
}

.wz-progress__dot.is-done .wz-progress__pip,
.wz-progress__dot.is-current .wz-progress__pip {
	border-color: var(--color-secondary);
	background: var(--color-secondary);
}

.wz-progress__dot.is-current .wz-progress__pip {
	scale: 1.3;
}

@media (hover: hover) {
	.wz-progress__dot.is-done:hover .wz-progress__pip {
		scale: 1.3;
	}
}

/* Arriving: the dot pops, then the wave keeps running out of it slowly. */
.wz-progress__dot.is-arrive .wz-progress__pip {
	animation: wz-dot-land 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wz-progress__pip::before,
.wz-progress__pip::after {
	content: "";
	position: absolute;
	inset: -2px;
	border: 2px solid var(--color-secondary);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
}

.wz-progress__dot.is-current .wz-progress__pip::before {
	animation: wz-dot-wave 2200ms var(--ease-out) infinite;
}

.wz-progress__dot.is-current .wz-progress__pip::after {
	animation: wz-dot-wave 2200ms var(--ease-out) 550ms infinite;
}

@keyframes wz-dot-land {
	0% {
		scale: 0.6;
	}

	60% {
		scale: 1.6;
	}

	100% {
		scale: 1.3;
	}
}

@keyframes wz-dot-wave {
	0% {
		opacity: 0.55;
		scale: 1;
	}

	100% {
		opacity: 0;
		scale: 3.2;
	}
}

/* The bar: «Details» opens the order summary; the button says where it goes. */
.wz-bar__info {
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: var(--space-3);
	cursor: pointer;
}

.wz-bar__info > :not(.wz-bar__details) {
	grid-column: 1;
}

.wz-bar__details {
	display: inline-flex;
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	align-items: center;
	gap: var(--space-1);
	height: 2.25rem;
	padding: 0 var(--space-3);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	color: var(--color-text);
	font: inherit;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	cursor: pointer;
}

.wz-bar__details svg {
	width: 1rem;
	height: 1rem;
	transition: rotate var(--dur-base) var(--ease-out);
}

.wz-bar__details[aria-expanded="true"] svg {
	rotate: 180deg;
}

.wz-bar__details:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.wz-bar__actions [data-submit] {
	height: auto;
	min-height: 3rem;
	padding-block: var(--space-2);
	line-height: var(--lh-snug);
	white-space: normal;
	text-wrap: balance;
}

.wz-summary__close {
	display: none;
}

@media (max-width: 1023px) {
	/* The summary is not below the steps: it opens from the bar as a panel. */
	.wizard.is-js .wz-summary {
		display: none;
	}

	.wizard.is-js.is-sheet-open .wz-summary {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: calc(var(--z-overlay) + 1);
		display: grid;
		max-height: min(82vh, 42rem);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
		padding-left: max(var(--space-5), env(safe-area-inset-left, 0px));
		padding-right: max(var(--space-5), env(safe-area-inset-right, 0px));
		border-bottom: 0;
		border-radius: var(--radius-card) var(--radius-card) 0 0;
		box-shadow: var(--shadow-lg);
		animation: wz-sheet-in var(--dur-slow) var(--ease-out);
	}

	.wizard.is-js .wz-summary [data-submit] {
		display: none; /* The bar below has the button. */
	}

	.wizard.is-js .wz-summary__close {
		position: absolute;
		top: var(--space-3);
		right: var(--space-3);
		display: inline-flex;
	}

	.wizard.is-js.is-sheet-open .wz-summary__head {
		padding-right: calc(var(--control-h) + var(--space-2));
	}

	.wz-sheet-backdrop {
		position: fixed;
		inset: 0;
		z-index: var(--z-overlay);
		background: rgb(14 43 44 / 0.45);
		animation: wz-fade-in var(--dur-base) var(--ease-out);
	}
}

@media (min-width: 1024px) {
	.wz-sheet-backdrop {
		display: none;
	}
}

.wz-sheet-backdrop[hidden] {
	display: none;
}

@keyframes wz-sheet-in {
	from {
		translate: 0 100%;
	}
}

@keyframes wz-fade-in {
	from {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wz-progress__fill,
	.wz-progress__pip,
	.wz-bar__details svg {
		transition: none;
	}

	.wz-progress__dot.is-current .wz-progress__pip::before,
	.wz-progress__dot.is-current .wz-progress__pip::after {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   Phones: a slimmer step card, like the product cards on the home page –
   the picture box sits close to the edge, the text a little further in.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.wz-card {
		padding: var(--space-4);
	}

	.wz-card .tx-stage__box {
		width: calc(100% + var(--space-2) * 2);
		margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0;
		border-radius: var(--radius-md);
	}
}

/* --------------------------------------------------------------------------
   Phones: one padding rule for every box – 16 px inside a card or panel,
   pictures 8 px from the edge (like the product cards on the home page).
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.co-card,
	.co-summary,
	.woocommerce-account .u-column1,
	.woocommerce-account .u-column2 {
		padding: var(--space-4);
	}

	.co-pay__list > .wc_payment_method {
		padding: var(--space-3) var(--space-4);
	}

	.wizard.is-js.is-sheet-open .wz-summary {
		padding-top: var(--space-4);
		padding-left: max(var(--space-4), env(safe-area-inset-left, 0px));
		padding-right: max(var(--space-4), env(safe-area-inset-right, 0px));
	}
}

/* No print data needed (Kundenstopper «Ohne Plakate»): a short note instead of the upload. */
.wz-upload.is-none > :not([data-upload-none]) {
	display: none;
}

.wz-upload__none {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-4);
	border-radius: var(--radius-md);
	background: var(--color-secondary-soft);
	color: var(--color-secondary-active);
	font-weight: var(--fw-semibold);
}

.wz-upload__none[hidden] {
	display: none;
}

.wz-upload__none .icon {
	flex: none;
	margin-top: 2px;
}

/* Customer account – one order: room between «Bestellung #108 vom …» and «Bestelldetails». */
.woocommerce-MyAccount-content .woocommerce-order-details,
.woocommerce-MyAccount-content .woocommerce-customer-details {
	margin-top: var(--space-6);
}

/* ==========================================================================
   Autobeschriftung (plugin: configurator-vehicle.php + vehicle-config.js)
   The stage on top of the step card shows the vehicle (steps 1–2) or the KI-Entwurf.
   ========================================================================== */
.vb-stage {
	display: grid;
	gap: var(--space-3);
	margin: calc(var(--space-2) * -1) 0 var(--space-8);
}

.vb-stage__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2) var(--space-4);
	min-height: 2.5rem;
}

.vb-stage__title {
	flex: 1 1 10rem; /* Shrinks (…) before it pushes the tabs onto the next line. */
	min-width: 0;
	overflow: hidden;
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vb-stage__title[hidden],
.vb-views[hidden] {
	display: none;
}

.vb-views {
	--seg-pad: var(--space-1);
	flex: 1 1 22rem;
	max-width: 32rem;
	border-radius: var(--radius-md);
	background: var(--color-surface-sunk);
}

.vb-views > button {
	min-height: 2.5rem;
	padding: 0 var(--space-2);
	border: 0;
	border-radius: var(--radius-sm);
	color: var(--color-text-muted);
	font: inherit;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	cursor: pointer;
}

.vb-views > button[aria-selected="true"] {
	color: var(--color-secondary);
}

.vb-views > button:disabled {
	cursor: default;
}

.vb-views > button:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.vb-stage:is([data-state="empty"], [data-state="wait"], [data-state="loading"], [data-state="error"], [data-state="limit"]) .vb-views {
	opacity: 0.5;
}

.vb-stage__box {
	--vb-h: clamp(12rem, 30vw, 20rem); /* Height of the vehicle picture. */
	--vb-pad: var(--space-6);
	position: relative;
	display: grid;
	place-items: center;
	min-height: calc(var(--vb-h) + var(--vb-pad) * 2);
	padding: var(--vb-pad) var(--space-4);
	border-radius: var(--radius-md);
	background: var(--color-surface-alt);
	overflow: hidden;
}

/* Vehicle views and draft sides: one fixed height, so switching tabs never moves the page. */
.vb-stage:is([data-state="ready"], [data-state="raw"], [data-state="design"]) .vb-stage__box {
	height: calc(var(--vb-h) + var(--vb-pad) * 2);
}

.vb-stage[data-state="design"] .vb-stage__box {
	--vb-pad: var(--space-3);
	padding: var(--vb-pad);
	background: var(--c-white);
	box-shadow: inset 0 0 0 1px var(--color-border);
}

.vb-stage__empty {
	display: grid;
	justify-items: center;
	gap: var(--space-2);
	max-width: 30rem;
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	text-align: center;
}

.vb-stage__empty strong {
	color: var(--color-text);
	font-size: var(--fs-md);
}

.vb-stage__empty-icon {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	margin-bottom: var(--space-1);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	color: var(--color-secondary);
	box-shadow: var(--shadow-xs);
	--icon-size: var(--icon-lg);
}

.vb-stage__empty[hidden],
.vb-load[hidden],
.vb-view[hidden],
.vb-shot[hidden] {
	display: none;
}

/* The painted vehicle (one view). */
.vb-view {
	position: relative;
	width: min(100%, calc(var(--vb-h, 20rem) * var(--vb-ar-n, 2.2)));
	aspect-ratio: var(--vb-ar, 2.2);
	margin-inline: auto;
}

.vb-view__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* The KI-Entwurf: all 5 views, click for the big view. */
.vb-shot {
	position: absolute; /* Fills the fixed box: every side and the photo fit the same space. */
	inset: var(--vb-pad, var(--space-3));
	display: block;
	padding: 0;
	border: 0;
	border-radius: var(--radius-sm);
	background: none;
	cursor: zoom-in;
}

/* Every side and the photo fit the same box (no jump when switching tabs). */
.vb-shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Photo tab: a short note under the photo, inside the box (nothing around it moves). */
.vb-stage__photo-note {
	position: absolute;
	right: var(--vb-pad, var(--space-3));
	bottom: calc(var(--vb-pad, var(--space-3)) / 2);
	left: var(--vb-pad, var(--space-3));
	margin: 0;
	overflow: hidden;
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
	line-height: var(--lh-snug);
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vb-stage__photo-note[hidden] {
	display: none;
}

.vb-stage__box:has(> .vb-stage__photo-note:not([hidden])) .vb-shot {
	bottom: calc(var(--vb-pad, var(--space-3)) + var(--space-5));
}

/* A small round zoom sign in the top corner (like on the package pictures) – it never covers the vehicle. */
.vb-shot__zoom {
	position: absolute;
	top: 0;
	right: 0;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--color-text);
	box-shadow: var(--shadow-xs);
	--icon-size: var(--icon-sm);
}

@media (hover: hover) {
	.vb-shot:hover .vb-shot__zoom {
		color: var(--color-secondary);
	}
}

.vb-shot:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.vb-stage__msg {
	max-width: 34rem;
	margin: var(--space-4) auto 0;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	text-align: center;
}

.vb-stage__msg[hidden] {
	display: none;
}

/* While the KI works: the customer's vehicle (or one of his size class) at its real length – a squeegee
   pulls the foil over it. No percentage: the KI reports no progress, only the seconds are real. */
.vb-load {
	display: grid;
	justify-items: center;
	gap: var(--space-2);
	width: 100%;
	text-align: center;
}

.vb-load__art {
	--len: 6;
	position: relative;
	width: min(29rem, 100%);
	aspect-ratio: 470 / 206;
	margin-bottom: var(--space-1);
}

/* 6.2 m fills the width: a small car stays small, a van fills the box. */
.vb-load__car,
.vb-load__shadow {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

.vb-load__car {
	bottom: 4%;
	width: calc(var(--len) / 6.2 * 100%);
}

.vb-load__shadow {
	bottom: 1%;
	width: calc(var(--len) / 6.2 * 100% + 2rem);
	height: 7%;
	border-radius: 50%;
	background: radial-gradient(ellipse, rgb(20 33 32 / 0.16), rgb(20 33 32 / 0) 70%);
}

.vb-load__plain canvas,
.vb-load__plain img,
.vb-load__wrap canvas {
	display: block;
	width: 100%;
	height: auto;
}

.vb-load__wrap {
	position: absolute;
	inset: 0;
	clip-path: inset(0 100% 0 0);
}

.vb-load__squeegee {
	position: absolute;
	top: -6%;
	bottom: -4%;
	left: 0;
	display: none;
}

/* Both start in the same frame (when has-wrap is set), so the blade stays on the film edge. */
.vb-load__art.has-wrap .vb-load__wrap {
	animation: vb-wrap 4.2s var(--ease-in-out) infinite;
}

.vb-load__art.has-wrap .vb-load__squeegee {
	display: block;
	animation: vb-squeegee 4.2s var(--ease-in-out) infinite;
}

.vb-load__squeegee::before,
.vb-load__squeegee::after {
	content: "";
	position: absolute;
}

.vb-load__squeegee::before {
	left: -2px;
	top: 0;
	bottom: 0;
	width: 4px;
	border-radius: 2px;
	background: var(--color-text);
}

.vb-load__squeegee::after {
	left: -1rem;
	top: calc(50% - 1.25rem);
	width: 2rem;
	height: 2.5rem;
	border-radius: var(--radius-sm);
	background: var(--c-yellow-500);
	box-shadow: var(--shadow-sm);
}

.vb-load__identity {
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	color: var(--color-secondary);
}

.vb-load__identity:empty {
	display: none;
}

.vb-load__title {
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
}

.vb-load__step {
	min-height: 1.25rem;
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.vb-load__dots {
	animation: vb-pulse 1.2s ease-in-out infinite;
}

.vb-load__track {
	width: min(21rem, 80%);
	height: 0.375rem;
	border-radius: var(--radius-pill);
	background: var(--c-mist-150);
	overflow: hidden;
}

.vb-load__bar {
	display: block;
	width: 38%;
	height: 100%;
	border-radius: var(--radius-pill);
	background: var(--color-secondary);
	animation: vb-travel 1.6s var(--ease-in-out) infinite;
}

.vb-load__note {
	max-width: 30rem;
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
}

/* The photo is made inside the picture box (fixed height): a smaller vehicle, on phones without the extras. */
.vb-stage.is-photo-wait .vb-load__art {
	width: min(19rem, 100%);
}

@media (max-width: 599px) {
	.vb-stage.is-photo-wait .vb-load__art {
		width: min(14rem, 100%);
	}

	.vb-stage.is-photo-wait .vb-load__identity,
	.vb-stage.is-photo-wait .vb-load__note {
		display: none;
	}
}

/* The squeegee fades in at the start, waits, then pulls the film; the film waits with it. */
/* The film comes off the way it went on (left to right) – no cross-fade: the film over the
   paint would turn a muddy dark for a moment. Hidden at both ends, so the loop never flashes. */
@keyframes vb-wrap {
	0%, 10% { clip-path: inset(0 100% 0 0); }
	64%, 82% { clip-path: inset(0 0 0 0); }
	100% { clip-path: inset(0 0 0 100%); }
}

@keyframes vb-squeegee {
	0% { left: 0; opacity: 0; }
	10% { left: 0; opacity: 1; }
	64% { left: 100%; opacity: 1; }
	76%, 100% { left: 100%; opacity: 0; }
}

@keyframes vb-travel {
	from { transform: translateX(-100%); }
	to { transform: translateX(265%); }
}

@keyframes vb-pulse {
	0%, 100% { opacity: 0.35; }
	50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.vb-load__art.has-wrap .vb-load__wrap,
	.vb-load__bar,
	.vb-load__dots {
		animation: none;
	}

	.vb-load__art.has-wrap .vb-load__wrap {
		clip-path: none;
	}

	.vb-load__art.has-wrap .vb-load__squeegee {
		display: none;
	}
}

/* Step 1: vehicle */
.vb-fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: var(--space-4);
}

.vb-missing {
	margin-top: calc(var(--space-3) * -1);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.vb-draw-btn {
	justify-self: start;
}

.vb-draw-btn[hidden] {
	display: none;
}

.vb-colors {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.vb-colors__name {
	margin-left: var(--space-2);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
}

.vb-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.vb-swatch {
	position: relative;
	display: block;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 1px solid var(--c-mist-250);
	border-radius: var(--radius-pill);
	background: var(--sw);
	cursor: pointer;
	transition: box-shadow var(--dur-fast) var(--ease-out);
}

.vb-swatch[aria-pressed="true"],
.vb-swatch--custom.is-on {
	box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 5px var(--color-secondary);
}

.vb-swatch:focus-visible,
.vb-swatch--custom:has(input:focus-visible) {
	outline: none;
	box-shadow: var(--focus-ring);
}

/* «Eigene Farbe»: rainbow until a colour is chosen. */
.vb-swatch--custom {
	background: conic-gradient(var(--c-red-500), var(--c-yellow-500), var(--color-success), var(--c-cyan-500), var(--c-magenta-500), var(--c-red-500));
}

.vb-swatch--custom.is-on {
	background: var(--sw);
}

.vb-swatch--custom input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

/* Step 2: information + logo */
.vb-texts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-4);
}

.vb-texts__wide {
	grid-column: 1 / -1;
}

/* Postcode and place side by side. */
.vb-plzort {
	display: grid;
	grid-template-columns: 6.5rem minmax(0, 1fr);
	gap: var(--space-2);
}

@media (max-width: 599px) {
	.vb-texts {
		grid-template-columns: minmax(0, 1fr);
	}
}

.field__hint {
	margin-left: var(--space-1);
	font-weight: var(--fw-regular);
	color: var(--color-text-muted);
}

.field__help {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.vb-logo {
	display: grid;
	gap: var(--space-3);
}

.vb-logo .wz-group__title {
	margin-bottom: 0;
}

.wz-group__hint {
	margin-left: var(--space-2);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
}

.vb-logo__drop[hidden],
.vb-logo__file[hidden] {
	display: none;
}

.vb-logo__thumb {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 2.75rem;
	padding: var(--space-1);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xs);
	background: var(--c-white);
}

.vb-logo__thumb:empty {
	display: none;
}

.vb-logo__thumb img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* Step 3: packages, areas, drafts */
.vb-packages {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: var(--space-3);
}

/* Phones: the packages as a swipe row like the product cards – out to the edges of the step card,
   the first card lines up with the text, the last with the right edge, the ones between stop in the middle. */
@media (max-width: 767px) {
	.vb-packages {
		display: flex;
		margin-inline: calc(var(--space-4) * -1); /* The step card's padding on phones. */
		padding: var(--space-1) var(--space-4) var(--space-2);
		overflow-x: auto;
		overflow-y: hidden; /* Sideways only: the row never moves up or down under the finger. */
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--space-4);
		scrollbar-width: none;
		touch-action: pan-x pan-y;
		-webkit-overflow-scrolling: touch;
	}

	.vb-packages::-webkit-scrollbar {
		display: none;
	}

	.vb-packages > .vb-package {
		flex: 0 0 min(18rem, 82%);
		scroll-snap-align: center;
	}

	.vb-packages > .vb-package:first-child {
		scroll-snap-align: start;
	}

	.vb-packages > .vb-package:last-child {
		scroll-snap-align: end;
	}

	.vb-packages img {
		-webkit-user-drag: none;
		user-select: none;
		-webkit-touch-callout: none;
	}
}

.vb-package {
	position: relative;
	display: flex;
	min-width: 0;
	cursor: pointer;
}

.vb-package__body {
	display: grid;
	flex: 1;
	align-content: start;
	gap: var(--space-2);
	padding: var(--space-4);
	border: var(--control-border) solid var(--color-border-strong);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
	.vb-package:hover .vb-package__body {
		border-color: var(--c-teal-300);
	}
}

.wz-option__input:checked + .vb-package__body {
	border-color: var(--color-secondary);
	background: var(--color-secondary-soft);
}

.wz-option__input:focus-visible + .vb-package__body {
	box-shadow: var(--focus-ring);
}

.vb-package__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-2);
}

.vb-package__head strong {
	font-size: var(--fs-md);
}

.vb-package__price {
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	color: var(--color-secondary);
	white-space: nowrap;
}

.vb-package__note {
	margin-top: calc(var(--space-2) * -1);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

/* A small van side per package: more decoration from Basic to Premium. */
.vb-package__art {
	display: block;
	height: 3.25rem;
	border: 1px solid var(--c-mist-150);
	border-radius: var(--radius-sm) var(--radius-lg) var(--radius-xs) var(--radius-xs);
	background-color: var(--c-white);
}

.vb-package__art--basic {
	background:
		linear-gradient(var(--color-primary), var(--color-primary)) 12% 32% / 34% 12% no-repeat,
		linear-gradient(var(--c-gray-400), var(--c-gray-400)) 12% 58% / 46% 7% no-repeat,
		linear-gradient(var(--c-gray-900), var(--c-gray-900)) 12% 78% / 28% 9% no-repeat,
		var(--c-white);
}

.vb-package__art--standard {
	background:
		linear-gradient(var(--color-primary), var(--color-primary)) 12% 28% / 34% 12% no-repeat,
		linear-gradient(var(--c-gray-400), var(--c-gray-400)) 12% 50% / 46% 7% no-repeat,
		linear-gradient(var(--color-primary), var(--color-primary)) 0 82% / 100% 12% no-repeat,
		linear-gradient(var(--c-gray-900), var(--c-gray-900)) 0 96% / 100% 4% no-repeat,
		var(--c-white);
}

.vb-package__art--premium {
	background:
		linear-gradient(var(--c-white), var(--c-white)) 12% 30% / 34% 12% no-repeat,
		radial-gradient(70% 120% at 100% 100%, var(--c-yellow-500) 0 38%, transparent 39%),
		linear-gradient(115deg, var(--color-primary) 0 58%, var(--c-teal-500) 58% 66%, var(--color-primary) 66%);
}

.vb-package__points {
	display: grid;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	font-size: var(--fs-sm);
	list-style: none;
}

.vb-package__points li {
	position: relative;
	padding-left: var(--space-5);
}

.vb-package__points li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--color-secondary);
	font-weight: var(--fw-bold);
}

.vb-areas {
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	max-width: none;
}

.wz-option__price {
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--color-text-muted);
}

.vb-ai {
	display: grid;
	gap: var(--space-5);
	padding: var(--space-5);
	border-radius: var(--radius-md);
	background: var(--color-surface-alt);
}

.vb-ai__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-4);
}

.vb-ai__left {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.vb-ai__drafts[hidden],
.vb-ai__wish[hidden] {
	display: none;
}

.vb-drafts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
	gap: var(--space-3);
}

.vb-draft {
	display: grid;
	gap: var(--space-1);
	padding: var(--space-1);
	border: var(--control-border) solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	color: var(--color-text);
	font: inherit;
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	text-align: start;
	cursor: pointer;
	transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.vb-draft img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: calc(var(--radius-sm) - 4px);
	background: var(--c-white);
}

.vb-draft span {
	padding: 0 var(--space-1) var(--space-1);
}

@media (hover: hover) {
	.vb-draft:hover {
		border-color: var(--c-teal-300);
	}
}

.vb-draft[aria-pressed="true"] {
	border-color: var(--color-secondary);
	box-shadow: 0 0 0 1px var(--color-secondary);
}

.vb-draft:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.vb-ai__wish {
	display: grid;
	gap: var(--space-2);
}

.vb-ai__wish .btn {
	justify-self: start;
}

.vb-ai__hint {
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
}

/* Step 4: mounting, photos */
.vb-mount {
	max-width: 40rem;
	border-radius: var(--radius-md);
	background: var(--color-surface-sunk);
}

.vb-mount > button {
	display: grid;
	gap: var(--space-1);
	padding: var(--space-2) var(--space-3);
	border: 0;
	border-radius: var(--radius-sm);
	color: var(--color-text-muted);
	font: inherit;
	line-height: var(--lh-snug);
	text-align: start;
	cursor: pointer;
}

.vb-mount > button[aria-checked="true"] {
	color: var(--color-secondary);
}

.vb-mount > button:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.vb-mount strong {
	font-size: var(--fs-sm);
}

.vb-mount small {
	font-size: var(--fs-xs);
}

.vb-mount__note {
	margin-top: var(--space-2);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.vb-plz {
	display: grid;
	grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
	align-items: end;
	gap: var(--space-2) var(--space-4);
	margin-top: var(--space-4);
}

.vb-plz[hidden] {
	display: none;
}

.vb-plz__result {
	padding-bottom: var(--space-3);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
}

.vb-plz__result.is-ok {
	color: var(--color-secondary);
}

.vb-plz__result.is-err {
	color: var(--color-error);
}

@media (max-width: 599px) {
	.vb-plz {
		grid-template-columns: minmax(0, 1fr);
	}

	.vb-plz__result {
		padding-bottom: 0;
	}
}

.vb-photos__lead {
	margin-bottom: var(--space-3);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.vb-photos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
	gap: var(--space-3);
}

.vb-photo {
	position: relative;
	display: grid;
	gap: var(--space-1);
	padding: var(--space-2);
	border: 2px dashed var(--color-border-strong);
	border-radius: var(--radius-md);
	background: var(--color-surface-alt);
	cursor: pointer;
	transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
	.vb-photo:hover {
		border-color: var(--color-secondary);
	}
}

.vb-photo:has(input:focus-visible) {
	box-shadow: var(--focus-ring);
}

.vb-photo.is-done {
	border-style: solid;
	border-color: var(--color-secondary);
	background: var(--color-secondary-soft);
}

.vb-photo input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

.vb-photo__img {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-xs);
	background: var(--color-surface);
	color: var(--color-secondary);
	overflow: hidden;
	--icon-size: var(--icon-md);
}

.vb-photo__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vb-photo.is-busy .vb-photo__img {
	opacity: 0.55;
}

.vb-photo__label {
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
}

.vb-photo__state {
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
}

.vb-photo__remove {
	position: absolute;
	z-index: 1;
	top: var(--space-1);
	right: var(--space-1);
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	color: var(--color-text);
	font-size: var(--fs-md);
	line-height: 1;
	cursor: pointer;
}

.vb-photo__remove[hidden] {
	display: none;
}

.vb-next {
	padding: var(--space-4) var(--space-5);
	border-radius: var(--radius-md);
	background: var(--color-surface-alt);
	font-size: var(--fs-sm);
}

.vb-next__title {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-2);
	font-weight: var(--fw-bold);
	--icon-size: var(--icon-sm);
}

.vb-next__title .icon {
	color: var(--color-secondary);
}

.vb-next ol {
	display: grid;
	gap: var(--space-1);
	margin: 0;
	padding-left: var(--space-5);
	color: var(--color-text-muted);
}

/* Summary: the chosen draft, click for the big view. */
.wizard--vehicle .wz-summary__preview img {
	width: 100%;
	height: auto;
	cursor: zoom-in;
}

/* Big view of a draft or example: as big as the screen allows, always whole – no scrolling. */
.vb-zoom {
	width: fit-content;
	max-width: none;
	max-height: none;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: var(--radius-md);
	background: var(--c-white);
	box-shadow: var(--shadow-lg);
}

.vb-zoom::backdrop {
	background: var(--color-overlay);
}

.vb-zoom__scroll img {
	--zoom-w: calc(100vw - var(--space-4) * 2);
	--zoom-h: calc(100dvh - var(--space-4) * 2);
	display: block;
	width: min(var(--zoom-w), var(--zoom-h) * var(--ar, 1.5)); /* --ar: set by vehicle-config.js */
	height: auto;
	max-height: var(--zoom-h);
	object-fit: contain;
}

.vb-zoom__close {
	position: absolute;
	top: var(--space-2);
	right: var(--space-2);
	box-shadow: var(--shadow-sm);
}

/* Daily limit reached (new vehicles / KI-Entwürfe): a calm popup with the time it works again. */
.vb-limit {
	width: min(100% - var(--space-4) * 2, 26rem);
	max-width: none;
	padding: var(--space-6) var(--space-5) var(--space-5);
	border: 0;
	border-radius: var(--radius-lg);
	background: var(--c-white);
	box-shadow: var(--shadow-lg);
	text-align: center;
}

.vb-limit[open] {
	display: grid;
	justify-items: center;
	gap: var(--space-3);
	animation: vb-limit-in 0.25s var(--ease-out);
}

.vb-limit::backdrop {
	background: var(--color-overlay);
}

@keyframes vb-limit-in {
	from {
		opacity: 0;
		transform: translateY(8px) scale(0.98);
	}
}

@media (prefers-reduced-motion: reduce) {
	.vb-limit[open] {
		animation: none;
	}
}

.vb-limit__icon {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: var(--color-secondary-soft);
	color: var(--color-secondary);
}

.vb-limit__icon .icon {
	width: 1.75rem;
	height: 1.75rem;
}

.vb-limit__title {
	margin: 0;
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
	line-height: 1.3;
}

.vb-limit__text,
.vb-limit__hint {
	margin: 0;
	color: var(--color-text-muted);
}

.vb-limit__hint {
	font-size: var(--fs-sm);
}

.vb-limit__time {
	display: grid;
	gap: var(--space-1);
	width: 100%;
	margin: var(--space-1) 0;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	background: var(--color-secondary-soft);
	color: var(--color-secondary);
}

.vb-limit__label {
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
}

.vb-limit__time strong {
	font-size: var(--fs-md);
	line-height: 1.3;
}

.vb-limit__clock {
	font-weight: var(--fw-semibold);
}

.vb-limit .btn {
	margin-top: var(--space-2);
}

.wizard--vehicle.is-busy [data-vb-submit],
.wizard--vehicle.is-busy [data-vb-bar-next] {
	opacity: 0.7;
	pointer-events: none;
}

.wizard--vehicle .wz-panel[hidden] {
	display: none;
}

/* Phones: the picture area sits 8 px from the card edge on all three sides (like .tx-stage__box). */
@media (max-width: 767px) {
	.vb-stage {
		margin-inline: calc(var(--space-2) * -1);
	}
}

@media (max-width: 599px) {
	.vb-stage__box {
		--vb-h: 11rem;
		--vb-pad: var(--space-4);
		padding-inline: var(--space-2);
	}

	.vb-views > button {
		font-size: var(--fs-xs);
	}

	.wz-bar__actions [data-vb-bar-next] {
		flex: 1;
	}
}

/* Links WooCommerce adds to e-mail addresses and URLs in the job details: same size as the text. */
.woocommerce table.shop_table .product-name .wc-item-meta a {
	font-size: inherit;
	font-weight: inherit;
}

@media (max-width: 599px) {
	.vb-drafts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vb-areas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Autobeschriftung: areas as compact rows, «what goes where» as a dropdown with checkboxes. */
.link-btn {
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-link);
	font: inherit;
	font-weight: var(--fw-semibold);
	cursor: pointer;
}

@media (hover: hover) {
	.link-btn:hover {
		color: var(--color-link-hover);
	}
}

.vb-arows {
	border: var(--control-border) solid var(--color-border-strong);
	border-radius: var(--radius-md);
	background: var(--color-surface);
}

.vb-arow {
	position: relative;
	display: grid;
	grid-template-columns: minmax(9rem, 11rem) 5.5rem minmax(0, 1fr);
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
	border-bottom: 1px solid var(--color-border);
}

.vb-arow:first-child {
	border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.vb-arow:last-child {
	border-bottom: 0;
	border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.vb-arow.is-off {
	background: var(--color-surface-alt);
}

.vb-arow.is-open {
	z-index: 3;
}

.vb-arow__check {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-width: 0;
	cursor: pointer;
}

.vb-arow__box,
.vb-dd__box {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	border: var(--control-border) solid var(--color-border-strong);
	border-radius: var(--radius-xs);
	background: var(--color-surface);
	transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

:checked + .vb-arow__box,
:checked + .vb-dd__box {
	border-color: var(--color-secondary);
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center / 75% no-repeat,
		var(--color-secondary);
}

:focus-visible + .vb-arow__box,
:focus-visible + .vb-dd__box {
	box-shadow: var(--focus-ring);
}

.vb-arow__name {
	font-weight: var(--fw-bold);
}

.vb-arow__price {
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--color-text-muted);
	text-align: right;
}

.is-off .vb-arow__name,
.is-off .vb-arow__price {
	color: var(--color-text-subtle);
}

.vb-dd {
	min-width: 0;
}

.vb-dd__btn {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	width: 100%;
	height: 2.5rem;
	padding: 0 var(--space-3);
	border: var(--control-border) solid var(--color-border-strong);
	border-radius: var(--radius-control);
	background: var(--color-field);
	color: var(--color-text);
	font: inherit;
	font-size: var(--fs-sm);
	text-align: start;
	cursor: pointer;
	transition: border-color var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
	.vb-dd__btn:hover {
		border-color: var(--c-teal-300);
	}
}

.vb-dd__btn:focus-visible,
.vb-dd__btn[aria-expanded="true"] {
	outline: none;
	border-color: var(--color-secondary);
	box-shadow: var(--focus-ring);
}

.vb-dd__btn:disabled {
	background: var(--color-surface-alt);
	color: var(--color-text-subtle);
	cursor: default;
}

.vb-dd__btn .icon {
	flex: none;
	--icon-size: var(--icon-xs);
	transition: transform var(--dur-fast) var(--ease-out);
}

.vb-dd__btn[aria-expanded="true"] .icon {
	transform: rotate(180deg);
}

.vb-dd__text {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vb-dd__n {
	flex: none;
	padding: 0 var(--space-2);
	border-radius: var(--radius-pill);
	background: var(--color-secondary-soft);
	color: var(--color-secondary);
	font-size: var(--fs-xs);
	line-height: 1.5;
}

.vb-dd__n[hidden] {
	display: none;
}

.vb-dd__menu {
	position: absolute;
	top: calc(100% - var(--space-1));
	right: var(--space-3);
	width: min(22rem, calc(100% - var(--space-6)));
	padding: var(--space-1);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	box-shadow: var(--shadow-md);
}

.vb-dd__menu[hidden] {
	display: none;
}

.vb-dd__opts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vb-dd__opt {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-width: 0;
	padding: var(--space-2);
	border-radius: var(--radius-xs);
	font-size: var(--fs-sm);
	cursor: pointer;
}

@media (hover: hover) {
	.vb-dd__opt:hover {
		background: var(--color-surface-alt);
	}
}

.vb-dd__opt input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.vb-dd__opt span:last-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vb-dd__empty {
	grid-column: 1 / -1;
	padding: var(--space-2);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.vb-dd__foot {
	display: flex;
	justify-content: space-between;
	margin-top: var(--space-1);
	padding: var(--space-2) var(--space-2) var(--space-1);
	border-top: 1px solid var(--color-border);
	font-size: var(--fs-sm);
}

@media (max-width: 599px) {
	.vb-arow {
		grid-template-columns: minmax(0, 1fr) auto;
		row-gap: var(--space-2);
		padding: var(--space-3);
	}

	.vb-dd {
		grid-column: 1 / -1;
	}

	.vb-dd__menu {
		left: var(--space-3);
		right: var(--space-3);
		width: auto;
	}
}

@media (max-width: 419px) {
	.vb-dd__opts {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------------------
   Autobeschriftung step 3: design wishes (chips, own colours, liked example)
   -------------------------------------------------------------------------- */
.vb-wishes {
	display: grid;
	gap: var(--space-5);
}

.vb-q {
	display: grid;
	gap: var(--space-2);
	min-width: 0;
}

.vb-q[hidden],
.vb-q__more[hidden] {
	display: none;
}

.vb-q__title {
	margin: 0;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--color-text);
}

.vb-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.vb-chip {
	position: relative;
	cursor: pointer;
}

.vb-chip__body {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	padding: var(--space-2) var(--space-4);
	border: var(--control-border) solid var(--color-border-strong);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	line-height: var(--lh-snug);
	transition:
		border-color var(--dur-fast) var(--ease-out),
		background-color var(--dur-fast) var(--ease-out),
		color var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
	.vb-chip:hover .vb-chip__body {
		border-color: var(--c-teal-300);
	}
}

.vb-chip :checked + .vb-chip__body {
	border-color: var(--color-secondary);
	background: var(--color-secondary-soft);
	color: var(--color-text);
	font-weight: var(--fw-semibold);
}

.vb-chip :focus-visible + .vb-chip__body {
	box-shadow: var(--focus-ring);
}

.vb-chip:has(:disabled) {
	cursor: not-allowed;
}

.vb-chip :disabled + .vb-chip__body {
	border-color: var(--color-border);
	color: var(--color-text-subtle);
	background: var(--color-surface-alt);
}

.vb-q__note[hidden],
.vb-ai__stale[hidden] {
	display: none;
}

/* The shown draft no longer matches the choices. */
.vb-ai__stale {
	margin: 0;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-sm);
	background: var(--c-yellow-50);
	color: var(--color-text);
	font-size: var(--fs-sm);
}

.vb-q__more {
	margin-top: var(--space-1);
}

.vb-q__sub {
	display: grid;
	gap: var(--space-2);
}

/* Phones: two chips per row, so the choices stay short. */
@media (max-width: 599px) {
	.vb-chips {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vb-chip__body {
		justify-content: center;
		width: 100%;
		height: 100%;
		padding-inline: var(--space-3);
		text-align: center;
	}
}

.vb-owncols {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
}

.vb-owncol {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--fs-sm);
	cursor: pointer;
}

.vb-owncol input {
	width: 2.5rem;
	height: 2.5rem;
	padding: 2px;
	border: var(--control-border) solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	cursor: pointer;
}

.vb-likes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-2);
}

.vb-like {
	position: relative;
	display: block;
	padding: 0;
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: var(--radius-md);
	background: var(--color-surface-alt);
	cursor: pointer;
	transition: border-color var(--dur-fast) var(--ease-out);
}

.vb-like img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: opacity var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
	.vb-like:hover img {
		opacity: 0.88;
	}
}

.vb-like[aria-pressed="true"] {
	border-color: var(--color-secondary);
}

.vb-like__tag {
	position: absolute;
	left: var(--space-1);
	bottom: var(--space-1);
	padding: 2px var(--space-2);
	border-radius: var(--radius-pill);
	background: var(--color-secondary);
	color: #fff;
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	opacity: 0;
	transform: translateY(4px);
	transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.vb-like[aria-pressed="true"] .vb-like__tag {
	opacity: 1;
	transform: none;
}

.vb-like:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

/* «Motorhaube» is «Haube» on phones, so five tabs fit. */
.vb-dview__short {
	display: none;
}

@media (max-width: 599px) {
	.vb-dviews:has(> :nth-child(5)) .vb-dview__long {
		display: none;
	}

	.vb-dviews:has(> :nth-child(5)) .vb-dview__short {
		display: inline;
	}
}

/* Tab «Foto»: a small spinner while the photo is being made. */
.vb-dviews > [disabled] {
	cursor: progress;
	opacity: 0.7;
}

.vb-dview__spin {
	display: inline-block;
	width: 0.75em;
	height: 0.75em;
	margin-right: 0.35em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	vertical-align: -0.05em;
	animation: ai-spin 0.8s linear infinite;
}

.vb-shot.is-photo img {
	border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
	.vb-dview__spin {
		animation-duration: 2.4s;
	}
}

/* --------------------------------------------------------------------------
   Autobeschriftung: example designs (package cards + «Welche Designs gefallen Ihnen?»)
   -------------------------------------------------------------------------- */
.vb-pkgal {
	position: relative;
	display: grid;
	gap: var(--space-2);
	min-width: 0;
}

.vb-pkgal:empty {
	display: none;
}

.vb-pkgal__item {
	position: relative;
}

.vb-pkgal__item img,
.vb-insp__card img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 1; /* Only the empty studio backdrop is trimmed – the whole vehicle stays visible. */
	object-fit: cover;
	object-position: 50% 50%;
}

.vb-pkgal__zoom {
	position: absolute;
	top: var(--space-1);
	right: var(--space-1);
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--color-text);
	box-shadow: var(--shadow-xs);
	cursor: zoom-in;
}

@media (hover: hover) {
	.vb-pkgal__zoom:hover {
		color: var(--color-secondary);
	}
}

.vb-pkgal__zoom:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

/* Inspiration slider */
.vb-insp .field__help {
	margin-top: calc(var(--space-1) * -1);
}

.vb-insp__wrap {
	position: relative;
	min-width: 0;
}

.vb-insp__track {
	display: flex;
	gap: var(--space-3);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 2px;
	padding: 2px 2px var(--space-2);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.vb-insp__track::-webkit-scrollbar {
	display: none;
}

.vb-insp__card {
	position: relative;
	flex: 0 0 min(19rem, 80%);
	overflow: hidden;
	border: 2px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--c-white);
	scroll-snap-align: center;
	cursor: pointer;
	transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.vb-insp__card:first-child {
	scroll-snap-align: start;
}

.vb-insp__card:last-child {
	scroll-snap-align: end;
}

@media (hover: hover) {
	.vb-insp__card:hover {
		border-color: var(--c-teal-300);
	}
}

.vb-insp__card[aria-pressed="true"] {
	border-color: var(--color-secondary);
	box-shadow: 0 0 0 3px var(--color-secondary-soft);
}

.vb-insp__card:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.vb-insp__title {
	display: block;
	padding: var(--space-2) var(--space-3);
	border-top: 1px solid var(--color-border);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--color-text);
}

.vb-insp__title small {
	display: block;
	font-size: var(--fs-xs);
	font-weight: var(--fw-regular);
	color: var(--color-text-muted);
}

.vb-pkgal__item {
	display: block;
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--c-white);
}

.vb-insp__check {
	position: absolute;
	top: var(--space-2);
	left: var(--space-2);
	width: 1.5rem;
	height: 1.5rem;
	border: 2px solid var(--color-border-strong);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.vb-insp__card[aria-pressed="true"] .vb-insp__check {
	border-color: var(--color-secondary);
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center / 70% no-repeat,
		var(--color-secondary);
}

.vb-insp__nav {
	position: absolute;
	top: calc(50% - 1.75rem);
	z-index: 1;
	box-shadow: var(--shadow-sm);
}

.vb-insp__nav[hidden] {
	display: none;
}

.vb-insp__nav--prev {
	left: calc(var(--space-2) * -1);
}

.vb-insp__nav--next {
	right: calc(var(--space-2) * -1);
}

@media (hover: none) {
	.vb-insp__nav {
		display: none;
	}
}

.vb-insp__note {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--color-error);
}

.vb-insp__note[hidden] {
	display: none;
}

/* A design element the chosen package does not include. */
.vb-chip__body[data-only]::after {
	content: attr(data-only);
	margin-left: var(--space-1);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
}

/* ==========================================================================
   Autobeschriftung: the way first (KI-Entwurf or own design), own design upload
   ========================================================================== */

/* Before the choice only the two cards show – steps and picture follow. */
.wizard--vehicle.is-choosing .wz-nav,
.wizard--vehicle.is-choosing .wz-card,
.wizard--vehicle.is-choosing .wz-bar,
.wizard--vehicle.is-choosing [data-vb-submit] {
	display: none;
}

.wizard--vehicle:not(.is-choosing) .vb-start {
	display: none;
}

/* No box around the cards: title and cards stand on the page (no box inside a box). */
.vb-start {
	display: grid;
	gap: var(--space-2);
}

.vb-start:focus {
	outline: none;
}

.vb-start__title {
	margin: 0;
	font-size: var(--fs-xl);
}

.vb-start__lead {
	margin: 0 0 var(--space-3);
	color: var(--color-text-muted);
}

.vb-start__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--space-4);
}

/* Column: the text grows, so price and link sit at the bottom of every card, on one line across cards. */
.vb-start__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2);
	padding: var(--space-5);
	border: var(--control-border) solid var(--color-border-strong);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	color: var(--color-text);
	font: inherit;
	text-align: start;
	cursor: pointer;
	transition:
		border-color var(--dur-fast) var(--ease-out),
		background-color var(--dur-fast) var(--ease-out),
		box-shadow var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
	.vb-start__card:hover {
		border-color: var(--color-secondary);
		box-shadow: var(--shadow-sm);
	}
}

.vb-start__card:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.vb-start__card[aria-pressed="true"] {
	border-color: var(--color-secondary);
	background: var(--color-secondary-soft);
}

.vb-start__icon {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: var(--space-1);
	border-radius: var(--radius-tile);
	background: var(--color-secondary-soft);
	color: var(--color-secondary);
	--icon-size: var(--icon-md);
}

.vb-start__name {
	font-size: var(--fs-md);
}

.vb-start__text {
	flex-grow: 1;
	font-size: var(--fs-sm);
	line-height: var(--lh-snug);
	color: var(--color-text-muted);
}

.vb-start__go {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	margin-top: var(--space-2);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	color: var(--color-secondary);
	--icon-size: 1rem;
}

@media (hover: hover) {
	.vb-start__card:hover .vb-start__go .icon {
		transform: translateX(2px);
	}
}

.vb-start__go .icon {
	transition: transform var(--dur-fast) var(--ease-out);
}

/* «Gestaltung: KI-Entwurf · ändern» in step 1 */
.vb-mode {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-1) var(--space-2);
	margin: calc(var(--space-2) * -1) 0 var(--space-3);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.vb-mode strong {
	color: var(--color-text);
}

/* Own design: the uploaded files */
.vb-own {
	display: grid;
	gap: var(--space-3);
}

.vb-own__drop[hidden],
.vb-files[hidden],
.vb-own__note[hidden] {
	display: none;
}

.vb-files {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vb-file {
	position: relative;
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr) auto auto;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
	border: var(--control-border) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	overflow: hidden;
}

.vb-file.is-shown {
	border-color: var(--color-secondary);
	background: var(--color-secondary-soft);
}

.vb-file__pic {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	padding: 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--c-white);
	overflow: hidden;
	cursor: zoom-in;
}

.vb-file__pic:disabled {
	cursor: default;
}

.vb-file__pic:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.vb-file__pic img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.vb-file__ext {
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	color: var(--color-text-muted);
}

.vb-file__text {
	display: grid;
	min-width: 0;
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
}

.vb-file__text strong {
	overflow: hidden;
	font-size: var(--fs-sm);
	color: var(--color-text);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vb-file__tag {
	padding: 0.125rem var(--space-2);
	border-radius: var(--radius-pill);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	white-space: nowrap;
}

.vb-file__tag--vector {
	background: var(--color-secondary-soft);
	color: var(--color-secondary);
}

.vb-file__tag--pixel {
	background: var(--color-primary-soft);
	color: var(--color-primary-text);
}

.vb-file__remove {
	font-size: var(--fs-lg);
	line-height: 1;
}

.vb-file__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--color-border);
}

.vb-file__bar span {
	display: block;
	height: 100%;
	background: var(--color-secondary);
	transition: width var(--dur-fast) linear;
}

@media (max-width: 479px) {
	.vb-file {
		grid-template-columns: 3rem minmax(0, 1fr) auto;
	}

	.vb-file__pic {
		width: 3rem;
		height: 3rem;
	}

	.vb-file__tag {
		display: none;
	}
}

.vb-own__note {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	margin: 0;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-sm);
	background: var(--color-surface-alt);
	font-size: var(--fs-sm);
	color: var(--color-text);
	--icon-size: 1.125rem;
}

.vb-own__note .icon {
	flex: none;
	margin-top: 0.125rem;
	color: var(--color-secondary);
}

.vb-own__firma {
	max-width: 24rem;
}

/* Own design: the area rows without «what goes where». */
.wizard--vehicle.is-own .vb-arow {
	grid-template-columns: minmax(9rem, 1fr) auto;
}

/* Autobeschriftung in test mode (sample pictures, no AI): clearly marked above the order form. */
.vb-testmode {
	margin: 0 0 var(--space-4);
}

/* ==========================================================================
   Visitenkarten (plugin: configurator-card.php + card-config.js)
   The way of designing first, then a live card in real proportions: card
   stock, corners and both sides (3D flip). The stage never changes height.
   ========================================================================== */

/* Before the choice only the three cards show – steps and card follow. */
.wizard--card.is-choosing .vk-mode,
.wizard--card.is-choosing .wz-nav,
.wizard--card.is-choosing .wz-card,
.wizard--card.is-choosing .wz-bar,
.wizard--card.is-choosing [data-card-submit] {
	display: none;
}

.wizard--card:not(.is-choosing) .vk-start {
	display: none;
}

.vk-start .vb-start__cards {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

/* Phones: the ways to start (KI · Datei · Gestaltung) sit side by side and are swiped. */
.vb-start__dots {
	display: none;
}

@media (max-width: 767px) {
	.vb-start__cards,
	.vk-start .vb-start__cards {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: min(78%, 18rem);
		gap: var(--space-3);
		margin-inline: calc(var(--gutter) * -1);
		padding: var(--space-1) var(--gutter) var(--space-2);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gutter);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.vb-start__cards::-webkit-scrollbar {
		display: none;
	}

	.vb-start__cards {
		overflow-y: hidden; /* sideways only: the row never moves up or down under the finger */
		touch-action: pan-x pan-y;
	}

	/* Sideways rows: the first card sits at the start, the last at the end, every one between stops in the middle. */
	.vb-start__card {
		scroll-snap-align: center;
		-webkit-touch-callout: none;
		user-select: none;
	}

	.vb-start__card:first-child {
		scroll-snap-align: start;
	}

	.vb-start__card:last-child {
		scroll-snap-align: end;
	}

	/* No hover shadow inside the row: on touch it sticks. */
	@media (hover: hover) {
		.vb-start__card:hover {
			box-shadow: none;
		}
	}

	/* Where am I: dots with a sliding pill */
	.vb-start__dots:not([hidden]) {
		position: relative;
		display: flex;
		justify-self: center;
		gap: var(--space-2);
		margin-top: var(--space-1);
	}

	.vb-start__dot {
		width: var(--space-2);
		height: var(--space-2);
		padding: 0;
		border: 0;
		border-radius: var(--radius-pill);
		background: var(--color-border-strong);
		cursor: pointer;
	}

	.vb-start__dots-thumb {
		position: absolute;
		top: 0;
		left: 0;
		width: var(--space-2);
		height: var(--space-2);
		border-radius: var(--radius-pill);
		background: var(--color-secondary);
		pointer-events: none;
		transition: transform var(--dur-base) var(--ease-out);
	}
}

.vk-start__price {
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	color: var(--color-text);
}

.vk-mode {
	margin: 0 0 var(--space-3);
}

/* Step numbers follow the chosen way (card-config.js); hidden steps take no place. */
.vk-nav .wz-nav__item[hidden],
.wizard--card [data-for-mode][hidden],
.vk-upload[hidden] {
	display: none;
}

/* --------------------------------------------------------------------------
   Live card
   -------------------------------------------------------------------------- */
.vk-stage {
	display: grid;
	gap: var(--space-3);
	margin: calc(var(--space-2) * -1) 0 var(--space-8);
}

.vk-stage__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2) var(--space-4);
	min-height: 2.5rem;
}

.vk-stage__title {
	flex: 1 1 8rem;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vk-sides {
	flex: 0 1 17.5rem;
	border-radius: var(--radius-md);
	background: var(--color-surface-sunk);
}

.vk-sides > button {
	min-height: 2.5rem;
	padding: 0 var(--space-3);
	border: 0;
	border-radius: var(--radius-sm);
	color: var(--color-text-muted);
	font: inherit;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	cursor: pointer;
}

.vk-sides > button[aria-selected="true"] {
	color: var(--color-secondary);
}

.vk-sides > button:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.vk-stage__box {
	position: relative;
	display: grid;
	place-items: center;
	height: var(--card-stage-h);
	padding: var(--space-5) var(--space-4) calc(var(--control-h) + var(--space-5)); /* room for size, sample switch and zoom below the card */
	border-radius: var(--radius-md);
	background: var(--color-surface-alt);
	overflow: hidden;
}

.vk-scene {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	perspective: 1400px;
}

.vk-card {
	--vk-w: 17rem;
	--vk-h: 11rem;
	--vk-r: 2px;
	position: relative;
	width: var(--vk-w);
	height: var(--vk-h);
	transform-style: preserve-3d;
	transition:
		transform var(--dur-flip) var(--ease-in-out),
		width var(--dur-slow) var(--ease-out),
		height var(--dur-slow) var(--ease-out);
}

.vk-card.is-back {
	transform: rotateY(180deg);
}

.vk-face {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	border-radius: var(--vk-r);
	background-color: var(--c-white);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	backface-visibility: hidden;
	transition:
		border-radius var(--dur-base) var(--ease-out),
		background-color var(--dur-slow) var(--ease-out);
}

.vk-face--back {
	transform: rotateY(180deg);
}

/* Card stocks: colour and surface of the real card. */
:is([data-paper="kaschiert"] :is(.vk-face, .vk-sheet), .vk-face[data-paper="kaschiert"]) {
	background-color: var(--c-white);
	background-image: linear-gradient(180deg, var(--c-paper-film), var(--c-white));
}

:is([data-paper="munken"] :is(.vk-face, .vk-sheet), .vk-face[data-paper="munken"]) {
	background-color: var(--c-paper-natural);
	background-image: var(--paper-grain-natural);
}

:is([data-paper="offset"] :is(.vk-face, .vk-sheet), .vk-face[data-paper="offset"]) {
	background-color: var(--c-paper-offset);
}

:is([data-paper="recycling"] :is(.vk-face, .vk-sheet), .vk-face[data-paper="recycling"]) {
	background-color: var(--c-paper-recycled-white);
	background-image: var(--paper-fibres-recycled);
}

:is([data-paper="kraft"] :is(.vk-face, .vk-sheet), .vk-face[data-paper="kraft"]) {
	background-color: var(--c-paper-card-kraft);
	background-image: var(--paper-fibres-kraft);
}

/* Glossy paper (flyers): a clear gloss over the print. */
:is([data-paper^="glanz"] .vk-face, .vk-face[data-paper^="glanz"])::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, transparent 25%, var(--c-paper-sheen) 42%, transparent 52%);
	opacity: 0.8;
	pointer-events: none;
}

/* Laminated: a soft film sheen lies over the print too. */
:is([data-paper="kaschiert"] .vk-face, .vk-face[data-paper="kaschiert"])::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 30%, var(--c-paper-sheen) 46%, transparent 60%);
	opacity: 0.5;
	pointer-events: none;
}

/* 1.3.41: a real print (KI-Entwurf or uploaded file) is shown exactly as it is – no gloss or film sheen over it.
   The paper look stays for the empty sheet and the sample design, where it helps to choose the paper. */
.vk-face:has(> .vk-face__art:not([hidden]))::after {
	content: none;
}

/* The print: the bleed (--bx / --by = its share of the picture) lies outside the card. */
.vk-face__art {
	--bx: 0;
	--by: 0;
	position: absolute;
	top: calc(-100% * var(--by) / (1 - 2 * var(--by)));
	left: calc(-100% * var(--bx) / (1 - 2 * var(--bx)));
	width: calc(100% / (1 - 2 * var(--bx)));
	max-width: none;
	height: calc(100% / (1 - 2 * var(--by)));
	object-fit: fill;
}

.vk-face__art.is-cover {
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Sample design: printed onto the card stock (multiply lets paper colour and fibres show through). */
.vk-face__sample {
	position: absolute;
	inset: 0;
	mix-blend-mode: multiply;
}

.vk-face__sample svg {
	display: block;
}

.vk-face__sample[hidden],
.vk-face__art[hidden],
.vk-face__empty[hidden] {
	display: none;
}

.vk-face__empty {
	max-width: 80%;
	padding: var(--space-2) var(--space-3);
	border: 1px dashed var(--color-border-strong);
	border-radius: var(--radius-xs);
	font-size: var(--fs-xs);
	line-height: var(--lh-snug);
	text-align: center;
	color: var(--color-text-muted);
	hyphens: auto;
}

/* Narrow cards (upright on phones): smaller hint, so no word is cut. */
.vk-face {
	container-type: size;
}

@container (max-width: 8rem) {
	.vk-face__empty {
		max-width: 92%;
		padding: var(--space-1);
		font-size: var(--fs-2xs);
	}
}

:is([data-paper="kraft"] .vk-face, .vk-face[data-paper="kraft"]) .vk-face__empty {
	border-color: var(--c-paper-fleck-dark);
	color: var(--c-gray-900); /* muted grey is too weak on kraft */
}

.vk-stage__size {
	position: absolute;
	left: var(--space-4);
	bottom: var(--space-4);
	margin: 0;
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
}

.vk-zoom-btn {
	position: absolute;
	right: var(--space-3);
	bottom: var(--space-2);
	z-index: var(--z-base);
	background: var(--color-surface);
	box-shadow: var(--shadow-xs);
}

.vk-zoom-btn[hidden],
.vk-load[hidden],
.vk-sample[hidden] {
	display: none;
}

/* «‹ Beispiel 1 von 4 ›» under the card (the stage title says «Ihre Datei erscheint hier»); the size moves to the right. */
.vk-sample {
	position: absolute;
	left: var(--space-2);
	bottom: var(--space-2);
	z-index: var(--z-base);
	display: flex;
	align-items: center;
	gap: var(--space-1);
	padding: 0.125rem var(--space-1); /* The round hover / focus mark of a button sits inside the pill with a small margin all around. */
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	box-shadow: var(--shadow-xs);
}

.vk-sample__nav {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--color-secondary);
	cursor: pointer;
	--icon-size: var(--icon-sm);
	transition: background-color var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
	.vk-sample__nav:hover {
		background: var(--color-secondary-soft);
	}
}

.vk-sample__nav:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--color-focus); /* Inside the button: a ring around it would reach out of the pill. */
}

.vk-sample__text {
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	color: var(--color-text);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Pointer screens: only ‹ › until the pill is hovered or focused, then the text slides open. */
@media (hover: hover) {
	.vk-sample {
		gap: 0;
	}

	.vk-sample__text {
		max-width: 0;
		overflow: hidden;
		opacity: 0;
		transition:
			max-width var(--dur-slow) var(--ease-out),
			opacity var(--dur-base) var(--ease-out);
	}

	.vk-sample:is(:hover, :focus-within) .vk-sample__text {
		max-width: var(--card-sample-text-w);
		opacity: 1;
	}

	/* The open switch needs the room of the size line: it fades out meanwhile. */
	.vk-stage__size {
		transition: opacity var(--dur-base) var(--ease-out);
	}

	.vk-stage__box:has(.vk-sample:is(:hover, :focus-within)) .vk-stage__size {
		opacity: 0;
	}
}

.vk-stage__box.has-sample .vk-stage__size {
	left: auto;
	right: var(--space-4);
}

@media (max-width: 599px) {
	.vk-stage__size-lead {
		display: none;
	}

	.vk-stage__box.has-sample .vk-stage__size {
		right: var(--space-3);
	}
}

/* KI loader: on the card, honest seconds, no invented progress. */
.vk-stage__box.is-loading .vk-card {
	opacity: 0.55;
}

.vk-load {
	position: absolute;
	inset: 0;
	z-index: var(--z-base);
	display: grid;
	place-items: center;
	padding: var(--space-4);
	overflow: hidden;
}

.vk-load__sweep {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.vk-load__sweep::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 40%;
	background: linear-gradient(90deg, transparent, var(--c-paper-sheen), transparent);
	animation: vk-sweep var(--dur-sweep) var(--ease-in-out) infinite;
}

@keyframes vk-sweep {
	from {
		transform: translateX(-120%);
	}

	to {
		transform: translateX(270%);
	}
}

.vk-load__box {
	position: relative;
	display: grid;
	gap: var(--space-1);
	max-width: 24rem;
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	box-shadow: var(--shadow-md);
	text-align: center;
}

.vk-load__box p {
	margin: 0;
}

.vk-load__title {
	font-weight: var(--fw-bold);
}

.vk-load__hint {
	font-size: var(--fs-sm);
	color: var(--color-text);
}

.vk-load__time {
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	font-variant-numeric: tabular-nums;
}

.vk-load__dots {
	animation: vk-dots var(--dur-pulse) ease-in-out infinite;
}

@keyframes vk-dots {
	50% {
		opacity: 0.3;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vk-load__sweep::before,
	.vk-load__dots {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   Steps
   -------------------------------------------------------------------------- */
.wz-orient.is-off {
	opacity: 0.5;
}

.wz-orient.is-off .wz-seg__item {
	cursor: default;
}

/* Two-way switch (Druck, Ecken, Datencheck): the thumb slides to the second choice. */
.wz-seg--pick {
	width: 100%;
	min-width: 0;
}

.wz-seg--pick:has(.wz-seg__item:last-of-type input:checked) .wz-seg__thumb {
	transform: translateX(calc(100% + var(--space-1)));
}

/* Step 1: Hoch-/Querformat and Einseitig/Beidseitig share the first row (they wrap under each other on small screens). */
.vk-toprow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3) var(--space-5);
}

.vk-toprow > .wz-group {
	flex: 0 1 auto;
	min-width: 0;
	margin: 0;
}

.vk-toprow > .vk-seg-group {
	flex: 1 1 15rem;
	max-width: 24rem;
}

.vk-pair {
	display: grid;
	gap: var(--space-6) var(--space-5);
	margin-top: var(--space-6);
}

@media (min-width: 600px) {
	.vk-pair {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.vk-pair .wz-group + .wz-group {
	margin-top: 0;
}

/* Products without corners (flyers): the print switch alone, not stretched over the row. */
.vk-pair > :only-child {
	grid-column: 1 / -1;
	max-width: 32rem;
}

.vk-fields {
	display: grid;
	gap: var(--space-5) var(--space-4);
	margin-bottom: var(--space-6);
}

@media (min-width: 600px) {
	.vk-fields {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.vk-fields__wide {
	grid-column: 1 / -1;
}

.vk-fields__cell[hidden],
.vk-wish[hidden] {
	display: none;
}

.vk-wish {
	margin-bottom: var(--space-6);
}

/* Uploads */
.vk-uploads {
	display: grid;
	gap: var(--space-5);
}

@media (min-width: 768px) {
	.vk-uploads {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}
}

.vk-upload {
	display: grid;
	gap: var(--space-2);
	min-width: 0;
}

.vk-upload .wz-group__title {
	margin: 0;
}

.vk-upload [hidden] {
	display: none;
}

.vk-upload__thumb {
	position: relative;
	display: grid;
	flex: none;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xs);
	background: var(--c-white);
	color: var(--color-secondary);
	overflow: hidden;
	--icon-size: var(--icon-sm);
}

/* Filled absolutely: a percentage height does not resolve in the grid, so an upright page ran taller than the
   square and was cropped. Now the whole page shows in its own ratio. */
.vk-upload__thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* A page preview: the frame takes the ratio of the page (set by sheet-config.js as --ar), taller than the file icon. */
.vk-upload__thumb.has-page {
	width: auto;
	max-width: 6.5rem;
	height: 4.5rem;
	aspect-ratio: var(--ar, 1);
}

.vk-upload__note {
	margin: 0;
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
}

/* The back field before the front file is there: shown, greyed, nothing to click. */
.config-upload__drop.is-locked {
	border-color: var(--color-border);
	background: var(--color-surface-alt);
	opacity: 0.55;
	cursor: not-allowed;
}

.config-upload__drop.is-locked .config-upload__input {
	cursor: not-allowed;
}

.vk-later {
	margin: var(--space-4) 0 var(--space-6);
}

/* The Angaben step is a stack of sections (texts, contact, logo, wishes): one calm card each, with a short title and a hint. */
.vk-sec {
	display: grid;
	gap: var(--space-4);
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface-alt);
}

.vk-sec[hidden] {
	display: none;
}

.vk-sec__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-3) var(--space-5);
}

.vk-sec__head > div:first-child {
	flex: 1 1 14rem;
	min-width: 0;
}

.vk-sec__head > .vk-textsides {
	flex: none;
}

.vk-sec__title {
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
	margin: 0;
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
}

.vk-sec__opt {
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
	font-weight: var(--fw-regular);
}

.vk-sec__hint {
	max-width: 38rem;
	margin: var(--space-1) 0 0;
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}

.vk-sec .vk-fields {
	margin-bottom: 0;
}

/* A small hint under a field: what to type there. */
.vk-fields__hint {
	font-size: var(--fs-xs);
	line-height: var(--lh-snug);
}

/* The upload field has its own label for screen readers; the section title says it for everyone else. */
.vk-sec .vk-upload > .wz-group__title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Vorderseite / Rückseite tabs of the texts (the sliding thumb comes from .wz-seg), in the head of the texts section. */
.vk-textsides {
	grid-template-columns: repeat(2, 7.25rem);
	min-width: 0;
	margin: 0;
}

.vk-textsides[hidden] {
	display: none;
}

.vk-textsides .wz-seg__item > span {
	align-content: center;
	padding: var(--space-1) var(--space-3);
	text-align: center;
}

.vk-textsides .wz-seg__item strong {
	justify-content: center;
	font-size: var(--fs-sm);
}

@media (max-width: 640px) {
	.vk-textsides {
		width: 100%;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Where something is printed: a plain choice of radio buttons. */
.vk-sec__side {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-5);
	font-size: var(--fs-sm);
}

.vk-sec__side[hidden] {
	display: none;
}

.vk-sec__side-label {
	color: var(--color-text-muted);
	font-weight: var(--fw-semibold);
}

.vk-radio {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	cursor: pointer;
}

.vk-radio input {
	width: 1.1rem;
	height: 1.1rem;
	margin: 0;
	accent-color: var(--color-secondary);
}

.vk-later:has(input:disabled) {
	display: none;
}

.wizard--card .wz-qty {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 480px) {
	.wizard--card .wz-qty {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* 7–8 quantities (flyers from 25): four per row, still one screen. */
@media (min-width: 768px) {
	.wizard--card .wz-qty.vk-qty--many {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.wizard--card .wz-qty__card[hidden] {
	display: none;
}

.vk-qty-note {
	margin-top: var(--space-3);
}

.vk-qty-note[hidden] {
	display: none;
}

/* KI-Entwurf */
.vk-test {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	margin: 0;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-sm);
	background: var(--color-surface-alt);
	font-size: var(--fs-sm);
	color: var(--color-text);
}

.vk-test[hidden] {
	display: none;
}

.vk-styles {
	--vk-style-ratio: 1.545;
	display: grid;
	grid-auto-columns: max(6.5rem, calc(5.5rem * var(--vk-style-ratio))); /* Same picture height for wide and upright formats. */
	grid-auto-flow: column;
	gap: var(--space-3);
	padding: var(--space-1) var(--space-1) var(--space-2);
	overflow-x: auto;
	scroll-snap-type: x proximity;
}

.vk-style {
	display: grid;
	gap: var(--space-2);
	padding: var(--space-2);
	border: var(--control-border) solid var(--color-border-strong);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	color: var(--color-text);
	font: inherit;
	text-align: start;
	cursor: pointer;
	scroll-snap-align: center;
	transition:
		border-color var(--dur-fast) var(--ease-out),
		background-color var(--dur-fast) var(--ease-out);
}

.vk-style:first-child {
	scroll-snap-align: start;
}

.vk-style:last-child {
	scroll-snap-align: end;
}

@media (hover: hover) {
	.vk-style:hover {
		border-color: var(--color-secondary);
	}
}

.vk-style:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.vk-style[aria-checked="true"] {
	border-color: var(--color-secondary);
	background: var(--color-secondary-soft);
}

.vk-style__img {
	display: block;
	aspect-ratio: var(--vk-style-ratio, 1.545); /* The chosen format (set by sheet-config.js). */
	border-radius: var(--radius-xs);
	background: var(--color-surface-sunk);
	overflow: hidden;
}

.vk-style__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vk-style__name {
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
}

/* Wide screens: bigger tiles – three and a half in view for wide formats, the rest scrolls.
   Upright formats keep the same picture height, so their tiles are narrower (more in view). */
@media (min-width: 1200px) {
	.vk-styles {
		grid-auto-columns: max(
			var(--card-style-min-w),
			calc((100% - (var(--card-styles-visible) - 0.5) * var(--space-3)) / var(--card-styles-visible) * min(1, var(--vk-style-ratio) / 1.545))
		);
		gap: var(--space-3);
	}

	.vk-style {
		padding: var(--space-3);
	}

	.vk-style__name {
		font-size: var(--fs-sm);
	}
}

.vk-ai {
	display: grid;
	gap: var(--space-4);
	margin-top: var(--space-5);
}

.vk-ai__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3) var(--space-4);
}

.vk-ai__row .btn {
	flex-wrap: wrap;
	justify-content: center;
	row-gap: 0;
	max-width: 100%;
}

.vk-ai__row .btn > span {
	white-space: nowrap;
}

@media (max-width: 479px) {
	.vk-ai__row .btn {
		width: 100%;
	}
}

.vk-ai__cost {
	font-weight: var(--fw-medium);
	opacity: 0.85;
}

.vk-ai__credits {
	margin: 0;
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
}

.vk-ai__drafts,
.vk-ai__use {
	display: grid;
	gap: var(--space-3);
}

.vk-ai__drafts .wz-group__title {
	margin: 0;
}

.vk-ai__drafts[hidden],
.vk-ai__edit[hidden],
.vk-ai__use[hidden],
.vk-ai__mismatch[hidden],
.wizard--card .config-upload__error[hidden] {
	display: none;
}

.vk-versions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.vk-version {
	display: grid;
	justify-items: center;
	gap: var(--space-1);
	padding: var(--space-1);
	border: var(--control-border) solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	color: var(--color-text-muted);
	font: inherit;
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	cursor: pointer;
}

.vk-version img {
	width: 4.5rem;
	aspect-ratio: 85 / 55;
	border-radius: var(--radius-xs);
	object-fit: cover;
}

.vk-version.is-current {
	border-color: var(--color-secondary);
	color: var(--color-secondary);
}

.vk-version:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.vk-ai__edit {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: var(--space-3);
}

.vk-ai__edit .btn {
	min-height: var(--control-h);
}

.vk-ai__use {
	padding: var(--space-4);
	border-radius: var(--radius-md);
	background: var(--color-surface-alt);
}

.vk-ai__use .btn {
	justify-self: start;
}

.vk-ai__use .btn[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
}

.vk-ai__use .btn.is-done {
	background: var(--color-success);
	opacity: 1;
}

.vk-ai__mismatch,
.vk-ai__small {
	margin: 0;
}

.vk-ai__small,
.vk-ai__privacy {
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
}

.vk-ai__privacy {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	margin: 0;
	--icon-size: 1rem;
}

.vk-ai__privacy .icon {
	flex: none;
	margin-top: 0.125rem;
}

.wizard--card.is-ai-busy .wz-nav__link,
.wizard--card.is-ai-busy [data-card-mode-change] {
	pointer-events: none;
}

/* Big view: the whole side fits the screen, no scrolling. */
.vk-zoom {
	width: min(96vw, 78rem);
	max-width: none;
	max-height: 94vh;
	padding: var(--space-4);
	border: 0;
	border-radius: var(--radius-lg);
	background: var(--color-surface-alt);
	box-shadow: var(--shadow-lg);
}

.vk-zoom::backdrop {
	background: var(--color-overlay);
}

.vk-zoom__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-4);
}

.vk-zoom__bar .vk-sides[hidden] {
	display: grid;
	visibility: hidden;
}

.vk-zoom__stage {
	--vk-ratio: 1.545;
	display: grid;
	place-items: center;
}

.vk-zoom__card {
	position: relative;
	inset: auto;
	width: min(100%, calc((94vh - 9rem) * var(--vk-ratio)));
	aspect-ratio: var(--vk-ratio);
	transform: none;
	backface-visibility: visible;
}

/* --------------------------------------------------------------------------
   Visitenkarten / Flyer: the live sheet stays in view (Printerei Shop 1.13.0)
   Wide screens: two boxes – the options on the left scroll, the sheet and the price on the right stay (sticky).
   Smaller screens: the sheet sticks at the top and becomes a slim strip while scrolling.
   -------------------------------------------------------------------------- */
.vk-side {
	display: contents; /* Smaller screens: the stage sticks inside the whole card. */
}

/* Logged in: the WordPress admin bar pushes the sticky header down, the stuck preview follows. */
.admin-bar .wizard--card {
	--card-admin-h: var(--wp-admin--admin-bar--height, 32px);
}

.vk-buy {
	display: none;
}

.vk-stage__short {
	display: none;
	margin: 0;
	overflow: hidden;
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (min-width: 1200px) {
	.wizard--card .wz-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.wizard--card .wz-summary {
		display: none;
	}

	/* The card itself is no box here: options and preview each get their own. */
	.wz-card.vk-split {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--card-split-w);
		align-items: start;
		gap: var(--space-4);
		padding: 0;
		border: 0;
		background: none;
	}

	.vk-side,
	.vk-steps {
		grid-row: 1;
		padding: var(--card-box-pad);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-card);
		background: var(--color-surface);
	}

	.vk-side {
		grid-column: 2;
		position: sticky;
		top: calc(var(--header-h) + var(--card-admin-h, 0px) + var(--card-side-top));
		display: grid;
		gap: var(--space-3);
	}

	.vk-side .vk-stage {
		margin: 0;
	}

	/* A narrow column: title on its own line, the side switch below it over the whole width. */
	.vk-side .vk-stage__title {
		flex-basis: 100%;
	}

	.vk-side .vk-sides {
		flex: 1 1 100%;
		max-width: none;
	}

	.vk-steps {
		grid-column: 1;
		min-width: 0;
	}

	.vk-buy {
		display: grid;
		gap: var(--space-3);
		padding: var(--space-4) var(--space-5);
		border-radius: var(--radius-md);
		background: var(--color-surface-alt);
	}

	.vk-buy__line {
		margin: 0;
		font-size: var(--fs-sm);
		color: var(--color-text-muted);
	}

	.vk-buy__total {
		margin: 0;
	}

	.vk-buy__ready {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		margin: 0;
		font-size: var(--fs-sm);
		color: var(--color-text);
		--icon-size: var(--icon-xs);
	}

	.vk-buy__ready .icon {
		color: var(--color-secondary);
	}

	.vk-buy .wz-summary__error[hidden] {
		display: none;
	}
}

@media (max-width: 1199px) {
	.vk-stage {
		position: sticky;
		top: calc(var(--header-h) + var(--card-admin-h, 0px) + var(--space-2));
		z-index: var(--z-raised);
		border-radius: var(--radius-md);
		background: var(--color-surface);
	}

	/* First step (format, paper) and «Ihre Angaben»: the sheet stays in the page and scrolls away – nothing sticks or floats. */
	.wizard--card:is([data-step="karte"], [data-step="angaben"], :not([data-step])) .vk-stage {
		position: relative;
		top: auto;
	}

	/* Covers the gap above the stuck strip so options don't peek out between header and strip. */
	.vk-stage.is-slim::before {
		content: "";
		position: absolute;
		inset: calc(-1 * var(--space-2) - 1px) calc(-1 * var(--space-5)) auto;
		z-index: -1;
		height: calc(var(--space-2) + var(--radius-md) + 1px);
		background: var(--color-surface);
	}

	@media (min-width: 768px) {
		.vk-stage.is-slim::before {
			inset-inline: calc(-1 * var(--space-8));
		}
	}

	.vk-stage.is-slim {
		grid-template-columns: 6.5rem minmax(0, 1fr);
		grid-template-areas: "box bar";
		align-items: center;
		gap: var(--space-3);
		padding: var(--space-2);
		box-shadow: var(--shadow-md);
	}

	.vk-stage.is-slim .vk-stage__bar {
		grid-area: bar;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: var(--space-2);
		min-width: 0;
		min-height: 0;
	}

	.vk-stage.is-slim .vk-stage__box {
		grid-area: box;
		height: var(--card-slim-h);
		padding: var(--space-1);
		border-radius: var(--radius-sm);
		cursor: pointer;
	}

	.vk-stage.is-slim .vk-stage__title {
		display: none;
	}

	.vk-stage.is-slim .vk-stage__short {
		display: block;
	}

	.vk-stage.is-slim .vk-sides {
		flex: none;
		max-width: 15rem;
	}

	.vk-stage.is-slim .vk-sides > button {
		min-height: 2rem;
		font-size: var(--fs-xs);
	}

	.vk-stage.is-slim :is(.vk-sample, .vk-stage__size, .vk-zoom-btn, .vk-load__box, .vk-stage__msg) {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Hilfslinien on the live card (Printerei Shop 1.14.0)
   Off: the card shows the finished print. On: the sheet with its bleed lies under the card,
   the bleed is striped (cut off), a line marks the cut, a dashed line the safe area.
   -------------------------------------------------------------------------- */
.vk-scene > :is(.vk-sheet, .vk-card, .vk-guides) {
	grid-area: 1 / 1;
}

.vk-sheet,
.vk-guides {
	position: relative;
	width: var(--vk-w, 0px);
	height: var(--vk-h, 0px);
	opacity: 0;
	pointer-events: none;
	transition:
		opacity var(--dur-base) var(--ease-out),
		width var(--dur-slow) var(--ease-out),
		height var(--dur-slow) var(--ease-out);
}

.vk-sheet {
	width: calc(var(--vk-w, 0px) + 2 * var(--vk-bleed, 0px));
	height: calc(var(--vk-h, 0px) + 2 * var(--vk-bleed, 0px));
	background-color: var(--c-white);
	box-shadow: var(--shadow-card);
}

.vk-scene.is-guides :is(.vk-sheet, .vk-guides) {
	opacity: 1;
}

/* The print runs out past the card into the bleed; the shadow moves to the sheet. */
.vk-scene.is-guides .vk-face {
	overflow: visible;
	box-shadow: none;
}

.vk-guides > span {
	position: absolute;
}

/* Bleed: a striped frame, only the band outside the card (the mask cuts the middle out). */
.vk-guides__bleed {
	inset: calc(-1 * var(--vk-bleed, 0px));
	padding: var(--vk-bleed, 0px);
	border: 1px dashed var(--c-magenta-500);
	background: var(--guide-hatch);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* The cut: dark line with a light edge, visible on dark and light prints; follows rounded corners. */
.vk-guides__trim {
	inset: 0;
	border-radius: var(--vk-r);
	box-shadow: 0 0 0 1px var(--color-text), 0 0 0 var(--guide-halo) rgb(255 255 255 / 0.7);
}

.vk-guides__safe {
	inset: var(--vk-safe, 0px);
	border: var(--guide-line) dashed var(--c-cyan-500);
	border-radius: max(0px, calc(var(--vk-r) - var(--vk-safe, 0px)));
}

/* Switch and legend under the stage box. */
.vk-guide-bar {
	display: grid;
	row-gap: 0;
	margin-top: var(--space-3);
	font-size: var(--fs-sm);
	transition: row-gap var(--dur-slow) var(--ease-out);
}

.vk-guide-bar:has(.vk-legend[aria-hidden="false"]) {
	row-gap: var(--space-2);
}

.vk-legend {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition:
		grid-template-rows var(--dur-slow) var(--ease-out),
		opacity var(--dur-base) var(--ease-out);
}

.vk-legend[aria-hidden="false"] {
	grid-template-rows: 1fr;
	opacity: 1;
}

.vk-legend__inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-4);
	min-height: 0;
	overflow: hidden;
}

.vk-legend__item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	white-space: nowrap;
}

.vk-legend__key {
	flex: none;
	width: 0.875rem;
	height: 0.75rem;
	box-sizing: border-box;
}

.vk-legend__key--bleed {
	border: 1px dashed var(--c-magenta-500);
	background: var(--guide-hatch);
}

.vk-legend__key--trim {
	height: 0;
	border-top: var(--guide-line) solid var(--color-text);
}

.vk-legend__key--safe {
	border: var(--guide-line) dashed var(--c-cyan-500);
	border-radius: var(--radius-xs);
}

/* Slim strip: no guides, the tiny card stays clean. */
.vk-stage.is-slim .vk-guide-bar,
.vk-stage.is-slim :is(.vk-sheet, .vk-guides) {
	display: none;
}

.vk-stage.is-slim .vk-scene.is-guides .vk-face {
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

/* --------------------------------------------------------------------------
   Flyer / Visitenkarten, step 1 with «Menge» (Printerei Shop 1.25.1)
   Format + Papier as compact cards without prices, the quantity cards with the total,
   «Andere Menge» with its rule, the price panel with price per piece and the short change.
   -------------------------------------------------------------------------- */
/* --- Two-way switches without a price line (Druck, Ecken): one line, centred ------------- */
.wizard--card .wz-seg--pick .wz-seg__item > span:not(:has(.wz-seg__price)) {
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
}

/* Phones: both switches over the full width. */
@media (max-width: 599px) {
	.vk-toprow > .wz-group,
	.vk-toprow > .vk-seg-group {
		flex: 1 1 100%;
		max-width: none;
	}

	.vk-toprow .wz-seg--orient {
		width: 100%;
	}
}

/* Flyers have no «Ecken»: the empty pair row takes no space. */
.vk-pair:not(:has(*)) {
	display: none;
}

/* --- Format + Papier: compact horizontal cards that fill the row -------------------------
   1 per row on phones, 2 from 600 px, 3 on wide screens. No price, no radio circle. */
.vk-picks {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-3);
}

@media (min-width: 600px) {
	.vk-picks {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.vk-picks {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.vk-pick[hidden] {
	display: none;
}

.vk-pick {
	position: relative;
	display: flex;
	min-width: 0;
	cursor: pointer;
}

.vk-pick__body {
	display: grid;
	flex: 1;
	position: relative;
	grid-template-columns: var(--space-12) minmax(0, 1fr);
	align-items: center;
	column-gap: var(--space-3);
	min-height: calc(var(--space-16) + var(--space-2)); /* 72 */
	padding: var(--space-3) calc(var(--space-4) + var(--space-3) + var(--space-2)) var(--space-3) var(--space-3); /* right: room for the check */
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	box-sizing: border-box;
	transition:
		border-color var(--dur-fast) var(--ease-out),
		background-color var(--dur-fast) var(--ease-out),
		box-shadow var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
	.vk-pick:hover .vk-pick__body {
		border-color: var(--c-teal-300);
	}
}

/* Chosen: 2 px teal edge (1px border + 1px inset ring, so nothing moves), light teal tint, check mark. */
.wz-option__input:checked + .vk-pick__body {
	border-color: var(--color-secondary);
	background: var(--color-secondary-soft);
	box-shadow: inset 0 0 0 1px var(--color-secondary);
}

.wz-option__input:focus-visible + .vk-pick__body {
	box-shadow: var(--focus-ring);
}

.wz-option__input:checked:focus-visible + .vk-pick__body {
	box-shadow: inset 0 0 0 1px var(--color-secondary), var(--focus-ring);
}

/* 48 px box: the page in real proportions (follows Hoch/Quer), or the paper swatch. */
.vk-pick__icon {
	display: grid;
	place-items: center;
	width: var(--space-12);
	height: var(--space-12);
	border-radius: var(--radius-sm);
	background: var(--color-surface-alt);
	transition: background-color var(--dur-fast) var(--ease-out);
}

.wz-option__input:checked + .vk-pick__body .vk-pick__icon {
	background: var(--color-surface);
}

.vk-pick__sheet {
	width: var(--w);
	height: var(--h);
	border: var(--control-border) solid var(--color-border-strong);
	border-radius: calc(var(--radius-xs) / 3);
	background: var(--color-surface);
	box-sizing: border-box;
	transition:
		width var(--dur-slow) var(--ease-in-out),
		height var(--dur-slow) var(--ease-in-out),
		border-color var(--dur-fast) var(--ease-out);
}

/* Round formats (stickers), screens (Menüboard), folded sheets: same shapes as the classic tiles. */
.vk-pick__sheet.is-round {
	border-radius: 50%;
}

.vk-pick__sheet.is-screen {
	border-color: var(--c-gray-900);
	background: linear-gradient(135deg, var(--c-gray-600) 0%, var(--c-gray-850) 55%, var(--c-gray-900) 100%);
}

.vk-pick__sheet.is-folded {
	background: linear-gradient(90deg, transparent calc(50% - 0.5px), var(--color-border-strong) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px)), var(--color-surface);
}

.wz-option__input:checked + .vk-pick__body .vk-pick__sheet {
	border-color: var(--color-secondary);
}

.vk-pick__swatch {
	width: var(--space-8);
	height: var(--space-8);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-xs);
	background: var(--color-surface);
}

.vk-pick__swatch.is-gloss {
	background: linear-gradient(135deg, var(--c-white) 0%, var(--c-gray-100) 42%, var(--c-white) 52%, var(--c-gray-100) 100%);
}

.vk-pick__swatch.is-recycled {
	background: var(--paper-fibres-recycled), var(--c-paper-recycled-white);
}

.vk-pick__swatch.is-kraft {
	background: var(--paper-fibres-kraft), var(--c-paper-kraft);
}

/* Laminated: the sheet sits inside a clear film that runs past its edge. */
.vk-pick__swatch.is-laminated {
	border-color: var(--c-gray-400);
	box-shadow: inset 0 0 0 calc(var(--space-1) - 1px) var(--c-paper-sheen), inset 0 0 0 var(--space-1) var(--color-border-strong);
}

.vk-pick__swatch.is-firm {
	box-shadow: 0 calc(var(--space-1) / 2) 0 var(--color-border-strong);
}

.vk-pick__swatch.is-thick {
	box-shadow: 0 calc(var(--space-1) / 2) 0 var(--color-border-strong), 0 var(--space-1) 0 var(--c-gray-400);
}

.vk-pick__text {
	display: grid;
	gap: 0;
	min-width: 0;
	line-height: var(--lh-snug);
}

.vk-pick__name {
	font-weight: var(--fw-bold);
	overflow-wrap: anywhere;
}

.vk-pick__meta {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

/* Small teal check at the right end, only on the chosen card (its column is always kept). */
.vk-pick__check {
	position: absolute;
	top: 50%;
	right: var(--space-3);
	margin-top: calc(var(--space-4) / -2);
	display: grid;
	place-items: center;
	width: var(--space-4);
	height: var(--space-4);
	border-radius: var(--radius-pill);
	background: var(--color-secondary);
	color: var(--color-on-secondary);
	opacity: 0;
	transform: scale(0.6);
	transition:
		opacity var(--dur-fast) var(--ease-out),
		transform var(--dur-base) var(--ease-spring);
	--icon-size: calc(var(--space-3) - 1px);
	--icon-stroke: 3;
}

.wz-option__input:checked + .vk-pick__body .vk-pick__check {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.vk-pick__body,
	.vk-pick__sheet,
	.vk-pick__check {
		transition: none;
	}
}

/* --- Menge in step 1 ------------------------------------------------------ */
.vk-qty-group .wz-group__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-1) 0;
}

@media (max-width: 599px) {
	.vk-qty-group .wz-group__hint {
		flex-basis: 100%;
		margin-left: 0;
	}
}

/* Tier cards: quantity, then the total as the main number, the price per piece small. */
.wz-qty--pick .wz-qty__body {
	gap: 0;
	padding: var(--space-3) var(--space-4);
}

.wz-qty--pick .wz-qty__qty {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.wz-qty--pick .wz-qty__total {
	white-space: nowrap;
}

.wz-qty--pick .wz-qty__unit {
	white-space: nowrap;
}

.wz-qty--pick .wz-option__input:checked + .wz-qty__body :is(.wz-qty__qty, .wz-qty__unit) {
	color: var(--color-secondary);
}

/* «Andere Menge»: field and its rule side by side; red text when the number is outside 25–5'000. */
.vk-qty-custom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-4);
	margin-top: var(--space-4);
}

.vk-qty-custom .wz-qty__custom {
	flex: 0 1 12rem;
	margin: 0;
}

.vk-qty-help {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.vk-qty-help.is-error {
	color: var(--color-error);
	font-weight: var(--fw-semibold);
}

/* --- Price panel (wide screens, under the live sheet) --------------------- */
/* The caption sits at the foot of the big total; very large totals wrap under it instead of leaving the box. */
.vk-buy__total {
	flex-wrap: wrap;
	align-items: flex-end;
}

.vk-buy__total .wz-summary__caption {
	white-space: nowrap;
}

/* «Total» and, for a moment, the price change beside it. */
.vk-buy__cap {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

.vk-buy__total strong {
	font-size: var(--fs-2xl);
	font-weight: var(--fw-black);
	letter-spacing: var(--ls-tight);
}

.vk-buy__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-2);
	margin: 0;
}

.vk-buy__fact {
	display: grid;
	gap: 0;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	line-height: var(--lh-snug);
}

.vk-buy__fact dt {
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
}

.vk-buy__fact dd {
	margin: 0;
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	font-variant-numeric: tabular-nums;
}

/* --- The short price change: «– CHF 17.40» appears beside the total while it rolls, then fades. */
.vk-delta {
	padding: 0 var(--space-2);
	border-radius: var(--radius-pill);
	background: var(--color-surface-sunk);
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	line-height: var(--lh-base);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	opacity: 0;
}

.vk-delta:empty {
	display: none;
}

.vk-delta.is-less {
	background: var(--color-surface);
	color: var(--color-success);
}

.vk-delta.is-on {
	animation: vk-delta calc(var(--dur-reveal) + var(--dur-slow)) var(--ease-out) both;
}

@keyframes vk-delta {
	0% {
		opacity: 0;
		transform: translateY(var(--space-1));
	}

	20%,
	75% {
		opacity: 1;
		transform: none;
	}

	100% {
		opacity: 0;
		transform: translateY(calc(var(--space-1) * -1));
	}
}

/* --- Bottom bar (phones, tablets): total + delta in one line, price per piece and date below. */
.wz-bar__line {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-2);
}

.wz-bar .vk-delta.is-less {
	background: var(--color-surface-alt);
}

@media (prefers-reduced-motion: reduce) {
	.vk-delta.is-on {
		animation: none;
	}
}

/* ==========================================================================
   Flyer / Visitenkarten, step «Ihre Angaben» (Printerei Shop 1.26.0)
   One card per printed side with the texts that go there; the contact group sits in the card of the side it is
   printed on. Language and wishes are two short lines, opened only to change them. After the chat the same page
   shows what the chat noted, with a short note on top and the check at the end.
   ========================================================================== */

.vk-angaben {
	container: angaben / inline-size;
}

/* The ki lead says «leere Felder lässt die KI weg»; after the chat the note on top says it instead. */
.vk-angaben[data-from-chat] > .wz-panel__lead {
	display: none;
}

/* --- Note after the chat --------------------------------------------------- */
.vk-from {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3) var(--space-4);
	padding: var(--space-4) var(--space-5);
	border: 1px solid var(--c-teal-100);
	border-radius: var(--radius-md);
	background: var(--color-secondary-soft);
}

.vk-from[hidden] {
	display: none;
}

.vk-from__avatar.vk-talk__avatar {
	width: var(--space-8);
	height: var(--space-8);
	--icon-size: var(--icon-xs);
}

.vk-from__text {
	display: grid;
	flex: 1 1 18rem;
	gap: var(--space-1);
	min-width: 0;
	margin: 0;
	font-size: var(--fs-sm);
	line-height: var(--lh-snug);
}

.vk-from__text strong {
	font-weight: var(--fw-semibold);
}

.vk-from__text span {
	color: var(--color-text-muted);
}

.vk-from__back {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: var(--space-2);
	white-space: nowrap;
	--icon-size: var(--icon-xs);
}

/* --- The printed sides ------------------------------------------------------ */
.vk-sidecards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-4);
	align-items: start;
}

@container angaben (min-width: 46rem) {
	.vk-sidecards.is-two {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.vk-sidecard {
	display: grid;
	gap: var(--space-4);
	min-width: 0;
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface-alt);
	container: sidecard / inline-size;
}

.vk-sidecard[hidden] {
	display: none;
}

@container angaben (max-width: 30rem) {
	.vk-sidecard {
		padding: var(--space-4);
	}
}

.vk-sidecard__head {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-height: var(--space-6);
}

/* A small sheet in the real proportions of the chosen format (sheet-config.js sets the size). */
/* 1.3.40: a small page with text lines – before it was an empty square and looked like a checkbox. */
.vk-sidecard__sheet {
	--sheet-line: var(--color-secondary);
	flex: none;
	width: 1rem;
	height: 1.375rem;
	border: 1.5px solid var(--color-secondary);
	border-radius: 2px;
	background:
		linear-gradient(var(--sheet-line), var(--sheet-line)) 3px 28% / calc(100% - 6px) 1.5px no-repeat,
		linear-gradient(var(--sheet-line), var(--sheet-line)) 3px 50% / calc(100% - 6px) 1.5px no-repeat,
		linear-gradient(var(--sheet-line), var(--sheet-line)) 3px 72% / 45% 1.5px no-repeat,
		var(--color-secondary-soft);
	transition: width var(--dur-base) var(--ease-out), height var(--dur-base) var(--ease-out);
}

/* Back: the same page, quieter */
.vk-sidecard__sheet.is-back {
	--sheet-line: var(--color-text-subtle);
	border-color: var(--color-text-subtle);
	background-color: var(--color-surface);
}

.vk-sidecard__title {
	margin: 0;
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
}

/* Fields: six columns, so PLZ and Ort share a row even in a narrow card; pairs side by side once the card is wide. */
.vk-sidecard__fields {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--space-5) var(--space-3);
}

.vk-sidecard__cell {
	grid-column: span 6;
	min-width: 0;
}

.vk-sidecard__cell[hidden] {
	display: none;
}

.vk-sidecard__cell[data-field="plz"] {
	grid-column: span 2;
}

.vk-sidecard__cell[data-field="ort"] {
	grid-column: span 4;
}

@container sidecard (min-width: 30rem) {
	.vk-sidecard__cell:is([data-field="titel"], [data-field="untertitel"], [data-field="firma"], [data-field="slogan"], [data-field="name"], [data-field="rolle"], [data-field="telefon"], [data-field="email"], [data-field="web"]) {
		grid-column: span 3;
	}
}

.vk-sidecard__cell.is-new {
	animation: vk-angaben-in var(--dur-slow) var(--ease-out);
}

@keyframes vk-angaben-in {
	from {
		opacity: 0;
		transform: translateY(calc(var(--space-1) * -1));
	}
}

/* «+ Website» and the like: fields the chat left empty, one tap away. */
.vk-sidecard__adds {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.vk-sidecard__adds[hidden],
.vk-sidecard__slot[hidden] {
	display: none;
}

.vk-add {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	min-height: var(--space-8);
	padding: 0 var(--space-3) 0 var(--space-2);
	border: 1px dashed var(--color-border-strong);
	border-radius: var(--radius-pill);
	background: none;
	color: var(--color-text-muted);
	font: inherit;
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	cursor: pointer;
	transition: border-color var(--dur-fast), color var(--dur-fast), background-color var(--dur-fast);
	--icon-size: var(--icon-xs);
}

@media (hover: hover) {
	.vk-add:hover {
		border-color: var(--color-secondary);
		background: var(--color-surface);
		color: var(--color-secondary);
	}
}

.vk-add:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

/* --- Contact group (moves between the sides) -------------------------------- */
.vk-sidecard__slot {
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border);
}

/* First thing in its card (card back side): no line above. */
.vk-sidecard__head + .vk-sidecard__slot {
	padding-top: 0;
	border-top: 0;
}

.vk-contact {
	display: grid;
	gap: var(--space-4);
	border-radius: var(--radius-sm);
}

.vk-contact.is-moved {
	animation: vk-angaben-moved 1.2s var(--ease-out);
}

@keyframes vk-angaben-moved {
	0%,
	30% {
		background: var(--color-secondary-soft);
		box-shadow: 0 0 0 var(--space-2) var(--color-secondary-soft);
	}
}

.vk-contact__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2) var(--space-3);
}

.vk-contact__title {
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
	margin: 0;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
}

.vk-contact__move {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: var(--space-8);
	margin-inline: calc(var(--space-2) * -1);
	padding: 0 var(--space-2);
	border: 0;
	border-radius: var(--radius-xs);
	background: none;
	color: var(--color-secondary);
	font: inherit;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	cursor: pointer;
	transition: background-color var(--dur-fast);
	--icon-size: var(--icon-xs);
}

@media (hover: hover) {
	.vk-contact__move:hover {
		background: var(--color-secondary-soft);
	}
}

.vk-contact__move:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.vk-contact__move[hidden] {
	display: none;
}

/* --- Logo ------------------------------------------------------------------- */
.vk-logo__side {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-4);
}

.vk-logo__side[hidden] {
	display: none;
}

.vk-logo__side-label {
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
}

.vk-logo__side .wz-seg {
	flex: 1 1 22rem;
	min-width: 0;
	max-width: 30rem;
}

/* A switch with three choices: the thumb is a third wide and slides to the chosen one. */
.wz-seg--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wz-seg--3 .wz-seg__thumb {
	width: calc((100% - var(--space-1) * 4) / 3);
}

.wz-seg--3:has(input[value="back"]:checked) .wz-seg__thumb {
	transform: translateX(calc(100% + var(--space-1)));
}

.wz-seg--3:has(input[value="both"]:checked) .wz-seg__thumb {
	transform: translateX(calc(200% + var(--space-1) * 2));
}

/* --- Language and wishes: one line each, opened to change ------------------- */
.vk-more {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface-alt);
}

.vk-more__row {
	padding: var(--space-4) var(--space-5);
}

.vk-more__row + .vk-more__row {
	border-top: 1px solid var(--color-border);
}

@container angaben (max-width: 30rem) {
	.vk-more__row {
		padding-inline: var(--space-4);
	}
}

.vk-more__line {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-1) var(--space-4);
}

.vk-more__label {
	grid-column: 1;
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}

.vk-more__value {
	display: flex;
	flex-wrap: wrap;
	grid-column: 1;
	align-items: baseline;
	gap: var(--space-1) var(--space-2);
	min-width: 0;
	font-weight: var(--fw-semibold);
	transition: opacity var(--dur-fast);
}

.vk-more__value > [data-angaben-value] {
	display: -webkit-box;
	min-width: 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow-wrap: anywhere;
}

.vk-more__value > [data-angaben-value].is-empty {
	color: var(--color-text-muted);
	font-weight: var(--fw-regular);
}

.vk-more__edit {
	grid-column: 2;
	grid-row: 1 / span 2;
	min-height: var(--space-10);
	padding-inline: var(--space-2);
	margin-right: calc(var(--space-2) * -1);
}

/* «aus dem Chat»: what the chat set, so the customer knows where it came from. */
.vk-more__from {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: 0.125rem var(--space-2);
	border-radius: var(--radius-pill);
	background: var(--color-secondary-soft);
	color: var(--color-secondary);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	white-space: nowrap;
	--icon-size: 0.875rem;
}

.vk-more__from[hidden] {
	display: none;
}

/* Open: the field takes the place of the short value. */
.vk-more__row.is-open .vk-more__value {
	display: none;
}

.vk-more__fold {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--dur-base) var(--ease-out);
}

.vk-more__row.is-open > .vk-more__fold {
	grid-template-rows: 1fr;
}

.vk-more__inner {
	min-height: 0;
	margin-inline: calc(var(--space-1) * -1);
	padding-inline: var(--space-1);
	overflow: hidden;
	visibility: hidden;
	transition: visibility 0s var(--dur-base);
}

.vk-more__row.is-open .vk-more__inner {
	visibility: visible;
	transition-delay: 0s;
}

/* Once open, the language list may hang out of the row. */
.vk-more__row.is-done .vk-more__inner {
	overflow: visible;
}

.vk-more__inner > .field {
	margin-block: var(--space-4) var(--space-1);
}

/* --- Check before «Weiter» (after the chat) --------------------------------- */
.vk-check {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-5);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	font-weight: var(--fw-semibold);
	cursor: pointer;
	transition: border-color var(--dur-base), background-color var(--dur-base);
}

.vk-check[hidden] {
	display: none;
}

.vk-check input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.vk-check__box {
	display: grid;
	flex: none;
	place-items: center;
	width: 1.375rem;
	height: 1.375rem;
	border: 2px solid var(--color-border-strong);
	border-radius: var(--radius-xs);
	background: var(--color-surface);
	color: var(--c-white);
	transition: background-color var(--dur-fast), border-color var(--dur-fast);
	--icon-size: 0.875rem;
}

.vk-check__box svg {
	transform: scale(0.4);
	opacity: 0;
	transition: transform var(--dur-base) var(--ease-spring), opacity var(--dur-fast);
}

@media (hover: hover) {
	.vk-check:hover .vk-check__box {
		border-color: var(--color-success);
	}
}

.vk-check input:checked + .vk-check__box {
	border-color: var(--color-success);
	background: var(--color-success);
}

.vk-check input:checked + .vk-check__box svg {
	transform: none;
	opacity: 1;
}

.vk-check:has(input:checked) {
	border-color: var(--color-success);
	background: var(--c-teal-50);
}

.vk-check input:focus-visible + .vk-check__box {
	box-shadow: var(--focus-ring);
}

/* Asked to confirm (Weiter without the check): a short shake draws the eye. */
.vk-check.is-asked {
	border-color: var(--color-error);
	animation: vk-angaben-ask 400ms var(--ease-out);
}

@keyframes vk-angaben-ask {
	20%,
	60% {
		transform: translateX(-3px);
	}

	40%,
	80% {
		transform: translateX(3px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.vk-sidecard__cell.is-new,
	.vk-contact.is-moved,
	.vk-check.is-asked {
		animation: none;
	}

	.vk-more__fold,
	.vk-sidecard__sheet,
	.vk-check__box svg {
		transition: none;
	}
}
/* ==========================================================================
   Flyer / Visitenkarten, step «KI-Entwurf» (Printerei Shop 1.26.0)
   Style as one line (opened to change it), one clear button, a visible wait, bigger draft history,
   «Etwas ändern?» with quick ideas, and taking the draft with only the risky details to compare.
   ========================================================================== */

/* --- Style: one line ------------------------------------------------------- */
.vk-pick-style {
	padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface-alt);
}

.vk-pick-style__line {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-4);
}

.vk-pick-style__thumb {
	display: block;
	width: 3rem;
	height: 3rem;
	border-radius: var(--radius-xs);
	background: var(--color-surface-sunk) center / cover no-repeat;
	box-shadow: inset 0 0 0 1px var(--color-border);
}

.vk-pick-style__text {
	display: grid;
	gap: 0.125rem;
	min-width: 0;
}

.vk-pick-style__label {
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}

.vk-pick-style__value {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-1) var(--space-2);
	font-weight: var(--fw-semibold);
}

.vk-pick-style__edit {
	min-height: var(--space-10);
	padding-inline: var(--space-2);
	margin-right: calc(var(--space-2) * -1);
}

.vk-pick-style.is-open .vk-pick-style__edit {
	color: var(--color-secondary);
}

.vk-pick-style__hint {
	margin: var(--space-2) 0 var(--space-1);
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
}

.vk-pick-style .vk-more__fold {
	transition: grid-template-rows var(--dur-base) var(--ease-out);
}

.vk-pick-style.is-open > .vk-more__fold {
	grid-template-rows: 1fr;
}

.vk-pick-style.is-open .vk-more__inner {
	visibility: visible;
	transition-delay: 0s;
}

/* All styles in view: a grid instead of a row that scrolls sideways (half-cut tiles on phones). */
.vk-styles.vk-styles--grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.25rem), 1fr));
	grid-auto-columns: auto;
	grid-auto-flow: row;
	gap: var(--space-3);
	margin-top: var(--space-4);
	padding: var(--space-1);
	overflow: visible;
}

@media (max-width: 479px) {
	.vk-styles.vk-styles--grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.vk-styles--grid .vk-style {
	padding: var(--space-2);
}

.vk-styles--grid .vk-style__name {
	font-size: var(--fs-xs);
	line-height: var(--lh-snug);
}

/* --- Create: one clear button, credits as a quiet line -------------------- */
.vk-gen {
	display: grid;
	justify-items: start;
	gap: var(--space-2);
}

.vk-gen[hidden] {
	display: none;
}

.vk-gen__btn {
	flex-wrap: wrap;
	justify-content: center;
	row-gap: 0;
	max-width: 100%;
}

@media (max-width: 479px) {
	.vk-gen {
		justify-items: stretch;
	}
}

.vk-gen__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-1) var(--space-3);
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
}

.vk-gen__buy {
	font-size: var(--fs-xs);
}

/* --- While the KI works ----------------------------------------------------- */
.vk-wait {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-2) var(--space-4);
	padding: var(--space-4) var(--space-5) var(--space-5);
	border: 1px solid var(--c-teal-100);
	border-radius: var(--radius-md);
	background: var(--color-secondary-soft);
	overflow: hidden;
}

.vk-wait[hidden] {
	display: none;
}

.vk-wait__spark {
	display: grid;
	place-items: center;
	width: var(--space-10);
	height: var(--space-10);
	border-radius: var(--radius-pill);
	background: var(--color-secondary);
	color: var(--color-on-secondary);
	animation: vk-wait-pulse var(--dur-pulse) var(--ease-in-out) infinite;
	--icon-size: var(--icon-sm);
}

@keyframes vk-wait-pulse {
	50% {
		box-shadow: 0 0 0 var(--space-2) color-mix(in srgb, var(--color-secondary) 12%, transparent);
	}
}

.vk-wait__text {
	display: grid;
	gap: var(--space-1);
	min-width: 0;
	font-size: var(--fs-sm);
	line-height: var(--lh-snug);
}

.vk-wait__text strong {
	font-size: var(--fs-base);
	font-weight: var(--fw-semibold);
}

.vk-wait__text span {
	color: var(--color-text-muted);
}

.vk-wait__sec {
	align-self: start;
	color: var(--color-secondary);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	font-variant-numeric: tabular-nums;
}

/* A thin bar that keeps moving: no fake percentage. */
.vk-wait__bar {
	position: absolute;
	inset: auto 0 0;
	height: 3px;
	background: var(--c-teal-100);
	overflow: hidden;
}

.vk-wait__bar span {
	position: absolute;
	inset: 0 auto 0 0;
	width: 35%;
	border-radius: var(--radius-pill);
	background: var(--color-secondary);
	animation: vk-wait-bar 1.6s var(--ease-in-out) infinite;
}

@keyframes vk-wait-bar {
	from {
		transform: translateX(-100%);
	}

	to {
		transform: translateX(300%);
	}
}

@container entwurf (max-width: 30rem) {
	.vk-wait {
		grid-template-columns: auto minmax(0, 1fr);
		padding-inline: var(--space-4);
	}

	.vk-wait__sec {
		grid-column: 2;
	}
}

/* --- Section titles inside the step ----------------------------------------- */
.vk-ai__h {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-2);
	margin: 0;
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
}

.vk-ai__note,
.vk-ai__scope {
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	font-weight: var(--fw-regular);
}

.vk-ai__drafts-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-1) var(--space-4);
}

/* --- Draft history: bigger pictures in the real ratio, the newest last, «+ Neuer Entwurf» at the end ---------- */
.vk-ai__drafts .vk-versions {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
	gap: var(--space-3);
}

@media (max-width: 479px) {
	.vk-ai__drafts .vk-versions {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-2);
	}
}

.vk-ai__drafts .vk-version {
	position: relative;
	align-content: start;
	justify-items: stretch;
	gap: var(--space-2);
	padding: var(--space-2);
	border-radius: var(--radius-md);
	text-align: start;
	transition: border-color var(--dur-fast), background-color var(--dur-fast);
}

@media (hover: hover) {
	.vk-ai__drafts .vk-version:hover {
		border-color: var(--c-teal-300);
	}
}

.vk-ai__drafts .vk-version img {
	width: 100%;
	aspect-ratio: var(--vk-draft-ratio, 0.7);
	border-radius: var(--radius-xs);
	background: var(--color-surface-sunk);
	object-fit: cover;
}

.vk-ai__drafts .vk-version > span {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-1);
	color: var(--color-text);
}

.vk-ai__drafts .vk-version small {
	color: var(--color-text-muted);
	font-size: var(--fs-2xs);
	font-weight: var(--fw-medium);
}

.vk-ai__drafts .vk-version.is-current {
	border-color: var(--color-secondary);
	background: var(--color-secondary-soft);
	box-shadow: inset 0 0 0 1px var(--color-secondary);
}

.vk-ai__drafts .vk-version.is-current > span {
	color: var(--color-secondary);
}

.vk-version.is-taken::after,
.vk-version.is-taken::before {
	content: "";
	position: absolute;
}

/* The taken draft: a green dot with a check (drawn with two borders, no picture). */
.vk-version.is-taken::after {
	top: var(--space-3);
	right: var(--space-3);
	width: 1.375rem;
	height: 1.375rem;
	border-radius: var(--radius-pill);
	background: var(--color-success);
	box-shadow: 0 0 0 2px var(--color-surface);
}

.vk-version.is-taken::before {
	z-index: 1;
	top: calc(var(--space-3) + 0.3125rem);
	right: calc(var(--space-3) + 0.4375rem);
	width: 0.3125rem;
	height: 0.5625rem;
	border: solid var(--c-white);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* «+ Neuer Entwurf»: same size as a draft, dashed like the «+» buttons of «Ihre Angaben». */
.vk-version--new {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: var(--space-1);
	min-height: 100%;
	padding: var(--space-3) var(--space-2);
	border: 1px dashed var(--color-border-strong);
	border-radius: var(--radius-md);
	background: none;
	color: var(--color-secondary);
	font: inherit;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	text-align: center;
	cursor: pointer;
	transition: border-color var(--dur-fast), background-color var(--dur-fast);
	--icon-size: var(--icon-sm);
}

.vk-version--new small {
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
	font-weight: var(--fw-regular);
}

@media (hover: hover) {
	.vk-version--new:hover {
		border-color: var(--color-secondary);
		background: var(--color-surface);
	}
}

.vk-version--new:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.vk-version--new:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* With drafts, «+ Neuer Entwurf» in the history replaces the big button. */
.vk-ai.has-drafts .vk-gen__btn {
	display: none;
}

/* --- Etwas ändern? ---------------------------------------------------------- */
.vk-ai .vk-ai__edit {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: stretch;
	gap: var(--space-3);
}

.vk-ai__quick {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.vk-ai__quick .vk-add {
	padding-inline: var(--space-3);
}

.vk-ai__edit-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: var(--space-3);
}

.vk-ai__edit-row .btn {
	min-height: var(--control-h);
	white-space: nowrap;
}

@container entwurf (max-width: 30rem) {
	.vk-ai__edit-row {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- Take the draft ---------------------------------------------------------- */
.vk-ai .vk-ai__use {
	gap: var(--space-4);
	padding: var(--space-5);
	border: 1px solid var(--color-border);
}

@container entwurf (max-width: 30rem) {
	.vk-ai .vk-ai__use {
		padding: var(--space-4);
	}
}

.vk-spot[hidden] {
	display: none;
}

.vk-spot {
	display: grid;
	gap: var(--space-3);
	justify-items: start;
}

.vk-spot__lead {
	margin: 0;
	font-size: var(--fs-sm);
}

.vk-spot__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vk-spot__list li {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--space-2);
	max-width: 100%;
	padding: var(--space-1) var(--space-3);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	font-weight: var(--fw-semibold);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.vk-spot__list small {
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
	font-weight: var(--fw-regular);
}

/* A word the check corrected before the picture was made: the customer must see it. */
.vk-spot__list li.is-fixed {
	border-color: var(--c-yellow-500);
	background: var(--c-yellow-50);
}

.vk-spot__list li.is-fixed small {
	color: var(--c-yellow-800);
}

.vk-spot__all {
	font-size: var(--fs-sm);
}

.vk-ai__use .vk-more__fold {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--dur-base) var(--ease-out);
}

.vk-ai__use.is-proof-open .vk-more__fold {
	grid-template-rows: 1fr;
}

.vk-ai__use.is-proof-open .vk-more__inner {
	visibility: visible;
	transition-delay: 0s;
}

.vk-ai__use .ai__proof {
	margin: 0;
}

.vk-ai__use .vk-ai__take {
	justify-self: stretch;
}

@container entwurf (min-width: 36rem) {
	.vk-ai__use .vk-ai__take {
		justify-self: start;
	}
}

.vk-ai__use .vk-ai__take[aria-disabled="true"] {
	opacity: 0.45;
}

.vk-ai__use .vk-ai__small {
	margin: calc(var(--space-2) * -1) 0 0;
}

/* --- Cart button before a draft is taken: quiet, it would only say «zuerst übernehmen» ---------- */
.wizard--card.is-untaken :is(.vk-buy, .wz-bar) .btn--primary[data-card-submit] {
	border-color: var(--color-border-strong);
	background: var(--color-surface-sunk);
	color: var(--color-text-muted);
	box-shadow: none;
}

/* Phones: the preview above already says «KI-Entwurf V2»; the step title says it again right below. */
@media (max-width: 1199px) {
	.wizard--card[data-step="entwurf"] .vk-stage__title {
		display: none;
	}
}

.vk-entwurf {
	container: entwurf / inline-size;
}

@media (prefers-reduced-motion: reduce) {
	.vk-wait__spark,
	.vk-wait__bar span {
		animation: none;
	}

	.vk-pick-style .vk-more__fold,
	.vk-ai__use .vk-more__fold {
		transition: none;
	}
}

/* The theme's [hidden] rules lose against the layout rules above. */
.vk-ai .vk-ai__edit[hidden],
.vk-ai .vk-ai__use[hidden] {
	display: none;
}

.vk-entwurf .vk-ai {
	margin-top: 0;
}

/* With drafts: the wait and the history first, the credits line right under «+ Neuer Entwurf». */
.vk-ai.has-drafts > .vk-ai__drafts {
	order: -1;
}

.vk-ai.has-drafts > .vk-wait {
	order: -2;
}

.vk-ai.has-drafts > .vk-gen {
	margin-top: calc(var(--space-2) * -1);
}

/* Step 1 of the order page: nothing is preselected – the prices of the quantity cards wait for the options. */
.vk-qty-wait {
	margin: 0 0 var(--space-3);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.vk-qty-wait[hidden] {
	display: none;
}

.vk-qty-group.is-waiting .wz-qty__total,
.vk-qty-group.is-waiting .wz-qty__unit {
	visibility: hidden;
}

/* Einseitig / Beidseitig: a sheet or two sheets in front of the label. */
.wz-seg__item > .vk-seg__row {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
}

.vk-side-icon {
	flex: 0 0 auto;
}

/* ==========================================================================
   1.3.40: one frame per area – inside the card no more boxes.
   Sections are divided by space, a title and a hairline; fields, tiles,
   pictures and the drop zone keep their own edge (they are controls).
   ========================================================================== */

/* Ihre Angaben: front, back, logo, language/wishes lie flat in the card */
.vk-sidecard {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

@container angaben (max-width: 30rem) {
	.vk-sidecard {
		padding: 0;
	}
}

.vk-sidecards {
	gap: var(--space-8) var(--space-6);
}

.vk-sec {
	padding: var(--space-6) 0 0;
	border: 0;
	border-top: 1px solid var(--color-border);
	border-radius: 0;
	background: none;
}

.vk-more {
	border: 0;
	border-top: 1px solid var(--color-border);
	border-radius: 0;
	background: none;
}

.vk-more__row {
	padding-inline: 0;
}

@container angaben (max-width: 30rem) {
	.vk-more__row {
		padding-inline: 0;
	}
}

/* Right column: price under a hairline, «Pro Stück» and «Menge» as plain lines */
@media (min-width: 1200px) {
	.vk-buy {
		padding: var(--space-4) 0 0;
		border-top: 1px solid var(--color-border);
		border-radius: 0;
		background: none;
	}
}

.vk-buy__fact {
	padding: 0;
	border-radius: 0;
	background: none;
}

/* KI-Entwurf without the studio (business cards): the style as one line under a hairline */
.vk-pick-style {
	padding: 0 0 var(--space-4);
	border: 0;
	border-bottom: 1px solid var(--color-border);
	border-radius: 0;
	background: none;
}

/* «Bereit am …» in the order summaries: a teal line with the icon, no box */
.wz-summary__ready,
.cart-summary__when {
	padding: 0;
	border-radius: 0;
	background: none;
}

/* Car lettering: the AI part and «So geht es weiter» lie in the card, a hairline above */
.vb-ai,
.vb-next {
	padding: var(--space-5) 0 0;
	border-top: 1px solid var(--color-border);
	border-radius: 0;
	background: none;
}

.vb-own__note {
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--color-text-muted);
}

/* Every frame that remains: 20 px inside (token --box-pad) */
.wz-card,
.wz-summary,
.cart-item,
.cart-summary,
.cart-flow,
.co-card,
.co-summary,
.vk-check,
.woocommerce-checkout form.woocommerce-form-login,
.woocommerce-customer-details address,
.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
	padding: var(--box-pad);
}

@media (min-width: 768px) {
	.wz-card {
		padding: var(--box-pad);
	}
}

/* --------------------------------------------------------------------------
   1.3.49: never one tile alone in the last row. Counted over the tiles that show ([hidden] ones – «nur mit …» –
   don't count), so it stays right when tiles come and go.
   -------------------------------------------------------------------------- */

/* Option tiles (not the sideways format row): 3, 5 or 7 tiles that would wrap 2 + 1 stand as a list on phones –
   the picture (photo, colour) on the left, the text beside it; wider screens put them 3, 3 + 2 or 4 + 3. */
@media (max-width: 639px) {
	.wz-options:not(.wz-options--sheet, .wz-options--paper, .wz-options--sides):has(> .wz-option:nth-child(odd of :not([hidden])):nth-last-child(1 of :not([hidden])):not(:first-child)) {
		grid-template-columns: minmax(0, 1fr);
	}

	.wz-options:not(.wz-options--sheet, .wz-options--paper, .wz-options--sides):has(> .wz-option:nth-child(odd of :not([hidden])):nth-last-child(1 of :not([hidden])):not(:first-child)) .wz-option__body:has(> [aria-hidden="true"]:first-child) {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: var(--space-3);
		align-content: start;
	}

	.wz-options:not(.wz-options--sheet, .wz-options--paper, .wz-options--sides):has(> .wz-option:nth-child(odd of :not([hidden])):nth-last-child(1 of :not([hidden])):not(:first-child)) .wz-option__body > [aria-hidden="true"]:first-child {
		grid-row: 1 / span 6;
		margin-bottom: 0;
	}

	.wz-options:not(.wz-options--sheet, .wz-options--paper, .wz-options--sides):has(> .wz-option:nth-child(odd of :not([hidden])):nth-last-child(1 of :not([hidden])):not(:first-child)) .wz-option__body:has(> .wz-photo:first-child) {
		grid-template-columns: 6.5rem minmax(0, 1fr); /* The photo fills its column (its own width is 100 %). */
	}
}

@media (min-width: 640px) {
	.wz-options:not(.wz-options--sheet):has(> .wz-option:nth-child(3 of :not([hidden])):nth-last-child(1 of :not([hidden]))),
	.wz-options:not(.wz-options--sheet):has(> .wz-option:nth-child(5 of :not([hidden])):nth-last-child(1 of :not([hidden]))) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		max-width: calc(3 * 17rem);
	}

	.wz-options:not(.wz-options--sheet):has(> .wz-option:nth-child(7 of :not([hidden])):nth-last-child(1 of :not([hidden]))) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		max-width: calc(4 * 17rem);
	}
}

/* Sheet products (Flyer, Falzflyer, Visitenkarten …): their pick lists are 2 or 3 wide – a tile left over alone takes
   the whole row (13 fold types, formats that come and go with the fold). */
@media (min-width: 600px) and (max-width: 1199px) {
	.vk-picks > .vk-pick:nth-child(odd of :not([hidden])):nth-last-child(1 of :not([hidden])):not(:first-child) {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1200px) {
	.vk-picks > .vk-pick:nth-child(3n + 1 of :not([hidden])):nth-last-child(1 of :not([hidden])):not(:first-child) {
		grid-column: 1 / -1;
	}

	/* Four: 2 × 2 instead of 3 + 1. */
	.vk-picks:has(> .vk-pick:nth-child(4 of :not([hidden])):nth-last-child(1 of :not([hidden]))) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vk-picks:has(> .vk-pick:nth-child(4 of :not([hidden])):nth-last-child(1 of :not([hidden]))) > .vk-pick {
		grid-column: auto;
	}
}

/* Long German words on tiles break at a syllable with a hyphen («Kartenfor-mat», «Wandabstands-halter») instead of
   anywhere – the page is lang="de-CH". */
:is(.wz-option__label, .wz-option__note, .tx-option__label, .tx-colour__name, .vk-pick__name, .vk-pick__meta) {
	-webkit-hyphens: auto;
	hyphens: auto;
}

/* The sideways format row on phones: a tile widens to its longest word («Kartenformat») instead of cutting it. */
@media (max-width: 767px) {
	.wz-options--sheet .wz-option__label {
		overflow-wrap: normal;
	}
}

/* Four format tiles: 2 × 2 as intended in 1.54.5 – three narrow sheets fitted into the width for two and left one
   alone (Notizblöcke A7 · A6 · A5 + A4, Menüboard 43 · 50 · 55 + 65 Zoll). */
@media (min-width: 768px) {
	.wz-options--sheet:has(> .wz-option:nth-child(4 of :not([hidden])):nth-last-child(1 of :not([hidden]))) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}