/* ==========================================================================
   REKO Raalte — huisstijltokens + basis
   --------------------------------------------------------------------------
   Alle waarden zijn GEMETEN aan de bestaande site (computed styles op
   1920/1440/1200/1024/980/390px), niet op het oog gekozen.

   Twee dingen die de oude opzet fout deed en hier bewust anders gaan:
   1. Zes verschillende groenen door elkaar (#007A4D 26x, #007a4e, #008000,
      #3EB489, #1a5a3a, #00a651). #007A4D staat in het Divi-kleurenpalet en
      is het meest gebruikt -> dat is de merkkleur. De rest valt weg.
   2. Css/Menu.css verstopte een globale `*`-reset plus een body-font in een
      bestand dat "Menu" heet. Die reset staat hier, waar je hem verwacht.
   ========================================================================== */

:root {
	/* --- Merk ------------------------------------------------------------ */
	--reko-green: #007a4d;          /* primair: knoppen, links, accenten     */
	--reko-green-hover: #000000;    /* elke groene knop hovert naar zwart     */
	--reko-black: #000000;          /* body-tekst EN alle koppen              */
	--reko-white: #ffffff;

	/* --- Oppervlakken ---------------------------------------------------- */
	--reko-surface-2: #ebebeb;      /* topbalk, kaarten, footer-links, inputs */
	--reko-surface-3: #f5f5f5;      /* reviewbalk in de footer                */
	--reko-field: #d9d9d9;          /* selects, aantal-veld, tabelrijen       */

	/* --- Secundair (uit het gemeten gebruik) ----------------------------- */
	--reko-accent: #7ebec5;         /* Divi-accent: header-iconen             */
	--reko-beige: #e6ddd4;          /* submenu-hover, header-haarlijn         */
	--reko-brown: #432d13;          /* mobiele iconen + hamburger             */
	--reko-brown-line: #c9b8a7;     /* scheidingslijn submenu                 */
	--reko-gold: #fec165;           /* sterren in reviewkaarten               */
	--reko-red: #ff0004;            /* "wat mag NIET" op afvalbrengstation   */
	--reko-near-black: #212121;     /* kaarttitels                            */
	/* Hover van een ZWARTE knop. #212121 was hier te donker om te zien: dat is
	   maar 13% lichter dan zwart, en de veeg in motion.css gebruikte diezelfde
	   kleur, waardoor die veeg per definitie onzichtbaar was. #424242 stond al in
	   de footer-onderbalk en is nu de waarde voor elke zwarte knop. Live heeft
	   hier geen zichtbare hover, dus dit is een bewuste eigen keuze. */
	--reko-black-hover: #424242;
	--reko-line: #e5e5e5;           /* randen winkelwagenregels               */
	--reko-line-dark: #9c9c9c;      /* haarlijn boven paginering              */
	--reko-green-active: #008000;   /* actief/hover paginanummer              */

	/* --- Typografie ------------------------------------------------------ */
	--reko-font-heading: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
	--reko-font-body: 'DM Sans', Helvetica, Arial, sans-serif;
	--reko-font-ui: 'Inter', Helvetica, Arial, sans-serif;   /* footer + mobiel menu */
	--reko-font-stars: 'Poppins', Helvetica, Arial, sans-serif;

	/* --- Maatvoering ----------------------------------------------------- *
	 * De oude site gebruikte drie rijbreedtes naast elkaar; die zijn hier
	 * expliciet in plaats van per module herhaald.                        */
	--reko-row: 1300px;             /* standaard inhoud                       */
	--reko-row-wide: 1400px;        /* specificatie-grids                     */
	--reko-row-full: 1500px;        /* banners + footer                       */
	--reko-gutter-x: 10%;           /* header/footer zijmarge                 */
	--reko-section-y: 54px;         /* Divi's sectiepadding vanaf 1350px      */

	/* Ruimte tussen een tekst en de knoprij eronder. Eén token voor alle
	   blokken, want dit stond per blok los: 4px in tekst-beeld, 12px in de
	   containerkaart, 20px in het accordeonblok en 24px in de CTA. Gemeten in de
	   browser was de eerste maar 5,8px lucht tussen de laatste tekstregel en de
	   knop — en 2px als de kop direct boven de knop staat. Dat leest als een
	   knop die aan de tekst vastzit.
	   24px is de ruimste waarde die er al stond (de row-gap van de CTA), dus de
	   maat komt uit het bestaande ritme en is niet nieuw verzonnen. Dit is een
	   BEWUSTE afwijking van live: Divi zette hier zijn eigen krappe module-
	   marges, en die nemen we op dit punt niet over.
	   Elk gebruik schrijft `var(--reko-actie-top, 24px)` MET fallback: zonder
	   fallback is de hele padding-declaratie ongeldig zodra dit token er niet
	   is, en dan valt de knop terug op 0 ruimte in plaats van op 24px. */
	--reko-actie-top: 24px;

	/* De headers staan fixed; deze variabele houdt de content eronder.
	   reko.js meet en overschrijft hem per breakpoint. */
	--reko-menu-height: 168px;

	/* --- Tokens die de CORE uitleest ------------------------------------- *
	 * De core kent geen :root; alles is var(--x, fallback). Zonder deze
	 * regels blijven inlogpopup, cart-e-mail en preloader op hun donker-
	 * grijze fallback (#1f1f1f) staan. --sellabees-red is de historische
	 * naam voor het merk-accent: hier dus bewust REKO-groen, geen rood.   */
	--sellabees-accent: var(--reko-green);
	--sellabees-red: var(--reko-green);
	--sellabees-yellow: var(--reko-gold);
	--sellabees-ink: var(--reko-black);
	--sellabees-font-heading: var(--reko-font-heading);
	--sellabees-toast-bg: var(--reko-black);
	--sellabees-toast-color: var(--reko-white);
	--sellabees-preloader-bg: var(--reko-white);
	--sellabees-preloader-accent: var(--reko-green);
	--sellabees-size-bg: var(--reko-surface-2);
	--sellabees-size-border: var(--reko-field);
}

