/**
 * DODO Rekenmachine, voorkant.
 *
 * Bewust sober en zonder eigen lettertype: dit draait in een thema dat zijn
 * eigen typografie meebrengt. Alleen structuur, ruimte en de statussen die de
 * bezoeker nodig heeft.
 */

/* Alles binnen de rekenmachine rekent de rand en de padding mee in de breedte.
   Zonder dit erft een invoerveld de rekenwijze van het thema, en dan is
   `width: 100%` plus padding breder dan het blok waar het in staat. */
.dodo-rm,
.dodo-rm *,
.dodo-rm *::before,
.dodo-rm *::after {
	box-sizing: border-box;
}


.dodo-rm {
	--dodo-rm-rand: #d8dde3;
	--dodo-rm-grond: #f0f0f0;
	--dodo-rm-accent: #1d4ed8;
	/* Het uitlegbolletje. Donkercyaan: opvallend genoeg om te zien staan,
	   rustiger dan het accentblauw, en 5,4:1 tegen wit. */
	--dodo-rm-info: #0e7490;
	--dodo-rm-fout: #b32d2e;
	--dodo-rm-rustig: #5b6672;
	/* Het zand uit de huisstijl (--sand in shop.css), zo licht dat het naast een
	   wit blok rustig blijft. Warm, en daarmee te onderscheiden van het koele
	   tintje van het prijsblok. */
	--dodo-rm-extra: #faf6ef;
	--dodo-rm-extra-rand: #e9dfcc;

	max-width: 46rem;
	margin: 0 0 2rem;
}

.dodo-rm__titel {
	margin: 0 0 1rem;
}

/* Zoeken -------------------------------------------------------------- */

.dodo-rm__zoekveld {
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--dodo-rm-rand);
	border-radius: 6px;
	font: inherit;
}

.dodo-rm__resultaten {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
	max-height: 18rem;
	overflow-y: auto;
	border: 1px solid var(--dodo-rm-rand);
	border-radius: 6px;
}

.dodo-rm__resultaten:empty {
	border: 0;
}

.dodo-rm__resultaat {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	width: 100%;
	padding: 0.6rem 0.75rem;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--dodo-rm-rand);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.dodo-rm__resultaat:hover,
.dodo-rm__resultaat:focus-visible {
	background: #f2f5f9;
}

.dodo-rm__resultaten li:last-child .dodo-rm__resultaat {
	border-bottom: 0;
}

.dodo-rm__bron {
	flex: none;
	font-size: 0.82em;
	color: var(--dodo-rm-rustig);
}

.dodo-rm__leeg {
	padding: 0.6rem 0.75rem;
	color: var(--dodo-rm-rustig);
}

/* Configuratie -------------------------------------------------------- */

.dodo-rm__kop {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin-bottom: 1rem;
}

.dodo-rm__product {
	margin: 0;
	font-size: 42px;
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: -.01em;
	text-wrap: balance;
}

/* Op een telefoon is tweeënveertig pixels bijna de halve schermbreedte; daar
   mag de naam meebuigen zonder dat de verhouding met de rest verandert. */
@media (max-width: 600px) {
	.dodo-rm__product {
		font-size: 30px;
	}
}

/* De knoppen rechts van de productnaam. Twee stuks: opnieuw beginnen met dit
   product, en terug naar het zoeken. */
.dodo-rm__kopknoppen {
	display: flex;
	flex: none;
	align-items: baseline;
	gap: 1rem;
}

.dodo-rm__terug,
.dodo-rm__opnieuw {
	flex: none;
	background: none;
	border: 0;
	padding: 0;
	color: var(--dodo-rm-accent);
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

/*
 * Alleen voor een beheerder, links boven de keuzes: van welke leverancier dit
 * product komt, het product bij hen en het lampje voor de ideeënlijst
 * (toonBeheer() in calculator.js). "Opnieuw beginnen" blijft rechts; op een
 * smal scherm schuift het eronder.
 */
.dodo-rm__kop.heeft-beheer {
	flex-wrap: wrap;
}

.dodo-rm__beheer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.9rem;
	margin-right: auto;
	font-size: 0.875rem;
	line-height: 1.4;
}

/* Dezelfde kleuren als de pillen in Aanbod en op de tegels. */
.dodo-rm__leverancier {
	padding: 0.15em 0.65em;
	border-radius: 999px;
	background: #6c7781;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
}

.dodo-rm__leverancier--printcom {
	background: #5394a7;
}

.dodo-rm__leverancier--probo {
	background: #b3332e;
}

.dodo-rm__leverancier--drukwerkdeal {
	background: #ee7203;
}

.dodo-rm__leverancier--clipper {
	background: #000;
}

.dodo-rm__bij {
	color: var(--dodo-rm-accent);
	text-decoration: underline;
	white-space: nowrap;
}

.dodo-rm__bij:focus-visible {
	outline: 2px solid var(--dodo-rm-accent);
	outline-offset: 2px;
}

.dodo-rm__veld {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.dodo-rm__label {
	font-size: 0.9em;
	font-weight: 600;
}

.dodo-rm__select,
.dodo-rm__getal {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	padding: 0.5rem 0.6rem;
	border: 1px solid var(--dodo-rm-rand);
	border-radius: 6px;
	font: inherit;
	background: #fff;
}

/* Een uitgeschakelde optie blijft staan: dat iets niet kan is informatie, en
   weghalen zou de bezoeker laten zoeken naar iets dat er net nog wel was. */
.dodo-rm__select option:disabled {
	color: #98a2ad;
}

/* De groepskoppen komen van de leverancier zelf: Materiaal, Oplage, Formaat. */
.dodo-rm__groep {
	grid-column: 1 / -1;
	margin: 0.75rem 0 -0.25rem;
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--dodo-rm-rustig);
}

.dodo-rm__velden > .dodo-rm__groep:first-child {
	margin-top: 0;
}

/* Snelkeuzes bij een vrij aantal: dezelfde knopjes als de maten en de
   tegeltjes in de keuzelijsten (hoeken van 7px, lichte rand, de gekozen
   lichtblauw met een blauwe rand), zodat alles in één stijl is. */
.dodo-rm__snelkeuze {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin-top: 0.35rem;
}

.dodo-rm__snel {
	min-width: 2.75rem;
	padding: .35rem .65rem;
	border: 1px solid var(--dodo-rm-rand);
	border-radius: 7px;
	background: #fff;
	color: inherit;
	font: inherit;
	font-size: 16px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	text-align: center;
	cursor: pointer;
}

