/* ==========================================================================
   Droomwand — atelier-wizard (spec §7)
   Bouwt uitsluitend voort op tokens.css / base.css / components.css.
   ========================================================================== */

.atelier {
	padding-block: var(--sp-8) var(--sp-14);
}

/* --------------------------------------------------------------------------
   Stapsecties
   -------------------------------------------------------------------------- */

.atelier-stap[hidden] {
	display: none;
}

.atelier-intro {
	max-width: var(--max-smal);
	margin-bottom: var(--sp-8);
}

.atelier-intro h1 {
	margin-top: var(--sp-2);
}

/* --------------------------------------------------------------------------
   Stap 1 — vier ingangen
   -------------------------------------------------------------------------- */

.atelier-ingangen {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-5);
}

@media (min-width: 40rem) {
	.atelier-ingangen {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.atelier-ingang {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-3);
	text-decoration: none;
	color: inherit;
}

.atelier-ingang h2 {
	font-size: var(--fs-lg);
	margin: 0;
}

.atelier-ingang p {
	margin: 0;
}

/* --------------------------------------------------------------------------
   Twee-koloms grid met plakkende zijbalk (stap 2 en 3)
   -------------------------------------------------------------------------- */

.studio-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-8);
	align-items: start;
}

@media (min-width: 64rem) {
	.atelier-muur.studio-grid,
	.atelier-resultaat.studio-grid {
		grid-template-columns: minmax(0, 1fr) 24rem;
	}

	.sticky-col {
		position: sticky;
		top: calc(var(--header-hoogte) + var(--sp-6));
	}
}

/* Stap 3 — links het resultaat, rechts (op brede schermen plakkend) de
   afronding: prijs, acties en bestellen/offerte. De twee kaarten daarin
   staan altijd onder elkaar; in een kolom van 24rem is naast elkaar te smal. */
.bestel-knop {
	margin-top: var(--sp-3);
}

.bestel-usps,
.bestel-betalen {
	margin-top: var(--sp-5);
}

.atelier-resultaat-links {
	display: grid;
	gap: var(--sp-6);
}

.atelier-afronding {
	display: grid;
	gap: var(--sp-6);
}

.atelier-velden {
	display: grid;
	gap: var(--sp-6);
	margin-top: var(--sp-7);
}

.atelier-muur-form > .atelier-intro,
.atelier-muur-form h1 {
	margin-top: var(--sp-2);
}

.atelier-zijbalk {
	display: grid;
	gap: var(--sp-5);
}

.atelier-vanaf {
	margin: 0;
}

/* --------------------------------------------------------------------------
   Afmetingenkaart (marge, maten, presets, prijsregel)
   -------------------------------------------------------------------------- */

.wall-card h2 {
	margin-top: 0;
	font-size: var(--fs-lg);
}

.margin-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-2);
}

.margin-row .schakelaar {
	flex: 1;
	justify-content: flex-start;
}

.icon-btn.info {
	width: var(--raak);
	height: var(--raak);
	flex-shrink: 0;
}

.tip {
	margin-top: var(--sp-3);
	padding: var(--sp-3) var(--sp-4);
	background: var(--accent-zacht);
	border-radius: var(--r-md);
	font-size: var(--fs-sm);
	color: var(--fg);
}

.tip[hidden] {
	display: none;
}

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

.cm-field {
	position: relative;
	display: flex;
	align-items: center;
}

.cm-field input {
	padding-right: var(--sp-9);
}

.cm-field span {
	position: absolute;
	right: var(--sp-3);
	color: var(--muted);
	font-size: var(--fs-sm);
	pointer-events: none;
}

.presets {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin-top: var(--sp-4);
}

.presets button {
	min-height: var(--raak);
	padding-inline: var(--sp-3);
	border: 1px solid var(--border);
	border-radius: var(--r-rond);
	background: var(--surface);
	color: var(--fg);
	font-size: var(--fs-sm);
}

.presets button:hover {
	border-color: var(--border-sterk);
}

.presets button.on,
.presets button[aria-pressed="true"] {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-fg);
}

.atelier-prijsregel {
	margin: var(--sp-5) 0 0;
	font-size: var(--fs-sm);
}

.atelier-resolutie-oordeel {
	margin: var(--sp-2) 0 0;
	font-size: var(--fs-sm);
}

.atelier-resolutie-oordeel[data-verdict="sufficient"] {
	color: var(--succes);
}

.atelier-resolutie-oordeel[data-verdict="marginal"] {
	color: var(--waarschuwing);
}

.atelier-resolutie-oordeel[data-verdict="insufficient"] {
	color: var(--fout);
}

.atelier-resolutie-acties[hidden],
.atelier-resolutie-oordeel[hidden] {
	display: none;
}

/* --------------------------------------------------------------------------
   Stap 3 — resultaat
   -------------------------------------------------------------------------- */

.atelier-resultaat-kop {
	margin-bottom: 0;
}

.views {
	display: inline-flex;
	border: 1px solid var(--border);
	border-radius: var(--r-rond);
	overflow: hidden;
}

.views button {
	min-height: var(--raak);
	padding-inline: var(--sp-4);
	border: 0;
	background: var(--surface);
	color: var(--muted);
	font-size: var(--fs-sm);
	text-transform: capitalize;
}

.views button.on,
.views button[aria-pressed="true"] {
	background: var(--accent);
	color: var(--accent-fg);
}

.atelier-weergave {
	margin: 0;
}

.atelier-voortgang {
	margin: var(--sp-6) 0;
	padding: var(--sp-5);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
}

.atelier-voortgang[hidden] {
	display: none;
}

.voortgang-balk {
	height: 0.5rem;
	border-radius: var(--r-rond);
	background: var(--accent-zacht);
	overflow: hidden;
	margin-bottom: var(--sp-3);
}