/* ==========================================================================
   Reset + basis
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/*
 * De regelhoogte staat hier als LENGTE en niet als getal, en dat is wezenlijk.
 *
 * Divi zette `line-height: 1.7em` op de body van 14px. Een em-waarde wordt één
 * keer uitgerekend (23.8px) en erft daarna door als vaste lengte, dus ook tekst
 * van 16px of 24px kreeg regelhoogte 23.8px. Een getal (1.7) erft juist als
 * factor en laat elk element opnieuw rekenen: 16px zou dan 27.2px worden.
 *
 * Nagemeten op de live homepage: 16px -> 23.8px komt 72x voor en 24px -> 23.8px
 * 27x. Met de oude notatie (1.7) liepen al die alinea's 3.4px per regel te ruim,
 * wat op een blok van vijf regels 17px scheelt.
 *
 * Componenten waar live iets anders laat zien (knoppen 24px -> 40.8px, koppen
 * regelhoogte = fontgrootte) zetten hun eigen waarde; zie hieronder.
 */
body {
	margin: 0;
	font-family: var(--reko-font-body);
	font-size: 14px;              /* gemeten body-basis */
	font-weight: 400;
	line-height: 23.8px;          /* Divi: 1.7em op 14px, geërfd als lengte */
	color: var(--reko-black);
	background: var(--reko-white);
	-webkit-font-smoothing: antialiased;
}

/* Koppen: Bebas Neue, regelhoogte 1em, 10px onderruimte — de gemeten basis.
   Let op: de oude site vroeg gewicht 500 aan, maar Bebas Neue heeft alleen
   een 400-face. Dat werd dus gesynthetiseerd; hier staat gewoon 400. */
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding-bottom: 10px;
	font-family: var(--reko-font-heading);
	font-weight: 400;
	line-height: 1;
	color: var(--reko-black);
}