.dodo-rm__snel:hover,
.dodo-rm__snel:focus-visible {
	background: var(--dodo-rm-grond);
}

.dodo-rm__snel:disabled {
	opacity: .35;
	cursor: not-allowed;
}

.dodo-rm__snel.is-actief {
	border-color: var(--dodo-rm-accent);
	background: rgb(29 78 216 / .1);
	color: var(--dodo-rm-accent);
	font-weight: 600;
}

/* Uitkomst ------------------------------------------------------------ */

.dodo-rm__uitkomst {
	margin-top: 1.25rem;
	min-height: 3rem;
}

.dodo-rm__prijs {
	padding: 1rem 1.25rem;
	border: 1px solid var(--dodo-rm-rand);
	border-radius: 8px;
	background: #f7f9fc;
}

.dodo-rm__bedrag {
	margin: 0;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
}

/* De stukprijs naast het bedrag: kleiner en rustiger, en als geheel naar de
   volgende regel als het blok te smal is. */
.dodo-rm__per-stuk {
	display: inline-block;
	color: var(--dodo-rm-rustig);
	font-size: 1.25rem;
	font-weight: 400;
	white-space: nowrap;
}

.dodo-rm__toelichting {
	margin: 0.35rem 0 0;
	color: var(--dodo-rm-rustig);
	font-size: 0.9em;
}

/* Wat er onder het bedrag staat: aantal, wat er niet in zit, de stukprijs. Elk
   op een eigen regel, dicht op elkaar zodat het \u00e9\u00e9n blokje blijft. */
.dodo-rm__regels {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	margin-top: .45rem;
}

/* Aantal, btw, verzending en levertijd: allemaal even groot (15 px). */
.dodo-rm__regels > p {
	margin: 0;
	font-size: .9375rem;
}

.dodo-rm__melding {
	margin: 0;
	color: var(--dodo-rm-rustig);
}

/* "Kies eerst ..." en een weigering in het prijsblok: goed leesbaar (17 px). */
.dodo-rm__uitkomst > .dodo-rm__melding,
.dodo-rm__uitkomst > .dodo-rm__fout {
	font-size: 1.0625rem;
}

.dodo-rm__fout {
	margin: 0;
	color: var(--dodo-rm-fout);
}

/* ---------------------------------------------------------------------------
 * Keuzes als uitklapveld
 *
 * Per leverancier in te stellen bij Shop. Wat een lijst is wordt een veld; wat
 * beeld heeft blijft een tegel, want daar kies je op de foto. Bij flyers
 * scheelt dat driekwart van de hoogte.
 * ------------------------------------------------------------------------ */

/* Een blok met een veld is niet meer dan zijn kop plus het veld: strakker
   binnenwerk, zodat de blokken naast elkaar op dezelfde hoogte uitkomen. */
.dodo-rm__paneel--veld {
	padding: .55rem .6rem .6rem;
}

