/**
 * De zetwerk configurator.
 *
 * ⛔ DE EERSTE OPZET WAS EEN GEREEDSCHAPSKIST, GEEN WINKEL. Drie kolommen naast
 * elkaar met een lange lijst profielen links, een grote lege grijze bak in het
 * midden met een dun lijntje erin, en rechts negentien invulvelden onder elkaar
 * met bij elk een zinnetje eronder. De bestelknop stond zo ver naar beneden dat
 * je hem alleen vond door te scrollen, en de prijs zag je pas als je er was.
 *
 * Deze opzet doet het andersom:
 *   - de tekening vult zijn vak, dat is waar de klant naar kijkt
 *   - de velden staan in een raster van twee, dus alles past onder de tekening
 *   - de prijs en de knop staan in een kaartje dat meeloopt bij het scrollen,
 *     zodat je altijd ziet wat het kost en altijd kunt bestellen
 */

/* ⛔ DRIE POGINGEN VOOR EEN TEKENBLAD DAT BREED GENOEG IS. Wat er niet werkte
   en waarom, zodat niemand het nog eens probeert:

   1. minmax(0, 1fr) op de kolommen. Loste wel op dat de velden zichzelf breed
      duwden, maar het geheel bleef 820 px.
   2. Eigen width en margin-left op .wjzw. WordPress zet op elk kind van een
      is-layout-constrained blok margin-left: auto !important, en daar komt een
      gewone regel niet langs.
   3. De klasse alignwide erop. Die pakte wel, max-width werd netjes 1280 px,
      maar de breedte bleef 820. Reden: niet alleen de tekstkolom is
      constrained, het blok eromheen ook, en een kind kan niet breder worden
      dan de ouder waar het in staat.

   Wat wel werkt: echt uitbreken. De tekstkolom staat midden in het venster, dus
   50% van die kolom is het midden van de bladzijde. Vanaf daar de halve
   gewenste breedte terug en het staat gecentreerd op het scherm.

   ⚠ Het !important moet hier, want het staat tegenover het !important van
   WordPress zelf.
   ⚠ De min() met 100vw erin voorkomt dat hij op een smal scherm buiten beeld
   steekt en de pagina zijwaarts laat schuiven. */
.wjzw.alignwide {
	--wjzw-breed: min(var(--wp--style--global--wide-size, 1280px), calc(100vw - 56px));

	width: var(--wjzw-breed);
	max-width: none;
	margin-left: calc(50% - var(--wjzw-breed) / 2) !important;
	margin-right: auto !important;
}