h1 { font-size: 60px; }
h2 { font-size: 60px; }
h3 { font-size: 24px; text-transform: uppercase; }
h4 { font-size: 30px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }

/*
 * Op tablet is de h2 40px en niet 50px. Dat is nu uit twee bronnen bevestigd:
 *
 *   Figma "Liggende tablet" (1024px), dezelfde kop  -> 40px Bebas
 *   live @980px, 4 van de 6 gemeten pagina's         -> 40px
 *
 * Twee pagina's doen live wel 50px (over-reko en container-ophalen); die staan
 * als uitzondering in pages/page.css. De h1 blijft 50px: de bannerkop heeft zijn
 * eigen regel in page.css en de blokkop-h1 staat vast op 40px.
 *
 * Het ontwerp zet de desktopmaat op 64px waar live 60px rendert. Daar volgen we
 * live, want dat is de gepubliceerde site.
 */
/*
 * Tussenstap 981-1180px. De oude site heeft naast de tablet- en de telefoonstap
 * nog een derde band, en die ontbrak hier: het thema hield tot 980px de
 * desktopmaat aan, waardoor een blokkop op een doorsnee laptop 60px was waar
 * live 40px rendert.
 *
 * De band komt uit sellabees_child_v3.0/Custom/custom.css (regel 2134 e.v.), waar
 * hij met !important op elke rij-h2 staat:
 *
 *   @media (min-width:981px) and (max-width:1180px) {
 *     ... .et_pb_row:not(...) h2:not(...) { font-size: 40px !important }
 *   }
 *
 * Nagemeten op live: h2 is 40px op 1000, 1100 en 1180px en 60px vanaf 1200px --
 * de band ligt er dus echt tussen en is geen verlengstuk van de tabletstap.
 * De regelhoogte van koppen is 1, dus die volgt de fontmaat automatisch.
 *
 * Alleen h2: de bannerkop heeft zijn eigen trap in pages/page.css en de blokkop
 * in blocks/_base.css. Die twee stappen daar mee, elk in hun eigen bestand.
 */
@media (min-width: 981px) and (max-width: 1180px) {
	h2 { font-size: 40px; }
}

@media (max-width: 980px) {
	h1 { font-size: 50px; }
	h2 { font-size: 40px; }
}

@media (max-width: 767px) {
	h1, h2 { font-size: 30px; }
}

/* Geen eigen regelhoogte: de alinea erft de 23.8px van de body, precies zoals
   op de oude site. Stond hier eerder `line-height: 1.7`, waardoor een alinea van
   16px op 27.2px uitkwam in plaats van de gemeten 23.8px. */
p {
	margin: 0;
	padding-bottom: 1em;
}

a {
	color: var(--reko-green);
	text-decoration: none;
}

a:hover,
a:focus { text-decoration: underline; }

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* De huisstijl is vlak en hoekig: geen radius, geen schaduw.
   Uit de meting: 33x `border-radius:0`, en de enige ronding is de
   winkelwagen-badge (50%). Schaduwen komen alleen uit plugin-resten. */
:focus-visible {
	outline: 2px solid var(--reko-green);
	outline-offset: 2px;
}

/*
 * De ring op invoervelden verschijnt alleen bij TOETSENBORDgebruik.
 *
 * Chrome laat een <select> ook :focus-visible matchen bij een gewone
 * muisklik, dus de groene ring sprong om het veld zodra je een keuzelijst
 * aanklikte. Daar hoort hij niet: de keuzelijst die opengaat is het signaal
 * al. Voor wie met Tab door het formulier gaat is dezelfde ring juist
 * onmisbaar, want dat is het enige dat verraadt waar de focus staat.
 *
 * reko.js zet data-reko-invoer op <html>: "muis" bij pointerdown, "toets"
 * bij Tab. Zolang dat attribuut er niet staat is de ring zichtbaar - de
 * veilige kant, zodat een JS-fout de focus nooit onzichtbaar maakt.
 */