/* Eén regel voor de kop, anders lopen de velden ernaast uit de pas. */
.dodo-rm__paneel--veld .dodo-rm__paneel-titel {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.dodo-rm__veldkeuze {
	position: relative;
}

.dodo-rm__kies {
	display: flex;
	align-items: center;
	gap: .5rem;
	width: 100%;
	min-height: 2.6rem;
	padding: .45rem .6rem;
	border: 1px solid var(--dodo-rm-rand);
	border-radius: 8px;
	background: #fff;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.dodo-rm__kies:hover {
	border-color: var(--dodo-rm-accent);
}

.dodo-rm__kies:focus-visible {
	outline: 2px solid var(--dodo-rm-accent);
	outline-offset: 1px;
}

.dodo-rm__kies[aria-expanded="true"] {
	border-color: var(--dodo-rm-accent);
	box-shadow: 0 0 0 3px rgb(29 78 216 / .12);
}

/* De gekozen waarde op één regel; staat er iets langs bij, dan kort hij af en
   staat het volledige woord in de tooltip. */
.dodo-rm__kies-waarde {
	flex: 1;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.dodo-rm__kies-waarde.is-leeg {
	color: var(--dodo-rm-rustig);
}

.dodo-rm__kies-pijl {
	flex: none;
	width: .55rem;
	height: .55rem;
	border-right: 2px solid var(--dodo-rm-rustig);
	border-bottom: 2px solid var(--dodo-rm-rustig);
	transform: rotate(45deg) translate(-2px, -2px);
}

/* Een smalle lijst is minstens zo breed als het veld, en breder als een optie
   anders niet op één regel past ("Opdikkend hoogglans uv-lak spot (40 μm)"),
   tot 30rem. Hoog genoeg voor een lijst met een paar kopjes erin, en met wat
   binnenruimte rond de tegeltjes. */
.dodo-rm__veldlijst {
	position: absolute;
	z-index: 30;
	left: 0;
	right: auto;
	top: calc(100% + 4px);
	min-width: 100%;
	width: max-content;
	max-width: min(30rem, calc(100vw - 24px));
	max-height: min(34rem, 80vh);
	overflow: auto;
	padding: .5rem;
	border: 1px solid var(--dodo-rm-rand);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 10px 28px rgb(16 34 59 / .16);
}

/* Veel keuzes? Dan klapt hij breed open, met de opties in kolommen, gecentreerd
   onder de keuzes. calculator.js zet bij het openen de breedte naar de langste
   naam (keuzeveld) en de plek (centreer); dit is de maat als dat niet lukt.
   Hoog genoeg voor de formaten van flyers in hun groepjes zonder te scrollen;
   bij de negenenzeventig materialen scroll je, en nooit hoger dan 80% van het
   scherm. Ruimer van binnen dan een smalle lijst: hier staat ook het zoekveld,
   en dat zat te krap. */
.dodo-rm__veldlijst.is-breed {
	width: min(66rem, 94vw);
	max-width: none;
	max-height: min(44rem, 80vh);
	padding: .75rem;
}

/* Kolommen van minstens 15rem: breed genoeg voor "A5 large liggend - 297 x 105
   mm" op één regel. Op een gewoon scherm zijn dat er vier, op een smaller
   scherm drie of twee. */
.dodo-rm__veldlijst.is-breed .dodo-rm__veldopties {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: .28rem .45rem;
}

.dodo-rm__veldlijst.is-rechts {
	left: auto;
	right: 0;
}

/* Het zoekveld staat alleen in een brede lijst (vanaf zeventien opties), met
   wat lucht eronder voor de eerste rij. Links even ver ingesprongen als de
   opties, zodat de tekst in één lijn staat. */
.dodo-rm__veldzoek {
	width: 100%;
	margin-bottom: .6rem;
	padding: .55rem;
	border: 1px solid var(--dodo-rm-rand);
	border-radius: 7px;
	background: var(--dodo-rm-grond);
	font: inherit;
	font-size: .9375rem;
}

/* Groepjes (Silk mc, A-formaten): elk groepje een blok met een kopje en zijn
   opties eronder. In een brede lijst lopen de blokken als krantenkolommen
   naast elkaar, zodat je veel groepjes tegelijk ziet; een groepje breekt nooit
   over twee kolommen. calculator.js zet de kolombreedte naar de langste naam. */
.dodo-rm__veldlijst.is-breed .dodo-rm__veldopties.is-gegroepeerd {
	display: block;
	column-width: 15rem;
	column-count: 4;
	column-gap: 1.5rem;
}

.dodo-rm__veldgroep {
	break-inside: avoid;
	padding-bottom: .7rem;
}

/* Onder een kopje mogen de regels iets dichter op elkaar: het kopje houdt ze
   al bij elkaar. Zo passen de formaten van flyers zonder te scrollen, ook als
   tegeltjes met een rand. */
.dodo-rm__veldopties.is-gegroepeerd .dodo-rm__veldoptie {
	padding-block: .26rem;
}

/* Alleen maten (Dames, Heren): een compacte lijst onder het veld, net breed
   genoeg voor een rij knopjes tot 5XL. */
.dodo-rm__veldlijst.is-maten {
	max-width: min(34rem, calc(100vw - 24px));
	padding: .6rem;
}

/* Maten als knopjes op een rij, zoals in een kledingwinkel: XS S M L XL. */
.dodo-rm__veldgroep.is-maten {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	padding: 0 .55rem .7rem;
}

.dodo-rm__veldgroep.is-maten .dodo-rm__veldkop {
	flex: 0 0 100%;
	margin: 0 0 .15rem;
}

.dodo-rm__veldgroep.is-maten .dodo-rm__veldoptie {
	width: auto;
	min-width: 2.75rem;
	padding: .35rem .55rem;
	text-align: center;
}

/* Een maat die niet kan, doorgestreept: "(kan niet)" past niet op een knopje. */
.dodo-rm__veldgroep.is-maten .dodo-rm__veldoptie.is-geblokkeerd {
	text-decoration: line-through;
}

/* Geen marge boven het kopje maar binnenruimte: een marge valt weg bovenaan
   een kolom, en dan staan de kopjes niet meer op één hoogte. De streep loopt
   over de volle breedte van de tegeltjes, de tekst gelijk aan hun rand. */
.dodo-rm__veldkop {
	margin: 0 0 .3rem;
	padding: .3rem 0;
	border-bottom: 1px solid var(--dodo-rm-rand);
	color: var(--dodo-rm-rustig);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* Wat voorop hoort (Eigen formaat, Geen) staat boven de groepjes, over de
   volle breedte, en in een brede lijst naast elkaar. */
.dodo-rm__veldboven {
	padding-bottom: .5rem;
}

.dodo-rm__veldlijst.is-breed .dodo-rm__veldboven {
	column-span: all;
	display: flex;
	flex-wrap: wrap;
	gap: .28rem .45rem;
}

.dodo-rm__veldlijst.is-breed .dodo-rm__veldboven .dodo-rm__veldoptie {
	width: auto;
}

/* Tegeltjes onder elkaar (een smalle lijst, of een groepje) krijgen dezelfde
   ruimte als in het raster van de brede lijst. Maatknopjes niet: die staan in
   een rij met hun eigen tussenruimte. */
.dodo-rm__veldlijst:not(.is-breed) .dodo-rm__veldopties > .dodo-rm__veldoptie + .dodo-rm__veldoptie,
.dodo-rm__veldlijst:not(.is-breed) .dodo-rm__veldboven > .dodo-rm__veldoptie + .dodo-rm__veldoptie,
.dodo-rm__veldgroep:not(.is-maten) > .dodo-rm__veldoptie + .dodo-rm__veldoptie {
	margin-top: .28rem;
}

/* Elke keuze is een tegeltje met een lichte omlijning, net als de
   maatknopjes, in een brede én een smalle lijst: eenduidig, en elke keuze
   leest als iets om aan te klikken. De gekozen krijgt een blauwe rand. Elke
   regel op één regel: afgekort met puntjes in plaats van omvallen. */
.dodo-rm__veldoptie {
	display: block;
	width: 100%;
	padding: .4rem .55rem;
	border: 1px solid var(--dodo-rm-rand);
	border-radius: 7px;
	background: none;
	color: inherit;
	font: inherit;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-align: left;
	cursor: pointer;
}

/* Heel even, bij het openen: elke regel zo breed als zijn tekst, zodat
   calculator.js de langste naam kan meten. */
.dodo-rm__veldlijst.is-meten .dodo-rm__veldoptie {
	width: max-content;
}

.dodo-rm__veldoptie:hover,
.dodo-rm__veldoptie:focus-visible {
	background: var(--dodo-rm-grond);
}

.dodo-rm__veldoptie.is-gekozen {
	border-color: var(--dodo-rm-accent);
	background: rgb(29 78 216 / .1);
	color: var(--dodo-rm-accent);
	font-weight: 600;
}

.dodo-rm__veldoptie.is-geblokkeerd {
	color: var(--dodo-rm-rustig);
	opacity: .55;
	cursor: not-allowed;
}

.dodo-rm__veldleeg {
	margin: 0;
	padding: .45rem .55rem;
	color: var(--dodo-rm-rustig);
	font-size: .9375rem;
}

/* Op een telefoon geen kolommen: de lijst is even breed als het veld en staat
   onder elkaar. Alles wat breder is dan het scherm werkt daar toch niet. */
@media (max-width: 640px) {
	.dodo-rm__veldlijst,
	.dodo-rm__veldlijst.is-breed {
		left: 0;
		right: 0;
		width: auto;
		min-width: 0;
		max-width: none;
	}

	.dodo-rm__veldlijst.is-breed .dodo-rm__veldopties {
		grid-template-columns: 1fr;
	}

	.dodo-rm__veldlijst.is-breed .dodo-rm__veldopties.is-gegroepeerd {
		column-count: 1;
	}

	.dodo-rm__veldlijst.is-breed .dodo-rm__veldboven {
		display: block;
	}

	.dodo-rm__veldlijst.is-breed .dodo-rm__veldboven .dodo-rm__veldoptie {
		width: 100%;
	}

	/* Een lange naam loopt hier door naar een tweede regel: op een telefoon is
	   er geen muis om de hele naam in een tooltip te lezen. */
	.dodo-rm__veldoptie {
		white-space: normal;
		overflow-wrap: anywhere;
	}

	/* Zestien pixels, want onder die maat zoomt Safari op een iPhone de hele
	   pagina in zodra je het veld aantikt. Terugzoomen doet hij niet. */
	.dodo-rm__veldzoek {
		font-size: 16px;
	}
}

/* De streep tussen wat moet en wat mag. Over de volle breedte, zodat je ziet
   waar de verplichte keuzes ophouden; de afwerking staat eronder.

   Hij doet mee als blok in het raster (dodo-rm__paneel), maar is geen kaart:
   twee klassen, want de witte kaartopmaak staat verderop in dit bestand. */
.dodo-rm__paneel.dodo-rm__extras {
	border: 0;
	border-top: 1px solid var(--dodo-rm-extra-rand);
	border-radius: 0;
	padding: .7rem .2rem .1rem;
	background: none;
}

/* De blokken eronder in dezelfde tint, zodat de afwerking als één gebied leest
   en niet als losse kaarten tussen de verplichte keuzes. Twee klassen, want de
   witte kaartopmaak staat verderop in dit bestand. */
.dodo-rm .dodo-rm__paneel--extra {
	border-color: var(--dodo-rm-extra-rand);
	background: var(--dodo-rm-extra);
}

.dodo-rm__extras-kop {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .5rem;
}

.dodo-rm__extras-titel {
	font-weight: 600;
}

.dodo-rm__extras-tag {
	padding: .1rem .5rem;
	border-radius: 999px;
	border: 1px solid var(--dodo-rm-extra-rand);
	background: var(--dodo-rm-extra);
	color: var(--dodo-rm-rustig);
	font-size: .75rem;
}

/* Het blokje bovenin, naast de prijs: dezelfde tint als de afwerking zelf, met
   de schakelaar onder de regel in plaats van ernaast. */
.dodo-rm__extras-kaart .dodo-rm__extras-uitleg {
	margin-bottom: .5rem;
}

.dodo-rm__extras-kaart .dodo-rm__schakel {
	margin-left: 0;
}

/* Hoeveel extra's er zijn: een getal bij de titel, niet in de knop. */
.dodo-rm__extras-aantal {
	min-width: 1.5em;
	padding: .05rem .45rem;
	border-radius: 999px;
	background: var(--dodo-rm-rustig);
	color: #fff;
	font-size: .75rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

/* De schakelaar, dezelfde als de foto-opties in de beheerbalk: het schuifje
   draagt de stand, de tekst ernaast blijft staan. */
.dodo-rm__schakel {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	margin-left: auto;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: .875rem;
	cursor: pointer;
}

.dodo-rm__schakel-knop {
	position: relative;
	flex: 0 0 auto;
	width: 2.2em;
	height: 1.25em;
	border-radius: 999px;
	background: var(--dodo-rm-extra-rand);
	transition: background-color .15s ease;
}

.dodo-rm__schakel-knop::after {
	position: absolute;
	top: .15em;
	left: .15em;
	width: .95em;
	height: .95em;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgb(0 0 0 / .25);
	content: "";
	transition: transform .15s ease;
}

.dodo-rm__schakel.is-aan .dodo-rm__schakel-knop {
	background: var(--dodo-rm-accent);
}

.dodo-rm__schakel.is-aan .dodo-rm__schakel-knop::after {
	transform: translateX(.95em);
}

.dodo-rm__schakel:focus-visible {
	border-radius: 4px;
	outline: 2px solid var(--dodo-rm-accent);
	outline-offset: 2px;
}

.dodo-rm__extras-uitleg {
	margin: .2rem 0 0;
	color: var(--dodo-rm-rustig);
	font-size: .875rem;
}

/* Boven de keuzes: welke keuze er is losgelaten omdat hij niet samenging met
   wat je net aanklikte. Opvallend genoeg om te lezen, rustig genoeg om geen
   foutmelding te lijken — er is namelijk niets misgegaan. */
.dodo-rm__keuzemelding {
	margin: 0 0 1rem;
	padding: .6rem .8rem;
	border-left: 3px solid var(--dodo-rm-accent);
	background: var(--dodo-rm-grond);
	border-radius: 0 6px 6px 0;
	font-size: .9375rem;
}

/* Het controleblok voor de beheerder: hoort er zichtbaar bij te staan zonder
   de prijs te beconcurreren. Bezoekers krijgen het niet uit de route. De
   bedragen staan in één kolom, rechts uitgelijnd, zodat ze onder elkaar te
   lezen zijn. */
.dodo-rm__controle {
	margin: .75rem 0 0;
	padding-top: .6rem;
	border-top: 1px dashed currentColor;
	font-size: .8125rem;
	line-height: 1.45;
}

/* De losse regel bij een melding ("Beheerder: wat de leverancier zei"). */
p.dodo-rm__controle {
	color: var(--dodo-rm-rustig);
}

.dodo-rm__controle-kop {
	margin: 0 0 .3rem;
	font-weight: 700;
}

.dodo-rm__controle-lijst {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 1rem;
	row-gap: .1rem;
	align-items: baseline;
}

.dodo-rm__controle-bedrag {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.dodo-rm__controle-noot {
	grid-column: 1 / -1;
	margin: -.05rem 0 .2rem;
	color: var(--dodo-rm-rustig);
	font-size: .92em;
}

.dodo-rm__controle-streep {
	grid-column: 1 / -1;
	height: 0;
	margin: .3rem 0 .2rem;
	border-top: 1px solid currentColor;
	opacity: .3;
}

.dodo-rm__controle-winst {
	font-weight: 700;
}

/* De opslag van dit product (opslagRegel() in calculator.js): over de volle breedte.
   Sinds 0.99.5 staat hij boven het beheerblok in plaats van tussen de bedragen,
   vandaar de regel eronder: daar hoeft geen marge meer boven. */
.dodo-rm__controle > .dodo-rm__opslag {
	margin-top: 0;
}

.dodo-rm__opslag {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	grid-column: 1 / -1;
	margin: .15rem 0 .45rem;
	padding: .45rem .5rem;
	border-radius: 6px;
	background: rgb(0 0 0 / .04);
}

.dodo-rm__opslag-kop {
	font-weight: 600;
}

.dodo-rm__opslag-rij {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .3rem;
	white-space: nowrap;
}

.dodo-rm__opslag-veld {
	box-sizing: border-box;
	width: 3.6rem;
	padding: .2rem .35rem;
	border: 1px solid var(--dodo-rm-rand);
	border-radius: 4px;
	background: #fff;
	font: inherit;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.dodo-rm__opslag-veld:focus-visible,
.dodo-rm__opslag-knop:focus-visible {
	outline: 2px solid var(--dodo-rm-accent);
	outline-offset: 1px;
}

.dodo-rm__opslag-knop {
	margin-left: auto;
	padding: .2rem .6rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.dodo-rm__opslag-uitleg {
	color: var(--dodo-rm-rustig);
	font-size: .92em;
}

.dodo-rm__opslag-uitleg.is-fout {
	color: var(--dodo-rm-fout);
}

.dodo-rm__controle-winst.is-verlies {
	color: var(--dodo-rm-fout);
}

/* Gewicht en vervoerder: klein onder de winst, als ze bekend zijn. */
.dodo-rm__controle-extra {
	grid-column: 1 / -1;
	margin-top: .35rem;
	color: var(--dodo-rm-rustig);
	font-size: .92em;
}

/* Uitleg bij een keuze. Staat er alleen als de leverancier iets te zeggen
   heeft, en mag de keuzelijst zelf niet in de weg zitten. */
.dodo-rm__info {
	display: inline-flex;
	/* Niet meekrimpen. Een flexkind mag standaard wel krimpen, en naast een
	   lange bloktitel als "Afwerking voor alle zijden / per zijde" werd dit
	   rondje daardoor een platgedrukte ovaal. */
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 1.3em;
	height: 1.3em;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--dodo-rm-info, #0e7490);
	color: #fff;
	font-size: .82em;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.dodo-rm__info:hover,
.dodo-rm__info:focus-visible {
	filter: brightness(1.15);
}

.dodo-rm__uitleg:empty {
	display: none;
}

.dodo-rm__uitleg {
	margin: .35rem 0 0;
}

.dodo-rm__uitleg-regel {
	display: flex;
	gap: .5rem;
	align-items: flex-start;
	margin-bottom: .35rem;
}

.dodo-rm__uitleg-beeld {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	object-fit: contain;
	border-radius: 3px;
}

.dodo-rm__uitleg-tekst {
	margin: 0;
	font-size: .75rem;
	line-height: 1.4;
	opacity: .8;
}

/* ---------------------------------------------------------------------------
 * De carrousel
 *
 * Eén foto is gewoon een foto. Zijn er meer — Probo levert er één, wat wij
 * toevoegen komt erachteraan — dan komen er pijlen bij en eronder miniaturen of
 * bolletjes, wat je per leverancier instelt.
 * ------------------------------------------------------------------------ */

.dodo-rm__carrousel { position: relative; }

.dodo-rm__pijl {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 1.9rem;
	height: 1.9rem;
	border: 1px solid rgba(0, 0, 0, .14);
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: inherit;
	font: inherit;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}

.dodo-rm__pijl:hover, .dodo-rm__pijl:focus-visible { border-color: currentColor; }
.dodo-rm__pijl--links { left: .4rem; }
.dodo-rm__pijl--rechts { right: .4rem; }

.dodo-rm__teller {
	position: absolute;
	right: .4rem;
	bottom: .4rem;
	padding: .1rem .4rem;
	border-radius: 999px;
	background: rgba(0, 0, 0, .68);
	color: #fff;
	font-size: .7rem;
}

.dodo-rm__bolletjes {
	display: flex;
	justify-content: center;
	gap: .3rem;
	margin-top: .4rem;
}

.dodo-rm__bolletje {
	width: .5rem;
	height: .5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .2);
	cursor: pointer;
}

.dodo-rm__bolletje.is-actief { background: currentColor; }

.dodo-rm__mini {
	display: flex;
	gap: .3rem;
	margin-top: .4rem;
}

.dodo-rm__mini button {
	flex: 1 1 0;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, .14);
	border-radius: 4px;
	background: none;
	cursor: pointer;
	overflow: hidden;
	line-height: 0;
}

.dodo-rm__mini button.is-actief { border-color: currentColor; box-shadow: 0 0 0 1px currentColor; }

.dodo-rm__mini img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	display: block;
}

.dodo-rm__mini button { line-height: 0; }

/* Het prijsblok staat waar jij het neerzet; de inhoud is hetzelfde vak dat
   anders onderaan stond. */
.dodo-rm__paneel--prijs .dodo-rm__uitkomst {
	margin: 0;
	border: 0;
	padding: 0;
	background: none;
}

/* Het blok heeft zelf al een rand; een tweede kader eromheen is dubbelop. De
   tint verhuist naar het blok, want die hoort bij de prijs. */
/* Twee klassen, want de witte achtergrond van een gewoon blok staat verderop in
   dit bestand en zou anders winnen. */
.dodo-rm .dodo-rm__paneel--prijs {
	background: #f7f9fc;
}

.dodo-rm__paneel--prijs .dodo-rm__prijs {
	padding: 0;
	border: 0;
	background: none;
}

/* De productfoto vult zijn eigen blok: eerste kolom, net als in de selector
   van de leverancier. Beeld vult zijn vak: liever een randje van de foto missen
   dan een halve kaart grijze lucht eromheen. */
.dodo-rm__productbeeld {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: rgba(0, 0, 0, .04);
}

/* Het fotoblok heeft dezelfde binnenmarge als de andere blokken. Toen alles nog
   op wit stond liep de foto tot de rand door; nu de kaarten wit zijn op een
   grijze ondergrond hoort hij ín de kaart te liggen, met wat lucht eromheen. */
/* Twee klassen, want de binnenmarge van een gewoon blok staat verderop in dit
   bestand en zou anders winnen. */
.dodo-rm .dodo-rm__paneel--foto {
	padding: .625rem .7rem;
	overflow: hidden;
}

/* De foto is een knop. Hij mag er niet als een knop uitzien, alleen de cursor
   verraadt dat er meer te zien is. */
.dodo-rm__vergroot {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: none;
	line-height: 0;
	cursor: zoom-in;
	overflow: hidden;
}

/* De lege fotoplek. Die bestaat alleen in de bewerkmodus van de beheerder, dus
   hier mag de binnenmarge wel terug: er is niets om tot de rand te laten lopen. */
.dodo-rm .dodo-rm__paneel--leegbeeld {
	padding: .7rem .75rem;
}

.dodo-rm__leegbeeld {
	display: grid;
	place-items: center;
	min-height: 7rem;
	border: 1px dashed var(--dodo-rm-rand);
	border-radius: 8px;
	color: var(--dodo-rm-rustig);
	font-size: 14px;
	text-align: center;
}

.dodo-rm__leeguitleg {
	margin: .45rem 0 0;
	color: var(--dodo-rm-rustig);
	font-size: 13px;
	line-height: 1.4;
}

/* De rij eronder had zijn eigen marge omdat het blok er geen had. Nu het blok
   die wel heeft, zou dat dubbelop zijn; de tussenruimte komt van de `gap`. */
.dodo-rm__paneel--foto .dodo-rm__mini,
.dodo-rm__paneel--foto .dodo-rm__bolletjes {
	margin: 0;
	padding: 0;
}

/* De tekst die jij bij het product schrijft is geen bijschrift maar iets om te
   lezen; de toelichting bij een keuze (zelfde klasse, ander blok) blijft klein. */
.dodo-rm__paneel--foto .dodo-rm__uitleg-tekst {
	padding: 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.7;
}

/* ---------------------------------------------------------------------------
 * De vergroting
 *
 * In een blok van een paar honderd pixels zie je niet of het weefsel grof is of
 * de hoek rond. Klik op de foto en hij komt over de pagina heen te staan, met de
 * andere foto's eronder.
 *
 * Staat los van `.dodo-rm` in het document — het fotoblok knipt af wat eruit
 * steekt — dus deze regels kunnen niet op die klasse leunen en zetten hun eigen
 * box-sizing.
 * ------------------------------------------------------------------------ */

.dodo-rm-licht {
	position: fixed;
	inset: 0;
	/* Boven de beheerbalk van WordPress (99999), anders valt de sluitknop er bij
	   een ingelogde gebruiker precies achter. */
	z-index: 100000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .7rem;
	padding: clamp(.9rem, 4vw, 2.5rem);
	background: rgba(0, 0, 0, .84);
}

.dodo-rm-licht, .dodo-rm-licht * { box-sizing: border-box; }

.dodo-rm-licht__vak {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	min-height: 0;
	max-width: 100%;
}

.dodo-rm-licht__beeld {
	display: block;
	max-width: 100%;
	max-height: 100%;
	border-radius: 8px;
	background: #fff;
	object-fit: contain;
}

.dodo-rm-licht__sluit {
	position: absolute;
	top: .6rem;
	right: .8rem;
	width: 2.4rem;
	height: 2.4rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}

.dodo-rm-licht__sluit:hover,
.dodo-rm-licht__sluit:focus-visible { background: rgba(255, 255, 255, .28); }

.dodo-rm-licht__pijl {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 2.6rem;
	height: 2.6rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	color: #111;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.dodo-rm-licht__pijl--links { left: .5rem; }
.dodo-rm-licht__pijl--rechts { right: .5rem; }

.dodo-rm-licht__teller {
	margin: 0;
	flex: 0 0 auto;
	color: rgba(255, 255, 255, .78);
	font-size: 13px;
}

.dodo-rm-licht__mini {
	display: flex;
	flex: 0 0 auto;
	flex-wrap: wrap;
	justify-content: center;
	gap: .4rem;
	max-width: 100%;
}

.dodo-rm-licht__mini button {
	width: 3.4rem;
	height: 3.4rem;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 6px;
	background: none;
	cursor: pointer;
	overflow: hidden;
	line-height: 0;
}

.dodo-rm-licht__mini button.is-actief { border-color: #fff; }

.dodo-rm-licht__mini img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------------------------------------------------------------------------
 * Uitbreken uit de kolom van het thema.
 *
 * Een configurator is geen artikel: hoe meer keuzes je naast elkaar ziet, hoe
 * minder je hoeft te schuiven. De meeste thema's houden de inhoud op een kolom
 * van zes- tot achthonderd pixels, en dan passen er twee blokken naast elkaar
 * terwijl er ruimte is voor vier.
 *
 * De truc met de negatieve marges rekt het blok tot de vensterbreedte, ongeacht
 * hoe smal de ouder is. Boven de 1600 pixels houden we het binnen de perken,
 * want een keuzelijst van twee meter breed leest ook niet.
 * ------------------------------------------------------------------------ */

/* Twee klassen, want het thema legt zijn eigen max-width op de kinderen van de
   inhoud. Eén klasse verliest dat gevecht, en dan blijft er een blok van nul
   pixels over. */
.dodo-rm.dodo-rm--breed {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding-inline: 1rem;
	box-sizing: border-box;
}

/* De inhoud zelf houden we wél binnen de perken: een keuzelijst van twee meter
   breed leest niet. */
.dodo-rm.dodo-rm--breed > * {
	max-width: 1600px;
	margin-inline: auto;
}

/* ---------------------------------------------------------------------------
 * De blokken
 *
 * Vier kolommen naast elkaar, elk met een eigen stapel blokken. Welk blok waar
 * komt bepaalt de interface (zie VASTE_PLEKKEN in calculator.js): foto, formaat,
 * materiaal en aantal staan bij elk product op dezelfde plek, de rest vult de
 * kolom aan die op dat moment het minst gevuld is.
 *
 * Waarom geen CSS-raster meer: daarin liggen de rijen vast. Klap je één blok uit
 * met "Bekijk alle", dan schuift alles wat erna komt mee naar beneden — ook in
 * de kolommen ernaast, waar niets veranderd is. Met losse kolommen groeit alleen
 * de kolom waarin je klikt.
 *
 * Het aantal kolommen hangt aan de breedte van de rekenmachine zelf, niet van
 * het scherm: hij kan in een smalle kolom van een brede pagina staan.
 * ------------------------------------------------------------------------ */

/* De blokken staan op een lichte ondergrond; zelf zijn ze wit. Zo lezen ze als
   losse kaarten in plaats van als één vlak. */
.dodo-rm__velden {
	padding: .75rem;
	border-radius: 10px;
	background: var(--dodo-rm-grond);
}

.dodo-rm__vlak {
	position: relative;
}

/* Elk blok staat waar de indeling zegt: eigen kolom, eigen breedte. Alleen de
   hoogte volgt uit wat erboven staat. Klap je één lijst uit, dan schuift alleen
   wat daaronder in dezelfde baan staat mee — de kolommen ernaast blijven waar
   ze zijn. */
.dodo-rm__vlak > .dodo-rm__paneel {
	position: absolute;
	box-sizing: border-box;
}

/* Te smal voor kolommen: alles onder elkaar, zoals op een telefoon. */
.dodo-rm__vlak.is-smal {
	display: flex;
	flex-direction: column;
	gap: .625rem;
}

.dodo-rm__vlak.is-smal > .dodo-rm__paneel {
	position: static;
	width: auto;
}

.dodo-rm__paneel {
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 8px;
	padding: .625rem .7rem;
	background: #fff;
}

/* Het fotoblok en het aantal horen in de eerste rij en houden hun kolom, ook
   als er verder weinig te kiezen valt. */
/* Dezelfde ruimte tussen de foto en de miniaturen als eromheen: met een kleiner
   gat plakten ze aan de foto vast terwijl er links, rechts en onder wel lucht
   zat. */
.dodo-rm__paneel--foto {
	display: flex;
	flex-direction: column;
	gap: .625rem;
}

.dodo-rm__paneel-kop {
	display: flex;
	align-items: center;
	gap: .35rem;
	margin-bottom: .4rem;
}

.dodo-rm__paneel-titel {
	margin: 0;
	/* Een titel van zeven woorden in een smalle kolom breekt anders met een
	   los woord op de laatste regel. */
	text-wrap: balance;
	font-size: 17px;
	font-weight: 900;
	line-height: 1.25;
	text-transform: uppercase;
	letter-spacing: .02em;
	opacity: .75;
}

/* Keuzes als rijen: de hele rij is de knop, met een vinkje op wat gekozen is. */
.dodo-rm__keuzes {
	display: flex;
	flex-direction: column;
	gap: .2rem;
}

.dodo-rm__keuze {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .4rem;
	width: 100%;
	min-height: 42px; /* een vinger is geen muis */
	padding: .4rem .55rem;
	border: 1px solid rgba(0, 0, 0, .14);
	border-radius: 5px;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.25;
	text-align: left;
	cursor: pointer;
}

.dodo-rm__keuze:hover:not(:disabled),
.dodo-rm__keuze:focus-visible {
	border-color: currentColor;
}

.dodo-rm__keuze.is-gekozen {
	border-color: currentColor;
	background: rgba(0, 0, 0, .06);
	font-weight: 600;
}

.dodo-rm__keuze.is-geblokkeerd,
.dodo-rm__tegel.is-geblokkeerd {
	opacity: .4;
	cursor: not-allowed;
}

.dodo-rm__vink {
	flex: 0 0 auto;
	font-size: .75rem;
}

/* Keuzes met beeld: tegels, want dan is de foto het argument. */
.dodo-rm__tegels {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: .35rem;
}

/* Een tegel is beeld met een naam eronder. De foto loopt tot de rand; alleen de
   tekst heeft ruimte nodig. */
.dodo-rm__tegel {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, .14);
	border-radius: 5px;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.25;
	text-align: center;
	cursor: pointer;
}

/* Contain en niet cover: een drukpositie, een vlag of een plaat is de hele
   foto, en dan mag er geen stuk van af. Van 0.69.0 tot 0.72.2 stond dit (en het
   plaatje bij de uitleg) per ongeluk op cover; de tegels in de shop vullen hun
   vak wel, maar een keuze in de rekenmachine toont zijn hele beeld. */
.dodo-rm__tegel img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

/* De naam onder de tegel; zonder beeld staat hij er alleen en houdt hij zijn
   eigen ruimte. */
.dodo-rm__tegel > span:not(.dodo-rm__tegel-leeg) {
	padding: .35rem .4rem;
}

.dodo-rm__tegel-leeg {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 4px;
	background: rgba(0, 0, 0, .05);
}

.dodo-rm__tegel.is-gekozen {
	border-color: currentColor;
	background: rgba(0, 0, 0, .06);
	font-weight: 600;
}

/* Breedte en hoogte naast elkaar, in dezelfde maat als de keuzes ernaast. */
.dodo-rm__maten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
	gap: .4rem;
	margin-top: .35rem;
}

/* Staat de maat meteen onder de kop (Probo rekent op formaat, zonder keuze
   erboven), dan hoeft die extra ruimte er niet bij. */
.dodo-rm__paneel-kop + .dodo-rm__maten {
	margin-top: 0;
}

.dodo-rm__paneel .dodo-rm__veld {
	gap: .2rem;
}

.dodo-rm__paneel .dodo-rm__label {
	font-size: .6875rem;
	font-weight: 600;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: .02em;
	opacity: .75;
}

.dodo-rm__paneel .dodo-rm__getal,
.dodo-rm__paneel .dodo-rm__select {
	min-height: 42px; /* even hoog als een keuzerij: dan blijft de rij rustig */
	padding: .4rem .55rem;
	border-radius: 5px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.25;
}

.dodo-rm__paneel .dodo-rm__getal::placeholder {
	font-size: .75rem;
	opacity: .6;
}

.dodo-rm__meer {
	margin-top: .4rem;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 15px;
	text-decoration: underline;
	cursor: pointer;
	opacity: .8;
}

/* In de offertemand ---------------------------------------------------------
 *
 * Voor iedereen: hiermee gaat een bezoeker verder, dus deze knop mag opvallen,
 * in de kleuren van het thema. De pagina van de mand zelf staat in
 * assets/mand.css.
 */

.dodo-rm__mand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .5rem;
	margin-top: .9rem;
}

.dodo-rm__mand-knop {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: .6em 1.3em;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--wp--preset--color--contrast, #1e1e1e);
	color: var(--wp--preset--color--base, #fff);
	font: inherit;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	transition: opacity .15s ease, border-color .15s ease;
}

.dodo-rm__mand-knop:hover {
	opacity: .85;
}

.dodo-rm__mand-knop:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast, #1e1e1e);
	outline-offset: 2px;
}

/* "Bekijk offertemand" als deze uitvoering er al in staat: minder nadruk. */
.dodo-rm__mand-knop.is-rustig {
	border-color: currentColor;
	background: transparent;
	color: inherit;
	font-size: 1rem;
}

.dodo-rm__mand-knoppen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem 1rem;
}

.dodo-rm__mand-verder {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	text-underline-offset: .15em;
	cursor: pointer;
}

.dodo-rm__mand-stand {
	margin: 0;
	font-size: .9375em;
	line-height: 1.5;
}

.dodo-rm__mand-stand:empty {
	display: none;
}

.dodo-rm__mand-stand.is-gelukt {
	font-weight: 600;
}

.dodo-rm__mand-stand.is-fout {
	color: #b3261e;
}

.dodo-rm__mand-uitleg {
	margin: 0;
	color: var(--dodo-rm-rustig, #555);
	font-size: .875em;
	line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
	.dodo-rm__mand-knop {
		transition: none;
	}
}

/* Offerte en factuur -------------------------------------------------------
 *
 * Alleen zichtbaar voor een beheerder, dus dit mag er onopvallend uitzien: het
 * is gereedschap dat naast de prijs hangt, geen onderdeel van wat een bezoeker
 * te zien krijgt.
 */

.dodo-rm__balie {
	margin-top: .75rem;
	padding-top: .75rem;
	border-top: 1px dashed rgba(0, 0, 0, .18);
}

.dodo-rm__balie-knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.dodo-rm__balie-knop {
	padding: .35em 1em;
	border: 1px solid currentColor;
	border-radius: 999px;
	background: none;
	color: inherit;
	font: inherit;
	font-size: .8125em;
	line-height: 1.6;
	cursor: pointer;
}

.dodo-rm__balie-knop:hover,
.dodo-rm__balie-knop:focus-visible {
	background: rgba(0, 0, 0, .06);
}

/* Offerte maken lichtblauw, factuur maken donkerblauw, in bestelling groen,
   allemaal met witte tekst. */
.dodo-rm__balie-knop--pricequote,
.dodo-rm__balie-knop--invoice,
.dodo-rm__balie-knop--bestelling {
	border-color: transparent;
	color: #fff;
	font-weight: 600;
}

.dodo-rm__balie-knop--pricequote {
	background: #3b82f6;
}

.dodo-rm__balie-knop--pricequote:hover,
.dodo-rm__balie-knop--pricequote:focus-visible {
	background: #2563eb;
}

.dodo-rm__balie-knop--invoice {
	background: #1d4ed8;
}

.dodo-rm__balie-knop--invoice:hover,
.dodo-rm__balie-knop--invoice:focus-visible {
	background: #1e40af;
}

.dodo-rm__balie-knop--bestelling {
	background: #15803d;
}

.dodo-rm__balie-knop--bestelling:hover,
.dodo-rm__balie-knop--bestelling:focus-visible {
	background: #166534;
}

.dodo-rm__balie-knop--pricequote:focus-visible,
.dodo-rm__balie-knop--invoice:focus-visible,
.dodo-rm__balie-knop--bestelling:focus-visible {
	outline: 2px solid #1e1e1e;
	outline-offset: 2px;
}

.dodo-rm__balie-venster {
	margin-top: .75rem;
	padding: .85rem;
	border: 1px solid rgba(0, 0, 0, .18);
	border-radius: 6px;
	background: rgba(255, 255, 255, .7);
	font-size: .875em;
}

.dodo-rm__balie-kop {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-bottom: .6rem;
}

.dodo-rm__balie-dicht {
	border: 0;
	background: none;
	color: inherit;
	font-size: 1.3em;
	line-height: 1;
	cursor: pointer;
}

.dodo-rm__balie-zoek,
.dodo-rm__balie-veld {
	width: 100%;
	margin-bottom: .4rem;
	padding: .35em .6em;
	border: 1px solid rgba(0, 0, 0, .25);
	border-radius: 4px;
	font: inherit;
	font-size: .95em;
}

.dodo-rm__balie-lijst {
	margin: 0 0 .5rem;
	padding: 0;
	list-style: none;
	max-height: 11rem;
	overflow-y: auto;
}

.dodo-rm__balie-lijst li {
	margin: 0;
	padding: .35em .6em;
	border-radius: 4px;
	cursor: pointer;
}

.dodo-rm__balie-lijst li:hover {
	background: rgba(0, 0, 0, .07);
}

/* De concepten die al klaarstaan: waar het bij komt vet, datum, bedrag en
   omschrijving er klein onder. */
.dodo-rm__balie-concepten li {
	display: flex;
	flex-direction: column;
	gap: .1rem;
}

.dodo-rm__balie-concepten li span {
	color: var(--dodo-rm-rustig);
	font-size: .9em;
}

.dodo-rm__balie-concepten li:focus-visible {
	outline: 2px solid #15803d;
	outline-offset: 1px;
}

/* De bestelling waar je vandaan kwam (Product toevoegen in de shop): groen,
   zoals de knop In bestelling. */
.dodo-rm__balie-concepten li.is-vast {
	border-left: 3px solid #15803d;
	border-radius: 0 4px 4px 0;
	background: rgba(21, 128, 61, .07);
}

.dodo-rm__balie-concepten li span.dodo-rm__balie-let {
	color: #9a3b0f;
}

/* Bij In bestelling: eerst de concepten van de laatste tijd. */
.dodo-rm__balie-recent:empty {
	display: none;
}

.dodo-rm__balie-uitleg {
	margin: 0 0 .3rem;
	color: var(--dodo-rm-rustig);
	font-size: .9em;
}

.dodo-rm__balie-nieuw summary {
	margin-bottom: .4rem;
	cursor: pointer;
}

.dodo-rm__balie-stand {
	margin: .5rem 0 0;
	font-size: .9em;
	line-height: 1.5;
}

.dodo-rm__balie-stand a {
	color: inherit;
}

/* Een product dat zonder bedrag meeging. Dat mag je niet missen. */
.dodo-rm__balie-letop {
	margin: .5rem 0 0;
	padding: .4rem .6rem;
	border-left: 3px solid #dba617;
	background: #fcf9e8;
	font-size: .85em;
	line-height: 1.5;
}