.wjzw {
	--wjzw-lijn: var(--wp--preset--color--line, #ddd9d2);
	--wjzw-grijs: var(--wp--preset--color--steel, #6b7278);
	--wjzw-inkt: var(--wp--preset--color--ink, #1d2125);
	--wjzw-rood: var(--wp--preset--color--oxide, #bb1e10);
	--wjzw-vlak: var(--wp--preset--color--panel, #f4f4f2);

	display: grid;
	grid-template-columns: 232px minmax(0, 1fr) 268px;
	gap: 26px;
	align-items: start;
	margin: 0 0 48px;
	color: var(--wjzw-inkt);
}

.wjzw * {
	box-sizing: border-box;
}

/* ------------------------------------------------------------- de profielen */

.wjzw-kop,
.wjzw-veldkop {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--wjzw-grijs);
	margin: 0 0 10px;
	font-weight: 700;
}

.wjzw-veldkop {
	margin: 22px 0 10px;
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.wjzw-veldkop:first-child {
	margin-top: 0;
}

/* ⛔ DE EERSTE KOP PLAKTE AAN DE TEKENING. Gemeten 22 september op 758 en op 375
   pixels: tussen het tekenvak en "De vlakken" zat 0 px, terwijl boven "Zethoek"
   en boven "Uw bestelling" 22 px staat. Die eerste kop is het eerste kind van
   het formulier, dus de regel hierboven haalde zijn marge weg, en het formulier
   zelf had er niets voor in de plaats. De ruimte hoort dus op het formulier en
   niet op de kop, anders springt hij weer weg zodra er iets voor komt. */
.wjzw-form {
	margin-top: 22px;
}

.wjzw-veldkop span {
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	font-size: 0.78rem;
	color: var(--wjzw-grijs);
}

.wjzw-groep {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wjzw-rood);
	margin: 16px 0 6px;
	font-weight: 700;
}

.wjzw-groep:first-of-type {
	margin-top: 0;
}

.wjzw-groeprij {
	display: grid;
	gap: 6px;
}

/* ⚠ DE TEGEL IS EEN KNOP, DUS HIJ MOET ER OOK ALS EEN KNOP UITZIEN.
   Eerst was het een wit vlak met een dun randje en een plaatje van 54 px hoog.
   Dat leest als een plaatje, niet als iets waar je op klikt. Nu een duidelijke
   staat voor gekozen, hover en toetsenbord. */
.wjzw-model {
	display: grid;
	grid-template-columns: 62px 1fr;
	align-items: center;
	gap: 10px;
	width: 100%;
	text-align: left;
	background: #fff;
	border: 1px solid var(--wjzw-lijn);
	border-radius: 4px;
	padding: 8px 10px;
	cursor: pointer;
	font: inherit;
	color: inherit;
	transition: border-color 0.12s, background 0.12s;
}

.wjzw-model:hover {
	border-color: var(--wjzw-grijs);
	background: var(--wjzw-vlak);
}

.wjzw-model.aan {
	border-color: var(--wjzw-rood);
	background: #fdf3f2;
	box-shadow: inset 0 0 0 1px var(--wjzw-rood);
}

.wjzw-model:focus-visible {
	outline: 2px solid var(--wjzw-rood);
	outline-offset: 2px;
}

.wjzw-model svg {
	display: block;
	width: 100%;
	height: 40px;
	color: var(--wjzw-inkt);
}

.wjzw-tekst {
	min-width: 0;
}

.wjzw-naam {
	display: block;
	font-weight: 600;
	font-size: 0.86rem;
	line-height: 1.25;
}

.wjzw-tel {
	display: block;
	font-size: 0.72rem;
	color: var(--wjzw-grijs);
	margin-top: 1px;
}

/* -------------------------------------------------------------- de tekening */

.wjzw-tekenblad {
	background: var(--wjzw-vlak);
	border: 1px solid var(--wjzw-lijn);
	border-radius: 5px;
	padding: 12px 16px 8px;
}

.wjzw-tekenkop {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	font-size: 0.84rem;
	color: var(--wjzw-grijs);
	margin-bottom: 2px;
}

.wjzw-tekenkop strong {
	color: var(--wjzw-inkt);
	font-size: 0.95rem;
}

.wjzw-blad {
	height: 380px;
	color: var(--wjzw-inkt);
}

.wjzw-blad svg {
	display: block;
}

.wjzw-let {
	font: 700 13px/1 Barlow, Arial, sans-serif;
	fill: var(--wjzw-rood);
}

.wjzw-maat {
	font: 600 11px/1 Barlow, Arial, sans-serif;
	fill: var(--wjzw-grijs);
}

.wjzw-hoek {
	font: 600 10.5px/1 Barlow, Arial, sans-serif;
	fill: var(--wjzw-grijs);
}

.wjzw-kleur {
	stroke: var(--wjzw-rood);
}

/* Buitenzijde en binnenzijde bij het langste vlak, 23 september. Klein en
   grijs, want het is uitleg en geen maat. De gekleurde kant in rood, zoals
   de pijlen die ernaar wijzen. */
.wjzw-zijde {
	font: 600 11px/1 Barlow, Arial, sans-serif;
	letter-spacing: .02em;
	fill: var(--wjzw-grijs);
}

.wjzw-zijde-kleur {
	fill: var(--wjzw-rood);
}

.wjzw-kleurvlak {
	fill: var(--wjzw-rood);
}

.wjzw-streep {
	stroke: var(--wjzw-grijs);
	stroke-width: 0.8;
	opacity: 0.55;
}

.wjzw-punt {
	fill: var(--wjzw-rood);
}

/* ----------------------------------------------------------------- de velden

   ⛔ HET RASTER IS DE HELE REDEN DAT DIT WERKT. Negentien velden onder elkaar
   is een formulier waar niemand doorheen komt. In twee kolommen passen ze
   allemaal binnen een schermhoogte, en dan zie je de tekening en de velden
   tegelijk terwijl je typt. Dat is het hele punt van een configurator. */

.wjzw-raster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
	gap: 10px 12px;
}

.wjzw-veld {
	min-width: 0;
}

.wjzw-veld.wjzw-breed {
	grid-column: 1 / -1;
}

.wjzw-veld label {
	display: block;
	font-size: 0.82rem;
	font-weight: 700;
	margin-bottom: 3px;
	color: var(--wjzw-inkt);
}

.wjzw-veld label small {
	font-weight: 400;
	color: var(--wjzw-grijs);
	font-size: 0.72rem;
	margin-left: 4px;
}

.wjzw-in {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--wjzw-lijn);
	border-radius: 3px;
	background: #fff;
	overflow: hidden;
}

/* ⛔ BIJ DE MEESTE PROFIELEN IS ER MAAR EEN GEKLEURDE ZIJDE. Op hun bladen van
   15 september staat bij vijftien van de achttien "alleen: buitenzijde", en bij
   de binnenhoek alleen de binnenzijde. Een keuzelijst met een keuze is geen
   keuze, dus dan staat er gewoon wat het is. Zelfde hoogte en dezelfde rand als
   een veld, anders springt de rij. */
/* ⛔ display OP EEN KLASSE WINT VAN hidden. Gemeten: bij de vlakke nok stond de
   keuzelijst EN de losse tekst naast elkaar, allebei "Binnenzijde van de nok".
   Het script zette hidden netjes aan, maar de regel hieronder zette hem met
   display: flex weer zichtbaar. Een eigen regel voor hidden lost dat op. */
.wjzw-een-zijde[hidden] {
	display: none;
}

.wjzw-een-zijde {
	display: flex;
	align-items: center;
	padding: 9px 10px;
	min-height: 42px;
	font-size: 0.92rem;
	color: var(--wjzw-inkt);
}

.wjzw-in input,
.wjzw-in select {
	flex: 1;
	min-width: 0;
	width: 100%;
	padding: 9px 10px;
	border: 0;
	font: inherit;
	font-size: 0.92rem;
	background: transparent;
	min-height: 42px;
	color: inherit;
}

/* ⛔ EEN KEUZELIJST MOET ERUITZIEN ALS EEN KEUZELIJST. Op vrijwel elk van de
   achttien bladen die Wijdeven op 21 september terugstuurde staat er een pijltje
   bij getekend met "pijltjes zodat men kan zien dat men kan kiezen". Het vakje
   had geen rand en geen pijl, dus het las als een regel tekst.
   De pijl zit in de achtergrond en niet in een extra element, zodat hij nooit
   los kan raken van het vakje, en er komt ruimte rechts zodat een lange
   kleurnaam er niet onderdoor loopt. */
.wjzw-in select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 34px;
	cursor: pointer;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2320262a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px 8px;
}

.wjzw-in select::-ms-expand {
	display: none;
}

/* De regel onder de kleurkeuze, van hun eigen bladen. Klein en grijs, want het
   is een uitweg voor de enkeling die zijn kleur mist, geen hoofdzaak. */
.wjzw-hint {
	margin: 6px 0 0;
	font-size: 0.82rem;
	line-height: 1.45;
	color: var(--wjzw-grijs, #525b61);
}

.wjzw-hint a {
	color: inherit;
	text-underline-offset: 2px;
}

.wjzw-in input:focus,
.wjzw-in select:focus {
	outline: 0;
}

.wjzw-in:focus-within {
	border-color: var(--wjzw-rood);
	box-shadow: inset 0 0 0 1px var(--wjzw-rood);
}

.wjzw-in span {
	display: flex;
	align-items: center;
	padding: 0 10px;
	font-size: 0.8rem;
	color: var(--wjzw-grijs);
	background: var(--wjzw-vlak);
	border-left: 1px solid var(--wjzw-lijn);
}

/* Een maat die de pers niet haalt moet je zien terwijl je typt, niet pas als
   je klikt. */
.wjzw-buiten .wjzw-in {
	border-color: var(--wjzw-rood);
	background: #fdf3f2;
}

/* Een hoek die vast staat, zoals de 90 graden van het U-profiel. */
.wjzw-in-vast {
	display: flex;
	align-items: center;
	padding: 0 10px;
	min-height: 44px;
	font-size: 0.92rem;
	color: var(--wjzw-grijs);
	background: var(--wjzw-vlak);
}

/* ------------------------------------------------------------ prijs en knop */

.wjzw-prijskaart {
	position: sticky;
	top: 20px;
	background: #fff;
	border: 1px solid var(--wjzw-lijn);
	border-radius: 5px;
	padding: 18px 18px 16px;
}

.wjzw-prijslabel {
	display: block;
	font-size: 0.74rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wjzw-grijs);
	font-weight: 700;
}

.wjzw-groot {
	display: block;
	font-family: "Barlow Condensed", Barlow, Arial, sans-serif;
	font-size: 2.1rem;
	font-weight: 700;
	line-height: 1.1;
	margin: 2px 0 1px;
}

.wjzw-klein {
	display: block;
	font-size: 0.8rem;
	color: var(--wjzw-grijs);
}

.wjzw-som {
	width: 100%;
	border-collapse: collapse;
	margin: 14px 0 12px;
	font-size: 0.82rem;
}

.wjzw-som th,
.wjzw-som td {
	text-align: left;
	padding: 5px 0;
	border-bottom: 1px solid var(--wjzw-lijn);
	font-weight: 400;
	color: var(--wjzw-grijs);
}

.wjzw-som td {
	text-align: right;
	color: var(--wjzw-inkt);
	white-space: nowrap;
}

.wjzw-som .wjzw-stuk th,
.wjzw-som .wjzw-stuk td {
	border-bottom: 0;
	font-weight: 700;
	color: var(--wjzw-inkt);
	padding-top: 8px;
}

.wjzw-melding {
	margin: 0 0 10px;
	font-size: 0.82rem;
	line-height: 1.45;
}

.wjzw-melding:empty {
	display: none;
}

.wjzw-melding.wjzw-waarschuwing {
	color: #8a6508;
}

.wjzw-melding.wjzw-fout {
	color: var(--wjzw-rood);
	font-weight: 600;
}

.wjzw-melding.wjzw-goed {
	color: #155a2b;
	font-weight: 600;
}

.wjzw-knop {
	display: block;
	width: 100%;
	background: var(--wjzw-rood);
	color: #fff;
	border: 0;
	border-radius: 3px;
	padding: 14px 18px;
	font-family: "Barlow Condensed", Barlow, Arial, sans-serif;
	font-size: 1.02rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	cursor: pointer;
	min-height: 52px;
}

.wjzw-knop:hover {
	background: #8f1a0d;
}

.wjzw-knop[disabled] {
	opacity: 0.6;
	cursor: default;
}

.wjzw-lever {
	margin: 8px 0 0;
	font-size: 0.74rem;
	color: var(--wjzw-grijs);
	text-align: center;
}

/* ------------------------------------------------------ als hij nog uit staat */

.wjzw-uit {
	max-width: 620px;
	padding: 22px 24px;
	background: var(--wp--preset--color--panel, #f4f4f2);
	border-left: 3px solid var(--wp--preset--color--oxide, #bb1e10);
	border-radius: 4px;
	line-height: 1.6;
}

.wjzw-uit p {
	margin: 0 0 10px;
}

.wjzw-uit p:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------- in de winkelwagen */

.wjzw-wagen-tek svg {
	display: block;
	width: 100%;
	height: auto;
	color: var(--wp--preset--color--ink, #1d2125);
}

/* ------------------------------------------------------------- kleiner scherm

   Onder 1160 gaat de prijskaart onder de tekening staan, want drie kolommen
   naast elkaar worden dan alle drie te smal. Onder 900 gaat ook de lijst met
   profielen naar boven, als een raster van tegels in plaats van een kolom. */

@media (max-width: 1160px) {
	.wjzw {
		grid-template-columns: 216px minmax(0, 1fr);
	}

	.wjzw-prijs {
		grid-column: 2;
	}

	.wjzw-prijskaart {
		position: static;
	}
}

/* De gekozen-balk hoort bij de telefoon en staat op een desktop nooit aan. */
.wjzw-gekozen {
	display: none;
}

/* ⛔ OP EEN TELEFOON STONDEN VIJFTIEN TEGELS BOVEN DE TEKENING.
   Gemeten op een scherm van 844 hoog: je moest ruim twee schermen scrollen
   voordat je de doorsnede of de prijs zag. Wie het profiel al weet wil meteen
   maten intypen, en die zit al die tijd te vegen.

   ⛔ DE EERSTE OPLOSSING WAS ERGER DAN DE KWAAL. De lijst kreeg een eigen
   hoogte van 44vh met een eigen schuifbalk. Gemeten 11 september op 390 x 812:
   een venster van 355 px met 1.351 px aan tegels erin. Twee schuifgebieden over
   elkaar op een aanraakscherm is een val. Je veegt en of de pagina staat stil
   of de lijst staat stil, en de profielen onderin ziet niemand ooit.
   Mark, 10 september: "does not look fine on mobile. On desktop it is good."

   Nu klapt de lijst dicht. Er staat een balk met de doorsnede en de naam van
   het gekozen profiel en een knop om te wisselen. De tekening staat meteen in
   beeld, alle zeventien profielen blijven bereikbaar, en er is maar een ding
   dat schuift: de pagina zelf. */
@media (max-width: 900px) {
	.wjzw-lijst {
		padding: 10px;
		border: 1px solid var(--wjzw-lijn);
		border-radius: 5px;
		background: var(--wjzw-vlak);
	}

	.wjzw-kiezer.wjzw-ingeklapt .wjzw-lijst {
		display: none;
	}

	.wjzw-kiezer.wjzw-ingeklapt .wjzw-gekozen {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 10px 12px;
		border: 1px solid var(--wjzw-lijn);
		border-radius: 5px;
		background: var(--wjzw-vlak);
	}

	.wjzw-gekozen-mini {
		flex: 0 0 auto;
		width: 52px;
		color: var(--wjzw-inkt);
	}

	.wjzw-gekozen-mini svg {
		display: block;
		width: 52px;
		height: 22px;
	}

	.wjzw-gekozen-naam {
		flex: 1 1 auto;
		min-width: 0;
		font-weight: 600;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.wjzw-anders {
		flex: 0 0 auto;
		min-height: 40px;
		padding: 8px 14px;
		border: 1px solid var(--wjzw-lijn);
		border-radius: 4px;
		background: #fff;
		font: inherit;
		font-size: 0.86rem;
		cursor: pointer;
	}
}

@media (max-width: 900px) {
	.wjzw.alignwide {
		width: auto;
		margin-left: auto !important;
	}

	.wjzw {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.wjzw-prijs {
		grid-column: 1;
	}

	.wjzw-groeprij {
		grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	}

	.wjzw-blad {
		height: 280px;
	}
}

/* ⛔ EEN PRIJS DIE JE NIET ZIET IS GEEN PRIJS.
   Op een telefoon stond de prijskaart 2178 px naar beneden, tweeeneenhalf
   scherm onder de tekening. Sticky hielp daar niets: een sticky element blijft
   binnen de doos van zijn ouder, en die doos is precies zo hoog als de kaart
   zelf, dus er is niets om in te blijven plakken.

   Op een klein scherm wordt het daarom een vaste balk onderaan het venster met
   alleen het bedrag en de knop erin. De opsomming van materiaal en zetkanten
   valt weg, die is op een telefoon toch niet waar het om gaat. Onder aan de
   pagina komt ruimte bij zodat de balk niets afdekt. */
@media (max-width: 900px) {
	.wjzw {
		padding-bottom: 84px;
	}

	.wjzw-prijskaart {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		z-index: 40;
		border: 0;
		border-top: 1px solid var(--wjzw-lijn);
		border-radius: 0;
		box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.12);
		padding: 10px 16px;
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: 12px;
	}

	.wjzw-prijskaart .wjzw-som,
	.wjzw-prijskaart .wjzw-lever {
		display: none;
	}

	.wjzw-prijslabel {
		font-size: 0.66rem;
	}

	.wjzw-groot {
		font-size: 1.5rem;
		margin: 0;
	}

	.wjzw-klein {
		font-size: 0.72rem;
	}

	.wjzw-knop {
		grid-row: 1 / span 3;
		grid-column: 2;
		width: auto;
		padding: 12px 20px;
		min-height: 48px;
	}

	.wjzw-melding {
		grid-column: 1 / -1;
		margin: 0;
		font-size: 0.76rem;
	}
}

@media (max-width: 560px) {
	.wjzw-groeprij {
		grid-template-columns: 1fr 1fr;
	}

	.wjzw-model {
		grid-template-columns: 1fr;
		gap: 2px;
	}

	.wjzw-blad {
		height: 230px;
	}

	.wjzw-raster {
		grid-template-columns: 1fr 1fr;
	}

}