html[data-reko-invoer="muis"] input:focus-visible,
html[data-reko-invoer="muis"] select:focus-visible,
html[data-reko-invoer="muis"] textarea:focus-visible {
	outline: none;
}

/* ==========================================================================
   USP-lijst
   Inhoud en icoon komen uit de defaults/ACF; inc/usps.php rendert de lijst en
   hangt hem aan de winkelwagen- en checkoutzijkolom. De opmaak staat hier en
   niet in een paginabestand omdat de lijst op meer dan één pagina staat.

   reko.js laat de items na elkaar inkomen (.reko-usps staat in de
   staffellijst van de bewegingslaag).
   ========================================================================== */

.reko-usps {
	margin: 0;
	padding: 0;
	list-style: none;
}

.reko-usps__item {
	display: flex;
	align-items: center;
	gap: 15px;
	margin: 0 0 14px;
}

.reko-usps__item:last-child { margin-bottom: 0; }

/* Het vinkje is een vierkant van 32px en mag niet krimpen als de tekst over
   twee regels valt. De element-selector staat erbij omdat woocommerce.css
   `.woocommerce img { height: auto }` zet. */
.reko-usps__icon {
	flex: 0 0 32px;
	line-height: 0;
}

.reko-usps__icon img,
.woocommerce .reko-usps__icon img {
	display: block;
	width: 32px;
	height: 32px;
	object-fit: contain;
}

.reko-usps__tekst {
	font-family: var(--reko-font-body);
	font-size: 16px;
	line-height: 1.4;
	color: var(--reko-black);
}

@media (max-width: 980px) {
	.reko-usps__tekst { font-size: 14px; }
}

/* ==========================================================================
   Aantal-veld: gevulde driehoekjes in plaats van plus en min

   inc/shop.php rendert één stepper voor vier plekken en zet er `+` en `−` in.
   Op drie van die plekken staan de knoppen GESTAPELD tegen de rechterrand van
   het veld — productpagina (.reko-atc), shopraster en verwante producten
   (.reko-loop__form) — en dan hoort er een caret omhoog en omlaag, niet een
   plus en een min. Alleen in de winkelwagen staan ze naast het veld; daar
   blijven −/+ staan (en die stepper is nu verborgen, zie pages/cart.css).

   Het teken zit in de CSS en niet in de markup, precies zoals de docblock bij
   reko_qty_stepper() al beschrijft: dezelfde knoppen, per plek een ander teken.

   GEVULDE DRIEHOEK, geen chevron van twee randen. Hier stond een 5px-vierkant
   met `border-right/bottom: 1.5px` en een rotatie. Chrome rondt zo'n
   halve pixel bij devicePixelRatio 1 naar beneden af: nagemeten op
   /product/dakpannen/ gaf getComputedStyle op ::before `border-right-width:
   1px`, waardoor het pijltje een dunne, bleke haarlijn was in plaats van het
   duidelijke driehoekje dat de klant aanwees.

   Een driehoek uit borders heeft dat probleem niet: alle drie de randen zijn
   hele pixels en het vlak is gevuld, dus er valt niets af te ronden. Maat
   nagemeten op de aangeleverde schermafdruk (image2, 1:1 met het aantal-veld
   van 65x55px): de caret is 10px breed en 8px hoog.

   Deze regels staan in main.css en niet in pages/*.css omdat de stepper op
   meerdere paginasoorten voorkomt en het thema maar één pages/<context>.css
   laadt.
   ========================================================================== */

.reko-atc .qty-btn > span,
.reko-loop__form .qty-btn > span { display: none; }

/* De knop is zelf een flexbox met align/justify center (pages/product.css en
   pages/shop.css), dus het driehoekje heeft geen eigen centrering nodig. */
.reko-atc .qty-btn::before,
.reko-loop__form .qty-btn::before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
}

.reko-atc .qty-btn--up::before,
.reko-loop__form .qty-btn--up::before { border-bottom: 8px solid currentColor; }

.reko-atc .qty-btn--down::before,
.reko-loop__form .qty-btn--down::before { border-top: 8px solid currentColor; }