.voortgang-balk span {
	display: block;
	height: 100%;
	width: 8%;
	background: var(--accent);
	border-radius: var(--r-rond);
	transition: width var(--duur-traag) var(--ease);
}

.atelier-fout {
	margin: var(--sp-6) 0;
	border-color: var(--fout);
	background: var(--fout-zacht);
}

.atelier-fout[hidden] {
	display: none;
}

.atelier-fout p {
	margin: 0 0 var(--sp-3);
	color: var(--fout);
}

.atelier-varianten[hidden] {
	display: none;
}

.varianten-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
	gap: var(--sp-3);
	margin-top: var(--sp-4);
}

.varianten-grid button {
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--surface);
	box-shadow: var(--shadow-1);
}

.varianten-grid button img {
	display: block;
	width: 100%;
	height: 6rem;
	object-fit: cover;
}

.varianten-grid button.on,
.varianten-grid button[aria-pressed="true"] {
	border-color: var(--accent);
}

/* --------------------------------------------------------------------------
   Banenweergave (ook los herbruikbaar, template-parts/banen.php)
   -------------------------------------------------------------------------- */

.strips {
	display: grid;
	gap: var(--sp-2);
	margin-top: var(--sp-4);
}

.strip {
	aspect-ratio: 1 / 3;
	border-radius: var(--r-sm);
	background-color: var(--sand);
	background-repeat: no-repeat;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: var(--sp-2);
	box-shadow: var(--shadow-1);
}

.strip b {
	font-size: var(--fs-xs);
	color: var(--accent-fg);
	background: rgba(27, 24, 20, 0.55);
	padding: 0 var(--sp-1);
	border-radius: var(--r-sm);
}

.atelier-banen-info {
	font-size: var(--fs-sm);
	margin: 0 0 var(--sp-2);
}

/* --------------------------------------------------------------------------
   Afronding: prijsdetail, winkelwagen, offerte
   -------------------------------------------------------------------------- */

.dl {
	display: grid;
	gap: var(--sp-2);
	margin: var(--sp-4) 0;
	padding: 0;
}

.dl > div {
	display: flex;
	justify-content: space-between;
	gap: var(--sp-3);
	font-size: var(--fs-sm);
}

.dl dt {
	color: var(--muted);
	font-weight: var(--fw-normaal);
}

.dl dd {
	margin: 0;
	font-weight: var(--fw-medium);
}

.price {
	font-family: var(--font-display);
	font-size: var(--fs-2xl);
	margin: var(--sp-2) 0;
}

.atelier-non-woven {
	font-size: var(--fs-sm);
}

[data-offerte-form][hidden],
[data-winkelwagen-blok][hidden] {
	display: none;
}

.atelier-offerte-gelukt {
	color: var(--succes);
	font-size: var(--fs-sm);
}

.atelier-offerte-gelukt[hidden],
[data-winkelwagen-fout][hidden] {
	display: none;
}

/* --------------------------------------------------------------------------
   Kleurenpalet-kiezer
   -------------------------------------------------------------------------- */

.atelier-kleuren-kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	flex-wrap: wrap;
	margin-bottom: var(--sp-2);
}

.atelier-kleuren-kop .veld-label {
	margin: 0;
}

.dw-kleuren-dialoog {
	width: min(36rem, calc(100% - 2rem));
	max-height: calc(100dvh - 4rem);
	overflow-y: auto;
	border: 0;
	border-radius: var(--r-xl);
	padding: var(--sp-6);
	background: var(--surface);
	color: var(--fg);
	box-shadow: var(--shadow-3);
}

.dw-kleuren-dialoog::backdrop {
	background: color-mix(in srgb, var(--ink) 45%, transparent);
}

.dw-kleuren-dialoog__kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	margin-bottom: var(--sp-4);
}

.dw-kleuren-dialoog__kop h2 {
	font-size: var(--fs-lg);
	margin: 0;
}

.dw-paletten-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
	gap: var(--sp-3);
	margin: var(--sp-4) 0;
}

.dw-palet-kaart {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-2);
	padding: var(--sp-3);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	background: var(--bg-elevated);
	text-align: left;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dw-palet-kaart:hover,
.dw-palet-kaart:focus-visible {
	border-color: var(--accent);
	box-shadow: var(--shadow-1);
}

.dw-palet-kaart__swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.dw-palet-kaart__swatches i {
	width: 1.1rem;
	height: 1.1rem;
	border-radius: var(--r-rond);
	border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}

.dw-palet-kaart__naam {
	font-size: var(--fs-sm);
	font-weight: 500;
}

.dw-kleuren-dialoog__acties {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	margin-top: var(--sp-5);
}

.dw-kleuren-eigen p.muted {
	margin-top: 0;
}

.dw-eigen-kleur-rij {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin-bottom: var(--sp-4);
}

.dw-eigen-kleur-rij input[type="color"] {
	width: 2.75rem;
	height: 2.75rem;
	padding: 2px;
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	background: var(--surface);
	flex-shrink: 0;
}

.dw-eigen-kleur-rij input[type="text"] {
	flex: 1;
	min-width: 0;
}

[data-eigen-kleuren-lijst]:empty {
	display: none;
}

[data-eigen-kleuren-lijst] {
	margin-bottom: var(--sp-2);
}

@media (min-width: 640px) {
	.dw-kleuren-dialoog__acties {
		flex-direction: row;
	}

	.dw-kleuren-dialoog__acties .btn-full {
		flex: 1;
	}
}

/* --------------------------------------------------------------------------
   Beweging terughoudend
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.voortgang-balk span {
		transition: none;
	}

	.dw-palet-kaart {
		transition: none;
	}
}