/* =============================================================================
   SIDERIUS WEBSHOP - begin (31-07-2026)
   NIEUW BESTAND, volledig van Siderius. Geen enkele regel van Cherry.
   De opmaak van de webshop: overzichtspagina, productkaart, promokaarten,
   productpagina en de winkelwagenknop in de header.
   ============================================================================= */

/**
 * ----------------------------------------------------------------------------
 * SIDERIUS WEBSHOP - VORMGEVING
 *
 * Deze stylesheet legt de Siderius-huisstijl over de standaardopmaak van
 * WooCommerce heen. Hij wordt na WooCommerce ingeladen, zodat wat hier staat
 * wint van hun standaardkleuren.
 *
 * De kleuren en vormen komen uit de themacode van Cherry, zodat de winkel
 * exact hetzelfde oogt als de rest van de site.
 * ----------------------------------------------------------------------------
 */

/**
 * ----------------------------------------------------------------------------
 * DE LETTERGROOTTES VAN DE WEBSHOP - vastgesteld 18-08-2026 door Tomas
 *
 * 9* · 11* · 12** · 13** · 14 · 16 · 17* · 18 · 20 · 22** · 25** · 28 · 30 · 34
 *
 *     (geen ster) komt uit Cherry's eigen reeks
 *     **         eigen webshopmaat, bewust toegevoegd
 *     *          speciaal geval, zie hieronder
 *
 * AANLEIDING
 * Hiervoor stonden er twintig maten in dit bestand, waaronder zeven halve
 * (11,5 · 12,5 · 13,5 · 14,5 · 15,5). Die kwamen uit de ontwerpexports: een
 * tekenprogramma schuift een tekst net zo lang tot het goed oogt, en schrijft
 * dan 14,5 op. Alle halve maten zijn eruit.
 *
 * WAAROM DE WINKEL KLEINER IS DAN DE REST VAN DE SITE
 * Cherry zet lopende tekst op 18 (16 onder 768px). Dat past bij een
 * brochuresite: een paar alinea's per pagina om te lezen. Een webshop is
 * dichter - filters, specificaties, aantallen, prijzen - en heeft ruimte
 * nodig ONDER de basismaat. Ter vergelijking, gemeten: Coolblue zet zijn
 * lopende tekst op 13, bol.com op 14.
 *
 * Daarom is 14 hier de werkmaat, met 13 en 12 eronder voor labels en
 * bijschriften. Echte leestekst (de omschrijving van een machine) blijft 18.
 *
 * DE VIER SPECIALE GEVALLEN
 *   17  de naam van de machine op de producttegel. Naar 18 zou de tegel
 *       hoger maken, en de hoogte van die tegel is uitgangspunt.
 *       Ook: het telefoonicoon in de header - dat is een icoon, geen tekst.
 *   11  de winkelwagenteller en het plusje bij het accounticoon: cijfers in
 *       een bolletje van 16px. Groter past er niet in.
 *    9  het vinkje in datzelfde bolletje als je bent ingelogd.
 *
 * REGEL BIJ NIEUW WERK
 * Zegt het thema al iets (lopende tekst, koppen), schrijf dan niets op en
 * laat het erven. Moet je zelf kiezen, pak dan een maat uit deze reeks.
 * ----------------------------------------------------------------------------
 */

/**
 * ----------------------------------------------------------------------------
 * HET PALET VAN DE WEBSHOP - een blok, hier, en nergens anders
 *
 * Stond tot 20-08-2026 verdeeld over twee :root-blokken (hier en in sectie
 * 14). Daardoor was er geen enkele plek waar je het hele palet zag, en
 * kwamen dezelfde kleuren op twee momenten opnieuw met de hand het bestand
 * in. Alles staat nu bij elkaar, gegroepeerd naar wat een kleur DOET.
 *
 * REGEL: staat een kleur hieronder niet, dan bestaat hij niet. Kom je bij het
 * omzetten van een ontwerp een waarde tegen die er niet in staat, kies dan de
 * dichtstbijzijnde uit deze lijst - net zo streng als bij de afstanden en de
 * lettergroottes.
 * ----------------------------------------------------------------------------
 */

:root {

	/* --- BLAUW: de huisstijl -------------------------------------------- */
	--sid-blauw:        #009EE3;  /* het Siderius-blauw, zelfde als de CONTACT-knop */
	--sid-blauw-donker: #006997;  /* de hoverkleur uit het thema */
	--sid-blauw-midden: #006DAA;  /* het middenblauw uit het thema, voor tekstlinks */
	--sid-lichtblauw:   #EAF6FD;  /* lichte vlakken en labels */
	--sid-blauwrand:    #C7E8F8;  /* DE RAND OM EEN LICHTBLAUW VLAK. Uit het
	                                 afrekenontwerp (28-08-2026). Een grijze
	                                 rand om een blauw vlak trekt het naar
	                                 achteren en laat het negatief lijken; deze
	                                 hoort bij de vulling en geeft het vlak juist
	                                 een gloed. Zie het adreskader en het
	                                 levertijdkader. */

	/* --- TEKST ----------------------------------------------------------- */
	--sid-donker:       #002533;  /* de donkere tekstkleur uit het thema */
	--sid-grijs:        #6B7278;  /* HET labelgrijs. Vastgesteld 18-08-2026 door Tomas.
	                                 Geen Cherry-kleur: het thema heeft alleen #565656
	                                 ($clr__black60) en dat is voor bijschriften te zwaar.
	                                 Vervangt de drie grijzen die hier eerder los naast
	                                 elkaar stonden: #565656, #6B7278 en #8A8A8A.
	                                 Contrast op wit 4,9:1 - voldoet aan de norm. */

	/* --- LIJNEN EN VLAKKEN ----------------------------------------------- */
	/* HET HOVER-VLAK VAN EEN ICOONKNOP, IN TWEE UITVOERINGEN.
	   Eén idee: een nauwelijks zichtbare waas van de tegenovergestelde toon,
	   waarbij het teken zelf NIET van kleur verandert. Welke je pakt hangt af
	   van waar de knop op ligt, niet van welk onderdeel het is.
	     --sid-vlak         op wit  - de teller, het i'tje-venster
	     --sid-vlak-donker  op donker - de kop van de winkelwagenlade
	   De donkere versie komt van de hamburger in het mobiele menu
	   (`.sid-burger:hover` in style.css, regel ~7851). Die staat daar nog
	   letterlijk; verandert deze waarde, verander hem daar dan mee - én in
	   sass/_siderius-mobiel-menu.scss, anders komt de oude terug bij het
	   opnieuw compileren. Vastgesteld 20-08-2026. */
	--sid-lijn:         #D7D7D7;  /* de randkleur die het thema voor invoervelden gebruikt.
	                                 Voor randen OM iets heen. */
	--sid-lijn-licht:   #F0F0F0;  /* DE LIJN BINNEN EEN KAART. Vastgesteld 18-08-2026
	                                 door Tomas, na de drie naast elkaar te hebben gezien.
	                                 Niet #D7D7D7: vijf regels onder elkaar worden daarmee
	                                 een tabel. Niet #F6F7F9: valt weg. */
	--sid-vlak:         #F6F7F9;  /* het lichte vlak uit het thema */
	--sid-vlak-donker:  rgba(255, 255, 255, .12);
	--sid-pagina:       #F3F3F3;  /* de achtergrond van de overzichtspagina */

	/* --- STATUS: goed, let op, fout --------------------------------------- */
	/* HET GROENPAAR. Vastgesteld 19-08-2026.
	   Het zachte vlak komt uit het ontwerp van de winkelwagenlade en hoort bij
	   --sid-lichtblauw: dezelfde zachtheid, andere kleur.
	   De tekstkleur is NIET die uit het ontwerp (#1F8F00). Die haalt 4,21:1 op
	   wit en 3,79:1 op dit vlak - allebei onder de norm van 4,5. #2F7D32 haalt
	   5,12 en 4,61, en stond al in het koopblok voor "Op voorraad". Zo blijft
	   het bij EEN groen voor tekst. */
	--sid-groen:        #2F7D32;
	--sid-groen-vlak:   #E9F7E4;
	--sid-groenrand:    #C6E7CE;  /* de rand om dat lichte groene vlak. Uit het ontwerp
	                                 van de voordeur, 19-09-2026. */
	--sid-groen-badge:  #29C400;  /* Verreikersgroen, het groen van de huisstijl. Alleen
	                                 als VLAK - de NIEUW-badge. Nooit als tekst: op wit
	                                 haalt het 2,3:1 en dat is onleesbaar. Op het vlak
	                                 zelf komen donkere letters (6,9:1). */
	--sid-rood:         #C23630;  /* het rood van het thema. Foutmeldingen en "niet op
	                                 voorraad". Verving 20-08-2026 twee overgetikte
	                                 varianten: #C4362F (cijferfout) en #C0392B. */
	--sid-rood-vlak:    #FBE4E2;  /* het lichte vlak eronder, uit het ontwerp van
	                                 26-08-2026 - foutmeldingen en het label Aanbieding. */
	--sid-roodrand:     #F3C6C6;  /* DE RAND OM DAT LICHTE VLAK. Uit het ontwerp van
	                                 de voordeur, 18-09-2026. Tegenhanger van
	                                 --sid-blauwrand hierboven. */
	--sid-rood-veld:    #E0868A;  /* de rand om een INVOERVELD dat fout is ingevuld.
	                                 Donkerder dan de rand hierboven, want een dun
	                                 lijntje van 1px om een leeg vakje moet je zien. */

	/* OKER - WACHTEN, NIET FOUT. Uit het ontwerp van de voordeur, 19-09-2026.
	   Er is niets misgegaan en er hoeft niets hersteld te worden; er moet
	   alleen even tijd voorbij. Rood zou dat verkeerd zeggen en blauw zou het
	   wegpoetsen. Alleen op het wachtscherm. */
	--sid-oker:         #B37A12;
	--sid-oker-vlak:    #FFF7E8;
	--sid-okerrand:     #F0DCB4;
	--sid-oker-tekst:   #8A5B12;  /* TEKST OP HET OKERVLAK. Uit het dashboardontwerp
	                                 van 21-09-2026. Het gewone oker haalt op dat
	                                 lichte vlak maar 3:1 en dat is te weinig voor
	                                 kleine hoofdletters; deze haalt bijna 5:1. */
	
	/* HET GROEN VAN WHATSAPP - drie waarden, een idee. Vastgesteld 21-08-2026
	   door Tomas, na negen varianten naast elkaar gezien te hebben.
	   GEEN SIDERIUS-KLEUR: dit is het merk van een andere partij, net als het
	   logo van een betaalmethode. Alleen op de app-knop, nergens anders.

	   WAAROM HET VLAK ZO BLEEK IS. De knop stond eerst vol in #25D366 met
	   donkere letters. Dat werkte niet: op een winkelwagenpagina wil je dat
	   mensen afrekenen, en een fel groen vlak onderaan trok het oog juist naar
	   de knop met de minste omzet. Erger nog, het maakte alles erboven dof -
	   de donkere randknop las daardoor als zwart. Nu zit het groen alleen nog
	   in het logo en is het vlak een waas: genoeg om WhatsApp te herkennen,
	   niet genoeg om te roepen.

	   Het vlak is het merkgroen op 12% op wit, de hoverstand op 20%. Dus geen
	   losse kleuren maar twee standen van dezelfde. De letters zijn
	   --sid-donker: 14,3:1 op dit vlak. */
	--sid-whatsapp:       #25D366;  /* alleen het logo */
	--sid-whatsapp-vlak:  #E4FAEE;  /* de knop in rust */
	--sid-whatsapp-hover: #D3F6E0;  /* de knop onder de muis */

	/* --- DE WAAS ACHTER EEN VENSTER OF DE LADE ---------------------------- */
	/* Vastgesteld 20-08-2026 door Tomas, na Coolblue en bol.com gemeten te
	   hebben: Coolblue rgba(27,30,36,.8), bol rgba(0,0,0,.6), geen van beide
	   met vervaging. Hiervoor stonden er twee verschillende: rgba(0,37,51,.5)
	   bij het i-venster en rgba(0,20,28,.45) bij de lade.
	   DEKKING 65%, NIET DE 80% VAN COOLBLUE. Reden Tomas: hun pagina staat op
	   wit en de onze op --sid-pagina (#F3F3F3). Dezelfde waas valt op grijs
	   donkerder uit, en 80% werd te zwaar. Wil je hem later bijstellen, dan is
	   dit getal de enige plek waar je hoeft te zijn - het i-venster en de lade
	   lezen er allebei uit.
	   BEWUST GEEN HUISSTIJLKLEUR. Een waas is geen element maar een
	   afwezigheid: hij zegt "dit doet even niet mee". Zet je er merkkleur in,
	   dan gaat hij meepraten - en --sid-donker is een verzadigde teal, die
	   leest op halve dekking als een blauw vlak in plaats van als schaduw.
	   Ook bewust GEEN backdrop-filter: de lade had er een, geen van beide
	   concurrenten gebruikt hem, en het is de duurste eigenschap van de twee
	   om te tekenen. */
	--sid-waas:         rgba(27, 30, 36, .65);

	/* --- VORM ------------------------------------------------------------- */
	--sid-radius:        10px;
	--sid-schaduw:       0 0 10px 5px rgba(0, 0, 0, .1);  /* de GLOED van het thema, in rust */
	--sid-schaduw-hover: 0 0 10px 5px rgba(0, 0, 0, .2);  /* dezelfde gloed, bij hover */
}


/* ==========================================================================
   0. RUIMTE RONDOM DE WINKELINHOUD
   ========================================================================== */

/**
 * Zodat de winkel niet tegen de schermrand plakt.
 *
 * DE 27 BOVEN IS EEN SOM, GEEN SMAAK. Gewijzigd 24-08-2026.
 *
 * Tussen de header en .site-main zit 3px speling. 27 + 3 = 30, en 30 is
 * Cherry's standaardstap tussen blokken - dezelfde waarde die onderaan de
 * paginakop al staat tussen het streepje en de inhoud. Zo loopt de hele kop op
 * een reeks: 30 boven het kruimelpad, 15 naar de titel, 12 naar het streepje,
 * 30 naar het product. Alle vier uit de schaal van het thema.
 *
 * Stond op 40 (dus 43 op het scherm). Dat was de enige van de vier die nergens
 * in Cherry's reeks voorkomt, en het viel op als een gat onder de donkere
 * balk.
 *
 * DIT RAAKT ALLE WINKELPAGINA'S - ook het categorieoverzicht. Dat is de
 * bedoeling: die begint nu net zo.
 */
.woocommerce #main.site-main,
.woocommerce-page #main.site-main {
	padding: 27px 15px 60px;
	box-sizing: border-box;
}


/* ==========================================================================
   1. INLOG- EN WINKELWAGENKNOP RECHTSBOVEN IN DE HEADER
   ========================================================================== */

/* Het groepje knoppen naast het telefoonblok. */
.sid-header-acties {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: 20px;
}

/* De knoppen zelf. */
/**
 * LET OP - deze regel heeft 'a' ervoor en weegt daardoor een type extra.
 * Elke VARIANT hierop (.sid-cart-knop, .sid-account-knop) moet dat type dus
 * ook hebben, anders wint deze basisregel van zijn eigen variant. Dat ging
 * op 20-08-2026 een keer mis: het accountknopje kreeg ineens een blauw vlak.
 * Zie sectie 24 voor waarom dat 'a' er staat.
 */
a.sid-header-knop {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	background: var(--sid-blauw);
	color: #fff;
	text-decoration: none;
	transition: ease 0.3s all;
}

a.sid-header-knop:hover,
a.sid-header-knop:focus {
	background: var(--sid-blauw-donker);
	color: #fff;
}

/* DE ACCOUNTKNOP HEEFT GEEN VLAK.
   Twee blauwe knoppen naast elkaar is te veel van het goede; de winkelwagen
   is de knop die eruit hoort te springen. Het accounticoon staat daarom los
   op de donkere balk, en kleurt blauw als je erover gaat. Zo staat hij ook
   in het mobiele eiland. */
a.sid-account-knop {
	background: none;
	border-radius: 50%;
}

a.sid-account-knop:hover,
a.sid-account-knop:focus {
	background: none;
	color: var(--sid-blauw);
}

/* HET BOLLETJE BIJ HET POPPETJE.
   Het poppetje zelf blijft wit; alleen dit bolletje is blauw. Nog niet
   ingelogd geeft een plusje - hier kun je een account aanmaken. Wel ingelogd
   geeft een vinkje: je bent herkend. header-acties.php zet daarvoor de
   klasse is-ingelogd op de knop. */
.sid-account-knop::after {
	content: "+";
	position: absolute;
	top: 2px;
	right: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--sid-blauw);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

/* Het vinkje is hetzelfde vinkje als overal op de site: teken \f00c uit
   Font Awesome, in de vette (solid) snede. Het thema doet dat op dezelfde
   manier bij de opsommingen met vinkjes en bij de aankruisvakjes in
   formulieren - zie sass/_content.scss regel 194-203 en de klasse
   .fontawesome in sass/_extends.scss. Zo gebruiken we overal op de site
   letterlijk dezelfde tekening. */
.sid-account-knop.is-ingelogd::after {
	content: "\f00c";
	font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 9px;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}

a.sid-cart-knop {
	border-radius: 5px;
}

/* De tekening mag geen extra ruimte of onderstreping krijgen. */
.sid-header-knop .sid-icoon {
	display: block;
}

/* Het telbolletje rechtsboven op de winkelwagen. */
.sid-cart-teller {
	position: absolute;
	top: -6px;
	right: -6px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	box-sizing: border-box;
	border-radius: 50%;
	background: #fff;
	color: var(--sid-donker);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}


/* ==========================================================================
   1b. DE CONTACT-KNOP IS NAAR DE MENUBALK VERHUISD
   ========================================================================== */

/**
 * Het thema gaf de CONTACT-knop zijn opmaak via de selector
 * '.top-bar .highlighted-cta a'. Nu die knop in de menubalk staat, matcht die
 * selector niet meer en zou de knop zijn vormgeving verliezen. Hieronder
 * krijgt hij exact dezelfde opmaak terug, op zijn nieuwe plek.
 */
/**
 * DE KNOP LIJNT LINKS UIT MET HET ACCOUNTICOON (18-09-2026)
 *
 * De twee rijen in de rechterkolom van de header staan allebei rechts
 * uitgelijnd, maar begonnen links op een willekeurige plek. Bovenin staat
 * [account] [telefoonblok] [winkelwagen], eronder stond de knop precies zo
 * breed als zijn tekst. Die twee linkerkanten liepen dus niet gelijk.
 *
 * WAAROM DIT GEEN VAST GETAL KAN ZIJN
 * De linkerkant van het accounticoon ligt op 44 + 6 + telefoonblok + 15 + 44
 * vanaf de rechterrand. Dat telefoonblok is tekst uit een ACF-veld; wordt het
 * telefoonnummer ooit anders, dan verschuift die hele hoek. Een min-width van
 * zoveel pixels klopt vandaag en morgen niet meer.
 *
 * WAT HIER GEBEURT
 * De .nav-bar wordt een rooster van twee kolommen. De hele bovenste rij staat
 * in kolom 2, en van de onderste rij staat het menu in kolom 1 en de knop in
 * kolom 2. Kolom 2 is 'auto' en dus zo breed als het breedste dat erin staat,
 * dat is de bovenste rij. De knop krijgt display: block en vult die kolom.
 * Zo lopen de linkerkanten altijd gelijk, wat er ook in dat telefoonveld
 * komt te staan.
 *
 * 'display: contents' op de <nav> laat alleen zijn omhulsel verdwijnen; het
 * menu en de knop worden dan zelf onderdeel van het rooster. Dezelfde truc
 * staat hierboven al bij .sid-header-acties, om daar de volgorde te kunnen
 * zetten. Het mega-menu merkt er niets van: dat hangt zijn witte band aan
 * header#masthead en niet aan deze <nav> - zie sectie 24.
 *
 * ALLEEN BOVEN 1200px. Daaronder staat .nav-bar op display: none en neemt het
 * uitklapmenu het over. De mediaquery is nodig omdat een losse regel zonder
 * mediaquery even zwaar weegt als die display: none uit het thema en er
 * verderop in dit bestand overheen zou gaan - dan stond de balk ineens op
 * een telefoon.
 */
@media only screen and (min-width: 1201px) {

	header#masthead .nav-bar {
		display: grid;
		grid-template-columns: 1fr auto;
		align-content: space-between;
		column-gap: 25px;
	}

	header#masthead .nav-bar .top-bar {
		grid-column: 2;
	}

	header#masthead .nav-bar .bottom-navigation {
		display: contents;
	}

	header#masthead .nav-bar .bottom-navigation ul.menu {
		grid-column: 1;
		align-self: center;
		justify-self: end;
	}

	/* DIE 12px IS DE LEGE RUIMTE IN DE ACCOUNTKNOP.
	   Kolom 2 is precies zo breed als de bovenste rij, dus zonder deze marge
	   loopt de knop gelijk met de RAND van de accountknop. Die knop is 44px
	   breed met een tekening van 20px in het midden, dus 12px leeg aan elke
	   kant - zie de uitleg bij .sid-account-knop hierboven. Je ziet die lege
	   ruimte niet, en dus leek de knop 12px te ver naar links te steken. Nu
	   lijnt hij uit met het poppetje zelf, en dat is wat je ziet. */
	header#masthead .nav-bar .bottom-navigation .highlighted-cta {
		grid-column: 2;
		align-self: center;
		margin-left: 12px;
	}
}

/**
 * HET MENU KRIJGT DE RUIMTE TERUG DIE DE KNOP INNEEMT
 *
 * De knop is door het uitlijnen ongeveer 60px breder geworden, en die 60px
 * gingen af van het menu. Gevolg: DNA Siderius klapte naar een tweede regel.
 * Het menu heeft flex-wrap: wrap (het zit in de .flexbox-groep, style.css
 * r. 609), dus het breekt netjes af in plaats van over de knop te lopen. Dat
 * is beter dan overlopen, maar het hoort er niet te staan.
 *
 * De header is verdeeld in twee vaste kolommen:
 *
 *     .site-branding { width: 500px; }              style.css r. 1252
 *     .nav-bar       { width: calc(100% - 500px); } style.css r. 1304
 *     en onder 1400px allebei 400.                  style.css r. 1256 en 1318
 *
 * In die logokolom van 500px staat een logo van ongeveer 155px breed plus
 * 30px padding. Er staat dus ruim 300px leeg. Daar halen we het weg: de
 * logokolom naar 400, en onder 1400px naar 320 (daar maakt het thema het logo
 * zelf ook kleiner, style.css r. 1300).
 *
 * Aan het logo verandert er niets zichtbaars. Het staat links in zijn kolom,
 * dus het blijft op precies dezelfde plek staan; alleen de lege ruimte
 * rechts ervan wordt kleiner en het menu schuift naar links op.
 *
 * De twee getallen moeten bij elkaar blijven: samen 100%. Verander je er een,
 * verander dan de ander mee, anders valt de balk uit elkaar.
 */
header#masthead .site-branding {
	width: 400px;
}

header#masthead .nav-bar {
	width: calc(100% - 400px);
}

@media only screen and (max-width: 1400px) {

	header#masthead .site-branding {
		width: 320px;
	}

	header#masthead .nav-bar {
		width: calc(100% - 320px);
	}
}

header#masthead .nav-bar .bottom-navigation .highlighted-cta a {
	display: block;
	padding: 12px 26px;
	line-height: 1.2;
	background: var(--sid-blauw);
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	border-radius: 5px;
	transition: ease 0.3s all;
}

header#masthead .nav-bar .bottom-navigation .highlighted-cta a:hover {
	background: var(--sid-blauw-donker);
	color: #fff;
}


/* ==========================================================================
   2. KNOPPEN IN DE HUISSTIJL
   ========================================================================== */

/**
 * WooCommerce heeft zijn eigen paarse knoppen. Hieronder krijgen ze exact de
 * opmaak die het thema ook aan de CONTACT-knop geeft.
 */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button {
	padding: 15px 30px;
	line-height: 1.2;
	background: var(--sid-blauw);
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	border: 0;
	border-radius: 5px;
	transition: ease 0.3s all;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover {
	background: var(--sid-blauw-donker);
	color: #fff;
}

/* Een uitgeschakelde knop moet er ook uitzien alsof hij niet kan. */
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
	background: var(--sid-lijn);
	color: #fff;
	opacity: 1;
}


/* ==========================================================================
   3. MELDINGEN
   ========================================================================== */

/**
 * De balk "product is toegevoegd aan je winkelwagen" en soortgelijke
 * meldingen. Standaard krijgen die een paarse streep; die maken we blauw.
 */
.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--sid-blauw);
	background: var(--sid-vlak);
	color: var(--sid-donker);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--sid-blauw);
}

.woocommerce-error {
	border-top-color: var(--sid-rood);
	background: var(--sid-vlak);
	color: var(--sid-donker);
}


/* ==========================================================================
   4. PRODUCTPAGINA
   ========================================================================== */

/* De prijs opvallender en in de donkere huisstijlkleur. */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--sid-donker);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
}

/* Hier stonden tot 20-08-2026 twee regels voor de voorraadmelding. Ze deden
   niets: sectie 27 kleurt dezelfde melding nog een keer, met een selector die
   zwaarder weegt, en die won dus altijd. Bovendien is er op een productpagina
   maar EEN voorraadregel - productpagina.php onderdrukt die van WooCommerce
   overal, en koopblok.php zet hem alleen binnen het koopblok weer aan.
   De voorraadkleuren staan nu op precies een plek: sectie 27. */

/* Het aantalveld naast de knop netjes uitlijnen. */
.woocommerce .quantity .qty {
	width: 70px;
	height: 50px;
	padding: 5px 10px;
	border: 1px solid var(--sid-lijn);
	color: var(--sid-donker);
	text-align: center;
}


/* ==========================================================================
   5. TABBLADEN ONDER HET PRODUCT
   ========================================================================== */

/**
 * WooCommerce maakt hier standaard lichtpaarse blokjes met afgeronde hoekjes
 * van. Hieronder wordt het een strakke rij met een blauwe onderstreping bij
 * het actieve tabblad.
 */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin: 0 0 30px;
	border-bottom: 1px solid var(--sid-lijn);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	border: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0 30px 0 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 12px 0;
	color: var(--sid-donker);
	font-weight: 700;
	border-bottom: 3px solid transparent;
	transition: ease 0.3s all;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--sid-blauw);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--sid-blauw);
	border-bottom-color: var(--sid-blauw);
}


/* ==========================================================================
   6. WINKELWAGEN EN AFREKENEN
   ========================================================================== */

.woocommerce table.shop_table {
	border: 1px solid var(--sid-lijn);
	border-radius: 5px;
}

.woocommerce table.shop_table th {
	color: var(--sid-donker);
	font-weight: 700;
}

.woocommerce-checkout #payment {
	background: var(--sid-vlak);
	border-radius: 5px;
}

.woocommerce-checkout #payment div.payment_box {
	background: #fff;
	border: 1px solid var(--sid-lijn);
	color: var(--sid-donker);
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--sid-lijn);
}

/* ==========================================================================
   HIER STOND EEN VANGNETREGEL VOOR ALLE LINKS - WEGGEHAALD 21-08-2026

   Er stond:  .woocommerce a:not(.button):not([class*="-knop"]):hover
                  { color: var(--sid-blauw); }

   Bedoeld als "tekstlinks in de winkel krijgen de huisstijlkleur". Maar
   .woocommerce staat op de BODY, dus hij raakte élke link op een winkelpagina:
   25 in het menu, 21 in de voettekst, 7 in de inhoud. Je voettekst gedroeg zich
   daardoor anders op een productpagina dan op je contactpagina.

   Hij won bovendien van elk onderdeel met een eigen hover - drie keer moest er
   een uitzondering bij (de knoppen, het schuifje, Verwijderen). Een vangnet dat
   je bij elk nieuw onderdeel moet uitzonderen is geen vangnet.

   ZONDER DEZE REGEL valt alles wat geen eigen hover opschrijft terug op Cherry's
   `a:hover { color: #006daa }` - en dat is precies --sid-blauw-midden, onze
   kleur voor tekstlinks. Overal op de site hetzelfde dus.
   ========================================================================== */
/* ==========================================================================
   7. VOLGORDE IN DE HEADER
   ==========================================================================
   Gewenste volgorde rechtsboven:  [account]  [telefoonblok]  [winkelwagen]

   'display: contents' laat het omhulsel .sid-header-acties zelf verdwijnen uit
   de opmaak, zodat de twee knoppen rechtstreekse onderdelen van de .top-bar
   worden. Pas dan kunnen we ze met 'order' voor of achter het telefoonblok
   zetten. Het telefoonblok heeft geen order en staat dus op 0.
   ========================================================================== */

/* DE RUIMTE TUSSEN DE TWEE RIJEN.
   Boven de bovenste rij zit 10px en onder de onderste rij zit 10px, allebei
   uit de padding van de header. Daartussen stond 5px, en dat is de kleinste
   ruimte van de hele hoek terwijl er juist twee losse blokken uit elkaar
   gehouden moeten worden. Nu ook 10, zodat de drie ruimtes in die kolom
   gelijk zijn.

   Het thema zet die 5px in sass/_header-footer.scss bij .top-bar; we laten
   dat bestand met rust en zetten hem hier over. */
header#masthead .nav-bar .top-bar {
	margin-bottom: 10px;
}

/* De header wordt daardoor 5px hoger, en de body-padding moet dat volgen: die
   houdt de ruimte vrij voor deze vaste header (_content.scss, regel 6-26).

   GEMETEN 08-09-2026: de header is 119,594px hoog, op elke pagina hetzelfde.
   Wij reserveren 119, dus naar beneden afgerond.

   WAAROM NAAR BENEDEN AFRONDEN
   Reserveer je MEER dan de header hoog is, dan zie je in dat verschil de
   achtergrond van de body staan: een grijze streep van #F3F3F3 onder de
   header, over de volle breedte, op elke pagina.

   Precies dat stond hier: 123 gereserveerd voor een header van 119,59, dus
   3,41px grijs. Die fout kwam uit het thema zelf (118 voor een header van
   114,6) en is bij het ophogen naar 123 gewoon meeverhuisd.

   Reserveer je iets TE WEINIG, dan valt de bovenste halve pixel van de
   pagina-inhoud achter de vaste header. Dat ziet niemand. Vandaar 119.

   WAAROM HET BIJ HET MEGAMENU NIET OPVIEL
   Dat opent op top: 100% van de header en legt zijn eigen blauwe rand van
   3px precies over die grijze strook heen. Zie sectie 24, .sid-mega. */
body {
	padding-top: 119px;
}

/**
 * MET DE BEHEERBALK ERBIJ. Toegevoegd 24-08-2026.
 *
 * WordPress toont bovenaan een balk van 32px zodra je bent ingelogd. Cherry
 * houdt daar rekening mee door de header 32px te laten zakken:
 *
 *     .admin-bar header#masthead { top: 32px; }    style.css r. 1214
 *
 * Maar de ruimte ONDER die header telt die 32px niet mee:
 *
 *     body           { padding-top: 118px; }       style.css r. 2101
 *     body.admin-bar { padding-top: 118px; }       style.css r. 2108 - hetzelfde getal
 *
 * De inhoud begint dus even hoog als zonder balk, terwijl de header lager
 * staat: de pagina schuift eronder door. Dat is site-breed, op elke pagina.
 *
 * Erbovenop: `body.admin-bar` weegt (0,2,0) en onze regel hierboven (0,0,1),
 * dus met de balk verloren we ook nog eens de 5px die onze hogere header
 * nodig heeft. Samen 37px te weinig.
 *
 * 151 = onze 119 plus de 32 van de balk.
 *
 * ALLEEN VANAF 783px. Onder die breedte staat de beheerbalk niet vast maar
 * scrollt hij mee, en zet Cherry de header terug op top: 0 (style.css r.
 * 1218). Daar klopt hun berekening wel; die laten we met rust.
 *
 * ALLEEN ZICHTBAAR VOOR INGELOGDE BEHEERDERS. Een klant krijgt die balk
 * nooit te zien. Dit is dus geen fout die bezoekers raakt - maar Tomas kijkt
 * ingelogd naar zijn eigen winkel, en moet zien wat een klant ziet.
 */
@media only screen and (min-width: 783px) {

	body.admin-bar {
		padding-top: 151px;
	}
}

header#masthead .nav-bar .top-bar .sid-header-acties {
	display: contents;
}

/* DE TUSSENRUIMTE - WAAROM TWEE VERSCHILLENDE GETALLEN.
   Links en rechts van het telefoonblok willen we evenveel lucht, en wel
   15px. Dat is $rsp__xs uit sass/_structure-variables-mixins.scss, dezelfde
   afstand die het thema aanhoudt tussen de losse links in deze balk. Het
   past ook bij de rest van deze hoek: 15px van de knop tot de rechterrand,
   10px tot de onderkant van de header, 5px tussen de twee rijen.

   Maar de twee knoppen zien er niet hetzelfde uit. De winkelwagen is een
   blauw vlak van 44px met een harde rand, dus daar is 15px marge ook echt
   15px die je ziet. De accountknop heeft geen vlak: daar staat een tekening
   van 20px midden in een vak van 44px, met dus 12px lege ruimte aan elke
   kant. Zou je die ook 15px geven, dan is de zichtbare afstand 27px en staat
   het telefoonblok scheef.

   Aan de kant van het account staat 6px. Dat is 18 optisch, en dus 3 meer
   dan aan de andere kant. Met opzet: rechts staat de knop naast een blauw
   vlak met een harde rand, links staat hij naast tekst, en tekst brengt zelf
   geen rand mee. Diezelfde 18 optisch staat in het mobiele eiland tussen het
   account en de winkelwagen, en daar leest het prettig.

   Kortom: de getallen 6 en 15 zijn niet gelijk, en dat hoort zo. Niet
   "rechttrekken". */

header#masthead .nav-bar .top-bar .sid-account-knop {
	order: -1;
	margin-right: 6px;
}

header#masthead .nav-bar .top-bar .sid-cart-knop {
	order: 1;
	margin-left: 15px;
}


/* HET BOLLETJE OP DEZELFDE PLEK ALS IN HET MOBIELE EILAND.
   In het eiland valt het middelpunt van het bolletje precies samen met de
   rechterbovenhoek van de tekening. Dat leest goed: het bolletje hangt aan
   het icoon en niet ergens los in de hoek.

   Even narekenen. Daar is de knop 40px en de tekening 20px, dus die staat
   van 10 tot 30. De hoek rechtsboven ligt op (30, 10). Het bolletje is 16px
   en staat op top 2 / right 2, dus van 22 tot 38 en van 2 tot 18 - het
   middelpunt ligt op (30, 10). Precies die hoek.

   Hier is de knop 44px, dus de tekening staat van 12 tot 32 en ligt de hoek
   op (32, 12). Om het middelpunt van het bolletje daar te krijgen wordt het
   top 4 / right 4. Dezelfde verhouding, alleen een groter vak.

   Het icoon zelf blijft staan waar het staat. */
header#masthead .nav-bar .top-bar .sid-account-knop::after {
	top: 4px;
	right: 4px;
}


/* ==========================================================================
   8. FORMAAT VAN DE ICONEN IN DE HEADERKNOPPEN
   ==========================================================================
   De iconen komen uit de Font Awesome-kit. Afhankelijk van hoe die kit is
   ingesteld wordt <i> op de pagina vervangen door <svg>, dus we sturen beide
   aan. Zonder deze regel neemt het icoon de lettergrootte van het menu over
   en staat het te groot of te klein in de knop.
   ========================================================================== */

/* ALLEEN DE HOOGTE VASTZETTEN, NIET DE BREEDTE.
   Elk Font Awesome-icoon heeft zijn eigen verhouding. Het poppetje is
   vierkant (viewBox 512 x 512), de heftruck is breder dan hoog
   (576 x 512). Zetten we allebei in een vak van 20 bij 20, dan vult het
   poppetje dat vak helemaal, maar wordt de heftruck teruggeschaald tot hij
   past: 20 breed en nog maar 17,8 hoog. Op papier even groot, in beeld ruim
   een tiende kleiner - en dat zie je.

   Door alleen de hoogte te bepalen en de breedte te laten meebewegen, zijn
   ze allebei 20 hoog en houdt elk icoon zijn eigen verhouding. */

.sid-header-knop svg {
	display: block;
	height: 20px;
	width: auto;
}

/* Wordt de kit als lettertype geladen in plaats van als tekening, dan is de
   lettergrootte het enige wat telt. */
.sid-header-knop i,
.sid-header-knop .sid-heftruck {
	display: block;
	font-size: 20px;
	line-height: 1;
}

/* ONZE EIGEN TEKENINGEN MOGEN GROTER DAN DE FONT AWESOME-ICONEN DIE ER STONDEN.
   Een letter-icoon vult zijn hele vierkant; onze tekening staat in een vak van
   24 met lucht eromheen. Bij dezelfde 20px oogt hij daardoor kleiner.

   LET OP: de hoogte moet hier staan, niet alleen de lettergrootte. De regel
   .sid-header-knop svg hierboven zet height op 20px en die wint van de 1em uit
   de tekening zelf. Daarom hier hoogte en breedte, net als daar. */
.sid-header-knop .sid-heftruck,
.sid-header-knop .sid-account-icoon {
	height: 26px;
	width: auto;
	font-size: 26px;
}


/* ==========================================================================
   9. BOVENTITEL IN DE BOVENSTE BALK
   ==========================================================================
   Hoort bij het extra ACF-veld uit het thema
   (inc/siderius-header-velden.php). Staat hier omdat de stylesheet van
   Cherry wordt gegenereerd uit SCSS en dus niet met de hand te bewerken is.
   Als Cherry dit ooit overneemt, hoort dit blok in hun SCSS thuis.

   De opbouw: icoon links, en rechts daarvan de boventitel boven de link.
   Met :has() geldt dit alleen voor items waar daadwerkelijk een boventitel
   is ingevuld - de rest blijft precies zoals hij was.
   ========================================================================== */

header#masthead .nav-bar .top-bar .link-repeater-container .link-item a:has(.boventitel) {
	display: grid;
	grid-template-columns: auto auto;
	grid-template-areas:
		"icoon boventitel"
		"icoon titel";
	column-gap: 10px;
	align-items: center;
	justify-items: start;
}

header#masthead .nav-bar .top-bar .link-repeater-container .link-item a:has(.boventitel) .icon {
	grid-area: icoon;
	margin-right: 0;
}

header#masthead .nav-bar .top-bar .link-repeater-container .link-item a .boventitel {
	grid-area: boventitel;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.3;
	opacity: .85;
}

header#masthead .nav-bar .top-bar .link-repeater-container .link-item a:has(.boventitel) > span:not(.boventitel) {
	grid-area: titel;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
}


/* ==========================================================================
   10. BIJSTELLINGEN BOVENSTE BALK
   ========================================================================== */

/**
 * Het thema tekent bij hover een streepje onder de link, via een :before op
 * de span. Nu er twee spans zijn, kreeg ook de boventitel dat streepje.
 * Hieronder zetten we het daar uit, zodat alleen het telefoonnummer wordt
 * onderstreept.
 */
header#masthead .nav-bar .top-bar .link-repeater-container .link-item a .boventitel:before,
.responsive-menu-container .other-items .link-repeater-container .link-item a .boventitel:before {
	display: none;
}

/**
 * Zonder icoon hoeft er ook geen kolom voor te worden vrijgehouden. Anders
 * blijft er links een lege ruimte staan waardoor de afstand tot de
 * accountknop groter lijkt dan die tot de winkelwagen.
 */
header#masthead .nav-bar .top-bar .link-repeater-container .link-item a:has(.boventitel):not(:has(.icon)) {
	grid-template-columns: auto;
	grid-template-areas:
		"boventitel"
		"titel";
	column-gap: 0;
}

/* ==========================================================================
   11. FOTOGALERIJ OP DE PRODUCTPAGINA
   ==========================================================================
   Hoort bij woocommerce/single-product/product-image.php en
   js/siderius-galerij.js.
   ========================================================================== */

/* De galerij is zelf de witte kaart; er zit geen omhulsel omheen. */
.sid-galerij {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding: 20px;
	background: #fff;
	border-radius: var(--sid-radius);
	box-shadow: var(--sid-schaduw);
}


/* --- De grote foto -------------------------------------------------------- */

.sid-galerij-kader {
	position: relative;
}

/* 4:3, en de foto volledig in beeld: bij een machine lopen mast en vorken tot
   de rand, dus bijsnijden mag niet. */
.sid-galerij-viewport {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: 5px;
	cursor: zoom-in;
}

.sid-galerij-foto {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform .3s ease;
}

/* WooCommerce zet een schaduw op productfoto's; binnen de kaart niet. */
#content .sid-product .sid-galerij img {
	box-shadow: none;
}


/* --- De pijlen ------------------------------------------------------------ */

.sid-galerij-pijl {
	position: absolute;
	z-index: 2;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: var(--sid-schaduw);
	color: var(--sid-blauw);
	font-size: 14px;
	cursor: pointer;
	transition: ease .3s all;
}

.sid-galerij-vorige {
	left: 15px;
}

.sid-galerij-volgende {
	right: 15px;
}

/**
 * :focus-visible en niet :focus.
 *
 * Na een muisklik houdt een knop de focus vast. Met :focus blijft hij dan
 * blauw staan tot je ergens anders klikt - precies wat je niet wilt.
 * :focus-visible geldt alleen als iemand met het toetsenbord navigeert, en
 * daar hoort de markering ook echt thuis.
 */
.sid-galerij-pijl:hover,
.sid-galerij-pijl:focus-visible {
	background: var(--sid-blauw);
	color: #fff;
}


/* --- De miniaturen -------------------------------------------------------- */

.sid-galerij-strook {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.sid-galerij-mini {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	padding: 0;
	border: 1px solid var(--sid-lijn);
	border-radius: 5px;
	background: #fff;
	cursor: pointer;
	transition: ease .3s all;
}

.sid-galerij-mini[hidden] {
	display: none;
}

/* Miniaturen mogen wel bijsnijden: die zijn om te herkennen, niet om te
   bekijken. */
#content .sid-product .sid-galerij-mini img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sid-galerij-mini:hover {
	border-color: var(--sid-blauw);
}

.sid-galerij-mini.is-actief {
	border-color: var(--sid-blauw);
	box-shadow: 0 0 0 1px var(--sid-blauw);
}

/* De "+3" over de laatste tegel; leeg blijft hij weg. */
.sid-galerij-meer {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 37, 51, .7);
	color: #fff;
	font: 700 16px 'Open Sans', sans-serif;
}

.sid-galerij-meer:empty {
	display: none;
}


@media (max-width: 991px) {

	.sid-galerij {
		padding: 15px;
	}

	.sid-galerij-strook {
		gap: 10px;
	}
}


/* ==========================================================================
   12. BLOK "AANBOD" (PRODUCTEN EN DIENSTEN)
   ==========================================================================
   Hoort bij het flexibele blok in het thema:
     inc/flex/row_siderius_aanbod.php
     inc/siderius-flex-aanbod-velden.php

   Staat hier omdat de stylesheet van Cherry uit SCSS wordt gegenereerd en
   dus niet met de hand te bewerken is. Neemt Cherry dit ooit over, dan hoort
   dit blok in hun SCSS thuis.
   ========================================================================== */

.flex-siderius-aanbod .sid-aanbod {
	width: 100%;
	margin: 0 auto;
}

/* Smal houdt de lijst gecentreerd zoals in het mobiele ontwerp. */
.flex-siderius-aanbod.sid-breedte-smal .sid-aanbod {
	max-width: 520px;
}

/* De titel komt uit een tekstverwerker en staat in een 'wysiwyg-content'
   omhulsel. Het kopniveau, de lettergrootte en de blauwe kleur van een vet
   woord komen daardoor uit de stylesheet van Cherry zelf. Hier zetten we
   alleen de uitlijning en de ruimte eronder.

   DIE 30px IS GEEN WILLEKEURIG GETAL. Cherry werkt met een vaste reeks
   afstanden in sass/_structure-variables-mixins.scss:

       $rsp__xs: 15px;  $rsp__s: 30px;  $rsp__m: 60px;
       $rsp: 120px;     $rsp__l: 180px;

   Onder de titel van een blok gebruiken zij overal $rsp__s, dus 30px. Zie
   bijvoorbeeld .flex-logo-slider .title, .flex-projects-slider
   .title-container en .flex-cta-block .title in hun eigen stylesheet. Wij
   houden diezelfde afstand aan, zodat dit blok in het ritme van de rest van
   de pagina blijft staan. */
.flex-siderius-aanbod .sid-aanbod-titel {
	margin: 0 0 30px;
	text-align: center;
	text-wrap: pretty;
}

.flex-siderius-aanbod .sid-aanbod-titel > *:last-child {
	margin-bottom: 0;
}

/* De lijst: op telefoon altijd onder elkaar.
   De 15px tussenruimte is $rsp__xs uit de reeks van Cherry. */
.flex-siderius-aanbod .sid-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 15px;
}

/* Op een breder scherm het aantal kolommen uit het beheer. */
@media only screen and (min-width: 768px) {
	.flex-siderius-aanbod .sid-list.sid-kolommen-2 { grid-template-columns: repeat(2, 1fr); }
	.flex-siderius-aanbod .sid-list.sid-kolommen-3 { grid-template-columns: repeat(3, 1fr); }
}

/* De tegel zelf. Schaduw, hoekafronding en overgangsduur zijn overgenomen
   van de link-blokken van Cherry (sass/_elements.scss, .block-item
   .link-block), zodat een tegel hier hetzelfde aanvoelt als een blok elders
   op de site. */
.flex-siderius-aanbod .sid-item {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 12px;
	background: #fff;
	border-radius: 10px;
	box-shadow: var(--sid-schaduw);
	color: var(--sid-donker);
	text-decoration: none;
	transform: translateY(0);
	transition: ease .3s all;
}

/* HOVER - hetzelfde gedrag als hun link-blokken:
   de schaduw wordt zwaarder, het blok komt vijf pixels omhoog, de foto zoomt
   iets in en de tekst en het pijltje worden donkerblauw. Het omhoog komen
   doen zij alleen vanaf 991px, want op een aanraakscherm bestaat hover niet
   en zou het blok blijven hangen. */
a.sid-item:hover {
	box-shadow: var(--sid-schaduw-hover);
	color: var(--sid-blauw-donker);
	text-decoration: none;
}

@media only screen and (min-width: 991px) {
	a.sid-item:hover {
		transform: translateY(-5px);
	}
}

a.sid-item:hover .sid-thumb img {
	transform: scale(1.05);
}

/* Het pijltje verkleurt mee, maar beweegt niet. Cherry laat hun pijltjes
   ook stilstaan: bij hen is het groeiende streepje onder de tekst het
   signaal, niet een verschuivend pijltje (sass/_elements.scss, .read-more). */
a.sid-item:hover .sid-arrow {
	color: var(--sid-blauw-donker);
}

/* De miniatuur met dat ene ronde hoekje rechtsonder. */
.flex-siderius-aanbod .sid-thumb {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 62px;
	border-radius: 8px 8px 22px 8px;
	background: #fff;
	overflow: hidden;
}

.flex-siderius-aanbod .sid-thumb img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	transform: scale(1);
	transition: ease .3s all;
}

/* Vullend voor sfeerfoto's, passend voor productfoto's op wit. */
.flex-siderius-aanbod .sid-thumb.fill img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.flex-siderius-aanbod .sid-tekst {
	min-width: 0;
}

/* De lettergrootte komt uit de typografieschaal van Cherry
   (sass/_structure-variables-mixins.scss, regel 76-86):

       $fontsize__body: 18px;   $lh__headings: 1.2;

   Eerder stond hier 14,5px. Dat was een met de hand bijgeschaafd getal uit
   het mobiele ontwerp, dat in de schaal van het thema nergens voorkomt.

   Hier stond ook .sid-sub, de ondertitel onder de titel. Dat veld is op
   08-09-2026 uit het blok gehaald; er stond nergens een ondertitel in. */
.flex-siderius-aanbod .sid-title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
}

.flex-siderius-aanbod .sid-arrow {
	margin-left: auto;
	padding-left: 10px;
	font-size: 18px;
	color: var(--sid-blauw);
	transition: ease .3s all;
}


/* --- op een telefoon ---------------------------------------------------

   Cherry schakelt onder 768px de bodytekst terug van 18 naar 16px
   (sass/_normalize.scss, regel 18-20, $fontsize__body_mobile). Wij doen
   hetzelfde, en laten de miniatuur evenredig meekrimpen naar het formaat uit
   het oorspronkelijke mobiele ontwerp. Zonder dit blijft de foto even groot
   terwijl de tegel smaller wordt, en breekt een titel als "Elektrische
   palletwagens" op een smal scherm over twee regels. */
@media only screen and (max-width: 768px) {

	.flex-siderius-aanbod .sid-item {
		gap: 12px;
		padding: 10px;
	}

	.flex-siderius-aanbod .sid-thumb {
		width: 70px;
		height: 52px;
		border-radius: 6px 6px 18px 6px;
	}

	.flex-siderius-aanbod .sid-title {
		font-size: 16px;
	}

	.flex-siderius-aanbod .sid-arrow {
		font-size: 16px;
		padding-left: 8px;
	}
}


/* ==========================================================================
   13. UITKLAPMENU MET CATEGORIEEN OP DESKTOP

   TWEE DINGEN.

   1. DE BREEDTE. De categorienamen dragen hun zoekwoord en zijn daardoor lang:
      "Elektrische heftrucks", "Pompwagens en palletwagens". Cherry geeft het
      uitklapmenu min-width 200px en de links 20px padding aan weerszijden, dus
      er blijft ongeveer 160px over voor tekst. Die namen braken over twee
      regels. Hieronder groeit het menu mee met het langste item.

   2. DE UITLIJNING. Cherry laat elk uitklapmenu naar rechts openklappen
      (left: 0), behalve het laatste menu-item -- dat klapt naar links open
      zodat het niet buiten het scherm valt:

          ...li.menu-item.menu-item-has-children:last-of-type > ul.sub-menu {
              left: auto;
              right: 0;
          }

      Dat staat zo in style.css van het thema, zowel lokaal als op de live
      site; er is niets aan gewijzigd. Het gevolg was dat DNA Siderius er
      anders uitzag dan Nieuw en Service.

      Op verzoek klappen ze nu allemaal naar links open, zoals DNA Siderius.
      Dat kan hier veilig, omdat het menu rechts in de header staat: zelfs het
      eerste item heeft links ruim genoeg over. Onder 1200px neemt het mobiele
      menu het toch over.

   3. DE UITLIJNING OP HET PIJLTJE. Cherry geeft een gewoon item met submenu
      32px padding rechts met het pijltje op right: 20px, en het LAATSTE item
      12px met het pijltje op right: 0. Bij DNA Siderius viel de rand van het
      item daardoor samen met het pijltje en lijnde het uitklapmenu mooi uit;
      bij Nieuw en Service stak het er 20px voorbij. Hieronder lijnen ze
      allemaal uit op het pijltje.
   ========================================================================== */

header#masthead .nav-bar .bottom-navigation ul.menu > li.menu-item.menu-item-has-children > ul.sub-menu {
	left: auto;
	right: 20px;
	width: max-content;
	max-width: 360px;
}

/* Het laatste item heeft zelf 12px padding en zijn pijltje staat op right: 0,
   dus daar valt de rand van het item al samen met het pijltje. */
header#masthead .nav-bar .bottom-navigation ul.menu > li.menu-item.menu-item-has-children:last-of-type > ul.sub-menu {
	right: 0;
}

header#masthead .nav-bar .bottom-navigation ul.menu > li.menu-item.menu-item-has-children > ul.sub-menu > li.menu-item > a {
	white-space: nowrap;
}


/* ==========================================================================
   14. DE OVERZICHTSPAGINA (WINKEL EN CATEGORIEEN)

   De opmaak van het ontwerp 0aoverzichtspagina.html, vertaald naar echte CSS.
   In dat ontwerp staat alle opmaak in het element zelf en staan hover-standen
   in een style-hover-attribuut. Dat bestaat alleen in de ontwerptool; in een
   browser doet het niets. Vandaar dat alles hier klassen zijn geworden.

   LET OP - EEN AFWIJKING VAN HET ONTWERP, BEWUST
   Het ontwerp gebruikt schaduwen met een verschuiving naar beneden
   (0 2px 8px), waardoor een kaart lijkt op te tillen. Het thema van Cherry
   gebruikt overal een GLOED zonder verschuiving (0 0 10px 5px). Die gloed
   staat als --sid-schaduw in het palet bovenaan, zodat de winkel bij de rest
   van de site hoort.

   De variabelen die hier stonden zijn op 20-08-2026 naar dat ene palet
   bovenin verhuisd.
   ========================================================================== */

/* De grijze band tussen header en footer, zodat de witte kaarten opvallen. */
.woocommerce #content,
.woocommerce-page #content {
	background: var(--sid-pagina);
}


/* --- Kruimelpad ---------------------------------------------------------- */

/**
 * De pagina waar je NU bent staat in de gewone tekstkleur; alleen de stappen
 * ervoor zijn links, en die zijn blauw. Dat is wat een kruimelpad hoort te
 * doen: laten zien waar je klikken kunt. Coolblue en bol.com kleuren hun
 * kruimelpad om dezelfde reden blauw.
 */
.sid-kruimels {
	font-size: 13px;
	color: var(--sid-donker);
	margin-bottom: 15px;
}

.sid-kruimels a {
	color: var(--sid-blauw-midden);
	text-decoration: none;
}

.sid-kruimels a:hover,
.sid-kruimels a:focus-visible {
	color: var(--sid-blauw-midden);
	text-decoration: underline;
}

/**
 * HET SCHEIDINGSTEKEN IS HETZELFDE PIJLTJE ALS IN DE VOETTEKST.
 *
 * Cherry tekent dat als een SVG in de regel zelf, 8x12, met vulling wit:
 * de <li>'s in de footer hebben het als achtergrond op hun ::before. Hier
 * staat exact hetzelfde pad, alleen kleiner (6x9, want de tekst is 13 in
 * plaats van 18) en in het labelgrijs (%236B7278 is #6B7278).
 *
 * Het is een tekening, geen letter: in het sjabloon staat aria-hidden op de
 * span, zodat een schermlezer niet elke stap "pijl" voorleest.
 */
.sid-kruimel-streep {
	display: inline-block;
	width: 6px;
	height: 9px;
	margin: 0 10px;
	vertical-align: baseline;
	background: url("data:image/svg+xml,%3Csvg width='8' height='12' viewBox='0 0 8 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.29665e-07 12L5.16158 6L0 2.79602e-07L2.83842 1.80399e-07L8 6L2.83842 12L2.29665e-07 12Z' fill='%236B7278'/%3E%3C/svg%3E") no-repeat center / contain;
}


/* --- Titel en introtekst ------------------------------------------------- */

.sid-overzicht-titel {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 34px;
	color: var(--sid-donker);
	margin: 0;
}

/* De onderruimte van 10px die hier stond is weg: onder de titel komt nu eerst
   het blauwe streepje (.sid-paginastreep, sectie 24), en dat brengt zijn eigen
   12px bovenruimte mee. De lucht onder het streepje staat op de introtekst
   hieronder. Gewijzigd 08-09-2026. */

/* De SEO-tekst van de categorie. Een leesbare regellengte houdt hem
   prettig; daarom een maximum, ook op brede schermen. */
/**
 * 14px, en GEEN aparte maat voor mobiel.
 *
 * Bewuste afwijking van het thema (dat zet lopende tekst op 18, en 16 onder
 * 768px). Deze tekst staat boven het aanbod en mag daar niet mee concurreren
 * - zie ook de kleur. 14 is Cherry's eigen kleine maat, dus de afwijking
 * blijft binnen zijn reeks.
 *
 * Waarom hij op een telefoon NIET kleiner wordt: teksten verkleinen op mobiel
 * is een gewoonte uit de tijd dat schermen weinig pixels hadden. Je houdt een
 * telefoon niet verder weg dan een laptop, dus kleiner betekent gewoon
 * moeilijker lezen. Coolblue (13) en bol.com (14) gebruiken op elk scherm
 * dezelfde maat.
 *
 * De regelhoogte komt nog steeds uit het thema (1.5).
 */
.sid-overzicht-intro {
	margin-top: 16px;
	font-size: 14px;
	color: var(--sid-grijs);
	max-width: 760px;
}

.sid-overzicht-intro p {
	margin: 0 0 10px;
}


/* --- De twee kolommen ---------------------------------------------------- */

.sid-overzicht-kolommen {
	display: grid;
	grid-template-columns: 264px minmax(0, 1fr);
	gap: 30px;
	margin-top: 30px;
	align-items: start;
}


/* --- Zijbalk ------------------------------------------------------------- */

.sid-zijbalk {
	background: #fff;
	border-radius: var(--sid-radius);
	box-shadow: var(--sid-schaduw);
	overflow: hidden;
}

.sid-zijbalk-kop {
	padding: 15px 20px 10px;
	font: 700 13px 'Open Sans', sans-serif;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--sid-grijs);
}

.sid-zijbalk-lijst {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* GEEN LIJNTJES TUSSEN DE CATEGORIEEN. Gewijzigd 14-09-2026 door Tomas, na
   deze balk naast het klantcontactmenu te hebben gelegd: dat menu heeft geen
   scheidingslijnen en leest rustiger. Het verschil blijven maken de witruimte
   en de lichtblauwe actieve regel, en die zijn genoeg.

   DE LIJN ONDER DE KOP BLIJFT WEL. Die scheidt "CATEGORIE" van de lijst en dat
   is een ander soort grens dan die tussen twee categorieen onderling. Vandaar
   :first-child.

   De lijn boven het adviesblok staat los, in .sid-zijbalk-advies verderop. */
.sid-zijbalk-item:first-child {
	border-top: 1px solid var(--sid-lijn-licht);
}

.sid-zijbalk-item a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 20px;
	font-size: 14px;
	color: var(--sid-donker);
	text-decoration: none;
	transition: ease .3s all;
}

/**
 * Hover krijgt hetzelfde vlak als het actieve item. Dat mag, omdat het actieve
 * item zich niet alleen met kleur onderscheidt maar ook VET is - zie de regel
 * hieronder. Zou alleen de achtergrond het verschil maken, dan leek elke
 * categorie waar je overheen gaat de gekozen categorie.
 *
 * De tekstkleur staat er expliciet bij. Zonder die regel pakt Cherry's
 * "a:hover { color: #006daa }" het over en heb je er geen grip op.
 * Stond eerder op #F3F8FB - een eigen kleur die verder nergens voorkwam.
 */
.sid-zijbalk-item a:hover {
	background: var(--sid-lichtblauw);
	color: var(--sid-blauw-midden);
}

.sid-zijbalk-item.is-actief a {
	background: var(--sid-lichtblauw);
	color: var(--sid-blauw-midden);
	font-weight: 700;
}

.sid-zijbalk-aantal {
	margin-left: auto;
	font-size: 12px;
	color: var(--sid-grijs);
}

/* Gebroken wit, zodat het adviesblok zich losmaakt van de categorielijst
   erboven. Stond eerder op #FBFCFD - een eigen kleur die zo bleek was dat je
   hem niet zag; dit is de themakleur voor een zacht vlak binnen wit. */
.sid-zijbalk-advies {
	border-top: 1px solid var(--sid-lijn-licht);
	padding: 15px 20px 20px;
	background: var(--sid-vlak);
}

.sid-advies-titel {
	font: 700 14px 'Titillium Web', sans-serif;
	color: var(--sid-donker);
	margin-bottom: 5px;
}

.sid-advies-tekst {
	font-size: 13px;
	color: var(--sid-grijs);
	line-height: 1.45;
	margin: 0 0 10px;
}

/* De knop is 44px hoog: de kleinste maat die op een telefoon nog prettig te
   raken is. */
a.sid-knop-blauw {
	display: block;
	text-align: center;
	background: var(--sid-blauw);
	color: #fff;
	font: 700 14px 'Open Sans', sans-serif;
	text-transform: uppercase;
	padding: 13px;
	border-radius: 5px;
	text-decoration: none;
	transition: ease .3s all;
}

.sid-knop-blauw:hover {
	background: var(--sid-blauw-donker);
	color: #fff;
	text-decoration: none;
}


/* --- Balk boven het raster ----------------------------------------------- */

.sid-balk {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;
	background: #fff;
	border-radius: var(--sid-radius);
	box-shadow: var(--sid-schaduw);
	padding: 12px 20px;
	margin-bottom: 20px;
}

.sid-balk-aantal {
	font-size: 14px;
	color: var(--sid-donker);
}

.sid-balk-streep {
	width: 1px;
	height: 20px;
	background: var(--sid-lijn);
}

.sid-balk-label {
	font-size: 14px;
	color: var(--sid-grijs);
}

/**
 * De regelhoogte staat er expliciet bij, en dat is met opzet.
 *
 * Deze knop was 34px hoog toen de tekst 13,5 was. Op 14 rekende de browser
 * met "normal" een regel van 19 uit en werd de knop 35 - een pixel hoger dan
 * het schuifje Nieuw|Gebruikt ernaast, dat op 34 is gebouwd. Eén pixel zie je
 * niet, maar twee blokken naast elkaar die niet gelijk eindigen zie je wel.
 *
 * 18 + 7 + 7 boven/onder + 1 + 1 rand = 34. Verander je de padding of de
 * tekstgrootte, reken dan opnieuw - of pas .sid-schuif-baan mee aan.
 */
a.sid-balk-knop {
	font: 600 14px/18px 'Open Sans', sans-serif;
	color: var(--sid-grijs);
	border: 1px solid var(--sid-lijn);
	border-radius: 5px;
	padding: 7px 14px;
	text-decoration: none;
	transition: ease .3s all;
}

.sid-balk-knop:hover {
	border-color: var(--sid-blauw);
	color: var(--sid-blauw-midden);
	text-decoration: none;
}

.sid-balk-knop.is-actief {
	color: var(--sid-donker);
	border-color: var(--sid-blauw);
}

a.sid-balk-voorraad {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--sid-blauw-midden);
	text-decoration: none;
}

/* Het busje is onze eigen tekening en staat in een vak met lucht eromheen, dus
   hij mag groter dan de tekst. Breedte los, hij is breder dan hoog. */
.sid-balk-voorraad .sid-bus-icoon {
	flex: 0 0 auto;
	width: auto;
	height: 20px;
	font-size: 20px;
}

.sid-balk-voorraad.is-actief {
	font-weight: 700;
}


/* --- Het raster ---------------------------------------------------------- */

.sid-raster {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

/**
 * HET VAK REKT DE KAART UIT - NIET ANDERSOM.
 *
 * Stond hier alleen min-width, en de kaart erin vroeg zelf om "100% van de
 * hoogte van mijn ouder". Dat werkt niet in een raster: het vak krijgt zijn
 * hoogte pas van de rij, en op het moment dat de kaart die vraag stelt is
 * die hoogte nog 'auto'. De kaart valt dan terug op zijn eigen inhoud en is
 * korter dan het vak - zichtbaar zodra er iets hogers naast staat, zoals een
 * promokaart.
 *
 * Met flex hoeft de kaart niets te vragen: het vak duwt hem uit tot de volle
 * hoogte.
 */
.sid-kaart-vak {
	display: flex;
	min-width: 0;
}


/* --- De productkaart ----------------------------------------------------- */

a.sid-kaart {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	background: #fff;
	border-radius: var(--sid-radius);
	box-shadow: var(--sid-schaduw);
	overflow: hidden;
	color: var(--sid-donker);
	text-decoration: none;
	transition: ease .3s all;
}

.sid-kaart:hover {
	box-shadow: var(--sid-schaduw-hover);
	color: var(--sid-blauw-midden);
	text-decoration: none;
}

/* De foto krijgt een vast kader met een vaste verhouding, zodat alle kaarten
   even hoog beginnen ook als de ene foto staand is en de andere liggend. */
.sid-kaart-foto {
	position: relative;
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 15px;
	overflow: hidden;

	/* HIER STOND margin-bottom: 4px, EN DIE IS 14-09-2026 WEGGEHAALD.
	   Die duwde de streep in de kaart omlaag zodat hij gelijk liep met de lijn
	   onder het laatste item in de categoriezijbalk. Dat werkte, maar alleen
	   bij precies vijf categorieen: bij drie of zeven liep het alsnog uiteen,
	   want de zijbalk wordt per pagina een andere hoogte.
	   Nu de lijntjes tussen de categorieen weg zijn klopte het sowieso niet
	   meer. In plaats van hem opnieuw af te stellen is de hele afstelling
	   eruit. Twee losse kolommen hoeven niet op de pixel gelijk te lopen. */
}

/* contain, niet cover: een uitgeknipte machine mag niet bijgesneden worden en
   hoort lucht om zich heen te hebben.

   WAAROM HIER !important STAAT
   WooCommerce zet in zijn eigen stylesheet width: 100% op productafbeeldingen.
   Die regel is specifieker dan deze en wint dus, waardoor de foto de hele
   breedte pakt en over de ruimte eromheen heen loopt. Dit is een van de
   weinige plekken waar je van een andere stylesheet moet winnen en de nette
   weg niet bestaat.

   LET OP: dit repareert alleen hoe de foto WORDT GETOOND. Heeft WooCommerce
   het bestand zelf al bijgesneden - zie Weergave > Customizer > WooCommerce >
   Productafbeeldingen - dan is die bijsnede niet meer terug te draaien met
   opmaak. Zet die instelling op 'Niet bijsnijden'. */
.sid-kaart-foto img {
	max-width: 100%;
	max-height: 100%;
	width: auto !important;
	height: auto !important;
	object-fit: contain;
	display: block;
	margin: 0;
	transition: transform .3s ease;
}

/**
 * DE FOTO GROEIT BIJ HOVER. Proef 08-09-2026.
 *
 * Dezelfde beweging als bij de linkblokken op de homepagina: style.css bij
 * .block-item.link-block a:hover ... img, ook scale(1.05).
 *
 * DIT KOST NIETS. transform wordt door de browser op de grafische kaart
 * afgehandeld: de laag wordt groter getekend, de pagina hoeft niet opnieuw
 * uitgerekend te worden. Zou je in plaats hiervan width of height animeren,
 * dan wordt bij elk beeldje de hele pagina herberekend. Doe dat niet.
 *
 * .sid-kaart-foto heeft al overflow: hidden, dus de foto blijft binnen zijn
 * kader en er schuift niets over de kaartrand heen.
 *
 * BIJ GEBRUIKT IS DIT MOOIER DAN BIJ NIEUW. Een gebruikte machine heeft een
 * vullende foto (.sid-kaart-foto--vullend, hieronder); die zoomt in en dat is
 * waar het effect voor bedoeld is. Een nieuwe machine is een uitgeknipte Clark
 * op wit: die wordt alleen groter en loopt tegen de rand van zijn kader aan.
 *
 * WIL JE HEM ALLEEN BIJ GEBRUIKT: zet .sid-kaart-foto--vullend voor
 * .sid-kaart-foto in de twee selectors hieronder.
 */
.sid-kaart:hover .sid-kaart-foto img {
	transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {

	.sid-kaart-foto img {
		transition: none;
	}
}

/* DE GEBRUIKTE MACHINES: FOTO VULT DE TEGEL. Toegevoegd 25-08-2026.

   Die komen binnen met een echte foto, mét achtergrond. Met contain kregen die
   witte banen langs de zijkanten, alsof er een pasfoto op de kaart was geplakt.
   Vullend snijdt wel bij - bij een liggende foto merk je daar niets van.

   De klasse komt uit content-product.php en volgt het vinkje "hoort bij
   gebruikt" op de categorie. De regel volgt dus de categorie en niet de foto:
   hang je een uitgeknipte foto bij een gebruikte machine, dan wordt die toch
   bijgesneden.

   Deze regels staan NA die hierboven en zijn even specifiek; daarom winnen ze.
   Verplaats ze niet naar boven. */
.sid-kaart-foto--vullend {
	padding: 0;
}

.sid-kaart-foto--vullend img {
	max-width: none;
	max-height: none;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	object-position: center;
}

/* De kleur komt per label uit het beheer en staat in de style van het
   element zelf; hier staat alleen de vorm. */
.sid-kaart-labels {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.sid-kaart-label {
	font: 700 11px 'Open Sans', sans-serif;
	text-transform: uppercase;
	letter-spacing: .03em;
	padding: 5px 9px;
	border-radius: 4px;
}

/**
 * HET TEKSTRITME IS OPTISCH GEMETEN, NIET UIT DE REEKS GEPAKT.
 *
 * 17 boven, 16 onder, en daarbinnen 1 / 8 / 4 / 12. Die waarden staan niet in
 * Cherry's reeks (15-30-60-120 en 5-10-12-15-20) en dat is bewust: ze zijn
 * gemeten van de scheidingslijn tot de LETTERS, met het regelinterval eruit
 * gerekend.
 *
 * WAAROM DAT HIER BETER IS
 * Het oog ziet witruimte tot de inkt, niet tot de onzichtbare regelhoogte.
 * Op deze kaart staan vier tekstgroottes onder elkaar - klein grijs label,
 * vette titel, kleine specregels, grote prijs - en dan lopen die twee ver
 * uiteen. Een vaste reeks geeft dan een ritme dat rekenkundig klopt maar
 * optisch niet.
 *
 * Links en rechts blijft het wel 15px: dat is Cherry's binnenmarge, gemeten
 * in hun eigen kaart (.qi-inner). Alleen het VERTICALE ritme wijkt af.
 *
 * Zie het document Ruimteschaal-px-waarden.md in de projectmap.
 */
/**
 * DE BOVENRUIMTE STAAT WEER OP 17. Teruggedraaid 14-09-2026.
 *
 * Hier stond 13, om te compenseren voor de 4px die .sid-kaart-foto erbij
 * kreeg. Dat hele koppel was er om deze streep gelijk te laten lopen met de
 * lijn onder het laatste item van de categoriezijbalk.
 *
 * Waarom dat weg is: die uitlijning klopte alleen bij vijf categorieen, en
 * sinds de lijntjes tussen de categorieen weg zijn klopte hij helemaal niet
 * meer. Twee kolommen die naast elkaar staan hoeven niet op de pixel gelijk
 * te lopen; een afstelling die van het aantal items afhangt is onderhoud
 * zonder opbrengst.
 */
.sid-kaart-tekst {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 17px 15px 16px;
	border-top: 1px solid var(--sid-lijn-licht);
}

.sid-kaart-categorie {
	font: 400 12px 'Open Sans', sans-serif;
	color: var(--sid-grijs);
	margin-bottom: 1px;
}

/**
 * PROEF 08-09-2026 - de onderstreping die vanuit het midden uitgroeit.
 *
 * Dezelfde beweging als bij de linkblokken op de homepagina (Verhuur, Service,
 * Onderdelen): style.css bij .block-item.link-block .link-container span:before.
 * Daar staat een lijn op scaleX(0) die naar scaleX(1) gaat. Zonder
 * transform-origin is dat het midden, dus hij groeit naar twee kanten uit.
 *
 * Wat hier anders is dan bij die linkblokken:
 *  - kleur #009EE3 (var(--sid-blauw), het secundaire blauw) en niet #006997.
 *    Bij de linkblokken wordt de lijn op hover juist donkerder.
 *  - de lijn hangt aan de kaart-hover, niet aan de hover op de kop zelf. De
 *    hele kaart is een link, dus je zweeft nooit precies over de titel.
 *
 * width: fit-content is nodig omdat de h3 in een flexkolom staat en anders
 * de volle kaartbreedte pakt; de lijn zou dan doorlopen tot voorbij de tekst.
 */
.sid-kaart-naam {
	font: 700 17px 'Titillium Web', sans-serif;
	color: inherit;
	margin: 0;
	line-height: 1.25;
	position: relative;
	width: fit-content;
	max-width: 100%;
}

.sid-kaart-naam::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1px;
	background: var(--sid-blauw);
	transform: scaleX(0);
	transition: transform .3s ease;
}

.sid-kaart:hover .sid-kaart-naam::after {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {

	.sid-kaart-naam::after {
		transition: none;
	}
}

.sid-kaart-kenmerken {
	margin: 8px 0 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sid-kenmerk {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 13px;
}

.sid-kenmerk dt {
	color: var(--sid-grijs);
	font-weight: 400;
	margin: 0;
}

/* Cijfers even breed, zodat de waarden onder elkaar uitlijnen. */
.sid-kenmerk dd {
	color: var(--sid-donker);
	font-weight: 600;
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.sid-kaart-prijs {
	margin-top: auto;
	padding-top: 12px;
	font: 700 18px 'Titillium Web', sans-serif;
	color: var(--sid-donker);
}

.sid-kaart-prijs .woocommerce-Price-amount {
	color: var(--sid-donker);
}

/**
 * DE AANBIEDINGSPRIJS OP DE KAART.
 *
 * WooCommerce zet bij een actieprijs de oude prijs in <del> en de nieuwe in
 * <ins>. Wij geven die twee alleen een kleur en een grootte; het doorstrepen
 * doet de browser zelf.
 *
 * De regels hierboven blijven gelden zolang er geen actie loopt - dan is er
 * geen <del> en geen <ins> en staat de prijs gewoon donker.
 *
 * nowrap: twee bedragen naast elkaar breken anders af op een smalle kaart.
 */
.sid-kaart-prijs {
	white-space: nowrap;
}

.sid-kaart-prijs del,
.sid-kaart-prijs del .woocommerce-Price-amount {
	font: 400 13px 'Open Sans', sans-serif;
	color: var(--sid-grijs);
}

.sid-kaart-prijs del {
	margin-right: 7px;
	text-decoration: line-through;
}

.sid-kaart-prijs ins,
.sid-kaart-prijs ins .woocommerce-Price-amount {
	color: var(--sid-rood);
}

/* <ins> krijgt van de browser een streep eronder en soms een geel vlak. */
.sid-kaart-prijs ins {
	background: none;
	text-decoration: none;
}

/**
 * "excl. btw" altijd grijs - met en zonder actie.
 *
 * Zonder deze regel erft dat woordje de kleur van de prijs ernaast, en dan
 * staat er bij een aanbieding grijs, rood en rood op een rij. Drie kleuren in
 * een regel van vier woorden.
 *
 * Een eigen regel wint altijd van overerving, dus dit dekt beide gevallen.
 */
.sid-kaart-prijs .woocommerce-price-suffix,
.sid-kaart-prijs small {
	font: 400 12px 'Open Sans', sans-serif;
	color: var(--sid-grijs);
}

/**
 * DE LEASEPRIJS RECHTS OP DE PRIJSREGEL.
 *
 * "of € 385,16 p/m*" naast het bedrag, uit ontwerp 7J. Het bedrag zelf stond
 * los in .sid-kaart-prijs en zit nu in een eigen span, want je kunt twee
 * dingen alleen uit elkaar duwen als het allebei elementen zijn.
 *
 * WAAROM baseline EN GEEN center
 * Links staat 18px Titillium, rechts 12px Open Sans. Bij align-items: center
 * zweeft het kleine bedrag halverwege de grote prijs; op baseline staan ze op
 * dezelfde schrijflijn, zoals in het ontwerp.
 *
 * DEZELFDE GRIJS ALS "excl. btw"
 * Het ontwerp had #8a8a8a, maar het woordje dat er vaak pal naast staat is
 * --sid-grijs (#6B7278). Twee bijna gelijke grijzen in een regel van vijf
 * woorden zie je als een foutje, niet als een verschil.
 *
 * PAST HET NIET, DAN ZAKT DE LEASEPRIJS NAAR EEN EIGEN REGEL.
 * Dat is wat flex-wrap hier doet, en het is de reden dat de leaseprijs met
 * margin-left rechts wordt gezet en niet met space-between: bij wrap zou
 * space-between het bedrag op de eerste regel gaan uitrekken.
 *
 * Nagemeten 28-09-2026 op een kaart van 345px: gewone prijs en leaseprijs
 * samen 238px, dus 77px ruimte over. Bij een ACTIEprijs (doorgestreept bedrag
 * erbij) blijft daar 7px van over; wordt de kaart dan smaller dan ongeveer
 * 320px, dan zakt de leaseprijs netjes naar de regel eronder in plaats van
 * afgekapt te worden. Afkappen was de eerste opzet, maar een half bedrag
 * ("of € 385,1...") is erger dan een regel extra.
 */
.sid-kaart-prijs {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
}

.sid-kaart-lease {
	margin-left: auto;
	font: 400 12px 'Open Sans', sans-serif;
	color: var(--sid-grijs);
}


/* --- De promokaart ------------------------------------------------------- */

/**
 * GEEN BINNENMARGE OP DE KAART ZELF.
 *
 * Die hoort op het tekstblok, en daar zit hij ook (zie de stijlen A, B en C
 * in sectie 16). Stond hij hier ook, dan begint bij stijl A het donkere
 * verloop 22px naar binnen en zie je de foto langs alle randen doorlopen -
 * alsof er een donker vlak op de kaart is geplakt in plaats van dat de kaart
 * zelf donker is.
 */
.sid-promo {
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	background: var(--sid-donker);
	color: #fff;
	border-radius: var(--sid-radius);
	box-shadow: var(--sid-schaduw);
	padding: 0;
}

.sid-promo-titel {
	font: 700 25px/1.2 'Titillium Web', sans-serif;
}

.sid-promo-cijfers {
	margin-top: auto;
	padding-top: 20px;
	display: flex;
	gap: 10px;
	font-size: 13px;
	line-height: 1.35;
}

/**
 * De lettergrootte staat HIER en niet alleen op de rij eromheen.
 *
 * Bij de veldenversie zit hij op .sid-promo-cijfers, maar in vrije HTML
 * gebruik je .sid-kolommen en dan erfde de tekst de maat van de pagina: 16px
 * op de site, 13px in het beheer. Daardoor week het voorbeeld in het beheer
 * af van wat er werkelijk stond - het brak daar niet af en op de site wel.
 */
.sid-promo-cijfer {
	flex: 1;
	border-top: 2px solid var(--sid-blauw);
	padding-top: 9px;
	font-size: 13px;
	line-height: 1.35;
}

.sid-promo-getal {
	display: block;
	font: 700 20px 'Titillium Web', sans-serif;
}


/* --- De hubtegels -------------------------------------------------------- */

.sid-hub-raster {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

a.sid-hub-tegel {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: var(--sid-radius);
	box-shadow: var(--sid-schaduw);
	overflow: hidden;
	color: var(--sid-donker);
	text-decoration: none;
	transition: ease .3s all;
}

.sid-hub-tegel:hover {
	box-shadow: var(--sid-schaduw-hover);
	color: var(--sid-blauw-midden);
	text-decoration: none;
}

.sid-hub-foto {
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 15px;
}

.sid-hub-foto img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.sid-hub-tekst {
	padding: 15px 20px 20px;
	border-top: 1px solid var(--sid-lijn-licht);
}

.sid-hub-naam {
	font: 700 20px 'Titillium Web', sans-serif;
	color: inherit;
	margin: 0 0 5px;
}

.sid-hub-omschrijving {
	font-size: 14px;
	line-height: 1.5;
	color: var(--sid-grijs);
	margin: 0 0 10px;
}

.sid-hub-aantal {
	font-size: 13px;
	color: var(--sid-grijs);
}


/* --- Lege categorie ------------------------------------------------------ */

.sid-leeg {
	background: #fff;
	border-radius: var(--sid-radius);
	box-shadow: var(--sid-schaduw);
	padding: 30px;
	color: var(--sid-grijs);
	margin: 0;
}


/* --- Kleinere schermen --------------------------------------------------- */

/* De breekpunten van het thema: 991 en 768. */
@media (max-width: 991px) {

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

	.sid-raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sid-overzicht-titel {
		font-size: 28px;
	}
}

@media (max-width: 768px) {

	.sid-raster,
	.sid-hub-raster {
		grid-template-columns: minmax(0, 1fr);
	}

	.sid-balk-voorraad {
		margin-left: 0;
	}
}


/* ==========================================================================
   15. KOPPEN DIE ER WEL ZIJN MAAR NIET TE ZIEN

   Een pagina heeft een inhoudsopgave nodig: H1, daaronder H2's, daaronder
   H3's. Google leest die en een schermlezer springt eraan. In het ontwerp
   staat boven het productraster geen kop, dus die kop staat er wel in de
   code maar niet in beeld.

   WAAROM NIET display:none
   Wat op none staat bestaat voor een schermlezer niet meer, en Google
   negeert het. De regels hieronder halen het element uit beeld zonder het
   te verbergen: het staat er nog, het is alleen 1 bij 1 pixel groot en
   buiten het zicht geschoven. Dit is de manier die het W3C hiervoor
   aanbeveelt.
   ========================================================================== */

.sid-verborgen {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* ==========================================================================
   16. PROMOKAARTEN — STIJLEN A, B EN C EN DE BREEDTES

   Sectie 14 tekent de basiskaart. Hieronder de drie stijlen en de breedte.

   WAAROM DRIE STIJLEN EN NIET EEN
   Ze overtuigen op een andere manier. A werkt met een foto en gaat over
   gevoel en vertrouwen. B is een gewoon blok en werkt voor alledaagse
   boodschappen als "we hebben ook laders". C is een vol kleurvlak en roept
   het hardst - alleen voor een aanbieding. Gebruik je C overal, dan valt hij
   nergens meer op.
   ========================================================================== */

/* --- Breedte ------------------------------------------------------------- */

.sid-promo--breed-2 { grid-column: span 2; }
.sid-promo--breed-3 { grid-column: span 3; }


/* --- Gemeenschappelijk --------------------------------------------------- */

.sid-promo {
	position: relative;
	overflow: hidden;
}

.sid-promo-label {
	font: 700 12px 'Open Sans', sans-serif;
	text-transform: uppercase;
	letter-spacing: .08em;
	margin-bottom: 6px;
	opacity: .85;
}

.sid-promo-uitleg {
	font-size: 14px;
	line-height: 1.5;
	margin: 8px 0 0;
}

/* 44px hoog: de kleinste maat die op een telefoon nog prettig te raken is. */
.sid-promo-knop {
	align-self: flex-start;
	margin-top: 20px;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 11px 24px;
	border-radius: 5px;
	font: 700 14px 'Open Sans', sans-serif;
	text-decoration: none;
	transition: ease .3s all;
}


/* --- Stijl A: foto over de hele kaart ------------------------------------ */

.sid-promo--a .sid-promo-foto {
	position: absolute;
	inset: 0;
}

/* Sfeerfoto's mogen wel bijgesneden worden - die hebben geen randen die
   ertoe doen. Een machinefoto op wit hoort hier dus niet. */
.sid-promo--a .sid-promo-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/**
 * De donkere waas onder de tekst. Zonder deze laag valt tekst weg zodra er
 * een lichte plek in de foto zit, en haal je de 4,5:1 aan contrast niet die
 * nodig is om leesbaar te blijven.
 */
/**
 * De waas ligt BOVEN en ONDER, niet over de hele foto.
 *
 * Een verloop van boven naar beneden over de hele hoogte maakt de foto in het
 * midden dof - je ziet dan niet meer wie er op staat, en juist dat is de reden
 * dat je een foto van je eigen mensen gebruikt. Twee losse verlopen houden het
 * midden vrij en leggen alleen daar donker waar tekst staat.
 */
.sid-promo--a .sid-promo-tekst {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	padding: 26px 22px;
	color: #fff;
	background:
		linear-gradient(to bottom,
			rgba(0, 37, 51, .92) 0%,
			rgba(0, 37, 51, .55) 28%,
			rgba(0, 37, 51, 0) 52%),
		linear-gradient(to top,
			rgba(0, 37, 51, .94) 0%,
			rgba(0, 37, 51, .90) 20%,
			rgba(0, 37, 51, 0) 48%);
}

.sid-promo--a .sid-promo-knop {
	background: var(--sid-blauw);
	color: #fff;
}

.sid-promo--a .sid-promo-knop:hover {
	background: var(--sid-blauw-donker);
	color: #fff;
	text-decoration: none;
}


/* --- Stijl B: foto boven, tekst eronder ---------------------------------- */

.sid-promo--b {
	background: var(--sid-lichtblauw);
	color: var(--sid-donker);
	display: flex;
	flex-direction: column;
}

.sid-promo--b .sid-promo-foto {
	aspect-ratio: 16 / 9;
}

.sid-promo--b .sid-promo-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sid-promo--b .sid-promo-tekst {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 24px 22px;
}

.sid-promo--b .sid-promo-label {
	color: var(--sid-blauw-midden);
}

.sid-promo--b .sid-promo-titel {
	font: 700 20px/1.25 'Titillium Web', sans-serif;
}

.sid-promo--b .sid-promo-uitleg {
	color: var(--sid-grijs);
}

.sid-promo--b .sid-promo-knop {
	background: var(--sid-blauw);
	color: #fff;
}

.sid-promo--b .sid-promo-knop:hover {
	background: var(--sid-blauw-donker);
	color: #fff;
	text-decoration: none;
}


/* --- Stijl C: vol kleurvlak ---------------------------------------------- */

/**
 * Het donkerblauw van Siderius (#002533), niet het accentblauw.
 *
 * Het accentblauw is de knopkleur: die betekent op deze site "hier kun je
 * klikken". Een heel vlak in die kleur maakt dat signaal zwakker, en naast
 * een raster met witte productkaarten schreeuwt het. Het donkerblauw is de
 * kleur van de header en de footer en hoort daarmee bij het merk in plaats
 * van bij een handeling.
 */
.sid-promo--c {
	background: var(--sid-donker);
	color: #fff;
}

.sid-promo--c .sid-promo-tekst {
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	padding: 26px 24px;
}

.sid-promo--c .sid-promo-titel {
	font: 700 22px/1.25 'Titillium Web', sans-serif;
}

/* Op het donkere vlak mag de knop wel het accentblauw dragen - daar is die
   kleur juist voor bedoeld, en hij springt eruit zonder te schreeuwen. */
.sid-promo--c .sid-promo-knop {
	background: var(--sid-blauw);
	color: #fff;
}

.sid-promo--c .sid-promo-knop:hover {
	background: var(--sid-blauw-donker);
	color: #fff;
	text-decoration: none;
}


/* --- Kleinere schermen --------------------------------------------------- */

@media (max-width: 991px) {

	/* Het raster heeft hier twee kolommen; een kaart van drie past niet. */
	.sid-promo--breed-3 { grid-column: span 2; }
}

@media (max-width: 768px) {

	.sid-promo--breed-2,
	.sid-promo--breed-3 { grid-column: span 1; }
}


/* ==========================================================================
   17. DE HELE PROMOKAART AANKLIKBAAR

   Een grotere trefzone dan alleen de knop: overal op de kaart klikken werkt.

   WAAROM NIET DE HELE KAART IN EEN LINK WIKKELEN
   Dat is de gebruikelijke truc, maar in een link mag geen tweede link staan.
   De knop zou dan geen echte knop meer zijn, en rechtsklikken of openen in
   een nieuw tabblad werkt er niet meer op.

   Hieronder blijft de knop de echte link en rekt hij zich met een onzichtbaar
   laagje uit over de hele kaart. Voor de bezoeker hetzelfde gevoel, maar
   rechtsklikken, middelklikken en schermlezers blijven werken.

   Geen knop op de kaart? Dan is er ook niets om heen te gaan en blijft de
   kaart gewoon een vlak. Dat is de bedoeling.
   ========================================================================== */

.sid-promo-knop::after {
	content: '';
	position: absolute;
	inset: 0;
	/* Boven de foto en de waas, onder de knop zelf. */
	z-index: 1;
}

/* De knop en zijn tekst blijven boven dat laagje liggen, anders is de knop
   zelf niet meer aan te wijzen. */
.sid-promo-knop {
	position: relative;
	z-index: 2;
}

/**
 * Een kaart zonder zichtbare knop, maar wel met een bestemming.
 *
 * Zo werkt een productkaart ook: die heeft geen knop en klikt toch overal.
 * Dit laagje ligt over de hele kaart en is de link.
 */
a.sid-promo-dekking {
	position: absolute;
	inset: 0;
	z-index: 2;
}

/**
 * De hele kaart voelt aanklikbaar zodra er een link op zit - met of zonder
 * zichtbare knop. Vandaar a[href] en niet de knop-klasse: anders reageert een
 * kaart die wel ergens heen gaat maar geen knop toont, nergens op.
 */
.sid-promo:has(a[href]) {
	cursor: pointer;
}

.sid-promo:has(a[href]):hover {
	box-shadow: var(--sid-schaduw-hover);
}


/* ==========================================================================
   18. EIGEN HTML IN EEN PROMOKAART — DE OMHULLING

   Slot 3 van de vier. Wat hier binnen staat is met de hand geplakt, dus het
   mag nooit de rest van de pagina kunnen meeslepen.

   EN DE TWEE HULPKLASSEN VOOR MOBIEL
   Inline stijlen kunnen geen media query bevatten. De klassen hieronder
   hebben er ook geen nodig: ze zeggen "zet naast elkaar zolang er ruimte
   is, anders onder elkaar". Daardoor beweegt een geplakt blok mee zonder
   dat je iets over schermbreedtes hoeft te bedenken.
   ========================================================================== */

/**
 * Een kolom over de volle hoogte, zodat je iets naar de onderkant kunt duwen.
 *
 * WAAROM DAT NODIG IS
 * Een promokaart is even hoog als de machines ernaast. Zonder dit staat alle
 * inhoud tegen de bovenrand geplakt met een gat eronder - de titel en de
 * cijfers kleven dan aan elkaar terwijl de onderste helft leeg blijft.
 * Met class="sid-onderaan" op het laatste blok zakt dat naar beneden, precies
 * zoals bij de veldenversie.
 */
.sid-promo-vrij {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
	/* break-word en niet anywhere: alleen afbreken als een woord echt niet
	   past. Met anywhere brak "vestigingen" middenin af zodra het krap werd. */
	overflow-wrap: break-word;
}

/* Duwt dit blok naar de onderkant van de kaart. */
.sid-promo .sid-onderaan {
	margin-top: auto;
}

/* Niets mag breder worden dan de kaart, wat er ook geplakt is. */
.sid-promo-vrij * {
	max-width: 100%;
	box-sizing: border-box;
}

.sid-promo-vrij img {
	height: auto;
	display: block;
}

/* De letters en kleur van de kaart erven, zodat geplakte tekst niet ineens
   in een ander lettertype staat. */
.sid-promo-vrij,
.sid-promo-vrij p,
.sid-promo-vrij div,
.sid-promo-vrij span,
.sid-promo-vrij li {
	font-family: inherit;
	color: inherit;
}

.sid-promo-vrij p:first-child,
.sid-promo-vrij h2:first-child,
.sid-promo-vrij h3:first-child {
	margin-top: 0;
}


/* --- Hulpklasse: kolommen die vanzelf onder elkaar vallen ---------------- */

/**
 * auto-fit met een minimum doet het werk: zolang elke kolom 120px kan
 * krijgen staan ze naast elkaar, daaronder gaan ze onder elkaar. Op een
 * brede kaart drie kolommen, op een telefoon drie regels — zonder een
 * enkele media query.
 */
/**
 * DE ONDERGRENS IS DE BREEDTE VAN HET GETAL, NIET VAN HET WOORD.
 *
 * Stond eerst op 120 en daarna op 90px, en in allebei de gevallen viel de
 * derde kolom eronder in een kaart van een kolom breed. Dat was een aanname,
 * geen noodzaak: alleen het GETAL moet op een regel passen. "31.845" op 20px
 * is ongeveer 70px breed; het woord eronder mag gerust over twee regels
 * lopen - dat doet het in het ontwerp ook.
 *
 * Met 70px passen er drie naast elkaar in elke kaart die breder is dan zo'n
 * 240px, en dat is elke kaart. Onder die breedte klappen ze alsnog netjes
 * onder elkaar, zonder dat er een media query aan te pas komt.
 */
.sid-promo .sid-kolommen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
	gap: 12px;
}

/* Hetzelfde idee, maar dan met flexibele breedtes in plaats van gelijke. */
.sid-promo .sid-rij {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

.sid-promo .sid-rij > * {
	flex: 1 1 120px;
	min-width: 0;
}


/* ==========================================================================
   19. DE TITEL GROEIT MEE MET DE KAART

   Een titel van 25px staat goed op een kaart van een kolom breed, maar valt
   in het niet zodra de kaart twee of drie kolommen pakt. Een bredere kaart
   vraagt om een grotere kop, anders klopt de verhouding niet meer.
   ========================================================================== */

.sid-promo--breed-2 .sid-promo-titel {
	font-size: 30px;
}

.sid-promo--breed-3 .sid-promo-titel {
	font-size: 34px;
}

/* Op smalle schermen wordt de kaart altijd een kolom breed, dus daar terug
   naar de kleine maat - anders vult de titel het halve scherm. */
@media (max-width: 768px) {

	.sid-promo--breed-2 .sid-promo-titel,
	.sid-promo--breed-3 .sid-promo-titel {
		font-size: 25px;
	}
}

/* Een titel die uit vrije HTML komt heeft geen alinea-marges nodig; die
   komen anders van het thema mee en geven een gat onder de kop. */
.sid-promo-vrij .sid-promo-titel {
	margin: 0;
}


/* ==========================================================================
   20. DE BLOGMARGES VAN HET THEMA UIT HET PRODUCTRASTER HOUDEN

   Cherry zet in style.css marges op artikelen in een archief:

       .archive article               { margin-bottom: 30px; }
       .archive article:first-of-type { margin-top: 15px; }

   Bedoeld voor blogberichten onder elkaar. Maar een categoriepagina IS een
   archief en onze productkaart IS een <article>, dus die regels pakken hem
   mee. Gevolg: de productkaart begon 15px lager en eindigde 30px hoger dan
   de promokaart ernaast - 45px verschil in een rij waarin alles even hoog
   hoort te zijn.

   In een raster regelt de tussenruimte (gap) de afstand. Marges op de tegels
   zelf werken daar tegenin.

   De selector is bewust wat langer: hij moet het winnen van
   .archive article:first-of-type zonder dat we !important nodig hebben.
   ========================================================================== */

.sid-overzicht .sid-raster article.sid-kaart-vak {
	margin: 0;
}

/* ==========================================================================
   21. HET SCHUIFJE NIEUW / GEBRUIKT
   --------------------------------------------------------------------------
   Overgenomen uit het ontwerp, met vier aanpassingen:

   1. De kleuren komen uit de variabelen van dit bestand, zodat het blauw
      hetzelfde blauw is als de rest van de site.
   2. De schaduw is die van het thema - een GLOED, geen lift. De rest van de
      kaarten op deze pagina heeft dezelfde, dus een afwijkende zou opvallen.
   3. De regel die het blokje verschoof via de knop is weggelaten. Die kon
      niet werken: het blokje staat VOOR de knoppen in de HTML en de
      ~-selector kijkt alleen vooruit. Het verschuiven gebeurt nu via de
      klasse is-gebruikt op de omhulling, en die zet PHP.
   4. DE VASTE HOOGTE IS ERUIT.

   Over dat laatste, want dat is het belangrijkste. In het ontwerp stond
   height: 56px. Daarnaast staat .sid-balk, en die is 58 - niet omdat dat
   ergens is ingetikt, maar omdat hij zo is opgebouwd:

       .sid-balk        12px padding + 34px inhoud + 12px padding = 58
       .sid-balk-knop   hoogte 34, padding 7/14, radius 5

   Twee elementen naast elkaar die op dezelfde hoogte beginnen en op een
   andere eindigen: dat zie je. En een vast getal loopt vroeg of laat scheef,
   want zodra de letter of de padding van de balk verandert, verschuift die
   wel en het schuifje niet.

   Daarom is het schuifje nu op dezelfde manier opgebouwd. De 58 staat
   nergens - hij rolt eruit. Verandert de balk, dan verandert dit mee.

   De gebruikte waarden komen allemaal uit wat er al stond:
       12  verticale padding van .sid-balk (en een waarde van Cherry)
       34  hoogte van .sid-balk-knop
       20  de marge onder .sid-balk, en de afstand in het raster
       14  horizontale padding van .sid-balk-knop
       10 / 5  de radius van het thema: vlakken 10, kleine elementen 5
   ========================================================================== */

.sid-zijkolom {
	min-width: 0;
}

.sid-schuif {
	/**
	 * Geen height. 12 boven + 34 baan + 12 onder = 58, gelijk aan .sid-balk.
	 * Horizontaal 12 in plaats van de 20 van de balk, zodat de baan bijna de
	 * volle breedte pakt - dat is wat een schuifje herkenbaar maakt.
	 */
	padding: 12px;
	margin-bottom: 20px;
	background: #fff;
	border-radius: var(--sid-radius);
	box-shadow: var(--sid-schaduw);
	box-sizing: border-box;
}

.sid-schuif-baan {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	height: 34px;              /* zoals .sid-balk-knop */
	background: var(--sid-vlak);
	border-radius: 5px;
}

/* Het gekleurde blokje dat meeschuift. */
.sid-schuif-blok {
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	background: var(--sid-blauw);
	border-radius: 5px;
	transition: ease .3s transform;
	transform: translateX(0);
}

.sid-schuif.is-gebruikt .sid-schuif-blok {
	transform: translateX(100%);
}

.sid-schuif-knop {
	position: relative;   /* boven het blokje, anders valt de tekst eronder */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 14px;      /* zoals .sid-balk-knop */
	font: 700 14px 'Open Sans', sans-serif;
	letter-spacing: .02em;
	text-decoration: none;
	transition: ease .3s color;
}

/**
 * DE KLEUR STAAT APART, MET HET ELEMENTSOORT ERBIJ.
 *
 * Dit schuifje bestaat uit twee soorten: een <a> voor de kant waar je heen
 * kunt, en een <span> voor de kant waar je al bent en voor een lege kant.
 * Alleen de <a> heeft last van Cherry's 'a:visited', dus alleen daar is het
 * gewicht nodig - maar de <span> moet dezelfde kleur houden, vandaar allebei.
 * Zie sectie 24 voor de regel waar dit uit volgt.
 */
a.sid-schuif-knop,
span.sid-schuif-knop {
	color: var(--sid-grijs);
}

/* HET PRIMAIRE BLAUW, niet het donkere. De kant die AAN staat is een gevuld
   vlak in --sid-blauw; de kant ernaast hoort bij hover dezelfde kleur aan te
   nemen, anders lijken het twee verschillende soorten knop. Stond tot
   20-08-2026 op --sid-blauw-donker; dat viel niet op omdat de brede regel in
   sectie 6 er overheen ging - zie de uitleg daar. */
a.sid-schuif-knop:hover {
	color: var(--sid-blauw);
	text-decoration: none;
}

.sid-schuif-knop.is-actief {
	color: #fff;
}

/* Niets aan die kant: geen link, dus ook niet aanklikbaar laten lijken. */
.sid-schuif-knop.is-leeg {
	color: var(--sid-lijn);
	cursor: default;
}

/* ==========================================================================
   22. DE BREDE DROPDOWN IN HET MENU
   --------------------------------------------------------------------------
   Overgenomen uit het ontwerp, met twee wijzigingen die ertoe doen:

   1. Het aantal kolommen staat nergens meer. In het ontwerp stond
      repeat(4,1fr); hier telt auto-fit zichzelf, zodat je kolommen kunt
      toevoegen of weghalen zonder iets aan te passen.
   2. Openen gaat met :hover en :focus-within in plaats van met JavaScript,
      zodat het ook met het toetsenbord werkt.

   OVER DE PLAATSING - hier ging het eerst mis.

   Het paneel moet aan de header hangen, niet aan het menu-item; anders wordt
   het maar zo breed als het woord "Producten". Een absoluut geplaatst element
   hangt zich op aan zijn dichtstbijzijnde voorouder die zelf geplaatst is.

   Twee dingen die daarbij bleken:

   1. #masthead staat al op position: fixed, boven aan de pagina en bij het
      scrollen. Hij IS dus al een anker - een eigen regel daarvoor was niet
      alleen overbodig maar riskant, want die zou de plakkende header kunnen
      breken. Die regel is eruit.

   2. Cherry zet position: relative op menu-items met kinderen, in style.css
      regel 1440:

          header#masthead .nav-bar .bottom-navigation ul.menu >
          li.menu-item.menu-item-has-children { position: relative }

      Dat is een lange, zware selector. Kortere regels van ons verloren het
      daarvan, dus het paneel bleef aan het menu-item hangen en werd 145px
      breed. Onze regel hieronder is dezelfde selector met .sid-mega-item
      erachter - even zwaar plus een klasse, dus hij wint. Zonder !important:
      dat is hier niet nodig en het maakt latere aanpassingen alleen lastiger.

   De witte band loopt over de volle breedte, maar de INHOUD blijft binnen
   1400px - dezelfde breedte als .in-grid, zodat de kolommen uitlijnen met de
   rest van de pagina in plaats van tegen de schermrand te beginnen.

   WAAR DE WAARDEN VANDAAN KOMEN

     kleuren      uit de variabelen bovenin dit bestand
     30           Cherry's sectie-afstand: paneelpadding en ruimte tussen kolommen
     12           Cherry's componentwaarde: foto naar kop
     20           Cherry's componentwaarde: padding van het hulpblok
     5            Cherry's kleinste binnenmarge: tussen de links onderling
     8            de webshopuitzondering voor tekstritme: kop naar links
     10 / 5       radius van het thema: vlakken 10, kleine elementen 5
     17           gelijk aan de titel op de productkaart
     14 / 13.5    maten die al in deze stylesheet in gebruik zijn

   Vrij, want het is geen tekstritme: de foto van 90px hoog, het hulpblok van
   260px breed en de 190px waarbij een kolom afbreekt.

   In het ontwerp stonden hier 26, 6 en 22. Die zijn vervangen door 30, 5 en 20
   - de dichtstbijzijnde waarden uit de reeks van Cherry.
   ========================================================================== */

header#masthead .nav-bar .bottom-navigation ul.menu > li.menu-item.menu-item-has-children.sid-mega-item {
	position: static;
}

/**
 * HET PIJLTJE TERUG OP ZIJN PLEK
 *
 * Cherry tekent het pijltje achter een menu-item met kinderen als ::after op
 * het LINKJE, met position: absolute en right: 20px (style.css 1453). Zoiets
 * zoekt houvast bij de dichtstbijzijnde ouder die zelf gepositioneerd is. Bij
 * Cherry is dat het li, want dat staat op relative (style.css 1440).
 *
 * Dat li moesten wij hierboven op static zetten, anders bleef het brede paneel
 * eraan hangen. Gevolg: het pijltje zocht verder omhoog, vond de header, en
 * werd 20px vanaf de rechterrand van de HELE header getekend - ergens achter
 * de contactknop.
 *
 * Daarom geven we het houvast op het linkje zelf. Het paneel blijft over de
 * volle breedte staan, want dat hangt aan het li en niet aan de link.
 */
header#masthead .nav-bar .bottom-navigation ul.menu > li.menu-item.menu-item-has-children.sid-mega-item > a {
	position: relative;
}

.sid-mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 20;

	/* Alleen links en rechts. Zat hier eerst rondom, maar dan begint de rail 30
	   pixel onder de blauwe streep en dat is niet het ontwerp: daar loopt de
	   rail van de bovenkant tot de onderkant van de witte band door. Het wit
	   boven en onder zit nu op het hulpblok en op het paneel zelf. */
	padding: 0 30px;
	box-sizing: border-box;
	background: #fff;
	border-top: 3px solid var(--sid-blauw);
	border-radius: 0 0 var(--sid-radius) var(--sid-radius);
	box-shadow: var(--sid-schaduw);
	text-align: left;

	/* Dicht: niet zichtbaar, niet aan te klikken en niet te bereiken met tab.

	   Geen overgang en geen vertraging, precies zoals Cherry's eigen submenu
	   het doet (style.css regel 1475 en 1522). Het menu staat er op het moment
	   dat je erop komt en is weg zodra je eraf gaat. Het gat tussen het
	   menu-item en het paneel wordt hieronder overbrugd met een strookje, niet
	   met een vertraging. */
	opacity: 0;
	visibility: hidden;

	/* EN NIET AAN TE WIJZEN. Dit is geen extraatje maar noodzaak.

	   visibility werkt per element, niet per tak: een kind mag zichzelf weer op
	   visible zetten en is dan gewoon zichtbaar en aanwijsbaar, ook al staat de
	   ouder op hidden. En dat doet het eerste paneel hier, want dat is de
	   standaard die openstaat.

	   Gevolg: de hele strook onder de header was, met het menu dicht, een
	   onzichtbaar maar wel aanwijsbaar vlak. Kwam je daar met de muis, dan was
	   dat voor de browser een kind van het menu-item en klapte het menu open.
	   Het leek alsof Verhuur of Service het menu opende, maar het was de lege
	   ruimte eronder. Gevonden 25-09-2026 nadat Tomas erover viel.

	   opacity werkt wel per tak, dus visueel zag je er niets van. Alleen de
	   muis merkte het. pointer-events: none dicht dat: dat geldt wel voor de
	   hele tak, en de regel hieronder zet het weer aan zodra het menu open is. */
	pointer-events: none;
}

.sid-mega-item:hover .sid-mega,
.sid-mega-item:focus-within .sid-mega {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* HET GAT VAN 13 PIXEL OVERBRUGGEN

   Cherry's eigen submenu heeft dit probleem niet: dat hangt met top: 100% aan
   het menu-item zelf, dus er zit geen ruimte tussen. Ons paneel moet over de
   volle breedte lopen en hangt daarom aan de header. De header is 13 pixel
   hoger dan het menu-item, en die ruimte is dode grond: ga je daar met de muis
   overheen, dan wijs je niets aan en klapt het menu dicht.

   Daarom een onzichtbaar strookje onder de link, precies zo breed als de link
   zelf. Dat is een kind van de link, dus wie daar zweeft zweeft op de link en
   het menu blijft open. Niet breder maken: dan krijg je weer een onzichtbaar
   vlak waar je per ongeluk in kunt komen.

   Cherry gebruikt ::after voor het pijltje, dus ::before is vrij. */
.sid-mega-item > a::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 16px;
}

/* Hulpblok links, daarnaast de rail met de panelen. Geen hulpblok? Dan pakt de
   rail alles. Het hulpblok stond tot 25-09-2026 rechts; in het nieuwe ontwerp
   staat het links, voor de rail. */
.sid-mega-binnen {
	max-width: 1400px;   /* gelijk aan .in-grid van het thema */
	margin: 0 auto;

	/* Cherry legt in .nav-bar en .site-branding 15px binnenmarge, dus alles wat
	   je in de header ZIET loopt van 15px binnen .in-grid tot 15px ervoor: het
	   logo links, de contactknop rechts. Zonder deze marge stak het paneel er
	   aan beide kanten 15px buiten. box-sizing houdt de buitenmaat op 1400. */
	padding: 0 15px;
	box-sizing: border-box;

	/* DE BREEDTE VAN HET HULPBLOK IS GEEN RONDE 260.

	   In het ontwerp valt de rechterlijn van de rail precies tussen Producten
	   en Verhuur in het menu. Dat is geen toeval, dat maakt het paneel vast aan
	   de knop waar het bij hoort.

	   Opgemeten in de browser op 25-09-2026, binnen de 1400px van .in-grid:

	     linkerrand van het paneel      x  35
	     binnenmarge                       15
	     hulpblok                         283
	     tussenruimte                      30
	     rail                             300   (de maat uit het ontwerp)
	     -------------------------------------
	     rechterlijn van de rail        x 663   = de naad tussen Producten en Verhuur

	   LET OP: dit klopt zolang Verhuur, Service, Onderdelen, DNA Siderius en
	   Klantcontact even breed blijven, want het menu staat rechts uitgelijnd.
	   Komt er een menu-item bij of verandert er een naam, dan schuift de naad
	   en moet die 283 mee. Er is geen manier om dat in CSS mee te laten
	   rekenen zonder JavaScript. */
	display: grid;
	grid-template-columns: 283px minmax(0, 1fr);
	gap: 30px;

	/* stretch (en niet start): het hulpblok loopt tot onder aan de kolommen,
	   zodat er onder het blok net zoveel wit staat als erboven - 30px. Bij
	   start bleef de rest van de hoogte als extra wit onder het blok staan. */
	align-items: stretch;
}

.sid-mega-binnen:not(:has(.sid-mega-hulp)) {
	grid-template-columns: minmax(0, 1fr);
}

/* --- De rail en de panelen ------------------------------------------------

   EEN RAIL DIE WISSELT, ZONDER EEN REGEL JAVASCRIPT

   In de HTML staat elk paneel direct achter zijn eigen railitem (zie
   inc/siderius-webshop/menu-webshop.php). Daardoor kan de CSS met + van het
   railitem naar zijn paneel wijzen, en dat is alles wat je nodig hebt.

   De railitems staan in kolom 1, elk op een eigen rij. De panelen staan
   allemaal in kolom 2 en spannen ALLE rijen, dus ze liggen op elkaar. Hoeveel
   rijen dat zijn weet PHP, niet de CSS: dat getal komt binnen als
   --sid-rail-rijen op .sid-mega-body. Zet je er een zesde machinesoort bij,
   dan klopt het vanzelf.

   Bijvangst: omdat het paneel de rijen opspant, wordt de rail precies zo hoog
   als het grootste paneel, en springt het menu niet als je van categorie
   wisselt.

   DE VOLGORDE VAN DE VIER REGELS HIERONDER IS NIET VRIJBLIJVEND

     1  alles dicht
     2  de eerste staat open, zolang er niets is aangewezen
     3  wijst iemand iets aan, dan gaat alles dicht
     4  behalve dat ene

   Regel 3 en 4 wegen even zwaar, dus wint 4 omdat hij later staat. Daarom
   staan er bij 4 twee klassen voor waar er logisch gezien maar een nodig is:
   zonder die extra klasse verloor hij van 3 en bleef het paneel dicht.

   Regel 3 kijkt ook of het PANEEL zelf wordt aangewezen. Zonder dat klapte het
   menu terug naar de eerste categorie zodra je vanuit de rail het paneel in
   bewoog, want dan was er geen railitem meer aangewezen.
   -------------------------------------------------------------------------- */

.sid-mega-body {
	display: grid;

	/* 300 is de maat uit het ontwerp. Samen met de 283 van het hulpblok komt de
	   rechterlijn precies tussen Producten en Verhuur uit; zie de rekensom bij
	   .sid-mega-binnen hierboven. */
	grid-template-columns: 300px minmax(0, 1fr);
	grid-auto-rows: minmax(0, 1fr);
	align-items: stretch;
}

.sid-mega-rail-item {
	grid-column: 1;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 15px;
	border-right: 1px solid var(--sid-lijn-licht);
	font: 700 14px 'Open Sans', sans-serif;

	/* Kort: dit is een menu, geen animatie. Let op dat deze regel het aflegt
	   tegen die van Cherry; de echte staat in sectie 22b. */
	transition: background .12s ease;
}

/* DE KLEUR ZIT OP DE SPAN, NIET OP DE LINK.
   Cherry verft elke link in de header met een selector van gewicht (1,3,4)
   (zie sectie 22b). Daar wint geen enkele klasse van, dus een kleur op
   .sid-mega-rail-item zou het nooit halen. Een span raakt Cherry niet aan, dus
   daar is een klasse genoeg. De achtergrond mag wel op de link blijven staan:
   die zet Cherry niet. */
.sid-mega-rail-naam {
	color: var(--sid-donker);
	transition: color .12s ease;
}

.sid-mega-rail-icoon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 32px;
}

.sid-mega-rail-icoon img {
	max-width: 100%;
	max-height: 100%;
	width: auto !important;
	height: auto !important;
	object-fit: contain;
	display: block;

	/* HET WITTE BLOKJE OM DE FOTO WEG.
	   Een jpg kan niet doorzichtig zijn, dus een productfoto met een witte
	   achtergrond wordt op het lichtblauwe railitem een wit vierkant. Met
	   multiply telt wit als niets: het laat de achtergrond eronder gewoon
	   doorschijnen, terwijl de machine zelf donker blijft. Werkt dus ook met de
	   foto's die er nu al staan, zonder ze te bewerken.
	   Liever alsnog doorzichtige png's? Die gaan hier vanzelf goed, multiply
	   verandert daar niets aan. Toegevoegd 25-09-2026. */
	mix-blend-mode: multiply;
}

.sid-mega-paneel {
	grid-column: 2;
	grid-row: 1 / span var(--sid-rail-rijen, 1);

	/* Boven en onder hetzelfde wit als het hulpblok; links de afstand tot de
	   rail. De rail zelf krijgt niets, die loopt door tot de rand. */
	padding: 30px 0 30px 30px;

	/* max-content en geen 1fr: twee kolommen horen naast elkaar links te
	   beginnen, niet uitgesmeerd over de hele breedte. Wrap vangt het op als er
	   ooit meer kolommen bij komen dan er passen. */
	display: flex;
	flex-wrap: wrap;
	align-content: start;
	gap: 30px 56px;
}

.sid-mega-kolom {
	min-width: 0;
}

/* HET WISSELEN: VIER REGELS, EN GEEN :has()

   Hier stond eerst :has(). Dat las prettig, maar Chrome rekent :has() pas na
   de volgende tekenbeurt opnieuw uit. Gevolg: het paneel wisselde meteen, maar
   het blauwe vlak in de rail bleef een stap achter. Zweefde je van Heftrucks
   naar de robotpallettruck, dan zag je het paneel van de robotpallettruck met
   Heftrucks nog aangewezen. Gemeten op 25-09-2026: de browser gaf bij elke
   beweging netjes de VORIGE als aangewezen terug.

   Daarom nu alleen gewone :hover, en die verwerkt een browser meteen. De truc
   zit in de tweede regel: zodra je ergens in de rail of in het paneel zweeft,
   gaat de standaard uit. Daarna zet regel drie de aangewezene weer aan.

     1  alles dicht
     2  zolang je nergens zweeft: de eerste open
     3  zweef je ergens: de eerste uit, de aangewezene aan
     4  in het paneel blijft dat paneel open

   Wat we hiermee inleveren: sta je met de muis IN het paneel, dan is er geen
   railitem meer aangewezen en verdwijnt het blauwe vlak. Het paneel blijft
   gewoon staan. Dat onthouden kan alleen met :has() of met JavaScript, en een
   vlak dat een stap achterloopt is erger dan een vlak dat even wegvalt. */

/* 1. alles dicht */
.sid-mega-paneel {
	visibility: hidden;
	opacity: 0;
}

/* 2. zolang je nergens zweeft: de eerste open */
.sid-mega-body .sid-mega-rail-item:first-child + .sid-mega-paneel {
	visibility: visible;
	opacity: 1;
}

.sid-mega-body .sid-mega-rail-item:first-child {
	background: var(--sid-lichtblauw);
}

.sid-mega-body .sid-mega-rail-item:first-child .sid-mega-rail-naam {
	color: var(--sid-blauw-midden);
}

/* 3. zweef je ergens in de rail of in het paneel: de standaard uit */
.sid-mega-body:hover .sid-mega-rail-item:first-child + .sid-mega-paneel,
.sid-mega-body:focus-within .sid-mega-rail-item:first-child + .sid-mega-paneel {
	visibility: hidden;
	opacity: 0;
}

.sid-mega-body:hover .sid-mega-rail-item:first-child,
.sid-mega-body:focus-within .sid-mega-rail-item:first-child {
	background: transparent;
}

.sid-mega-body:hover .sid-mega-rail-item:first-child .sid-mega-rail-naam,
.sid-mega-body:focus-within .sid-mega-rail-item:first-child .sid-mega-rail-naam {
	color: var(--sid-donker);
}

/* 4. en de aangewezene aan. De extra .sid-mega ervoor is nodig: zonder die
      klasse weegt deze regel lichter dan regel 3 en bleef de eerste winnen. */
.sid-mega .sid-mega-body .sid-mega-rail-item:is(:hover, :focus-within) + .sid-mega-paneel {
	visibility: visible;
	opacity: 1;
}

/* LET OP HET AANTAL KLASSEN HIER. Regel 3 hierboven noemt vijf klassen en
   sloeg daarmee ook dit paneel dicht zodra je er met de muis in ging, maar
   alleen bij de EERSTE. Bij de andere vier merkte je er niets van, want regel
   3 gaat alleen over de eerste. Daarom staan hier zes klassen. */
.sid-mega-item .sid-mega .sid-mega-binnen .sid-mega-body .sid-mega-paneel:is(:hover, :focus-within) {
	visibility: visible;
	opacity: 1;
}

.sid-mega .sid-mega-body .sid-mega-rail-item:is(:hover, :focus-within) {
	background: var(--sid-lichtblauw);
}

.sid-mega .sid-mega-body .sid-mega-rail-item:is(:hover, :focus-within) .sid-mega-rail-naam {
	color: var(--sid-blauw-midden);
}

/* 5. EN HET RAILITEM BLIJFT AANGEWEZEN ZOLANG JE IN ZIJN PANEEL BENT.

   CSS kan normaal niet terugkijken naar een vorig element, dus "kleur het
   railitem waarvan het paneel hierachter wordt aangewezen" leek niet te
   kunnen. Met :has() wel: lees het als "het railitem dat een aangewezen
   paneel achter zich heeft".

   Hier is :has() ongevaarlijk. Het wisselen zelf gebeurt hierboven met gewone
   :hover, dus als de browser dit een tel later oppakt is het ergste dat het
   blauwe vlak iets trager meekomt. De categorie die je ziet klopt altijd.
   Toegevoegd 25-09-2026 op verzoek van Tomas. */
.sid-mega .sid-mega-body .sid-mega-rail-item:has( + .sid-mega-paneel:hover ) {
	background: var(--sid-lichtblauw);
}

.sid-mega .sid-mega-body .sid-mega-rail-item:has( + .sid-mega-paneel:hover ) .sid-mega-rail-naam {
	color: var(--sid-blauw-midden);
}

/* --- Een kolom in het paneel ---------------------------------------------- */

.sid-mega-kop {
	display: block;
	margin-bottom: 8px;
	font: 700 16px 'Titillium Web', sans-serif;
	color: var(--sid-donker);
}

.sid-mega-links {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.sid-mega-links a {
	font: 400 14px 'Open Sans', sans-serif;
	color: var(--sid-grijs);
	transition: ease .3s color;
}

.sid-mega-links a:hover {
	color: var(--sid-blauw);
	text-decoration: none;
}

/* --- Het hulpblok --------------------------------------------------------- */

.sid-mega-hulp {
	/* Het wit boven en onder zat eerst op .sid-mega. Nu hier, zodat de rail
	   ernaast wel tot aan de rand door kan lopen. */
	margin: 30px 0;
	padding: 20px;
	border-radius: var(--sid-radius);
	background: var(--sid-donker);
	color: #fff;
}

.sid-mega-hulp-titel {
	margin-bottom: 8px;
	font: 700 18px/1.3 'Titillium Web', sans-serif;
}

.sid-mega-hulp-tekst {
	margin: 0 0 14px;
	font: 400 14px/1.5 'Open Sans', sans-serif;
	color: rgba(255, 255, 255, .85);
}

.sid-mega-hulp-links {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 16px;
}

.sid-mega-hulp-links a {
	display: flex;
	gap: 9px;
	font: 400 14px/1.4 'Open Sans', sans-serif;
	color: #fff;
	transition: ease .3s color;
}

.sid-mega-hulp-links a span {
	flex: none;
	color: var(--sid-blauw);
}

.sid-mega-hulp-links a:hover {
	color: var(--sid-blauw);
	text-decoration: none;
}



/* --------------------------------------------------------------------------
   22b. DE OPMAAK VAN CHERRY UIT HET PANEEL HALEN

   Cherry heeft in style.css regel 1413 deze regel staan:

       header#masthead .nav-bar .bottom-navigation ul li a {
         color: #fff; display: block; font-size: 18px;
         line-height: 1.8; padding: 5px 20px; font-weight: bold;
       }

   Die geldt voor ELKE link in de header - logisch, want daar staan normaal
   alleen menu-items in, op een donkere balk. Ons paneel hangt binnen datzelfde
   menu-item en erft dus witte, vette letters van 18px met 20px padding. Op een
   wit paneel zie je daar niets van.

   Hieronder zetten we dat terug, met een selector die zwaarder weegt dan die
   van hen. Vandaar de lange aanhef bij elke regel: korter zou verliezen, en
   !important zou het later alleen maar lastiger maken.
   -------------------------------------------------------------------------- */

/* DE OVERGANG VAN CHERRY MOET HIER WEG, EN DAT IS GEEN SCHOONHEIDSFOUTJE.

   Cherry zet op elke link in de header:

       header#masthead .nav-bar .bottom-navigation ul li a { transition: 0.3s }

   Zonder eigenschap ervoor betekent dat ALLE eigenschappen, dus ook
   visibility. En visibility is precies waarmee wij de panelen wisselen.

   Gevolg: ging je van het ene railitem naar het andere, dan bleven de links
   van het oude paneel nog drie tienden staan en zag je twee panelen door
   elkaar heen. Het leek een tekenfout van de browser, maar het was gewoon een
   overgang die meeliep op iets waar hij nooit voor bedoeld was.

   Hieronder dus alleen kleur, en kort. Gevonden 25-09-2026 nadat Tomas erover
   viel. */
header#masthead .nav-bar .bottom-navigation ul li .sid-mega a {
	display: block;
	padding: 0;
	font: 400 14px/1.5 'Open Sans', sans-serif;
	color: var(--sid-grijs);
	text-decoration: none;
	transition: color .12s ease;
}

header#masthead .nav-bar .bottom-navigation ul li .sid-mega a:hover {
	color: var(--sid-blauw);
}

/* Het railitem is wel een link, dus Cherry pakt hem. Terugzetten naar de maat
   uit het ontwerp; de achtergrond en de kleur komen van de regels hierboven,
   dus die laten we hier met rust. */
header#masthead .nav-bar .bottom-navigation ul li .sid-mega .sid-mega-rail-item {
	display: flex;
	padding: 10px 15px;
	font: 700 14px/1.4 'Open Sans', sans-serif;
	transition: background .12s ease;
}

/* De kop is sinds 25-09-2026 een span en geen link meer, dus Cherry raakt hem
   niet. Deze regel staat er alleen voor als iemand er ooit weer een link van
   maakt. */
header#masthead .nav-bar .bottom-navigation ul li .sid-mega .sid-mega-kop {
	margin-bottom: 8px;
	font: 700 16px/1.3 'Titillium Web', sans-serif;
	color: var(--sid-donker);
}

/* --- Het hulpblok staat wel op donker, dus daar blijft de tekst wit --------- */

header#masthead .nav-bar .bottom-navigation ul li .sid-mega .sid-mega-hulp a {
	display: flex;
	gap: 9px;
	font: 400 14px/1.4 'Open Sans', sans-serif;
	color: #fff;
}

header#masthead .nav-bar .bottom-navigation ul li .sid-mega .sid-mega-hulp a:hover {
	color: var(--sid-blauw);
}

/* ==========================================================================
   23. DE PRODUCTPAGINA - HET FRAME
   ==========================================================================
   Hoort bij woocommerce/content-single-product.php.

   DE MATEN KOMEN UIT HET THEMA, NIET UIT HET ONTWERP.
   Het ontwerp is gemaakt in een tekenprogramma dat zijn eigen afstanden
   verzint. Waar die niet in de schaal van Cherry passen, is de dichtstbijzijnde
   waarde uit het thema genomen:

     ontwerp 18/14/24 rondom  ->  de bestaande .sid-kruimels en 30 ertussen
     ontwerp titel 36         ->  34, gelijk aan .sid-overzicht-titel
     ontwerp streepje r=3     ->  5 (3px is van de datumkiezer, niet van Cherry)
     ontwerp gap 40           ->  30, zelfde als de overzichtspagina
     ontwerp gap 14 links     ->  15
     ontwerp padding 22 / 28  ->  20 / 30
     ontwerp schaduw .08      ->  var(--sid-schaduw), de gloed van het thema
   ========================================================================== */


/* --- De kop van een winkelpagina ------------------------------------------ */

/**
 * KRUIMELPAD, TITEL, BLAUW STREEPJE. Gebruikt door de productpagina en de
 * winkelwagen, en straks door het afrekenen. Getekend door
 * siderius_paginakop() in inc/siderius-webshop/winkel-inrichten.php.
 *
 * Heette tot 24-08-2026 .sid-product-kop. Die naam klopte niet meer zodra de
 * winkelwagen dezelfde kop kreeg - en een klasse die iets anders heet dan hij
 * doet is precies hoe je over een half jaar twee varianten krijgt.
 *
 * LET OP, HIER ZAT EEN FOUT (24-08-2026):
 * vlak boven deze regel stonden twee zwevende selectorregels zonder accolade,
 * restanten van een eerdere bewerking. De browser plakte die aan .sid-product-kop
 * vast, waardoor deze marge van 30px NOOIT werkte en het blauwe streepje tegen
 * de kaart eronder aan plakte. Accolades tellen is niet genoeg om zoiets te
 * vinden - het aantal { en } klopte gewoon. Zoek op selectorregels die niet op
 * { of een komma eindigen.
 */
.sid-paginakop {
	margin: 0 0 30px;
}

/* Het aantal achter de titel: "Winkelwagen  1 machine". Klein en grijs, want
   het is een telling en geen deel van de kop. */
.sid-paginakop-aantal {
	margin-left: 12px;
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	font-weight: 400;
	color: var(--sid-grijs);
	white-space: nowrap;
}

.sid-paginatitel {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 34px;
	line-height: 1.15;
	color: var(--sid-donker);
	margin: 0;
}

/* Het blauwe streepje onder de titel. Puur decoratief - in het sjabloon staat
   er aria-hidden op, zodat een schermlezer er niet over struikelt. */
.sid-paginastreep {
	display: block;
	width: 90px;
	height: 5px;
	margin-top: 12px;
	background: var(--sid-blauw);
	border-radius: 5px;
}


/* --- De twee kolommen ----------------------------------------------------- */

/**
 * De linkerkolom is iets breder dan de rechter (1.1 om 1), zoals in het
 * ontwerp. Op het breedste scherm wordt dat 702px links en 638px rechts:
 * .in-grid stopt bij 1400px, sectie 0 haalt daar 2x15 vanaf, en de 30px
 * tussenruimte gaat er ook nog af. Breder wordt het nooit, ook niet op een
 * 4K-scherm - de pagina gaat dan in het midden staan.
 *
 * minmax(0, ...) in plaats van kaal 1.1fr: zonder die 0 mag een kolom niet
 * smaller worden dan zijn inhoud, en dan duwt een lange productnaam of een
 * brede tabel het raster scheef.
 */
.sid-product-kolommen {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 30px;
	align-items: start;
}

/**
 * WOOCOMMERCE ZET DEZE TWEE KOLOMMEN ZELF OOK NEER - MET FLOAT.
 *
 * In hun stylesheet staat: div.images { float: left; width: 48% } en
 * div.summary { float: right; width: 48% }. Dat is de indeling van voor het
 * raster bestond. Laat je dat staan, dan krijgt elke kolom twee opdrachten
 * tegelijk en klopt er niets van de breedtes.
 *
 * WAAROM DEZE SELECTORS ZO LANG ZIJN (17-08-2026, na een misser)
 *
 * De eerste poging was .woocommerce div.product div.images. Die matchte wel,
 * maar verloor toch - de kolommen bleven 48% breed. De reden staat in
 * woocommerce-layout.css:
 *
 *     .woocommerce-page #content div.product div.images { float: left; width: 48% }
 *
 * Daar staat een ID in (#content), en Cherry's header.php zet die div om alle
 * inhoud heen. Een regel met een ID wint altijd van een regel zonder, hoe laat
 * je stylesheet ook wordt ingeladen. Volgorde helpt alleen bij gelijk gewicht.
 *
 * De eerste reparatie was nog niet genoeg. Hun selector telt vier klassen
 * (.woocommerce-page, .product, .images) plus twee div's; zo'n rij weegt
 * zwaarder dan je op het oog zou zeggen. Pas met VIER van onze eigen klassen
 * erin wint hij. Precies daarom staat .sid-product-media en .summary er nog
 * bij: niet voor de duidelijkheid, maar voor het gewicht.
 */
#content .sid-product .sid-product-kolommen .sid-product-koop.summary {
	float: none;
	width: auto;
	margin: 0;
}


/* --- Linkerkolom: de foto's ----------------------------------------------- */

.sid-product-media {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

/* --- Rechterkolom: de koopkaart ------------------------------------------- */

.sid-product-koop {
	box-sizing: border-box;
	background: #fff;
	border-radius: var(--sid-radius);
	box-shadow: var(--sid-schaduw);
	padding: 30px;
}

/* --- De korte omschrijving: intro en de punten ---------------------------- */

/**
 * Dit is het veld "Product short description" bij het product. Eén veld voor
 * twee dingen: de alinea erboven en de punten eronder - typ je in dat veld een
 * opsomming, dan wordt het vanzelf de lijst met pijlen.
 */
.sid-product-koop .woocommerce-product-details__short-description {
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--sid-lijn-licht);
}

/**
 * 14px, gelijk aan de punten eronder - het is één veld, dus één maat.
 *
 * Het thema zet lopende tekst op 18. Dat is hier te groot: dit blok staat
 * bovenaan de koopkolom en duwt de configurator naar beneden. Gemeten bij de
 * concurrentie: bol.com zet ALLE alinea's op een productpagina op 14, Coolblue
 * op 13. Geen van beide maakt onderscheid tussen de tekst en de punten.
 *
 * De regelhoogte blijft uit het thema komen (1.5 = 21px).
 */
#content .sid-product .sid-product-koop .woocommerce-product-details__short-description p {
	margin: 0;
	font-size: 14px;
}

#content .sid-product .sid-product-koop .woocommerce-product-details__short-description strong {
	color: var(--sid-donker);
}

/**
 * Het thema zet padding en marge van elke ul op nul, maar laat de bolletjes
 * wel aan staan. Die staan daardoor buiten het vak en lijken niet uitgelijnd.
 * Hier gaan ze eruit en komt er een eigen pijl voor in de plaats.
 */
#content .sid-product .sid-product-koop .woocommerce-product-details__short-description ul {
	list-style: none;
	margin: 15px 0 0;
	padding: 0;
}

#content .sid-product .sid-product-koop .woocommerce-product-details__short-description li {
	position: relative;
	margin: 10px 0 0;
	padding-left: 26px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--sid-donker);
}

#content .sid-product .sid-product-koop .woocommerce-product-details__short-description li:first-child {
	margin-top: 0;
}

/**
 * De pijl is een tekening in de regel zelf, geen Font Awesome: die kit is een
 * subset en heeft geen enkel pijltje. Zie project-notitie fontawesome-kit.
 * De kleur staat vast in de tekening (%23009EE3 is #009EE3).
 */
#content .sid-product .sid-product-koop .woocommerce-product-details__short-description li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .38em;
	width: 16px;
	height: 12px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1 6h12M9 2l4 4-4 4' fill='none' stroke='%23009EE3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 0 0 / 16px 12px;
}


/**
 * DE PRIJS OP 34, GELIJK AAN DE H1.
 *
 * Het ontwerp had 36. Dat is 6% groter dan de titel - te weinig om te zien,
 * genoeg om de pagina twee bijna-even-grote koppen te geven. Exact gelijk
 * leest als bedoeld. Sectie 4 zet de prijs op 28; die regel blijft staan voor
 * alle andere plekken, hier gaat hij eroverheen.
 */
.woocommerce div.product .sid-product-koop p.price,
.woocommerce div.product .sid-product-koop span.price {
	font-size: 34px;
}


/* --- Smallere schermen ---------------------------------------------------- */

@media (max-width: 991px) {

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

	/* Titel en prijs zakken samen mee, anders wordt de prijs op een telefoon
	   vanzelf het grootste element van de pagina. */
	.sid-paginatitel,
	.woocommerce div.product .sid-product-koop p.price,
	.woocommerce div.product .sid-product-koop span.price {
		font-size: 28px;
	}

	.sid-product-koop {
		padding: 20px;
	}
}


/* ==========================================================================
   24. HIER STOND EEN LIJST UITZONDERINGEN - VERVANGEN DOOR EEN REGEL

   Cherry heeft in style.css staan:

       a:visited, a:hover, a:focus, a:active { color: #006daa }

   Dat weegt EEN TYPE + EEN PSEUDOKLASSE. Onze regels met alleen een klasse
   wegen minder en verliezen dus. Gevolg: elke knop van ons die een <a> is en
   die iemand ooit heeft aangeklikt, kleurt blauw - ook al staat er in onze
   eigen regel iets anders.

   Hier stond daarom tot 20-08-2026 een lijst met negen uitzonderingen
   (.sid-schuif-knop:visited, .sid-balk-knop:visited, en zo verder). Die lijst
   was de verkeerde vorm: je moet eraan denken bij elk nieuw onderdeel, en op
   een dag denk je er niet aan. Zo stond .sid-header-knop er nooit op, en werd
   het vorkheftruck-icoon in de header donkerblauw op een blauwe knop.

   DE REGEL DIE ERVOOR IN DE PLAATS KOMT

       Zet 'a' voor elke regel die de kleur van een link bepaalt.

   Dan weegt onze regel even zwaar als die van Cherry, en bij gelijk gewicht
   wint het bestand dat later wordt ingeladen. siderius-shop.css staat na
   style.css, dus wij winnen. Geen :visited-variant nodig - getest 20-08-2026.

   WAAR HET AL GOED GING
   Schrijven we ".sid-kruimels a" of ".sid-zijbalk-item a", dan zit dat type
   er al in en weegt de regel vanzelf genoeg.

   WAAROM JE DIT NIET KUNT METEN
   Chrome verzwijgt :visited in getComputedStyle - een bewuste
   privacymaatregel, want anders kon een script uitlezen welke pagina's je
   hebt bezocht. Je meet keurig #002533 terwijl het scherm #006DAA toont.
   Alleen met een schermafbeelding zie je het.
   ========================================================================== */


/* ==========================================================================
   25. DE CONFIGURATOR OP DE PRODUCTPAGINA
   ==========================================================================
   Hoort bij inc/siderius-webshop/uitvoering.php en js/siderius-configurator.js.

   TWEE SOORTEN GROEPEN, EEN VORM.
   Een keuzegroep (accu, mast) is een rijtje waarvan er precies een aanstaat;
   een extragroep (zijschuif, cabine) mag je stuk voor stuk aanvinken. Ze zien
   er hetzelfde uit, met een verschil: alleen de extra's krijgen een vinkje.
   Dat is bewust - het vinkje is het teken dat je er meer dan een mag kiezen.

   HET RADIO- EN VINKVAKJE VAN DE BROWSER STAAT ER NOG.
   Het is alleen weggeschoven, niet weggehaald met display:none. Zo blijft het
   met het toetsenbord te bedienen en blijft de <label> eromheen doen wat een
   label hoort te doen.

   MATEN UIT DE SCHAAL.
   kop 18 - optienaam 14 - ondertitel en groepstitel 13. Radius 5, gelijk aan
   het streepje onder de titel en aan de sorteerknoppen; niet var(--sid-radius),
   want die 10 is voor de kaarten zelf, niet voor de regels erbinnen.
   ========================================================================== */

/**
 * Het hele blok staat tussen de korte omschrijving en de prijs, met dezelfde
 * scheidingslijn eronder als de omschrijving erboven. Zo krijgt de koopkolom
 * een vast ritme: tekst, lijn, kiezen, lijn, prijs.
 */
.sid-uitvoering {
	margin: 0 0 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--sid-lijn-licht);
}

.sid-uitvoering-kop {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.3;
	color: var(--sid-donker);
	margin: 0 0 15px;
}

.sid-groep + .sid-groep {
	margin-top: 20px;
}

/**
 * DE GROEPSTITEL IS GROTER DAN DE OPTIES ERONDER (19-08-2026, na meten).
 *
 * Het stond andersom: titel 13 grijs, optienaam 14 donker. Dan is de vraag
 * kleiner dan het antwoord, en dat leest verkeerd om - je zoekt eerst WAAR je
 * kiest en dan pas WAT. Nu 14 in de gewone tekstkleur; de opties eronder 13.
 */
.sid-groep-titel {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--sid-donker);
	margin-bottom: 8px;
}

/**
 * TWEE INDELINGEN, EEN REDEN.
 *
 * Een keuzegroep gaat NAAST ELKAAR. De opties zijn er kort - een hefhoogte,
 * een bandensoort - en je vergelijkt ze met elkaar. Naast elkaar zie je in een
 * oogopslag wat er te kiezen valt, en het blok wordt drie keer zo kort.
 *
 * Een extragroep blijft ONDER ELKAAR. Daar staat een vinkje voor de regel en
 * lees je van boven naar beneden af wat je erbij neemt; die namen zijn ook
 * langer ("Fusion 346 Ah accupakket").
 *
 * auto-fit met minmax: de browser legt er zoveel naast elkaar als er passen,
 * en verdeelt de ruimte gelijk. Drie opties worden drie kolommen, twee opties
 * twee halve. Passen er niet meer dan twee van 150px, dan zakt de derde
 * vanzelf naar de regel eronder - daar is geen aparte regel voor nodig.
 */
.sid-groep--extra .sid-opties {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sid-groep--keuze .sid-opties {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 8px;
	align-items: stretch;
}


/* --- Een optie ------------------------------------------------------------ */

.sid-optie {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	padding: 12px 15px;
	background: #fff;
	border: 1px solid var(--sid-lijn);
	border-radius: 5px;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}

.sid-optie:hover {
	border-color: var(--sid-blauw);
}

/**
 * DE GEKOZEN OPTIE KRIJGT DEZELFDE RAND ALS DE ACTIEVE MINIFOTO (19-08-2026).
 *
 * Dat is 1px rand plus een ring van 1px in dezelfde kleur, samen 2px.
 *
 * WAAROM GEEN RAND VAN 2PX
 * Een rand neemt ruimte in. Zet je hem op 2, dan wordt het gekozen kaartje aan
 * elke kant 1px groter en verspringt de hele rij bij het klikken. Een ring valt
 * buiten de doos en verschuift dus niets. Zelfde reden als bij de galerij,
 * onderdeel 11.
 */
.sid-optie.is-gekozen {
	border-color: var(--sid-blauw);
	box-shadow: 0 0 0 1px var(--sid-blauw);
	background: var(--sid-lichtblauw);
}

/**
 * Het echte keuzerondje. Onzichtbaar, maar wel aanwezig - zie de uitleg boven
 * aan deze sectie.
 */
.sid-optie input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

/**
 * De rand voor wie met het toetsenbord loopt.
 *
 * :focus-visible en niet :focus - anders blijft de rand staan nadat je met de
 * muis geklikt hebt. Dezelfde reden als bij de pijltjes van de galerij.
 */
.sid-optie:has(input:focus-visible) {
	outline: 2px solid var(--sid-blauw);
	outline-offset: 2px;
}


/* --- Het vinkje bij de extra's -------------------------------------------- */

.sid-vinkje {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	background: #fff;
	border: 1px solid var(--sid-lijn);
	border-radius: 4px;
	transition: background-color .15s ease, border-color .15s ease;
}

/* Het haakje is een tekening in de regel zelf, geen Font Awesome: die kit is
   een subset en heeft geen vinkje. Zie project-notitie fontawesome-kit. */
.sid-optie.is-gekozen .sid-vinkje {
	background: var(--sid-blauw) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M1 6l4 4 8-8' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 12px 10px;
	border-color: var(--sid-blauw);
}


/* --- De tekst en het bedrag ----------------------------------------------- */

.sid-optie-tekst {
	flex: 1 1 auto;
	min-width: 0;
}

/**
 * In een keuzekaartje staat alles onder elkaar en gecentreerd: naam, dan de
 * ondertitel of het bedrag. De kaartjes van een groep worden even hoog omdat
 * het raster ze uitrekt - een kaartje met ondertitel en een zonder blijven zo
 * op een lijn.
 */
.sid-groep--keuze .sid-optie {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	text-align: center;
}

.sid-groep--keuze .sid-optie-tekst {
	flex: 0 0 auto;
}

.sid-groep--keuze .sid-optie-prijs {
	margin-top: 2px;
	font-size: 13px;
	font-weight: 600;
}

.sid-optie-naam {
	display: block;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--sid-donker);
}

.sid-optie-sub {
	display: block;
	font-size: 13px;
	line-height: 1.4;
	color: var(--sid-grijs);
	margin-top: 2px;
}

/* Het bedrag mag nooit afbreken; de tekst ernaast krijgt de ruimte die
   overblijft (vandaar min-width: 0 hierboven). */
.sid-optie-prijs {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--sid-donker);
	white-space: nowrap;
}

/* Kost een optie niets extra, dan staat het vakje leeg en hoeft het geen
   ruimte in te nemen. */
.sid-optie-prijs:empty {
	display: none;
}


/* --- Prijs op aanvraag ---------------------------------------------------- */

/**
 * Staat er een optie aan waarvan de meerprijs niet vaststaat, dan komt deze
 * tekst in het prijsveld te staan. Kleiner dan de 34 van een bedrag, want het
 * is een zin en geen getal.
 */
.woocommerce div.product .sid-product-koop .price .sid-prijs-aanvraag {
	font-size: 20px;
	font-weight: 700;
	color: var(--sid-donker);
}


/* --- Smallere schermen ---------------------------------------------------- */

@media (max-width: 991px) {

	.sid-optie {
		padding: 12px;
		gap: 10px;
	}
}


/* ==========================================================================
   26. DE I'TJES EN HUN VENSTER
   ==========================================================================
   Hoort bij inc/siderius-webshop/uitleg.php en js/siderius-uitleg.js.

   BEDOELD OM OP MEER PLEKKEN TE GEBRUIKEN. Nu staan ze in de configurator;
   straks komen ze ook bij de specificaties. Daarom hangt hier niets aan
   .sid-uitvoering vast - een i'tje is overal hetzelfde ding.

   HET VENSTER IS EEN <dialog>. Dat is het venster-element van de browser
   zelf. Escape sluiten, de achtergrond onbereikbaar maken en de focus
   vasthouden hoeft daardoor niet in CSS of JavaScript geregeld te worden.
   ========================================================================== */

/* --- Het i'tje ------------------------------------------------------------ */

/**
 * 16x16, gelijk aan wat Coolblue gebruikt - gemeten op hun productpagina.
 * De kleur is ons eigen blauw en komt uit currentColor, zodat de tekening
 * meekleurt met hover zonder dat het icoon zelf een kleur hoeft te kennen.
 *
 * vertical-align: -3px zet hem op de onderlijn van de tekst ernaast. Zonder
 * die correctie hangt hij te hoog, want een SVG gaat standaard op de basislijn
 * staan alsof het een letter is.
 */
.sid-info {
	display: inline-block;
	width: 16px;
	height: 16px;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	color: var(--sid-blauw);
	line-height: 0;
	vertical-align: -3px;
	cursor: pointer;
	transition: color .15s ease;
}

/**
 * ALLEEN DE KLEUR VERANDERT, DE VORM NIET.
 *
 * background: none moet hier staan. In style.css van Cherry staat
 * button:hover { background: rgb(0, 105, 151) }. Zonder deze regel legt het
 * thema daar een donkerblauw vlak neer met de ronding van een knop, en omdat
 * de cirkel van het i'tje dan dezelfde kleur heeft als dat vlak, verandert het
 * icoon voor je gevoel van een rondje in een vierkantje.
 *
 * De hoverkleur is #006997 - dezelfde als alle andere knoppen in het thema.
 */
.sid-info:hover,
.sid-info:focus,
.sid-info:active {
	background: none;
}

.sid-info:hover {
	color: var(--sid-blauw-donker);
}

/* :focus-visible en niet :focus - anders blijft de rand staan nadat je met de
   muis geklikt hebt. Zelfde reden als bij de pijltjes van de galerij. */
.sid-info:focus {
	outline: none;
}

.sid-info:focus-visible {
	outline: 2px solid var(--sid-blauw);
	outline-offset: 2px;
	border-radius: 50%;
}

.sid-info svg {
	display: block;
}


/* --- Het venster ---------------------------------------------------------- */

.sid-info-venster {
	position: fixed;
	box-sizing: border-box;
	width: min(520px, calc(100vw - 40px));
	max-height: calc(100vh - 80px);
	margin: auto;
	padding: 30px;
	background: #fff;
	border: 0;
	border-radius: var(--sid-radius);
	box-shadow: var(--sid-schaduw);
	overflow: auto;
}

/* De waas erachter. ::backdrop hoort bij <dialog> en bestaat alleen als het
   venster met showModal() is geopend. Zelfde waas als de winkelwagenlade -
   zie --sid-waas in het palet bovenaan. */
.sid-info-venster::backdrop {
	background: var(--sid-waas);
}

.sid-info-titel {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.3;
	color: var(--sid-donker);
	margin: 0 30px 15px 0;
}

/**
 * De tekst komt uit de editor, dus er kan van alles in staan: alinea's,
 * opsommingen, vet, een link. Alles hier op 14, gelijk aan de omschrijving
 * boven de configurator - het is dezelfde soort lopende tekst.
 */
.sid-info-tekst {
	font-size: 14px;
	line-height: 1.6;
	color: var(--sid-donker);
}

.sid-info-tekst > *:first-child {
	margin-top: 0;
}

.sid-info-tekst > *:last-child {
	margin-bottom: 0;
}

.sid-info-tekst p {
	margin: 0 0 12px;
	font-size: 14px;
}

.sid-info-tekst ul,
.sid-info-tekst ol {
	margin: 0 0 12px;
	padding-left: 20px;
	list-style: disc;
}

.sid-info-tekst li {
	margin: 0 0 6px;
	font-size: 14px;
	line-height: 1.6;
}

.sid-info-tekst a {
	color: var(--sid-blauw-midden);
	text-decoration: underline;
}


/* --- De sluitknop --------------------------------------------------------- */

/**
 * TWEE STANDEN, MEER NIET: rust en hover.
 *
 * Rust  - een blauw kruisje op niets.
 * Hover - hetzelfde kruisje met een licht grijs vlakje erachter.
 *
 * background-COLOR en niet background. De verkorte schrijfwijze zou de
 * tekening eronder wissen, en dat is precies waar het thema de mist in gaat.
 * De tekening zelf zit trouwens in de HTML, dus zelfs dat kan nu niet meer
 * misgaan.
 *
 * Toetsenbordfocus krijgt hetzelfde grijze vlakje in plaats van een eigen
 * rand. Zo blijft het bij twee standen en ziet iemand die met Tab loopt toch
 * waar hij is.
 */
.sid-info-sluit {
	position: absolute;
	top: 20px;
	right: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 5px;
	background: none;
	background-color: transparent;
	color: var(--sid-blauw);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.sid-info-sluit svg {
	display: block;
}

.sid-info-sluit:hover,
.sid-info-sluit:focus-visible {
	background-color: var(--sid-vlak);
	color: var(--sid-blauw);
	outline: none;
}


/* --- De video in het venster ---------------------------------------------- */

/**
 * Zolang hier een plaatje in staat is er nog geen YouTube in het spel. Zodra
 * je op de knop drukt zet het script er een <iframe> in - zelfde vak, zelfde
 * verhouding, dus er springt niets.
 */
.sid-video {
	position: relative;
	margin-top: 20px;
	aspect-ratio: 16 / 9;
	background: var(--sid-donker);
	border-radius: 5px;
	overflow: hidden;
}

/**
 * .sid-video ervoor, en dat is nodig - niet voor de leesbaarheid.
 *
 * In woocommerce-layout.css staat .woocommerce img { height: auto }. Die weegt
 * zwaarder dan een regel met alleen .sid-video-foto, dus bleef de miniatuur
 * zijn eigen hoogte houden: 460 breed en 345 hoog in een vak van 460 bij 259.
 * De onderkant viel weg en je zag alleen de zwarte balk aan de bovenkant.
 */
.sid-video .sid-video-foto,
.sid-video iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* cover voor het geval de terugval op hqdefault nodig was: die is 4:3 met
   zwarte balken, en zo blijven die buiten beeld. */
.sid-video .sid-video-foto {
	object-fit: cover;
}

/* De afspeelknop: de driehoek is een tekening in de regel zelf, net als de
   pijltjes van de galerij. In het Siderius-blauw en niet in YouTube-rood -
   het is onze pagina. */
.sid-video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 68px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: var(--sid-blauw) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'%3E%3Cpath d='M2 1l12 8-12 8z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / 16px 18px;
	cursor: pointer;
	transition: background-color .15s ease, transform .15s ease;
}

.sid-video:hover .sid-video-play {
	background-color: var(--sid-blauw-donker);
	transform: translate(-50%, -50%) scale(1.06);
}

.sid-video-play:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}


/* --- Smallere schermen ---------------------------------------------------- */

@media (max-width: 991px) {

	.sid-info-venster {
		padding: 20px;
	}

	.sid-info-titel {
		font-size: 18px;
	}

	.sid-info-sluit {
		top: 14px;
		right: 14px;
	}

	.sid-video-play {
		width: 56px;
		height: 40px;
	}
}


/* ==========================================================================
   27. HET KOOPBLOK: PRIJS, BTW, VOORRAAD EN LEVERTIJD
   ==========================================================================
   Hoort bij inc/siderius-webshop/koopblok.php.

   DRIE REGELS ONDER DE CONFIGURATOR:

     € 25.000,-  excl. btw          groot, de prijs waar het om gaat
     € 30.250,- incl. btw           klein en grijs, ter geruststelling
     Uit voorraad                   rechts naast het bedrag, groen
     Uit voorraad leverbaar (6 wk)  eronder, blauw, met vrachtwagen

   Alle drie lopen ze mee met wat je in de configurator aanvinkt.
   ========================================================================== */

/* De maten van .sid-prijs en de twee prijsregels staan verderop, bij de
   voorraad - die drie vormen samen een raster en horen bij elkaar. */

/**
 * "excl. btw" achter het bedrag. Klein en grijs, want het is een toelichting
 * en geen onderdeel van het getal.
 *
 * WooCommerce zet zelf ook zo'n achtervoegsel achter elke prijs - dat staat in
 * de instellingen en zorgt voor de tegels in het overzicht. Hier op de
 * productpagina tekenen we de prijs zelf, dus doen we het ook zelf. Dubbel kan
 * het niet staan.
 */
/**
 * DE OUDE PRIJS BIJ EEN AANBIEDING.
 *
 * Staat voor het bedrag, klein en grijs met een streep erdoor; het bedrag zelf
 * kleurt dan rood. Maten uit het ontwerp van 25-08-2026.
 *
 * Geen flex hier: de drie stukjes staan gewoon in de tekstregel, en dan lopen
 * de onderkanten van 15px en 36px vanzelf gelijk. Met flex zou daar
 * align-items: baseline bij moeten en breekt "excl. btw" anders af.
 */
.sid-prijs-oud,
.sid-prijs-oud .woocommerce-Price-amount {
	font-size: 15px;
	font-weight: 400;
	color: var(--sid-grijs);
}

.sid-prijs-oud {
	margin-right: 10px;
	text-decoration: line-through;
	white-space: nowrap;
}

/* Lange selector met opzet: de kleur van het bedrag komt uit een regel van het
   thema die specifieker is dan een losse klasse. */
.woocommerce div.product .sid-product-koop .sid-prijs--actie .sid-prijs-getal,
.woocommerce div.product .sid-product-koop .sid-prijs--actie .sid-prijs-getal .woocommerce-Price-amount {
	color: var(--sid-rood);
}

.sid-prijs-label {
	font-size: 14px;
	font-weight: 400;
	color: var(--sid-grijs);
	white-space: nowrap;
}

/* Als er geen bedrag te noemen is. Kleiner dan een prijs, want het is een zin
   en geen getal. */
.woocommerce div.product .sid-product-koop .price .sid-prijs-aanvraag {
	font-size: 20px;
	font-weight: 700;
	color: var(--sid-donker);
}


/* --- Voorraad en levertijd: EEN groene regel ------------------------------ */

/**
 * HERZIEN 24-08-2026, twee keer op een dag.
 *
 * Het was "Op voorraad · levertijd 6 weken", klein en half grijs. Daarna even
 * een groene melding rechts van de prijs met een blauwe vrachtwagenregel
 * eronder - maar dat waren twee meldingen over hetzelfde moment, waarbij de
 * tweede de eerste in andere woorden herhaalde.
 *
 * Nu een regel: een bolletje en "Uit voorraad leverbaar (6 weken)", groen.
 * Groen omdat het goed nieuws is, en dik omdat dit de zin is waar een koper
 * op zit te wachten - geen bijschrift.
 */
.sid-prijs {
	margin: 0 0 4px;
}

.woocommerce div.product .sid-product-koop .sid-prijs p.price {
	margin: 0;
	line-height: 1.1;
}

.sid-prijs-incl {
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--sid-grijs);
}

/**
 * DE LEASEPRIJS ONDER HET PRIJSBLOK.
 *
 * Dezelfde maat en kleur als "incl. btw" erboven: het zijn allebei bijschriften
 * bij het bedrag, en die horen als een groepje te lezen en niet als twee
 * losse mededelingen. Alleen een klein zetje ruimte ertussen, zodat je ziet
 * dat de een over btw gaat en de ander over leasen.
 */
.sid-prijs-lease {
	margin: 3px 0 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--sid-grijs);
}

.sid-levering {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 10px 0 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--sid-groen);
}

/* Rood als de machine op is. Alleen deze regel hoeft om te - het bolletje
   volgt vanzelf. */
.sid-levering.is-leeg {
	color: var(--sid-rood);
}

/**
 * Het bolletje. Een echte cirkel en geen tekening in de CSS: daardoor pakt hij
 * met currentColor de kleur van de regel mee, dus ook het rood. Een data-URL
 * zou hier twee kleuren hardgeschreven in dit bestand betekenen.
 */
.sid-levering-bol {
	flex: 0 0 9px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: currentColor;
}

/* De voorraadregel van WooCommerce zelf hoort hier niet meer te staan - hij
   wordt afgevangen in productpagina.php. Mocht hij er ooit toch doorheen
   komen, dan valt hij zo niet uit de opmaak. */
.woocommerce div.product .sid-product-koop .sid-levering p.stock {
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
}


/* --- De lege winkelwagen -------------------------------------------------- */

/**
 * Getekend door woocommerce/cart/cart-empty.php.
 *
 * UIT HET ONTWERP VAN CLAUDE DESIGN, MET ZEVEN CORRECTIES (24-08-2026).
 * Het ontwerp gaf: icoonvlak 88px met radius 18, binnenruimte 70/40, 14px
 * tussen de knoppen, tekst 15px in #666, letterafstand .3 en een eigen
 * schaduw op .06. Geen van die zeven staat in onze schaal of ons palet.
 *
 * Wat er wel in stond en dus blijft: wit, radius 10, --sid-blauw voor het
 * vlak en de knop, --sid-donker voor de titel, --sid-blauw-midden voor de
 * tweede knop, --sid-blauw-donker bij hover, Titillium 700/24, en de
 * overgang van .3s.
 *
 * De schaduw had al de goede VORM - een gloed zonder verschuiving, zoals het
 * hele thema - alleen een andere sterkte. Onze variabele dus, anders oogt
 * deze ene kaart net iets platter dan alle andere.
 */
.sid-wagen-leeg-pagina {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 15px 60px;
	box-sizing: border-box;
}

.sid-wagen-leeg {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	/* 60 en 30: Cherry's -m en -s. Het ontwerp had 70/40, en die twee komen
	   nergens in de schaal voor. */
	padding: 60px 30px;
	background: #fff;
	border-radius: var(--sid-radius);
	box-shadow: var(--sid-schaduw);
	box-sizing: border-box;
}

/**
 * Het blauwe vlak met het heftruckje. 80x80 met radius 10 - het ontwerp had
 * 88 met radius 18, en zo'n hoek komt nergens anders op de site voor. 80
 * staat wel in Cherry's schaal, en met radius 10 hoort dit vlak bij dezelfde
 * familie als de kaarten eromheen.
 */
.sid-wagen-leeg-teken {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	margin-bottom: 20px;
	border-radius: var(--sid-radius);
	background: var(--sid-blauw);
	color: #fff;
	font-size: 34px;
}

.sid-wagen-leeg-teken svg,
.sid-wagen-leeg-teken i {
	width: 34px;
	height: 34px;
}

/* Onze eigen heftruck staat in een vak met lucht eromheen en oogt daardoor
   kleiner dan het Font Awesome-icoon dat hier stond. Zelfde verhouding als op
   de knoppen. Breedte los, anders wordt hij platgedrukt. */
.sid-wagen-leeg-teken .sid-heftruck {
	width: auto;
	height: 42px;
	font-size: 42px;
	/* Iets naar rechts. De massa van de tekening zit links, de vork is maar een
	   dunne streep, dus midden op de pixel oogt links. De hoogte klopt wel. */
	transform: translateX(2px);
}

.sid-wagen-leeg-kop {
	margin: 0 0 10px;
	font: 700 24px/1.3 'Titillium Web', sans-serif;
	color: var(--sid-donker);
}

/* 16 en niet de 15 uit het ontwerp: halve stappen bestaan niet in Cherry.
   En --sid-grijs en niet #666 - er is sinds 18-08 nog maar EEN grijs voor
   bijschriften, en daar een tweede naast zetten begint precies het probleem
   opnieuw dat we toen hebben opgeruimd. Zie [[kleurenopruiming]]. */
.sid-wagen-leeg-tekst {
	max-width: 420px;
	margin: 0 0 30px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--sid-grijs);
}

/**
 * De knoppen komen uit Cherry's eigen knoppenelement: .btns eromheen,
 * .btn-main per knop. Daardoor zien Primaire knop, Secundaire knop en de twee
 * linkknoppen er hier precies zo uit als overal elders op de site, en staat
 * hier geen tweede set regels die daarvan af kan gaan wijken.
 *
 * .btns regelt zelf de ruimte tussen de knoppen (15px) en het centreren.
 */

/**
 * De vijfde stijl, die Cherry niet heeft: wit vlak met een blauwe lijn.
 *
 * 13/28 en niet 15/30: de rand van 2px telt mee in de hoogte, en zo staat deze
 * knop precies even hoog als de gevulde ernaast. Dat scheelt de 12/14-truc uit
 * het ontwerp om het verschil achteraf weg te rekenen.
 *
 * a ervoor, anders wint Cherry's a:visited/a:hover-regel van deze kleur.
 */
.btns .btn-main.webshop a,
.btns .btn-main.webshop a:visited {
	display: block;
	padding: 13px 28px;
	border: 2px solid var(--sid-blauw);
	border-radius: 5px;
	background: #fff;
	color: var(--sid-blauw-midden);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	transition: ease .3s all;
}

.btns .btn-main.webshop a:hover,
.btns .btn-main.webshop a:focus-visible {
	background: var(--sid-blauw);
	border-color: var(--sid-blauw);
	color: #fff;
}

/* Op een telefoon onder elkaar en over de volle breedte; twee knoppen van
   30px binnenruimte naast elkaar passen daar niet. */
@media (max-width: 480px) {

	.sid-wagen-leeg .btns {
		flex-direction: column;
	}

	.sid-wagen-leeg .btn-main {
		width: 100%;
	}

	.sid-wagen-leeg {
		padding: 30px 20px;
	}
}


/* --- De melding bij verwijderen ------------------------------------------- */

/**
 * "Clark L25XE 2,5 ton verwijderd   ONGEDAAN MAKEN"
 *
 * Getekend door woocommerce/notices/sid-verwijderd.php. Alleen deze melding -
 * "Winkelwagen geupdatet" en "toegevoegd aan je winkelwagen" gaan nog gewoon
 * door notices/success.php. Zie sectie 7c van winkel-inrichten.php.
 *
 * DE PAGINA MAG NIET BEWEGEN, EN DAT IS DE HELE OPZET.
 * Het omhulsel is 0 hoog en de melding zweeft er absoluut in. De winkelwagen
 * eronder staat dus precies waar hij zonder melding zou staan; er wordt niets
 * naar beneden geduwd.
 *
 * Het omhulsel heeft dezelfde 1400px en 15px zijmarge als .sid-wagen-pagina,
 * zodat de melding rechts uitlijnt met het blok Overzicht en niet met de
 * schermrand.
 */
.sid-toast-plek {
	position: relative;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 15px;
	height: 0;
	box-sizing: border-box;
}

.sid-toast {
	position: absolute;
	top: 0;
	right: 15px;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 20px;
	/* Precies zo breed als het blok Overzicht eronder. Die 400 staat in
	   .sid-wagen-pagina als grid-template-columns: 1fr 400px; verandert die,
	   dan moet deze mee. */
	width: 400px;
	padding: 15px 20px;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid var(--sid-lijn);
	border-radius: var(--sid-radius);
	box-shadow: var(--sid-schaduw);
	font-size: 14px;
	line-height: 1.45;
	color: var(--sid-donker);
}

/* De naam van de machine is dik gemaakt in siderius_verwijdermelding_titel(). */
.sid-toast-tekst {
	min-width: 0;
}

/**
 * "ONGEDAAN MAKEN" rechts, als knoptekst. Dezelfde maat en letterafstand als
 * op onze knoppen: 12px, vet, hoofdletters, 0,4px.
 *
 * Secundair Siderius-blauw (--sid-blauw-midden), niet het felle blauw: dit is
 * een tekstlink en geen knop.
 *
 * a ervoor, anders wint Cherry's a:visited/a:hover-regel van deze kleur. Zie
 * [[thema-valkuilen]].
 */
.sid-toast-actie {
	flex: 0 0 auto;
}

a.restore-item,
a.restore-item:visited {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .4px;
	white-space: nowrap;
	color: var(--sid-blauw-midden);
	text-decoration: none;
}

a.restore-item:hover,
a.restore-item:focus-visible {
	color: var(--sid-blauw-donker);
	text-decoration: underline;
}

/**
 * IN DE RECHTERKOLOM: 30px BOVEN HET BLOK OVERZICHT.
 *
 * js/siderius-winkelwagen.js verhuist het omhulsel naar .cart-collaterals,
 * vlak voor het blok Overzicht. Het omhulsel is nul pixels hoog, dus zijn
 * onderrand valt samen met de bovenrand van dat blok - en `bottom: 30px` hangt
 * de melding er precies 30px boven.
 *
 * Die 30 is dezelfde `gap` als tussen de machines en het Overzicht in
 * .sid-wagen-pagina. Verandert die, dan hoort deze mee.
 *
 * GEEN VASTE BREEDTE MEER hier: links en rechts op 0 maakt hem vanzelf zo
 * breed als de kolom. Dat is beter dan de 400 uitschrijven, want dan volgt hij
 * de kolom als die ooit anders wordt.
 *
 * Lukt het verplaatsen niet - bij een lege winkelwagen is er geen Overzicht -
 * dan gelden de regels hierboven en blijft hij rechtsboven staan.
 */
.cart-collaterals .sid-toast-plek {
	position: relative;
	max-width: none;
	margin: 0;
	padding: 0;
	height: 0;
}

.cart-collaterals .sid-toast {
	top: auto;
	bottom: 30px;
	left: 0;
	right: 0;
	width: auto;
}


/**
 * WEG ZODRA JE ERop KLIKT.
 *
 * Klik je op Ongedaan maken, dan laadt de pagina opnieuw - en zolang dat duurt
 * bleef de melding gewoon staan. Dat leest alsof je klik niets deed.
 * js/siderius-winkelwagen.js zet deze klasse er meteen op; de rest van de
 * pagina blijft ondertussen staan tot het antwoord er is.
 *
 * Dezelfde overgang als het thema overal gebruikt (.3s ease).
 */
.sid-toast.is-weg {
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease;
}


/* Op een smal scherm past 400px niet meer naast de rand. */
@media (max-width: 640px) {

	.sid-toast {
		left: 15px;
		right: 15px;
		width: auto;
	}
}


/* --- De koopregel: teller en knop naast elkaar ---------------------------- */

/**
 * TOEGEVOEGD 24-08-2026, met het eigen sjabloon
 * woocommerce/single-product/add-to-cart/simple.php.
 *
 * WooCommerce zet de teller en de knop naast elkaar met floats. Floats lijnen
 * niet uit op hoogte: de knop stond een paar pixels lager dan de teller, en de
 * ruimte ertussen kwam uit marges die je per stuk moest bijstellen. Zie
 * [[thema-valkuilen]] over de float-indeling van dit thema.
 *
 * Als rij is het een regel: align-items stretch maakt de knop precies zo hoog
 * als de teller (44px), en de tussenruimte is een gap in plaats van een marge.
 * Verandert de hoogte van de teller ooit, dan volgt de knop vanzelf.
 */
.sid-koopregel {
	display: flex;
	align-items: stretch;
	/* 8px, dezelfde ruimte als tussen de keuzeknoppen van de configurator
	   (.sid-opties). Stond op 15; daardoor hoorde de teller optisch minder bij
	   de knop dan de opties bij elkaar, terwijl het hier juist een geheel is.
	   Gewijzigd 24-08-2026. */
	gap: 8px;
	margin-top: 15px;
}

/**
 * HET OFFERTEVENSTER.
 *
 * De vorm, de waas en het sluitkruisje komen van .sid-info-venster - hetzelfde
 * venster als achter de i'tjes. Hier staat alleen het formulier.
 *
 * WAAROM DE SELECTORS ZO LANG ZIJN
 * Cherry zet in style.css regel 576 en 624 opmaak op input[type="text"] en
 * vrienden: hoekig, 18px, 5px binnenruimte. Dat weegt precies even zwaar als
 * .sid-offerte-formulier input, en dan wint wie het laatst staat. Met het
 * venster ervoor is deze regel zwaarder en is er geen twijfel meer.
 */
.sid-offerte-venster {
	width: min(460px, calc(100vw - 40px));
}

.sid-offerte-venster .sid-offerte-intro {
	/* 30 onder de introtekst, en straks ook 30 boven de knop: het formulier
	   krijgt aan beide kanten evenveel lucht. Daarbinnen 15 tussen de velden en
	   5 tussen een opschrift en zijn eigen veld, zodat die twee als een paar
	   lezen. */
	margin: 0 0 30px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--sid-grijs);
}

.sid-offerte-venster .sid-offerte-formulier {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.sid-offerte-venster .sid-offerte-formulier label {
	display: block;
	margin: 0;
}

.sid-offerte-venster .sid-offerte-formulier label span {
	display: block;
	margin-bottom: 5px;
	font: 700 13px/1.4 'Open Sans', sans-serif;
	color: var(--sid-donker);
}

.sid-offerte-venster .sid-offerte-formulier input {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	padding: 13px 15px;
	border: 1px solid var(--sid-lijn);
	border-radius: 5px;
	background: #fff;
	font: 400 15px/1.4 'Open Sans', sans-serif;
	color: var(--sid-donker);
	transition: ease .3s all;
}

.sid-offerte-venster .sid-offerte-formulier input:focus {
	outline: 0;
	border-color: var(--sid-blauw);
}

/* De invulhint in het themagrijs; de ingevulde tekst is donker. Zo zie je
   meteen of er iets staat of dat het nog een hint is. */
.sid-offerte-venster .sid-offerte-formulier input::placeholder {
	color: var(--sid-grijs);
	opacity: 1;
}

/* Dezelfde knop als IN WINKELWAGEN, zodat het venster eindigt zoals het
   koopblok eronder. 10px extra erboven: de knop hoort niet bij het laatste
   veld maar sluit het formulier af. */
.sid-offerte-venster .sid-offerte-versturen {
	width: 100%;
	/* 15 bovenop de 15 van de gap = 30, gelijk aan de ruimte boven het eerste
	   veld. */
	margin-top: 15px;
	padding: 16px 30px;
	border: 0;
	border-radius: 5px;
	background: var(--sid-blauw);
	color: #fff;
	font: 700 16px 'Open Sans', sans-serif;
	/* Cherry maakt van ELKE button een flexbox (style.css r. 609). De tekst is
	   daarmee een flexonderdeel en text-align raakt hem niet meer - vandaar
	   justify-content. Zelfde reden als bij de koopknop. */
	justify-content: center;
	align-items: center;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .4px;
	cursor: pointer;
	transition: background-color .3s ease;
}

.sid-offerte-venster .sid-offerte-versturen:hover {
	background: var(--sid-blauw-donker);
}


/* --- Het lokvakje --------------------------------------------------------- */

/* Buiten beeld in plaats van display:none: een bot die alleen op verstopte
   velden let, trapt daar minder snel in. */
.sid-lokvakje {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Meldingen bij de velden ---------------------------------------------- */

.sid-offerte-venster .sid-offerte-formulier label.is-fout input {
	border-color: var(--sid-rood);
}

/* Lange selector met opzet: de melding is een <span> in een <label>, en de
   regel voor veldopschriften hierboven is specifieker dan een losse klasse.
   Zonder dit erft de melding het donkere vet van een opschrift. */
.sid-offerte-venster .sid-offerte-formulier label .sid-veldfout {
	display: block;
	margin-top: 5px;
	font: 400 13px/1.4 'Open Sans', sans-serif;
	color: var(--sid-rood);
}

/* Een melding die niet bij een veld hoort - de verbinding, de teller, of een
   machine die niet meer bestaat. Boven het formulier, want hij gaat over het
   geheel. */
.sid-offerte-fout {
	margin: 0 0 20px;
	padding: 12px 15px;
	border-radius: 5px;
	background: var(--sid-rood-vlak);
	font-size: 14px;
	line-height: 1.5;
	color: var(--sid-rood);
}

.sid-offerte-venster .sid-offerte-versturen.is-bezig {
	opacity: .6;
	cursor: default;
}

/* --- Na het versturen ----------------------------------------------------- */

/* Het vinkje in het groen van het thema, hetzelfde groen als de
   voorraadregel op de productpagina. */
/* Hetzelfde groene rondje als in het venster na een serviceaanvraag
   (.sid-service-vinkje). Eigen tekening, geen letter-icoon meer, dus de maat
   komt uit width en height en niet uit de lettergrootte. */
.sid-offerte-vinkje {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: var(--sid-groen-vlak);
	color: var(--sid-groen);
}

.sid-offerte-vinkje svg {
	width: 28px;
	height: 28px;
}

.sid-offerte-gelukt-kop {
	margin: 0 0 5px;
	font: 700 17px/1.35 'Titillium Web', sans-serif;
	color: var(--sid-donker);
}

/* De knop naar de eigen offertepagina. Staat onder de bevestiging, want dat
   is vanaf nu het echte antwoord op het formulier: de offerte is er al. */
.sid-offerte-gelukt-knop {
	display: inline-block;
	margin-top: 18px;
	padding: 13px 24px;
	border-radius: 5px;
	background: var(--sid-blauw);
	color: #fff;
	font: 700 14px 'Open Sans', sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	transition: ease .3s all;
}

.sid-offerte-gelukt-knop:hover,
.sid-offerte-gelukt-knop:focus-visible {
	background: var(--sid-blauw-donker);
	color: #fff;
	text-decoration: none;
}

.sid-offerte-gelukt-nummer {
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--sid-grijs);
}

.sid-offerte-gelukt-adres {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--sid-grijs);
}


/**
 * DE OFFERTEKNOP, onder de koopregel.
 *
 * Wit vlak met een blauwe rand - de tweede knop uit het ontwerp. 13/30 en niet
 * 15/30: de rand van 2px telt mee in de hoogte, en zo staat hij precies even
 * hoog als de gevulde knop erboven. Zelfde truc als bij de lege winkelwagen.
 *
 * a ervoor, anders wint Cherry's a:visited/a:hover-regel van deze kleur.
 */
a.sid-offerteknop,
a.sid-offerteknop:visited {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin-top: 10px;
	padding: 13px 30px;
	border: 2px solid var(--sid-blauw);
	border-radius: 5px;
	background: #fff;
	color: var(--sid-blauw-midden);
	font: 700 15px 'Open Sans', sans-serif;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .4px;
	text-decoration: none;
	transition: ease .3s all;
}

a.sid-offerteknop:hover,
a.sid-offerteknop:focus-visible {
	background: var(--sid-blauw);
	border-color: var(--sid-blauw);
	color: #fff;
	text-decoration: none;
}


/**
 * DE KNOP HEEFT DEZELFDE MAAT ALS AFREKENEN. Gewijzigd 24-08-2026.
 *
 * Hij was 44px hoog en 15px tekst - kleiner dan AFREKENEN en NAAR WINKELWAGEN
 * op de winkelwagenpagina, die allebei 56px zijn met tekst van 16. Dat is
 * precies verkeerd om: dit IS de knop waar de hele pagina naartoe werkt, en
 * hij was de kleinste van de drie.
 *
 * Nu dezelfde waarden als .sid-som-knop: 16px binnenruimte boven en onder,
 * tekst 16, dus 56px hoog. Nagemeten in de browser, niet geschat.
 *
 * (De CONTACT-knop in de header is 46px. Die telt niet mee: die hoort bij het
 * menu, niet bij de winkel.)
 */

/* float: none is geen overbodige regel - WooCommerce zet die er zelf op.
   height: auto haalt de vaste 44px van .sid-teller eraf, zodat de teller met
   align-items: stretch de hoogte van de knop overneemt. Zet je de knop ooit
   anders, dan volgt de teller vanzelf. */
.woocommerce div.product .sid-product-koop .sid-koopregel .quantity.sid-teller {
	float: none;
	margin: 0;
	flex: 0 0 auto;
	height: auto;
}

.woocommerce div.product .sid-product-koop .sid-koopregel .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex: 1 1 auto;
	float: none;
	margin: 0;
	padding: 16px 30px;
	font-size: 16px;
	line-height: 1.5;
}

/* Het heftruckje iets groter dan de tekst; hij staat naast hoofdletters. */
.sid-koopregel .single_add_to_cart_button i,
.sid-koopregel .single_add_to_cart_button svg {
	font-size: 20px;
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
}

/* Onze eigen tekening mag groter dan het Font Awesome-icoon dat hier stond:
   die vulde zijn hele vierkant, onze staat in een vak met lucht eromheen.
   Zelfde verhouding als in de kop (26 om 20). De breedte laten we los, anders
   wordt de tekening platgedrukt; hij is breder dan hoog.

   DE TWEE PIXELS OMHOOG. Nagemeten in de browser: de vakken van de tekst en
   de tekening liggen precies gelijk. Maar de knoptekst is in hoofdletters en
   die hebben geen staartletters, dus het oog ziet hun midden een paar pixels
   hoger liggen dan het midden van de regel. Zonder deze correctie hangt de
   heftruck net onder de tekst. */
.sid-koopregel .single_add_to_cart_button .sid-heftruck {
	width: auto;
	height: 24px;
	font-size: 24px;
	flex: 0 0 auto;
	transform: translateY(-2px);
}


/* --- DE AANTALTELLER ------------------------------------------------------ */

/**
 * EEN TELLER, DRIE PLEKKEN: de productpagina, de winkelwagenlade en straks de
 * winkelwagenpagina.
 *
 * Hier stonden er twee. Op de productpagina bouwt het script hem om het
 * bestaande veld van WooCommerce heen; in de lade tekent PHP hem zelf. Twee
 * vertrekpunten, maar hetzelfde ding - en dus stonden de min- en plustekening
 * twee keer in dit bestand. Nu is er een set klassen die allebei gebruiken.
 *
 * Het getal in het midden is op de ene plek een invulveld en op de andere een
 * stukje tekst. Dat maakt voor de opmaak niet uit; beide krijgen dezelfde
 * breedte en uitlijning.
 */
.woocommerce div.product .sid-product-koop .quantity.sid-teller,
.sid-teller {
	display: flex;
	align-items: stretch;
	width: auto;
	height: 44px;
	border: 1px solid var(--sid-lijn);
	border-radius: 5px;
	overflow: hidden;
	background: #fff;
}

/* In de lade is alles een maat kleiner. */
.sid-teller--klein {
	height: 34px;
}

.woocommerce .sid-teller input.qty,
.sid-teller-getal {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	color: var(--sid-donker);
	box-shadow: none;
	-moz-appearance: textfield;
	appearance: textfield;
}

/* Het getal ertussen ook smaller, anders staan - en + verder uit elkaar dan
   in de lade. Twee kiezers omdat het getal in de lade een <span> is en op de
   winkelwagenpagina een invoerveld van WooCommerce. */
.woocommerce .sid-teller--klein input.qty,
.sid-teller--klein .sid-teller-getal {
	width: 32px;
	font-weight: 700;
}

/* De eigen pijltjes van de browser eruit; daar komen onze knoppen voor in de
   plaats. */
.woocommerce .sid-teller input.qty::-webkit-outer-spin-button,
.woocommerce .sid-teller input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/**
 * DE + EN - ZIJN TEKST, GEEN TEKENING.
 *
 * Stonden tot 20-08-2026 als getekende SVG'tjes in een data-URL, omdat de
 * Font Awesome-kit een subset is en plus en minus er niet in zitten. Dat gaf
 * drie problemen tegelijk:
 *   1. Ze waren te zwaar. stroke-width 2 op een tekening van 12x12 is een
 *      zesde van de hoogte; naast tekst van 13 en 14 viel dat op.
 *   2. Een achtergrondafbeelding botst met Cherry's korte schrijfwijze
 *      'button:hover { background: #006997 }' - die zet background-image
 *      terug op none, dus het plusje verdween zodra je erop kwam.
 *   3. De lijnkleur moest als #002533 in de data-URL worden overgetikt; een
 *      variabele kan niet reiken tot IN zo'n tekening.
 *
 * Als tekst vallen alle drie weg. De kleur komt uit het palet via 'color',
 * de maat schaalt mee met de rest, en er is niets meer om over te vechten
 * met het thema. Netto ongeveer twintig regels minder.
 *
 * Het minteken is U+2212 (het echte wiskundige minteken), niet een
 * koppelteken - dat laatste is korter en staat te hoog naast de plus.
 * De tekens staan in de HTML: winkelwagen-lade.php en js/siderius-koopblok.js.
 */
.sid-teller-knop {
	/* Flex om te centreren. Een tekening deed dat vanzelf met
	   background-position: center; een letter hangt aan zijn basislijn en
	   staat dan te hoog. Zelfde aanpak als .sid-teller-getal hierboven. */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--sid-donker);
	font: 400 16px/1 'Open Sans', sans-serif;
	text-transform: none;  /* Cherry zet elke knop op hoofdletters */
	cursor: pointer;
	transition: background-color .15s ease;
}

.sid-teller--klein .sid-teller-knop {
	width: 32px;
}

.sid-teller-knop:hover {
	background-color: var(--sid-vlak);
}

.sid-teller-knop:focus-visible {
	outline: 2px solid var(--sid-blauw);
	outline-offset: -2px;
}


/* --- Smallere schermen ---------------------------------------------------- */

@media (max-width: 991px) {

	.sid-prijs-label,
	.sid-prijs-incl,
	.sid-prijs-lease,
	.sid-levering {
		font-size: 13px;
	}
}


/* ==========================================================================
   28. DE WINKELWAGENLADE
   ==========================================================================
   Hoort bij inc/siderius-webshop/winkelwagen-lade.php en js/siderius-lade.js.

   DE BEWEGING KOMT LETTERLIJK UIT HET ONTWERP:
     paneel  452px, schuift in met translateX over 0,42s, curve .22/.61/.36/1
     waas    rgba(0,20,28,.45) met 2px vervaging, over 0,38s
     bolletje in de header springt op naar 1,45x met een verende curve

   DE MATEN EN KLEUREN NIET. Het ontwerp gebruikt 13,5 en 12,5 en een eigen
   grijs en groen; hier staat de schaal en het palet van de webshop:
     ontwerp 13,5 / 12,5  ->  14 / 13
     ontwerp #8a8a8a      ->  var(--sid-grijs)
     ontwerp #E5E5E5      ->  var(--sid-lijn-licht) en var(--sid-lijn)
     ontwerp #F0F9FE      ->  var(--sid-lichtblauw)
     ontwerp #1F8F00      ->  var(--sid-groen), want dat haalt wel de norm
   ========================================================================== */

.sid-lade[hidden] {
	display: none;
}

/**
 * z-index 100000, en dat getal is gemeten en niet gegokt.
 *
 * De header van het thema staat op position:fixed met z-index 99997. Stond de
 * lade daaronder, dan schoof zijn donkerblauwe kop achter de header en zag je
 * de titel en de sluitknop niet meer.
 */
.sid-lade {
	position: fixed;
	inset: 0;
	z-index: 100000;
}

/**
 * Cherry zet ALLE knoppen in hoofdletters:  button { text-transform: uppercase }
 * Hier staat tekst in knoppen die gewoon tekst moet blijven - "verwijderen",
 * "Verder winkelen", "Toevoegen". Alleen de grote blauwe knop mag schreeuwen,
 * en die zet het zelf weer aan.
 */
.sid-lade button {
	text-transform: none;
	letter-spacing: normal;
}

/* Achter de lade mag de pagina niet meescrollen. */
body.sid-lade-open {
	overflow: hidden;
}


/* --- De waas -------------------------------------------------------------- */

/* Zelfde waas als het i-venster - zie --sid-waas in het palet bovenaan.
   Dichtgeklapt is hij volledig doorzichtig; de overgang loopt van daar naar
   --sid-waas. Vandaar dat de kleur hier twee keer staat en niet als een
   opacity op het hele element: een halfdoorzichtig element zou ook het witte
   paneel meenemen. */
.sid-lade-waas {
	position: absolute;
	inset: 0;
	background: rgba(27, 30, 36, 0);
	transition: background .38s ease;
}

.sid-lade.is-open .sid-lade-waas {
	background: var(--sid-waas);
}


/* --- Het paneel ----------------------------------------------------------- */

.sid-lade-paneel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: min(452px, 100vw);
	background: #fff;
	/* GEEN --sid-schaduw: die is een gloed zonder richting (0 0 10px 5px),
	   want het thema doet alsof het licht recht van voren komt. Deze lade
	   schuift van rechts naar binnen en moet dus naar LINKS schaduwen, anders
	   ligt hij plat op de pagina in plaats van erboven. Komt maar op deze ene
	   plek voor, vandaar geen variabele. */
	box-shadow: -18px 0 46px rgba(0, 0, 0, .22);
	transform: translateX(100%);
	transition: transform .42s cubic-bezier(.22, .61, .36, 1);
	outline: none;
}

.sid-lade.is-open .sid-lade-paneel {
	transform: translateX(0);
}

/* Terwijl de server bezig is. Geen spinner - alleen even niet aanklikbaar,
   want een verzoek duurt hier tienden van seconden. */
.sid-lade.is-bezig .sid-lade-inhoud {
	opacity: .5;
	pointer-events: none;
	transition: opacity .15s ease;
}


/* --- De kop --------------------------------------------------------------- */

.sid-lade-kop {
	flex: none;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 20px 24px;
	background: var(--sid-donker);
	color: #fff;
}

.sid-lade-titel {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.3;
	color: #fff;
	margin: 0;
}

/**
 * HET SLUITKRUISJE - dezelfde bouw als dat van het i'tje-venster.
 *
 * De tekening staat in winkelwagen-lade.php, in de regel, met
 * stroke="currentColor". Zo volgt hij gewoon 'color' hieronder en komt de
 * kleur uit het palet. Stond tot 20-08-2026 als data-URL in dit bestand; toen
 * verdween hij bij hover, omdat Cherry's 'button:hover { background: … }' de
 * korte schrijfwijze is en background-image meewist.
 *
 * Maten gelijk aan .sid-info-sluit: knop 28x28, tekening 14x14, lijndikte 2.
 * Het hover-vlak is --sid-vlak-donker, dezelfde waas als de hamburger in het
 * mobiele menu, want deze knop ligt net als die hamburger op een donker vlak.
 *
 * BEWUSTE KEUZE VAN TOMAS, 20-08-2026, MET DEZE METING ERBIJ:
 * het kruisje is --sid-grijs (#6B7278) en dat is een grijs dat voor WIT is
 * gemaakt. Op deze donkere kop haalt het 3,2:1, en bij hover licht de waas de
 * ondergrond op naar ±#1F3F4B waardoor het zákt naar 2,2:1. Je muis erop
 * zetten maakt het kruisje dus iets minder zichtbaar in plaats van meer.
 * Tomas heeft de alternatieven gezien (wit op 65% haalt 7,4:1 → 5,1:1) en
 * hier bewust voor gekozen: de sluitknop mag niet met de winkelwagen
 * concurreren.
 * DIT IS GEEN FOUT DIE JE MOET REPAREREN. Wil je het toch omdraaien, dan is
 * het één regel: color naar rgba(255, 255, 255, .65).
 */
.sid-lade-sluit {
	margin-left: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 5px;
	background: none;
	color: var(--sid-grijs);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.sid-lade-sluit svg {
	display: block;
}

.sid-lade-sluit:hover,
.sid-lade-sluit:focus-visible {
	background-color: var(--sid-vlak-donker);
	color: var(--sid-grijs);
	outline: none;
}


/* --- De inhoud ------------------------------------------------------------ */

.sid-lade-inhoud {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 22px 24px 0;
}


/* --- Een regel ------------------------------------------------------------ */

.sid-lade-regel {
	display: flex;
	gap: 14px;
	padding-bottom: 20px;
}

.sid-lade-regel + .sid-lade-regel {
	border-top: 1px solid var(--sid-lijn-licht);
	padding-top: 20px;
}

/**
 * DIT KADER BLIJFT VIERKANT EN BLIJFT ZOALS HET WAS.
 *
 * Een nieuwe machine is een uitgeknipte foto op wit en staat hier goed. Ik heb
 * dit kader op 28-09-2026 even op 4:3 gezet zodat de tekstkolom bij nieuw en
 * gebruikt op dezelfde plek begint. Dat was de verkeerde afweging: een regel
 * die al goed stond verandert dan mee voor iets wat niemand mist.
 *
 * Alleen de gebruikte machines krijgen een ander kader, zie
 * .sid-lade-plaatje--vullend hieronder. De tekst begint bij die regels dus
 * 32px verder naar rechts.
 */
.sid-lade-plaatje {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 104px;
	height: 104px;
	padding: 8px;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid var(--sid-lijn);
	border-radius: 8px;
	overflow: hidden;
}

.sid-lade-plaatje img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* DE GEBRUIKTE MACHINES: 4:3 EN DE FOTO VULT HET KADER. Toegevoegd 28-09-2026.
   Dezelfde afspraak als op de productkaart, zie .sid-kaart-foto--vullend in
   sectie 8. De klasse komt uit inc/siderius-webshop/winkelwagen-lade.php en
   volgt het vinkje "hoort bij gebruikt" op de categorie.

   Alleen hier staat 4:3, niet op het kader hierboven: het importscript levert
   liggende foto's (1024x768 en kleiner, allemaal 4:3), dus in dit kader snijdt
   cover niets weg. Staat er toch een staande foto bij, dan houdt hij het
   midden over. Het kader is even hoog als het vierkante hierboven op 2px na,
   dus de rijen worden er niet ongelijk van in de hoogte. */
.sid-lade-plaatje--vullend {
	width: 136px;
	height: auto;
	aspect-ratio: 4 / 3;
	padding: 0;
}

.sid-lade-plaatje--vullend img {
	max-width: none;
	max-height: none;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/**
 * OP EEN TELEFOON BLIJFT HET KADER 104 BREED.
 *
 * De lade is daar zo breed als het scherm. Onder de naam staat de teller (96px)
 * naast het bedrag; bij een machine van boven de tienduizend is dat samen zo'n
 * 200px. Op een scherm van 375 houdt de tekstkolom naast een kader van 136 nog
 * 177px over en breekt die regel. Met 104 staat er net zo veel naast als
 * voorheen.
 *
 * De foto wordt er niet kleiner van dan hij was: het kader verliest hoogte,
 * maar de vulling loopt nu wel van rand tot rand.
 */
@media (max-width: 420px) {

	.sid-lade-plaatje--vullend {
		width: 104px;
	}
}

.sid-lade-tekst {
	flex: 1 1 auto;
	min-width: 0;
}

a.sid-lade-naam {
	display: block;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.3;
	color: var(--sid-donker);
}

.sid-lade-naam:hover {
	color: var(--sid-blauw-midden);
}

/* De categorie, BOVEN de naam - zelfde volgorde en zelfde 13px grijs als
   .sid-wagen-soort op de winkelwagenpagina en de productkaart in het
   overzicht. Geen marge: de regelhoogte doet het werk, precies zoals daar.
   Gewijzigd 24-08-2026, stond eerder onder de naam met 2px erboven. */
.sid-lade-sub {
	font-size: 13px;
	line-height: 1.4;
	color: var(--sid-grijs);
}


/* --- De labels met de gekozen uitvoering ---------------------------------- */

/**
 * DE CHIPS MET DE GEKOZEN UITVOERING - EEN ONDERDEEL, DRIE PLEKKEN.
 *
 * Getekend door woocommerce/cart/cart-item-data.php; gebruikt door de lade, de
 * winkelwagenpagina en het afrekenscherm. Heetten tot 21-08-2026
 * .sid-lade-label en stonden alleen in de lade.
 *
 * Geen rand: het lichtblauwe vlak tekent zich tegen de witte kaart al genoeg
 * af, en het scheelt een kleur in het palet. Besloten 21-08-2026.
 */
/* DE GEKOZEN UITVOERING, ALS CHIPS. Gewijzigd 24-08-2026.
   Er staan nu meer rijen chips onder elkaar: eerst de keuzegroepen, daarna per
   extra-blok een kop met zijn eigen rij eronder. Zie
   woocommerce/cart/cart-item-data.php.
   De ruimte naar de productnaam zit daarom om het OMHULSEL heen en niet meer
   om elke rij - anders komt er 10px tussen een kop en de chips die erbij
   horen. */

.sid-keuzeblokken {
	margin-top: 10px;
}

.sid-keuzes {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

/* De titel van een extra-blok: een keer, boven de chips die erbij horen.
   Dezelfde 13px als een chip, zodat het een kop bij die rij blijft en niet als
   tweede tussenkop in de kaart gaat meedoen met de productnaam. */
.sid-keuzes-kop {
	font-size: 13px;
	font-weight: 700;
	color: var(--sid-grijs);
	margin: 10px 0 5px;
}

/* Een machine met alleen extra's begint met een kop; daar hoeft die 10px er
   niet nog eens bovenop. */
.sid-keuzeblokken > .sid-keuzes-kop:first-child {
	margin-top: 0;
}

.sid-keuze {
	background: var(--sid-lichtblauw);
	color: var(--sid-blauw-midden);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	padding: 5px 10px;
	border-radius: 5px;
}


/* --- Aantal en bedrag ----------------------------------------------------- */

.sid-lade-onderrand {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 12px;
}

.sid-lade-bedrag {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: var(--sid-donker);
	white-space: nowrap;
}

/**
 * BIJ EEN AANBIEDING: DE OUDE PRIJS EROP, HET BEDRAG ERONDER IN HET ROOD.
 *
 * Alleen dan wordt dit een kolommetje. Zonder actie blijft het een gewoon
 * bedrag op een regel, precies zoals hierboven.
 *
 * 18px en niet de 19 uit het ontwerp: dat is de maat die hier al stond en
 * dezelfde als op de productkaart. Een los getal van 19 zou nergens anders
 * terugkomen.
 */
.sid-lade-bedrag--actie {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	line-height: 1.2;
}

.sid-lade-bedrag--actie,
.sid-lade-bedrag--actie .woocommerce-Price-amount {
	color: var(--sid-rood);
}

/* Na de regel hierboven, want even specifiek: wie laatst staat wint. */
.sid-lade-bedrag-oud,
.sid-lade-bedrag-oud .woocommerce-Price-amount {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 12px;
	color: var(--sid-grijs);
	text-decoration: line-through;
}

/**
 * VERWIJDEREN - EEN ONDERDEEL, TWEE PLEKKEN.
 *
 * Heette tot 21-08-2026 .sid-lade-weg en stond alleen in de lade. De
 * winkelwagenpagina had zijn eigen versie die er net anders uitzag. Nu allebei
 * dit.
 *
 * Twee elementsoorten: in de lade een <button>, op de winkelwagenpagina de
 * verwijderlink van WooCommerce zelf. Vandaar de reset van de knopopmaak, en
 * de kleur apart met het elementsoort erbij - zie sectie 24.
 *
 * De ruimte eromheen staat NIET hier maar bij de plek waar hij hangt; een
 * onderdeel bepaalt hoe het eruitziet, de omgeving bepaalt waar het staat.
 */
.sid-regel-weg {
	display: inline-block;
	padding: 0;
	border: 0;
	background: none;
	font-size: 13px;
	/* VET, EN DAT IS NU EEN KEUZE. In de lade is dit een <button> en Cherry zet
	   elke knop op vet; op de winkelwagenpagina is het een link en die bleef
	   normaal. Dat verschil was toeval. Vastgelegd door Tomas op 21-08-2026:
	   de vette versie uit de lade. Een woord om terug te draaien naar 400. */
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	text-decoration: none;
	transition: color .25s ease;
}

a.sid-regel-weg,
button.sid-regel-weg {
	color: var(--sid-grijs);
}

/* Alleen de tekst verkleurt - GEEN balk eromheen.
   Die 'background: none' hierboven weegt een klasse (0,1,0) en verliest van
   Cherry's 'button:hover { background:#006997 }' (0,1,1), waardoor er bij
   hover een donkerblauwe balk om deze tekstknop verscheen. Daarom staat hij
   hier nog een keer, nu mét :hover erbij zodat hij wel zwaar genoeg weegt.
   Hetzelfde geldt voor .sid-lade-verder. Opgelost 20-08-2026. */
a.sid-regel-weg:hover,
a.sid-regel-weg:focus-visible,
button.sid-regel-weg:hover,
button.sid-regel-weg:focus-visible {
	background: none;
	color: var(--sid-blauw-donker);
	text-decoration: underline;
}

/* In de lade hangt hij onder de teller. */
.sid-lade-regel .sid-regel-weg {
	margin-top: 10px;
}


/* --- Vaak samen besteld --------------------------------------------------- */

.sid-lade-kruis {
	border-top: 1px solid var(--sid-lijn-licht);
	padding: 18px 0 20px;
}

.sid-lade-kruis-kop {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: var(--sid-donker);
	margin: 0 0 12px;
}

.sid-lade-kruis-regel {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 13px;
	border: 1px solid var(--sid-lijn);
	border-radius: 8px;
	transition: border-color .25s ease;
}

.sid-lade-kruis-regel + .sid-lade-kruis-regel {
	margin-top: 10px;
}

.sid-lade-kruis-regel:hover {
	border-color: var(--sid-blauw);
}

.sid-lade-kruis-foto {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	background: var(--sid-vlak);
	border-radius: 6px;
	overflow: hidden;
}

.sid-lade-kruis-foto img {
	max-width: 88%;
	max-height: 88%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.sid-lade-kruis-tekst {
	flex: 1 1 auto;
	min-width: 0;
}

a.sid-lade-kruis-naam {
	display: block;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--sid-donker);
}

.sid-lade-kruis-sub {
	display: block;
	font-size: 13px;
	color: var(--sid-grijs);
}

.sid-lade-kruis-prijs {
	flex: none;
	font-size: 13px;
	font-weight: 700;
	color: var(--sid-donker);
	white-space: nowrap;
}

.sid-lade-kruis-knop {
	flex: none;
	padding: 8px 13px;
	border: 0;
	border-radius: 5px;
	background: var(--sid-lichtblauw);
	color: var(--sid-blauw-midden);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease;
}

.sid-lade-kruis-knop:hover {
	background: var(--sid-blauw);
	color: #fff;
}

/* Al in de wagen. Het zachte groen hoort bij het zachte blauw hierboven. */
.sid-lade-kruis-knop.is-erin {
	background: var(--sid-groen-vlak);
	color: var(--sid-groen);
	cursor: default;
}


/* --- De voet -------------------------------------------------------------- */

.sid-lade-voet {
	flex: none;
	margin: 0 -24px;
	padding: 18px 24px 22px;
	border-top: 1px solid var(--sid-lijn-licht);
	background: #fff;
	/* Ook geen --sid-schaduw, om dezelfde reden als bij het paneel: deze wijst
	   naar BOVEN. Dit blok plakt aan de onderkant (sticky), dus bij meer dan
	   een paar machines schuift de lijst eronderdoor - het schaduwtje laat dat
	   zien. Heel licht, want het mag de knop eronder niet overstemmen. */
	box-shadow: 0 -6px 18px rgba(0, 0, 0, .05);
	position: sticky;
	bottom: 0;
}

/* --- DE OPTELSOM - gedeeld onderdeel, twee plekken ------------------------ */

/**
 * Heette tot 21-08-2026 .sid-lade-*, want hij stond alleen in de lade. De
 * winkelwagenpagina heeft precies hetzelfde nodig: regels met bedragen rechts,
 * een streep, een totaalregel, een brede knop. Onder de oude naam had die
 * pagina een tweede kopie van deze regels gekregen - dezelfde fout die bij de
 * aantalteller drie rondes kostte. Nu is het een onderdeel met twee gebruikers:
 *
 *     inc/siderius-webshop/winkelwagen-lade.php   de lade
 *     woocommerce/cart/cart-totals.php            de winkelwagenpagina
 *
 * Verschillen tussen de twee zitten in de INHOUD, niet in de opmaak: de lade
 * toont twee regels en excl. btw als hoofdgetal, de pagina toont er drie en
 * incl. btw. Wat je hier verandert, verandert op allebei.
 */
.sid-som-regels {
	display: flex;
	flex-direction: column;
	gap: 10px;   /* was 7 in de lade, 11 in het ontwerp van de pagina - 10 is de schaal */
	font-size: 14px;
	color: var(--sid-grijs);
	margin-bottom: 12px;
}

.sid-som-regels > div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.sid-som-regels span:last-child {
	color: var(--sid-donker);
	text-align: right;
}

.sid-som-totaal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-top: 14px;
	margin-bottom: 14px;
	border-top: 1px solid var(--sid-lijn-licht);
}

.sid-som-totaal-kop {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	/* 18, niet 17. 17 is in onze reeks een uitzondering met een reden - de naam
	   van een machine op de producttegel - en dit is geen producttegel. Het
	   ontwerp van de pagina zei 19; 18 ligt daar het dichtst bij en staat al in
	   de reeks. De lade wordt hierdoor 1px groter. */
	font-size: 18px;
	color: var(--sid-donker);
}

.sid-som-totaal-bedrag {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 28px;
	line-height: 1.1;
	color: var(--sid-donker);
	text-align: right;
}

.sid-som-totaal-bedrag small {
	display: block;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 13px;
	color: var(--sid-grijs);
}


/* --- De knoppen ----------------------------------------------------------- */

a.sid-som-knop {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 16px;
	margin-bottom: 10px;
	border: 0;
	border-radius: 5px;
	background: var(--sid-blauw);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .4px;
	cursor: pointer;
	transition: background-color .3s ease;
}

/**
 * Alleen de knop in de lade: tekst en daarachter het heftruckje, 10px ertussen
 * - dezelfde afstand als op de koopknop.
 *
 * De afrekenknop deelt .sid-som-knop maar bevat twee tekstdelen ("Afrekenen -"
 * en het bedrag). Zou deze regel daar ook gelden, dan worden dat twee losse
 * blokjes met 10px ertussen en staat die streep ineens los.
 */
a.sid-som-knop--icoon {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

/* Precies dezelfde maat en correctie als op de koopknop: ook hier staat de
   tekst in hoofdletters, dus moet de tekening twee pixels omhoog. */
a.sid-som-knop--icoon .sid-heftruck {
	flex: 0 0 auto;
	width: auto;
	height: 24px;
	font-size: 24px;
	transform: translateY(-2px);
}

/* Cherry onderstreept elke link bij hover; op een knop hoort dat niet. */
a.sid-som-knop,
a.sid-som-knop:hover,
a.sid-som-knop:focus {
	text-decoration: none;
}

a.sid-som-knop:hover {
	background: var(--sid-blauw-donker);
	color: #fff;
}

a.sid-lade-naam,
a.sid-lade-kruis-naam {
	text-decoration: none;
}

.sid-lade-verder {
	display: block;
	width: 100%;
	padding: 6px;
	border: 0;
	background: none;
	font-size: 14px;
	font-weight: 700;
	color: var(--sid-grijs);
	cursor: pointer;
	transition: color .25s ease;
}

/* Alleen de tekst verkleurt, geen balk - zie de uitleg bij .sid-regel-weg. */
.sid-lade-verder:hover,
.sid-lade-verder:focus-visible {
	background: none;
	color: var(--sid-blauw-donker);
}

/* ONDER ELKAAR, NIET NAAST ELKAAR. Gewijzigd 24-08-2026.
   Ze stonden op een rij met justify-content: center. In de lade paste dat nog,
   maar de kolom van de winkelwagenpagina is smaller dan hij lijkt: "5 jaar
   garantie" brak daar over twee regels terwijl de belofte ernaast op een regel
   bleef, en dan staan de vinkjes niet meer onder elkaar. Een belofte die je
   moet ontcijferen is geen belofte.

   Onder elkaar leest ook beter: je oog loopt langs de vinkjes naar beneden in
   plaats van heen en weer. Zo staat het ook in het ontwerp. */
.sid-som-usp {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 14px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--sid-donker);
}

/* HET VINKJE HANGT NAAST DE REGEL, DE REGEL BLIJFT GEWONE TEKST.
   Gewijzigd 24-08-2026.

   Dit was een flex-container met gap: 8px, zodat het vinkje netjes naast de
   tekst stond. Maar flex maakt van ELK stuk in die regel een eigen vak - dus
   ook van een <strong> en van de tekst ernaast. Zodra er een woord dik gedrukt
   was, stond er 8px ruimte omheen: "5 jaar garantie   op machine".

   Nu staat het vinkje er absoluut naast, en is de regel weer gewone lopende
   tekst waarin vet niets opbreekt. De 21px is 13px vinkje plus 8px ruimte;
   de 3px van boven zet het teken optisch op de eerste regel, ook als de zin
   over twee regels loopt. */
.sid-som-usp span {
	position: relative;
	display: block;
	padding-left: 21px;
}

.sid-som-usp span::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 13px;
	height: 13px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M1 6l4 4 8-8' fill='none' stroke='%232F7D32' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 13px 11px;
}


/* --- Een melding onder de koopknop ---------------------------------------- */

/**
 * Voor het antwoord van de server als toevoegen niet kan: te weinig voorraad,
 * of een uitvoering met een prijs op aanvraag. Geen herlaadde pagina, alleen
 * deze regel - dan houdt de bezoeker zijn configuratie.
 */
.sid-koop-melding {
	width: 100%;
	margin: 12px 0 0;
	padding: 10px 12px;
	box-sizing: border-box;
	background: var(--sid-lichtblauw);
	border-left: 3px solid var(--sid-blauw);
	border-radius: 5px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--sid-donker);
}


/* --- Het bolletje in de header laten opspringen --------------------------- */

.sid-cart-teller.is-gesprongen {
	animation: sid-bolletje .28s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes sid-bolletje {
	0%   { transform: scale(1); }
	60%  { transform: scale(1.45); }
	100% { transform: scale(1); }
}


/* --- Wie liever geen beweging ziet ---------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.sid-lade-paneel,
	.sid-lade-waas {
		transition: none;
	}

	.sid-cart-teller.is-gesprongen {
		animation: none;
	}
}


/* ==========================================================================
   29. DE WINKELWAGENPAGINA

   Hoort bij woocommerce/cart/cart.php en js/siderius-winkelwagen.js.
   De tabel van WooCommerce is een lijst met kaarten geworden.

   Omgezet uit het ontwerp: halve maten naar de reeks (12,5 en 13,5 -> 13),
   radius 8 en 4 -> 5, binnenmarge 22 -> 20, tussenruimtes 18/9/6 -> 15/10/5,
   schaduw .06 -> var(--sid-schaduw). De chips staan in sectie 28.
   ========================================================================== */

/* De pagina zelf. Cherry's .in-grid stopt bij 1400; die maat nemen we over,
   want de winkelwagen hoort even breed te zijn als de rest van de site. */
/**
 * DE KOP LIJNT UIT MET DE KOLOMMEN. Toegevoegd 24-08-2026.
 *
 * De winkelwagen staat in een <div class="woocommerce"> die de volle breedte
 * van het scherm pakt; .sid-wagen-pagina zet zichzelf daarbinnen op 1400 en
 * centreert. De kop stond daarbuiten en plakte dus tegen de linkerrand,
 * ongeveer 300px links van de eerste kaart.
 *
 * Dezelfde maten als .sid-wagen-pagina, dus ze schuiven samen op als die ooit
 * verandert. De onderruimte komt van .sid-paginakop (30px); daarom hier 0
 * onder, en de bovenruimte van .sid-wagen-pagina eraf - anders staat er 60.
 */
.sid-winkelkop {
	max-width: 1400px;
	margin: 0 auto;
	/* Geen ruimte boven; die komt van Cherry's .site-main - zie de regel
	   hieronder. */
	padding: 0 15px;
	box-sizing: border-box;
}

/**
 * GEEN EIGEN RUIMTE BOVEN DE KOP.
 *
 * De titel moet even ver onder de header staan als het KRUIMELPAD op de
 * productpagina: 30px. Dat is precies wat Cherry's .site-main al geeft (zie
 * sectie 0: 27px binnenruimte plus 3px speling), dus hier hoeft niets.
 *
 * Er heeft even `padding-top: 12px` gestaan, om de titel op de plek van de
 * productpagina-TITEL te zetten in plaats van die van het kruimelpad. Dat was
 * een verkeerd gelezen instructie, geen technische keuze - niet terugzetten.
 *
 * Zou je hier ooit tóch iets willen: onze eigen regel hierboven luidt
 * `.woocommerce #main.site-main { padding-top: 40px }`, met een id erin. Een
 * regel zonder `#main` verliest daarvan, ook al staat hij lager in dit
 * bestand. Zie [[thema-valkuilen]].
 */

.sid-winkelkop + .sid-wagen-pagina {
	padding-top: 0;
}

.sid-wagen-pagina {
	display: grid;
	grid-template-columns: 1fr 400px;
	align-items: start;
	gap: 30px;
	max-width: 1400px;
	margin: 0 auto;
	padding: 30px 15px 60px;
	box-sizing: border-box;
}


/* --- Een regel als kaart -------------------------------------------------- */

.sid-wagen-lijst {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.sid-wagen-regel {
	display: grid;
	grid-template-columns: 150px 1fr auto;
	align-items: start;
	gap: 20px;
	padding: 20px;
	background: #fff;
	border-radius: var(--sid-radius);
	box-shadow: var(--sid-schaduw);
}


/* --- De foto -------------------------------------------------------------- */

/**
 * HET KADER IS 4:3. Gewijzigd 28-09-2026.
 *
 * Het was 150 breed en 112 hoog, dus dat WAS het al - alleen stond de hoogte
 * als los getal in de CSS terwijl de breedte uit de kolom van .sid-wagen-regel
 * komt. Wijzigde die kolom, dan klopte de verhouding niet meer. Nu volgt de
 * hoogte de breedte en klopt hij ook op smal scherm, waar de kolom 110px is.
 *
 * overflow: hidden is nieuw en hoort bij de vullende variant hieronder: die
 * snijdt bij, en zonder deze regel loopt de foto over de afgeronde hoek heen.
 */
.sid-wagen-foto {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 4 / 3;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid var(--sid-lijn-licht);
	border-radius: 5px;
	background: #fff;
	overflow: hidden;
}

.sid-wagen-foto img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	object-fit: contain;
	display: block;
}

/* DE GEBRUIKTE MACHINES: FOTO VULT HET KADER. Toegevoegd 28-09-2026.
   Zie .sid-kaart-foto--vullend in sectie 8 en .sid-lade-plaatje--vullend in
   sectie 27; het is drie keer dezelfde afspraak. De klasse komt uit
   woocommerce/cart/cart.php. */
.sid-wagen-foto--vullend {
	padding: 0;
}

.sid-wagen-foto--vullend img {
	max-width: none;
	max-height: none;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}


/* --- Naam en soort -------------------------------------------------------- */

.sid-wagen-soort {
	font-size: 13px;
	color: var(--sid-grijs);
}

a.sid-wagen-naam,
.sid-wagen-naam {
	display: block;
	font: 700 20px/1.3 'Titillium Web', sans-serif;
	color: var(--sid-donker);
	text-decoration: none;
}

a.sid-wagen-naam:hover {
	color: var(--sid-blauw-midden);
}


/* --- Voorraad en levertijd ------------------------------------------------ */

.sid-wagen-levering {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
	font-size: 13px;
	font-weight: 700;
	color: var(--sid-groen);
}

.sid-wagen-levering.is-leeg {
	color: var(--sid-rood);
}

.sid-wagen-bolletje {
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: currentColor;
}


/* --- Bedrag en aantal ----------------------------------------------------- */

.sid-wagen-bedrag {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
	text-align: right;
}

.sid-wagen-totaal {
	font: 700 22px/1.25 'Titillium Web', sans-serif;
	color: var(--sid-donker);
}

/**
 * BIJ EEN AANBIEDING: DE OUDE PRIJS EROP, HET BEDRAG IN HET ROOD.
 *
 * 14px omdat dit blok groter is dan dat in de lade - daar staat het bedrag op
 * 18px en de oude prijs op 12. Hier is het bedrag 22, dus schuift de oude
 * prijs een stap mee.
 */
.sid-wagen-oud,
.sid-wagen-oud .woocommerce-Price-amount {
	font-size: 14px;
	font-weight: 400;
	color: var(--sid-grijs);
	text-decoration: line-through;
}

.sid-wagen-totaal--actie,
.sid-wagen-totaal--actie .woocommerce-Price-amount {
	color: var(--sid-rood);
}

/* Prijs en stukprijs zitten in een eigen blokje, zodat de gap van 12 hierboven
   er niet tussen komt en ze op hun eigen regelhoogte onder elkaar staan. */
.sid-wagen-stuk {
	font-size: 12px;
	color: var(--sid-grijs);
}


/* --- Onderrand: kortingscode en bijwerken --------------------------------- */

.sid-wagen-onderrand {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

/* Werkt het script, dan gaat een gewijzigd aantal meteen door en heeft deze
   knop geen functie meer. Zonder script blijft hij staan - dan is hij de
   enige manier waarop de wijziging de server bereikt. */
.sid-wagen.is-live .sid-wagen-bijwerken {
	display: none;
}

.sid-wagen.is-bezig .sid-wagen-lijst {
	opacity: .55;
	pointer-events: none;
	transition: opacity .15s ease;
}


/* --- Smaller dan 991px ---------------------------------------------------- */

@media (max-width: 991px) {

	.sid-wagen-pagina {
		grid-template-columns: 1fr;
	}

	.sid-wagen-regel {
		grid-template-columns: 110px 1fr;
	}

	.sid-wagen-bedrag {
		grid-column: 2;
		align-items: flex-start;
		text-align: left;
	}
}


/* ==========================================================================
   30. DE OPTELSOM OP DE WINKELWAGENPAGINA

   Hoort bij woocommerce/cart/cart-totals.php.
   De regels, de streep, het totaal, de knop en de USP-regel komen uit
   sectie 28 - dat is het gedeelde onderdeel .sid-som. Hieronder staat
   alleen wat de PAGINA extra heeft: de kaart eromheen, de kop, de
   betaalkeuze en de twee knoppen onder Afrekenen.

   Omgezet uit het ontwerp: 14,5 -> 14 · 12,5 -> 13 · 19 -> 18 · 26 -> 28 ·
   padding 24 -> 20 · gap 11 -> 10 · marges 16/8/6 -> 15/10/5 ·
   radius 8 en 6 -> 5 · #333 en #666 -> --sid-grijs · #E5E5E5 ->
   --sid-lijn-licht · schaduwtje op het schuifje eruit.
   ========================================================================== */

/* De kaart. Radius en schaduw stonden al goed in het ontwerp: dat zijn
   letterlijk --sid-radius en --sid-schaduw. */
.sid-som {
	padding: 20px;
	background: #fff;
	border-radius: var(--sid-radius);
	box-shadow: var(--sid-schaduw);
	box-sizing: border-box;
}

.sid-som-kop {
	margin: 0 0 15px;
	font: 700 20px/1.3 'Titillium Web', sans-serif;
	color: var(--sid-donker);
}

/* In de lade heeft de regellijst een marge naar de knop eronder; op de pagina
   volgt meteen de streep, dus daar is die marge te veel. */
.sid-som-regels {
	margin-bottom: 0;
}

/**
 * DE RUIMTE BOVEN DE STREEP HOORT BIJ HET TOTAAL.
 *
 * Die streep is een border-top op dit blok. Tot 28-09-2026 had het blok geen
 * marge erboven: de streep raakte de laatste bedragregel, en met een btw-regel
 * er vlak boven leest dat krap. Het viel niet op zolang er niets tussen stond,
 * maar het was ook toen al te dicht.
 *
 * Nu staat de maat hier, op een plek. Komt er wel iets tussen (het
 * kortingscodeblok, zie sectie 40), dan klappen de twee marges samen tot een
 * en blijft de afstand dezelfde. Dat is precies wat je wilt: de streep hangt
 * altijd even ver onder wat erboven staat, wat dat ook is.
 *
 * Alleen op de winkelwagenPAGINA. De lade hangt .sid-som-totaal in
 * .sid-lade-voet en niet in .sid-som, dus die blijft zoals hij was.
 */
.sid-som .sid-som-totaal {
	margin-top: 15px;
	margin-bottom: 15px;
	padding-top: 15px;
}


/* --- Hoe wil je betalen? -------------------------------------------------- */

.sid-som-vraag {
	margin-bottom: 10px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .4px;
	color: var(--sid-donker);
}

/**
 * EEN SCHAKELAAR VAN TWEE ECHTE KEUZERONDJES.
 *
 * Het ontwerp tekende een los blauw blokje dat heen en weer schuift. Dat is
 * hier het keuzerondje zelf: onzichtbaar gemaakt, maar nog steeds een
 * <input type="radio">. Zo werkt de keuze met het toetsenbord, leest een
 * schermlezer voor wat er staat, en komt het antwoord bij de server terecht -
 * bij een gewoon <div> zou daar niets van kloppen.
 */
.sid-som-keuze {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	padding: 4px;
	margin-bottom: 5px;
	background: var(--sid-lijn-licht);
	border-radius: 5px;
	box-sizing: border-box;
}

.sid-som-keuze label {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 36px;   /* 36 + 2x4 padding = 44, onze taphoogte */
	margin: 0;
	padding: 0 5px;
	border-radius: 5px;
	background: none;
	font: 700 13px 'Open Sans', sans-serif;
	line-height: 1.2;
	text-align: center;
	color: var(--sid-grijs);
	cursor: pointer;
	transition: ease .28s all;
}

/* Het rondje zelf verdwijnt, maar blijft bereikbaar voor toetsenbord en
   schermlezer - vandaar geen display:none. */
.sid-som-keuze input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.sid-som-keuze input:checked + label {
	background: var(--sid-blauw);
	color: #fff;
}

/* Springt de rand aan bij bediening met het toetsenbord. */
.sid-som-keuze input:focus-visible + label {
	outline: 2px solid var(--sid-blauw-donker);
	outline-offset: 2px;
}

/**
 * De regel onder de schakelaar. Sinds 28-09-2026 staat hier bij een
 * aanbetaling de zin over het restant, en die loopt over twee regels. Vandaar
 * een regelhoogte: zonder die regel plakken de twee zinnen op elkaar.
 */
.sid-som-voetnoot {
	margin-bottom: 15px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--sid-grijs);
}

/* De zin onder de afrekenknop bij een aanbetaling: wat je nu betaalt en wat
   er op factuur gaat. Staat direct onder de knop, dus de 10px marge die de
   knop eronder heeft wordt hier opgeheven en er zelf bijgezet.
   Toegevoegd 24-08-2026. */
/* .sid-som-rest stond hier: de zin onder de afrekenknop over het restant.
   Die zin staat sinds 28-09-2026 boven de knop, in .sid-som-voetnoot
   hierboven, en deze klasse komt in geen enkel sjabloon meer voor. Weg dus,
   want dode opmaak laat de volgende lezer zoeken naar iets wat niet bestaat. */


/* --- De knoppen ----------------------------------------------------------- */

/* De blauwe knop is .sid-som-knop uit sectie 28 - zelfde knop als in de lade.
   Hieronder alleen de twee die de pagina extra heeft. */

/**
 * Het lege haakje van WooCommerce.
 *
 * .wc-proceed-to-checkout is de plek waar plugins hun eigen knop in hangen -
 * een directe iDEAL-knop bijvoorbeeld. Zolang daar niets in zit mag hij geen
 * ruimte innemen; :empty helpt niet, want er staat witruimte in.
 */
.sid-som .wc-proceed-to-checkout {
	margin: 0;
	padding: 0;
}

/**
 * DE DRIE KNOPPEN, VAN HARD NAAR ZACHT.
 *
 * Afrekenen is gevuld blauw, offerte een blauwe rand, de app-knop een bleek
 * vlak. Die volgorde is de bedoeling: hij loopt gelijk met wat je wilt dat
 * mensen doen. Ze delen maat (44 hoog), radius (5) en letterafstand (.4), dus
 * ze horen zichtbaar bij elkaar - alleen het volume verschilt.
 *
 * HIER STOND EERST .sid-knop-alt, de donkere randknop van het mobiele menu.
 * Hergebruik leek slim: een randknop bestond al. Maar die knop is ontworpen
 * voor een donkerblauwe menubalk, niet voor een witte kaart naast een felle
 * groene knop - daar las hij als zwart. Vervangen 21-08-2026. Het mobiele
 * menu gebruikt .sid-knop-alt nog gewoon; die is niet veranderd.
 */
.sid-som-offerte,
.sid-som-app {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 44px;
	padding: 0 10px;
	margin-bottom: 10px;
	border-radius: 5px;
	box-sizing: border-box;
	font: 700 14px 'Open Sans', sans-serif;
	text-transform: uppercase;
	letter-spacing: .4px;
	cursor: pointer;
	transition: ease .3s all;
}

.sid-som-app {
	margin-bottom: 0;
}

/* --- Offerte van deze wagen ----------------------------------------------- */

.sid-som-offerte {
	border: 2px solid var(--sid-blauw);
	background: #fff;
	color: var(--sid-blauw-midden);
}

.sid-som-offerte:hover {
	background: var(--sid-blauw-donker);
	border-color: var(--sid-blauw-donker);
	color: #fff;
}

/* --- App direct met onze adviseurs ---------------------------------------- */

.sid-som-app {
	border: 0;
	background: var(--sid-whatsapp-vlak);
	color: var(--sid-donker);
}

.sid-som-app:hover {
	background: var(--sid-whatsapp-hover);
}

/**
 * Cherry onderstreept elke link bij hover, en hun button:hover zet een
 * background-SHORTHAND neer die onze kleur zou wegvagen. Daarom staan de
 * kleuren hierboven ook in de hoverstand, en staat text-decoration hier voor
 * alle drie de standen uit.
 */
.sid-som-offerte,
.sid-som-offerte:hover,
.sid-som-offerte:focus,
.sid-som-app,
.sid-som-app:hover,
.sid-som-app:focus {
	text-decoration: none;
}

.sid-som-app:focus {
	color: var(--sid-donker);
}

.sid-som-app svg {
	flex: none;
	width: 24px;
	height: 24px;
}

.sid-som-usp {
	margin-top: 15px;
}



/* ----------------------------------------------------------------------------
   30. DE BELOFTES - DRIE BLOKKEN UIT DEZELFDE VELDEN (24-08-2026)

   De balk bovenaan elke pagina, de kaart onder het blok Overzicht, en de
   blauwe hulpkaart daaronder. Ingevuld via WooCommerce -> Webshop-instellingen;
   getekend door inc/siderius-webshop/beloftes.php.

   Het vinkje en de regelopmaak staan NIET hier maar bij .sid-som-usp (sectie
   28): de lade en de kaart gebruiken hetzelfde rijtje, dus dat hoort op een
   plek te staan.
   ---------------------------------------------------------------------------- */

/* --- De balk bovenaan ---------------------------------------------------- */

/**
 * Onder het donkere menu, boven de kruimelpaden. Wit, met een haarlijn eronder
 * zodat hij van de pagina-achtergrond scheidt zonder een tweede menubalk te
 * worden.
 */
.sid-topbalk {
	background: #fff;
	border-bottom: 1px solid var(--sid-lijn-licht);
}

/**
 * De maat van de inhoud volgt Cherry's .in-grid: dezelfde 1400px en dezelfde
 * zijmarge, zodat de regels uitlijnen met alles eronder.
 */
.sid-topbalk-binnen {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px 30px;
	max-width: 1400px;
	margin: 0 auto;
	padding: 10px 20px;
	box-sizing: border-box;
	font-size: 14px;
	line-height: 1.4;
	color: var(--sid-donker);
}

/* Zelfde reden als bij .sid-som-usp span: geen flex binnen de regel, anders
   krijgt elk dikgedrukt woord ruimte om zich heen. */
.sid-topbalk-binnen span {
	position: relative;
	display: block;
	padding-left: 22px;
}

/* Hetzelfde groene vinkje als bij de beloftes. Een tekening in de CSS en dus
   met de kleur uitgeschreven; zie de uitleg bij .sid-som-usp span::before. */
.sid-topbalk-binnen span::before {
	content: "";
	position: absolute;
	left: 0;
	width: 14px;
	height: 14px;
	margin-top: 3px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M1 6l4 4 8-8' fill='none' stroke='%232F7D32' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 14px 12px;
}

/**
 * Op een smal scherm passen er geen drie naast elkaar. Onder elkaar en links
 * uitgelijnd leest beter dan drie afgebroken kolommen.
 */
@media (max-width: 800px) {

	.sid-topbalk-binnen {
		flex-direction: column;
		justify-content: flex-start;
		gap: 6px;
		font-size: 13px;
	}
}


/* --- De kaart met beloftes ------------------------------------------------ */

/**
 * Een eigen kaart onder het blok Overzicht, met dezelfde maten als dat blok:
 * 20px binnenruimte, dezelfde radius en dezelfde schaduw. Zo leest de kolom
 * als een stapel van hetzelfde soort kaarten.
 *
 * De 15px erboven is de ruimte tussen twee kaarten in die kolom.
 */
.sid-beloftekaart {
	margin-top: 15px;
	padding: 20px;
	background: #fff;
	border-radius: var(--sid-radius);
	box-shadow: var(--sid-schaduw);
	box-sizing: border-box;
}

/* In de kaart staat het rijtje bovenaan; de marge die het in de lade naar de
   knop erboven heeft is hier niet nodig. */
.sid-beloftekaart .sid-som-usp {
	margin-top: 0;
	font-size: 14px;
}


/* --- De blauwe hulpkaart -------------------------------------------------- */

/**
 * Lichtblauw vlak met het koptelefoontje. Geen rand: hetzelfde
 * --sid-lichtblauw als de chips, en dat tekent zich tegen de grijze pagina al
 * genoeg af. Dezelfde afweging als bij .sid-keuze; zie sectie 28.
 */
.sid-hulpkaart {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-top: 15px;
	padding: 15px 20px;
	background: var(--sid-lichtblauw);
	border-radius: var(--sid-radius);
	box-sizing: border-box;
}

/* Het rondje om het teken: wit op het lichtblauwe vlak, zodat het icoon een
   eigen plek krijgt en niet in de achtergrond wegvalt. */
.sid-hulp-teken {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #fff;
	color: var(--sid-blauw-midden);
}

.sid-hulp-tekst {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--sid-donker);
}

/* Een link in de kaart - in de praktijk het telefoonnummer, gemaakt met de
   linkknop van de tekstverwerker en tel:0850402130 als adres. Dik, in de
   tekstkleur, en pas blauw als je erover gaat: een link die al blauw is trekt
   de zin uit elkaar, en door het vet is het nummer toch al het zwaartepunt.

   Op de klasse hoeft niet te worden gemikt - er staat maar een soort link in
   deze kaart, en zo werkt hij ook als iemand er een tweede bij zet. */
.sid-hulp-tekst a,
.sid-hulp-tekst a:visited {
	font-weight: 700;
	color: var(--sid-donker);
	text-decoration: none;
}

.sid-hulp-tekst a:hover,
.sid-hulp-tekst a:focus {
	color: var(--sid-blauw-midden);
}


/* === SIDERIUS WEBSHOP - einde === */

/* --- De productbeschrijving ----------------------------------------------- */

/**
 * Het element "Product description" uit de contentcontainer - zie
 * inc/siderius-webshop/elementen-product.php.
 *
 * DE KOPPEN ZIJN ECHTE H2/H3, KLEIN GEMAAKT BINNEN DIT BLOK. Cherry's
 * algemene kopmaten (h2 48px, h3 40px) zijn paginakoppen; deze regels zijn
 * specifieker en winnen binnen het element. Voor Google blijft het gewoon een
 * h2 en een h3 - die leest de tag, niet de lettergrootte.
 *
 * Maten naar het ontwerp van 26-08-2026, teruggelegd op de themaschaal:
 * 24->20, 18->15, 6->5, 4->5, 14,5->15, lijst-gaten 8x24 -> 10x20.
 */
.sid-productbeschrijving .sid-pb-kop {
	margin: 0 0 15px;
	font: 700 26px/1.3 'Titillium Web', sans-serif;
	color: var(--sid-donker);
}

/* De blauwe streep onder de kop - kleiner dan die onder de paginatitel
   (90x5), passend bij de kleinere kop. */
.sid-productbeschrijving .sid-pb-kop::after {
	content: '';
	display: block;
	width: 70px;
	height: 4px;
	margin-top: 5px;
	border-radius: 3px;
	background: var(--sid-blauw);
}

.sid-productbeschrijving .sid-pb-inhoud {
	font-size: 15px;
	line-height: 1.7;
	color: var(--sid-donker);
}

.sid-productbeschrijving .sid-pb-inhoud p {
	margin: 0 0 15px;
}

/* De tussenkopjes. h2 vangen we ook af: hoort de redacteur niet te
   gebruiken (de kop hierboven is al de h2), maar als het gebeurt stort er
   niets in. */
.sid-productbeschrijving .sid-pb-inhoud h2,
.sid-productbeschrijving .sid-pb-inhoud h3 {
	margin: 20px 0 5px;
	font: 700 18px/1.35 'Titillium Web', sans-serif;
	color: var(--sid-donker);
}

/**
 * ELKE OPSOMMING WORDT DE BLAUWE PIJLTJESLIJST - standaard in EEN kolom.
 * Twee kolommen kies je per lijst via het Formats-menu van de
 * tekstverwerker ("Pijltjeslijst — twee kolommen"); zie
 * siderius_editor_lijstkeuze() in elementen-product.php. Op een telefoon is
 * het altijd een kolom, wat je ook koos.
 */
.sid-productbeschrijving .sid-pb-inhoud ul {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px 20px;
	margin: 0 0 15px;
	padding: 0;
	list-style: none;
}

.sid-productbeschrijving .sid-pb-inhoud ul.sid-twee-kolommen {
	grid-template-columns: 1fr 1fr;
}

.sid-productbeschrijving .sid-pb-inhoud ul li {
	position: relative;
	margin: 0;
	padding-left: 24px;
	font-size: 15px;
	line-height: 1.5;
}

.sid-productbeschrijving .sid-pb-inhoud ul li::before {
	content: '\279C';   /* het pijltje */
	position: absolute;
	left: 0;
	top: 0;
	color: var(--sid-blauw);
	font-weight: 700;
}

@media (max-width: 768px) {

	.sid-productbeschrijving .sid-pb-inhoud ul.sid-twee-kolommen {
		grid-template-columns: 1fr;
	}
}

/* --- De productkaarten in de zijkolom ------------------------------------- */

/**
 * Het element "Product kaarten (zijkolom)" - zie
 * inc/siderius-webshop/productkaarten.php. Maten uit het ontwerp van
 * 27-08-2026, teruggelegd op de themaschaal: 22/24 -> 20, 14/14,5 -> 15,
 * 11 -> 10, 7 -> 5. De kleuren zijn de themakleuren; het ontwerp had eigen
 * tinten (#E1F1FA, #F0F9FE) die niet in het palet bestaan.
 */
.sid-productkaarten {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sid-pk-kaart {
	background: #fff;
	border-radius: var(--sid-radius);
	box-shadow: var(--sid-schaduw);
	padding: 20px;
}

/* De vestigingenkaart: licht vlak, geen gloed - zoals in het ontwerp. */
.sid-pk-kaart--vlak {
	background: var(--sid-lichtblauw);
	box-shadow: none;
}

.sid-productkaarten .sid-pk-titel {
	margin: 0 0 12px;
	font: 700 18px/1.3 'Titillium Web', sans-serif;
	color: var(--sid-donker);
}

/* --- de vraagkaart --- */

.sid-pk-vraag {
	display: flex;
	align-items: center;
	gap: 15px;
}

.sid-pk-icoon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--sid-lichtblauw);
	color: var(--sid-blauw-midden);
}

/* De tekst komt uit een tekstverwerkertje: elke regel een alinea, 5px
   ertussen. Links kleuren blauw; een tel:-link laat je er gewoon uitzien
   zoals je hem typt (vet = vet). */
.sid-pk-links {
	font-size: 15px;
	line-height: 1.5;
	color: var(--sid-donker);
}

.sid-pk-links p {
	margin: 0 0 5px;
}

.sid-pk-links p:last-child {
	margin-bottom: 0;
}

.sid-pk-links a {
	color: var(--sid-blauw-midden);
}

/* --- de vestigingenkaart --- */

.sid-pk-vestigingen {
	display: flex;
	align-items: center;
	gap: 15px;
}

.sid-pk-vest-tekst {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 5px;
	font-size: 15px;
	color: var(--sid-donker);
}

.sid-pk-regel {
	display: flex;
	align-items: center;
	gap: 10px;
}

/**
 * flex + display:block op de tekening: een svg staat anders op de
 * tekstbasislijn en hangt dan een paar pixels te hoog naast zijn regel.
 */
.sid-pk-regel-icoon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	color: var(--sid-blauw);
}

.sid-pk-regel-icoon svg {
	display: block;
}

/* De regels komen uit een tekstverwerkertje; de p eromheen mag geen eigen
   ruimte meenemen. Links kleuren als overal. */
.sid-pk-regel-tekst p {
	margin: 0;
	display: inline;
}

.sid-pk-regel-tekst a {
	color: var(--sid-blauw-midden);
}

/* Elke link in deze kaart krijgt vanzelf het pijltje erachter - dat hoef je
   dus niet te typen. */
.sid-pk-regel-tekst a::after {
	content: ' \2192';
}

.sid-pk-vest-kaartje {
	flex: none;
	width: 120px;
}

.sid-pk-vest-kaartje img {
	width: 100%;
	height: auto;
	border-radius: 5px;
	display: block;
}

/* --- koop zonder zorgen --- */

.sid-pk-vinkjes {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	color: var(--sid-donker);
}

.sid-pk-vinkjes li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.sid-pk-vinkjes svg {
	flex: none;
	margin-top: 3px;
	color: var(--sid-groen);
}

/* De regels komen uit een tekstverwerkertje; de p eromheen mag geen eigen
   ruimte meenemen. */
.sid-pk-vinkjes li p {
	margin: 0;
	display: inline;
}

/* --- De specificaties ------------------------------------------------------ */

/**
 * Het element "Product specifications" - zie
 * inc/siderius-webshop/specificaties.php. Maten uit het ontwerp van
 * 27-08-2026, teruggelegd op de themaschaal: 13x22 -> 12 20, kolomgat 36 ->
 * 30, gloed .06 -> de themagloed. De zebra is --sid-vlak, het lichte vlak
 * dat het palet al heeft (het ontwerp had een eigen blauwtint #F5FAFD;
 * gekozen voor het bestaande palet, 27-08-2026).
 */
.sid-productspecs .sid-specs-kop {
	margin: 0 0 15px;
	font: 700 26px/1.3 'Titillium Web', sans-serif;
	color: var(--sid-donker);
}

.sid-productspecs .sid-specs-kop::after {
	content: '';
	display: block;
	width: 70px;
	height: 4px;
	margin-top: 5px;
	border-radius: 3px;
	background: var(--sid-blauw);
}

.sid-productspecs .sid-specs-bron {
	margin: -5px 0 15px;
	font-size: 13px;
	color: var(--sid-grijs);
}

/* --- de inklapper --- */

.sid-specs-wrap {
	position: relative;
}

.sid-specs-wrap.is-dicht {
	max-height: 475px;
	overflow: hidden;
}

/* De vervaging onderaan, alleen zolang hij dicht is. Zelfde kleur als de
   pagina-achtergrond, anders wordt het een grijze balk op wit. */
.sid-specs-waas {
	display: none;
}

.sid-specs-wrap.is-dicht .sid-specs-waas {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 120px;
	background: linear-gradient(to bottom, rgba(243, 243, 243, 0), var(--sid-pagina));
	pointer-events: none;
}

.sid-productspecs .sid-specs-meer {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 15px;
	padding: 0;
	border: 0;
	background: none;
	font: 700 15px 'Open Sans', sans-serif;
	/* Cherry zet elke button in hoofdletters en geeft hem een vlak; dit is
	   een tekstlink, geen knop. */
	text-transform: none;
	letter-spacing: 0;
	color: var(--sid-blauw-midden);
	cursor: pointer;
}

.sid-productspecs .sid-specs-meer:hover {
	text-decoration: underline;
	background: none;
	color: var(--sid-blauw-midden);
}

.sid-specs-pijl {
	display: flex;
	transition: ease .3s all;
}

.sid-specs-meer.is-open .sid-specs-pijl {
	transform: rotate(180deg);
}

/* --- de kolommen en de kaarten --- */

/* Twee kolommen, ongeacht de breedte van de kolom waar het blok in staat -
   keuze van Tomas, 27-08-2026. Onder 768px schermbreedte wordt het er een;
   dat staat onderaan deze sectie.

   WAT JE DAARVOOR INLEVERT: een specificatieregel is 1fr 1fr met 20px
   binnenmarge en 30px ertussen, dus per kaart van breedte W hou je (W-70)/2
   over voor de waarde. In een kolom van 33% (~427px) zijn de kaarten 198
   breed en blijft er 64px per waarde over - daar breekt bijna alles. */
.sid-specs-kolommen {
	columns: 2;
	column-gap: 30px;
}

.sid-spec-groep {
	break-inside: avoid;
	margin: 0 0 20px;
	background: #fff;
	border-radius: var(--sid-radius);
	box-shadow: var(--sid-schaduw);
	overflow: hidden;
}

.sid-productspecs .sid-spec-groep-kop {
	margin: 0;
	padding: 12px 20px;
	background: var(--sid-donker);
	color: #fff;
	font: 700 16px/1.3 'Titillium Web', sans-serif;
}

.sid-spec-rij {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 30px;
	align-items: center;
	padding: 12px 20px;
	font-size: 14px;
}

/* De zebra: om en om het lichte vlak, beginnend met de eerste regel gekleurd
   zoals het ontwerp. nth-of-type telt alleen de rijen mee, niet de kop
   erboven (die is een ander soort element). */
.sid-spec-rij:nth-of-type(odd) {
	background: var(--sid-vlak);
}

.sid-spec-naam {
	color: var(--sid-grijs);
}

.sid-spec-waarde {
	color: var(--sid-donker);
	font-weight: 700;
}

@media (max-width: 768px) {

	.sid-specs-kolommen {
		columns: 1;
	}
}

/* --- De downloads ---------------------------------------------------------- */

/**
 * Het element "Product downloads" - zie inc/siderius-webshop/downloads.php.
 * Ontwerp 27-08-2026 op de themaschaal: kop 24 -> 26, padding 18/20 -> 20,
 * gap 14 -> 15, radius 4 -> 5, gloed .06/.12 -> de themagloed, #E1F1FA ->
 * --sid-lichtblauw, #8a8a8a -> --sid-grijs (dat haalde maar 3,1:1 op wit).
 */
.sid-productdownloads .sid-dl-kop {
	margin: 0 0 15px;
	font: 700 26px/1.3 'Titillium Web', sans-serif;
	color: var(--sid-donker);
}

.sid-productdownloads .sid-dl-kop::after {
	content: '';
	display: block;
	width: 70px;
	height: 4px;
	margin-top: 5px;
	border-radius: 3px;
	background: var(--sid-blauw);
}

/* auto-fill in plaats van drie vaste kolommen: het rooster past zich aan de
   kolom aan, dus hetzelfde blok werkt breed en smal. min(260px, 100%) is de
   ondergrens: zonder die min blijft een kaart 260 breed en steekt hij uit een
   kolom die smaller is. */
.sid-dl-rooster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
	gap: 20px;
}

/* De hele kaart is een link; Cherry's a-regel is een elementselector, dus
   een klasse wint en neemt kleur en onderstreping terug. */
.sid-dl-kaart,
.sid-dl-kaart:hover,
.sid-dl-kaart:focus {
	color: var(--sid-donker);
	text-decoration: none;
}

.sid-dl-kaart {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 20px;
	background: #fff;
	border-radius: var(--sid-radius);
	box-shadow: var(--sid-schaduw);
	transition: ease .3s all;
}

.sid-dl-kaart:hover {
	box-shadow: var(--sid-schaduw-hover);
}

/* 40 bij 48 is de verhouding van een vel papier. De tekening erin volgt via
   currentColor de kleur. */
.sid-dl-icoon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 48px;
	border-radius: 5px;
	background: var(--sid-lichtblauw);
	color: var(--sid-blauw-midden);
}

/* De tekening heeft geen vaste maat meer, die staat hier. */
.sid-dl-icoon .sid-pdf-icoon {
	width: 22px;
	height: 22px;
}

/* De titel houdt zijn kleur onder de muis: alleen de gloed verandert. */
/* overflow-wrap: een bestandsnaam zonder spaties heeft geen breekpunt en
   steekt anders uit de kaart. */
.sid-dl-kaart .sid-dl-titel {
	display: block;
	font: 700 15px/1.3 'Open Sans', sans-serif;
	color: var(--sid-blauw-midden);
	overflow-wrap: anywhere;
}

/* .sid-dl-soort is weg: de regel "PDF-bestand" onder de titel zei hetzelfde
   als het tekentje ernaast. */

/* --- Het afrekenscherm ----------------------------------------------------- */

/**
 * Naar het ontwerp uit Claude Design (checkout-1d-stap1.html), teruggelegd op
 * de themaschaal: gap en marge 28 -> 30, H3 21 -> 20, uitleg en knoptekst
 * 14,5 -> 14, indicatorlabel 14,5 -> 15, Wijzigen 13,5 -> 13, veldrand 1,5 ->
 * 1px, cirkel 27 -> 28. Kleuren: #8a8a8a -> --sid-grijs, #DEDEDE -> --sid-lijn,
 * #EDEDED -> --sid-lijn-licht. Gemeten uit het ontwerp, niet geraden.
 *
 * ÉÉN PAGINA MET VIJF BLOKKEN. Het ontwerp gaat uit van vijf webadressen; zie
 * woocommerce/checkout/form-checkout.php voor waarom dat later kan.
 */
.sid-afrekenen {
	max-width: 1400px;
	margin: 0 auto;
	padding: 30px 15px;
	box-sizing: border-box;
}

.sid-afreken-raster {
	display: grid;
	/**
	 * DE BESTELKAART IS 400 BREED, NET ALS HET OVERZICHT IN DE WINKELWAGEN.
	 *
	 * Twee redenen, en de tweede is de belangrijkste.
	 *
	 * Op 320 braken de chips van de uitvoering over drie regels; op 400 passen
	 * ze zoals in de winkelwagen.
	 *
	 * En: je komt hier rechtstreeks van de winkelwagen. Staat dezelfde kaart
	 * daar 400 breed en hier 320, dan is het strikt genomen dezelfde informatie
	 * maar moet je oog opnieuw zoeken waar alles staat. Gelijke maat maakt het
	 * herkenbaar in plaats van nieuw.
	 *
	 * DE MIDDELSTE KOLOM GEEFT DIE 80 PIXELS, DE LINKER NIET. De tijdlijn staat
	 * vast op 250 en de tussenruimte op 30, dus het formulier verschuift niet
	 * naar links - het wordt alleen minder breed naar rechts. Dat was ook de
	 * bedoeling: een stap die je in één oogopslag overziet leest rustiger.
	 */
	grid-template-columns: 250px minmax(0, 1fr) 400px;
	align-items: start;
	gap: 30px;
}

.sid-afreken-midden {
	min-width: 0;
}

/* De balk en de kaart lopen mee met het scrollen. De afstand tot de bovenkant
   is de hoogte van de vaste header; verandert die, dan verandert dit mee. */
.sid-afreken-balk,
.sid-afreken-rechts {
	position: sticky;
	top: 120px;
	align-self: start;
	min-width: 0;
}

@media (max-width: 1100px) {

	.sid-afreken-raster {
		grid-template-columns: minmax(0, 1fr);
	}

	.sid-afreken-balk,
	.sid-afreken-rechts {
		position: static;
	}
}

/* ==========================================================================
   DE STAPPENBALK
   ========================================================================== */

.sid-stappenbalk {
	display: flex;
	flex-direction: column;
	padding-top: 5px;
}

.sid-stapregel {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	column-gap: 15px;
}

.sid-stapmerk {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/**
 * DRIE STANDEN, DRIE VORMEN.
 *
 *   nog   wit met een grijze rand
 *   nu    groter, een volle stip met een blauwe waas eromheen
 *   af    vol blauw met een wit vinkje
 *
 * Het vinkje staat altijd in de opbouw en wordt hier zichtbaar gemaakt; zie
 * inc/siderius-webshop/afreken-stappen.php.
 */
.sid-stapbol {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	box-sizing: border-box;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--sid-lijn);
	transition: ease .3s all;
}

.sid-stapbol svg {
	display: none;
}

/* De stap waar je bent staat groter: hij is de enige waar je nu iets moet.

   GEEN MARGE OM HEM TE VERSCHUIVEN. De kolom eromheen centreert met flex, dus
   een grotere bol staat vanzelf goed; een negatieve marge duwt hem dan juist
   naast de lijn. Dat was te zien in het portaal, 23-09-2026. */
.sid-stapregel.is-nu .sid-stapbol {
	width: 26px;
	height: 26px;
	background: var(--sid-blauw);
	border: 5px solid #fff;
	box-shadow: 0 0 0 4px rgba(0, 158, 227, .18);
}

.sid-stapregel.is-af .sid-stapbol {
	background: var(--sid-blauw);
	border: none;
}

.sid-stapregel.is-af .sid-stapbol svg {
	display: block;
}

.sid-staplijn {
	flex: 1;
	width: 3px;
	min-height: 26px;
	background: var(--sid-lijn);
}

.sid-stapregel.is-af .sid-staplijn {
	background: var(--sid-blauw);
}

.sid-stapinhoud {
	padding-bottom: 22px;
}

.sid-stapregel.is-laatste .sid-stapinhoud {
	padding-bottom: 0;
}

a.sid-stapnaam {
	display: block;
	font: 700 15px/22px 'Open Sans', sans-serif;
	color: var(--sid-grijs);
	text-decoration: none;
}

.sid-stapregel.is-nu a.sid-stapnaam {
	color: var(--sid-donker);
}

.sid-stapregel.is-af a.sid-stapnaam {
	color: var(--sid-blauw-midden);
}

.sid-staprecap {
	margin-top: 5px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--sid-grijs);
}

a.sid-stapwijzig {
	display: inline-block;
	margin-top: 7px;
	font: 700 13px/1 'Open Sans', sans-serif;
	color: var(--sid-blauw-midden);
	text-decoration: underline;
}

/* ==========================================================================
   DE KAARTEN IN HET MIDDEN
   ========================================================================== */

.sid-afreken-kaart {
	background: #fff;
	border-radius: var(--sid-radius);
	box-shadow: var(--sid-schaduw);
	padding: 25px 30px 30px;
}

/* De kop met het cijfer in een rondje. */
.sid-kaartkop {
	display: flex;
	align-items: center;
	gap: 15px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--sid-lijn-licht);
}

.sid-kaartcijfer {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	box-sizing: border-box;
	border: 2px solid var(--sid-blauw);
	border-radius: 50%;
	font: 700 14px/1 'Open Sans', sans-serif;
	color: var(--sid-blauw);
}

.sid-kaarttitel {
	margin: 0;
	font: 700 17px/1.3 'Titillium Web', sans-serif;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sid-donker);
}

/* ==========================================================================
   DE VELDGROEPEN
   ========================================================================== */

.sid-veldgroep + .sid-veldgroep {
	margin-top: 30px;
	padding-top: 30px;
	border-top: 1px solid var(--sid-lijn-licht);
}

.sid-veldgroep h3 {
	margin: 25px 0 5px;
	font: 700 20px/1.3 'Titillium Web', sans-serif;
	color: var(--sid-donker);
}

.sid-veldgroep + .sid-veldgroep h3 {
	margin-top: 0;
}

.sid-groep-uitleg {
	margin: 0 0 20px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--sid-grijs);
	text-wrap: pretty;
}

/**
 * HET VELDENRASTER STAAT OP ÉÉN NIVEAU, NIET OP TWEE.
 *
 * De omhulsels van WooCommerce (…__field-wrapper) zitten in stap 1 óm de
 * veldgroepen heen; zet je daar ook een raster op, dan wordt elke kolom nog
 * eens gehalveerd en houd je velden van 59px over. Het raster hoort dus op
 * .sid-velden, en alleen in de blokken die nog niet gebouwd zijn op het
 * omhulsel zelf - daar staan de velden er los in.
 */
.sid-velden,
.sid-nog-te-doen .woocommerce-billing-fields__field-wrapper,
.sid-nog-te-doen .woocommerce-additional-fields__field-wrapper,
.sid-afrekenen .woocommerce-shipping-fields__field-wrapper,
.sid-afrekenen .woocommerce-additional-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	/* Het ritme van het offertevenster: 15 tussen de velden, 5 tussen een
	   opschrift en zijn eigen veld. Zo lezen label en veld als een paar. Het
	   ontwerp had 18 en 8; die maten staan niet op de schaal en lopen uit de
	   pas met het formulier dat al op de site staat. */
	gap: 15px 20px;
	align-items: start;
}

/**
 * CHERRY'S KOLOMKLASSEN UITSCHAKELEN. .col-1 en .col-2 zijn in style.css het
 * twaalfdelige raster van het thema (een twaalfde, twee twaalfde). WooCommerce
 * gebruikt dezelfde namen voor de twee helften van het afrekenformulier, en
 * dan wordt de kaart 355px in plaats van 740. Gemeten in de pagina.
 */
/**
 * GEEN GAP TUSSEN DE KAARTEN, MAAR EEN MARGE OP DE KAARTEN ZELF.
 *
 * Met gap krijgt élk flex-item zijn ruimte, ook een leeg omhulsel van
 * WooCommerce of een verborgen blokje van nul pixels hoog. Daar zijn er in dit
 * formulier meerdere van, en dan begint de zichtbare kaart 30 of 60 pixels
 * lager dan de bestelkaart ernaast. Een marge op de kaart zelf heeft dat
 * probleem niet: een kaart die dicht staat is display:none en heeft dus ook
 * geen marge.
 *
 * Zoek dus niet naar wélk element de ruimte veroorzaakt - haal de gap weg.
 */
.sid-afreken-midden .col2-set,
.sid-afreken-midden .col2-set .col-1,
.sid-afreken-midden .col2-set .col-2 {
	display: block;
	width: 100%;
	float: none;
}

.sid-afreken-midden .sid-afreken-kaart {
	margin-bottom: 30px;
}

.sid-afreken-midden .sid-afreken-kaart:last-child {
	margin-bottom: 0;
}

/**
 * DE OMHULSELS VAN WOOCOMMERCE TELLEN NIET MEE IN DE OPMAAK.
 *
 * .woocommerce-billing-fields en vrienden zijn alleen groepering; de kaarten
 * erin zijn wat je ziet. Laat je ze als blok staan, dan blijven ze als leeg
 * flex-item over zodra hun kaarten dichtgeklapt zijn - en krijgen ze alsnog
 * hun 30px tussenruimte. Stap 3 begon daardoor lager dan de bestelkaart
 * ernaast. Met display:contents verdwijnen ze uit de opmaak en zijn de kaarten
 * zelf de flex-items; een verborgen kaart neemt dan geen ruimte meer in.
 */
.sid-afreken-midden .woocommerce-billing-fields,
.sid-afreken-midden .woocommerce-shipping-fields,
.sid-afreken-midden .woocommerce-additional-fields,
.sid-afreken-midden .woocommerce-account-fields {
	display: contents;
}

/**
 * TWEE ONZICHTBARE FLEX-ITEMS ERUIT.
 *
 * Een element van nul pixels hoog telt in een flex-container met gap alsnog
 * als item, en krijgt dus zijn 30px. Twee daarvan zetten de eerste kaart 60px
 * lager dan de bestelkaart ernaast:
 *
 *   .col2-set                    een clearfix-::before van het thema
 *   <wc-order-attribution-inputs> WooCommerce' verborgen herkomstvelden
 *
 * De verborgen invoervelden blijven gewoon meegestuurd; display:none op hun
 * omhulsel verandert daar niets aan. Gemeten in de pagina op 28-08-2026.
 */
.sid-afreken-midden .col2-set::before,
.sid-afreken-midden .col2-set::after,
.sid-afreken-midden .col-1::before,
.sid-afreken-midden .col-1::after {
	display: none;
}

.sid-afreken-midden wc-order-attribution-inputs {
	display: none;
}

/* ==========================================================================
   DE VELDEN
   ========================================================================== */

/**
 * DRIE KLASSEN NODIG. woocommerce-layout.css zet op .form-row-first een float
 * met width: 47% - twee klassen plus een element. Met .sid-afreken-raster erbij
 * is deze regel zwaarder en staat het vast. Zie [[thema-valkuilen]].
 */
.sid-afrekenen .sid-afreken-raster .form-row {
	width: auto;
	float: none;
	margin: 0;
	padding: 0;
	grid-column: span 2;
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.sid-afrekenen .sid-afreken-raster .form-row-first,
.sid-afrekenen .sid-afreken-raster .form-row-last {
	width: auto;
	float: none;
	grid-column: span 1;
}

/* De omhulling van WooCommerce is een <span> en dus inline; die krimpt om zijn
   inhoud heen en dan klopt geen enkele veldbreedte. */
.sid-afrekenen .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}

.sid-afrekenen .form-row label {
	display: block;
	margin: 0;
	font: 700 13px/1.4 'Open Sans', sans-serif;
	color: var(--sid-donker);
}

.sid-afrekenen .form-row .required {
	color: var(--sid-rood);
	text-decoration: none;
}

.sid-afrekenen .form-row .optional {
	font-weight: 400;
	color: var(--sid-grijs);
}

/**
 * DRIE KLASSEN, ANDERS VERLIEST DE TEXTAREA.
 *
 * woocommerce.css zet op .woocommerce form .form-row .input-text een rand in
 * var(--wc-form-border-color) - rgba(32,7,7,.8), bijna zwart. Dat is drie
 * klassen en een element. Mijn regel voor de invoervelden had toevallig
 * hetzelfde gewicht en won op laadvolgorde; die voor de textarea was één
 * klasse lichter en verloor, dus dat vak had als enige een donkere rand.
 * Met .sid-afreken-raster erbij wegen ze allemaal zwaarder dan die van
 * WooCommerce. Zie [[thema-valkuilen]].
 */
.sid-afrekenen .sid-afreken-raster .form-row input.input-text,
.sid-afrekenen .sid-afreken-raster .form-row textarea,
.sid-afrekenen .sid-afreken-raster .form-row select {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	height: 46px;
	padding: 0 15px;
	border: 1px solid var(--sid-lijn);
	border-radius: 5px;
	background: #fff;
	font: 400 15px/1.4 'Open Sans', sans-serif;
	color: var(--sid-donker);
	outline: none;
	transition: ease .2s all;
}

.sid-afrekenen .sid-afreken-raster .form-row textarea {
	height: auto;
	min-height: 90px;
	padding: 12px 14px;
	resize: vertical;
}

.sid-afrekenen .sid-afreken-raster .form-row input.input-text:focus,
.sid-afrekenen .sid-afreken-raster .form-row textarea:focus {
	border-color: var(--sid-blauw);
	box-shadow: 0 0 0 3px var(--sid-lichtblauw);
}

/**
 * DE UITLEG ONDER EEN VELD IS EEN GRIJZE REGEL, GEEN BALLON.
 *
 * woocommerce.css maakt er een blauwe tooltip met een pijltje van:
 * .woocommerce form .form-row .woocommerce-input-wrapper .description
 * - vier klassen en een element. Onze regel heeft er dus vijf klassen voor
 * nodig om te winnen. Zie [[thema-valkuilen]].
 */
.sid-afrekenen .sid-afreken-raster .form-row .woocommerce-input-wrapper .description,
.sid-afrekenen .form-row .description {
	position: static;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-size: 13px;
	line-height: 1.5;
	color: var(--sid-grijs);
}

.sid-afrekenen .sid-afreken-raster .form-row .woocommerce-input-wrapper .description::before,
.sid-afrekenen .sid-afreken-raster .form-row .woocommerce-input-wrapper .description::after {
	display: none;
}

.sid-afrekenen .form-row.woocommerce-invalid input.input-text,
.sid-afrekenen .form-row.woocommerce-invalid textarea {
	border-color: var(--sid-rood);
}

/**
 * HET LANDVELD VAN HET SCHERM.
 *
 * Verkoop je aan één land, dan zet WooCommerce daar een keuzelijst met precies
 * één optie neer. Er valt niets te kiezen en niets te controleren, dus er is
 * ook niets te tonen; het verborgen veld met NL zit in dezelfde regel en wordt
 * gewoon meegestuurd.
 *
 * Hier stonden 25 regels om die keuzelijst eruit te laten zien als tekst,
 * omdat het ontwerp de regel wel toont. Dat was vermomming van iets wat er
 * niet hoort te staan - en het bleef bovendien grijs. Weggehaald 28-08-2026.
 *
 * !important IS HIER GEEN LUIHEID MAAR HET ENIGE ANTWOORD. WooCommerce zet met
 * address-i18n.js een INLINE style="display: block" op deze regel, en een
 * inline style wint van elke selector in een stylesheet - ook van een ID.
 * Gemeten in de pagina; dat is ook de reden dat een eerdere poging zonder
 * !important niets deed.
 *
 * Het veld blijft wél staan, alleen onzichtbaar: WooCommerce heeft de waarde
 * NL nodig voor de btw en de verzendkosten.
 */
#billing_country_field,
#shipping_country_field {
	display: none !important;
}

/* ==========================================================================
   DE KNOP NAAR DE VOLGENDE STAP
   ========================================================================== */

.sid-verder {
	width: 100%;
	margin-top: 30px;
	padding: 16px 20px;
	border: none;
	border-radius: 5px;
	background: var(--sid-blauw);
	color: #fff;
	font: 700 14px/1.2 'Open Sans', sans-serif;
	/* Cherry zet display:flex op élke button (die lange selector met
	   .flexbox, #page, .in-grid, …, button in style.css). Op een flex-container
	   doet text-align niets - de tekst is dan een flex-item en gaat links
	   staan. Vandaar justify-content en niet text-align. Gemeten in de pagina
	   op 28-08-2026. */
	justify-content: center;
	align-items: center;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .06em;
	cursor: pointer;
	transition: ease .3s all;
}

.sid-verder:hover {
	background: var(--sid-blauw-donker);
}

/* ==========================================================================
   DE BESTELKAART RECHTS
   ========================================================================== */

.sid-afreken-rechts #order_review {
	background: #fff;
	border-radius: var(--sid-radius);
	box-shadow: var(--sid-schaduw);
	padding: 22px 22px 24px;
}

.sid-afreken-regel {
	display: grid;
	grid-template-columns: 60px minmax(0, 1fr) auto;
	align-items: start;
	gap: 12px;
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--sid-lijn-licht);
}

.sid-afreken-foto img {
	display: block;
	width: 60px;
	height: auto;
	border-radius: 5px;
}

.sid-afreken-naam {
	font: 700 15px/1.35 'Open Sans', sans-serif;
	color: var(--sid-donker);
}

.sid-afreken-aantal {
	font-weight: 400;
	color: var(--sid-grijs);
}

.sid-afreken-prijs {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	font-weight: 700;
	font-size: 15px;
	white-space: nowrap;
	color: var(--sid-donker);
}

/* Dezelfde vorm als in de winkelwagen: de oude prijs klein, grijs en
   doorgestreept boven de actieprijs in het rood. Zie .sid-wagen-oud. */
.sid-afreken-oud,
.sid-afreken-oud .woocommerce-Price-amount {
	font-size: 13px;
	font-weight: 400;
	color: var(--sid-grijs);
	text-decoration: line-through;
}

.sid-afreken-nu.is-actie,
.sid-afreken-nu.is-actie .woocommerce-Price-amount {
	color: var(--sid-rood);
}

/**
 * DE UITVOERING ALS GRIJZE REGELS, NIET ALS CHIPS. In de winkelwagen zijn het
 * chips - daar mag de gekozen uitvoering opvallen, want daar kun je hem nog
 * wijzigen. In de bestelkaart bij het afrekenen is het naslag, en dan is een
 * rustige regel beter. Naar het ontwerp.
 *
 * De chips zelf komen uit woocommerce/cart/cart-item-data.php, dat de
 * winkelwagen en het afrekenscherm delen; daarom hier alleen de opmaak
 * teruggezet en niet dat sjabloon aangepast.
 */
.sid-afreken-omschrijving .sid-wagen-chips,
.sid-afreken-omschrijving dl.variation {
	margin-top: 6px;
	display: block;
	font-size: 13px;
	line-height: 1.5;
	color: var(--sid-grijs);
}

.sid-afreken-omschrijving .sid-wagen-chip,
.sid-afreken-omschrijving .sid-wagen-chips li,
.sid-afreken-omschrijving dl.variation dd,
.sid-afreken-omschrijving dl.variation dt {
	display: inline;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	font-size: 13px;
	font-weight: 400;
	color: var(--sid-grijs);
}

.sid-afreken-omschrijving .sid-wagen-kop {
	display: none;
}

.sid-afreken-som {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sid-afreken-somregel {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	font-size: 14px;
	color: var(--sid-grijs);
}

.sid-afreken-somregel > span:last-child,
.sid-afreken-somregel .amount {
	color: var(--sid-donker);
	white-space: nowrap;
}

.sid-afreken-totaal {
	margin-top: 5px;
	padding-top: 15px;
	border-top: 1px solid var(--sid-lijn-licht);
	font: 700 18px/1.3 'Titillium Web', sans-serif;
	color: var(--sid-donker);
}

.sid-afreken-totaal > span:last-child {
	font-size: 22px;
}

/* ==========================================================================
   WAT NOG NIET GEBOUWD IS
   ========================================================================== */

/**
 * De velden van stap 2 tot en met 5 staan er kaal onder zodat de bestelling
 * blijft werken tijdens het bouwen. Duidelijk anders van kleur, zodat niemand
 * ze voor af aanziet. Deze hele sectie kan weg zodra alle stappen staan.
 */
.sid-nog-te-doen {
	background: var(--sid-vlak);
	box-shadow: none;
	border: 1px dashed var(--sid-lijn);
}

.sid-bouwmelding {
	margin: 0 0 20px;
	font: 700 13px/1.5 'Open Sans', sans-serif;
	color: var(--sid-grijs);
}

.sid-nog-te-doen h3 {
	margin: 0 0 15px;
	font: 700 16px/1.3 'Titillium Web', sans-serif;
	color: var(--sid-donker);
}

/* De kop in de bestelkaart. Staat binnen de kaart en niet erboven, naar het
   ontwerp. */
.sid-overzicht-kop {
	margin: 0 0 16px;
	font: 700 18px/1.3 'Titillium Web', sans-serif;
	color: var(--sid-donker);
}

/* --- Stap 2: het gevonden adres -------------------------------------------- */

/**
 * Straat en plaats staan verstopt zolang het postcode-opzoeken ze heeft
 * gevuld; wat je ziet is het kadertje met wat we gevonden hebben. Klik je op
 * Wijzigen, dan komen de velden alsnog tevoorschijn en blijven ze open.
 *
 * Het ontwerp had #F0F9FE met een rand van #C7E8F8. Geen van beide bestaat in
 * het palet; --sid-lichtblauw is dezelfde zachtheid en --sid-lijn geeft het
 * kader zijn begrenzing.
 */
/**
 * STRAAT EN PLAATS STAAN DICHT. Ze verschijnen pas als je op Wijzigen klikt,
 * of als het opzoeken niets vindt - dan zet het script de groep zelf open.
 */
[data-adres] .sid-adres-stil {
	display: none;
	margin-top: 15px;
}

/* is-open = de bezoeker wil zelf typen (Wijzigen). niet-gevonden = het
   opzoeken leverde niets op, dus moet hij het zelf kunnen. Twee klassen omdat
   de eerste blijft staan en de tweede vanzelf weggaat zodra er wél iets
   gevonden wordt. */
[data-adres].is-open .sid-adres-stil,
[data-adres].niet-gevonden .sid-adres-stil {
	display: grid;
}

/**
 * HET HIDDEN-ATTRIBUUT MOET WINNEN VAN display:flex.
 *
 * [hidden] zet display:none, maar dat is een regel van de browser met het
 * laagste gewicht - onze .sid-adreskader { display:flex } wint daarvan, en dan
 * staat er een leeg blauw kadertje op het scherm. Dit is de klassieke val bij
 * elk element dat je met hidden verbergt en met flex opmaakt.
 */
.sid-adreskader[hidden] {
	display: none;
}

.sid-adreskader {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin-top: 15px;
	padding: 14px 16px;
	border: 1px solid var(--sid-blauwrand);
	border-radius: 5px;
	background: var(--sid-lichtblauw);
}

.sid-adres-teken {
	flex: none;
	display: block;
	margin-top: 1px;
	color: var(--sid-blauw-midden);
}

.sid-adres-tekst {
	flex: 1;
	min-width: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--sid-donker);
}

.sid-adres-straat {
	display: block;
	font-weight: 700;
}

button.sid-adres-wijzig {
	flex: none;
	padding: 0;
	border: none;
	background: none;
	font: 700 13px/1.5 'Open Sans', sans-serif;
	color: var(--sid-blauw-midden);
	text-decoration: underline;
	cursor: pointer;
}

button.sid-adres-wijzig:hover {
	background: none;
	color: var(--sid-blauw);
}

/* De velden ná het adres (e-mail voor facturen, inkoopkenmerk). */
.sid-velden-na {
	margin-top: 15px;
}

/* --- Het vinkje voor een ander bezorgadres --------------------------------- */

.sid-vinkregel {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 13px 15px;
	border: 1px solid var(--sid-lijn);
	border-radius: 5px;
	background: var(--sid-vlak);
	font: 600 15px/1.4 'Open Sans', sans-serif;
	color: var(--sid-donker);
	cursor: pointer;
}

.sid-vinkregel input {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--sid-blauw);
}

/* Het bezorgadres verschijnt pas als het vinkje aanstaat; WooCommerce regelt
   dat zelf met .shipping_address. */
.sid-groep-bezorging .shipping_address {
	margin-top: 20px;
}

/* --- De stappen: één kaart tegelijk ---------------------------------------- */

/**
 * Zie js/siderius-afrekenstappen.js. Een dichtgeklapte stap wordt verborgen,
 * niet weggehaald: alle velden worden gewoon meegestuurd.
 *
 * De samenvatting en de Wijzigen-link staan altijd in de pagina; ze worden hier
 * pas zichtbaar zodra een stap is afgerond. Zo hoeft er op het moment van
 * doorklikken niets bijgetekend te worden.
 */
.sid-staprecap,
a.sid-stapwijzig {
	display: none;
}

.sid-stapregel.is-af .sid-staprecap {
	display: block;
}

.sid-stapregel.is-af a.sid-stapwijzig {
	display: inline-block;
}

/* Een stap waar je nog niet bent geweest, is geen link. */
.sid-stapregel.is-nog a.sid-stapnaam {
	cursor: default;
}

.sid-stapregel.is-af a.sid-stapnaam,
.sid-stapregel.is-nu a.sid-stapnaam {
	cursor: pointer;
}

/* --- Stap 3: de aflevering -------------------------------------------------- */

/**
 * Het levertijdkader, de werkplaatstijdlijn en de drie afleverafspraken.
 * Maten uit het ontwerp op de themaschaal: waarde 24 -> 25, koppen 22 -> 22,
 * uitleg 14 blijft. Kleuren: #F0F9FE en #C7E8F8 bestaan niet in het palet ->
 * --sid-lichtblauw met --sid-lijn; #4a5560 -> --sid-grijs; #C8102E ->
 * --sid-rood.
 *
 * DE LEVERTIJD KOMT UIT DE MACHINE, NIET UIT EEN DATUM. Het ontwerp toont
 * "maandag 14 t/m vrijdag 18 september"; daarvoor moet je van werkdagen naar
 * kalenderdagen rekenen mét feestdagen, en moet vaststaan waarvandaan je telt.
 * Zolang dat niet besloten is staat hier de levertijd die al op de machine en
 * op zijn opties staat - die klopt altijd.
 */
/**
 * TWEE BLOKKEN, TWEE RANGEN.
 *
 * Het levertijdkader krijgt een blauwe rand die bij zijn vulling hoort: dat
 * geeft een gloed en tilt het naar voren. Het blok eronder krijgt een lichte
 * grijze rand op wit en zakt daardoor juist iets weg. Zo zie je zonder te
 * lezen wat het belangrijkste is - een grijze rand om het blauwe vlak deed
 * precies het omgekeerde.
 */
.sid-leverkader {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin: 15px 0 25px;
	padding: 20px 22px;
	border: 1px solid var(--sid-blauwrand);
	border-radius: 5px;
	background: var(--sid-lichtblauw);
}

/* De agenda staat op ooghoogte met het opschrift erboven, niet met de datum. */
.sid-lever-teken {
	flex: none;
	display: block;
	margin-top: 1px;
	color: var(--sid-blauw-midden);
}

.sid-lever-kop {
	display: block;
	font: 700 13px/1.4 'Open Sans', sans-serif;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--sid-blauw-midden);
}

.sid-lever-waarde {
	display: block;
	margin-top: 3px;
	font: 700 25px/1.25 'Titillium Web', sans-serif;
	color: var(--sid-donker);
}

.sid-leverkader p {
	margin: 8px 0 0;
	max-width: 520px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--sid-grijs);
	text-wrap: pretty;
}

/* --- de werkplaatstijdlijn --- */

.sid-werkplaats-kader {
	padding: 22px 24px 24px;
	border: 1px solid var(--sid-lijn-licht);
	border-radius: 5px;
	background: #fff;
}

.sid-lever-tussenkop {
	margin: 0 0 20px;
	font: 700 13px/1.4 'Open Sans', sans-serif;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--sid-grijs);
}

.sid-werkplaats {
	list-style: none;
	margin: 0;
	padding: 0;
}

/**
 * Vier kolommen: het moment, de stip met zijn lijntje, en daarnaast de titel
 * met de uitleg eronder. De lijn is de ::after van de stip en stopt vanzelf bij
 * de laatste regel.
 */
.sid-werkplaats li {
	display: grid;
	grid-template-columns: 110px 20px minmax(0, 1fr);
	column-gap: 16px;
}

.sid-werkplaats li:not(:last-child) {
	padding-bottom: 25px;
}

/**
 * DE BOL EN DE LIJN ZIJN TWEE TEKENINGEN OP ÉÉN KOLOM.
 *
 * De kolom loopt over beide regels van de rij (grid-row: span 2). De bol is
 * de ::before bovenaan, de lijn de ::after die van onder de bol doorloopt tot
 * voorbij de onderrand - precies tot de volgende bol. Zo hangt de lengte van
 * de lijn vanzelf af van hoe lang de tekst ernaast is, zonder een vaste hoogte
 * die bij een langere zin te kort wordt.
 */
.sid-werkplaats-stip {
	position: relative;
	grid-row: span 2;
	display: block;
	width: 13px;
	margin-top: 4px;
}

.sid-werkplaats-stip::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 13px;
	height: 13px;
	box-sizing: border-box;
	border: 3px solid var(--sid-blauw);
	border-radius: 50%;
	background: #fff;
}

.sid-werkplaats li:not(:last-child) .sid-werkplaats-stip::after {
	content: '';
	position: absolute;
	/* 17 = de bol (13) plus 4 lucht. Onder houdt hij dezelfde 4 aan: de rij
	   heeft 25 onderruimte en de volgende bol begint 4 lager, dus -25 laat
	   precies dat gat over. Boven en onder even veel. */
	top: 17px;
	left: 5px;
	width: 2px;
	bottom: -25px;
	background: var(--sid-lijn);
}

/* Het lichte blauw, niet het donkere: dit is een tijdsaanduiding naast de
   titel en hoort minder hard te spreken dan die titel. */
.sid-werkplaats-wanneer {
	grid-row: span 2;
	font: 700 12px/1.6 'Open Sans', sans-serif;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--sid-blauw);
}

.sid-werkplaats-wat {
	font: 700 15px/1.4 'Open Sans', sans-serif;
	color: var(--sid-donker);
}

.sid-werkplaats-uitleg {
	font-size: 14px;
	line-height: 1.55;
	color: var(--sid-grijs);
}

/* --- de drie afleverafspraken --- */

.sid-afspraken {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sid-afrekenen .sid-afspraak {
	margin: 0;
	padding: 0;
}

/**
 * VINKJE, STERRETJE, DAN DE TEKST - EN EEN HANGENDE INSPRING.
 *
 * WooCommerce zet het sterretje ACHTER de labeltekst; in het ontwerp staat het
 * ervoor, vlak naast het vinkje. Met flex is dat niet om te draaien: de tekst
 * is een kale tekstknoop en die kun je geen order geven. Daarom staan het
 * vinkje en het sterretje absoluut, en houdt de tekst links 44px vrij. Dat
 * geeft meteen de hangende inspring: een zin van twee regels lijnt onder
 * zichzelf uit en niet onder het vinkje.
 */
/**
 * VIER KLASSEN, ANDERS BLIJFT HET LABEL INLINE.
 *
 * woocommerce-layout.css zet `.woocommerce form .form-row label.checkbox` op
 * display:inline - en bij een inline element geldt padding-left ALLEEN op de
 * eerste regel; regel twee begint gewoon op 0, onder het vinkje. Dat was de
 * scheve uitlijning.
 *
 * LET OP DE `.checkbox` IN DE SELECTOR. Die van WooCommerce heeft een klasse
 * óp het element (label.checkbox) en weegt daarmee zwaarder dan drie of vier
 * losse klassen met een kale `label` erachter. Zonder die .checkbox verliest
 * deze regel, ook met vier klassen ervoor - dat heb ik eerst geprobeerd.
 */
.sid-afrekenen .sid-afreken-raster .sid-afspraak label.checkbox {
	position: relative;
	display: block;
	margin: 0;
	padding-left: 36px;
	font: 400 15px/1.5 'Open Sans', sans-serif;
	color: var(--sid-donker);
	cursor: pointer;
}

.sid-afrekenen .sid-afreken-raster .sid-afspraak input[type="checkbox"] {
	position: absolute;
	top: 3px;
	left: 0;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--sid-blauw);
	cursor: pointer;
}

.sid-afrekenen .sid-afreken-raster .sid-afspraak label.checkbox .required {
	/* Klein en opgetild, rechtsboven naast het vinkje - zoals het sterretje
	   ook rechtsboven een invoerveld staat. Naar het ontwerp. */
	position: absolute;
	top: -1px;
	left: 21px;
	font-size: 11px;
	line-height: 1.5;
	color: var(--sid-rood);
	text-decoration: none;
}

/* De zin blijft donker als het vinkje ontbreekt: de rode melding eronder zegt
   het al. Een hele zin in het rood leest als een fout in de tekst zelf. */

/* Geen rood streepje ervoor: de zin is al duidelijk genoeg, en een rode balk
   maakt er een waarschuwing van terwijl het gewoon een afspraak is. Naar het
   ontwerp. */
.sid-afspraken-let-op {
	margin: 20px 0 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--sid-grijs);
}

/* De afspraak over betalen en de afleverdatum. Staat los onder het
   werkplaatsblok: het gaat niet over wat wij doen, maar over wat er van de
   klant wordt verwacht - en wat er gebeurt als dat niet gebeurt. */
.sid-lever-voorwaarde {
	margin: 20px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--sid-grijs);
	text-wrap: pretty;
}

/* De melding onder een veld dat nog niet klopt. Rood, klein, en pas zichtbaar
   nadat iemand op Verder heeft gedrukt - niet terwijl hij nog aan het typen
   is. */
.sid-afrekenen .sid-veldfout {
	display: block;
	margin-top: 5px;
	font: 400 13px/1.4 'Open Sans', sans-serif;
	color: var(--sid-rood);
}

/* ==========================================================================
   STAP 4 - HET OVERZICHT

   Vier omlijnde blokken onder elkaar. Bewust géén kaartschaduw: de kaart is
   het scherm eromheen, deze blokken zijn de indeling erbinnen. Ze zijn dus
   lichter gelijnd (--sid-lijn-licht) dan een veldkader.

   De maten uit het ontwerp op de schaal van het thema gelegd:
   16 -> 15 (afstand tussen de blokken), 13 -> 15 (icoon naast de titel),
   22/24 -> 20/25 (binnenrand), 12/24 -> 10/25 (raster), 14,5 -> 14 (tekst),
   #EDEDED -> --sid-lijn-licht, #6b7278 -> --sid-grijs.
   ========================================================================== */

.sid-overzichtblokken {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin-top: 20px;
}

.sid-overzichtblok {
	padding: 20px 25px;
	border: 1px solid var(--sid-lijn-licht);
	border-radius: 5px;
}

.sid-overzichtblok > header {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid var(--sid-lijn-licht);
}

.sid-overzicht-teken {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--sid-blauw);
}

.sid-overzichtblok h4 {
	flex: 1;
	margin: 0;
	font: 700 18px/1.3 'Titillium Web', sans-serif;
	color: var(--sid-donker);
}

/* Wijzigen is soms een <button> (naar een stap op deze pagina) en soms een
   <a> (naar de winkelwagen). Eén vorm voor allebei; Cherry zet display:flex
   op elke button, vandaar dat de uitlijning hier expliciet staat. */
.sid-overzicht-wijzig {
	flex: none;
	align-items: center;
	padding: 0;
	border: none;
	background: none;
	font: 700 14px/1.4 'Open Sans', sans-serif;
	color: var(--sid-blauw-midden);
	text-decoration: underline;
	/* Cherry zet hoofdletters op elke button. De <a> ernaast (bij Betaling)
	   kreeg ze niet, dus stond WIJZIGEN naast Wijzigen in dezelfde kaart. */
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}

/* Cherry geeft ELKE button een donkerblauw vlak bij hover (style.css r. 573,
   `button:hover { background: #006997 }`). Deze knop is een tekstlink, dus dat
   vlak moet er expliciet weer af - alleen `color` zetten is niet genoeg. */
.sid-overzicht-wijzig:hover,
.sid-overzicht-wijzig:focus {
	background: none;
	color: var(--sid-blauw);
}

/* Opschrift links, waarde rechts. Een vaste linkerkolom houdt alle vier de
   blokken op dezelfde lijn - anders springt elk blok op zijn eigen langste
   woord. */
.sid-overzicht-rijen {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr);
	gap: 10px 25px;
	margin: 15px 0 0;
	font-size: 14px;
	line-height: 1.5;
}

.sid-overzicht-rijen:empty {
	display: none;
}

.sid-overzicht-rijen dt {
	margin: 0;
	/* dt is in de browser standaard vet (en style.css bevestigt dat). Vet grijs
	   leest zwaarder dan het antwoord ernaast - precies andersom dan het hoort.
	   Het opschrift is de vraag, de waarde is het antwoord: die krijgt de
	   nadruk. */
	font-weight: 400;
	color: var(--sid-grijs);
}

.sid-overzicht-rijen dd {
	margin: 0;
	color: var(--sid-donker);
}

@media (max-width: 600px) {

	.sid-overzicht-rijen {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}

	.sid-overzicht-rijen dd {
		margin-bottom: 8px;
	}
}

/* ==========================================================================
   STAP 4 - AKKOORD EN AFREKENEN
   ========================================================================== */

.sid-groep-betalen .woocommerce-privacy-policy-text,
.sid-groep-betalen .woocommerce-terms-and-conditions-wrapper {
	margin: 0 0 10px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--sid-grijs);
}

.sid-groep-betalen #place_order {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Ook goed als de knop géén flexbox blijkt te zijn - zie het blok hieronder
	   over die inline stijl. Dan zorgt text-align voor het midden. */
	text-align: center;
	padding: 17px 20px;
	border: none;
	border-radius: 5px;
	background: var(--sid-blauw);
	color: #fff;
	font: 700 16px/1.2 'Open Sans', sans-serif;
	/* Geen hoofdletters: op deze knop staat een bedrag, en HOOFDLETTERS maken
	   van € 2.813,25 een schreeuw in plaats van een mededeling. */
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	transition: ease .3s all;
}

/**
 * HET %3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='20' viewBox='0 0 24 20' fill='none'%3E%3Cmask id='gat'%3E%3Crect width='24' height='20' fill='%23fff'/%3E%3Crect x='14.2' y='10.5' width='9.8' height='9.5' rx='2.4' fill='%23000'/%3E%3C/mask%3E%3Cg mask='url(%23gat)'%3E%3Crect x='1' y='2.2' width='18.6' height='13' rx='2.4' stroke='%23fff' stroke-width='1.5'/%3E%3Crect x='1' y='5.2' width='18.6' height='2.3' fill='%23fff'/%3E%3C/g%3E%3Cpath d='M17 13.9V12.4a2.1 2.1 0 0 1 4.2 0v1.5' stroke='%23fff' stroke-width='1.5'/%3E%3Crect x='15.5' y='13.5' width='7.2' height='5.6' rx='1.3' fill='%23fff'/%3E%3C/svg%3E OP DE BESTELKNOP: EEN BETAALPAS MET EEN SLOT.
 *
 * Een los slotje zegt "veilig" en verder niets. Deze combinatie zegt waar je op
 * drukt: er wordt betaald, en dat gaat over een beveiligde verbinding. Coolblue
 * doet het zo, en het is dezelfde pas als in het betalingsblok erboven - zo
 * hoort het teken bij dat blok en niet bij zichzelf.
 *
 * HET GAT IS EEN ECHT GAT (een mask), GEEN BLAUW VLAKJE.
 *
 * Eerst lag er een vlakje in de kleur van de knop onder het slot, om de pas
 * eromheen weg te halen. Dat gaf een rare naloop bij hover: de knop verkleurt
 * in 0,3 seconde, maar zo'n vlakje verspringt in één keer. Drie tienden lang
 * had je dus een donker vlekje op een nog lichte knop - het slot leek achter
 * te lopen op de pas. Met een mask is het gat doorzichtig: er is geen kleur
 * meer die mee moet veranderen, en dus ook niets meer om uit de pas te lopen.
 *
 * Als plaatje in de CSS en niet als <svg> in de knop, want een script slaat de
 * inhoud van die knop na het laden plat tot kale tekst.
 */
/**
 * HET TEKEN MOET OOK BUITEN EEN FLEXBOX BLIJVEN STAAN.
 *
 * Er draait een script dat `display: block !important` rechtstreeks op de knop
 * zet. Een stijl die op het element zelf staat wint van alles in een
 * stylesheet - ook van !important - dus die is met CSS niet te overrulen.
 *
 * Gevolg: de knop is soms wél en soms géén flexbox. En in dat tweede geval was
 * dit teken een `inline` vakje, en een inline vakje negeert breedte en hoogte.
 * Het stond er dus nog, maar dan als iets van nul bij nul - onzichtbaar. Precies
 * wat je zag bij de tweede klik op iDEAL | Wero.
 *
 * `inline-block` werkt in allebei de gevallen: in een flexbox wordt het gewoon
 * een blok, daarbuiten houdt het zijn maat. De marge ernaast doet wat de `gap`
 * eerst deed, want die geldt alleen in een flexbox. Gemeten in de pagina op
 * 01-09-2026.
 */
.sid-groep-betalen #place_order::before {
	content: "";
	display: inline-block;
	vertical-align: -4px;
	flex: none;
	width: 22px;
	height: 18px;
	margin-right: 10px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='20' viewBox='0 0 24 20' fill='none'%3E%3Cmask id='gat'%3E%3Crect width='24' height='20' fill='%23fff'/%3E%3Crect x='14.2' y='10.5' width='9.8' height='9.5' rx='2.4' fill='%23000'/%3E%3C/mask%3E%3Cg mask='url(%23gat)'%3E%3Crect x='1' y='2.2' width='18.6' height='13' rx='2.4' stroke='%23fff' stroke-width='1.5'/%3E%3Crect x='1' y='5.2' width='18.6' height='2.3' fill='%23fff'/%3E%3C/g%3E%3Cpath d='M17 13.9V12.4a2.1 2.1 0 0 1 4.2 0v1.5' stroke='%23fff' stroke-width='1.5'/%3E%3Crect x='15.5' y='13.5' width='7.2' height='5.6' rx='1.3' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
}

.sid-groep-betalen #place_order:hover {
	background: var(--sid-blauw-donker);
}

/* De provincie en wat WooCommerce verder meestuurt maar niet gevraagd wordt.
   Wel in het formulier, niet in beeld. */
.sid-restvelden[hidden] {
	display: none;
}

/* Op het overzicht laat de tijdlijn alleen de namen van de stappen zien. De
   gegevens staan dan in de blokken ernaast; twee keer hetzelfde naast elkaar
   maakt het alleen maar onduidelijk. */
.sid-afrekenen.is-overzicht .sid-staprecap,
.sid-afrekenen.is-overzicht .sid-stapregel a.sid-stapwijzig {
	display: none;
}

/* ==========================================================================
   STAP 4 - AKKOORD EN AFREKENEN, DE VORM
   ========================================================================== */

/* Het grijze vlak van WooCommerce eromheen valt weg: binnen de kaart is dat
   een tweede achtergrond zonder betekenis. */
.sid-groep-betalen #payment {
	background: none;
	border-radius: 0;
}

/* WooCommerce zet 1em rondom dit blok (`#payment div.form-row`). Binnen onze
   kaart is dat een tweede kantlijn boven op de eerste. */
.sid-afrekenen #payment div.form-row.place-order {
	margin: 0;
	padding: 0;
}

/* Het vinkje staat los boven de knop, niet in een kader: het hoort bij de
   handeling eronder en niet bij de blokken erboven. */
.sid-voorwaarden {
	margin: 0 0 15px;
}

.sid-voorwaarden a {
	color: var(--sid-blauw-midden);
	text-decoration: underline;
}

/* ==========================================================================
   DE BETAALKEUZE IN HET OVERZICHTSBLOK

   Wijzigen wisselt het blok om: de regels en de link gaan weg, de twee keuzes
   komen ervoor in de plaats. Kies je er een, dan klapt het meteen terug met de
   nieuwe bedragen erin. Geen tweede scherm, geen terugweg nodig.
   ========================================================================== */

.sid-betaalkeuze {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 15px;
}

.sid-betaalkeuze[hidden],
.sid-overzicht-rijen[hidden],
.sid-overzicht-wijzig[hidden] {
	display: none;
}

.sid-afrekenen .sid-betaaloptie {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--sid-lijn);
	border-radius: 5px;
	font: 700 14px/1.4 'Open Sans', sans-serif;
	color: var(--sid-donker);
	cursor: pointer;
	transition: ease .3s all;
}

.sid-afrekenen .sid-betaaloptie:hover {
	border-color: var(--sid-blauwrand);
}

.sid-afrekenen .sid-betaaloptie.is-nu {
	border-color: var(--sid-blauw);
	background: var(--sid-lichtblauw);
}

.sid-afrekenen .sid-betaaloptie input[type="radio"] {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--sid-blauw);
	cursor: pointer;
}

.sid-betaaloptie-naam {
	flex: 1;
	min-width: 0;
}

/* Het bedrag houdt zijn eigen regel rechts, ook als de naam over twee regels
   loopt. Vandaar nowrap: anders breekt "€ 28.132,50" op de komma. */
.sid-betaaloptie-bedrag {
	flex: none;
	white-space: nowrap;
}

/**
 * GEEN ROOD KADER OM EEN LEEG VINKJE.
 *
 * WooCommerce zet `outline: 2px solid #a00 !important` op een vinkje dat nog
 * niet is aangezet. Dat is dezelfde keuze als het rode streepje dat we eerder
 * bij de velden weghaalden: de melding zegt het al, en een rood kader maakt
 * van een afspraak een fout. Alleen met !important te overrulen - de regel van
 * WooCommerce heeft die zelf ook. Gemeten in de pagina op 01-09-2026.
 */
.sid-afrekenen .sid-afspraak input[type="checkbox"] {
	outline: none !important;
}

/**
 * DE FOUTMELDING NA HET BESTELLEN SPANT OVER ALLE DRIE DE KOLOMMEN.
 *
 * WooCommerce zet die melding met JavaScript bovenin het formulier - en dat
 * formulier ís hier het raster van drie kolommen. Zonder deze regel wordt de
 * melding dus zelf een kolom: hij gaat in de eerste staan, de tijdlijn schuift
 * naar de tweede en de kaarten worden platgedrukt in de derde.
 */
.sid-afreken-raster > .woocommerce-NoticeGroup,
.sid-afreken-raster > .woocommerce-error,
.sid-afreken-raster > .woocommerce-message,
.sid-afreken-raster > .woocommerce-info {
	grid-column: 1 / -1;
	margin: 0 0 25px;
}

/* ==========================================================================
   DE BETAALWIJZEN

   Dezelfde kaartvorm als de keuze tussen volledig en aanbetalen erboven: het
   is hetzelfde soort handeling, dus het hoort er hetzelfde uit te zien.
   ========================================================================== */

/* Alleen bij meer dan één betaalwijze staat deze kop er, en dan begint er een
   nieuwe vraag. Die mag iets meer lucht boven zich hebben dan de blokken
   onderling: 30 in plaats van 15. Bij één betaalwijze is er geen kop en dus
   ook geen extra ruimte - dat is dan geen vraag maar een mededeling. */
.sid-betaalkop {
	margin: 15px 0 10px;
	font: 700 15px/1.3 'Open Sans', sans-serif;
	color: var(--sid-donker);
}

/**
 * DE BETAALWIJZEN HOREN BIJ HET BLOK ERBOVEN, NIET IN EEN EIGEN HOOFDSTUK.
 *
 * Er stonden twee streepjes in dit stuk. De eerste van onze eigen veldgroepen
 * (elke volgende groep krijgt een lijn erboven), de tweede van WooCommerce, dat
 * een rand onder de lijst met betaalwijzen zet. Samen hakten ze het onderste
 * stuk in drie hoofdstukjes terwijl het één handeling is: kijken waarmee je
 * betaalt, akkoord gaan, drukken. Allebei weg, en de afstanden terug naar het
 * ritme van de blokken erboven: 15 ertussen, 20 voor het akkoord.
 *
 * LET OP DE #payment: die van WooCommerce begint met dat id en weegt daardoor
 * zwaarder dan een reeks klassen. Gemeten in de pagina op 01-09-2026.
 */
/* Geen streep tussen het betalingsblok en de betaalwijze. Er staat er al een
   rand om elk blok; nog een lijn ertussen maakt het onrustig zonder iets te
   scheiden wat niet al gescheiden was. */
.sid-veldgroep.sid-groep-betalen {
	margin-top: 15px;
	padding-top: 0;
	border-top: none;
}

.sid-afrekenen #payment ul.payment_methods {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	border: none;
}

/**
 * DE ONZICHTBARE OPRUIMERS VAN WOOCOMMERCE.
 *
 * Op deze lijst staan een ::before en een ::after met een spatie erin - het
 * oude trucje om zwevende elementen op te ruimen. In een flexbox worden dat
 * twee volwaardige vakjes, en die pakken de `gap` van 10px mee. Resultaat: tien
 * pixels boven én onder de lijst die nergens in de code staan.
 *
 * Dezelfde valkuil als eerder bij de kaarten: geen gap op iets waar WooCommerce
 * zelf in tekent, of anders die pseudo-elementen weghalen. Gemeten in de pagina
 * op 01-09-2026.
 */
.sid-afrekenen #payment ul.payment_methods::before,
.sid-afrekenen #payment ul.payment_methods::after {
	display: none;
}

/* Dezelfde lijnkleur als de overzichtsblokken erboven: dit zijn kaders binnen
   dezelfde kaart, en dan hoort er maar één lijnkleur te zijn. --sid-lijn is de
   zwaardere lijn, voor invoervelden en scheidingen. */
.sid-afrekenen .sid-betaalregel {
	margin: 0;
	padding: 0;
	border: 1px solid var(--sid-lijn-licht);
	border-radius: 5px;
	background: none;
	transition: ease .3s all;
}

.sid-afrekenen .sid-betaalregel.is-nu {
	border-color: var(--sid-blauw);
	background: var(--sid-lichtblauw);
}

/**
 * HET KEUZERONDJE LIGT VAST IN DE LINKERBOVENHOEK.
 *
 * WooCommerce laat het zweven (`float`) met een marge van 1em ernaast. Binnen
 * een kaart klopt dat niet: het rondje kwam half over de rand te liggen en het
 * opschrift ging er omheen lopen in plaats van ernaast. Vandaar vastgezet,
 * met een gat van 46px in het opschrift waar het in past.
 *
 * NIET VERTICAAL GECENTREERD. Staat de uitleg van een betaalwijze open, dan
 * wordt de kaart hoger en zou het rondje naar het midden van die hele kaart
 * zakken - naast de uitleg in plaats van naast de naam. Dus vanaf de bovenkant.
 *
 * LET OP DE #payment IN DE SELECTOR. De regels van WooCommerce beginnen met
 * `#payment` en wegen daardoor zwaarder dan welke reeks klassen ook; zonder dat
 * id wint deze regel het niet. Gemeten in de pagina op 01-09-2026.
 *
 * Bij één betaalwijze verbergt WooCommerce het rondje zelf - er valt dan niets
 * te kiezen.
 */
.sid-afrekenen #payment ul.payment_methods li.sid-betaalregel {
	position: relative;
}

.sid-afrekenen #payment ul.payment_methods li input[type="radio"] {
	position: absolute;
	top: 16px;
	left: 16px;
	float: none;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--sid-blauw);
	cursor: pointer;
}

.sid-afrekenen #payment ul.payment_methods li.sid-betaalregel label {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 14px 16px 14px 46px;
	font: 700 15px/1.4 'Open Sans', sans-serif;
	color: var(--sid-donker);
	cursor: pointer;
}

.sid-betaal-teken {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	color: var(--sid-donker);
}

/* Het merkteken mag gezien worden: daar herkent iemand zijn betaalwijze aan,
   sneller dan aan de naam ernaast. */
.sid-afrekenen .sid-betaal-teken img {
	max-width: 46px;
	max-height: 30px;
	width: auto;
	margin: 0;
	float: none;
}

.sid-betaal-naam {
	flex: 1;
	min-width: 0;
}

/* Bij één betaalwijze is de zin gewone tekst met alleen de naam vet - het is
   een mededeling, geen keuze. */
.sid-afrekenen .sid-betaal-enkel .sid-betaal-naam {
	font-weight: 400;
}

.sid-betaal-noot {
	flex: none;
	font: 400 14px/1.4 'Open Sans', sans-serif;
	color: var(--sid-grijs);
}

/**
 * DE UITLEG VAN EEN BETAALWIJZE.
 *
 * WooCommerce maakt daar een grijs vak met een pijltje van. Binnen een kaart
 * die zelf al een rand en een vulling heeft is dat een kader in een kader.
 * Hier gewoon een regel onder de naam, in dezelfde kaart.
 */
.sid-afrekenen #payment div.payment_box {
	margin: 0;
	padding: 0 16px 14px 46px;
	border: none;
	border-radius: 0;
	background: none;
	font-size: 14px;
	line-height: 1.55;
	color: var(--sid-grijs);
}

/* Het grijze pijltje van WooCommerce. Dat wees naar een vak dat er niet meer
   is; wat overbleef was een driehoekje in het niets. */
.sid-afrekenen #payment div.payment_box::before {
	display: none;
}

.sid-afrekenen #payment div.payment_box p:last-child {
	margin-bottom: 0;
}

@media (max-width: 600px) {

	.woocommerce-checkout .sid-afrekenen .sid-betaalregel label {
		flex-wrap: wrap;
	}

	.sid-betaal-noot {
		width: 100%;
	}
}

/**
 * "DIT HUISNUMMER KENNEN WE NIET" — DE MELDING BIJ HET ADRES OPZOEKEN.
 *
 * Staat op dezelfde plek als het blauwe bevestigingskader: op die ene regel
 * komt altijd het antwoord op wat je hebt ingetikt, of dat nu een adres is of
 * een "dat vinden we niet". Zonder melding zag je alleen twee lege velden
 * verschijnen en moest je zelf raden wat er aan de hand was.
 *
 * GEEN ROOD. Het is geen fout van de bezoeker: het adres kan nieuwbouw zijn, of
 * het Kadaster loopt achter. Hij mag straat en plaats gewoon zelf invullen en
 * doorlopen. Rood zou zeggen "je hebt iets fout gedaan", en dat weten we niet.
 */
.sid-adres-onbekend {
	display: none;
	align-items: flex-start;
	gap: 10px;
	margin: 15px 0 0;
	padding: 12px 15px;
	border: 1px solid var(--sid-lijn);
	border-radius: 5px;
	background: var(--sid-vlak);
	font-size: 14px;
	line-height: 1.5;
	color: var(--sid-donker);
}

[data-adres].niet-gevonden .sid-adres-onbekend {
	display: block;
}

/* ==========================================================================
   HET HULPBLOK ONDER DE BESTELKAART

   Een eigen kaartje, niet de vorm van de winkelwagen. Dat is met opzet: op de
   winkelwagen is appen een van de wegen die je kunt kiezen en staat het als
   knop tussen de andere knoppen. Hier staat het náást het bestelproces - een
   kop, een belofte over hoe snel je antwoord krijgt, en een link. Geen knop,
   want die zou concurreren met de bestelknop.

   Waarden uit het ontwerp op de schaal van het thema: marges 16 en 14 werden
   15, 13,5 werd 13, de schaduw werd --sid-schaduw (juiste vorm, en dan overal
   dezelfde sterkte) en de hoverkleur --sid-blauw-donker. Radius 10, #006DAA,
   Titillium 700/16 en het groene bolletje van 32 stonden al goed.
   ========================================================================== */

.sid-afreken-hulp {
	margin-top: 15px;
	padding: 20px;
	border-radius: var(--sid-radius);
	background: #fff;
	box-shadow: var(--sid-schaduw);
}

.sid-afreken-hulpkop {
	margin: 0;
	font: 700 16px/1.3 'Titillium Web', sans-serif;
	color: var(--sid-donker);
}

.sid-afreken-hulpuitleg {
	margin: 4px 0 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--sid-grijs);
	text-wrap: pretty;
}

/* Drie klassen en het element erbij: het thema kleurt links binnen de winkel
   donker, en die regel weegt zwaarder dan een losse klasse. Gemeten op
   02-09-2026: hij stond op --sid-donker in plaats van op ons blauw. */
.sid-afrekenen .sid-afreken-hulp a.sid-afreken-app {
	/* Over de hele breedte van het kaartje. Een link die maar zo breed is als
	   zijn tekst oogt als een terloopse verwijzing; hier is het de handeling
	   van dit blok, dus krijgt hij het hele vlak. */
	display: flex;
	box-sizing: border-box;
	width: 100%;
	align-items: center;
	/* Dezelfde 15 als tussen het bolletje en de titel van een overzichtsblok.
	   Het is hetzelfde soort paar - teken links, tekst rechts - en dan hoort er
	   op één scherm maar één afstand tussen te zitten. */
	gap: 15px;
	margin-top: 15px;
	padding: 10px 15px;
	border: 1px solid var(--sid-lijn-licht);
	border-radius: var(--sid-radius);
	font: 700 14px/1.4 'Open Sans', sans-serif;
	color: var(--sid-blauw-midden);
	text-decoration: none;
	transition: ease .3s all;
}

.sid-afrekenen .sid-afreken-hulp a.sid-afreken-app:hover {
	border-color: #25D366;
	color: var(--sid-blauw-donker);
}

/* Het groene rondje is het merkteken; de tekst ernaast blijft in onze eigen
   blauw. Zo hoort de link bij de site en het teken bij WhatsApp. */
.sid-afreken-app-teken {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #25D366;
}

.sid-afreken-app-teken svg {
	display: block;
}

/**
 * "DIT HUISNUMMER KENNEN WE NIET" — DE MELDING BIJ HET ADRES OPZOEKEN.
 *
 * Staat op dezelfde plek als het blauwe bevestigingskader: op die ene regel
 * komt altijd het antwoord op wat je hebt ingetikt, of dat nu een adres is of
 * een "dat vinden we niet". Zonder melding zag je alleen twee lege velden
 * verschijnen en moest je zelf raden wat er aan de hand was.
 *
 * GEEN ROOD. Het is geen fout van de bezoeker: het adres kan nieuwbouw zijn, of
 * het Kadaster loopt achter. Hij mag straat en plaats gewoon zelf invullen en
 * doorlopen. Rood zou zeggen "je hebt iets fout gedaan", en dat weten we niet.
 */
.sid-adres-onbekend {
	display: none;
	align-items: flex-start;
	gap: 10px;
	margin: 15px 0 0;
	padding: 12px 15px;
	border: 1px solid var(--sid-lijn);
	border-radius: 5px;
	background: var(--sid-vlak);
	font-size: 14px;
	line-height: 1.5;
	color: var(--sid-donker);
}

[data-adres].niet-gevonden .sid-adres-onbekend {
	display: block;
}


/* ==========================================================================
   31. DE HOVER GELIJKTREKKEN: LINKBLOKKEN EN PRODUCTKAARTEN
   ==========================================================================
   Toegevoegd 08-09-2026.

   Cherry's linkblokken (homepagina: Verhuur, Service, Onderdelen) en onze
   productkaarten deden bij hover twee verschillende dingen. Nu doen ze
   hetzelfde: schaduw zwaarder, blok 5px omhoog, foto op 105%, en een lijn
   onder de link die vanuit het midden uitgroeit.
   ========================================================================== */

/* --- 31a. Het lijntje in het linkblok blijft lichtblauw -------------------- */

/**
 * Cherry laat de lijn bij hover meekleuren met de tekst: allebei #006997.
 * Daardoor verdwijnt de lijn zowat in het woord erboven.
 *
 * De tekst mag donker worden, dat is het signaal dat je er bovenop zit. De
 * lijn houden we op #009EE3, het Siderius-blauw, zodat je hem ziet liggen.
 * Zo staat hij ook op de productkaart (.sid-kaart-naam::after).
 *
 * DIT BESTAND LAADT NA style.css, dus bij gelijke specificiteit wint deze
 * regel. Het !important moet erbij omdat Cherry het daar ook gebruikt; zonder
 * !important verliest deze regel het alsnog. De selector is letterlijk
 * overgenomen uit style.css r. 5073 zodat je ze naast elkaar kunt leggen.
 */
.block-item.link-block a:hover .inner-item .content-container .bottom-container .link-container span:before {
	background: var(--sid-blauw) !important;
}


/* --- 31b. De productkaart komt omhoog, net als het linkblok ---------------- */

/**
 * Cherry doet dit in style.css r. 5054-5062: translateY(-5px), en alleen
 * vanaf 991px breed.
 *
 * WAAROM DIE GRENS. Op een aanraakscherm bestaat hover niet echt. Tik je op
 * een kaart, dan blijft de opgetilde stand soms hangen tot je ergens anders
 * tikt. Cherry sluit dat daarom uit onder 991px en dat nemen we over, met
 * hetzelfde getal, zodat de twee niet uit elkaar gaan lopen.
 *
 * De schaduw stond er al (--sid-schaduw-hover, zelfde waarde als Cherry) en
 * de foto op 105% ook. Dit was het laatste verschil.
 */
@media only screen and (min-width: 991px) {

	.sid-kaart:hover {
		transform: translateY(-5px);
	}
}

/* ==========================================================================
   32. HET VERGELIJKINGSBLOK

   Hoort bij inc/siderius-webshop/vergelijking.php en js/siderius-vergelijking.js.

   VIER WAARDEN HIERONDER KOMEN NIET UIT HET PALET, EN DAT IS EXPRES.
   Het verloop (#E3F2FB naar #F0F9FE), de opgetilde lijn (#D3E7F4), de rand
   (#C7E2F1) en de schaduw naar beneden maken samen dat de middelste kolom
   als een verhoogd, glazig vlak leest. Vervang je ze door --sid-lichtblauw en
   --sid-blauwrand, dan is dat effect weg:

     --sid-lichtblauw is #EAF6FD en ligt precies TUSSEN de twee verlooptinten,
     dus dan is er geen verloop meer.
     --sid-blauwrand is #C7E8F8 en is verzadigder dan #D3E7F4, dus dan valt
     die opgetilde lijn op terwijl hij juist nauwelijks zichtbaar hoort te zijn.
     De twee themaschaduwen zijn gloeden rondom; een gloed kan niet laten zien
     dat iets omhoog staat.

   Alles buiten dat effect gebruikt wél gewoon het palet. Ruim deze vier dus
   niet op.
   ========================================================================== */

.sid-vergelijking {
	--vgl-kophoogte: 194px;   /* waar de kolomkop ophoudt; het verloop stopt daar.
	                             Loopt mee met de margin-top van .vgl-foto. */
}

/* De sectiekop met de blauwe streep, gelijk aan de andere drie elementen. */
.sid-vgl-kop {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 26px;
	line-height: 1.3;
	color: var(--sid-donker);
	margin: 0 0 15px;
}

.sid-vgl-kop::after {
	content: "";
	display: block;
	width: 70px;
	height: 4px;
	margin-top: 5px;
	border-radius: 3px;
	background: var(--sid-blauw);
}

.sid-vergelijking .vgl-intro {
	font-size: 14px;
	color: var(--sid-grijs);
	margin: 0 0 18px;
}


/* --- De merkschakelaar ---------------------------------------------------- */

/* De 11px lijkt te weinig en is het niet. Het schuifvenster eronder heeft
   30px binnenruimte boven en wordt met 15px negatieve buitenruimte weer
   omhoog getrokken, dus er komt onzichtbaar 15px bij. Wat je op het scherm
   ziet is 26px, gelijk aan het ontwerp. Wil je die ruimte veranderen: tel bij
   deze waarde altijd 15 op om te weten wat je krijgt. */
.sid-vergelijking .vgl-switch {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 15px;
	margin-bottom: 11px;
}

.sid-vergelijking .vgl-switch-label {
	font-size: 14px;
	color: var(--sid-grijs);
}

/* 8 buiten en 6 binnen komen uit het ontwerp en zijn met opzet niet de 5px
   die de winkel verder overal voor knoppen gebruikt. De buitenrand hoort
   ronder te zijn dan de knop erin; zet je ze gelijk, dan wordt de buitenhoek
   hard. Niet gladstrijken naar --sid-radius of naar 5. */
.sid-vergelijking .vgl-track {
	display: flex;
	gap: 4px;
	padding: 4px;
	background: #fff;
	border: 1px solid var(--sid-lijn);
	border-radius: 8px;
}

.sid-vergelijking .vgl-merk {
	padding: 8px 16px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: var(--sid-grijs);
	cursor: pointer;
	transition: ease .3s all;
}

.sid-vergelijking .vgl-merk[aria-pressed="true"] {
	background: var(--sid-blauw);
	color: #fff;
}

.sid-vergelijking .vgl-paneel[hidden] {
	display: none;
}


/* --- De tabel -------------------------------------------------------------

   SCHUIVEN STAAT ALTIJD AAN, niet alleen op een telefoon. Dit blok komt ook in
   een kolom van 25% te staan, en dan zijn vier kolommen van zeventig pixels
   geen tabel meer. Zie de valkuil van 27-08-2026.

   De binnenruimte op .vgl-scroll is nodig: een venster dat op één as schuift
   knipt de andere as ook af. Er moeten twee dingen in passen. De
   uitgelichte kolom steekt er veertien pixels boven en onder uit, en de
   themaschaduw om het witte blok reikt vijftien pixels naar alle kanten
   (5 spread plus 10 blur, zie --sid-schaduw bovenaan). Zonder die ruimte
   wordt de schaduw links en rechts vlak afgesneden.

   Boven en onder is meer nodig dan opzij, want daar komt de schaduw van de
   uitgelichte kolom er nog bij (0 8px 24px). Onder: 14 uitsteek plus 8 offset
   plus 24 blur is 46. Boven: 14 uitsteek plus 24 blur min 8 offset is 30.

   De negatieve buitenruimte haalt al die ruimte er weer af, zodat de tabel
   even breed blijft, op dezelfde plek staat en gelijk loopt met de kop en de
   introtekst erboven. In de opmaak verschuift dus niets.
   -------------------------------------------------------------------------- */

.sid-vergelijking .vgl-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: -15px -15px -31px;
	padding: 30px 15px 46px;
}

.sid-vergelijking .vgl-tabel {
	position: relative;
	min-width: 660px;
	padding: 14px 0 18px;
	background: #fff;
	border-radius: var(--sid-radius);
	box-shadow: var(--sid-schaduw);
}

/* De uitgelichte kolom. Positie en breedte komen uit het sjabloon, want ze
   hangen vast aan de breukdelen van het raster; zie vergelijking.php. */
.sid-vergelijking .vgl-laag,
.sid-vergelijking .vgl-rand {
	position: absolute;
	top: -14px;
	bottom: -14px;
	left: calc(var(--vgl-links) - 13px);
	width: calc(var(--vgl-breed) + 26px);
	box-sizing: border-box;
	border-radius: var(--sid-radius);
}

.sid-vergelijking .vgl-laag {
	z-index: 0;
	background: linear-gradient(180deg, #E3F2FB 0, #F0F9FE var(--vgl-kophoogte), #F0F9FE 100%);
	box-shadow: 0 8px 24px rgba(0, 37, 51, .12);
}

.sid-vergelijking .vgl-rand {
	z-index: 2;
	border: 1px solid #C7E2F1;
	pointer-events: none;
}

.sid-vergelijking .vgl-kop,
.sid-vergelijking .vgl-rij {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: var(--vgl-raster);
}


/* --- De kolomkoppen -------------------------------------------------------- */

.sid-vergelijking .vgl-kop {
	align-items: end;
	padding: 8px 0 4px;
}

/* De EERSTE groepskop krijgt zijn 15 pixels bovenruimte niet. Die 15 is er om
   groepen onderling uit elkaar te houden (kijk naar PRESTATIES), maar de
   eerste zit al onder de machines en dan stapelt hij op de onderruimte van de
   koprij. Samen was dat een gat van bijna veertig pixels. */
.sid-vergelijking .vgl-kop + .vgl-groep {
	padding-top: 6px;
}

.sid-vergelijking .vgl-kol {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	padding: 0 16px;
}

.sid-vergelijking .vgl-badge {
	display: inline-block;
	margin-top: -25px;
	padding: 5px 14px;
	border-radius: 3px;
	background: var(--sid-blauw);
	color: #fff;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	box-shadow: 0 2px 6px rgba(0, 109, 170, .28);
}

/* ONZE MACHINE HOORT ALTIJD GROTER EN HOGER TE STAAN DAN DE CONCURRENTIE.
   Dat regelt dit vak: 155 hoog tegen de 130 van .vgl-foto, en 230 breed tegen
   180. Omdat de kolommen met hun onderkant uitlijnen steekt onze foto er
   daardoor vijfentwintig pixels bovenuit, wat voor plaat je er ook inhangt.

   Zet height nooit terug op auto. Dan wordt het vak zo hoog als de foto zelf,
   en bij een lage brede plaat (een palletwagen bijvoorbeeld) zakt onze kolom
   onder die van de concurrentie. */
.sid-vergelijking .vgl-onze-foto {
	display: block;

	/* ONZE FOTO STEEKT MET OPZET UIT ZIJN KOLOM. Een rasterkolom is hier maar
	   184 breed en de concurrentfoto's zijn er 180, dus binnen de kolom blijven
	   levert vier pixels voorsprong op en dat ziet niemand. De blauwe kolom is
	   26 breder dan de rasterkolom, daar past dit precies in.

	   Reken het na voordat je hieraan draait: 40 erbij en 20 negatieve marge aan
	   elke kant maakt het vak 224 breed. Pas dan loopt het plaatje tegen de 155
	   hoogte aan in plaats van tegen de breedte, en telt die hoogte ook echt
	   mee. max-width moet daarom none blijven. */
	width: calc(100% + 40px);
	max-width: none;
	height: 155px;
	object-fit: contain;
	object-position: bottom;   /* op dezelfde vloerlijn als de concurrenten */
	margin: 6px -20px -4px;
}

/* De concurrentfoto's zijn achtergronden: die komen in alle maten en moeten
   allemaal in hetzelfde vak passen zonder bij te snijden.

   DE MARGIN-TOP IS DE HOOGTEKNOP VAN DE HELE KOP. De kolomkoppen staan met
   hun onderkant gelijk, dus de langste kolom bepaalt de rijhoogte, en dat zijn
   deze. Elke pixel die je er hier afhaalt maakt het blok een pixel korter en
   trekt de badge van de Clark een pixel dichter naar de bovenrand van de
   blauwe kolom. Stond op 46 (uit het ontwerp), nu 30. Pas je dit aan, pas dan
   --vgl-kophoogte bovenaan met hetzelfde aantal aan, want daar stopt het
   kleurverloop in de blauwe kolom. */
.sid-vergelijking .vgl-foto {
	width: 100%;
	max-width: 180px;
	height: 130px;
	margin-top: 30px;
	/* center BOTTOM, niet center: zo staan alle machines op een vloerlijn in
	   plaats van te zweven in het midden van hun vak. */
	background: no-repeat center bottom / contain;
}

.sid-vergelijking .vgl-foto.leeg {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px dashed var(--sid-lijn);
	border-radius: 5px;
	font-size: 13px;
	color: var(--sid-grijs);
}

.sid-vergelijking .vgl-naam {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: var(--sid-grijs);
	text-align: center;
}

.sid-vergelijking .vgl-naam.is-onze {
	font-size: 20px;
	color: var(--sid-donker);
}

.sid-vergelijking .vgl-prijs {
	font-size: 14px;
	color: var(--sid-grijs);
}

.sid-vergelijking .vgl-prijs.is-onze {
	font-size: 16px;
	font-weight: 700;
	color: var(--sid-blauw-midden);
}


/* --- De groepen en de rijen ------------------------------------------------ */

.sid-vergelijking .vgl-groep {
	position: relative;
	z-index: 1;
	padding: 15px 24px 8px;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sid-blauw);
}

.sid-vergelijking .vgl-rij {
	align-items: stretch;
	min-height: 46px;
	font-size: 14px;
}

.sid-vergelijking .vgl-cel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 12px 16px;
	text-align: center;
	color: var(--sid-grijs);
}

/* DE DRIE SCHEIDINGSLIJNEN ZIJN NIET ÉÉN LIJN.

   Links stopt de lijn dertien pixels voor de uitgelichte kolom, in die kolom
   ligt hij vier pixels HOGER en negen pixels breder aan beide kanten, en
   rechts begint hij weer dertien pixels verderop. Daardoor lijkt het alsof de
   lijn over een bolling heen valt, en dát is wat de kolom omhoog laat komen.
   Maak er één doorlopende lijn van en het effect is weg. */
.sid-vergelijking .vgl-cel.label {
	position: relative;
	padding: 12px 24px;
	text-align: left;
}

.sid-vergelijking .vgl-cel.label::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 13px;
	height: 1px;
	background: var(--sid-lijn-licht);
}

.sid-vergelijking .vgl-cel.onze {
	position: relative;
	padding: 10px 16px 14px;
	font-weight: 700;
	font-size: 16px;
	color: var(--sid-donker);
}

.sid-vergelijking .vgl-cel.onze::before {
	content: "";
	position: absolute;
	top: -4px;
	left: -9px;
	right: -9px;
	height: 1px;
	background: #D3E7F4;
}

.sid-vergelijking .vgl-cel.riv1 {
	position: relative;
}

.sid-vergelijking .vgl-cel.riv1::before {
	content: "";
	position: absolute;
	top: 0;
	left: 13px;
	right: 0;
	height: 1px;
	background: var(--sid-lijn-licht);
}

.sid-vergelijking .vgl-cel.riv2,
.sid-vergelijking .vgl-cel.riv3 {
	border-top: 1px solid var(--sid-lijn-licht);
}

.sid-vergelijking .vgl-noot {
	margin-top: 3px;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sid-blauw-midden);
}

.sid-vergelijking .vgl-kruis {
	color: var(--sid-rood);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
}

.sid-vergelijking .vgl-onbekend {
	color: var(--sid-grijs);
}

.sid-vergelijking .vgl-bron {
	margin: 0;
	padding: 16px 4px 0;
	font-size: 13px;
	color: var(--sid-grijs);
}


/* --- Op een telefoon ------------------------------------------------------- */

@media only screen and (max-width: 760px) {

	.sid-vgl-kop {
		font-size: 20px;
		line-height: 1.25;
	}

	.sid-vergelijking .vgl-switch {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	/* 44px is de kleinste maat die je met een duim betrouwbaar raakt. */
	.sid-vergelijking .vgl-merk {
		flex: 1 1 0;
		min-height: 44px;
	}

	.sid-vergelijking .vgl-naam {
		font-size: 16px;
	}

	.sid-vergelijking .vgl-naam.is-onze {
		font-size: 18px;
	}

	.sid-vergelijking .vgl-cel {
		padding: 12px 10px;
		font-size: 13px;
	}

	.sid-vergelijking .vgl-cel.label {
		padding: 12px 14px;
	}

	.sid-vergelijking .vgl-cel.onze {
		padding: 10px 10px 14px;
		font-size: 15px;
	}

	.sid-vergelijking .vgl-groep {
		padding: 15px 14px 8px;
	}
}


/* --- Wie liever geen beweging ziet ----------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.sid-vergelijking .vgl-merk {
		transition: none;
	}
}


/* ==========================================================================
   33. DE ANKERBALK OP DE PRODUCTPAGINA

   Hoort bij inc/siderius-webshop/ankerbalk.php en js/siderius-ankerbalk.js.

   ALLE WAARDEN HIERONDER KOMEN UIT HET ONTWERP EN VALLEN SAMEN MET HET PALET.
   #002533 is --sid-donker, #009EE3 is --sid-blauw, de 1400 is .in-grid van
   Cherry en de 30 binnenruimte is dezelfde goot. Er is dus geen enkele
   uitzondering nodig, en dat is precies waarom de balk uitlijnt met de content
   eronder zonder dat er iets nagerekend hoeft te worden.

   HIJ IS ROND EN LOOPT NIET TOT DE SCHERMRAND, en dat kan ook niet. Het thema
   topt main.site-main af op 1400 en de balk zit daarbinnen, dus hij is precies
   zo breed als de content eronder. Van rand tot rand zou een truc met 100vw en
   negatieve marges vergen, en dan moet er ergens overflow-x: hidden bij - wat
   position: sticky in een aantal browsers sloopt. Niet doen dus.

   De binnenruimte van 30 uit het ontwerp staat daarom op nul. Die 30 was daar
   de goot van de pagina; hier zit de balk al binnen die goot en zou hij dubbel
   tellen. De 22 binnenruimte van het tabblad zelf doet nu het inspringen.

   HIJ PLAKT OP 119. Dat is de hoogte van de vaste header, hetzelfde getal als
   de padding-top van body in sectie 8. Verandert die hoogte, dan verandert
   deze mee, en de scroll-margin van de ankerpunten ook.
   ========================================================================== */

/* DE RUIMTE BOVEN DE BALK STAAT HIER, DIE ERONDER NIET.

   De balk wordt vlak voor de flexrij afgedrukt. De witruimte die je in de
   backend bij die rij instelt (Whitespace top: None, Small, Medium, Large =
   0, 60, 120 of 180) komt daardoor ONDER de balk terecht in plaats van
   erboven. Dat blijft zo, want die kant wil Tomas zelf per product kunnen
   regelen.

   Boven de balk kan dat niet, want daar zit geen rij waar je iets aan kunt
   zetten. Vandaar deze 60. Dat is dezelfde maat als Cherry's Small, zodat de
   balk in dezelfde maatvoering valt als de rest van de pagina. */
/* DE BALK VOLGT DE HEADER, WANT DIE VERSTOPT ZICH.
   Cherry schuift de header weg zodra je naar beneden scrolt: body krijgt dan
   .nav-up en de header een transform van -119.6. Blijft de balk dan op 119
   staan, dan zweeft hij met een gat erboven dwars over de inhoud. Daarom zakt
   hij mee naar 0 zolang de header weg is, en gaat hij terug naar 119 zodra je
   omhoog scrolt en de header terugkomt.

   De transition laat hem meeglijden in plaats van springen. */
.sid-ankerbalk {
	margin-top: 60px;
	position: sticky;
	top: 119px;
	z-index: 90;   /* onder de header en onder de winkelwagenlade */
	border-radius: var(--sid-radius);
	background: var(--sid-donker);
	transition: top .3s ease;
}

body.nav-up .sid-ankerbalk {
	top: 0;
}

.admin-bar .sid-ankerbalk {
	top: 151px;   /* 119 plus de 32 van de beheerbalk */
}

body.admin-bar.nav-up .sid-ankerbalk {
	top: 32px;   /* de beheerbalk blijft wel staan */
}

/* Schuiven op een smal scherm. Vijf tabbladen passen niet naast elkaar op een
   telefoon, en afbreken naar twee regels maakt van de balk een blok. De
   schuifbalk zelf verbergen we: die hoort bij een balk van 52 hoog niet in
   beeld, en je ziet aan het afgesneden tabblad dat er meer is. */
.sid-ankerbalk-binnen {
	display: flex;
	gap: 8px;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.sid-ankerbalk-binnen::-webkit-scrollbar {
	display: none;
}

/* ELKE LINKREGEL HIERONDER STAAT MET OPZET ONDER .sid-ankerbalk.
   Zonder dat voorvoegsel wint het thema. In style.css regel 2126 staat
   `a:visited, a:hover, a:focus, a:active { color: #006daa }`, en een element
   met een pseudo-klasse weegt zwaarder dan een losse klasse. Zodra je een keer
   op een tabblad had geklikt telde die link als bezocht en werd hij blauw -
   juist de tabbladen die uit horen te staan. Haal dat voorvoegsel dus niet weg
   omdat het overbodig lijkt. */
.sid-ankerbalk .sid-ankerlink {
	position: relative;
	flex: 0 0 auto;
	padding: 15px 22px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.4;
	color: rgba(255, 255, 255, .75);
	text-decoration: none;
	white-space: nowrap;
	transition: ease .3s color;
}

.sid-ankerbalk .sid-ankerlink:hover,
.sid-ankerbalk .sid-ankerlink:focus-visible {
	color: #fff;
	text-decoration: none;
}

/* Het tabblad waar je bent. De onderruimte gaat van 15 naar 18 om plaats te
   maken voor het streepje; daardoor blijft de tekst zelf op zijn plek staan in
   plaats van een paar pixels te springen terwijl je scrolt. */
.sid-ankerbalk .sid-ankerlink.is-actief {
	padding-bottom: 18px;
	font-weight: 700;
	color: #fff;
}

.sid-ankerbalk .sid-ankerlink.is-actief::after {
	content: "";
	position: absolute;
	left: 22px;
	right: 22px;
	bottom: 0;
	height: 4px;
	border-radius: 3px;
	background: var(--sid-blauw);
}

/* Benchmark. Altijd de uitgelichte, want dat is het blok waarmee je wint. */
.sid-ankerbalk .sid-ankerlink.is-uitgelicht {
	align-self: center;
	margin-left: 8px;
	padding: 11px 24px;
	border-radius: 5px;
	background: var(--sid-blauw);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .02em;
	transition: ease .3s all;
}

.sid-ankerbalk .sid-ankerlink.is-uitgelicht:hover,
.sid-ankerbalk .sid-ankerlink.is-uitgelicht:focus-visible {
	background: var(--sid-blauw-donker);
	color: #fff;
}

/* Sta je bij het vergelijkingsblok, dan verandert er aan de knop niets. Geen
   streepje eronder en geen ring eromheen: allebei geprobeerd, allebei zag het
   er niet uit. De knop valt zelf al genoeg op tussen de andere tabbladen.

   DE PADDING MOET HIER WEL HERHAALD WORDEN. De algemene actieve regel
   hierboven zet padding-bottom op 18 om plaats te maken voor het streepje; bij
   een knop zou die daardoor uitrekken zodra je erbij staat. */
.sid-ankerbalk .sid-ankerlink.is-uitgelicht.is-actief {
	padding: 11px 24px;
}

.sid-ankerbalk .sid-ankerlink.is-uitgelicht.is-actief::after {
	display: none;
}

/* Het ankerpunt vlak voor elk blok. Nul hoog, dus het duwt niets opzij.

   DIT IS DE TERUGVAL VOOR ALS HET SCRIPT WEGVALT. Dan zijn het gewone
   ankerlinks, springt de browser er hard naartoe en blijft de header staan,
   dus is de ruimte de header van 119 plus de balk van 54 plus lucht.

   MET HET SCRIPT ERBIJ TELT DEZE WAARDE NIET. siderius-ankerbalk.js rekent de
   eindpositie zelf uit, omdat scroll-margin bij zacht scrollen genegeerd bleek
   te worden en de sprong dan bovenaan uitkwam in plaats van onder de balk. */
.sid-ankerpunt {
	display: block;
	height: 0;
	scroll-margin-top: 190px;
}

.admin-bar .sid-ankerpunt {
	scroll-margin-top: 222px;
}


/* HET EERSTE BLOK IN EEN KOLOM KRIJGT GEEN BOVENRUIMTE.
   Onze productblokken hebben 30 pixels margin-top om elkaar onderling uit
   elkaar te houden. Bij het eerste blok in een kolom is dat dode ruimte, en
   omdat de zijkolom die 30 niet heeft begon de linkerkolom 30 lager dan de
   rechter. Dat leest als een uitlijningsfout terwijl de kolommen zelf keurig
   op dezelfde hoogte staan.

   De tweede regel is er vanwege het ankerpunt: dat is een leeg puntje dat vlak
   voor het blok staat, dus het blok is niet meer :first-child. Beide vormen
   moeten dus genoemd worden.

   Alleen binnen .sid-productopbouw, dus dit raakt geen enkele andere pagina. */
.sid-productopbouw .cc-contentcontainer > :first-child,
.sid-productopbouw .cc-contentcontainer > .sid-ankerpunt:first-child + * {
	margin-top: 0;
}


/* --- Op een telefoon ------------------------------------------------------- */

@media only screen and (max-width: 760px) {

	.sid-ankerbalk-binnen {
		padding: 0 15px;
		gap: 4px;
	}

	.sid-ankerbalk .sid-ankerlink {
		padding: 14px;
		font-size: 14px;
	}

	.sid-ankerbalk .sid-ankerlink.is-actief {
		padding-bottom: 17px;
	}

	.sid-ankerbalk .sid-ankerlink.is-actief::after {
		left: 14px;
		right: 14px;
	}

	.sid-ankerbalk .sid-ankerlink.is-uitgelicht,
	.sid-ankerbalk .sid-ankerlink.is-uitgelicht.is-actief {
		margin-left: 4px;
		padding: 9px 16px;
		font-size: 13px;
	}
}


/* --- Wie liever geen beweging ziet ----------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.sid-ankerbalk .sid-ankerlink {
		transition: none;
	}
}


/* ==========================================================================
   34. DE CONTACTKAARTEN

   Hoort bij inc/flex/row_contact_repeater.php en contact_block() in
   inc/elements.php.

   HET SKELET IS DAT VAN CHERRY, DE RICHTING NIET. Bij hun link-block en
   location-block staat .inner-item op flex-direction column met de foto boven.
   Hier staat hij op row met de foto links, ook op een telefoon. Dat is een
   keuze van Tomas: een vorm, overal hetzelfde.

   ALLE WAARDEN KOMEN UIT HET PALET. Het ontwerp van Tomas had er zeven al
   exact goed staan; de vier die afweken zijn hier vervangen:
       schaduw        0 2px 8px .07   ->  --sid-schaduw, de gloed van de site
       WhatsApp-hover #CFF3E0         ->  --sid-whatsapp-hover
       WhatsApp-tekst #0b2e19         ->  --sid-donker
       grijs achter de foto #E4E8EA   ->  vervallen, Cherry's terugvalafbeelding

   DE PIL IS DE VORM VAN EEN CHIP, 5PX IS DE VORM VAN EEN KNOP. Vastgesteld
   14-09-2026 door Tomas. De WhatsApp-knop in de winkelwagen (.sid-som-app)
   blijft dus 5px: dat is een knop. Deze twee zijn chips.

   DE KLEUR VOLGT UIT HET SOORT KNOP EN IS NERGENS IN TE STELLEN:
       WhatsApp   vlak --sid-whatsapp-vlak   bolletje --sid-whatsapp
       Route      vlak --sid-lichtblauw      bolletje --sid-blauw
   ========================================================================== */

/* --- het raster ------------------------------------------------------------
   Exact de regels die style.css voor .flex-locations-repeater heeft. Die
   staan daar op hun eigen klasse, dus voor de onze moeten ze hier opnieuw.
   Tussen 25% en 33% betekent: drie naast elkaar, en een tweede rij van twee
   blijft ook op een derde staan in plaats van uit te rekken. */

.flex-contact-repeater .in-grid {
	align-items: stretch;
	justify-content: flex-start;
	margin-top: -30px;
}

.flex-contact-repeater .in-grid > .block-item {
	flex: 1 1 0;
	min-width: calc(100% / 4);
	max-width: calc(100% / 3);
	margin-top: 30px;
}

@media only screen and (max-width: 1400px) {
	.flex-contact-repeater .in-grid > .block-item {
		min-width: calc(100% / 3);
		max-width: calc(100% / 3);
	}
}

@media only screen and (max-width: 991px) {
	.flex-contact-repeater .in-grid > .block-item {
		min-width: calc(100% / 2);
		max-width: calc(100% / 2);
	}
}

@media only screen and (max-width: 680px) {
	.flex-contact-repeater .in-grid > .block-item {
		min-width: 100%;
		max-width: 100%;
	}
}


/* --- de kaart -------------------------------------------------------------
   height 100% samen met de align-items: stretch hierboven maakt alle kaarten
   in dezelfde rij even hoog. min-width: 0 is nodig omdat een flexkind anders
   niet kleiner wil worden dan zijn inhoud, en dan loopt een lang adres de
   kaart uit. */

.block-item.contact-block .inner-item {
	display: flex;
	height: 100%;
	min-width: 0;
	border-radius: var(--sid-radius);
	background: #fff;
	box-shadow: var(--sid-schaduw);
	overflow: hidden;
}

.block-item.contact-block .image-container {
	flex: none;
	width: 96px;
}

.block-item.contact-block .inner-image-container,
.block-item.contact-block .inner-image-container img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* space-between duwt de knoppen naar de onderrand. Daardoor liggen ze op een
   lijn met die van de kaart ernaast, ook als het adres daar twee regels is. */
.block-item.contact-block .content-container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 1 1 auto;
	min-width: 0;
	padding: 14px 16px 15px;
}

.block-item.contact-block .top-container {
	margin-bottom: 10px;
}

.block-item.contact-block h4 {
	margin: 0;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 19px;
	line-height: 1.15;
	color: var(--sid-donker);
}

.block-item.contact-block .contact-subtitle {
	margin-top: 2px;
	font-size: 13px;
	line-height: 1.3;
	color: var(--sid-grijs);
}


/* --- de regel met het telefoonnummer of het adres --------------------------
   Een nummer past altijd op een regel en krijgt daarom nowrap met een ellipsis
   als vangnet. Een adres moet juist wel afbreken, en dan hoort het speldje
   bovenaan te staan en niet in het midden van twee regels. */

.block-item.contact-block .contact-line {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 9px;
	min-width: 0;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.4;
	color: var(--sid-donker);
	text-decoration: none;
}

.block-item.contact-block a.contact-line:hover,
.block-item.contact-block a.contact-line:focus-visible {
	color: var(--sid-blauw-midden);
	text-decoration: none;
}

.block-item.contact-block .contact-line.is-address {
	align-items: flex-start;
}

.block-item.contact-block .contact-icon {
	flex: none;
	display: block;
	color: var(--sid-blauw);
}

.block-item.contact-block .contact-line.is-address .contact-icon {
	margin-top: 2px;
}

.block-item.contact-block .contact-icon svg {
	display: block;
	width: 15px;
	height: 15px;
}

.block-item.contact-block .contact-text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.block-item.contact-block .is-address .contact-text {
	overflow: visible;
	white-space: normal;
}


/* --- de knoppen ------------------------------------------------------------
   Wrap staat aan voor het geval een chip en het grijze linkje samen niet meer
   passen, bijvoorbeeld op een halve kolom van 991px. Dan zakt het linkje eronder
   in plaats van dat de chip in elkaar wordt gedrukt. */

.block-item.contact-block .bottom-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	min-width: 0;
}

.block-item.contact-block .contact-chip {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 13px 8px 9px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 13px;
	line-height: 1.2;
	color: var(--sid-donker);
	text-decoration: none;
	white-space: nowrap;
	transition: ease .3s background;
}

.block-item.contact-block .contact-chip:hover,
.block-item.contact-block .contact-chip:focus-visible {
	color: var(--sid-donker);
	text-decoration: none;
}

.block-item.contact-block .chip-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
}

.block-item.contact-block .chip-icon svg {
	display: block;
	width: 12px;
	height: 12px;
}

.block-item.contact-block .contact-chip.is-whatsapp { background: var(--sid-whatsapp-vlak); }
.block-item.contact-block .contact-chip.is-whatsapp:hover,
.block-item.contact-block .contact-chip.is-whatsapp:focus-visible { background: var(--sid-whatsapp-hover); }
.block-item.contact-block .contact-chip.is-whatsapp .chip-icon { background: var(--sid-whatsapp); }

.block-item.contact-block .contact-chip.is-route { background: var(--sid-lichtblauw); }
.block-item.contact-block .contact-chip.is-route:hover,
.block-item.contact-block .contact-chip.is-route:focus-visible { background: var(--sid-blauwrand); }
.block-item.contact-block .contact-chip.is-route .chip-icon { background: var(--sid-blauw); }

/* Het grijze linkje ernaast. Leest als "kan ook" zonder de chip te beconcurreren. */
.block-item.contact-block .contact-sub {
	flex: none;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--sid-grijs);
	text-decoration: none;
	transition: ease .3s color;
	white-space: nowrap;
}

.block-item.contact-block .contact-sub:hover,
.block-item.contact-block .contact-sub:focus-visible {
	color: var(--sid-blauw-midden);
	text-decoration: none;
}


/* --- wie liever geen beweging ziet ----------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.block-item.contact-block .contact-chip,
	.block-item.contact-block .contact-sub {
		transition: none;
	}
}


/* ==========================================================================
   35. DE KLANTCONTACTSECTIE

   Hoort bij inc/siderius-webshop/klantcontact.php, templates/klantcontact.php
   en het blok in template-parts/content-page.php.

   DE KOP EN DE TWEE KOLOMMEN STAAN IN EEN EIGEN .in-grid VAN 1400. Jouw
   flexrijen hebben er zelf ook een, maar die max-width is een bovengrens en
   geen ondergrens: in een kolom van 1000 vult hij gewoon die 1000. Daarom
   werken alle bestaande rijen hierbinnen zonder aanpassing.

   ALLE WAARDEN KOMEN UIT HET PALET.
   ========================================================================== */

/* 1400 breed met 15px goot: exact .in-grid met .gut van Cherry, dezelfde maat
   die main.site-main op het productoverzicht gebruikt. Stond hier eerst op 30,
   overgenomen van de offertepagina, en daardoor begon het menu 15px verder naar
   binnen dan de categoriebalk op het overzicht. Nagemeten in de browser op
   14-09-2026: allebei nu links op 223,5 bij een venster van 1832. */
.sid-kc-binnen {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 15px;
}

/* --- de kop boven beide kolommen ------------------------------------------
   Titel, blauw streepje en intro staan hier en niet in de flexcontent, zodat
   ze op elke pagina van de sectie op dezelfde hoogte beginnen. */

.sid-kc-kop {
	padding-top: 50px;
}

.sid-kc-titel {
	margin: 0;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 38px;
	line-height: 1.15;
	color: var(--sid-donker);
}

.sid-kc-intro {
	max-width: 760px;
	margin: 16px 0 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--sid-grijs);
}


/* --- de twee kolommen ------------------------------------------------------
   align-items: flex-start zorgt dat het zijmenu niet meerekt met een lange
   pagina. min-width: 0 op de rechterkolom is nodig omdat een flexkind anders
   niet smaller wil worden dan zijn inhoud, en dan duwt een brede tabel of een
   lange url de hele pagina scheef. */

/* EXACT HET RASTER VAN DE CATEGORIEPAGINA (.sid-overzicht-kolommen, sectie
   15): 264 voor de zijbalk, de rest voor de inhoud, 30 ertussen. Stond hier
   eerst op 300 en dat was breder dan alles wat de winkel al heeft. Verander je
   die 264, verander sectie 15 dan mee. */
.sid-kc-kolommen {
	display: grid;
	grid-template-columns: 264px minmax(0, 1fr);
	gap: 30px;
	align-items: start;
	padding: 30px 0 60px;
}

/* HET MENU PLAKT NIET. Dat heeft er even in gezeten, maar Tomas wil hem 14-09
   gewoon boven aan de kolom, net als de categoriebalk op het productoverzicht:
   scrol je naar beneden, dan hoor je hem niet meer te zien. align-items: start
   op het raster hierboven zorgt dat hij niet meerekt met een lange pagina. */

/* min-width: 0 blijft nodig, ook in een raster: een rastervak wil van zichzelf
   niet smaller worden dan zijn inhoud, en dan duwt een brede tabel of een lange
   url de hele pagina scheef. De flex-regel die hier stond is weg, die deed
   niets meer sinds dit een raster werd. */
.sid-kc-inhoud {
	min-width: 0;
}


/* --- EEN KOLOM IS HIER DE HELE KOLOM --------------------------------------

   style.css regel 2723 zegt:

       .num-cols-1.flex-content-columns-row .col-1 {
           width: calc(100% / 12 * 8) !important;
           margin: auto;
       }

   Dus een rij met één kolom wordt bij Cherry 8 van de 12 en staat in het
   midden. Dat is een goede keuze van hen: op een pagina over de volle breedte
   worden regels tekst anders onleesbaar lang.

   ALLEEN GELDT DIE REDEN HIER NIET MEER. Deze kolom is al versmald door het
   menu ernaast. Nog eens tweederde nemen levert 698 van de 1046 op, met de
   rest leeg, en gecentreerd zodat hij ook nog los van het menu zweeft.

   DEZE REGEL GELDT ALLEEN BINNEN DE KLANTCONTACTSECTIE. Buiten .sid-kc-inhoud
   bestaat dat element niet, dus daar blijft Cherry's regel gewoon de enige.
   Een gewone pagina met één kolom blijft dus 8 van de 12 en gecentreerd.

   EN ALLEEN BIJ ÉÉN KOLOM. Zet je hier ooit een echte tweekolomsrij neer, dan
   werkt die zoals Cherry het bedoeld heeft.

   Het !important moet, want dat van hen staat er ook. Vastgesteld met Tomas
   op 14-09-2026, na het naast elkaar zetten van beide standen in de browser. */

.sid-kc-inhoud .num-cols-1.flex-content-columns-row .col-1 {
	width: 100% !important;
	margin: 0;
}

/* De flexrijen binnen de kolom hoeven hun eigen goot niet meer te zetten; die
   zit al in .sid-kc-binnen. Zonder dit staat de inhoud 15px te ver naar
   binnen ten opzichte van de kop erboven. */
.sid-kc-inhoud .in-grid {
	max-width: none;
}

.sid-kc-inhoud .gut > a,
.sid-kc-inhoud .gut > div,
.sid-kc-inhoud .gut > form,
.sid-kc-inhoud .gut > header,
.sid-kc-inhoud .gut > article {
	padding-left: 0 !important;
	padding-right: 0 !important;
}


/* --- de zoekbalk -----------------------------------------------------------
   Toegevoegd 28-09-2026. Hoort bij inc/siderius-webshop/klantcontact-zoeken.php.

   HIJ STAAT BOVEN HET MENU EN IS ZIJN EIGEN BALK, geen regel binnen de kaart.
   Op die manier staat hij op de hoogte waar op Mijn dashboard de eerste
   menuregel staat, en schuift het menu eronder. Vandaar 50px: dat is de hoogte
   van de hubregel (15px boven, 15px onder, 20px tekst).

   DEZELFDE RONDING ALS DE KAART ERONDER, MAAR GEEN SCHADUW. Een kaart heeft
   op deze site een schaduw, een invoerveld een lijn. Dit is een invoerveld.
   ------------------------------------------------------------------------- */

.sid-kc-zoek {
	position: relative;
	margin-bottom: 16px;
}

/* Zelf getekend, net als de pictogrammen in het menu. pointer-events uit, want
   het glas ligt over het veld heen en je moet er dwars doorheen kunnen
   klikken. */
.sid-kc-zoek-glas {
	position: absolute;
	top: 50%;
	left: 14px;
	width: 17px;
	height: 17px;
	margin-top: -8.5px;
	color: var(--sid-grijs);
	pointer-events: none;
}

/**
 * DE SELECTOR IS ZWAARDER DAN EEN KLASSE, EN DAT MOET.
 *
 * style.css regel 576 en 624 zetten op input[type="search"] een padding van
 * 5px 10px en een tekstgrootte van 18px. Dat is een element met een
 * attribuut, en dat weegt zwaarder dan een losse klasse. Met alleen
 * .sid-kc-zoek-veld won het thema: de tekst stond op 18px en begon links
 * tegen de rand, dwars door het vergrootglas heen.
 *
 * Dezelfde botsing als bij .sid-kc-item en .sid-ankerlink. Een klasse binnen
 * een klasse plus het element erbij wint met ruimte.
 */
.sid-kc-zoek input.sid-kc-zoek-veld {
	display: block;
	width: 100%;
	height: 50px;
	margin: 0;
	box-sizing: border-box;
	/* Links ruimte voor het glas: dat staat op 14 en is 17 breed, dus het
	   houdt op bij 31. De tekst begint bij 42 en raakt het dus niet. */
	padding: 0 14px 0 42px;
	border: 1px solid var(--sid-lijn);
	border-radius: var(--sid-radius);
	background: #fff;
	/* GEEN schaduw. De kaart eronder heeft er een omdat het een kaart is; dit
	   is een invoerveld en die hebben op deze site een lijn en verder niets. */
	box-shadow: none;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 400;
	/* De hoogte min de twee randen. Een invoerveld midden zetten met alleen
	   een hoogte doet niet elke browser hetzelfde; met deze regelhoogte wel. */
	line-height: 48px;
	color: var(--sid-donker);
	transition: ease .2s border-color;
}

.sid-kc-zoek-veld::placeholder {
	color: var(--sid-grijs);
	opacity: 1;
}

/* GEEN dikke blauwe rand bij focus. De lijn die er al staat wordt blauw, meer
   niet; een outline van 2px legt er een tweede rand naast en dat schreeuwt. */
.sid-kc-zoek input.sid-kc-zoek-veld:focus {
	border-color: var(--sid-blauw);
	outline: none;
}

.sid-kc-zoek:focus-within .sid-kc-zoek-glas {
	color: var(--sid-blauw-midden);
}


/* --- wat de zoekbalk laat zien ---------------------------------------------

   Typ je iets, dan zet het script .is-zoeken op de rechterkolom en verdwijnt
   alles wat van de pagina zelf komt. Het blok met de gevonden antwoorden is
   het enige kind dat blijft staan.

   .is-laatst komt van het script en zet de streep onder de onderste zichtbare
   vraag weg. :last-child kan dat niet: een verborgen vraag is nog steeds een
   kind.
   ------------------------------------------------------------------------- */

.sid-kc-inhoud.is-zoeken > *:not(.sid-kc-uitslag) {
	display: none;
}

.sid-kc-uitslag-stand {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--sid-grijs);
}

.sid-faq-item.is-laatst {
	border-bottom: 0;
}


/* --- het lijstje -----------------------------------------------------------
   OVERGENOMEN UIT HET ONTWERP VAN TOMAS (14-09-2026).

   DE ITEMS LOPEN TOT DE RAND, ER ZIT GEEN BINNENRUIMTE OP DE KAART. Daarom
   staat overflow: hidden op .sid-kc-menu: dan wordt de hoverstand door de
   ronding afgesneden in plaats van eroverheen te lopen. Zet je hier padding
   op, dan zweeft elke regel los in de kaart en is het het ontwerp niet meer.

   DRIE WAARDEN WEKEN AF EN ZIJN VERVANGEN:
       vlak bij hover en actief  #F3F8FB  ->  --sid-lichtblauw #EAF6FD
       pictogram in rust         #8a9095  ->  --sid-grijs      #6B7278
       schaduw           0 0 10px 5px .05 ->  --sid-schaduw    (.1)
   De schaduw omdat Tomas 14-09 zei: altijd dezelfde als de site.

   DAT VLAK IS LICHTBLAUW EN NIET GRIJS, EN DAT IS EEN CORRECTIE.
   Ik had #F3F8FB eerst naar --sid-vlak gemapt, het grijze vlak. Fout: de
   winkel heeft dit soort lijstje al, namelijk de categorielijst op het
   productoverzicht (.sid-zijbalk-item, sectie 15). Daar staan hover en actief
   op --sid-lichtblauw, en in het commentaar daarboven staat dat precies
   diezelfde #F3F8FB er ooit uit is gehaald omdat hij verder nergens voorkwam.

   Twee lijstjes die hetzelfde doen horen er hetzelfde uit te zien. Verander
   je dit ooit, verander sectie 15 dan mee.
   ------------------------------------------------------------------------- */

.sid-kc-menu {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--sid-radius);
	background: #fff;
	box-shadow: var(--sid-schaduw);
}

.sid-kc-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 22px 13px 26px;
	/* NORMAAL, NIET 600. Het ontwerp had 600 en dat leest in Open Sans bijna
	   als vet; alle elf regels stonden dan even zwaar als de actieve. Zo doet
	   de categorielijst op het productoverzicht het ook: gewone regels normaal,
	   alleen de hub en de actieve op 700. Gewijzigd 14-09-2026 door Tomas. */
	font-weight: 400;
	font-size: 15px;
	line-height: 1.35;
	color: var(--sid-donker);
	text-decoration: none;
	transition: ease .2s all;
}

/* EEN BEZOCHTE LINK BLIJFT DONKER, EN DAAR IS EEN REGEL VOOR NODIG.
   style.css regel 2125 zegt a:visited, a:hover, a:focus, a:active { color:
   #006daa }. Dat weegt zwaarder dan een enkele klasse, dus zonder deze regel
   worden de onderwerpen die je een keer geopend hebt permanent blauw en lijkt
   het alsof er vijf pagina's tegelijk actief zijn.

   Precies dezelfde botsing als bij .sid-ankerlink in sectie 33. Twee klassen
   achter elkaar weegt zwaarder dan hun element plus pseudoklasse, en dit
   bestand laadt ook nog eens na het hunne. */
.sid-kc-item:visited {
	color: var(--sid-donker);
}

.sid-kc-item:visited .sid-kc-icoon {
	color: var(--sid-grijs);
}

/* Cherry onderstreept elke link bij hover, vandaar text-decoration in alle
   standen. Zie ook de noot bij .sid-som-app in sectie 30. */
.sid-kc-item:hover,
.sid-kc-item:visited:hover,
.sid-kc-item:focus-visible {
	background: var(--sid-lichtblauw);
	color: var(--sid-blauw-midden);
	text-decoration: none;
}

/* De hub staat apart bovenaan: altijd vet, eigen binnenruimte en een lijn
   eronder. Hij is de sectie zelf en geen onderwerp erbinnen. */
.sid-kc-item.is-hub {
	padding: 15px 22px;
	font-weight: 700;
	border-bottom: 1px solid var(--sid-lijn-licht);
}

.sid-kc-item.is-actief,
.sid-kc-item.is-actief:visited,
.sid-kc-item.is-actief:hover,
.sid-kc-item.is-actief:focus-visible {
	background: var(--sid-lichtblauw);
	color: var(--sid-blauw-midden);
	font-weight: 700;
	text-decoration: none;
}

.sid-kc-icoon {
	flex: none;
	display: block;
	color: var(--sid-grijs);
	transition: ease .2s color;
}

.sid-kc-item:hover .sid-kc-icoon,
.sid-kc-item:focus-visible .sid-kc-icoon,
.sid-kc-item.is-actief .sid-kc-icoon,
.sid-kc-item.is-actief:visited .sid-kc-icoon {
	color: var(--sid-blauw-midden);
}

.sid-kc-icoon svg {
	display: block;
	width: 18px;
	height: 18px;
}

.sid-kc-naam {
	min-width: 0;
}


/* --- op een smaller scherm -------------------------------------------------
   Onder 991 gaat het lijstje boven de inhoud staan in plaats van ernaast, en
   de items komen naast elkaar als een rij tabbladen die je kan schuiven. Vijf
   regels tekst onder elkaar boven een pagina is geen menu meer, dat is een
   hindernis. */

@media only screen and (max-width: 991px) {

	.sid-kc-kop { padding-top: 30px; }
	.sid-kc-titel { font-size: 30px; }

	/* Naast de titel is hier geen ruimte meer: dan maar eronder, in de rij. */
	.sid-geg-toastplek {
		position: static;
		margin-top: 16px;
	}

	.sid-kc-kolommen {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		padding: 20px 0 40px;
	}

	.sid-kc-menu {
		flex-direction: row;
		gap: 4px;
		padding: 6px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.sid-kc-menu::-webkit-scrollbar {
		display: none;
	}

	.sid-kc-item,
	.sid-kc-item.is-hub {
		flex: 0 0 auto;
		gap: 8px;
		padding: 9px 12px;
		border-bottom: 0;
		border-radius: var(--sid-radius-knop);
		font-size: 14px;
		white-space: nowrap;
	}
}


/* --- wie liever geen beweging ziet ----------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.sid-kc-item {
		transition: none;
	}
}


/* ==========================================================================
   36. HET FAQ-BLOK VAN SIDERIUS

   Hoort bij inc/elements/ce_siderius_faq.php.

   OVERGENOMEN UIT HET ONTWERP VAN TOMAS (14-09-2026). Vier waarden weken af
   en zijn vervangen:
       schaduw        0 2px 8px .07  ->  --sid-schaduw    de gloed van de site
       scheidingslijn #EDEDED        ->  --sid-lijn-licht #F0F0F0
       hoverstand     #F7F9FA        ->  --sid-vlak       #F6F7F9
       antwoordtekst  #3c474d        ->  --sid-donker     #002533
   Die laatste is de lopende tekstkleur van het thema, nagemeten in de browser
   op een categoriepagina. De andere drie verschillen zo weinig dat je ze met
   het blote oog niet ziet.

   ER STAAT HIER GEEN ENKELE REGEL VOOR OPEN EN DICHT. Dat doet <details> zelf.
   Zie de uitleg boven in het php-bestand.

   DE HOOGTE VAN EEN OPEN ANTWOORD STAAT NERGENS VAST. Wil je ooit een
   schuivende animatie, bedenk dan dat je daarvoor een hoogte moet kennen en
   dat je dan alsnog javascript nodig hebt. Voor een lijst vragen is dat het
   niet waard.
   ========================================================================== */

.sid-faq {
	overflow: hidden;
	border-radius: var(--sid-radius);
	background: #fff;
	box-shadow: var(--sid-schaduw);
}

.sid-faq-item {
	border-bottom: 1px solid var(--sid-lijn-licht);
}

.sid-faq-item:last-child {
	border-bottom: 0;
}


/* --- de vraag -------------------------------------------------------------
   list-style: none plus die webkit-regel halen het standaard driehoekje weg
   dat een browser voor een <summary> zet. Allebei nodig: Safari luistert
   alleen naar de tweede. */

.sid-faq-vraag {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px 22px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
	font-size: 16.5px;
	line-height: 1.45;
	color: var(--sid-donker);
	cursor: pointer;
	list-style: none;
	transition: ease .2s background;
}

.sid-faq-vraag::-webkit-details-marker {
	display: none;
}

.sid-faq-vraag:hover {
	background: var(--sid-vlak);
}

/* Met het toetsenbord moet je kunnen zien waar je bent. Een <summary> krijgt
   van de browser een randje, maar dat verdwijnt bij sommige thema-resets. */
.sid-faq-vraag:focus-visible {
	outline: 2px solid var(--sid-blauw);
	outline-offset: -2px;
	background: var(--sid-vlak);
}

.sid-faq-vraag span {
	flex: 1 1 auto;
	min-width: 0;
}

/* De 5px bovenruimte zet de chevron op de eerste regel van de vraag, ook als
   die over twee regels valt. Zonder dat zweeft hij in het midden. */
.sid-faq-vraag svg {
	flex: none;
	display: block;
	width: 15px;
	height: 15px;
	margin-top: 5px;
	color: var(--sid-blauw);
	transition: transform .2s ease;
}

.sid-faq-item[open] .sid-faq-vraag svg {
	transform: rotate(180deg);
}


/* --- het antwoord ---------------------------------------------------------
   Een leesbare regellengte houdt het prettig, vandaar de max-width. De
   binnenruimte loopt links gelijk met de vraag erboven. */

.sid-faq-antwoord {
	max-width: 820px;
	padding: 0 22px 20px;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--sid-donker);
}

.sid-faq-antwoord > :first-child { margin-top: 0; }
.sid-faq-antwoord > :last-child  { margin-bottom: 0; }

.sid-faq-antwoord p {
	margin: 0 0 12px;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.sid-faq-antwoord ul,
.sid-faq-antwoord ol {
	margin: 0 0 12px;
	padding-left: 20px;
}

.sid-faq-antwoord li {
	margin-bottom: 6px;
}

/* De knop van het thema onder een antwoord. Cherry zet er zelf geen ruimte
   boven als hij direct op tekst volgt, vandaar deze regel. */
.sid-faq-antwoord .btns {
	margin-top: 14px;
}


/* --- op een smal scherm ---------------------------------------------------- */

@media only screen and (max-width: 680px) {

	.sid-faq-vraag {
		gap: 12px;
		padding: 15px 16px;
		font-size: 15.5px;
	}

	.sid-faq-antwoord {
		padding: 0 16px 16px;
		font-size: 15px;
	}
}


/* --- wie liever geen beweging ziet ----------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.sid-faq-vraag,
	.sid-faq-vraag svg {
		transition: none;
	}
}

/* ==========================================================================
   LAATST BEKEKEN, ONDERAAN MIJN DASHBOARD (25-09-2026)

   Het raster is .sid-raster, precies hetzelfde als op de categoriepagina en
   bij Vergelijkbare machines: drie kolommen, 20px ertussen, en op smalle
   schermen dezelfde knikpunten. Daarom staat hier alleen de ruimte eromheen
   en de kop.
   ========================================================================== */

.sid-portaal-bekeken {
	margin-top: 40px;
}

.sid-portaal-bekeken > h2 {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 1.2;
	color: var(--sid-donker);
	margin: 0 0 16px;
}

/* ==========================================================================
   VERGELIJKBARE MACHINES (18-09-2026)

   Het blok onder de productpagina, in plaats van WooCommerce's eigen
   "Gerelateerde producten". Zie inc/siderius-portaal/machinepagina.php.

   Het raster is .sid-raster, dus precies hetzelfde als op de
   categoriepagina: drie kolommen, 20px ertussen, en op smalle schermen
   volgt het dezelfde knikpunten. Daarom staat hier alleen de ruimte
   eromheen en de kop.
   ========================================================================== */

.sid-vergelijkbaar {
	margin-top: 48px;
}

.sid-vergelijkbaar-kop {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 26px;
	line-height: 1.2;
	color: var(--sid-donker);
	margin: 0 0 20px;
}

@media (max-width: 767px) {

	.sid-vergelijkbaar {
		margin-top: 32px;
	}

	.sid-vergelijkbaar-kop {
		font-size: 22px;
	}
}

/* ==========================================================================
   DE APPKNOP OP DE PRODUCTPAGINA (18-09-2026)

   Zelfde knop als .sid-som-app in de winkelwagen: groen vlak, groen bolletje,
   donkere tekst. De maten volgen hier .sid-offerteknop erboven, want die twee
   staan onder elkaar en moeten even hoog en even breed zijn.

   Waarom niet gewoon .sid-som-app hergebruiken: die is 44px hoog en heeft
   14px tekst, afgestemd op de smalle kolom van het Overzicht. Naast de
   offerteknop van 15px zou hij net iets kleiner staan, en dat zie je.
   ========================================================================== */

a.sid-machineapp,
a.sid-machineapp:visited {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
	margin-top: 10px;
	padding: 13px 30px;
	border: 2px solid transparent;
	border-radius: 5px;
	background: var(--sid-whatsapp-vlak);
	color: var(--sid-donker);
	font: 700 15px 'Open Sans', sans-serif;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .4px;
	text-decoration: none;
	transition: ease .3s all;
}

a.sid-machineapp:hover,
a.sid-machineapp:focus-visible {
	background: var(--sid-whatsapp-hover);
	color: var(--sid-donker);
	text-decoration: none;
}

a.sid-machineapp svg {
	flex: 0 0 auto;
}

/* ==========================================================================
   DE VOORDEUR VAN HET KLANTPORTAAL (18-09-2026)

   Het inlogscherm, met een eigen kale koptekst en zonder voettekst. Zie
   inc/siderius-portaal/voordeur.php en inloggen.php.

   Alle kleuren en maten komen uit de themawaarden. In het ontwerp stonden
   drie afwijkingen (schaduw .06, inputrand #D5D9DD en tekstgrijs #666); die
   zijn hier teruggebracht naar --sid-schaduw, --sid-lijn en --sid-grijs, zodat
   er niet stilletjes een tweede huisstijl ontstaat.
   ========================================================================== */

/**
 * DE WITTE STROOK BOVEN DE BALK WEG
 *
 * De site heeft een vaste koptekst en houdt daar site-breed ruimte voor vrij:
 *
 *     body           { padding-top: 118px; }   style.css r. 2101
 *     body.admin-bar { padding-top: 118px; }   style.css r. 2108
 *     body           { padding-top: 119px; }   dit bestand, sectie 8
 *
 * De voordeur tekent zijn eigen koptekst en laadt header.php niet. Die
 * gereserveerde ruimte blijft dan als een witte strook boven onze donkere
 * balk staan. Hier zetten we hem terug op nul.
 *
 * TWEE KLASSEN, GEEN !important. body.sid-voordeur-pagina.admin-bar weegt
 * (0,2,1) en wint daarmee van body.admin-bar (0,1,1) en van de 151px-regel
 * in de mediaquery van sectie 8, zonder ergens anders iets te veranderen.
 */
body.sid-voordeur-pagina,
body.sid-voordeur-pagina.admin-bar {
	padding-top: 0;
}

/* Staat er geen logo in de optievelden, dan valt voordeur.php terug op de
   naam van de site. Dan moet die tenminste leesbaar zijn op donkerblauw. */
.sid-voordeur-logo {
	color: #fff;
	font-weight: 700;
	font-size: 22px;
	line-height: 52px;
	text-decoration: none;
}

.sid-voordeur-logo:hover,
.sid-voordeur-logo:focus {
	color: #fff;
	text-decoration: none;
}

.sid-voordeur-balk {
	background: var(--sid-donker);
	padding: 16px 30px;
	display: flex;
	justify-content: center;
}

.sid-voordeur-logo img {
	height: 52px;
	width: auto;
	display: block;
}

.sid-voordeur-vlak {
	background: var(--sid-pagina);
	min-height: calc(100vh - 84px);
	padding: 44px 20px 90px;
	display: flex;
	justify-content: center;
}

.sid-voordeur-kolom {
	width: 100%;
	max-width: 470px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sid-voordeur-terug {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font: 600 14px 'Open Sans', sans-serif;
	color: var(--sid-blauw-midden);
	text-decoration: none;
}

.sid-voordeur-terug:hover {
	color: var(--sid-blauw-donker);
	text-decoration: underline;
}

/* --- de kaarten ----------------------------------------------------------- */

.sid-voordeur-kaart {
	background: #fff;
	border-radius: var(--sid-radius);
	box-shadow: var(--sid-schaduw);
	padding: 30px;
}

.sid-voordeur-kaart h1 {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 26px;
	line-height: 1.2;
	color: var(--sid-donker);
	margin: 0 0 6px;
}

.sid-voordeur-uitleg {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--sid-grijs);
}

.sid-voordeur-uitleg strong {
	color: var(--sid-donker);
}

.sid-voordeur-klein {
	margin: 14px 0 0;
	font-size: 13px;
	color: var(--sid-grijs);
}

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

.sid-voordeur-kaart label {
	display: block;
	font: 700 14px 'Open Sans', sans-serif;
	color: var(--sid-donker);
	margin: 8px 0 7px;
}

/**
 * ALLE VELDEN, NIET EEN LIJSTJE SOORTEN
 *
 * Hier stond input[type="email"], input[type="text"]. Toen het
 * aanmeldformulier erbij kwam met type="tel" viel dat veld buiten de boot: het
 * kreeg de kale opmaak van het thema (rand 1px #D7D7D7, padding 5px 10px, geen
 * ronde hoek, style.css r. 576) en stond dus vierkant tussen de andere.
 *
 * Een lijstje soorten is altijd te kort: morgen komt er type="number" of
 * type="url" bij en dan gebeurt hetzelfde. Daarom nu andersom: alles wat een
 * invoerveld is, behalve de verborgen velden en de knoppen. De zes codevakjes
 * hebben hun eigen regel verderop en die weegt even zwaar maar staat later,
 * dus die winnen nog steeds.
 *
 * LET OP DE KOMMA'S IN :not(). Drie losse :not()'s achter elkaar tellen alle
 * drie mee en dan weegt deze regel (0,4,1); een enkele :not() met een lijstje
 * erin weegt maar zo zwaar als zijn zwaarste onderdeel, dus (0,2,1). Dat moet
 * ook, want anders wint deze regel van .sid-voordeur-krap en van de codevakjes
 * verderop, en dan klopt hun marge niet meer.
 */
.sid-voordeur-kaart input:not([type="hidden"], [type="submit"], [type="button"]) {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--sid-lijn);
	border-radius: 6px;
	padding: 14px;
	font-size: 15px;
	color: var(--sid-donker);
	margin-bottom: 16px;
}

/**
 * DE ACTIEVE STAND VAN EEN VELD
 *
 * Hier stond een outline van 2px met een offset: een losse blauwe lijn om het
 * veld heen. Dat is de standaardmanier van browsers, maar het thema doet het
 * anders. Die laat de rand zelf van kleur veranderen en zet er niets omheen:
 *
 *     input:focus { color: #002533; }   style.css r. 584
 *     input       { border: 1px solid #D7D7D7; }   style.css r. 582
 *
 * Nu verkleurt alleen de rand naar het Siderius-blauw. Geen tweede lijn, geen
 * sprong in de opmaak, want de rand blijft 1px.
 */
.sid-voordeur-kaart input:focus {
	outline: none;
	border-color: var(--sid-blauw);
}

/* De keuzelijst met de branche krijgt dezelfde jas als de invoervelden
   hierboven, plus het pijltje dat het thema van elke keuzelijst afhaalt. */
.sid-voordeur-kaart select {
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 16px;
	padding: 14px 42px 14px 14px;
	border: 1px solid var(--sid-lijn);
	border-radius: 6px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6469' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 16px 16px;
	font-size: 15px;
	color: var(--sid-donker);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.sid-voordeur-kaart select:focus {
	outline: none;
	border-color: var(--sid-blauw);
}

.sid-voordeur-kaart select.sid-mis {
	border-color: var(--sid-rood);
	margin-bottom: 0;
}

/**
 * ZES VAKJES VOOR ZES CIJFERS
 *
 * Hier stond eerst één breed veld. Dat was mijn keuze, niet die van het
 * ontwerp, omdat zes losse vakjes berucht zijn: plakken werkt niet, backspace
 * springt nergens heen en je moet zes keer klikken. Die bezwaren gaan over het
 * gedrag, niet over de opmaak, en dat gedrag is op te lossen. Het script
 * onderaan inc/siderius-portaal/inloggen.php doet dat. De vakjes zijn hier
 * dus terug, zoals in het ontwerp.
 *
 * width: 100% op elk vakje met flex eromheen: de zes verdelen samen de
 * breedte van de kaart, wat er ook naast staat. Dat komt uit je eigen html.
 */
.sid-voordeur-cijfers {
	display: flex;
	gap: 10px;
	margin-bottom: 18px;
}

/* WAAROM 'input.sid-voordeur-cijfer' EN NIET ALLEEN DE KLASSE
   Een paar regels hierboven staat de regel voor alle invoervelden, met
   een eigen padding en een marge eronder. Dat weegt (0,2,1). Een losse klasse
   weegt (0,1,0) en verliest, waardoor de vakjes hun hoogte en hun tussenruimte
   niet zouden krijgen. Met het element erbij weegt deze regel even zwaar en
   wint hij omdat hij verderop staat. */
.sid-voordeur-kaart input.sid-voordeur-cijfer {
	width: 100%;
	box-sizing: border-box;
	height: 69px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--sid-lijn);
	border-radius: 6px;
	background: #fff;
	font: 700 26px/1 'Open Sans', sans-serif;
	color: var(--sid-donker);
	text-align: center;
}

.sid-voordeur-kaart input.sid-voordeur-cijfer:focus {
	outline: none;
	border-color: var(--sid-blauw);
}

/* Met het script aan verstuurt het formulier zichzelf bij het zesde cijfer.
   De knop is dan overbodig; het script zet deze klasse erop. Zonder script
   blijft de knop gewoon staan. */
.sid-met-script .sid-voordeur-knop {
	display: none;
}

/* De regel onder de vakjes. Het is een knop en geen link, want er gaat een
   formulier mee weg; hij moet er alleen uitzien als een link en meelopen in
   de zin. Het formulier eromheen mag geen eigen ruimte pakken. */
.sid-voordeur-opnieuw {
	margin: 0;
}

.sid-voordeur-tekstknop {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	font-size: inherit;
	color: var(--sid-blauw-midden);
	text-decoration: underline;
	text-transform: none;
	cursor: pointer;
}

/* Dezelfde hoverkleur als bij de knop in de foutmelding hierboven: het
   donkerblauw van het thema. Twee links in dezelfde kaart horen zich
   hetzelfde te gedragen. */
.sid-voordeur-tekstknop:hover {
	background: none;
	color: var(--sid-blauw-donker);
}

/* De knop staat midden in een zin, dus niet centreren en niet over de hele
   breedte. Die twee regels staan wel op .sid-voordeur-knop hierboven; deze
   knop heeft die klasse niet, maar het thema stijlt 'button' rechtstreeks
   (style.css r. 551) en zet daar text-align: center op. Hier terug naar links
   zodat hij zich als gewone tekst gedraagt. */
.sid-voordeur-klein .sid-voordeur-tekstknop {
	display: inline;
	width: auto;
	text-align: left;
	line-height: inherit;
	border-radius: 0;
}

/**
 * DE DOORGAAN-KNOP IS GEWOON DE THEMAKNOP
 *
 * Hier stond een eigen knop: eigen blauw, eigen hoek, eigen lettergrootte, en
 * over de volle breedte. Dat is een tweede huisstijl naast de eerste, en het
 * was ook nergens voor nodig. Het thema stijlt het element <button> zelf al:
 *
 *     .base-button, button, input[type="submit"], .sid-knop {
 *         padding: 15px 30px; background: #009EE3; color: #fff;
 *         font-weight: bold; text-transform: uppercase;
 *         text-align: center; border-radius: 5px;
 *         transition: ease 0.3s all;
 *     }                                          style.css r. 551
 *     :hover { background: #006997; }             style.css r. 573
 *
 * Alles wat hierboven stond kwam daar al vandaan, alleen met andere getallen.
 * Dus is het weg: kleur, hoek, letter en hover komen nu uit het thema.
 *
 * Wat overblijft is het enige wat het thema niet regelt. De knop loopt over de
 * hele breedte van de kaart. Dat is geen afwijking van de themaknop maar een
 * keuze voor dit ene scherm: er staat maar één ding te doen op deze pagina, en
 * op een telefoon is een knop over de volle breedte het makkelijkst te raken.
 * De tekst staat daarbinnen gewoon in het midden, want text-align: center zit
 * al in de themaregel hierboven.
 */
.sid-voordeur-knop {
	display: block;
	width: 100%;
	margin: 4px 0 0;
	border: 0;
	cursor: pointer;
}

/**
 * DE FOUTMELDING BIJ DE CODE (18-09-2026)
 *
 * Stond eerst als kale rode balk BOVEN de vakjes. In het ontwerp staat hij
 * eronder, met een uitroepteken ervoor en met een uitweg erin: stuur een
 * nieuwe code. Dat is beter dan een mededeling zonder vervolg - je leest de
 * melding op het moment dat je naar je vakjes kijkt, en de volgende stap
 * staat er meteen bij.
 *
 * Op het adresscherm staat dezelfde melding gewoon boven het veld; daar is
 * er nog niets om onder te zetten.
 */
.sid-voordeur-fout {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 16px;
	padding: 13px 14px;
	border: 1px solid var(--sid-roodrand);
	border-radius: 6px;
	background: var(--sid-rood-vlak);
	color: var(--sid-rood);
	font-size: 13.5px;
	line-height: 1.5;
}

.sid-voordeur-fout svg {
	display: block;
	width: 15px;
	height: 15px;
	margin-top: 2px;
	flex: none;
}

/* 'stuur een nieuwe code' middenin de zin. Het is een knop, want er gaat een
   formulier mee weg, maar hij moet als link in de zin meelopen - zelfde
   verhaal als bij .sid-voordeur-tekstknop hieronder, alleen in het rood. */
.sid-voordeur-fout .sid-voordeur-foutknop {
	display: inline;
	width: auto;
	padding: 0;
	margin: 0;
	background: none;
	border: 0;
	border-radius: 0;
	font: inherit;
	color: inherit;
	line-height: inherit;
	text-align: left;
	text-transform: none;
	text-decoration: underline;
	cursor: pointer;
}

.sid-voordeur-fout .sid-voordeur-foutknop:hover {
	background: none;
	color: var(--sid-blauw-donker);
}

/* ---- een veld dat niet goed is ingevuld -------------------------------- */

/**
 * ZOALS DE AFREKENPAGINA HET DOET.
 *
 * Hier stond eerst de vorm van Gravity Forms: een gevuld rood vlakje met een
 * puntje naar boven. Dat is de oude opmaak van het thema en het valt veel te
 * hard aan; de afrekenpagina doet het rustiger en die is nieuwer:
 *
 *     .form-row.woocommerce-invalid input { border-color: var(--sid-rood); }
 *                                                   siderius-shop.css r. 7330
 *     .sid-afrekenen .sid-veldfout { 13px, rood, 5px eronder }        r. 7983
 *
 * Drie dingen kleuren mee: het label, de rand van het veld, en een klein rood
 * regeltje eronder. Geen vlak, geen pijltje, geen hoofdletters. Zo ziet een
 * fout op de voordeur er hetzelfde uit als een fout bij het afrekenen.
 */
.sid-voordeur-kaart label.sid-mis {
	color: var(--sid-rood);
}

.sid-voordeur-kaart input.sid-mis {
	border-color: var(--sid-rood);
	margin-bottom: 0;
}

/* De melding neemt de marge over die het veld hierboven inlevert, zodat de
   afstand tot het volgende label gelijk blijft of er nu een fout staat of
   niet. */
.sid-voordeur-veldfout {
	display: block;
	margin: 5px 0 16px;
	font: 400 13px/1.4 'Open Sans', sans-serif;
	color: var(--sid-rood);
}

/* ---- het aanmeldformulier (5H) ---------------------------------------- */

/* Voornaam en achternaam naast elkaar. Twee gelijke kolommen, want geen van
   beide is belangrijker dan de andere. */
.sid-voordeur-twee {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

/* De velden in dit formulier staan er al met 16px marge onder (zie de regel
   bij .sid-voordeur-kaart input hierboven). In de twee kolommen hierboven
   regelt de gap de ruimte, dus daar mag die marge weg. */
.sid-voordeur-twee input {
	margin-bottom: 0;
}

/* De streep tussen 'wie ben je' en 'welk bedrijf'. Twee soorten gegevens,
   twee blokjes; dan hoef je niet uit te leggen waarom het er tien zijn. */
.sid-voordeur-scheiding {
	height: 1px;
	margin: 20px 0;
	background: var(--sid-lijn-licht);
}

/* Het zinnetje onder het KvK-nummer. Het veld erboven krijgt daarom zelf
   bijna geen marge, anders staat de uitleg los van waar hij bij hoort. */
.sid-voordeur-kaart input.sid-voordeur-krap {
	margin-bottom: 6px;
}

.sid-voordeur-hint {
	margin: 0 0 18px;
	font-size: 12.5px;
	color: var(--sid-grijs);
}

/* 'optioneel' achter een label. Zelfde maat en kleur als in het portaal, waar
   het in .sid-service-veld > span small staat. Een label dat rood kleurt bij
   een fout sleept dit woord anders mee; het hoort grijs te blijven. */
.sid-voordeur-kaart label small {
	color: var(--sid-grijs);
	font-size: 11px;
	font-weight: 400;
}

/* HET GROENE VINKJE NA OPNIEUW VERSTUREN. Zie 5f in het ontwerp. Zelfde vorm
   als de foutmelding hierboven, alleen groen: er is niets mis, er is juist
   iets gelukt. */
.sid-voordeur-gelukt {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 16px;
	padding: 13px 14px;
	border: 1px solid var(--sid-groenrand);
	border-radius: 6px;
	background: var(--sid-groen-vlak);
	color: var(--sid-groen);
	font-size: 13.5px;
	line-height: 1.5;
}

.sid-voordeur-gelukt svg {
	display: block;
	width: 14px;
	height: 14px;
	margin-top: 3px;
	flex: none;
}

/* De regel Opnieuw versturen staat er wel, maar pas als het weer mag. Het
   script haalt deze klasse eraf als de klok op nul staat. */
.sid-voordeur-klein.sid-nog-niet {
	display: none;
}

/* DE BALK VAN DE VOORBEELDSTAND.
   Alleen te zien met ?sid_voorbeeld= in het adres en alleen als beheerder.
   Hij hoort niet bij het ontwerp en mag er dus ook uitzien als wat hij is:
   gereedschap. */
.sid-voordeur-voorbeeld {
	margin-bottom: 16px;
	padding: 10px 14px;
	border: 1px dashed var(--sid-lijn);
	border-radius: 6px;
	background: #fff;
	font-size: 12px;
	color: var(--sid-grijs);
}

.sid-voordeur-voorbeeld span {
	display: block;
	margin-top: 6px;
}

.sid-voordeur-voorbeeld a {
	display: inline-block;
	margin: 2px 10px 2px 0;
	color: var(--sid-blauw-midden);
}

.sid-voordeur-voorbeeld a.nu {
	color: var(--sid-donker);
	font-weight: 700;
	text-decoration: underline;
}

/* HET WACHTVAK MET DE KLOK. Zie de stand 'wachten' in inloggen.php. */
.sid-voordeur-wacht {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px;
	border: 1px solid var(--sid-okerrand);
	border-radius: 6px;
	background: var(--sid-oker-vlak);
	font-size: 14px;
	color: var(--sid-donker);
}

.sid-voordeur-wacht svg {
	display: block;
	width: 17px;
	height: 17px;
	flex: none;
	color: var(--sid-oker);
}

/* De cijfers springen elke seconde. Een vaste breedte per cijfer houdt de zin
   stil; anders danst het woord 'opnieuw' mee met elke tik. */
.sid-voordeur-klok {
	font-variant-numeric: tabular-nums;
}

/* DE VAKJES KLEUREN MEE.
   Zonder dit blijft de melding los van de vakjes hangen en zie je niet waar
   de fout zit. De rand is donkerder dan die van het vlak hierboven, want dit
   is een dun lijntje om een leeg vakje. */
/* ':not(:focus)' omdat de blauwe focusrand een paar regels hoger even zwaar
   weegt als deze regel en hier verderop in het bestand staat: zonder dat
   stukje zou het vakje waar je in typt rood blijven. Rood is de stand van
   het veld, blauw is waar je nu bent, en dat laatste hoort te winnen. */
.sid-voordeur-cijfers.sid-mis input.sid-voordeur-cijfer:not(:focus) {
	border-color: var(--sid-rood-veld);
}

/* --- de kaart met de voordelen -------------------------------------------- */

.sid-voordeur-usp {
	padding: 26px 30px 28px;
}

.sid-voordeur-usp-kop {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 17px;
	color: var(--sid-donker);
	margin-bottom: 14px;
}

.sid-voordeur-usp-kop span {
	color: var(--sid-blauw);
}

.sid-voordeur-usp ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sid-voordeur-usp li {
	position: relative;
	padding-left: 25px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--sid-donker);
}

.sid-voordeur-usp li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 5px;
	width: 13px;
	height: 8px;
	border-left: 2px solid var(--sid-groen);
	border-bottom: 2px solid var(--sid-groen);
	transform: rotate(-45deg);
}

@media (max-width: 520px) {

	.sid-voordeur-vlak {
		padding: 24px 16px 60px;
	}

	.sid-voordeur-kaart {
		padding: 24px 20px;
	}

	.sid-voordeur-kaart h1 {
		font-size: 22px;
	}
}


/* ==========================================================================
   37. HET KLANTPORTAAL: MIJN OVERZICHT

   Hoort bij woocommerce/myaccount/ en inc/siderius-portaal/dashboard.php.
   Naar ontwerp 6A van Tomas, 21-09-2026.

   HET RASTER EN HET MENU STAAN HIER NIET. Die komen uit de klantcontactsectie
   (sectie 35): .sid-kc-kolommen voor de twee kolommen, .sid-kc-menu en
   .sid-kc-item voor het menu. Zelfde hover, zelfde actieve regel, zelfde
   gedrag op een telefoon. Verander je daar iets, dan verandert het hier mee.

   DRIE KEUZES DIE AFWIJKEN VAN HET ONTWERP, ALLEMAAL NAAR EEN EERDER BESLUIT:
     menubreedte  300px  ->  264px   zoals klantcontact en het productoverzicht
     menutekst    600    ->  400     besluit Tomas 14-09, bij het klantcontactmenu
     schaduw      .05    ->  --sid-schaduw, de gloed van de site

   EN DE KLEUREN UIT HET ONTWERP DIE NIET IN HET THEMA STONDEN:
     #5c6469  ->  --sid-grijs        #E4E8EB  ->  --sid-lijn-licht
     #8a9095  ->  --sid-grijs        drie oranjes  ->  de oker van het wachtscherm
   ========================================================================== */

/**
 * DE ACCOUNTPAGINA BEGINT OP DE HOOGTE VAN KLANTCONTACT.
 *
 * Mijn account is voor WordPress een winkelpagina, en die krijgen in sectie 0
 * 27px ruimte boven en 15 opzij (.woocommerce-page #main.site-main). Het
 * portaal heeft dat niet nodig: het raster van klantcontact brengt zijn eigen
 * ruimte mee, 50 boven de titel en 15 opzij in .sid-kc-binnen. Met allebei
 * stond alles 27px lager dan op klantcontact. Nagemeten 21-09-2026: titel op
 * 196 tegen 169, menu op 287 tegen 260.
 *
 * Drie klassen, zodat deze regel zwaarder weegt dan die van sectie 0 en
 * alleen op de accountpagina geldt.
 */
.woocommerce-account.woocommerce-page #main.site-main {
	padding: 0;
}

/* De blokken rechts onder elkaar, met 20 ertussen zoals in het ontwerp. */
.sid-portaal .sid-kc-inhoud {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* HET WELKOMSTBLOK BEGINT OP DEZELFDE HOOGTE ALS HET MENU.
   WooCommerce zet bovenaan elk accountonderdeel een doos voor meldingen, ook
   als er geen melding is. Die is dan 0 hoog, maar telt in de rij wel mee, en
   daardoor stond er 20px lucht boven het welkomstblok. Nagemeten in de
   browser 21-09-2026: menu op 176, welkomstblok op 196. Leeg is weg; komt er
   een melding in, dan staat hij er gewoon weer. */
.sid-portaal .woocommerce-notices-wrapper:empty {
	display: none;
}

/* --- het menu: alleen wat het klantcontactmenu niet heeft ------------------ */

/* De lijn boven Uitloggen. Uitloggen is geen onderdeel van je account maar
   de weg eruit, en staat daarom los. */
.sid-portaal-scheiding {
	display: block;
	height: 1px;
	margin: 0 22px;
	background: var(--sid-lijn-licht);
}

/* Uitloggen iets stiller dan de rest. Bij hover doet hij gewoon mee. */
.sid-kc-item.sid-portaal-uit,
.sid-kc-item.sid-portaal-uit:visited {
	color: var(--sid-grijs);
}

.sid-kc-item.sid-portaal-uit:hover {
	color: var(--sid-blauw-midden);
}

/* Onder 991 wordt het menu een rij tabbladen (sectie 35). Een lijn tussen
   twee tabbladen slaat dan nergens op. */
@media only screen and (max-width: 991px) {

	.sid-portaal-scheiding {
		display: none;
	}
}

/* --- welkom ------------------------------------------------------------- */

.sid-portaal-welkom {
	padding: 24px 32px;
	border-radius: var(--sid-radius);
	background: var(--sid-donker);
}

.sid-portaal-welkom h2 {
	margin: 0;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 32px;
	line-height: 1.2;
	color: #fff;
}

.sid-portaal-welkom h2 span {
	color: var(--sid-blauw);
}

/* --- in behandeling ------------------------------------------------------
   De oranje rand uit het ontwerp is eruit (Tomas, 21-09). Zonder rand zou een
   wit vlak op het lichtgrijs van de pagina wegvallen, dus krijgt het dezelfde
   gloed als de andere kaarten. Het icoon en het label blijven oranje. */

.sid-portaal-status {
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 24px 28px;
	border-radius: var(--sid-radius);
	background: #fff;
	box-shadow: var(--sid-schaduw);
}

.sid-portaal-status-icoon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--sid-oker-vlak);
	color: var(--sid-oker);
}

.sid-portaal-status-icoon svg {
	display: block;
	width: 21px;
	height: 21px;
}

.sid-portaal-status-tekst {
	flex: 1;
	min-width: 0;
}

.sid-portaal-status-tekst h2 {
	margin: 0 0 6px;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 19px;
	line-height: 1.2;
	color: var(--sid-donker);
}

.sid-portaal-status-tekst p {
	max-width: 860px;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--sid-grijs);
	text-wrap: pretty;
}

.sid-portaal-label {
	flex: none;
	padding: 6px 12px;
	border-radius: 4px;
	background: var(--sid-oker-vlak);
	color: var(--sid-oker-tekst);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* --- wat wil je doen ---------------------------------------------------- */

.sid-portaal-doen h2 {
	margin: 0 0 14px;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.2;
	color: var(--sid-donker);
}

.sid-portaal-tegels {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

/**
 * DE HOVER VAN DE PRODUCTKAARTEN (.sid-kaart:hover, sectie 15).
 * Zwaardere gloed en de tekst middenblauw. De titel heeft daarom geen eigen
 * kleur maar erft die van de tegel, anders bleef hij donker bij hover.
 *
 * :visited staat erbij om dezelfde reden als bij het klantcontactmenu:
 * style.css kleurt elke bezochte link blauw, en dan staat een tegel waar je
 * een keer op hebt geklikt voorgoed in de hoverkleur.
 */
.sid-portaal-tegel,
.sid-portaal-tegel:visited {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px;
	border-radius: var(--sid-radius);
	background: #fff;
	box-shadow: var(--sid-schaduw);
	color: var(--sid-donker);
	text-decoration: none;
	transition: ease .3s all;
}

.sid-portaal-tegel:hover,
.sid-portaal-tegel:focus-visible {
	box-shadow: var(--sid-schaduw-hover);
	color: var(--sid-blauw-midden);
	text-decoration: none;
}

.sid-portaal-tegel-titel {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.2;
}

.sid-portaal-tegel-tekst {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--sid-grijs);
}

/* --- de negen onderdelen die nog leeg zijn ------------------------------- */

.sid-portaal-kaart {
	padding: 30px;
	border-radius: var(--sid-radius);
	background: #fff;
	box-shadow: var(--sid-schaduw);
}

.sid-portaal-kop {
	margin: 0 0 8px;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 26px;
	line-height: 1.2;
	color: var(--sid-donker);
}

.sid-portaal-tekst {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--sid-grijs);
}

/* --- Mijn machines: één kaart per machine (ontwerp 11B) ------------------
   Ontwerpkleuren naar het thema:
     kaart #fff, rand #E5E5E5, schaduw .08   ->  wit, --sid-schaduw
     lijn onder de kop #EDEFF1               ->  --sid-lijn-licht
     chip #F0F9FE / #CDE9F8 / #006DAA        ->  --sid-lichtblauw, --sid-blauwrand, --sid-blauw-midden
     label #EEF2F4 / #42565F                 ->  --sid-vlak, --sid-grijs
     Verloopt #FBE9CF / #8A5300              ->  --sid-oker-vlak, --sid-oker-tekst
     Verlopen keuring (geen ontwerp)         ->  --sid-rood-vlak, --sid-rood
   ------------------------------------------------------------------------ */

.sid-machinekaart {
	padding: 24px 26px;
	border-radius: var(--sid-radius);
	background: #fff;
	box-shadow: var(--sid-schaduw);
}

.sid-machinekaart-kop {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 30px;
	margin-bottom: 18px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--sid-lijn-licht);
}

.sid-machinekaart-nr {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--sid-donker);
}

.sid-machinekaart-data {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 24px;
	margin-left: auto;
}

.sid-machinekaart-datum {
	display: flex;
	align-items: center;
	gap: 8px;
}

.sid-machinekaart-datum svg {
	flex: none;
	display: block;
	width: 20px;
	height: 20px;
	color: var(--sid-blauw-midden);
}

.sid-machinekaart-soort {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--sid-blauw-midden);
}

.sid-machinekaart-tm {
	font-size: 14px;
	font-weight: 700;
	color: var(--sid-grijs);
}

.sid-machinekaart-stand {
	display: inline-block;
	padding: 3px 8px;
	border-radius: 3px;
	background: var(--sid-vlak);
	color: var(--sid-grijs);
	font-size: 11.5px;
	font-weight: 700;
}

.sid-machinekaart-stand.is-verloopt {
	background: var(--sid-oker-vlak);
	color: var(--sid-oker-tekst);
}

.sid-machinekaart-stand.is-verlopen {
	background: var(--sid-rood-vlak);
	color: var(--sid-rood);
}

.sid-machinekaart-lijf {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.sid-machinekaart-foto {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 150px;
	height: 104px;
	overflow: hidden;
	border: 1px solid var(--sid-lijn-licht);
	border-radius: 6px;
	background: #fff;
}

.sid-machinekaart-foto img {
	display: block;
	max-width: 84%;
	max-height: 84%;
	object-fit: contain;
}

.sid-machinekaart-geenfoto svg {
	display: block;
	width: 40px;
	height: 40px;
	color: var(--sid-lijn);
}

.sid-machinekaart-info {
	flex: 1;
	min-width: 0;
}

.sid-machinekaart-categorie {
	font-size: 13.5px;
	color: var(--sid-grijs);
}

.sid-portaal .sid-machinekaart-titel {
	margin: 1px 0 11px;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 19px;
	line-height: 1.25;
	color: var(--sid-donker);
}

.sid-machinekaart-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.sid-machinekaart-chip {
	padding: 6px 11px;
	border: 1px solid var(--sid-blauwrand);
	border-radius: 4px;
	background: var(--sid-lichtblauw);
	color: var(--sid-blauw-midden);
	font-size: 13px;
	font-weight: 700;
}

/* --- Offertes en bestellingen (ontwerp 10A) ------------------------------
   De kaart zelf is .sid-machinekaart van Mijn machines. Hieronder alleen wat
   er bij een offerte bijkomt.
     tabs #E1E5E8 / #5c6469 / onderstreep #009EE3  ->  --sid-lijn, --sid-grijs, --sid-blauw
     Nog geldig #E7F2EA / #1F6B3D                  ->  --sid-groen-vlak, --sid-groen
     Verlopen #EEF1F3 / #42565F                    ->  --sid-vlak, --sid-grijs
     Akkoord gegeven #EAF6FC / #00567F             ->  --sid-lichtblauw, --sid-blauw-midden
   ------------------------------------------------------------------------ */

.sid-tabs {
	display: flex;
	align-items: center;
	gap: 28px;
	margin-top: -4px;
	border-bottom: 1px solid var(--sid-lijn);
}

.sid-tab,
.sid-tab:visited {
	position: relative;
	padding: 0 2px 14px;
	color: var(--sid-grijs);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}

.sid-tab:hover,
.sid-tab:focus-visible {
	color: var(--sid-donker);
	text-decoration: none;
}

.sid-tab.is-actief {
	color: var(--sid-donker);
}

.sid-tab.is-actief::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 3px;
	border-radius: 3px;
	background: var(--sid-blauw);
}

.sid-tab-aantal {
	font-weight: 600;
	color: var(--sid-grijs);
}

.sid-offerte-datum {
	margin: 0 0 8px 2px;
	font-size: 14px;
	color: var(--sid-grijs);
}

.sid-offerte-datum span {
	color: var(--sid-donker);
}

.sid-offerte .sid-machinekaart-kop {
	gap: 10px 18px;
}

.sid-offerte-stand {
	display: inline-block;
	padding: 5px 11px;
	border-radius: 4px;
	background: var(--sid-vlak);
	color: var(--sid-grijs);
	font-size: 12.5px;
	font-weight: 700;
}

.sid-offerte-stand.is-geldig {
	background: var(--sid-groen-vlak);
	color: var(--sid-groen);
}

/* Akkoord gegeven: ontwerp #EAF6FC / #00567F -> --sid-lichtblauw, --sid-blauw-midden */
.sid-offerte-stand.is-akkoord {
	background: var(--sid-lichtblauw);
	color: var(--sid-blauw-midden);
}

.sid-offerte-termijn {
	margin-left: auto;
	font-size: 13.5px;
	color: var(--sid-grijs);
}

.sid-offerte-info {
	display: flex;
	flex-direction: column;
	min-height: 104px;
}

.sid-offerte-punt {
	margin: 0 5px;
}

.sid-machinekaart-titel a,
.sid-machinekaart-titel a:visited {
	color: var(--sid-donker);
	text-decoration: none;
}

.sid-machinekaart-titel a:hover,
.sid-machinekaart-titel a:focus-visible {
	color: var(--sid-blauw-midden);
}

.sid-offerte-meer {
	margin-top: 10px;
	font-size: 13.5px;
	color: var(--sid-grijs);
}

.sid-offerte-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 28px;
	margin-top: auto;
	padding-top: 20px;
}

.sid-offerte-links a,
.sid-offerte-links a:visited {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	color: var(--sid-blauw-midden);
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
}

.sid-offerte-links a:hover,
.sid-offerte-links a:focus-visible {
	color: var(--sid-blauw-donker);
}

.sid-offerte-links svg {
	flex: none;
	width: 11px;
	height: 11px;
}

.sid-offerte-prijs {
	flex: none;
	text-align: right;
}

.sid-offerte-bedrag {
	color: var(--sid-donker);
	font-size: 18px;
	font-weight: 700;
	white-space: nowrap;
}

.sid-offerte-klein {
	margin-top: 4px;
	font-size: 13.5px;
	color: var(--sid-grijs);
}

.sid-offerte-aantal {
	margin-top: 8px;
}

.sid-offerte-aantal strong {
	color: var(--sid-donker);
}

/* --- Facturen (ontwerp 7A) -----------------------------------------------
   Kaart, tabs, datum en bedrag komen van de offertes hierboven.
     Openstaand #FDF3E4 / #8A5A12      ->  --sid-oker-vlak, --sid-oker-tekst
     filterchip rand                   ->  --sid-lijn; gekozen: lichtblauw vlak
     jaarkeuze rand #D5D9DD            ->  --sid-lijn
   ------------------------------------------------------------------------ */

.sid-offerte-stand.is-open {
	background: var(--sid-oker-vlak);
	color: var(--sid-oker-tekst);
}

.sid-filterbalk {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.sid-filterchip,
.sid-filterchip:visited {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border: 1px solid var(--sid-lijn);
	border-radius: 20px;
	background: #fff;
	color: var(--sid-donker);
	font-size: 14px;
	text-decoration: none;
	transition: ease .2s all;
}

.sid-filterchip:hover,
.sid-filterchip:focus-visible {
	border-color: var(--sid-blauwrand);
	color: var(--sid-blauw-midden);
	text-decoration: none;
}

.sid-filterchip.is-actief {
	border-color: var(--sid-blauwrand);
	background: var(--sid-lichtblauw);
	color: var(--sid-blauw-midden);
	font-weight: 700;
}

.sid-jaarkeuze {
	margin: 0 0 0 auto;
}

.sid-jaarkeuze select {
	padding: 9px 36px 9px 14px;
	border: 1px solid var(--sid-lijn);
	border-radius: 5px;
	background-color: #fff;
	color: var(--sid-donker);
	font-size: 14.5px;
	cursor: pointer;
}

.sid-factuur-icoon svg {
	width: 42px;
	height: 42px;
	color: var(--sid-grijs);
}

.sid-portaal .sid-factuur-titel {
	margin: 0;
}

/* Niet .sid-terug: die naam heeft het mobiele menu al (style.css). */
.sid-portaal-terug {
	margin: 0;
	font-size: 14.5px;
	font-weight: 600;
}

.sid-portaal-terug a,
.sid-portaal-terug a:visited {
	color: var(--sid-blauw-midden);
	text-decoration: none;
}

/* --- Lege stand (ontwerp 8C) ---------------------------------------------
   Kaart als de rest, kop 19px Titillium, tekst #42565F -> --sid-grijs. */

.sid-lege-stand {
	padding: 34px 26px 32px;
	border-radius: var(--sid-radius);
	background: #fff;
	box-shadow: var(--sid-schaduw);
}

.sid-portaal .sid-lege-stand h2 {
	margin: 0 0 6px;
	font-family: 'Titillium Web', sans-serif;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--sid-donker);
}

.sid-lege-stand p {
	max-width: 560px;
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--sid-grijs);
}

.sid-lege-stand-link,
.sid-lege-stand-link:visited {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	color: var(--sid-blauw-midden);
	font-weight: 700;
	text-decoration: none;
}

.sid-lege-stand-link svg {
	width: 10px;
	height: 10px;
}

.sid-lege-stand-knoppen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 28px;
	margin-top: 22px;
}

.sid-bladeren {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding-top: 4px;
}

.sid-bladeren-stand {
	font-size: 14px;
	color: var(--sid-grijs);
}

.sid-bladeren-knop,
.sid-bladeren-knop:visited {
	padding: 8px 16px;
	border: 1px solid var(--sid-lijn);
	border-radius: 5px;
	background: #fff;
	color: var(--sid-blauw-midden);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.sid-bladeren-knop:hover,
.sid-bladeren-knop:focus-visible {
	border-color: var(--sid-blauwrand);
	text-decoration: none;
}

/* --- Machinedossier (ontwerp 12B) ---------------------------------------
   Bovenste kaart is .sid-machinekaart met een grotere foto en titel.
     kopje blok 19px Titillium                ->  zelfde als de kaarttitels
     lijn tussen regels #F1F3F4               ->  --sid-lijn-licht
     tabelkop #8a9095, hoofdletters           ->  --sid-grijs
     knop #009EE3 / licht #D7DDE1 + #42565F   ->  --sid-blauw / --sid-lijn + --sid-grijs
   ------------------------------------------------------------------------ */

.sid-portaal-terug a,
.sid-portaal-terug a:visited {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.sid-portaal-terug svg {
	width: 11px;
	height: 11px;
}

.sid-dossier-hoofd {
	padding: 26px 28px;
}

.sid-dossier-hoofd .sid-machinekaart-lijf {
	gap: 28px;
}

.sid-dossier-foto {
	width: 230px;
	height: 160px;
}

/* Net als bij de andere machinekaarten: de infokolom is minstens zo hoog als
   de foto en de actielinks worden naar onderen geduwd, zodat ze uitlijnen met
   de onderkant van de foto. */
.sid-dossier-hoofd .sid-machinekaart-info {
	display: flex;
	flex-direction: column;
	min-height: 160px;
}

.sid-portaal .sid-dossier-titel {
	margin: 2px 0 14px;
	font-family: 'Titillium Web', sans-serif;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--sid-donker);
}

.sid-dossier-feiten {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px 24px;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--sid-lijn-licht);
}

.sid-dossier-label {
	margin-bottom: 3px;
	font-size: 12.5px;
	color: var(--sid-grijs);
}

.sid-dossier-waarde {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--sid-donker);
}

.sid-dossier-links {
	margin-top: auto;
	padding-top: 22px;
}

.sid-dossier-twee {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 20px;
}

.sid-dossier-blok {
	padding: 22px 26px 24px;
	border-radius: var(--sid-radius);
	background: #fff;
	box-shadow: var(--sid-schaduw);
}

.sid-dossier-blokkop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--sid-lijn-licht);
}

.sid-portaal .sid-dossier-blok h2 {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	font-family: 'Titillium Web', sans-serif;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--sid-donker);
}

.sid-dossier-blokkop a,
.sid-dossier-meer summary {
	color: var(--sid-blauw-midden);
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

.sid-dossier-leeg {
	margin: 22px 0 10px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--sid-grijs);
}

.sid-dossier-document {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--sid-lijn-licht);
	color: var(--sid-donker);
	font-size: 14.5px;
	font-weight: 700;
	text-decoration: none;
}

.sid-dossier-document svg {
	flex: none;
	width: 19px;
	height: 19px;
	color: var(--sid-blauw-midden);
}

.sid-dossier-document span:first-of-type {
	flex: 1;
	min-width: 0;
}

.sid-dossier-bekijken {
	color: var(--sid-blauw-midden);
	font-size: 13px;
}

.sid-dossier-tabel {
	margin-top: 4px;
	font-size: 14px;
}

.sid-dossier-rij {
	display: grid;
	grid-template-columns: 130px 110px minmax(0, 1fr) 120px 130px;
	align-items: center;
}

.sid-dossier-rij > span {
	padding: 14px 10px 14px 0;
	border-top: 1px solid var(--sid-lijn-licht);
	color: var(--sid-donker);
}

.sid-dossier-rij.is-kop > span {
	padding: 12px 10px 10px 0;
	border-top: 0;
	color: var(--sid-grijs);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.sid-dossier-rij a {
	color: var(--sid-blauw-midden);
	font-weight: 700;
	text-decoration: none;
}

.sid-dossier-rij .is-grijs {
	color: var(--sid-grijs);
}

/* > span erbij, anders wint .sid-dossier-rij.is-kop > span hierboven met zijn
   padding-right van 10px en staat de kop BEDRAG tien pixels links van de
   bedragen eronder. Gelijke specificiteit, en deze regel staat later. */
.sid-dossier-rij > span.is-rechts {
	padding-right: 0;
	text-align: right;
}

/* De letterspatiëring van de kop zet ook achter de laatste letter nog ruimte.
   Die halen we er weer af, zodat de G van BEDRAG precies boven het laatste
   cijfer uitkomt. */
.sid-dossier-rij.is-kop > span.is-rechts {
	margin-right: -.04em;
}

/* De chip heeft 8px binnenruimte links, dus zonder deze verschuiving begint
   Betaald acht pixels rechts van de S van STATUS. Zelfde truc als bij de rol
   in de tabel met collega's. */
.sid-dossier-rij .sid-machinekaart-stand {
	margin-left: -8px;
}

.sid-dossier-rij .is-vet {
	font-weight: 700;
}

.sid-dossier-meer {
	border-top: 1px solid var(--sid-lijn-licht);
}

.sid-dossier-meer summary {
	padding: 14px 0 2px;
	list-style: none;
}

.sid-dossier-meer summary::-webkit-details-marker {
	display: none;
}

.sid-dossier-hulp {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 40px;
}

.sid-dossier-hulp p {
	margin: 4px 0 0;
	font-size: 14px;
	color: var(--sid-grijs);
}

.sid-dossier-hulp p a {
	color: var(--sid-blauw-midden);
	font-weight: 700;
	text-decoration: none;
}

.sid-dossier-knop,
.sid-dossier-knop:visited {
	display: inline-block;
	padding: 11px 22px;
	border: 1px solid var(--sid-blauw);
	border-radius: 5px;
	background: var(--sid-blauw);
	color: #fff;
	font: 700 14px 'Open Sans', sans-serif;
	text-decoration: none;
	cursor: pointer;
	transition: ease .3s all;
}

.sid-dossier-knop:hover,
.sid-dossier-knop:focus-visible {
	border-color: var(--sid-blauw-donker);
	background: var(--sid-blauw-donker);
	color: #fff;
	text-decoration: none;
}

.sid-dossier-knop.is-licht {
	border-color: var(--sid-lijn);
	background: #fff;
	color: var(--sid-grijs);
}

.sid-venster {
	width: 520px;
	max-width: calc(100% - 32px);
	padding: 28px 30px 26px;
	border: 0;
	border-radius: 8px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}

.sid-venster::backdrop {
	background: rgba(0, 37, 51, .55);
}

.sid-venster h2 {
	margin: 0 0 12px;
	font-family: 'Titillium Web', sans-serif;
	font-size: 21px;
	font-weight: 700;
	color: var(--sid-donker);
}

.sid-venster p {
	margin: 0 0 12px;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--sid-grijs);
}

.sid-venster-dicht {
	position: absolute;
	top: 14px;
	right: 16px;
	width: 28px;
	height: 28px;
	border: 0;
	background: none;
	color: var(--sid-grijs);
	font-size: 20px;
	cursor: pointer;
}

.sid-venster-knoppen {
	display: flex;
	gap: 10px;
	margin-top: 20px;
}

/* --- op een smaller scherm ---------------------------------------------- */

@media only screen and (max-width: 767px) {

	.sid-portaal-welkom {
		padding: 20px 22px;
	}

	.sid-portaal-welkom h2 {
		font-size: 26px;
	}

	.sid-portaal-status {
		flex-wrap: wrap;
		align-items: flex-start;
		padding: 20px 22px;
	}

	.sid-portaal-tegels {
		grid-template-columns: minmax(0, 1fr);
	}

	.sid-machinekaart {
		padding: 20px 22px;
	}

	.sid-machinekaart-data {
		margin-left: 0;
	}

	.sid-machinekaart-lijf {
		flex-direction: column;
		gap: 16px;
	}

	.sid-offerte-termijn {
		flex-basis: 100%;
		margin-left: 0;
	}

	.sid-offerte-prijs {
		text-align: left;
	}

	.sid-dossier-foto {
		width: 100%;
	}

	.sid-dossier-feiten,
	.sid-dossier-twee {
		grid-template-columns: minmax(0, 1fr);
	}

	.sid-dossier-tabel {
		overflow-x: auto;
	}

	.sid-dossier-rij {
		min-width: 560px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.sid-portaal-tegel {
		transition: none;
	}
}

/* ==========================================================================
   SERVICEAANVRAAG (ontwerpen 14A t/m 14F, 22-09-2026)
   ========================================================================== */

.sid-service-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sid-service-form .sid-dossier-blok h2,
.sid-service-lijst h2 {
	margin: 0 0 4px;
}

.sid-service-uitleg {
	margin: 0 0 18px;
	color: var(--sid-grijs);
	font-size: 13.5px;
	line-height: 1.6;
}

.sid-service-tussenkop {
	margin: 0 0 14px;
	color: var(--sid-donker);
	font-size: 13.5px;
	font-weight: 700;
}

.sid-service-tussenkop.is-lijn {
	margin-top: 4px;
	padding-top: 20px;
	border-top: 1px solid var(--sid-lijn-licht);
}

/* Met of zonder SID-nummer */
.sid-service-keuzes {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 14px;
}

.sid-service-keuze {
	flex: 1;
	min-width: 260px;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 13px 16px;
	border: 1.5px solid var(--sid-lijn);
	border-radius: 7px;
	background: #fff;
	text-align: left;
	cursor: pointer;
}

.sid-service-keuze strong {
	display: block;
	margin-bottom: 2px;
	color: var(--sid-donker);
	font-size: 14.5px;
}

.sid-service-keuze small {
	display: block;
	color: var(--sid-grijs);
	font-size: 13px;
	line-height: 1.5;
}

.sid-service-vak {
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	border: 1.5px solid #C4CBD0;
	border-radius: 5px;
	background: #fff;
}

.sid-service-keuze.is-gekozen {
	border-color: var(--sid-blauw);
	background: var(--sid-lichtblauw);
}

.sid-service-keuze.is-gekozen .sid-service-vak {
	border-color: var(--sid-blauw);
	background: var(--sid-blauw) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* Machine kiezen */
.sid-service-zoekbalk {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 22px 0 14px;
}

.sid-service-zoek {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 13px;
	border: 1px solid var(--sid-lijn);
	border-radius: 5px;
	background: #fff;
}

.sid-service-zoek svg {
	width: 17px;
	height: 17px;
	flex: none;
	color: var(--sid-grijs);
}

.sid-service-zoek input {
	flex: 1;
	height: 44px;
	border: 0;
	outline: none;
	font-size: 14.5px;
}

.sid-service-aantal {
	flex: none;
	color: var(--sid-grijs);
	font-size: 13px;
}

.sid-service-machines {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-height: 336px;
	overflow-y: auto;
	padding: 2px;
}

.sid-service-machinerij {
	display: grid;
	grid-template-columns: 118px minmax(0, 1fr) 190px;
	align-items: center;
	gap: 16px;
	padding: 14px 18px;
	border: 1.5px solid #E8EBED;
	border-radius: 8px;
	background: #fff;
	text-align: left;
	cursor: pointer;
}

.sid-service-machinerij[hidden] {
	display: none;
}

.sid-service-machinerij:hover {
	border-color: var(--sid-blauwrand);
}

.sid-service-machinerij.is-gekozen {
	border-color: var(--sid-blauw);
	background: var(--sid-lichtblauw);
}

.sid-service-sid,
.sid-service-nr {
	color: var(--sid-blauw-midden);
	font-size: 13px;
	font-weight: 700;
}

/* Aanvraag of werkorder: eerst waar het om gaat, dan het nummer. De klant
   ziet het werkordernummer zodra dat er is, en daarvoor ons eigen
   aanvraagnummer. 29-09-2026. */
/* Meldingen bij het toevoegen van foto's: de vaste grens in grijs, en de
   waarschuwing als er te veel of te grote bestanden gekozen zijn in rood. */
/* De foto's bij een aanvraag, zoals de klant ze terugziet. Een jpg toont zijn
   eigen beeld; een heic en een pdf kan de browser niet tonen en krijgen een
   vakje met de soort erin. 29-09-2026. */
.sid-aanvraag-foto.is-bestand,
a.sid-aanvraag-foto {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 6px;
	text-decoration: none;
}

a.sid-aanvraag-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sid-aanvraag-soort {
	color: var(--sid-grijs);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
}

.sid-aanvraag-foto small {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 2px 4px;
	background: rgba( 255, 255, 255, .88 );
	color: var(--sid-grijs);
	font-size: 10.5px;
	text-align: center;
}

/* Een heic of pdf in de voorbeeldrij van het formulier: geen plaatje maar de
   soort in een vakje. Een browser kan die twee niet tonen.
   Dezelfde rand en radius als .sid-service-foto img, anders staat er een
   blokje met scherpe hoeken tussen de afgeronde foto's. */
.sid-service-foto.is-bestand {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--sid-waas);
	border: 1px solid #D7DDE1;
	border-radius: 6px;
	box-sizing: border-box;
}

.sid-service-foto-soort {
	color: var(--sid-grijs);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
}

.sid-service-fotogrens {
	display: block;
	margin-top: 4px;
	color: var(--sid-grijs);
	font-size: 12.5px;
}

.sid-service-fotomelding {
	display: block;
	margin-top: 6px;
	color: #b32d2e;
	font-size: 12.5px;
	font-weight: 600;
}

.sid-service-nr small {
	display: block;
	color: var(--sid-grijs);
	font-size: 12px;
	font-weight: 400;
	text-transform: lowercase;
}

.sid-service-nr strong {
	display: block;
	font-size: 14.5px;
	font-weight: 700;
}

.sid-service-machine strong {
	display: block;
	color: var(--sid-donker);
	font-size: 14.5px;
}

.sid-service-machine small,
.sid-service-plek {
	display: block;
	color: var(--sid-grijs);
	font-size: 13px;
}

/* Velden */
.sid-service-twee {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
	gap: 16px 24px;
	align-items: start;
	margin-bottom: 16px;
}

.sid-service-twee.is-gelijk {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sid-service-drie {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px 20px;
}

.sid-service-stapel {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.sid-service-veld {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 16px;
}

.sid-service-twee .sid-service-veld,
.sid-service-drie .sid-service-veld,
.sid-service-stapel .sid-service-veld {
	margin-bottom: 0;
}

.sid-service-veld > span {
	color: var(--sid-donker);
	font-size: 12.5px;
	font-weight: 700;
}

.sid-service-veld em {
	color: var(--sid-rood);
	font-style: normal;
}

/* Een woord als "optioneel" in een label hoort onderschikt te zijn. Beide
   plekken staan hier op dezelfde maat: zonder maat pakt small de standaard van
   de browser, en die rekent per plek anders uit. */
.sid-service-veld > span small,
.sid-service-label small {
	color: var(--sid-grijs);
	font-size: 11px;
	font-weight: 400;
}

.sid-service-veld small,
.sid-service-klein {
	margin: 0;
	color: var(--sid-grijs);
	font-size: 12.5px;
	line-height: 1.5;
}

.sid-service-veld input[type="text"],
.sid-service-veld input[type="tel"],
.sid-service-veld input[type="date"],
.sid-service-veld input[type="number"],
.sid-service-veld select,
.sid-service-veld textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 46px;
	padding: 0 13px;
	border: 1px solid var(--sid-lijn);
	border-radius: 5px;
	background: #fff;
	color: var(--sid-donker);
	font-size: 14.5px;
}

.sid-service-veld textarea {
	min-height: 155px;
	padding: 11px 13px;
	line-height: 1.55;
	resize: vertical;
}

.sid-service-teken {
	text-align: right;
}

.sid-service-fout {
	color: var(--sid-rood);
	font-size: 12.5px;
	font-weight: 600;
}

.sid-service-motorplaat[hidden] {
	display: none;
}

/* Foto's */
/* --- de aanvraag in drie stappen (ontwerp 14G) --------------------------- */

/**
 * DE BALK LINKS, HET FORMULIER RECHTS.
 *
 * Zelfde opzet als de afrekenpagina: een smalle kolom met de tijdlijn en
 * daarnaast een kaart per stap. Het oude formulier was een pagina breed en
 * daardoor druk; hier staat er nooit meer dan een stap in beeld.
 */
/**
 * GEEN align-items: start HIER.
 *
 * Met start is de balk links precies zo hoog als zijn eigen inhoud. Een
 * sticky element beweegt binnen zijn eigen vak, en als dat vak niet hoger is
 * dan het element zelf, is er niets om in te schuiven: hij blijft gewoon
 * meescrollen. Laat je de kolommen strekken, dan loopt de balk mee tot onder
 * aan de kaarten. Gemeten in het portaal, 23-09-2026.
 */
.sid-service-stappen {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 28px;
}

/* De balk loopt mee tijdens het scrollen, zodat je altijd ziet waar je bent. */
.sid-service-balk {
	position: sticky;
	top: 20px;
}

.sid-service-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.sid-portaal .sid-service-vraag {
	margin: 20px 0 16px;
	font: 700 19px/1.3 'Titillium Web', sans-serif;
	color: var(--sid-donker);
}

/* De knoppen onderaan een kaart: terug links, verder rechts. */
.sid-service-stapknoppen {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--sid-lijn-licht);
}

/* Staat er geen terugknop, dan hoort verder alsnog rechts te staan. */
.sid-service-stapknoppen > :only-child {
	margin-left: auto;
}

.sid-service-natoelichting {
	margin-top: 24px;
	padding: 16px 18px;
	border-radius: 6px;
	background: var(--sid-vlak);
}

.sid-service-natoelichting strong {
	display: block;
	margin-bottom: 4px;
	font-size: 14.5px;
	color: var(--sid-donker);
}

.sid-service-natoelichting p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--sid-grijs);
}

@media only screen and (max-width: 991px) {

	/* Op een smal scherm past een kolom ernaast niet meer; de tijdlijn gaat
	   dan boven het formulier staan. */
	.sid-service-stappen {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.sid-service-balk {
		position: static;
	}
}

/* --- keuzehulp (ontwerp 17A) -------------------------------------------- */

.sid-keuzehulp {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* De vragen hebben zelf ruimte boven en onder, dus de kaart alleen links en
   rechts. Anders staat de eerste vraag verder van de rand dan de laatste. */
.sid-keuzehulp-vragen {
	padding: 0 30px;
}

/* Een vraag: links het cijfer of het vinkje, rechts de vraag met de chips. */
.sid-keuzehulp-vraag {
	display: grid;
	grid-template-columns: 27px minmax(0, 1fr);
	column-gap: 16px;
	padding: 24px 0;
	border-bottom: 1px solid var(--sid-lijn-licht);
}

.sid-keuzehulp-vraag:last-child {
	border-bottom: 0;
}

/**
 * EEN VRAAG TEGELIJK.  Toegevoegd 28-09-2026.
 *
 * Deze klassen worden gezet door de JavaScript onderaan
 * inc/siderius-portaal/keuzehulp.php. Het sjabloon zet alle vragen gewoon
 * neer; zonder JavaScript staat het formulier dus open en werkt het nog
 * steeds, alleen dan alle elf tegelijk.
 *
 * .is-laatst is de onderste vraag die op dit moment open staat. Die mag geen
 * streep onder zich hebben, want daar houdt de kaart op. :last-child kan dat
 * niet weten: een verborgen vraag is nog steeds een kind.
 */
.sid-keuzehulp-vraag.is-verborgen {
	display: none;
}

.sid-keuzehulp-vraag.is-laatst {
	border-bottom: 0;
}

/* Een nieuwe vraag komt van boven aanschuiven in plaats van er ineens te
   staan. Kort, anders ga je erop wachten voor je verder klikt. */
@keyframes sid-keuzehulp-erbij {

	from {
		opacity: 0;
		transform: translateY(-8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.sid-keuzehulp-vraag.is-komt {
	animation: sid-keuzehulp-erbij .28s ease both;
}

@media (prefers-reduced-motion: reduce) {

	.sid-keuzehulp-vraag.is-komt {
		animation: none;
	}
}

.sid-keuzehulp-merk {
	position: relative;
	display: block;
	width: 27px;
	height: 27px;
}

.sid-keuzehulp-cijfer,
.sid-keuzehulp-vink {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border-radius: 50%;
	font: 700 14px/1 'Open Sans', sans-serif;
}

.sid-keuzehulp-cijfer {
	border: 2px solid var(--sid-blauw);
	color: var(--sid-blauw);
}

/* Het vinkje ligt eroverheen en is pas te zien als de vraag beantwoord is. */
.sid-keuzehulp-vink {
	background: var(--sid-blauw);
	color: #fff;
	opacity: 0;
	transition: opacity .15s ease;
}

.sid-keuzehulp-vink svg {
	width: 12px;
	height: 12px;
}

.sid-keuzehulp-vraag.is-af .sid-keuzehulp-vink {
	opacity: 1;
}

.sid-portaal .sid-keuzehulp-inhoud h3 {
	margin: 0 0 12px;
	font: 700 18px/27px 'Titillium Web', sans-serif;
	color: var(--sid-donker);
}

.sid-keuzehulp-inhoud h3 small {
	font: 400 14px 'Open Sans', sans-serif;
	color: var(--sid-grijs);
}

.sid-keuzehulp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* De antwoorden als chips: alles staat open, je ziet in een oogopslag wat je
   gekozen hebt. Het vinkje verschijnt pas bij de gekozen chip. */
.sid-keuzehulp button.sid-keuzehulp-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 1.5px solid var(--sid-lijn);
	border-radius: 22px;
	background: #fff;
	color: var(--sid-donker);
	font: 600 14.5px 'Open Sans', sans-serif;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	transition: ease .2s all;
}

.sid-keuzehulp button.sid-keuzehulp-chip:hover {
	border-color: var(--sid-blauw);
	background: #F7FBFE;
	color: var(--sid-blauw-midden);
}

.sid-keuzehulp button.sid-keuzehulp-chip.is-gekozen {
	border-color: var(--sid-blauw);
	background: var(--sid-lichtblauw);
	color: var(--sid-blauw-midden);
	font-weight: 700;
}

.sid-keuzehulp-chip svg {
	width: 12px;
	height: 12px;
	display: none;
}

.sid-keuzehulp-chip.is-gekozen svg {
	display: block;
}

.sid-keuzehulp-inhoud textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 110px;
	padding: 11px 13px;
	border: 1px solid var(--sid-lijn);
	border-radius: 5px;
	background: #fff;
	color: var(--sid-donker);
	font-size: 14.5px;
	line-height: 1.55;
	resize: vertical;
}

/* De voet: links hoever je bent, rechts de knop. */
.sid-keuzehulp-voet {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 28px;
	padding: 22px 30px;
}

.sid-keuzehulp-voortgang {
	flex: 1;
	min-width: 0;
	max-width: 520px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sid-keuzehulp-teller {
	font-size: 14px;
	font-weight: 700;
	color: var(--sid-donker);
}

.sid-keuzehulp-balk {
	display: block;
	height: 6px;
	border-radius: 3px;
	background: #E7EBEE;
	overflow: hidden;
}

.sid-keuzehulp-balk span {
	display: block;
	height: 100%;
	border-radius: 3px;
	background: var(--sid-blauw);
	transition: width .3s ease;
}

/* Dezelfde knop als overal in het portaal. Buiten het serviceformulier pakt
   het thema hem anders op en zet hij de tekst in hoofdletters; vandaar deze
   regel. */
.sid-keuzehulp button.sid-keuzehulp-knop {
	padding: 13px 26px;
	font: 700 14.5px 'Open Sans', sans-serif;
	text-transform: none;
	letter-spacing: 0;
}

/* Zolang niet alles beantwoord is kun je niet versturen. Lichtblauw in plaats
   van grijs: hij is niet stuk, er moet alleen nog iets gebeuren. */
.sid-keuzehulp button.sid-keuzehulp-knop[disabled] {
	border-color: #C9E6F5;
	background: #C9E6F5;
	cursor: not-allowed;
}

/* --- een verstuurde aanvraag bekijken (ontwerp 16A) ---------------------- */

.sid-aanvraag-kop {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 18px;
}

.sid-portaal a.sid-aanvraag-terug {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
	color: var(--sid-blauw-midden);
	text-decoration: none;
}

.sid-aanvraag-terug svg {
	width: 13px;
	height: 13px;
}

.sid-portaal .sid-aanvraag-kop h2 {
	margin: 0;
	font: 700 24px/1.2 'Titillium Web', sans-serif;
	color: var(--sid-donker);
}

/* De stand links gebruikt dezelfde tijdlijn als de stappen in het formulier;
   alleen het kopje Status staat erboven. */
.sid-aanvraag-standkop {
	display: block;
	margin-bottom: 16px;
	font: 700 12px/1 'Open Sans', sans-serif;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--sid-grijs);
}

/* Hier is de naam van een stand geen link maar tekst; de kleuren komen van de
   regels voor a.sid-stapnaam, dus die herhalen we voor de span. */
.sid-aanvraag-stand span.sid-stapnaam {
	display: block;
	font: 700 15px/22px 'Open Sans', sans-serif;
	color: var(--sid-grijs);
}

.sid-aanvraag-stand .sid-stapregel.is-nu span.sid-stapnaam,
.sid-aanvraag-stand .sid-stapregel.is-af span.sid-stapnaam {
	color: var(--sid-donker);
}

.sid-aanvraag-stand .sid-stapregel.is-af span.sid-stapnaam {
	color: var(--sid-blauw-midden);
}

/* De datum onder Verstuurd hoort er altijd te staan, ook al is dat een
   .sid-staprecap die in het formulier alleen bij een afgeronde stap verschijnt. */
.sid-aanvraag-stand .sid-staprecap {
	display: block;
}

.sid-aanvraag-kaarten {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

/* Twee kolommen met label en waarde. Een lang antwoord, zoals de omschrijving,
   krijgt de hele breedte. */
.sid-aanvraag-gegevens {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 24px;
	margin-top: 20px;
}

.sid-aanvraag-vak.is-breed {
	grid-column: 1 / -1;
}

.sid-aanvraag-label {
	margin-bottom: 4px;
	font: 700 12.5px 'Open Sans', sans-serif;
	color: var(--sid-grijs);
}

.sid-aanvraag-waarde {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--sid-donker);
}

/* De onderdelen onder elkaar: nummer, omschrijving, aantal. */
.sid-aanvraag-regels {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sid-aanvraag-regel {
	display: grid;
	grid-template-columns: 130px minmax(0, 1fr) 50px;
	gap: 12px;
	align-items: baseline;
	font-size: 14.5px;
	color: var(--sid-donker);
}

.sid-aanvraag-regel span:first-child {
	font-weight: 700;
}

.sid-aanvraag-regel span:last-child {
	text-align: right;
	color: var(--sid-grijs);
}

.sid-aanvraag-fotos {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--sid-lijn-licht);
}

.sid-aanvraag-fotorij {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 8px;
}

.sid-aanvraag-foto {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 92px;
	height: 72px;
	border: 1px solid var(--sid-lijn);
	border-radius: 6px;
	background: var(--sid-vlak);
	color: var(--sid-grijs);
}

.sid-aanvraag-foto svg {
	width: 17px;
	height: 17px;
}

/* Klopt er iets niet: tekst links, telefoonnummer rechts. */
.sid-aanvraag-hulp {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
}

.sid-aanvraag-hulp > div {
	flex: 1;
	min-width: 0;
	max-width: 620px;
}

.sid-aanvraag-hulp strong {
	display: block;
	margin-bottom: 4px;
	font: 700 17px 'Titillium Web', sans-serif;
	color: var(--sid-donker);
}

.sid-aanvraag-hulp p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--sid-grijs);
}

/* Het pijltje rechts in een regel: hij wijst dat je de aanvraag kunt openen. */
.sid-service-pijl {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	color: var(--sid-lijn);
}

.sid-service-pijl svg {
	width: 13px;
	height: 13px;
}

.sid-portaal a.sid-service-rij:hover .sid-service-pijl {
	color: var(--sid-blauw-midden);
}

/* De regels in Mijn aanvragen zijn links geworden. */
.sid-portaal a.sid-service-rij {
	text-decoration: none;
	transition: background-color .15s ease;
}

.sid-portaal a.sid-service-rij:hover {
	background: var(--sid-vlak);
}

@media only screen and (max-width: 767px) {

	.sid-aanvraag-gegevens {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- onderdelen: de regels met artikelnummers --------------------------- */

.sid-onderdeel-lijst {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 20px;
}

/* De kop Onderdelen staat bij beide keuzes op dezelfde plek. */
.sid-service-form .sid-onderdeel-nee h3.sid-service-tussenkop {
	margin-top: 22px;
}

/* Beschrijving en aantal horen bij elkaar: een omlijnd blok eromheen, zoals
   de regels met artikelnummers dat ook als een geheel tonen. */
.sid-onderdeel-nee-blok {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sid-onderdeel-nee-blok .sid-service-veld {
	margin-bottom: 0;
}

/* De kop Onderdelen plakte tegen de keuzeblokken. Hij krijgt dezelfde ruimte
   erboven als het label bij Nee, help me zoeken; de lijst eronder heeft zijn
   eigen marge dus die zetten we hier terug.

   De kiezer moet even zwaar zijn als .sid-service-form h3.sid-service-tussenkop
   verderop, anders wint de marge 0 daarvan. */
.sid-service-form .sid-onderdeel-ja h3.sid-service-tussenkop {
	margin-top: 22px;
}

.sid-onderdeel-ja .sid-onderdeel-lijst {
	margin-top: 0;
}

/* Nummer en omschrijving krijgen de ruimte, het aantal is een smal vakje en
   het kruisje staat erachter, op dezelfde hoogte als de velden zelf. */
.sid-onderdeel-rij {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 134px 34px;
	align-items: end;
	gap: 12px;
}

/* Zonder dit staat er onder elk veld nog 16px marge en lijnt het kruisje op
   die marge in plaats van op de onderkant van de velden. */
.sid-onderdeel-rij .sid-service-veld {
	margin-bottom: 0;
}

/* De kopjes staan alleen boven de eerste regel. Bij drie onderdelen onder
   elkaar drie keer Artikelnummer, Omschrijving en Aantal lezen is ruis. Haalt
   iemand de eerste regel weg, dan schuiven de kopjes vanzelf mee naar de
   regel die dan bovenaan staat. */
.sid-onderdeel-rij:not(:first-child) .sid-service-veld > span {
	display: none;
}

/* Hetzelfde kruisje als bij de gekozen machine (.sid-service-wis): geen vlak,
   grijs, en bij hover een lichtblauwe ronding eromheen. De hoge, smalle knop
   houdt de klikruimte even hoog als het veld ernaast. */
.sid-service-form button.sid-onderdeel-weg {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 46px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 5px;
	background: none;
	box-shadow: none;
	color: var(--sid-grijs);
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.sid-service-form button.sid-onderdeel-weg:hover,
.sid-service-form button.sid-onderdeel-weg:focus-visible {
	background: rgba(0, 109, 170, .1);
	color: var(--sid-grijs);
	outline: none;
}

.sid-service-form button.sid-onderdeel-weg svg {
	display: block;
	width: 14px;
	height: 14px;
}

/* display:flex hierboven wint van het hidden-attribuut, net als eerder bij de
   machinerijen. Daarom deze regel erbij. */
.sid-service-form button.sid-onderdeel-weg[hidden] {
	display: none;
}

.sid-service-form button.sid-onderdeel-meer {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--sid-blauw-midden);
	font-size: 13.5px;
	font-weight: 700;
	text-transform: none;
	cursor: pointer;
}

.sid-service-form button.sid-onderdeel-meer:hover {
	background: none;
	color: var(--sid-blauw-donker);
}

.sid-onderdeel-meer svg {
	width: 15px;
	height: 15px;
}

.sid-onderdeel-toelichting {
	margin-top: 22px;
}

/* Het aantal is de teller van de winkelwagen (.sid-teller). Die is 44 hoog en
   onze velden 46; twee pixels bijtrekken zodat hij op dezelfde lijn staat als
   Artikelnummer en Omschrijving ernaast. */
.sid-onderdeel-aantal .sid-teller {
	height: 46px;
}

/* Het veld in het midden is een invulveld en pakt dus onze veldstijl met rand
   en volle breedte. Binnen de teller hoort het juist kaal te zijn. */
.sid-service-veld .sid-teller .sid-teller-getal {
	width: 48px;
	min-height: 0;
	height: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	text-align: center;
	font-size: 14.5px;
	font-weight: 600;
}

/* De teller is zo breed als hij is; hij hoeft de kolom niet te vullen. */
.sid-onderdeel-aantal .sid-teller {
	width: max-content;
}

@media only screen and (max-width: 767px) {

	/* Op een telefoon onder elkaar, met het kruisje naast het aantal. */
	.sid-onderdeel-rij {
		grid-template-columns: minmax(0, 1fr) 34px;
	}

	.sid-onderdeel-rij .sid-service-veld:nth-child(-n+2) {
		grid-column: 1 / -1;
	}
}

.sid-service-fotos {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--sid-lijn-licht);
}

.sid-service-label {
	display: block;
	margin-bottom: 8px;
	color: var(--sid-donker);
	font-size: 12.5px;
	font-weight: 700;
}

.sid-service-label small {
	color: var(--sid-grijs);
	font-weight: 400;
}

/* Hetzelfde rode sterretje als bij de velden. */
.sid-service-label em {
	color: var(--sid-rood);
	font-style: normal;
}

.sid-service-fotorij {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.sid-service-fotorij small {
	color: var(--sid-grijs);
	font-size: 12.5px;
}

.sid-service-voorbeelden {
	display: contents;
}

.sid-service-foto {
	position: relative;
	flex: none;
	width: 92px;
	height: 72px;
}

.sid-service-foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 1px solid #D7DDE1;
	border-radius: 6px;
}

/* Het kruisje rechtsboven op de foto, zoals in ontwerp 14A. */
.sid-service-form button.sid-service-foto-weg {
	position: absolute;
	top: -7px;
	right: -7px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin: 0;
	padding: 0;
	border: 1px solid #D7DDE1;
	border-radius: 50%;
	background: #fff;
	box-shadow: none;
	color: #42565F;
	cursor: pointer;
}

.sid-service-form button.sid-service-foto-weg svg {
	display: block;
	width: 12px;
	height: 12px;
}

.sid-service-form button.sid-service-foto-weg:hover {
	background: var(--sid-vlak);
	color: var(--sid-donker);
}

.sid-service-toevoegen {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 92px;
	height: 72px;
	border: 1.5px dashed #C4CBD0;
	border-radius: 6px;
	color: var(--sid-blauw-midden);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}

.sid-service-toevoegen svg {
	display: block;
	width: 16px;
	height: 16px;
}

/* Adres: het kader is .sid-adreskader van de afrekenpagina. Hier alleen
   wat het portaal anders nodig heeft. */
.sid-service-adres[hidden],
.sid-service-handmatig[hidden] {
	display: none;
}

.sid-service-form .sid-adreskader {
	margin-top: 0;
}

.sid-service-handmatig {
	margin-top: 16px;
}

/* Versturen en laden (14E) */
.sid-service-verstuur p {
	max-width: 740px;
}

.sid-service-knop {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: 0;
	cursor: pointer;
}

.sid-service-draai {
	display: none;
	width: 15px;
	height: 15px;
	border: 2.5px solid rgba(255, 255, 255, .4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: sid-draai .7s linear infinite;
}

.sid-service-form.is-bezig .sid-service-draai {
	display: inline-block;
}

.sid-service-form.is-bezig .sid-service-knop {
	background: #0089C6;
	pointer-events: none;
}

.sid-service-form.is-bezig .sid-service-annuleer {
	color: #9aa1a6;
	pointer-events: none;
}

@keyframes sid-draai {
	to {
		transform: rotate(360deg);
	}
}

/* Proefstand en fouten */
.sid-service-proef {
	padding: 16px 20px;
	border: 1.5px solid var(--sid-okerrand);
	border-radius: 8px;
	background: var(--sid-oker-vlak);
	color: var(--sid-oker-tekst);
	font-size: 14px;
}

.sid-service-proef p {
	margin: 6px 0 10px;
}

.sid-service-proef pre {
	margin: 0;
	padding: 12px;
	overflow: auto;
	border-radius: 5px;
	background: #fff;
	color: var(--sid-donker);
	font-size: 12.5px;
	white-space: pre-wrap;
}

.sid-service-proef.is-fout {
	border-color: var(--sid-roodrand);
	background: var(--sid-rood-vlak);
	color: var(--sid-rood);
}

/* Mijn aanvragen (14C) */
.sid-service-rij {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr) 170px 120px 110px 16px;
	align-items: center;
	gap: 18px;
	padding: 16px 4px;
	border-bottom: 1px solid var(--sid-lijn-licht);
	font-size: 13.5px;
	color: #42565F;
}

.sid-service-rij:last-child {
	border-bottom: 0;
}

.sid-service-rij.is-kop {
	padding: 0 4px 10px;
	border-bottom: 1.5px solid #E1E5E8;
	color: var(--sid-grijs);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* Zelfde streek als bij .sid-geg-rol: het label schuift zijn eigen binnenruimte
   naar links, zodat het woord erin begint waar het kopje Status begint. */
.sid-service-stand {
	display: inline-flex;
	margin-left: -11px;
	padding: 5px 11px;
	border-radius: 12px;
	background: var(--sid-vlak);
	color: #42565F;
	font-size: 12.5px;
	font-weight: 700;
}

.sid-service-stand.is-gepland {
	background: var(--sid-lichtblauw);
	color: var(--sid-blauw-midden);
}

.sid-service-stand.is-afgerond {
	background: var(--sid-groen-vlak);
	color: var(--sid-groen);
}

/* Venster na versturen (14D) */
.sid-service-verstuurd {
	text-align: center;
}

.sid-service-vinkje {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: var(--sid-groen-vlak);
	color: var(--sid-groen);
}

.sid-service-vinkje svg {
	width: 28px;
	height: 28px;
}

.sid-service-verstuurd h2 {
	font-size: 24px;
}

.sid-service-verstuurd .sid-venster-knoppen {
	justify-content: center;
}

@media (max-width: 767px) {
	.sid-service-twee,
	.sid-service-twee.is-gelijk,
	.sid-service-drie {
		grid-template-columns: 1fr;
	}
	.sid-service-machinerij {
		grid-template-columns: 1fr;
		gap: 4px;
	}
	.sid-service-rij {
		grid-template-columns: 1fr 1fr;
		gap: 6px 12px;
	}
	.sid-service-rij.is-kop {
		display: none;
	}
	.sid-service-machine {
		grid-column: 1 / -1;
	}
}

/* Het thema geeft elke button hoofdletters, een eigen letter en hover.
   Deze keuzeknoppen zijn geen knoppen in de huisstijl, dus dat terug. */
.sid-service-form button.sid-service-keuze,
.sid-service-form button.sid-service-machinerij,
.sid-service-form button.sid-service-wijzig {
	height: auto;
	margin: 0;
	font-family: 'Open Sans', sans-serif;
	font-size: inherit;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	box-shadow: none;
	color: var(--sid-donker);
}

.sid-service-form button.sid-service-keuze {
	display: flex;
	background: #fff;
}

.sid-service-form button.sid-service-machinerij {
	display: grid;
	background: #fff;
}

.sid-service-form button.sid-service-keuze.is-gekozen,
.sid-service-form button.sid-service-machinerij.is-gekozen {
	background: var(--sid-lichtblauw);
}

.sid-service-form button.sid-service-wijzig {
	background: none;
	font: 700 13px/1.5 'Open Sans', sans-serif;
	color: var(--sid-blauw-midden);
	text-decoration: underline;
}

.sid-service-form button.sid-service-wijzig:hover {
	background: none;
	color: var(--sid-blauw);
}

.sid-service-form button.sid-service-keuze small,
.sid-service-form button.sid-service-machinerij small {
	text-transform: none;
	font-weight: 400;
}

/* Verborgen bij zoeken ook echt weg. De regel hierboven (display: grid)
   is sterker dan [hidden], dus hier nog sterker. 22-09-2026. */
.sid-service-form button.sid-service-machinerij[hidden] {
	display: none;
}

/* Gekozen machine onder de lijst (14A) */
.sid-service-gekozen {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--sid-lijn-licht);
}

.sid-service-gekozen[hidden] {
	display: none;
}

.sid-service-gekozen-rij {
	display: grid;
	grid-template-columns: 118px minmax(0, 1fr) 190px 24px;
	align-items: center;
	gap: 16px;
	padding: 14px 18px;
	border: 1.5px solid var(--sid-blauw);
	border-radius: 8px;
	background: var(--sid-lichtblauw);
}

.sid-service-form button.sid-service-wis {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 5px;
	background: none;
	box-shadow: none;
	color: var(--sid-grijs);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.sid-service-form button.sid-service-wis svg {
	width: 14px;
	height: 14px;
	display: block;
}

/* Zelfde hover als de andere kruisjes: een zacht vlak, dun kruis. */
.sid-service-form button.sid-service-wis:hover,
.sid-service-form button.sid-service-wis:focus-visible {
	background: rgba(0, 109, 170, .1);
	color: var(--sid-grijs);
	outline: none;
}

@media (max-width: 767px) {
	.sid-service-gekozen-rij {
		grid-template-columns: minmax(0, 1fr) 24px;
	}
	.sid-service-gekozen-rij .sid-service-plek {
		display: none;
	}
}

/* Keuzelijsten (soort aanvraag, brandstof): het pijltje uit ontwerp 14A,
   zodat je ziet dat het een lijst is. Het thema haalde het weg. */
.sid-service-veld select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 38px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6469' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 13px center / 16px 16px;
	cursor: pointer;
}

/* De verstuurknop is een echte button: het thema maakt die hoofdletters.
   In ontwerp 14A staat hij gewoon, net als de andere blauwe knoppen. */
.sid-service-form button.sid-service-knop {
	height: auto;
	margin: 0;
	font: 700 14px/1.4 'Open Sans', sans-serif;
	letter-spacing: 0;
	text-transform: none;
}

/* Uitleg en teller onder de omschrijving, naast elkaar. */
.sid-service-onder {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.sid-service-onder .sid-service-teken {
	flex: none;
	white-space: nowrap;
}

/* Ruimte voor de hulptekst met opsomming in de omschrijving. */
.sid-service-veld textarea {
	min-height: 180px;
}

.sid-service-veld textarea::placeholder {
	color: #8a9095;
	line-height: 1.6;
}

/* Versturen en Annuleren horen bij elkaar: 10px ertussen, zoals in 14A.
   De 28px van de lege stand is voor knop plus tekstlink. */
.sid-service-verstuur .sid-lege-stand-knoppen {
	gap: 10px;
}

/* Foto typeplaatje en motortypeplaatje (14B) */
.sid-service-plaat {
	display: flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	height: 46px;
	padding: 0 13px;
	border: 1px dashed var(--sid-lijn);
	border-radius: 5px;
	background: #fff;
	color: var(--sid-blauw-midden);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.sid-service-plaat[hidden],
.sid-service-plaat-vol[hidden] {
	display: none;
}

.sid-service-plaat:hover {
	border-color: var(--sid-blauw);
}

.sid-service-plaat-leeg {
	display: flex;
	align-items: center;
	gap: 10px;
}

.sid-service-plaat svg {
	width: 18px;
	height: 18px;
	flex: none;
}

.sid-service-plaat-vol {
	display: flex;
	align-items: center;
	gap: 11px;
	box-sizing: border-box;
	min-height: 46px;
	padding: 6px 10px;
	border: 1px solid var(--sid-blauwrand);
	border-radius: 5px;
	background: #F7FBFE;
}

.sid-service-plaat-vol img {
	flex: none;
	width: 44px;
	height: 34px;
	object-fit: cover;
	border: 1px solid #D7DDE1;
	border-radius: 4px;
}

.sid-service-plaat-info {
	flex: 1;
	min-width: 0;
}

.sid-service-plaat-info strong {
	display: block;
	overflow: hidden;
	color: var(--sid-donker);
	font-size: 13.5px;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sid-service-plaat-info small {
	display: block;
	color: var(--sid-grijs);
	font-size: 12.5px;
}

.sid-service-form button.sid-service-plaat-weg {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 5px;
	background: none;
	box-shadow: none;
	color: var(--sid-grijs);
	cursor: pointer;
}

.sid-service-form button.sid-service-plaat-weg svg {
	width: 14px;
	height: 14px;
}

.sid-service-form button.sid-service-plaat-weg:hover {
	background: rgba(0, 109, 170, .1);
}

/* Machinegegevens (14B): een lijn en ruimte onder de keuzevakken, en de
   tussenkop in dezelfde letter als in het ontwerp. Het thema maakt een h3
   anders kleiner en in de kopletter. */
.sid-service-zonder {
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid var(--sid-lijn-licht);
}

.sid-service-zonder[hidden],
.sid-service-met[hidden] {
	display: none;
}

.sid-service-form h3.sid-service-tussenkop {
	margin: 0 0 14px;
	font-family: 'Open Sans', sans-serif;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	color: var(--sid-donker);
}

.sid-service-form h3.sid-service-tussenkop.is-lijn {
	margin-top: 4px;
	padding-top: 20px;
}

/* Hover op een keuzevak dat niet gekozen is: wit blijven, alleen de rand
   kleurt. Anders lijkt het alsof beide vakken gekozen zijn. */
.sid-service-form button.sid-service-keuze:not(.is-gekozen):hover {
	background: #fff;
	border-color: var(--sid-blauwrand);
}

/* Het veld dat mis is, krijgt een rode rand. */
.sid-service-veld input.is-fout,
.sid-service-veld select.is-fout,
.sid-service-veld textarea.is-fout {
	border-color: var(--sid-rood-veld);
}

/* De foutmelding onder een veld in dezelfde stijl als bij afrekenen: rood,
   13px, niet vet. De labelregel eroverheen maakte hem donker en vet. */
.sid-service-veld > span.sid-service-fout {
	margin-top: 5px;
	font: 400 13px/1.4 'Open Sans', sans-serif;
	color: var(--sid-rood);
}

/* De regel onder de omschrijving: melding links, teller rechts, strak
   tegen het veld aan. */
.sid-service-veld .sid-service-onder {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-top: 1px;
}

.sid-service-veld .sid-service-onder > span.sid-service-fout {
	margin-top: 0;
}

.sid-service-veld .sid-service-onder .sid-service-teken {
	flex: none;
	margin-left: auto;
	white-space: nowrap;
}

/* Elke foutmelding hetzelfde: rood, niet vet, strak onder het veld.
   Deze regel staat als laatste zodat hij van de labelopmaak wint. */
.sid-service-form span.sid-service-fout,
.sid-service-veld .sid-service-onder > span.sid-service-fout {
	margin-top: 1px;
	font: 400 13px/1.4 'Open Sans', sans-serif;
	font-weight: 400;
	color: var(--sid-rood);
}

/* Ook het stippelvak van een foto krijgt een rode rand als hij mist. */
.sid-service-plaat.is-fout {
	border-color: var(--sid-rood-veld);
}

/* Vensters in het portaal krijgen dezelfde opmaak als het i'tje-venster en
   het offerteformulier van de webshop: zelfde waas, radius, schaduw en
   kruisje. 23-09-2026. */
.sid-venster {
	padding: 30px;
	border-radius: var(--sid-radius);
	box-shadow: var(--sid-schaduw);
}

.sid-venster::backdrop {
	background: var(--sid-waas);
}

.sid-venster h2 {
	margin: 0 30px 15px 0;
}

button.sid-venster-dicht {
	top: 20px;
	right: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border-radius: 5px;
	background: none;
	background-color: transparent;
	color: var(--sid-blauw);
	transition: background-color .15s ease, color .15s ease;
}

button.sid-venster-dicht svg {
	display: block;
}

button.sid-venster-dicht:hover,
button.sid-venster-dicht:focus-visible {
	background-color: var(--sid-vlak);
	color: var(--sid-blauw);
	outline: none;
}

.sid-service-verstuurd h2 {
	margin-right: 0;
}

/* ==========================================================================
   38. GEGEVENS & VOORKEUREN (ontwerp 18A, 24-09-2026)

   Vijf tabbladen achter /mijn-account/gegevens/. De tabbladen zelf zijn die
   van Facturen (.sid-tabs), de kaarten lijken op die van de serviceaanvraag,
   en de velden zijn letterlijk .sid-service-veld. Wat hier staat is dus vooral
   het nieuwe: de tabellen, de rolkeuze en de schuifjes.

   Ontwerpkleuren naar het thema:
     kaart #fff, rand #E5E5E5, schaduw .08   ->  wit, --sid-schaduw
     lijn in de tabel #EDEFF1                ->  --sid-lijn-licht
     kop van de tabel #5c6469                ->  --sid-grijs
     gekozen rolkaart #EAF6FD / #009EE3      ->  --sid-lichtblauw, --sid-blauw
     rolvlakje beheerder #EAF6FD / #006DAA   ->  --sid-lichtblauw, --sid-blauw-midden
     schuifje aan #009EE3, uit #D7DDE1       ->  --sid-blauw, --sid-lijn
   ========================================================================== */

/* GEEN EIGEN MARGE BOVENIN.
   De ouder .sid-kc-inhoud is een flexkolom met gap 20px, en die zorgt al
   voor de ruimte onder de tabs. Een eigen margin-top kwam daar bovenop en
   maakte er 40px van, terwijl Service en Onderdelen op 20px staan. */
.sid-geg-bladen {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sid-geg-kaart {
	padding: 24px 26px 26px;
	border-radius: var(--sid-radius);
	background: #fff;
	box-shadow: var(--sid-schaduw);
}

/* --- de kop van een kaart ------------------------------------------------ */

.sid-geg-kaartkop {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}

.sid-geg-kaartkop h2 {
	margin: 0 0 4px;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 19px;
	line-height: 1.25;
	color: var(--sid-donker);
}

.sid-geg-kaartkop p {
	max-width: 640px;
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--sid-grijs);
}

/* --- de melding na het opslaan -------------------------------------------
   DEZELFDE VORM ALS DE MELDING IN DE WINKELWAGEN.
   Daar is het .sid-toast: een klein blokje met een rand en een schaduw, rechts
   uitgelijnd, en niet een balk over de hele breedte. Die vorm gebruiken we
   hier opnieuw, alleen in het groen, want hier is het goed nieuws.

   En op dezelfde plek: vlak onder de header, rechts, op de hoogte van de
   paginatitel. Het omhulsel staat absoluut in .sid-kc-kop en neemt dus geen
   ruimte in; de pagina eronder staat precies zoals hij zonder melding zou
   staan. De 50px is de padding-top van .sid-kc-kop, zodat de melding op de
   bovenkant van de titel begint. */

.sid-kc-kop {
	position: relative;
}

.sid-geg-toastplek {
	position: absolute;
	top: 50px;
	right: 0;
	z-index: 20;
}

.sid-geg-toast {
	position: static;
	width: auto;
	max-width: 100%;
	border-color: var(--sid-groenrand);
	background: var(--sid-groen-vlak);
	font-weight: 600;
	color: var(--sid-groen);
}

.sid-geg-toast.is-fout {
	border-color: var(--sid-roodrand);
	background: var(--sid-rood-vlak);
	color: var(--sid-rood);
}

/* --- knoppen -------------------------------------------------------------- */

/* Verborgen is verborgen. Zonder deze regel wint de display hieronder van het
   kenmerk hidden, net als bij de knoppen in een wisselkaart. */
.sid-geg-knoprij[hidden] {
	display: none;
}

.sid-geg-knoprij {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 22px;
}

/* De kale tekstknop, voor "Toegang intrekken" en "Toch niet wijzigen".
   Zelfde uiterlijk als een link in een kaart, want dat is het ook. */
.sid-geg-tekstknop {
	padding: 0;
	border: 0;
	background: none;
	font: 700 13.5px 'Open Sans', sans-serif;
	color: var(--sid-blauw-midden);
	text-decoration: underline;
	cursor: pointer;
}

.sid-geg-tekstknop:hover,
.sid-geg-tekstknop:focus-visible {
	color: var(--sid-blauw-donker);
}

/* --- velden die het portaal nog niet kende -------------------------------- */

.sid-service-veld input[type="email"],
.sid-service-veld input[type="password"] {
	box-sizing: border-box;
	width: 100%;
	height: 46px;
	padding: 0 13px;
	border: 1px solid var(--sid-lijn);
	border-radius: 5px;
	background: #fff;
	font: 400 14.5px 'Open Sans', sans-serif;
	color: var(--sid-donker);
}

.sid-service-veld input[type="email"]:focus,
.sid-service-veld input[type="password"]:focus {
	border-color: var(--sid-blauw);
	outline: none;
}

/* De rode rand staat al verderop in dit bestand, maar de regels hierboven
   zetten daarna opnieuw een rand op het e-mailveld. Even zwaar, dus dan wint
   de laatste. Daarom hier nog een keer, na die regels. */
.sid-service-veld input.is-fout,
.sid-service-veld select.is-fout,
.sid-service-veld textarea.is-fout {
	border-color: var(--sid-rood-veld);
}

/* De voet van een kaart: een streep en daaronder de knop rechts, zoals bij
   Bedrijfsgegevens in het ontwerp. */
.sid-geg-kaartvoet {
	display: flex;
	flex-direction: column;
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid var(--sid-lijn-licht);
}

.sid-geg-kaartvoet[data-lezen] {
	flex-direction: row;
	justify-content: flex-end;
}

.sid-geg-kaartvoet .sid-geg-knoprij {
	margin-top: 18px;
}

/* --- gegevens die je niet kunt wijzigen ----------------------------------- */

.sid-geg-vast {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 24px;
}

.sid-geg-vast.is-volgende {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--sid-lijn-licht);
}

.sid-geg-leeg {
	color: var(--sid-grijs);
}

.sid-geg-niets {
	margin: 0;
	font-size: 14.5px;
	color: var(--sid-grijs);
}

/* Staat er een verzoek open, dan zie je dat. Anders stuurt iemand hem drie
   keer omdat er niets gebeurt. */
.sid-geg-loopt {
	margin-bottom: 18px;
	padding: 12px 16px;
	border: 1px solid var(--sid-blauwrand);
	border-radius: 6px;
	background: var(--sid-lichtblauw);
	font-size: 13.5px;
	color: var(--sid-blauw-midden);
}

/* --- het e-mailadres ------------------------------------------------------ */

.sid-geg-huidig {
	margin-bottom: 18px;
	font-size: 15px;
	font-weight: 700;
	color: var(--sid-donker);
}

.sid-geg-wissel p {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--sid-grijs);
}

/* Veld en knop naast elkaar, met de knop op de onderkant van het veld. */
.sid-geg-codeveld {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
}

.sid-geg-codeveld .sid-service-veld {
	flex: 1 1 260px;
	margin-bottom: 0;
}

.sid-geg-codeveld .sid-dossier-knop {
	flex: none;
	height: 46px;
	padding-top: 0;
	padding-bottom: 0;
	line-height: 44px;
}

.sid-geg-wissel + form {
	margin-top: 12px;
}

/* --- de twee tabellen -----------------------------------------------------
   Eén raster voor de kop en de regels, zodat de kolommen altijd uitlijnen.
   Het aantal kolommen staat per tabel, de rest is gelijk. */

.sid-geg-tabelkop,
.sid-geg-rij {
	display: grid;
	align-items: center;
	gap: 18px;
}

.sid-geg-tabelkop {
	padding: 0 4px 10px;
	border-bottom: 1.5px solid var(--sid-lijn);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--sid-grijs);
}

.sid-geg-rij {
	padding: 16px 4px;
	border-bottom: 1px solid var(--sid-lijn-licht);
	font-size: 13.5px;
	color: var(--sid-grijs);
}

.sid-geg-rij:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.sid-geg-tabel-cp .sid-geg-tabelkop,
.sid-geg-tabel-cp .sid-geg-rij {
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.4fr) 150px;
}

/* De laatste kolom was 130px. Daar paste Toegang intrekken net niet in, en in
   de wijzigstand staan daar Toegang intrekken en Annuleren naast elkaar. */
.sid-geg-tabel-tg .sid-geg-tabelkop,
.sid-geg-tabel-tg .sid-geg-rij {
	grid-template-columns: minmax(0, 1.6fr) 150px 140px 150px 250px;
}


.sid-geg-actie .sid-geg-tekstknop {
	white-space: nowrap;
}

/* De drie standen van een regel staan op dezelfde plek: wat dicht staat is
   verborgen, dus er verspringt niets. */
.sid-geg-rijwissel [hidden] {
	display: none;
}

.sid-geg-rijwissel .sid-geg-actie,
.sid-geg-rijknoppen {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
}

.sid-geg-vraag {
	font-size: 13.5px;
	color: var(--sid-donker);
	white-space: nowrap;
}

/* Hetzelfde kruisje als bij een onderdeelregel (.sid-onderdeel-weg): geen vlak,
   grijs, bij hover een lichtblauwe ronding. Met het stukje button ervoor, want
   anders wint de knopopmaak van het thema en wordt het een donkere pil. */
.sid-geg-rijwissel button.sid-geg-kruis {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 5px;
	background: none;
	box-shadow: none;
	color: var(--sid-grijs);
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.sid-geg-rijwissel button.sid-geg-kruis svg {
	width: 18px;
	height: 18px;
}

.sid-geg-rijwissel button.sid-geg-kruis:hover,
.sid-geg-rijwissel button.sid-geg-kruis:focus-visible {
	background: rgba(0, 109, 170, .1);
	color: var(--sid-rood);
	outline: none;
}

/* In een tabelregel is een knop op volle maat te zwaar; Ja en Nee mogen kleiner.
   Wijzigen en Annuleren houden hun gewone maat, zoals overal. */
.sid-geg-rijwissel .sid-dossier-knop.is-klein {
	padding: 8px 16px;
	font-size: 13.5px;
}

/* Intrekken is niet terug te draaien; dat mag je zien voor je klikt. */
.sid-geg-rijwissel .sid-dossier-knop.is-rood {
	border-color: var(--sid-rood);
	background: var(--sid-rood);
	color: #fff;
}

.sid-geg-naam {
	display: block;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--sid-donker);
}

.sid-geg-jij {
	font-weight: 400;
	color: var(--sid-grijs);
}

.sid-geg-klein {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	color: var(--sid-grijs);
}

.sid-geg-actie {
	text-align: right;
}

/* De chip schuift zijn eigen binnenruimte naar links, zodat het woord erin op
   dezelfde positie begint als het kopje erboven. Zonder dat staat de tekst 11px
   naar rechts en leest de kolom scheef. Het ronde randje steekt daardoor 11px
   uit, en dat past ruim binnen de 18px tussen de kolommen. */
.sid-geg-rol {
	display: inline-flex;
	align-items: center;
	margin-left: -11px;
	padding: 5px 11px;
	border-radius: 12px;
	background: var(--sid-vlak);
	font-size: 12.5px;
	font-weight: 700;
	color: var(--sid-grijs);
}

/* De medewerkerchip staat grijs, de beheerderchip blauw. Zo staat het in
   ontwerp 18A, en zo zie je in een oogopslag wie er alles mag. */
.sid-geg-rol.is-medewerker {
	background: var(--sid-vlak);
	color: #42565F;
}

.sid-geg-rol.is-beheerder {
	background: var(--sid-lichtblauw);
	color: var(--sid-blauw-midden);
}

/* De rol wisselen is een keuzelijst die zichzelf verstuurt. Een knop erbij
   zou een tweede handeling zijn voor een keuze uit twee. */
/* De rol van een collega is een keuzelijst, zodat je hem kunt omzetten zonder
   hem opnieuw uit te nodigen. Het thema haalt het pijltje van elke lijst weg;
   dat zetten we hier zelf terug, anders staat er een wit vakje waarvan niemand
   ziet dat je erop kunt klikken. Vorm en maat volgen de chip ernaast, en hij
   schuift dezelfde 11px naar links zodat de tekst onder het kopje Rol begint. */
.sid-geg-rolform select {
	box-sizing: border-box;
	width: auto;
	max-width: 100%;
	height: 32px;
	margin-left: -11px;
	padding: 0 32px 0 11px;
	border: 1px solid var(--sid-lijn);
	border-radius: 12px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6469' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center / 14px 14px;
	font: 700 12.5px 'Open Sans', sans-serif;
	color: var(--sid-donker);
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.sid-geg-rolform select:focus {
	border-color: var(--sid-blauw);
	outline: none;
}

/* --- het blok Collega toevoegen ------------------------------------------- */

/* Staat boven de lijst met collega's en verschijnt pas als je op de knop in de
   kopregel drukt. Een zacht blauw vlak binnen de witte kaart, zodat je ziet dat
   het invullen erbij hoort en niet een losse kaart is. Het ontwerp gebruikt
   #F7FBFE; dat is --sid-lichtblauw nog wat verder verdund, dus mengen we die
   met wit in plaats van een nieuwe kleur aan het palet toe te voegen. */
.sid-geg-toevoegblok {
	margin: 4px 0 22px;
	padding: 22px;
	border: 1.5px solid #cde9f8;
	border-radius: 8px;
	background: color-mix( in srgb, var(--sid-lichtblauw) 45%, #fff );
}

.sid-geg-toevoegblok h3 {
	margin: 0 0 6px;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 17px;
	color: var(--sid-donker);
}

/* De velden staan op wit, anders verdwijnen ze in het blauwe vlak. */
.sid-geg-toevoegblok input[type="text"],
.sid-geg-toevoegblok input[type="email"],
.sid-geg-toevoegblok input[type="tel"] {
	background: #fff;
}

/* Hoort bij de kop van het blok, niet bij het vinkje eronder. Daarom staat hij
   direct onder de titel, net als de ondertitel in een kaartkop. */
.sid-geg-blokuitleg {
	margin: 0 0 18px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--sid-grijs);
}

/* In dit blok staan de knoppen links, bij de tekst, en niet rechts zoals in een
   kaartvoet. Zo leest het als een formulier en niet als het einde van de kaart. */
.sid-geg-toevoegblok .sid-geg-knoprij {
	justify-content: flex-start;
	margin-top: 18px;
}

/* --- de rolkeuze bij een nieuwe collega ----------------------------------- */

.sid-geg-rolkeuze {
	margin-top: 4px;
}

.sid-geg-rollen {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 6px;
}

.sid-geg-rolkaart {
	display: flex;
	flex: 1 1 260px;
	align-items: flex-start;
	gap: 12px;
	padding: 13px 16px;
	border: 1.5px solid var(--sid-lijn);
	border-radius: 7px;
	background: #fff;
	cursor: pointer;
	transition: ease .2s all;
}

.sid-geg-rolkaart:hover {
	border-color: var(--sid-blauw);
}

/* Het blijft een echt keuzerondje, want dan werkt het toetsenbord en hoeft er
   geen script aan te pas te komen. Alleen het uiterlijk nemen we over van de
   keuze Met of Zonder SID-nummer in het serviceformulier: een vierkantje dat
   blauw wordt met een vinkje erin. Zelfde maten en kleuren als .sid-service-vak,
   zodat de twee schermen niet uit elkaar lopen. */
.sid-geg-rolkaart input {
	flex: none;
	width: 22px;
	height: 22px;
	margin: 1px 0 0;
	border: 1.5px solid #C4CBD0;
	border-radius: 5px;
	background: #fff;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.sid-geg-rolkaart input:checked {
	border-color: var(--sid-blauw);
	background: var(--sid-blauw) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* Zonder het rondje van de browser is er ook geen focusring meer. Die zetten we
   er zelf op, anders zie je met het toetsenbord niet waar je bent. */
.sid-geg-rolkaart input:focus-visible {
	outline: 2px solid var(--sid-blauw);
	outline-offset: 2px;
}

.sid-geg-rolkaart:has(input:checked) {
	border-color: var(--sid-blauw);
	background: var(--sid-lichtblauw);
}

.sid-geg-rolkaart strong {
	display: block;
	margin-bottom: 2px;
	font-size: 14.5px;
	color: var(--sid-donker);
}


/* Het vinkje staat los, maar moet wel recht onder het vinkje van de rolkaart
   erboven staan. Niet met het opgetelde getal 17.5px: de rolkaart komt daar via
   een rand van 1.5px plus 16px binnenruimte, en de browser rondt die twee
   sommen net anders af. Op een scherm met dubbele pixels scheelde dat een
   pixel. Daarom hier dezelfde twee waarden, met een doorzichtige rand. */
.sid-geg-vinkje {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 16px;
	padding-left: 16px;
	border-left: 1.5px solid transparent;
	cursor: pointer;
}

/* Zelfde vierkantje als bij de rolkeuze hierboven: dezelfde maat, dezelfde
   hoeken en hetzelfde witte vinkje. Het enige verschil is dat dit er los onder
   staat en niet in een omlijnd vak. */
.sid-geg-vinkje input {
	flex: none;
	margin: 0;
	width: 22px;
	height: 22px;
	border: 1.5px solid #C4CBD0;
	border-radius: 5px;
	background: #fff;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.sid-geg-vinkje input:checked {
	border-color: var(--sid-blauw);
	background: var(--sid-blauw) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.sid-geg-vinkje input:focus-visible {
	outline: 2px solid var(--sid-blauw);
	outline-offset: 2px;
}

.sid-geg-vinkje span {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--sid-donker);
}

/* --- wat mag welke rol ---------------------------------------------------- */

.sid-geg-rechtenkop,
.sid-geg-rechtenrij {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 120px 120px;
	align-items: center;
}

.sid-geg-rechtenkop {
	padding-bottom: 10px;
	border-bottom: 1.5px solid var(--sid-lijn);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--sid-grijs);
}

.sid-geg-rechtenkop span + span,
.sid-geg-rechtenrij span + span {
	text-align: center;
}

.sid-geg-rechtenrij {
	padding: 12px 0;
	border-bottom: 1px solid var(--sid-lijn-licht);
	font-size: 14px;
	color: var(--sid-donker);
}

.sid-geg-rechtenrij:last-child {
	border-bottom: 0;
}

.sid-geg-rechtenrij .is-ja,
.sid-geg-rechtenrij .is-nee {
	display: flex;
	justify-content: center;
}

.sid-geg-rechtenrij .is-ja {
	color: var(--sid-blauw);
}

.sid-geg-rechtenrij .is-nee {
	color: var(--sid-lijn);
}

.sid-geg-rechtenrij svg {
	width: 16px;
	height: 16px;
}

.sid-geg-rechtenrij .is-nee svg {
	width: 14px;
	height: 14px;
}

/* --- de schuifjes ---------------------------------------------------------
   Het vinkje zelf staat buiten beeld maar bestaat nog wel; het schuifje
   ernaast laat zien hoe het staat. Zo blijft de spatiebalk werken en hoeft
   er geen script bij. */

.sid-geg-schuifregel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 16px 0;
	border-bottom: 1px solid var(--sid-lijn-licht);
	cursor: pointer;
}

.sid-geg-schuifregel:first-child {
	padding-top: 0;
}

.sid-geg-schuifregel:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.sid-geg-schuiftekst {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.sid-geg-schuiftekst strong {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--sid-donker);
}

.sid-geg-schuiftekst small {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--sid-grijs);
}

.sid-geg-akkoord {
	color: var(--sid-blauw-midden);
}

.sid-geg-schuifregel input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.sid-geg-schuif {
	position: relative;
	flex: none;
	width: 44px;
	height: 26px;
	border-radius: 13px;
	background: var(--sid-lijn);
	transition: ease .2s all;
}

.sid-geg-schuif::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
	transition: ease .2s all;
}

.sid-geg-schuifregel input:checked ~ .sid-geg-schuif {
	background: var(--sid-blauw);
}

.sid-geg-schuifregel input:checked ~ .sid-geg-schuif::after {
	left: 21px;
}

.sid-geg-schuifregel input:focus-visible ~ .sid-geg-schuif {
	outline: 2px solid var(--sid-blauw-midden);
	outline-offset: 2px;
}

/* --- smaller scherm -------------------------------------------------------
   De tabellen worden lijstjes: elke regel onder elkaar, met de kop eruit.
   Een tabel van vijf kolommen op een telefoon is niet te lezen. */

@media (max-width: 860px) {

	.sid-geg-vast,
	.sid-geg-rechtenkop,
	.sid-geg-rechtenrij {
		grid-template-columns: minmax(0, 1fr) 70px 70px;
	}

	.sid-geg-vast {
		grid-template-columns: minmax(0, 1fr);
	}

	.sid-geg-tabelkop {
		display: none;
	}

	.sid-geg-tabel-cp .sid-geg-rij,
	.sid-geg-tabel-tg .sid-geg-rij {
		grid-template-columns: minmax(0, 1fr);
		gap: 6px;
	}

	.sid-geg-actie {
		text-align: left;
	}

	.sid-geg-rolform select {
		width: auto;
	}
}

/* Een veld dat vastligt: het e-mailadres waarmee je inlogt. Het staat op de
   plek uit het ontwerp en ziet er hetzelfde uit, maar je ziet meteen dat er
   niets te typen valt. */
.sid-service-veld input[readonly] {
	background: var(--sid-vlak);
	color: var(--sid-grijs);
	cursor: default;
}

.sid-service-veld input[readonly]:focus {
	border-color: var(--sid-lijn);
}

/* De knop Wijzigen staat op de kopregel en niet onder de kaart, zoals in
   het ontwerp. */
.sid-geg-kaartkop .sid-dossier-knop {
	flex: none;
}

/* De knoppen op de kopregel staan naast elkaar en houden hun plek, of je nu
   leest of invult. Daardoor verspringt er niets als je op Wijzigen klikt. */
.sid-geg-kopknoppen {
	display: flex;
	flex: none;
	gap: 10px;
}

/* Een kaart met twee standen: lezen of invullen. Wat dicht staat heeft het
   kenmerk hidden. Dat verbergt de browser zelf al, behalve bij iets waar wij
   een display op hebben gezet; vandaar deze regel. */
.sid-geg-wissel [hidden] {
	display: none;
}


/* ==========================================================================
   39. PORTAAL FEEDBACK (ontwerp 19B, 26-09-2026)

   Twee tabbladen achter /mijn-account/mijn-feedback/. De tabbladen zijn die
   van Facturen (.sid-tabs), de kaarten die van de serviceaanvraag
   (.sid-afreken-kaart). Wat hier staat is het nieuwe: de keuzeknoppen, de
   twee kolommen en de lijst met wat je hebt ingestuurd.

   Ontwerpkleuren naar het thema:
     kaart #fff, rand #E5E5E5, schaduw .08   ->  wit, --sid-schaduw
     lijn in de kaart #EDEFF1                ->  --sid-lijn-licht
     tekst #42565F en #5c6469                ->  --sid-grijs
     rand keuzeknop #D7DDE1                  ->  --sid-lijn
     gekozen knop #EAF6FD / #009EE3          ->  --sid-lichtblauw, --sid-blauw
     hover #F7FBFE                           ->  --sid-lichtblauw verdund met wit
     Op de planning #E6F4EA / #1E7B3A        ->  --sid-groen-vlak, --sid-groen
     Verstuurd #EEF1F3 / #42565F             ->  --sid-vlak, --sid-grijs
     uitgezette knop #D7DDE1                 ->  --sid-lijn
   ========================================================================== */

.sid-fb-intro {
	margin: 0;
	max-width: 720px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--sid-grijs);
	text-wrap: pretty;
}

/* Het formulier met de kaart ernaast. De zijkaart is 330px breed en de rest is
   voor het formulier; align-items: start houdt de zijkaart bovenaan staan in
   plaats van hem mee te laten rekken met het formulier ernaast. */
.sid-fb-twee {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: 20px;
	align-items: start;
}

@media (max-width: 1100px) {
	.sid-fb-twee {
		grid-template-columns: 1fr;
	}
}


/* --- het formulier -------------------------------------------------------- */

/* Boven zit bijna niets: het eerste blok zet zijn eigen ruimte al met
   padding-top, dus een kaart met 25px erboven zou dat verdubbelen. */
.sid-fb-kaart {
	padding: 4px 30px 26px;
}

.sid-fb-blok {
	padding: 24px 0;
	border-bottom: 1px solid var(--sid-lijn-licht);
}

.sid-fb-blok.is-laatste {
	border-bottom: none;
}

.sid-fb-blok > h2 {
	margin: 0 0 12px;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 27px;
	color: var(--sid-donker);
}

/* Het woord optioneel achter de vraag. Zelfde maat als overal elders in het
   portaal: 11px in een small, zie .sid-service-label small bij de
   serviceaanvraag en het Btw-nummer bij het aanmelden. De Machine keuzehulp
   heeft hem op 14px staan, dat is de uitzondering. */
.sid-fb-blok > h2 small {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 11px;
	color: var(--sid-grijs);
}

/* De vraag is bij een tekstvak het label van dat vak. Daarmee zet een klik op
   de vraag de cursor in het veld. De opmaak komt van de h2 eromheen. */
.sid-fb-blok > h2 label {
	display: block;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

/* De zin onder de vraag. De h2 erboven houdt 12px aan; met deze negatieve
   marge wordt dat de 4px uit het ontwerp, zonder de h2 apart te hoeven
   aanspreken. */
.sid-fb-blok > h2 + .sid-fb-onder {
	margin: -8px 0 12px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--sid-grijs);
}


/* --- de keuzeknoppen ------------------------------------------------------ */

.sid-fb-keuzes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Het label IS de knop. Het radioveld eronder blijft bestaan maar is
   onzichtbaar; zie hieronder waarom het niet met display: none gaat. */
.sid-fb-keuze {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 10px 18px;
	border: 1.5px solid var(--sid-lijn);
	border-radius: 22px;
	background: #fff;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--sid-donker);
	cursor: pointer;
	transition: ease .2s all;
}

/* NIET display: none OP HET RADIOVELD.
   Dan haalt de browser hem uit de tabvolgorde en kun je de keuze niet meer met
   het toetsenbord maken. Hij staat dus wel in de knop, maar is doorzichtig en
   1 bij 1 pixel. */
.sid-fb-keuze input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	margin: 0;
	pointer-events: none;
}

.sid-fb-keuze:hover {
	border-color: var(--sid-blauw);
	background: color-mix( in srgb, var(--sid-lichtblauw) 45%, #fff );
	color: var(--sid-blauw-midden);
}

/* De gekozen stand. :has() kijkt of het radioveld binnen dit label aan staat;
   anders was er geen manier om het label zelf te kleuren. */
.sid-fb-keuze:has( input:checked ) {
	border-color: var(--sid-blauw);
	background: var(--sid-lichtblauw);
	font-weight: 700;
	color: var(--sid-blauw-midden);
}

/* Tab je erlangs, dan moet je zien waar je bent. Het veld zelf is onzichtbaar,
   dus zetten we de ring om de knop. */
.sid-fb-keuze:has( input:focus-visible ) {
	outline: 2px solid var(--sid-blauw);
	outline-offset: 2px;
}

/* Het vinkje staat altijd in de knop en is alleen te zien als de keuze aan
   staat. Zo verspringt de tekst niet als je kiest. */
.sid-fb-vink {
	flex: none;
	width: 12px;
	height: 12px;
	display: none;
}

.sid-fb-keuze:has( input:checked ) .sid-fb-vink {
	display: block;
}


/* --- de tekstvakken ------------------------------------------------------- */

.sid-fb-veld {
	box-sizing: border-box;
	width: 100%;
	min-height: 110px;
	padding: 11px 13px;
	border: 1px solid var(--sid-lijn);
	border-radius: 5px;
	background: #fff;
	font-family: 'Open Sans', sans-serif;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--sid-donker);
	resize: vertical;
}

.sid-fb-veld.is-kort {
	min-height: 80px;
}

.sid-fb-veld:focus {
	border-color: var(--sid-blauw);
	outline: none;
}


/* --- de voet met de knop -------------------------------------------------- */

.sid-fb-voet {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	padding-top: 22px;
	border-top: 1px solid var(--sid-lijn-licht);
}

/* De foutmelding duwt zichzelf naar links, zodat de knop rechts blijft staan
   waar hij stond. */
.sid-fb-fout {
	margin: 0 auto 0 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--sid-rood);
}

/* Cherry zet elke knop in hoofdletters (button in style.css). In het ontwerp
   staat er gewoon Feedback versturen, dus draaien we dat hier terug. */
.sid-fb-knop,
.sid-fb-knop:visited {
	display: inline-block;
	padding: 13px 26px;
	text-transform: none;
	border: none;
	border-radius: 5px;
	background: var(--sid-blauw);
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	transition: ease .3s all;
}

.sid-fb-knop:hover,
.sid-fb-knop:focus-visible {
	background: var(--sid-blauw-donker);
	color: #fff;
	text-decoration: none;
}

/* De tweede knop in de bedanktstand: dezelfde maat, maar wit met een blauwe
   rand. Die rand zit binnen de knop, dus met een kleinere padding blijft hij
   net zo hoog als de blauwe ernaast. */
.sid-fb-knop.is-licht,
.sid-fb-knop.is-licht:visited {
	padding: 11.5px 24.5px;
	border: 1.5px solid var(--sid-blauw);
	background: #fff;
	color: var(--sid-blauw-midden);
}

.sid-fb-knop.is-licht:hover,
.sid-fb-knop.is-licht:focus-visible {
	background: color-mix( in srgb, var(--sid-lichtblauw) 45%, #fff );
	color: var(--sid-blauw-midden);
}

/* De knop in de lege stand van Mijn feedback staat er alleen, zonder een
   tweede knop ernaast, en mag daarom een maatje kleiner. */
.sid-fb-knop.is-klein,
.sid-fb-knop.is-klein:visited {
	padding: 11px 22px;
	font-size: 14px;
}

/* Zolang er geen gebied en geen tekst staat kan er niets verstuurd worden.
   Zonder JavaScript blijft de knop gewoon aan en zegt het formulier zelf wat
   er mist; met JavaScript ziet de knop er ook naar uit. Zie feedback.php. */
.sid-fb-knop:disabled,
.sid-fb-knop:disabled:hover {
	background: var(--sid-lijn);
	color: #fff;
	cursor: not-allowed;
}


/* --- de bedanktstand ----------------------------------------------------- */

.sid-fb-bedankt {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 44px 30px;
}

.sid-fb-vinkje {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--sid-lichtblauw);
	color: var(--sid-blauw);
}

.sid-fb-vinkje svg {
	width: 20px;
	height: 20px;
}

.sid-fb-bedankt h2 {
	margin: 0;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 22px;
	color: var(--sid-donker);
}

.sid-fb-bedankt p {
	margin: 0;
	max-width: 520px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--sid-grijs);
}

.sid-fb-knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 6px;
}


/* --- de kaart ernaast ---------------------------------------------------- */

.sid-fb-zij {
	padding: 24px 24px 22px;
}

.sid-fb-zij > h2 {
	margin: 0 0 16px;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: var(--sid-donker);
}

.sid-fb-stappen {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Twee kolommen: het rondje met het cijfer en de regel ernaast. Een grid en
   geen flex, zodat de tweede regel van een lange stap onder de eerste uitkomt
   en niet onder het cijfer. */
.sid-fb-stappen li {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	gap: 12px;
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--sid-grijs);
}

.sid-fb-stappen li span {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 2px solid var(--sid-blauw);
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	color: var(--sid-blauw);
}

.sid-fb-hulp {
	margin: 20px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--sid-lijn-licht);
	font-size: 14px;
	line-height: 1.55;
	color: var(--sid-grijs);
}

.sid-fb-hulp a {
	font-weight: 700;
	color: var(--sid-blauw-midden);
}


/* --- Mijn feedback ------------------------------------------------------- */

/* Onderaan bijna geen ruimte: de laatste regel zet zijn eigen 16px al. */
.sid-fb-lijst {
	padding: 24px 26px 10px;
}

.sid-fb-lijst > h2 {
	margin: 0 0 6px;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 19px;
	color: var(--sid-donker);
}

/* Vier kolommen: datum, gebied, wat je schreef, en de stand rechts. Het
   antwoord eronder loopt over de derde en de vierde kolom, zodat het onder de
   tekst begint en niet onder de datum. */
.sid-fb-regel {
	display: grid;
	grid-template-columns: 110px 190px minmax(0, 1fr) 150px;
	align-items: center;
	gap: 18px;
	padding: 16px 0;
	border-bottom: 1px solid var(--sid-lijn-licht);
}

.sid-fb-regel:last-child {
	border-bottom: none;
}

.sid-fb-datum {
	font-size: 14px;
	color: var(--sid-grijs);
}

.sid-fb-gebied {
	font-size: 14px;
	font-weight: 600;
	color: var(--sid-donker);
}

.sid-fb-tekst {
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--sid-donker);
}

.sid-fb-stand {
	justify-self: end;
	padding: 5px 11px;
	border-radius: 12px;
	background: var(--sid-vlak);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--sid-grijs);
	white-space: nowrap;
}

.sid-fb-stand.is-reactie {
	background: var(--sid-lichtblauw);
	color: var(--sid-blauw-midden);
}

.sid-fb-stand.is-planning {
	background: var(--sid-groen-vlak);
	color: var(--sid-groen);
}

/* Het antwoord van Siderius. Een eigen vlak binnen de regel, zodat je ziet dat
   het bij die regel hoort en niet een nieuwe is. De negatieve marge boven haalt
   de ruimte weg die de gap van het raster er anders tussen zet. */
.sid-fb-antwoord {
	grid-column: 3 / 5;
	margin-top: -4px;
	padding: 12px 16px;
	border-radius: 6px;
	background: color-mix( in srgb, var(--sid-lichtblauw) 45%, #fff );
}

.sid-fb-antwoord span {
	display: block;
	margin-bottom: 4px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--sid-blauw-midden);
}

.sid-fb-antwoord p {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--sid-donker);
	text-wrap: pretty;
}

/* De lege stand van Mijn feedback, ontwerp 19C: een kop, een regel uitleg en
   de knop terug naar het formulier. */
.sid-fb-leegkaart {
	padding: 34px 26px 32px;
}

.sid-fb-leegkaart > h2 {
	margin: 0 0 6px;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 19px;
	color: var(--sid-donker);
}

.sid-fb-leegkaart > p {
	max-width: 560px;
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--sid-grijs);
}

.sid-fb-leegkaart > .sid-fb-knop {
	margin-top: 22px;
}

/* Op een smal scherm passen vier kolommen niet, dus wordt het een stapel:
   datum, gebied, tekst, stand, en het antwoord eronder. */
@media (max-width: 900px) {
	.sid-fb-regel {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: 6px;
	}

	.sid-fb-stand {
		justify-self: start;
	}

	.sid-fb-antwoord {
		grid-column: 1;
		margin-top: 6px;
	}
}


/* ==========================================================================
   40. DE KORTINGSCODE IN HET OVERZICHT (ontwerp 8G, 28-09-2026)

   Drie onderdelen, in de kaart .sid-som van de winkelwagenpagina:

     .sid-som-korting    de kortingsregel tussen de bedragen
     .sid-som-bon        het invoerveld met de knop Toepassen
     .sid-som-bon-aan    de bevestiging als er een code aanstaat

   Het veld stond tot vandaag links onder de winkelwagentabel en had daar
   helemaal geen eigen opmaak: het erfde wat WooCommerce en Cherry toevallig
   meegaven. Vandaar dat het er niet uitzag.

   Zie woocommerce/cart/cart-totals.php voor de markup en
   inc/siderius-webshop/kortingscode.php voor de meldingen.
   ========================================================================== */

/**
 * DE KORTINGSREGEL.
 *
 * Staat in .sid-som-regels en erft daar de flex-verdeling en de gap van. Het
 * enige eigene is de kleur, en die zit op de regel als geheel: label en bedrag
 * allebei rood. Alleen het bedrag kleuren laat het label achter in het grijs
 * van een gewone regel, en dan leest het als "er gebeurt hier iets met een
 * bedrag" in plaats van "hier gaat iets af".
 *
 * ROOD, EN DAT IS NA EEN OMWEG.
 * Deze regel was eerst groen, met als redenering dat rood in deze webshop de
 * kleur van fouten is. Tomas draaide dat om op 28-09-2026: in een KOLOM MET
 * BEDRAGEN betekent rood niet "fout" maar "min". Dat is de oudere en de
 * sterkere afspraak van de twee, ouder dan het web, en zo leest een klant een
 * rij bedragen ook. De foutmelding onder het invoerveld is eveneens rood,
 * maar die staat onder een veld en niet in een bedragenkolom; daar doet de
 * plek het werk dat de kleur alleen niet kan.
 *
 * --sid-rood, niet de #D0021B uit het ontwerp. Dat is de vaste afspraak: een
 * hex uit een ontwerp wordt hier de dichtstbijzijnde themakleur.
 *
 * Die tweede regel is nodig omdat .sid-som-regels span:last-child alle
 * bedragen op --sid-donker zet; zonder deze zou het bedrag terugvallen.
 */
.sid-som-korting {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	color: var(--sid-rood);
}

.sid-som-regels .sid-som-korting span:last-child {
	color: var(--sid-rood);
	font-weight: 600;
	text-align: right;
	white-space: nowrap;
}


/**
 * Dezelfde regel op de afrekenpagina (woocommerce/checkout/review-order.php).
 * Die gebruikt .sid-afreken-somregel voor de verdeling; alleen de kleur komt
 * hiervandaan, zodat er maar een plek is waar dat rood staat.
 */
.sid-afreken-somregel.sid-afreken-korting,
.sid-afreken-somregel.sid-afreken-korting span {
	color: var(--sid-rood);
}

.sid-afreken-somregel.sid-afreken-korting span:last-child {
	font-weight: 600;
	white-space: nowrap;
}


/* --- Het blok eronder ----------------------------------------------------- */

/**
 * BOVEN EN ONDER EVENVEEL, EN DAT IS NIET COSMETISCH.
 *
 * De streep boven Totaal hoort bij het totaal: hij sluit de bedragenlijst af.
 * Die streep is een border-top op .sid-som-totaal zonder marge erboven, en dat
 * kon ook, want tot 28-09-2026 stond er niets tussen de bedragenlijst en het
 * totaal in. De streep raakte de btw-regel en daar hoorde hij ook.
 *
 * Met dit blok ertussen ging dat mis: de streep plakte tegen de knop
 * Toepassen en las daardoor als de afsluiting van het KORTINGSBLOK in plaats
 * van van de bedragen.
 *
 * Alleen een marge BOVEN. De ruimte onder komt van de streep zelf, die sinds
 * dezelfde dag een eigen margin-top heeft (zie .sid-som .sid-som-totaal). Twee
 * aangrenzende marges klappen in CSS samen tot een, dus het blijft 15px, en er
 * is maar een plek waar die afstand wordt bepaald. Zou ik hem hier ook zetten,
 * dan moest iemand later twee getallen gelijk zien te houden.
 *
 * 15 en niet de 16 uit het ontwerp: 15 is de maat die .sid-som-kop en
 * .sid-som .sid-som-totaal hier al gebruiken.
 */
.sid-som-bon {
	margin-top: 15px;
}

/* Hetzelfde opschrift als "Hoe wil je betalen?" eronder. Twee vragen in een
   kaart horen er hetzelfde uit te zien. */
.sid-som-bon-kop {
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .4px;
	color: var(--sid-donker);
}

/**
 * VELD EN KNOP NAAST ELKAAR.
 *
 * 42px hoog, niet de 44 van de knoppen onderin de kaart. Dit is een handeling
 * die de meeste klanten overslaan; hij hoort niet even zwaar te wegen als
 * Afrekenen. Het verschil is klein genoeg om niet als slordigheid te lezen en
 * groot genoeg om de rangorde te laten zien.
 *
 * min-width: 0 op het veld is niet optioneel. Een flexkind met een input
 * erin krimpt zonder die regel niet onder zijn eigen minimumbreedte, en dan
 * duwt het veld de knop uit de kaart zodra de kolom smal wordt.
 */
.sid-som-bon-veld {
	display: flex;
	gap: 8px;
}

.sid-som-bon-veld .input-text {
	flex: 1;
	min-width: 0;
	height: 42px;
	box-sizing: border-box;
	padding: 0 12px;
	border: 1px solid var(--sid-lijn);
	border-radius: 5px;
	background: #fff;
	font: 400 14px 'Open Sans', sans-serif;
	color: var(--sid-donker);
	text-transform: uppercase;
	outline: none;
	transition: ease .2s border-color;
}

.sid-som-bon-veld .input-text::placeholder {
	color: var(--sid-grijs);
	text-transform: none;
}

.sid-som-bon-veld .input-text:focus {
	border-color: var(--sid-blauw);
}

/**
 * De knop is de kleine broer van .sid-som-offerte: dezelfde kleuren en
 * dezelfde hover, alleen smaller en een maat kleiner.
 *
 * FLEX, NIET ALLEEN EEN HOOGTE.
 * Een <button> met alleen height erop laat zijn tekst zetten door de
 * regelhoogte die hij toevallig erft, en die hangt af van het lettertype en
 * van wat Cherry hogerop heeft staan. Dat viel op 28-09-2026 op: de tekst
 * stond een paar pixels boven het midden. Met flex plus line-height: 1 zit
 * hij in het midden omdat het zo is opgeschreven, niet omdat het toevallig
 * uitkomt. .sid-som-offerte doet het al net zo.
 *
 * line-height MOET na de font-verkorting staan: die zet line-height zelf
 * terug op normal en zou een regel erboven dus weer ongedaan maken.
 */
.sid-som-bon-knop {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	height: 42px;
	padding: 0 14px;
	box-sizing: border-box;
	border: 2px solid var(--sid-blauw);
	border-radius: 5px;
	background: #fff;
	color: var(--sid-blauw-midden);
	font: 700 13px 'Open Sans', sans-serif;
	line-height: 1;
	text-transform: uppercase;

	/* De spatiëring zit ook ACHTER de laatste letter, en die telt mee bij het
	   centreren. Vandaar 0.4px minder rechts: dan staat het woord echt in het
	   midden in plaats van een haarbreedte naar links. */
	letter-spacing: .4px;
	padding-right: 13.6px;

	cursor: pointer;
	transition: ease .3s all;
}

.sid-som-bon-knop:hover,
.sid-som-bon-knop:focus {
	background: var(--sid-blauw-donker);
	border-color: var(--sid-blauw-donker);
	color: #fff;
}


/* --- Als de code niet klopt ----------------------------------------------- */

/**
 * --sid-rood-veld voor de rand en --sid-rood voor de tekst. Dat zijn twee
 * verschillende roden en dat is met opzet: de rand om een veld hoort zachter
 * te zijn dan de zin die zegt wat eraan mankeert, anders schreeuwt het veld
 * harder dan de uitleg. Dezelfde afspraak als in het offerteformulier.
 */
.sid-som-bon-veld.is-mis .input-text {
	border-color: var(--sid-rood-veld);
}

.sid-som-bon-veld.is-mis .input-text:focus {
	border-color: var(--sid-rood);
}

.sid-som-bon-fout {
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--sid-rood);
}


/* --- Als de code aanstaat -------------------------------------------------- */

/**
 * Even hoog als het veld dat het vervangt, zodat de kaart niet verspringt op
 * het moment dat de code wordt toegepast.
 *
 * Het vlak is --sid-vlak, hetzelfde grijs als de teller in de winkelwagen en
 * het i'tje-venster. Geen groen vlak: de kortingsregel hierboven doet het
 * groen al, en twee groene vlakken in een kaart van 20px breed gaat over
 * hetzelfde nieuws twee keer juichen.
 */
.sid-som-bon-aan {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	height: 42px;
	box-sizing: border-box;
	padding: 0 12px;
	border-radius: 5px;
	background: var(--sid-vlak);
	font-size: 14px;
	color: var(--sid-donker);
}

.sid-som-bon-aan strong {
	font-weight: 700;
	white-space: nowrap;
}

.sid-som-bon-weg {
	flex: none;
	font: 700 13px 'Open Sans', sans-serif;
	color: var(--sid-blauw-midden);
	cursor: pointer;
}

.sid-som-bon-weg,
.sid-som-bon-weg:hover,
.sid-som-bon-weg:focus {
	text-decoration: none;
}

.sid-som-bon-weg:hover,
.sid-som-bon-weg:focus {
	color: var(--sid-blauw-donker);
	text-decoration: underline;
}


/* --- Smal scherm ----------------------------------------------------------- */

/**
 * Onder de 480px wordt de kaart zo smal dat "Toepassen" het veld tot een
 * hokje van een paar letters knijpt. Dan liever onder elkaar: een vol veld en
 * een volle knop.
 */
@media (max-width: 480px) {

	.sid-som-bon-veld {
		flex-direction: column;
	}

	.sid-som-bon-knop {
		width: 100%;
	}
}