/* ==========================================================================
   Rijen / secties
   ========================================================================== */

.reko-row,
.reko-row--wide,
.reko-row--full {
	width: 100%;
	margin-inline: auto;
	padding-inline: 20px;
}

.reko-row      { max-width: var(--reko-row); }
.reko-row--wide { max-width: var(--reko-row-wide); }
.reko-row--full { max-width: var(--reko-row-full); }

/*
 * Verticale ruimte van een sectie.
 *
 * Dit is ÉÉN element waar Divi er TWEE had: .reko-section zit in dezelfde div
 * als .reko-row (404.php, index.php, page.php) of op de <section> zelf
 * (front-page.php). De padding hier moet dus de sectie- ÉN de rijpadding van
 * Divi dragen, en alleen de sectiehelft stond er.
 *
 * Nagemeten op live, per breedte de padding van de sectie + die van de rij
 * erbinnen, op drie soorten pagina's: /deze-pagina-bestaat-niet-xyz/ (404),
 * /reconstructie-broekslag-fase-1-wijhe/ (los bericht) en /winkelwagen/ (de
 * route zonder paginablokken). Boven en onder zijn gelijk.
 *
 *              404            bericht        winkelwagen     lokaal was
 *    390px    50+30 = 80      0+30 = 30      0+0 =  0          15,6
 *    767px    50+30 = 80      0+30 = 30      0+0 =  0          30,7
 *    980px    50+30 = 80      0+30 = 30      0+0 =  0          39,2
 *    981px  39,2+19,6= 58,8       idem           idem           39,2
 *   1100px    44+22 = 66      44+22 = 66     44+22 = 66         44
 *   1300px    52+26 = 78         idem           idem            52
 *   1512px    54+27 = 81      54+27 = 81     54+27 = 81         54
 *
 * Vanaf 981px doen alle drie hetzelfde en is het dus SITEBREED: Divi's eigen
 * `.et_pb_section { padding: 4% 0 }` plus `.et_pb_row { padding: 2% 0 }`, met
 * vanaf 1350px de vaste `54px` en `27px`. Die twee treden staan hieronder; het
 * enige dat er stond was de sectiehelft (4% en 54px), zodat elke sectie 2% resp.
 * 27px te krap was. De terugval bij 980 -> 981 (van de tabletwaarde naar 58,8)
 * is geen fout: live doet dat ook, want Divi's 50/30 zit in
 * `@media (max-width: 980px)`.
 *
 * Op tablet en telefoon (t/m 980px) zet live het PER PAGINA en is er dus géén
 * sitebrede waarde. Daarom blijft de basis hier op de oude 4% staan — een
 * restwaarde, bewust niet vervangen door een verzonnen getal. Wie hem wél zet:
 *   404          80px  -> pages/404.css
 *   los bericht  30px  -> pages/single.css
 * De winkelwagen, het afrekenen en mijn-account (page.php zonder blokken) staan
 * op live op 0 en missen die trede nog; dat hoort in pages/cart.css,
 * pages/checkout.css en pages/account.css.
 *
 * --reko-section-y blijft 54px, want dat IS Divi's sectiepadding en vier andere
 * plekken rekenen ermee (blocks/_base.css, configurator.css, pages/product.css,
 * pages/shop.css). De 27px van de rij staat er hier expliciet naast.
 *
 * De containerzoeker op de voorpagina merkt van dit alles niets:
 * pages/home.css zet `.home .reko-finder-section { padding-block: 54px 0 }` en
 * is specifieker. Nagemeten na de wijziging: 30/54/54px op 390/1100/1512.
 */
.reko-section { padding-block: 4%; }

@media (min-width: 981px) {
	.reko-section { padding-block: 6%; }
}

@media (min-width: 1350px) {
	.reko-section { padding-block: calc(var(--reko-section-y) + 27px); }
}

.reko-section--grey  { background: var(--reko-surface-2); }
.reko-section--light { background: var(--reko-surface-3); }

/* ==========================================================================
   Knoppen
   Eén contract voor de hele site, zoals gemeten: Bebas Neue 24px,
   regelhoogte 1.7em, uppercase, geen radius, wit op groen, hover naar zwart.
   De asymmetrische padding (3px boven, 0 onder) centreert Bebas optisch —
   dat font heeft veel ruimte onder de baseline.
   ========================================================================== */

.reko-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce button.button.alt {
	display: inline-block;
	padding: 3px 35px 0;
	border: 0;
	border-radius: 0;
	background: var(--reko-green);
	color: var(--reko-white);
	font-family: var(--reko-font-heading);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.7;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	transition: background-color 300ms ease;
}

.reko-btn:hover,
.reko-btn:focus,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce button.button.alt:hover {
	background: var(--reko-green-hover);
	color: var(--reko-white);
	text-decoration: none;
}

.reko-btn--wide  { padding-inline: 50px; }

/* ==========================================================================
   Containerzoeker
   --------------------------------------------------------------------------
   Staat hier en niet in pages/home.css, en dat is het hele punt: functions.php
   laadt precies één pages/<context>.css, dus home.css komt alleen op de
   voorpagina mee. De zoeker staat óók in een raw-html-blok op /diensten/ en
   /containers-transport/, en dáár was hij daardoor vrijwel onopgemaakt —
   gemeten: native selects van 143x19px naast elkaar met systeemletter van
   13,3px, tegen twee grijze velden van 282x45px onder elkaar op live, met een
   knop over de volle breedte van 59px hoog.

   Er stond hier al één regel van de zoeker (line-height van de knop) met precies
   deze onderbouwing erboven. De overige achttien regels stonden nog in home.css;
   die zijn hier nu bij gezet zodat het onderdeel op één plek staat.
   ========================================================================== */

.reko-finder-block {
	display: flex;
	align-items: center;
	gap: 0;
	background: var(--reko-surface-2);
	padding: 50px;
}

@media (max-width: 980px) {
	/* 15px en niet 24px: live heeft daar geen gap maar `padding-bottom: 15px` op de
	   tekstmodule in de introkolom. Gemeten kolomhoogte tegen teksthoogte: 99 vs 84
	   op 980px en 79 vs 64 op 767px -- dus 15px. Met 24px werd het grijze vlak
	   332/272/385px tegen live 323/263/382px. */
	.reko-finder-block { flex-direction: column; align-items: stretch; gap: 15px; }
}

@media (max-width: 767px) {
	.reko-finder-block { padding: 30px 15px; }
}

.reko-finder-block__intro,
.reko-finder-block__widget { flex: 1 1 50%; }

.reko-finder-block__intro { padding-right: 20px; }

.reko-finder-block__intro h2 { text-transform: none; }

/*
 * De kopmaat van de zoeker hoort bij het COMPONENT en niet bij de homepage.
 *
 * Deze ladder stond onder `.home` in pages/home.css, en dat bestand laadt maar
 * op één pagina. De zoeker staat inmiddels ook in de inhoud van /diensten/ en
 * /containers-transport/, en daar viel de kop terug op de generieke h2 — 40px op
 * 980 tegen de 50px die live op de homepage meet.
 *
 * De waarden zelf zijn gemeten op live: 50px op 980 en 30px op 767. Die 30px is
 * bijzonder: de andere homepage-koppen gaan daar naar 35px, deze blijft op 30.
 *
 * Drie selectordelen, want het moet van `.home h2:not([class*="reko-block__kop--"])`
 * in home.css kunnen winnen (0,2,1) — anders bepaalt de laadvolgorde het.
 */
@media (max-width: 980px) {
	.reko-finder-block .reko-finder-block__intro h2 { font-size: 50px; }
}

@media (max-width: 767px) {
	.reko-finder-block .reko-finder-block__intro h2 { font-size: 30px; }
}

/* De <span> in de kop is het groene woord. */
.reko-finder-block__intro h2 span { color: var(--reko-green); }

.reko-finder-block__intro p {
	font-size: 16px;
	padding-bottom: 0;
}

@media (max-width: 767px) {
	.reko-finder-block__intro p { font-size: 14px; }
}

.reko-finder__row {
	display: flex;
	gap: 20px;
	margin-bottom: 20px;
}

@media (max-width: 600px) {
	.reko-finder__row { flex-direction: column; }
}

/*
 * WEL een pijltje, 16px tekst, en GEEN vaste hoogte. Alle drie stonden hier fout,
 * en het commentaar erboven beweerde het omgekeerde ("geen donkere pixels aan de
 * rechterkant van het veld") -- dat was op het verkeerde element gemeten.
 *
 * De live-regel, letterlijk uit Custom/custom.css:
 *
 *   .filter-select { width:50%; padding:12px; background-color:#d9d9d9;
 *                    font-family:"DM Sans"; font-size:16px; color:#000;
 *                    appearance:none; border:none !important;
 *                    background-image:url(".../DropdownArrow.svg");
 *                    background-repeat:no-repeat;
 *                    background-position:right 16px center;
 *                    background-size:14px }
 *
 * Geen `height`: 16px tekst plus 2x12px padding is van nature 45px, en dat is ook
 * wat live meet op elke breedte. De 45px die hier stond was een pleister die juist
 * op 390px afviel -- daar gaf `flex: 1 1 50%` in kolomrichting een onbepaalde basis,
 * viel de select terug op zijn inhoud en werd hij met 14px tekst 42px hoog. Met de
 * juiste fontmaat klopt de hoogte overal zonder hem te dwingen.
 *
 * De SVG stond alleen in wp-content/uploads; hij is naar de thema-assets gekopieerd
 * zodat de opmaak niet aan een mediabibliotheek-pad hangt.
 */
.reko-finder__select {
	flex: 1 1 50%;
	padding: 12px;
	border: 0;
	border-radius: 0;
	background-color: var(--reko-field);
	background-image: url("../img/icons/dropdown-arrow.svg");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 14px;
	font-family: var(--reko-font-body);
	font-size: 16px;
	/* Vast en niet `normal`: 1.3 is wat DM Sans bij normal geeft (20,8px op
	   16px), dus 12 + 20,8 + 12 = 45px zoals gemeten. Met de geminificeerde CSS
	   van LiteSpeed Cache kwam normal op sphdev op 41px uit, met verder exact
	   dezelfde berekende stijl. Een vaste waarde maakt de hoogte daar
	   onafhankelijk van. */
	line-height: 1.3;
	color: var(--reko-black);
	appearance: none;
	cursor: pointer;
}

.reko-finder__select:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* line-height: normal, zoals live. De knopbasis hierboven zet 1.7 (=40.8px op
   24px Bebas); met de vaste hoogte van 59px viel de doos toevallig goed uit, maar
   de tekst stond daardoor niet op dezelfde hoogte in de knop. */
.reko-finder__btn {
	display: block;
	width: 100%;
	height: 59px;
	padding-inline: 14px;
	line-height: normal;
}

/* Niet elke knop stond in kapitalen. De "Bestellen"-knop op de zandkaart is een
   Divi et_pb_more_button en die had text_transform op none staan; gemeten rendert
   live daar "Bestellen" en niet "BESTELLEN". */
.reko-btn--geen-caps { text-transform: none; }

/* Zwarte variant (footer-kolom 4 hovert naar #212121, de balk naar #424242) */
.reko-btn--black       { background: var(--reko-black); }
.reko-btn--black:hover { background: var(--reko-black-hover); }

/* Tekstknop met onderlijn; hover zet letterspacing op 2px (zoals de oude
   .LeesMeerOverOns). */
.reko-btn--text {
	/* 4.8px = Divi's 0.3em op 16px. Zonder die verticale ruimte is de knop 29px
	   hoog in plaats van de gemeten 39px. */
	padding: 4.8px 0;
	background: transparent;
	color: var(--reko-black);
	border-bottom: 2px solid var(--reko-black);
	font-family: var(--reko-font-body);
	font-size: 16px;
	font-weight: 500;
	transition: letter-spacing 300ms ease;
}

.reko-btn--text:hover {
	background: transparent;
	color: var(--reko-black);
	letter-spacing: 2px;
}

/* ==========================================================================
   Hulpmiddelen
   ========================================================================== */

/* Groen in tekst uit een tekstverwerker: de knop "Groen" zet deze class (zie
   inc/editor-groen.php). Hier en niet in blocks/_base.css, want die laadt
   alleen op pagina's met blokken, en ook de productvelden (wat mag wel/niet)
   komen uit een tekstverwerker. */
.reko-groen { color: var(--reko-green); }

/* De header wisselt op 1180/1181px van markup — niet op Divi's 980px.
   Alleen de VERBORGEN staat wordt gezet; zo houdt een component zijn eigen
   display-waarde (een .reko-reviews__head is display:flex) en hoeven we die
   niet te herhalen. !important omdat layout.css ná dit bestand laadt. */
@media (max-width: 1180px) {
	.reko-desktop-only { display: none !important; }
}

@media (min-width: 1181px) {
	.reko-mobile-only { display: none !important; }
}

/*
 * De FOOTER wisselt op 980/981 en niet op 1180/1181, en heeft daarom zijn eigen
 * paar classes.
 *
 * Waarom niet dezelfde: de header wisselt op live aantoonbaar op 1180/1181
 * (sellabees_child_v3.0/Css/Menu.css: `only screen and (min-width:981px) and
 * (max-width:1180px) { #desktop-menu{display:none}; #mobiel-menu{display:block} }`
 * plus de tegenhanger op min-width:1181px). De footer volgt op live juist Divi's
 * eigen 980, via `only screen and (min-width:981px) { .et_pb_row_1_tb_footer …
 * { display:none } }`.
 *
 * Ze deelden hier één paar, waardoor de footer in de hele band 981-1180px in
 * mobielmodus stond. Gemeten op live @1100 tegen lokaal:
 *   reviewkop      live 40px op een regel, groene knop ernaast (x 755-1004)
 *                  lokaal 64px over twee regels, knop pas onder de kaarten
 *   "Container vol?"  live zwart 218x58 in de groene onderbalk rechts
 *                  lokaal in kolom 4, onder "Contactformulier"
 *   footerhoogte   live 877px, lokaal 1324px
 *
 * Alleen de VERBORGEN staat wordt gezet, om dezelfde reden als hierboven: zo
 * houdt elk onderdeel zijn eigen display-waarde.
 */
@media (max-width: 980px) {
	.reko-footer-desktop { display: none !important; }
}

@media (min-width: 981px) {
	.reko-footer-mobile { display: none !important; }
}

.reko-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 12px 20px;
	background: var(--reko-black);
	color: var(--reko-white);
}

.reko-skip:focus { left: 0; }

.reko-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ==========================================================================
   WooCommerce-pagina's: hetzelfde Divi-rijmodel als de rest van de site.

   page.php geeft blokken al `width: 80%` (zie pages/page.css). De templates van
   winkelwagen, afrekenen en mijn-account gebruiken .reko-row rechtstreeks en
   misten die stap, waardoor hun inhoudskolom te breed was.

   Gemeten op /winkelwagen/:
     live   x=151 b=1210 @1512    x=98 b=784 @980
     was    x=126 b=1260          x=20 b=940

   784 is exact 80% van 980 en 1210 is 80% van 1512, dus het is hetzelfde model —
   niet een losse maat. Gevolg dat de meting ook verklaarde: de twee knoppen onder
   de lege winkelwagen stonden lokaal naast elkaar en live onder elkaar, simpelweg
   omdat er 213px te veel ruimte was.
   ========================================================================== */

.woocommerce-cart .reko-main .reko-row,
.woocommerce-checkout .reko-main .reko-row,
.woocommerce-account .reko-main .reko-row {
	width: 80%;
	padding-inline: 0;
}