/*
Theme Name:   Gorilla Shop
Theme URI:    https://gorilla-shop.nl
Author:       SOSO Support
Description:  Modern Military Luxury — eigen thema voor Gorilla Shop. Geen
              pagebuilder, één stylesheet met tokens, WooCommerce met eigen
              opmaak. Hoofdkleur #00ADBA uit het logo, koele neutralen, zware
              typografie en scherpe hoeken.
Version:      1.0.0
Requires at least: 6.7
Requires PHP: 8.1
License:      GPL-2.0-or-later
Text Domain:  gorilla
Tags:         e-commerce, custom-colors, accessibility-ready
*/

/* ==========================================================================
   GORILLA SHOP — DESIGNSYSTEEM
   Licht van grond, stoer van typografie
   Hoofdkleur #00ADBA uit het Gorilla-logo. Scherpe hoeken overal:
   krat-stencil, coinrand, patchrand.
   ========================================================================== */

/* ---------- 1. TOKENS ----------
   Hoofdkleur is #00ADBA: de cyaan uit het Gorilla-logo.

   Belangrijk om te weten bij het gebruik: #00ADBA haalt op wit maar
   2,68 : 1 en faalt dus als tekstkleur. Op zwart haalt hij 7,84 : 1.
   Daarom is de rolverdeling:

     --accent        #00ADBA   VULKLEUR, altijd met donkere tekst erop
     --accent-ink    #00727C   tekst en links op licht (5,6 : 1, AA)
     --accent-bright #2AD2DE   op donkere vlakken
     --accent-soft   #DEF4F6   tint voor blokken en markeringen

   De neutralen hebben een lichte cyaanzweem gekregen, zodat het grijs
   bij de hoofdkleur hoort in plaats van ernaast te staan. Licht van
   grond, stoer van typografie: zwaar gezet, scherpe hoeken, haarlijnen.
   ------------------------------------------------------------------- */
:root{
  /* grond & vlak — licht, koel, met een blauwzweem naar de cyaan toe */
  --paper:        #F4F7F8;
  --paper-2:      #E7EDEF;
  --surface:      #FFFFFF;   /* productvlak, laat foto's schoon staan */

  /* De tegenkleur: diep marineblauw in plaats van neutraal houtskool.
     Naast cyaan leest navy als een gekozen combinatie, en het knikt naar
     de maritieme kant van het assortiment. */
  --deep:         #0B2027;
  --deep-2:       #12303A;

  /* inkt */
  --ink:          #0B2027;
  --ink-2:        #3A5560;
  --ink-3:        #6B8189;
  --ink-on-deep:  #E9F1F3;
  --ink-on-deep-2:#9BB4BC;

  /* lijnen */
  --line:         #D3DFE2;
  --line-2:       #AEC0C5;
  --line-deep:    #1D3D48;

  /* accent — de cyaan uit het logo */
  --accent:        #00ADBA;
  --accent-ink:    #00727C;
  --accent-bright: #34D6E2;
  --accent-soft:   #DEF5F7;

  /* signaal — warm, want dat is het tegendeel van cyaan en valt dus op */
  --alarm:         #D64933;
  --olive:         #3A5560;
  --green-ok:      #1F7A5A;

  /* type */
  --f-ui:    'Archivo','Helvetica Neue',Arial,sans-serif;
  --f-kop:   'Anton','Archivo','Helvetica Neue',Arial,sans-serif;
  --f-text:  'Source Serif 4',Georgia,serif;
  --f-mono:  'IBM Plex Mono','SF Mono',Consolas,monospace;

  /* schaal */
  --t1:.6875rem; --t2:.78125rem; --t3:.875rem; --t4:1rem;
  --t5:1.125rem; --t6:1.375rem; --t7:1.75rem; --t8:2.25rem;
  --t9:3rem;     --t10:4.25rem;  --t11:5.75rem;

  /* ruimte */
  --sp1:.25rem; --sp2:.5rem; --sp3:.75rem; --sp4:1rem; --sp5:1.5rem;
  --sp6:2rem;   --sp7:3rem;  --sp8:4rem;   --sp9:6rem; --sp10:8rem;

  --wrap: 1340px;
  --gut: clamp(1rem, 4vw, 3.5rem);
  --measure: 68ch;
}

/* GEEN AUTOMATISCHE DONKERE MODUS — en dat is een bewuste keuze.
 *
 * Er stond hier een omslag op `prefers-color-scheme: dark`. Wie zijn
 * telefoon of browser op donker had staan, kreeg de hele winkel donker —
 * en omdat het Gorilla-logo zelf donker is, viel dat weg tegen de
 * achtergrond. Ook productfoto's op een witte ondergrond staan slecht op
 * een donkere pagina.
 *
 * Deze winkel kiest daarom één uitstraling: licht, met navy en cyaan.
 * Alle kleuren staan expliciet in de tokens hierboven, dus de pagina
 * ziet er hetzelfde uit ongeacht de systeeminstelling van de bezoeker.
 */
:root{ color-scheme: light; }

/* ---------- 2. RESET & BASIS ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-ui); font-size:var(--t4); line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.wrap-narrow{max-width:920px;margin:0 auto;padding:0 var(--gut)}

/* ---------- 3. TYPOGRAFIE ---------- */
h1,h2,h3,h4{margin:0;font-family:var(--f-ui);font-weight:800;letter-spacing:-.03em;line-height:1.02;text-wrap:balance}
h1{font-size:clamp(2.25rem,5.6vw,var(--t11))}
h2{font-size:clamp(1.6rem,3.4vw,var(--t9));letter-spacing:-.028em}
h3{font-size:var(--t7);letter-spacing:-.022em;line-height:1.1}
h4{font-size:var(--t5);font-weight:700;letter-spacing:-.014em;line-height:1.2}
p{margin:0 0 var(--sp4)}

/* mono label — het kenmerkende element van het systeem */
.eyebrow{
  font-family:var(--f-mono); font-size:var(--t1); font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
  margin:0 0 var(--sp4);
}
.eyebrow--accent{color:var(--accent-ink)}
.eyebrow--deep{color:var(--ink-on-deep-2)}

/* eenheidsaanduiding — de visuele rode draad, uit militaire naamgeving */
.desig{
  display:inline-block; font-family:var(--f-mono); font-size:var(--t1);
  font-weight:500; letter-spacing:.11em; text-transform:uppercase;
  padding:.2rem .45rem; border:1px solid var(--line-2); color:var(--ink-2);
  white-space:nowrap; line-height:1.35;
}
.desig--accent{border-color:var(--accent-ink);color:var(--accent-ink)}
.desig--solid{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.desig--alarm{border-color:var(--alarm);color:var(--alarm)}
.desig--deep{border-color:var(--line-deep);color:var(--ink-on-deep-2)}

.lede{font-size:clamp(var(--t5),1.9vw,var(--t6));line-height:1.45;color:var(--ink-2);max-width:56ch}
.lede--deep{color:var(--ink-on-deep-2)}

/* redactionele tekst: serif, alleen op eenheids-/missie-/verhaalpagina's */
.prose{font-family:var(--f-text);font-size:var(--t5);line-height:1.68;max-width:var(--measure);color:var(--ink-2)}
.prose p{margin:0 0 1.1em}
.prose strong{color:var(--ink);font-weight:600}
.prose h3{font-family:var(--f-ui);color:var(--ink);margin:1.8em 0 .5em;font-size:var(--t6)}
.prose ul{margin:0 0 1.1em;padding-left:1.2em}
.prose li{margin-bottom:.35em}
.prose li::marker{color:var(--accent-ink)}

.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* ---------- 4. KNOPPEN ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--f-ui);font-weight:700;font-size:var(--t3);
  letter-spacing:.02em;text-transform:uppercase;
  padding:.85rem 1.5rem;border:1.5px solid transparent;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
  min-height:46px;text-align:center;
}
/* De merkkleur als vulvlak met bijna-zwarte tekst: 7,84 : 1, en het geeft
   de knop de harde, grafische uitstraling die bij "stoer" hoort. */
.btn--primary{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.btn--primary:hover{background:var(--ink);color:var(--accent-bright);border-color:var(--ink)}
.btn--dark{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--dark:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.btn--ghost{border-color:var(--line-2);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}

/* "Alle 46 bekijken" moet je zien.

   Dit is de doorklik naar de hele shop en dus precies waar je iemand heen
   wilt hebben, maar hij stond in dezelfde grijze omlijning als alle andere
   knoppen en viel daardoor weg. Nu in het rood van het bolletje bij de
   winkelmand: dezelfde kleur die op deze site "hier moet je kijken" betekent. */
.btn--alle{
  border-color:#D92D20;background:#D92D20;color:#fff;
  transition:background .16s cubic-bezier(.2,.7,.3,1),border-color .16s,transform .16s,box-shadow .16s;
}
.btn--alle:hover{
  border-color:#B0231A;background:#B0231A;color:#fff;
  transform:translateY(-1px);box-shadow:0 4px 14px rgba(217,45,32,.28);
}
.btn--alle .btn__arrow{transition:transform .16s cubic-bezier(.2,.7,.3,1)}
.btn--alle:hover .btn__arrow{transform:translateX(3px)}

@media (prefers-reduced-motion:reduce){
  .btn--alle,.btn--alle .btn__arrow{transition:none}
  .btn--alle:hover{transform:none}
}
.btn--on-deep{border-color:var(--line-deep);color:var(--ink-on-deep)}
.btn--on-deep:hover{background:var(--accent);border-color:var(--accent);color:var(--deep)}
.btn--block{width:100%}
.btn--lg{padding:1.05rem 2rem;font-size:var(--t4)}
.btn--sm{padding:.55rem 1rem;font-size:var(--t2);min-height:36px}
.btn__arrow{font-family:var(--f-mono);font-weight:400;transition:transform .15s ease}
.btn:hover .btn__arrow{transform:translateX(3px)}

.link-arrow{
  display:inline-flex;align-items:center;gap:.45rem;
  font-weight:700;font-size:var(--t3);text-transform:uppercase;letter-spacing:.05em;
  color:var(--accent-ink);border-bottom:1.5px solid currentColor;padding-bottom:2px;
}
.link-arrow:hover{color:var(--ink)}

/* ---------- 5. HEADER ---------- */
.topbar{
  background:var(--deep);color:var(--ink-on-deep-2);
  font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.09em;text-transform:uppercase;
}
.topbar__in{display:flex;align-items:center;justify-content:center;gap:2rem;min-height:34px;flex-wrap:wrap;text-align:center}
.topbar b{color:var(--accent-bright);font-weight:500}

.header{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--line)}
.header__in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--sp5);align-items:center;min-height:74px}
.logo{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:var(--t6);letter-spacing:-.04em;line-height:1}
.logo__mark{
  width:34px;height:34px;flex:0 0 34px;background:var(--ink);color:var(--accent-bright);
  display:grid;place-items:center;font-family:var(--f-mono);font-size:var(--t3);font-weight:600;
}
.logo small{display:block;font-family:var(--f-mono);font-size:var(--t1);font-weight:400;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-top:.15rem}

/* zoekbalk — het hart van de site */
/* LET OP: `.search` is de klasse van het zoekformulier, maar WordPress zet
   diezelfde klasse óók op de `body` van een zoekresultatenpagina. Zonder de
   uitsluiting hieronder werd de hele pagina een flexrij van 520 pixels breed:
   kop, inhoud en voet naast elkaar, met een half wit scherm als gevolg. */
.search:not(body){display:flex;border:1.5px solid var(--ink);background:var(--surface);max-width:520px;width:100%}
.search:not(body) input{flex:1;min-width:0;border:0;padding:.7rem .85rem;background:transparent;font-size:var(--t3)}
.search:not(body) input::placeholder{color:var(--ink-3)}
.search:not(body) button{
  flex:0 0 auto;background:var(--ink);color:var(--paper);padding:0 1.05rem;
  font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.14em;text-transform:uppercase;font-weight:500;
}
.search:not(body) button:hover{background:var(--accent-ink)}

.header__acts{display:flex;align-items:center;gap:.35rem}
.iconbtn{
  display:grid;place-items:center;width:42px;height:42px;position:relative;color:var(--ink-2);
}
.iconbtn:hover{color:var(--accent-ink)}
.iconbtn__count{
  position:absolute;top:4px;right:2px;min-width:17px;height:17px;padding:0 3px;
  background:var(--alarm);color:#fff;font-family:var(--f-mono);font-size:9px;font-weight:600;
  display:grid;place-items:center;line-height:1;
}

.nav{background:var(--paper);border-bottom:1px solid var(--line)}
.nav__in{display:flex;align-items:stretch;gap:0;overflow-x:auto;scrollbar-width:none}
.nav__in::-webkit-scrollbar{display:none}
.nav a{
  display:flex;align-items:center;padding:.8rem 1.05rem;white-space:nowrap;
  font-weight:700;font-size:var(--t2);text-transform:uppercase;letter-spacing:.075em;
  color:var(--ink-2);border-bottom:2px solid transparent;
}
.nav a:first-child{padding-left:0}
.nav a:hover{color:var(--ink);border-bottom-color:var(--line-2)}
.nav a.is-active{color:var(--ink);border-bottom-color:var(--accent-ink)}
.nav a.is-accent{color:var(--accent-ink)}
.nav a.is-accent:hover{border-bottom-color:var(--accent-ink)}

/* ---------- 6. SECTIES ---------- */
.sec{padding:var(--sp9) 0}
.sec--tight{padding:var(--sp7) 0}
.sec--deep{background:var(--deep);color:var(--ink-on-deep)}
.sec--deep h2,.sec--deep h3,.sec--deep h4{color:var(--ink-on-deep)}
.sec--paper2{background:var(--paper-2)}
.sec__head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp5);margin-bottom:var(--sp6);flex-wrap:wrap}
.sec__head h2{max-width:22ch}
.rule{height:1px;background:var(--line);border:0;margin:0}
.rule--deep{background:var(--line-deep)}

/* ---------- 7. HERO ---------- */
.hero{position:relative;background:var(--deep);color:var(--ink-on-deep);overflow:hidden}
.hero__grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:var(--sp8);align-items:center;padding-block:var(--sp9);
}
.hero h1{color:var(--ink-on-deep)}
.hero h1 em{font-style:normal;color:var(--accent-bright);display:block}
.hero__acts{display:flex;gap:var(--sp3);flex-wrap:wrap;margin-top:var(--sp6)}
.hero__facts{
  display:flex;gap:0;margin-top:var(--sp7);border-top:1px solid var(--line-deep);flex-wrap:wrap;
}
.hero__fact{padding:var(--sp4) var(--sp5) 0 0;margin-right:var(--sp5);}
.hero__fact b{display:block;font-family:var(--f-ui);font-weight:800;font-size:var(--t7);letter-spacing:-.03em;line-height:1;color:var(--accent-bright);font-variant-numeric:tabular-nums}
.hero__fact span{display:block;font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-on-deep-2);margin-top:.4rem}

/* beeldvlak: echte foto of nette placeholder */
.shot{position:relative;background:var(--deep-2);border:1px solid var(--line-deep);overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover}
.shot--ratio{aspect-ratio:4/5}
.shot__tag{position:absolute;left:0;bottom:0;background:var(--deep);border-top:1px solid var(--line-deep);border-right:1px solid var(--line-deep);padding:.45rem .7rem;font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-bright)}

/* ---------- 8. PRODUCTKAART ---------- */
.grid-prod{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.grid-prod--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-prod--3{grid-template-columns:repeat(3,minmax(0,1fr))}

.prod{background:var(--surface);display:flex;flex-direction:column;position:relative;transition:background .15s}
.prod:hover{background:var(--paper)}
.prod__media{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--paper-2)}
.prod__media img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.prod:hover .prod__media img{transform:scale(1.035)}
.prod__flags{position:absolute;top:.55rem;left:.55rem;display:flex;flex-direction:column;gap:.3rem;align-items:flex-start;z-index:2}
.prod__flag{
  font-family:var(--f-mono);font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:.22rem .42rem;background:var(--ink);color:var(--paper);line-height:1;
}
.prod__flag--sale{background:var(--alarm)}
.prod__flag--new{background:var(--accent-ink)}
.prod__body{padding:var(--sp4);display:flex;flex-direction:column;gap:.5rem;flex:1}
.prod__desig{display:flex;gap:.3rem;flex-wrap:wrap}
.prod__name{font-weight:700;font-size:var(--t3);line-height:1.28;letter-spacing:-.01em;margin:0}
.prod__name a:hover{color:var(--accent-ink)}
.prod__foot{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp3);padding-top:.35rem}
.price{font-family:var(--f-mono);font-size:var(--t4);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.price s{color:var(--ink-3);font-weight:400;font-size:var(--t2);margin-right:.35rem}
.price--sale{color:var(--alarm)}
.prod__sizes{font-family:var(--f-mono);font-size:var(--t1);color:var(--ink-3);letter-spacing:.06em}

/* ---------- 9. EENHEIDSKAART ---------- */
.grid-unit{display:grid;gap:1px;background:var(--line-deep);border:1px solid var(--line-deep)}
.grid-unit--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-unit--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.unit{
  background:var(--deep-2);padding:var(--sp5);display:flex;flex-direction:column;gap:.6rem;
  min-height:172px;transition:background .15s;
}
.unit:hover{background:#232A1F}
.unit__code{font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.13em;text-transform:uppercase;color:var(--accent-bright)}
.unit__name{font-weight:800;font-size:var(--t5);letter-spacing:-.02em;line-height:1.12;color:var(--ink-on-deep)}
.unit__alias{font-family:var(--f-text);font-size:var(--t3);color:var(--ink-on-deep-2);line-height:1.4}
.unit__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--sp3);font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding-top:.5rem;border-top:1px solid var(--line-deep)}
.unit:hover .unit__foot{color:var(--accent-bright)}

/* ---------- 10. PROCESSTAPPEN ---------- */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line)}
.step{background:var(--paper);padding:var(--sp5) var(--sp4) var(--sp5) 0}
.step__n{font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.14em;color:var(--accent-ink);display:block;margin-bottom:.7rem}
.step h4{margin-bottom:.35rem}
.step p{font-family:var(--f-text);font-size:var(--t3);color:var(--ink-2);margin:0;line-height:1.5}
.sec--deep .step{background:var(--deep)}
.sec--deep .steps{background:var(--line-deep);border-color:var(--line-deep)}
.sec--deep .step p{color:var(--ink-on-deep-2)}

/* ---------- 11. MAATWERK-BLOK (de kruisverkoop) ---------- */
.upsell{
  border:1.5px solid var(--accent-ink);background:var(--accent-soft);
  padding:var(--sp5);display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:var(--sp5);align-items:center;
}
.upsell__t{font-weight:800;font-size:var(--t6);letter-spacing:-.025em;margin:0 0 .3rem;line-height:1.1}
.upsell__d{font-family:var(--f-text);font-size:var(--t3);color:var(--ink-2);margin:0}
.upsell__d b{font-family:var(--f-mono);font-weight:600;color:var(--accent-ink)}

/* ---------- 12. PROJECTKAART (bewijs) ---------- */
.grid-proj{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp5)}
.proj{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line)}
.proj__media{aspect-ratio:3/2;background:var(--paper-2);overflow:hidden}
.proj__media img{width:100%;height:100%;object-fit:cover}
.proj__body{padding:var(--sp5);display:flex;flex-direction:column;gap:.55rem;flex:1}
.proj__meta{display:flex;gap:.35rem;flex-wrap:wrap}
.proj h4{margin:0;font-size:var(--t5);line-height:1.2}
.proj p{font-family:var(--f-text);font-size:var(--t3);color:var(--ink-2);margin:0}
.proj__foot{margin-top:auto;padding-top:var(--sp3);border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.proj__foot b{color:var(--accent-ink);font-weight:600}

/* ---------- 13. TABEL / STAFFEL ---------- */
.tbl-wrap{overflow-x:auto;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line)}
table.tbl{border-collapse:collapse;width:100%;min-width:480px;font-size:var(--t3)}
.tbl th{
  text-align:left;font-family:var(--f-mono);font-size:var(--t1);font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);
  padding:.75rem .9rem .75rem 0;border-bottom:1px solid var(--line-2);
}
.tbl td{padding:.75rem .9rem .75rem 0;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl td:first-child,.tbl th:first-child{padding-left:0}
.tbl tr.is-hi td{background:var(--accent-soft);font-weight:600}

/* ---------- 14. FILTERS / SHOP ---------- */
.shop{display:grid;grid-template-columns:250px minmax(0,1fr);gap:var(--sp7);align-items:start}
.facet{border-bottom:1px solid var(--line);padding:var(--sp4) 0}
.facet:first-child{padding-top:0}
.facet__t{font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin:0 0 .7rem;display:flex;justify-content:space-between}
.facet label{display:flex;align-items:center;gap:.5rem;font-size:var(--t3);padding:.2rem 0;cursor:pointer;color:var(--ink-2)}
.facet label:hover{color:var(--ink)}
.facet input{accent-color:var(--accent-ink);width:15px;height:15px;flex:0 0 15px}
.facet label span.c{margin-left:auto;font-family:var(--f-mono);font-size:var(--t1);color:var(--ink-3)}
.shop__bar{display:flex;justify-content:space-between;align-items:center;gap:var(--sp4);padding-bottom:var(--sp4);border-bottom:1px solid var(--line);margin-bottom:var(--sp5);flex-wrap:wrap}
.shop__count{font-family:var(--f-mono);font-size:var(--t2);color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}
.chips{display:flex;gap:.35rem;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.07em;text-transform:uppercase;border:1px solid var(--ink);padding:.25rem .5rem;color:var(--ink)}
.chip button{color:var(--ink-3);font-size:var(--t3);line-height:1}
.chip button:hover{color:var(--alarm)}

/* ---------- 15. FOOTER ---------- */
.footer{background:var(--deep);color:var(--ink-on-deep-2);padding:var(--sp8) 0 var(--sp6)}
.footer h4{color:var(--ink-on-deep);font-size:var(--t3);text-transform:uppercase;letter-spacing:.09em;font-family:var(--f-mono);font-weight:500;margin-bottom:var(--sp4)}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.footer a{font-size:var(--t3)}
.footer a:hover{color:var(--accent-bright)}
.footer__bottom{margin-top:var(--sp7);padding-top:var(--sp5);border-top:1px solid var(--line-deep);display:flex;justify-content:space-between;gap:var(--sp5);flex-wrap:wrap;font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.pay{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.pay span{border:1px solid var(--line-deep);padding:.28rem .5rem;font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.08em;color:var(--ink-on-deep-2)}

/* ---------- 16. UTILS ---------- */
.stack{display:flex;flex-direction:column}
.stack-2{gap:var(--sp2)} .stack-3{gap:var(--sp3)} .stack-4{gap:var(--sp4)}
.stack-5{gap:var(--sp5)} .stack-6{gap:var(--sp6)}
.row{display:flex;gap:var(--sp3);flex-wrap:wrap;align-items:center}
.mt-6{margin-top:var(--sp6)} .mt-5{margin-top:var(--sp5)} .mt-4{margin-top:var(--sp4)}
.mb-5{margin-bottom:var(--sp5)} .mb-6{margin-bottom:var(--sp6)}
.tc{text-align:center} .no-m{margin:0}

/* ---------- 17. RESPONSIEF ---------- */
@media(max-width:1080px){
  .hero__grid{grid-template-columns:1fr;gap:var(--sp6);padding-block:var(--sp8)}
  .grid-prod--4{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid-unit--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-proj{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__grid{grid-template-columns:1fr 1fr}
  .shop{grid-template-columns:1fr}
  /* De facetten worden hier een lade, zie blok 43. */
}
@media(max-width:820px){
  :root{--sp9:3.5rem;--sp8:2.5rem}
  .header__in{grid-template-columns:auto auto;min-height:62px}
  .header__in .search:not(body){display:none}
  .search-mob{display:block;padding-block:var(--sp3)}
  .grid-prod--4,.grid-prod--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-unit--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-proj{grid-template-columns:1fr}
  .upsell{grid-template-columns:1fr}
  .sec__head{align-items:flex-start}
}
@media(max-width:520px){
  .grid-unit--4,.grid-unit--3{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .hero__fact{padding-right:var(--sp4);margin-right:var(--sp4)}
}
.search-mob{display:none}
@media(max-width:820px){.search-mob{display:block}}

/* vaste toevoegbalk mobiel — CRO-eis uit de strategie */
.sticky-cart{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  background:var(--paper);border-top:1px solid var(--line-2);
  padding:.6rem var(--gut);gap:var(--sp3);align-items:center;
}
@media(max-width:820px){.sticky-cart{display:flex}}
.sticky-cart .price{flex:0 0 auto}
.sticky-cart .btn{flex:1}

/* ==========================================================================
   18. EENHEIDSPAGINA — het template dat ~100x draait
   ========================================================================== */
.crumb{font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);padding-block:var(--sp4)}
.crumb a:hover{color:var(--accent-ink)}
.crumb span{margin:0 .45rem;opacity:.5}

.uhero{background:var(--deep);color:var(--ink-on-deep)}
.uhero__grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:var(--sp8);align-items:end;padding-block:var(--sp8)}
.uhero h1{color:var(--ink-on-deep);font-size:clamp(2.1rem,4.6vw,var(--t10))}
.uhero__alias{font-family:var(--f-text);font-size:var(--t6);color:var(--accent-bright);margin:var(--sp3) 0 0;line-height:1.35}
.uhero__meta{display:flex;gap:0;flex-wrap:wrap;margin-top:var(--sp6);border-top:1px solid var(--line-deep);padding-top:var(--sp4)}
.uhero__meta div{margin-right:var(--sp6);padding-bottom:var(--sp2)}
.uhero__meta dt{font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.25rem}
.uhero__meta dd{margin:0;font-weight:700;font-size:var(--t4);color:var(--ink-on-deep)}
.uhero__acts{display:flex;gap:var(--sp3);flex-wrap:wrap;margin-top:var(--sp5)}

/* het embleemvlak — geen echt embleem in het prototype, wel de plek ervoor */
.crest{aspect-ratio:1/1;border:1px solid var(--line-deep);background:var(--deep-2);display:grid;place-items:center;padding:var(--sp6);text-align:center}
.crest__ph{font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);line-height:1.7}
.crest img{width:100%;height:100%;object-fit:contain}

/* redactie-waarschuwing — eerlijk over wat nog gecontroleerd moet worden */
.verify{border:1px dashed var(--accent-ink);background:var(--accent-soft);padding:var(--sp4);margin:var(--sp5) 0}
.verify b{font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.13em;text-transform:uppercase;color:var(--accent-ink);display:block;margin-bottom:.4rem}
.verify p{font-family:var(--f-text);font-size:var(--t3);color:var(--ink-2);margin:0}

/* tijdlijn */
.tl{border-left:1px solid var(--line-2);margin-left:.4rem;padding-left:var(--sp5);display:flex;flex-direction:column;gap:var(--sp5)}
.tl__i{position:relative}
.tl__i::before{content:"";position:absolute;left:calc(-1 * var(--sp5) - .4rem);top:.52rem;width:7px;height:7px;background:var(--accent-ink)}
.tl__y{font-family:var(--f-mono);font-size:var(--t2);font-weight:600;letter-spacing:.08em;color:var(--accent-ink);display:block;margin-bottom:.2rem}
.tl__i h4{margin:0 0 .2rem}
.tl__i p{font-family:var(--f-text);font-size:var(--t3);color:var(--ink-2);margin:0;line-height:1.55}

/* twee kolommen redactioneel + zijbalk */
.split{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--sp8);align-items:start}
.side{border:1px solid var(--line);padding:var(--sp5);background:var(--surface)}
.side h4{margin:0 0 var(--sp4);font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.side ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.side ul li{border-top:1px solid var(--line)}
.side ul li:first-child{border-top:0}
.side ul a{display:flex;justify-content:space-between;gap:var(--sp3);padding:.6rem 0;font-size:var(--t3);font-weight:600}
.side ul a:hover{color:var(--accent-ink)}
.side ul a span{font-family:var(--f-mono);font-size:var(--t1);color:var(--ink-3);font-weight:400}

/* bijdrageblok — de community-motor uit de contentstrategie */
.contrib{border:1.5px solid var(--ink);padding:var(--sp6);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp5);align-items:center}
.contrib h3{margin:0 0 .4rem}
.contrib p{font-family:var(--f-text);color:var(--ink-2);margin:0;max-width:52ch}

@media(max-width:1080px){
  .uhero__grid{grid-template-columns:1fr;gap:var(--sp6);align-items:start}
  .uhero__grid .crest{max-width:260px}
  .split{grid-template-columns:1fr;gap:var(--sp6)}
  .contrib{grid-template-columns:1fr}
}

/* ==========================================================================
   19. CONFIGURATOR — 4 stappen met meelopende prijsindicatie
   ========================================================================== */
.cfg{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--sp7);align-items:start}

.cfg__steps{display:flex;gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:var(--sp6)}
.cfg__step{
  flex:1;background:var(--paper);padding:.75rem .9rem;display:flex;flex-direction:column;gap:.15rem;
  font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}
.cfg__step b{font-family:var(--f-ui);font-size:var(--t3);font-weight:700;letter-spacing:-.01em;text-transform:none;color:var(--ink-3)}
.cfg__step.is-done{background:var(--accent-soft);color:var(--accent-ink)}
.cfg__step.is-done b{color:var(--accent-ink)}
.cfg__step.is-now{background:var(--ink);color:var(--accent-bright)}
.cfg__step.is-now b{color:#fff}

.pane{display:none}
.pane.is-open{display:block}

.fld{border-top:1px solid var(--line);padding:var(--sp5) 0}
.fld:first-of-type{border-top:0;padding-top:0}
.fld__q{font-weight:800;font-size:var(--t5);letter-spacing:-.02em;margin:0 0 .3rem}
.fld__h{font-family:var(--f-text);font-size:var(--t3);color:var(--ink-3);margin:0 0 var(--sp4)}

.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.5rem}
.opt{position:relative}
.opt input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.opt span{
  display:flex;flex-direction:column;gap:.2rem;border:1.5px solid var(--line-2);background:var(--surface);
  padding:.7rem .85rem;font-size:var(--t3);font-weight:600;cursor:pointer;min-height:100%;
  transition:border-color .12s,background .12s;
}
.opt span em{font-style:normal;font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.06em;color:var(--ink-3);font-weight:400}
.opt input:checked + span em{color:var(--accent-ink)}
.opt input:focus-visible + span{outline:2px solid var(--accent-ink);outline-offset:2px}

/* Een keuze als kaartje, met het vinkje in de hoek.

   Het vinkje staat rechtsboven en niet vóór de tekst: dan blijft de regel
   links netjes uitlijnen en hoeft er geen inspringing voor elk vak bedacht
   te worden. Niet gekozen is het een rustig leeg rondje; gekozen springt het
   eruit.

   De achtergrond blijft wit. Een heel vlak inkleuren maakt een formulier met
   tien keuzes onrustig en je ziet dan juist slechter welke de jouwe is. De
   rand, het rondje en een zacht schaduwtje doen het werk. Zweven geeft een
   warme zandtint, duidelijk anders dan het turquoise van een gemaakte keuze,
   zodat je die twee nooit door elkaar haalt. */
.opt span{padding:.7rem 2.6rem .7rem .85rem;position:relative}

/* Eén soepele curve voor alles wat hier beweegt, en één die even doorveert
   voor het vinkje zelf. Dat laatste is het enige moment dat mag opvallen:
   je hebt net iets gekozen. */
.opt span{
  transition:border-color .18s cubic-bezier(.2,.7,.3,1),
             background .18s cubic-bezier(.2,.7,.3,1),
             box-shadow .18s cubic-bezier(.2,.7,.3,1),
             transform .18s cubic-bezier(.2,.7,.3,1);
}
.opt span::before{
  content:"";position:absolute;top:.7rem;right:.7rem;
  width:1.3rem;height:1.3rem;border-radius:50%;
  border:1.5px solid var(--line-2);background:var(--surface);
  transition:border-color .18s cubic-bezier(.2,.7,.3,1),
             background .18s cubic-bezier(.2,.7,.3,1),
             transform .28s cubic-bezier(.34,1.56,.64,1);
}
.opt span::after{
  content:"";position:absolute;top:1.03rem;right:1.17rem;
  width:.4rem;height:.68rem;
  border:solid #fff;border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg) scale(.2);opacity:0;
  transition:opacity .12s ease-out,
             transform .3s cubic-bezier(.34,1.56,.64,1) .04s;
}

.opt:hover span{
  border-color:var(--ink-3);
  background:#FBF6EC;
  box-shadow:0 4px 14px rgba(11,32,39,.09);
  transform:translateY(-1px);
}
.opt:hover span::before{border-color:var(--ink-3);transform:scale(1.08)}
.opt span:active{transform:translateY(0);transition-duration:.06s}

.opt input:checked + span{
  border-color:var(--accent-ink);
  background:var(--surface);
  box-shadow:0 4px 16px rgba(0,114,124,.18);
}
.opt input:checked + span::before{
  border-color:var(--accent-ink);background:var(--accent-ink);transform:scale(1.06);
}
.opt input:checked + span::after{opacity:1;transform:rotate(45deg) scale(1)}

/* Wie beweging heeft uitgezet in zijn systeem krijgt hem hier ook niet. */
@media (prefers-reduced-motion:reduce){
  .opt span,.opt span::before,.opt span::after{transition-duration:.01ms}
  .opt:hover span{transform:none}
}


.fld input[type=text],.fld input[type=email],.fld input[type=tel],.fld input[type=number],
.fld input[type=date],.fld select,.fld textarea{
  width:100%;border:1.5px solid var(--line-2);background:var(--surface);padding:.7rem .85rem;font-size:var(--t3);
}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--accent-ink);outline:none}
.fld textarea{min-height:110px;resize:vertical;font-family:var(--f-text)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp4)}
/* De veldnamen in het formulier.

   Stonden op elf pixels in lichtgrijs met veel letterruimte: mooi, maar je
   moet ernaar tùren, en dit is het formulier waar de omzet doorheen loopt.
   Groter, zwaarder en donkerder dus, en iets minder ruimte tussen de letters.
   Het blijft dezelfde stijl, hij is alleen te lezen. */
.lbl{
  display:block;font-family:var(--f-mono);font-size:var(--t2);font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);margin-bottom:.4rem;
}

.drop{border:1.5px dashed var(--line-2);background:var(--surface);padding:var(--sp6);text-align:center}
.drop:hover{border-color:var(--accent-ink);background:var(--accent-soft)}
.drop b{display:block;font-size:var(--t4);margin-bottom:.25rem}
.drop span{font-family:var(--f-text);font-size:var(--t3);color:var(--ink-3)}

.cfg__nav{display:flex;justify-content:space-between;gap:var(--sp3);margin-top:var(--sp6);padding-top:var(--sp5);border-top:1px solid var(--line)}

/* prijspaneel — plakt mee */
.quote{position:sticky;top:96px;border:1.5px solid var(--ink);background:var(--surface)}
.quote__hd{background:var(--ink);color:var(--paper);padding:var(--sp4) var(--sp5)}
.quote__hd span{font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.13em;text-transform:uppercase;color:var(--accent-bright);display:block;margin-bottom:.3rem}
.quote__hd b{font-family:var(--f-ui);font-size:var(--t8);font-weight:800;letter-spacing:-.035em;line-height:1;display:block;font-variant-numeric:tabular-nums}
.quote__hd small{font-family:var(--f-mono);font-size:var(--t1);color:#A8AF9B;display:block;margin-top:.45rem;letter-spacing:.05em}
.quote__body{padding:var(--sp5)}
.quote__rows{display:flex;flex-direction:column;gap:.05rem;margin-bottom:var(--sp4)}
.quote__row{display:flex;justify-content:space-between;gap:var(--sp3);font-size:var(--t3);padding:.42rem 0;border-bottom:1px solid var(--line)}
.quote__row:last-child{border-bottom:0}
.quote__row dt{color:var(--ink-3);font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.06em;text-transform:uppercase;padding-top:.15rem}
.quote__row dd{margin:0;font-weight:600;text-align:right}
.quote__tot{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp3);padding:var(--sp4) 0;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);margin-bottom:var(--sp4)}
.quote__tot span{font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.quote__tot b{font-family:var(--f-mono);font-size:var(--t6);font-weight:600;font-variant-numeric:tabular-nums}
.quote__note{font-family:var(--f-text);font-size:var(--t2);color:var(--ink-3);line-height:1.5;margin:0}
.quote--empty .quote__hd b{font-size:var(--t6);color:#A8AF9B}

/* Terwijl de server rekent.

   Geen molentje en geen lege plek: het bedrag dat er stond blijft staan en
   zakt alleen even weg. Zo zie je dat er iets gebeurt zonder dat je scherm
   op slot lijkt te gaan, en als het antwoord uit het geheugen komt duurt
   deze stand zo kort dat je hem niet eens ziet. */
.quote.is-rekenen .quote__hd b,
.quote.is-rekenen .quote__rows,
.quote.is-rekenen .quote__tot{
  opacity:.45;transition:opacity .12s ease-out;
}
.quote .quote__hd b,.quote .quote__rows,.quote .quote__tot{transition:opacity .18s ease-out}

.quote.is-rekenen .quote__hd::after{
  content:"rekenen\2026";
  display:block;margin-top:.15rem;
  font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-ink);
  animation:gs-pols 1s ease-in-out infinite;
}
@keyframes gs-pols{0%,100%{opacity:.45}50%{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .quote.is-rekenen .quote__hd::after{animation:none;opacity:.8}
}

@media(max-width:1080px){
  .cfg{grid-template-columns:1fr}
  .quote{position:static;order:-1}
  .cfg__steps{overflow-x:auto}
  .cfg__step{min-width:130px}
}
@media(max-width:560px){
  .grid2{grid-template-columns:1fr}
  .cfg__step b{display:none}
}

/* ==========================================================================
   20. PRODUCTPAGINA
   ========================================================================== */
.pdp{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--sp8);align-items:start}
.gal{display:grid;grid-template-columns:76px minmax(0,1fr);gap:var(--sp3);align-items:start}
.gal__thumbs{display:flex;flex-direction:column;gap:var(--sp2)}
.gal__thumb{aspect-ratio:1/1;border:1.5px solid var(--line);background:var(--surface);overflow:hidden;padding:0}
.gal__thumb.is-on{border-color:var(--ink)}
.gal__thumb img{width:100%;height:100%;object-fit:cover}
.gal__main{aspect-ratio:1/1;border:1px solid var(--line);background:var(--surface);overflow:hidden}
.gal__main img{width:100%;height:100%;object-fit:cover}

.buy{position:sticky;top:96px}
.buy h1{font-size:clamp(1.6rem,3vw,var(--t8));margin-bottom:var(--sp4)}
.buy__price{display:flex;align-items:baseline;gap:var(--sp3);margin:var(--sp4) 0}
.buy__price .price{font-size:var(--t8);font-weight:600}
.sizes{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:var(--sp4)}
.size{position:relative}
.size input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.size span{display:grid;place-items:center;min-width:52px;height:44px;border:1.5px solid var(--line-2);background:var(--surface);font-family:var(--f-mono);font-size:var(--t3);font-weight:500;cursor:pointer}
.size input:checked + span{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.size input:disabled + span{color:var(--ink-3);border-color:var(--line);background:var(--paper-2);cursor:not-allowed;text-decoration:line-through}
.size input:focus-visible + span{outline:2px solid var(--accent-ink);outline-offset:2px}

.trust{display:flex;flex-direction:column;gap:.55rem;margin-top:var(--sp5);padding-top:var(--sp5);border-top:1px solid var(--line)}
.trust div{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--t3);color:var(--ink-2)}
.trust b{color:var(--accent-ink);font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.08em;flex:0 0 auto;padding-top:.2rem}

.acc{border-top:1px solid var(--line)}
.acc__i{border-bottom:1px solid var(--line)}
.acc__i summary{padding:.9rem 0;cursor:pointer;font-weight:700;font-size:var(--t3);display:flex;justify-content:space-between;align-items:center;list-style:none}
.acc__i summary::-webkit-details-marker{display:none}
.acc__i summary::after{content:"+";font-family:var(--f-mono);color:var(--accent-ink);font-weight:400;font-size:var(--t5)}
.acc__i[open] summary::after{content:"\2212"}
.acc__c{padding:0 0 var(--sp4);font-family:var(--f-text);font-size:var(--t3);color:var(--ink-2);line-height:1.6}
.acc__c p{margin:0 0 .7em}
.acc__c p:last-child{margin:0}

@media(max-width:1080px){
  .pdp{grid-template-columns:1fr;gap:var(--sp6)}
  .buy{position:static}
}
@media(max-width:560px){
  .gal{grid-template-columns:1fr}
  .gal__thumbs{flex-direction:row;order:2;overflow-x:auto}
  .gal__thumb{flex:0 0 64px}
}

/* ==========================================================================
   21. TOEGANKELIJKHEID
   Niet optioneel bij een veteranendoelgroep: gehoorschade, fysieke
   beperkingen, PTSS-klachten. Rustig, hoog contrast, geen plotselinge
   beweging, geen automatisch geluid. WCAG 2.2 AA als ondergrens.
   ========================================================================== */

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--paper);padding:.8rem 1.2rem;
  font-family:var(--f-ui);font-weight:700;font-size:var(--t3);
  text-transform:uppercase;letter-spacing:.04em;
}
.skip-link:focus{left:0}

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

/* Doelgrootte minimaal 44 px: WCAG 2.2 Target Size. */
.nav a,.iconbtn,.btn,.size span,.gal__thumb{min-height:44px}

@media (prefers-contrast:more){
  :root{
    --line:#8A8D7C;--line-2:#5F6353;
    --ink-2:#2A2E22;--ink-3:#454A3A;
    --accent-ink:#6E5019;
  }
}

/* ==========================================================================
   22. AANVULLINGEN VOOR DE TEMPLATES
   ========================================================================== */

/* galerij op eenheids- en missiepagina */
.gallery-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin:var(--sp5) 0;
}
.gallery-grid__i{margin:0;background:var(--surface);aspect-ratio:1/1;overflow:hidden}
.gallery-grid__i img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.gallery-grid__i:hover img{transform:scale(1.04)}

/* product zonder foto: nette lege plek, geen gebroken plaatje */
.prod__noimg{
  display:block;width:100%;height:100%;
  background:
    repeating-linear-gradient(45deg,var(--paper-2) 0 10px,var(--paper) 10px 20px);
}

/* de kop van een eenheidspagina met sfeerbeeld erachter */
.uhero{background-color:var(--deep)}

/* menu-lijsten in de footer krijgen van wp_nav_menu een ul mee */
.footer .menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.footer .menu a{font-size:var(--t3)}
.footer .menu a:hover{color:var(--accent-bright)}
.footer__bottom .menu{flex-direction:row;gap:1rem;display:inline-flex}

/* De opmaak van de zoeksuggesties staat in blok 45, onderaan dit bestand.
   Stond hier eerder ook, maar `.suggest a span` won qua specificiteit van
   `.suggest__naam` en maakte daardoor de naam net zo grijs en klein als het
   bijschrift erachter. */
.search:not(body){position:relative}

/* bevestiging na het versturen van een aanvraag */
.done{
  border:1.5px solid var(--accent-ink);background:var(--accent-soft);
  padding:var(--sp6);text-align:center;
}
.done h2{margin-bottom:var(--sp4)}
.done p{font-family:var(--f-text);color:var(--ink-2);max-width:52ch;margin-inline:auto}
.done__nr{
  font-family:var(--f-mono);font-size:var(--t7);font-weight:600;
  color:var(--accent-ink);display:block;margin:var(--sp4) 0;
}

/* foutmelding in de configurator */
.cfg__error{
  border-top:2px solid var(--alarm);background:var(--paper);
  padding:.9rem 1.1rem;margin:0 0 var(--sp4);font-size:var(--t3);color:var(--ink);
}
.cfg__error b{
  display:block;font-family:var(--f-mono);font-size:var(--t1);
  letter-spacing:.13em;text-transform:uppercase;color:var(--alarm);margin-bottom:.3rem;
}

/* bezig-staat op knoppen */
.btn[aria-busy="true"]{opacity:.6;pointer-events:none}

/* stappenbalk is een geordende lijst: semantiek klopt, opmaak blijft gelijk */
.cfg__steps{list-style:none;margin:0 0 var(--sp6);padding:0}
.cfg__step{cursor:pointer}
.fld legend{padding:0}

/* ==========================================================================
   23. CORRECTIES NA DE EERSTE LIVE-TEST OP DEV3
   ========================================================================== */

/* Het eigen logo van Gorilla is breed en liggend; zonder begrenzing duwt hij
   de winkelwagen naar een eigen regel. */
.logo img,
.logo__img,
.custom-logo,
.custom-logo-link img{
  max-height:52px;width:auto;height:auto;display:block;
}
.custom-logo-link{display:block;line-height:0}
@media(max-width:820px){
  .logo img,.custom-logo,.custom-logo-link img{max-height:40px}
}

/* WooCommerce zet bij een prijsbereik een toelichting voor schermlezers in de
   prijs ("Prijsklasse: € 6,50 tot € 30,00"). Die hoort niet zichtbaar te zijn. */
.screen-reader-text,
.woocommerce-Price-currencySymbol + .screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Een prijsbereik op een kaart mag geen twee regels worden. */
.prod__foot .price{font-size:var(--t3);line-height:1.25}
.prod__foot{align-items:flex-end}

/* ==========================================================================
   24. MOBIEL — HERZIEN
   Gemeten op dev3, 375x812: de kop nam 299 px (37% van het scherm) en de
   zoekbalk was 24 px hoog en dus onbruikbaar. Op een site die om zoeken
   draait is dat het ergste wat er kan misgaan. Hieronder de herziening.
   ========================================================================== */

@media (max-width: 900px) {

  /* --- topbalk: één regel die zijwaarts loopt, geen drie regels --- */
  .topbar__in {
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 1.6rem;
    overflow-x: auto;
    scrollbar-width: none;
    min-height: 34px;
    padding-block: 0;
    -webkit-overflow-scrolling: touch;
  }
  .topbar__in::-webkit-scrollbar { display: none; }
  .topbar__in span { white-space: nowrap; flex: 0 0 auto; }

  /* --- kop: logo, hamburger, winkelwagen op één rij van 54 px --- */
  .header__in {
    grid-template-columns: auto 1fr auto auto;
    gap: .5rem;
    min-height: 54px;
    align-items: center;
  }
  .logo__img, .logo img { max-height: 34px; }
  .logo { font-size: var(--t5); }
  .header__in .search:not(body) { display: none; }

  .navtoggle {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: var(--ink);
    order: 4;
  }
  .navtoggle svg { pointer-events: none; }

  /* --- zoeken: prominent, direct onder de kop --- */
  .search-mob {
    display: block;
    padding-block: .6rem;
    border-top: 1px solid var(--line);
  }
  .search-mob .search:not(body) {
    max-width: none;
    border-width: 2px;
  }
  .search-mob .search:not(body) input {
    padding: .8rem .9rem;
    font-size: 1rem; /* 16px: voorkomt inzoomen op iOS */
    min-height: 46px;
  }
  .search-mob .search:not(body) button {
    padding: 0 1.1rem;
    min-height: 46px;
  }

  /* --- de tabbalk verdwijnt; hij zit in het paneel --- */
  .nav { display: none; }

  /* --- schuifpaneel met de volledige boom --- */
  .panel {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(88vw, 380px);
    background: var(--paper);
    z-index: 200;
    transform: translateX(101%);
    transition: transform .22s ease;
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 30px rgba(0,0,0,.18);
  }
  .panel.is-open { transform: translateX(0); }
  .panel__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .7rem var(--gut);
    border-bottom: 1px solid var(--line);
    min-height: 54px;
    flex: 0 0 auto;
  }
  .panel__top span {
    font-family: var(--f-mono);
    font-size: var(--t1);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .panel__body { overflow-y: auto; flex: 1; padding-bottom: 3rem; }
  .panel a, .panel summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .85rem var(--gut);
    border-bottom: 1px solid var(--line);
    font-family: var(--f-ui);
    font-weight: 700;
    font-size: var(--t4);
    min-height: 48px;
    color: var(--ink);
  }
  .panel a.is-accent { color: var(--accent-ink); }
  .panel a span.c,
  .panel summary span.c {
    font-family: var(--f-mono);
    font-size: var(--t1);
    font-weight: 400;
    color: var(--ink-3);
  }
  .panel details > summary { list-style: none; cursor: pointer; }
  .panel details > summary::-webkit-details-marker { display: none; }
  .panel details > summary::after {
    content: "+";
    font-family: var(--f-mono);
    color: var(--accent-ink);
    font-size: var(--t5);
    font-weight: 400;
  }
  .panel details[open] > summary::after { content: "\2212"; }
  .panel details a {
    padding-left: calc(var(--gut) + 1rem);
    font-weight: 600;
    font-size: var(--t3);
    background: var(--paper-2);
  }
  .panel__foot {
    padding: var(--sp5) var(--gut);
    border-top: 1px solid var(--line);
    background: var(--deep);
    flex: 0 0 auto;
  }
  .panel__foot .btn { width: 100%; }

  .scrim {
    position: fixed;
    inset: 0;
    background: rgba(12,15,10,.55);
    z-index: 190;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .scrim.is-open { opacity: 1; pointer-events: auto; }
  body.panel-open { overflow: hidden; }

  /* --- koppen wat kleiner, minder verticale ruimte --- */
  .uhero__grid { padding-block: var(--sp6); }
  .uhero h1 { font-size: clamp(1.9rem, 8.5vw, 2.4rem); }
  .uhero__meta { margin-top: var(--sp4); padding-top: var(--sp3); }
  .uhero__meta div { margin-right: var(--sp5); }
  .uhero__acts .btn { flex: 1 1 100%; }
  .crumb { padding-block: var(--sp3); font-size: 10px; }

  /* --- secties dichter op elkaar --- */
  .sec { padding-block: var(--sp7); }
  .sec--tight { padding-block: var(--sp6); }
  .sec__head { margin-bottom: var(--sp5); }

  /* --- productkaart: iets meer lucht voor de duim --- */
  .prod__body { padding: .8rem; gap: .4rem; }
  .prod__name { font-size: var(--t3); }

  /* --- kruisverkoop onder elkaar, knop volle breedte --- */
  .upsell { padding: var(--sp5) var(--sp4); }
  .upsell .btn { width: 100%; }
  .upsell__t { font-size: var(--t5); }
}

@media (min-width: 901px) {
  .navtoggle, .panel, .scrim { display: none; }
}

/* Eén kolom pas onder de 420 px; twee kolommen werkt tot dan prima. */
@media (max-width: 419px) {
  .grid-prod--4, .grid-prod--3 { grid-template-columns: 1fr; }
  .prod__media { aspect-ratio: 4/3; }
}

/* De mobiele zoekbalk zit ín de header, dus hij mag niet geraakt worden door
   de regel die de desktopzoekbalk verbergt. Daarom is die regel gescoped op
   .header__in. Deze twee regels zetten de zichtbaarheid definitief vast. */
@media (max-width: 900px) {
  .header__in .search:not(body) { display: none !important; }
  .search-mob { display: block; }
  .search-mob .search:not(body) { display: flex; }
}
@media (min-width: 901px) {
  .search-mob { display: none; }
  .header__in .search:not(body) { display: flex; }
}

/* ==========================================================================
   25. LICHTER — de site was te donker
   Koppen worden licht met een cyaan streep en zwaar gezette tekst. Het
   "stoere" komt nu uit de typografie en de scherpe hoeken, niet uit een
   donkere achtergrond. Eén donkere sectie blijft over als tegenwicht,
   onderaan bij de nieuwsbrief.
   ========================================================================== */

/* --- eenheids- en missiekop: licht --- */
.uhero{
  background:var(--paper-2);
  color:var(--ink);
  border-top:4px solid var(--accent);
  border-bottom:1px solid var(--line);
}
.uhero h1{color:var(--ink)}
.uhero__alias{color:var(--accent-ink);font-weight:600}
.uhero__meta{border-top-color:var(--line-2)}
.uhero__meta dt{color:var(--ink-3)}
.uhero__meta dd{color:var(--ink)}
.uhero .desig--deep{border-color:var(--line-2);color:var(--ink-2)}
.uhero .btn--on-deep{border-color:var(--ink);color:var(--ink)}
.uhero .btn--on-deep:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
/* Sfeerbeeld achter een lichte kop: lichte waas in plaats van donkere. */
.uhero[style*="background-image"]{
  color:var(--ink);
  background-blend-mode:normal;
}
.crest{background:var(--surface);border-color:var(--line)}
.crest__ph{color:var(--ink-3)}

/* --- homepagekop: licht, met de merkkleur als blok --- */
.hero{
  background:var(--paper);
  color:var(--ink);
  border-bottom:1px solid var(--line);
}
.hero h1{color:var(--ink)}
.hero h1 em{color:var(--accent-ink)}
.hero .lede--deep{color:var(--ink-2)}
.hero__facts{border-top-color:var(--line-2)}
.hero__fact b{color:var(--accent-ink)}
.hero__fact span{color:var(--ink-3)}
.hero .btn--on-deep{border-color:var(--ink);color:var(--ink)}
.hero .btn--on-deep:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.hero .eyebrow--accent{color:var(--accent-ink)}
.shot{background:var(--paper-2);border-color:var(--line)}
.shot__tag{
  background:var(--accent);color:var(--ink);border:0;
  font-weight:600;
}

/* --- eenhedenblok op de homepage: licht in plaats van donker --- */
.sec--deep.sec--units{
  background:var(--paper-2);color:var(--ink);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.sec--units h2,.sec--units h3,.sec--units h4{color:var(--ink)}
.sec--units .eyebrow--deep{color:var(--accent-ink)}
.sec--units .grid-unit{background:var(--line);border-color:var(--line)}
.sec--units .unit{background:var(--surface)}
.sec--units .unit:hover{background:var(--accent-soft)}
.sec--units .unit__code{color:var(--accent-ink)}
.sec--units .unit__name{color:var(--ink)}
.sec--units .unit__alias{color:var(--ink-2)}
.sec--units .unit__foot{color:var(--ink-3);border-top-color:var(--line)}
.sec--units .unit:hover .unit__foot{color:var(--accent-ink)}
.sec--units .btn--on-deep{border-color:var(--ink);color:var(--ink)}
.sec--units .btn--on-deep:hover{background:var(--ink);color:var(--paper)}

/* --- overzichtskaart voor /eenheden/ en /missies/ --- */
.grid-list{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
}
.unitcard{background:var(--surface);display:flex;flex-direction:column}
.unitcard__main{
  display:flex;flex-direction:column;gap:.3rem;padding:var(--sp5);flex:1;
  border-left:3px solid transparent;transition:background .14s,border-color .14s;
}
.unitcard__main:hover{background:var(--accent-soft);border-left-color:var(--accent)}
.unitcard__code{
  font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent-ink);
}
.unitcard__name{
  font-family:var(--f-ui);font-weight:800;font-size:var(--t5);
  letter-spacing:-.02em;line-height:1.15;color:var(--ink);
}
.unitcard__alias{font-family:var(--f-text);font-size:var(--t3);color:var(--ink-2);line-height:1.4}
.unitcard__num{
  margin-top:auto;padding-top:.6rem;font-family:var(--f-mono);font-size:var(--t1);
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
}
.unitcard__sub{
  display:flex;flex-direction:column;border-top:1px solid var(--line);
  background:var(--paper);
}
.unitcard__sub a{
  display:flex;justify-content:space-between;gap:.5rem;
  padding:.5rem var(--sp5);font-size:var(--t3);font-weight:600;
  border-top:1px solid var(--line);color:var(--ink-2);
}
.unitcard__sub a:first-child{border-top:0}
.unitcard__sub a:hover{background:var(--accent-soft);color:var(--accent-ink)}
.unitcard__sub a span{font-family:var(--f-mono);font-size:var(--t1);color:var(--ink-3);font-weight:400}

/* --- de zijbalkkaart die donker was: nu licht met cyaan rand --- */
.side--accent{
  background:var(--accent-soft)!important;
  border-color:var(--accent)!important;
  border-top-width:3px!important;
}
.side--accent h4{color:var(--accent-ink)!important}
.side--accent p{color:var(--ink-2)!important}

/* --- chips en labels krijgen de merkkleur --- */
.chip:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
.prod__flag--new{background:var(--accent);color:var(--ink)}
.prod:hover{background:var(--accent-soft)}
.step__n{color:var(--accent-ink)}
.steps{border-top-color:var(--accent)}
.upsell{border-color:var(--accent);background:var(--accent-soft)}
.upsell__d b{color:var(--accent-ink)}
.tl__i::before{background:var(--accent)}
.verify{border-color:var(--accent-ink);background:var(--accent-soft)}
.verify b{color:var(--accent-ink)}

@media(max-width:820px){
  .grid-list{grid-template-columns:1fr}
}

/* ==========================================================================
   26. LEVERTIJD
   De shirts worden op order bedrukt. Dat moet je zien vóór je bestelt, niet
   pas in de bevestigingsmail — dat is waar teleurstelling en retouren
   vandaan komen.
   ========================================================================== */

.levertijd{
  border:1.5px solid var(--line-2);
  background:var(--surface);
  padding:var(--sp4) var(--sp5);
  margin:var(--sp5) 0 0;
}
.levertijd__kop{
  display:block;font-family:var(--f-mono);font-size:var(--t1);
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:.3rem;
}
.levertijd__duur{
  display:block;font-family:var(--f-ui);font-weight:800;
  font-size:var(--t6);letter-spacing:-.02em;line-height:1.1;color:var(--ink);
}
.levertijd__uitleg{
  font-family:var(--f-text);font-size:var(--t3);color:var(--ink-2);
  margin:.45rem 0 0;
}
.levertijd__extra{
  font-family:var(--f-text);font-size:var(--t2);color:var(--ink-3);
  margin:.6rem 0 0;padding-top:.6rem;border-top:1px solid var(--line);
}

/* Op order bedrukt: nadrukkelijker, want dit is de verwachting die je
   moet bijstellen. Merkkleur als linkerrand, niet als vlak — een vol
   cyaan blok zou de koopknop overschreeuwen. */
.levertijd--bedrukt{
  border-color:var(--accent);
  border-left-width:4px;
  background:var(--accent-soft);
}
.levertijd--bedrukt .levertijd__kop{color:var(--accent-ink);font-weight:600}

/* winkelwagen en afrekenen */
.cart-levertijd{
  font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.06em;
  color:var(--ink-2);
}
.cart-levertijd--bedrukt{
  color:var(--accent-ink);font-weight:600;
}
.woocommerce td.product-name dl.variation dt{
  font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);font-weight:500;margin:.3rem 0 0;
}
.woocommerce td.product-name dl.variation dd{margin:0 0 .2rem}
tr.levertijd-rij th{
  font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);font-weight:500;
}
tr.levertijd-rij td small{
  display:block;font-family:var(--f-text);font-size:var(--t2);
  color:var(--ink-3);margin-top:.25rem;
}

/* ==========================================================================
   27. SECTORBLOK — Defensie als hoofdmoot op /sectoren/
   ========================================================================== */

.sectorhero{
  border:1.5px solid var(--accent);
  border-left-width:5px;
  background:var(--accent-soft);
  padding:var(--sp6) var(--sp6) var(--sp6) var(--sp6);
}
.sectorhero__t{
  font-family:var(--f-ui);font-weight:800;
  font-size:clamp(1.7rem,3.6vw,var(--t8));
  letter-spacing:-.03em;line-height:1.02;margin:0 0 var(--sp3);color:var(--ink);
}
.sectorhero__d{
  font-family:var(--f-text);font-size:var(--t5);line-height:1.55;
  color:var(--ink-2);max-width:60ch;margin:0;
}
.sectorhero__cijfers{
  display:flex;flex-wrap:wrap;gap:0;margin-top:var(--sp5);
  border-top:1px solid var(--accent);padding-top:var(--sp4);
}
.sectorhero__cijfers div{margin-right:var(--sp7);padding-bottom:var(--sp2)}
.sectorhero__cijfers b{
  display:block;font-family:var(--f-ui);font-weight:800;font-size:var(--t7);
  line-height:1;letter-spacing:-.03em;color:var(--accent-ink);
}
.sectorhero__cijfers span{
  display:block;font-family:var(--f-mono);font-size:var(--t1);
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin-top:.35rem;
}
@media(max-width:820px){
  .sectorhero{padding:var(--sp5)}
  .sectorhero__cijfers div{margin-right:var(--sp5)}
  .sectorhero .btn{width:100%}
}

/* ==========================================================================
   28. PLAKKENDE KOP — compleet blijven, compacter worden
   Eerder plakte alleen .header, waardoor je bij scrollen een halve
   zoekbalk zag en geen menu meer. Nu plakt de hele kop (balk, zoeken,
   menu) als één geheel en krimpt hij zodra je scrolt.
   ========================================================================== */

.header{position:static}          /* was sticky; dat doet .sitehead nu */

.sitehead{
  position:sticky;top:0;z-index:80;
  background:var(--paper);
  transition:box-shadow .2s ease;
}
.sitehead::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--accent) 0%,var(--accent) 22%,transparent 22%);
  transform:scaleX(0);transform-origin:left;transition:transform .35s ease;
}
.sitehead.is-stuck{box-shadow:0 4px 18px rgba(11,32,39,.10)}
.sitehead.is-stuck::after{transform:scaleX(1)}

/* Gekrompen staat: bovenbalk weg, logo kleiner, minder hoogte. Alles
   blijft zichtbaar — dat was de klacht. */
.sitehead.is-stuck .topbar{
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .22s ease,opacity .16s ease;
}
.topbar{
  max-height:60px;opacity:1;
  transition:max-height .22s ease,opacity .2s ease;
}
.sitehead.is-stuck .header__in{min-height:60px;transition:min-height .2s ease}
.sitehead.is-stuck .logo__img,
.sitehead.is-stuck .logo img{max-height:38px;transition:max-height .2s ease}
.sitehead.is-stuck .nav a{padding-top:.55rem;padding-bottom:.55rem;transition:padding .2s ease}
.header__in{transition:min-height .2s ease}
.logo__img,.logo img{transition:max-height .2s ease}

/* Kruimelpad plakt niet mee: dat hoort bij de pagina, niet bij de kop. */
.crumb{position:relative;z-index:1}

@media(max-width:900px){
  .sitehead.is-stuck .search-mob{
    max-height:0;overflow:hidden;opacity:0;padding-block:0;border-top:0;
    transition:max-height .2s ease,opacity .15s ease,padding .2s ease;
  }
  .search-mob{max-height:80px;opacity:1;transition:max-height .2s ease,opacity .2s ease}
}

/* ==========================================================================
   29. 3D-SLIDER — nieuwe producten
   Coverflow met echte CSS-3D, zonder bibliotheek. Draait automatisch,
   stopt bij hover en bij toetsenbordfocus, en staat helemaal stil als de
   bezoeker minder beweging heeft ingesteld.
   ========================================================================== */

.slider3d{
  position:relative;
  perspective:1400px;
  perspective-origin:50% 45%;
  height:clamp(320px,42vw,460px);
  display:flex;align-items:center;justify-content:center;
  transform-style:preserve-3d;
  user-select:none;
}
.slider3d__stage{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
}
.slider3d__item{
  position:absolute;top:50%;left:50%;
  width:clamp(190px,22vw,260px);
  margin:0;
  transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.22,.7,.25,1),opacity .45s ease,filter .45s ease;
  will-change:transform,opacity;
}
.slider3d__card{
  display:flex;flex-direction:column;
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:0 12px 34px rgba(11,32,39,.13);
  overflow:hidden;
}
.slider3d__media{aspect-ratio:1/1;overflow:hidden;background:var(--paper-2)}
.slider3d__media img{width:100%;height:100%;object-fit:cover;display:block}
.slider3d__body{padding:.8rem .9rem 1rem;display:flex;flex-direction:column;gap:.35rem}
.slider3d__desig{
  font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.11em;
  text-transform:uppercase;color:var(--accent-ink);
}
.slider3d__naam{
  font-family:var(--f-ui);font-weight:700;font-size:var(--t3);line-height:1.25;
  letter-spacing:-.01em;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.slider3d__prijs{
  font-family:var(--f-mono);font-size:var(--t4);font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--ink);
}

/* Alleen het middelste item is klikbaar en scherp. */
.slider3d__item[data-pos="0"]{z-index:5}
.slider3d__item:not([data-pos="0"]) .slider3d__card{pointer-events:none}
.slider3d__item:not([data-pos="0"]){filter:saturate(.7)}

/* vlag op het voorste item */
.slider3d__flag{
  position:absolute;top:.6rem;left:.6rem;z-index:2;
  background:var(--accent);color:var(--ink);
  font-family:var(--f-mono);font-size:9px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;padding:.22rem .45rem;line-height:1;
}

/* bediening */
.slider3d__nav{
  position:absolute;bottom:-.2rem;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:.4rem;z-index:10;
}
.slider3d__btn{
  width:44px;height:44px;display:grid;place-items:center;
  border:1.5px solid var(--line-2);background:var(--surface);color:var(--ink);
  transition:background .15s,border-color .15s,color .15s;
}
.slider3d__btn:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.slider3d__dots{display:flex;gap:.3rem;padding:0 .5rem}
.slider3d__dot{
  width:8px;height:8px;background:var(--line-2);border:0;padding:0;
  transition:background .2s,transform .2s;
}
.slider3d__dot.is-on{background:var(--accent);transform:scale(1.4)}

@media(max-width:820px){
  .slider3d{height:clamp(280px,86vw,360px);perspective:900px}
  .slider3d__item{width:clamp(160px,52vw,220px)}
}

@media(prefers-reduced-motion:reduce){
  .slider3d__item{transition:none}
  .sitehead::after{transition:none}
}

/* ==========================================================================
   30. ANIMATIE — terughoudend, en alleen waar het iets toevoegt
   ========================================================================== */

/* Secties komen zachtjes in beeld bij scrollen. */
[data-reveal]{
  opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,.7,.25,1);
}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal][data-reveal-delay="1"]{transition-delay:.06s}
[data-reveal][data-reveal-delay="2"]{transition-delay:.12s}
[data-reveal][data-reveal-delay="3"]{transition-delay:.18s}

/* Productkaart: beeld licht inzoomen, kaart iets optillen. */
.prod{transition:background .15s ease,box-shadow .22s ease,transform .22s ease}
.prod:hover{box-shadow:0 10px 26px rgba(11,32,39,.10);transform:translateY(-2px);z-index:2}

/* Eenheidskaart in het overzicht. */
.unitcard__main{transition:background .14s,border-color .14s,transform .18s ease}
.unitcard:hover{z-index:2}
.unitcard:hover .unitcard__main{transform:translateY(-2px)}

/* Knoppen: de pijl loopt al mee; hier alleen een subtiele indruk bij klik. */
.btn:active{transform:translateY(1px)}

/* Chips en aanduidingen. */
.chip,.desig{transition:background .14s,border-color .14s,color .14s}

/* De cyaan streep onder een sectiekop, van links opgebouwd. */
.sec__head{position:relative}
.sec--reveal .sec__head::after{
  content:"";position:absolute;left:0;bottom:-.9rem;height:3px;width:56px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.22,.7,.25,1) .1s;
}
.sec--reveal.is-in .sec__head::after{transform:scaleX(1)}

@media(prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  .prod:hover{transform:none}
  .unitcard:hover .unitcard__main{transform:none}
  .sec--reveal .sec__head::after{transition:none;transform:scaleX(1)}
}

/* ==========================================================================
   31. STAPPENBLOK — tekst plakte tegen de scheidingslijn
   .step had padding-left:0, terwijl er tussen de cellen een haarlijn zit.
   Daardoor stond de tekst er precies tegenaan.
   ========================================================================== */

.steps{
  gap:1px;
  background:var(--line);
  border-top:3px solid var(--accent);
  border-bottom:1px solid var(--line);
}
.step{
  background:var(--paper);
  padding:var(--sp5);
}
.step__n{
  display:block;
  margin-bottom:.8rem;
  color:var(--accent-ink);
  font-weight:600;
}
.step h4{margin:0 0 .45rem;line-height:1.2}
.step p{
  font-family:var(--f-text);
  font-size:var(--t3);
  line-height:1.55;
  color:var(--ink-2);
  margin:0;
  max-width:34ch;
}
/* Nummer als groot cijfer op de achtergrond: geeft de rij ritme zonder
   dat er een extra element bij komt. */
.step{position:relative;overflow:hidden}
.step::before{
  content:"";position:absolute;left:0;top:0;width:3px;height:0;
  background:var(--accent);transition:height .4s cubic-bezier(.22,.7,.25,1);
}
.step:hover::before{height:100%}

.sec--deep .steps{background:var(--line-deep);border-top-color:var(--accent);border-bottom-color:var(--line-deep)}
.sec--deep .step{background:var(--deep)}
.sec--deep .step p{color:var(--ink-on-deep-2)}
.sec--deep .step__n{color:var(--accent-bright)}

@media(max-width:820px){
  .step{padding:var(--sp4)}
  .step p{max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .step::before{transition:none}
}

/* ==========================================================================
   32. SCHERPTE — beperkt door het bronmateriaal
   De productfoto's zijn 600x600 pixels. WordPress schaalt niet op, dus
   alles wat groter dan 600 px wordt weergegeven is onvermijdelijk zachter.
   Op een retinascherm betekent dat: scherp tot ongeveer 300 CSS-pixels.
   Zolang er geen grotere bestanden zijn, houden we de weergave binnen die
   grens in plaats van te doen alsof er meer detail is.
   ========================================================================== */

/* Hoofdbeeld op de productpagina niet groter dan de bron aankan. */
.woocommerce-product-gallery{max-width:600px}
.woocommerce-product-gallery__image img{
  max-width:600px;
  image-rendering:auto;
}

/* will-change weggehaald: dat promoveert het element naar een eigen laag,
   die door sommige browsers op 1x wordt gerasterd en daarna geschaald —
   met zichtbaar verlies bij de 3D-transform. */
.slider3d__item{will-change:auto}

/* Alleen tijdens het schuiven een laag maken, daarna weer vrijgeven. */
.slider3d.is-moving .slider3d__item{will-change:transform,opacity}

/* Het middelste item krijgt geen filter, zodat het echt scherp blijft. */
.slider3d__item[data-pos="0"]{filter:none}

/* Kaartbreedte binnen de bronresolutie houden: 260 px bij 2x = 520,
   en dat past nog binnen 600. */
.slider3d__item{width:clamp(190px,20vw,260px)}

/* Filterlabels: naam links, aantal rechts, met ruimte ertussen. */
.facet label{
  display:flex;align-items:flex-start;gap:.5rem;
  padding:.28rem 0;line-height:1.35;
}
.facet label > span:first-of-type{flex:1;min-width:0}
.facet label span.c{
  margin-left:auto;flex:0 0 auto;
  font-family:var(--f-mono);font-size:var(--t1);color:var(--ink-3);
  padding-top:.1rem;font-variant-numeric:tabular-nums;
}
.facet input{margin-top:.22rem}
.facet__t{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.facet__t a{text-transform:none;letter-spacing:0}

/* =========================================================================
   33. LAGEN IN DE FILTERS, SNELKNOPPEN EN DE SLIDER IN DE HERO
   ========================================================================= */

/* --- Het pad terug naar boven in een facet ------------------------------ */
/* Zonder dit kruimelpad zit je vast: je kunt een laag in, maar niet terug.
   Het staat compact en in mono, zodat het leest als een systeemregel en niet
   met de keuzes eronder concurreert. */
.facet__pad{
  display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;
  margin:0 0 var(--sp3);padding:.4rem .55rem;
  background:var(--accent-soft);border-left:2px solid var(--accent);
  font-family:var(--f-mono);font-size:var(--t1);line-height:1.5;
}
.facet__pad a{color:var(--accent-ink);text-decoration:none;border-bottom:1px solid transparent}
.facet__pad a:hover{border-bottom-color:currentColor}
.facet__pad span{color:var(--ink-3)}
.facet__pad b{color:var(--ink);font-weight:700}

/* --- Kopje boven een groep soorten -------------------------------------- */
/* Textiel, Metaal, Textielinsignes en Overig zijn bakken, geen keuzes. Ze
   staan hier dus als label en niet als aankruisvakje. */
.facet__groep{
  margin:var(--sp3) 0 .3rem;
  font-family:var(--f-mono);font-size:var(--t0);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);
}
.facet__groep:first-of-type{margin-top:0}

/* Pijltje achter een keuze die zelf nog onderliggende keuzes heeft. */
.facet__dieper{
  font-style:normal;font-weight:700;color:var(--accent-ink);
  margin-left:.25rem;opacity:.75;
}
.facet--open .facet__t{color:var(--accent-ink)}

/* --- Snelknoppen naar de productsoort ----------------------------------- */
/* De eerste vraag is bijna altijd "wat voor ding zoek ik". Die hoort niet in
   een zijbalk die op mobiel dichtgeklapt staat, maar als knop boven de
   resultaten. */
.soortknoppen{
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;
  margin:0 0 var(--sp5);
}
.soortknoppen__t{
  font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-right:.35rem;
}
.soortknop{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.42rem .7rem;
  background:var(--surface,#fff);border:1px solid var(--line-2);
  font-family:var(--f-mono);font-size:var(--t1);font-weight:600;
  color:var(--ink);text-decoration:none;
  transition:border-color .14s,background .14s,transform .14s;
}
.soortknop b{
  font-weight:700;color:var(--ink-3);font-size:var(--t0);
  padding:.05rem .3rem;background:var(--paper-2);
}
.soortknop:hover{border-color:var(--accent);background:var(--accent-soft);transform:translateY(-1px)}
.soortknop:hover b{background:#fff;color:var(--accent-ink)}
.soortknop--aan{background:var(--deep);border-color:var(--deep);color:var(--ink-on-deep)}
.soortknop--aan b{background:var(--line-deep);color:var(--ink-on-deep)}
.soortknop--aan:hover{background:var(--deep-2);border-color:var(--deep-2)}

/* --- De slider rechtsboven in de eenheids-hero -------------------------- */
/* Naast de naam van de eenheid, want dat is waar het oog na de titel heen
   gaat en het is direct antwoord op de vraag waarmee iemand hier komt. */
.uhero__grid{align-items:center}
.uhero__slider{min-width:0}
.uhero__slider .eyebrow{margin:0 0 var(--sp3)}
.slider3d--hero{margin:0}
.slider3d--hero .slider3d__stage{height:340px}
.slider3d--hero .slider3d__nav{margin-top:var(--sp3)}

/* Het embleem klein bij de titel: herkenbaar, maar het vecht niet meer met
   de slider om dezelfde aandacht. */
.uhero__embleem{margin-bottom:var(--sp4);max-width:92px}
.uhero__embleem img{width:100%;height:auto;display:block}

@media (max-width:1024px){
  .uhero__grid{grid-template-columns:minmax(0,1fr) 320px}
  .slider3d--hero .slider3d__stage{height:300px}
}

@media (max-width:900px){
  /* Onder elkaar: eerst wie je bent, dan wat er te koop is. */
  .uhero__grid{grid-template-columns:1fr}
  .uhero__slider{order:2}
  .slider3d--hero .slider3d__stage{height:320px}
  .uhero__embleem{max-width:72px}
}

@media (max-width:640px){
  .soortknoppen{gap:.35rem}
  .soortknoppen__t{flex:1 1 100%;margin:0 0 .2rem}
  .soortknop{padding:.38rem .6rem}
  .slider3d--hero .slider3d__stage{height:280px}
}

/* =========================================================================
   34. HORIZONTALE OVERFLOW DICHTZETTEN

   De 3D-slider fant zijn kaarten met transforms tot ver buiten de kolom, en
   het schuifpaneel staat dichtgeklapt naast het scherm geparkeerd. Op een
   telefoon kun je daar allebei naartoe pannen, en dan lijkt de pagina alle
   kanten op te schuiven. `clip` snijdt dat af zonder een nieuwe
   scrollcontainer te maken — dat laatste zou de plakkende kop breken.
   ========================================================================= */
html,
body{max-width:100%;overflow-x:clip}

.slider3d{overflow-x:clip;overflow-y:visible}
/* Een beetje bloed naar boven en onder mag: daar zit de schaduw. */
@supports (overflow-clip-margin: 12px){
  .slider3d{overflow-clip-margin:12px}
}

/* Het dichtgeklapte paneel helemaal weghalen, niet alleen wegschuiven. */
.panel[aria-hidden="true"]{visibility:hidden}
.panel.is-open{visibility:visible}

/* =========================================================================
   35. MEGAMENU OP DESKTOP

   Twee tinten, niet één. De vorige versie was helemaal wit en dat werd een
   grijze vlakte waarin niets voorrang had. Nu staat er links een donkere
   kolom met waar je bent en wat je hier kunt doen, en rechts de witte
   kolommen met de inhoud. Dat is meteen te lezen als een lade die uit de
   donkere balk erboven schuift, en de cyaan lijn bovenaan verbindt de twee.

   In de kolomkoppen staat een echte patch uit die categorie in plaats van
   een getekend icoontje. Een ankertje bij Marine zegt niets over wat er te
   koop is; de patch van die eenheid wel.

   De aantallen zijn eruit. In een menu kies je daar niet op, en ze maakten
   elke regel twee kolommen breed waardoor de namen werden afgekapt.
   ========================================================================= */
.nav__item{position:relative;display:flex}
.nav__link{display:inline-flex;align-items:center;gap:.3rem}
.nav__pijl{opacity:.5;transition:transform .18s,opacity .18s}
.nav__item.is-open .nav__pijl{transform:rotate(180deg);opacity:1}

.mega{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  width:min(1180px,96vw);
  background:var(--surface,#fff);
  border-top:3px solid var(--accent);
  box-shadow:0 30px 60px -20px rgba(11,32,39,.35);
  z-index:60;
  color:var(--ink);
}
.mega[hidden]{display:none}
.nav__item.is-open .mega{animation:megaIn .16s ease-out}
@keyframes megaIn{from{opacity:0;transform:translateX(-50%) translateY(-8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

.mega__in{
  display:grid;grid-template-columns:266px minmax(0,1fr);
  gap:0;
  align-items:stretch;
  /* De zijkolom loopt tot de rand van het paneel door, dus de horizontale
     ruimte van .wrap zit hier per kolom in plaats van op het geheel. */
  padding:0;
}

/* --- De donkere zijkolom ---------------------------------------------- */
.mega__zij{
  background:var(--deep);
  color:var(--ink-on-deep);
  padding:var(--sp6) var(--sp5) var(--sp6) var(--gut);
  /* Een streep in de accentkleur die de zijkolom aan de balk vastknoopt. */
  box-shadow:inset -1px 0 0 var(--line-deep);
}
.mega__kop{
  margin:0 0 var(--sp3);
  font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;
  color:var(--accent-bright);
}
.mega__intro{
  margin:0 0 var(--sp5);
  font-family:var(--f-text);font-size:var(--t3);line-height:1.55;
  color:var(--ink-on-deep);opacity:.85;
}
.mega__actie{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.62rem .75rem;margin-bottom:.4rem;
  background:rgba(255,255,255,.06);
  border-left:3px solid var(--accent);
  font-family:var(--f-mono);font-size:var(--t1);font-weight:600;
  color:var(--ink-on-deep);text-decoration:none;
  transition:background .14s,transform .14s,color .14s;
}
.mega__actie:hover{
  background:var(--accent);color:var(--deep);
  transform:translateX(3px);
}
.mega__actie .btn__arrow{flex:0 0 auto}

/* --- De kolommen met inhoud ------------------------------------------- */
.mega__kolommen{
  display:grid;
  grid-template-columns:repeat(var(--mega-kol,4),minmax(0,1fr));
  gap:var(--sp5) var(--sp6);
  padding:var(--sp6) var(--gut) var(--sp6) var(--sp6);
  align-content:start;
}
.mega__kol{min-width:0}

.mega__kolkop{
  display:flex;align-items:center;gap:.6rem;
  margin:0 0 .55rem;padding-bottom:.5rem;
  border-bottom:1px solid var(--line);
  font-weight:700;font-size:var(--t3);line-height:1.15;
  color:var(--ink);text-decoration:none;
  letter-spacing:-.01em;
}
.mega__kolnaam{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.mega__kolkop:hover{color:var(--accent-ink);border-bottom-color:var(--accent)}
a.mega__kolkop:hover .beeldmerk{border-color:var(--accent)}
.mega__kolkop--plat{
  color:var(--ink-3);font-weight:600;
  font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.1em;
  text-transform:uppercase;
  min-height:calc(44px + .5rem);
  align-items:flex-end;
}

/* --- Het beeldmerk: een echte patch ------------------------------------ */
.beeldmerk{
  flex:0 0 auto;
  display:block;
  width:var(--bm,40px);height:var(--bm,40px);
  border:1px solid var(--line-2);
  background:var(--paper-2);
  overflow:hidden;
  transition:border-color .14s;
}
.beeldmerk img{
  width:100%;height:100%;
  object-fit:cover;display:block;
}
.beeldmerk--leeg{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:var(--t1);font-weight:700;
  color:var(--ink-3);letter-spacing:.04em;
}

/* --- De lijst eronder -------------------------------------------------- */
.mega__lijst{list-style:none;margin:0;padding:0}
.mega__lijst li{margin:0}
.mega__lijst a{
  display:block;
  padding:.3rem .4rem .3rem .55rem;
  font-size:var(--t2);line-height:1.4;
  color:var(--ink-2);text-decoration:none;
  border-left:2px solid transparent;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:color .12s,border-color .12s,background .12s;
}
.mega__lijst a:hover{
  color:var(--accent-ink);background:var(--accent-soft);
  border-left-color:var(--accent);
}
.mega__meer{
  font-family:var(--f-mono);font-size:var(--t1);
  color:var(--accent-ink);font-weight:600;
}

@media (max-width:1180px){
  .mega{width:98vw}
  .mega__in{grid-template-columns:220px minmax(0,1fr)}
  .mega__kolommen{grid-template-columns:repeat(min(var(--mega-kol,4),3),minmax(0,1fr));gap:var(--sp4) var(--sp5)}
  .mega__zij{padding:var(--sp5) var(--sp4)}
}

@media (max-width:900px){
  /* Op mobiel bestaat de tabbalk niet; daar neemt het paneel het over. */
  .nav__item .mega{display:none !important}
}

@media (min-width:901px){
  /* Het paneel hangt aan de balk, niet aan het menu-item. Een item van
     tachtig pixels breed met een paneel van 1180 erin gecentreerd komt op
     -483px uit: netjes buiten beeld.

     En .nav__in heeft overflow-x:auto voor de schuifbare tabbalk op smalle
     schermen. Een overflowcontainer sluit ook een absoluut gepositioneerd
     kind op, dus daar moet hij hier weer uit. */
  .nav{position:relative}
  .nav__in{overflow:visible}
  .nav__item{position:static}

  .mega{
    left:0;right:0;width:auto;transform:none;
    /* Past niet altijd op een laptopscherm; dan mag hij scrollen in plaats
       van onder de vouw te verdwijnen. */
    max-height:calc(100vh - 180px);
    overflow-y:auto;overscroll-behavior:contain;
  }
  @keyframes megaIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
}

/* =========================================================================
   36. HET MOBIELE PANEEL MET LAGEN

   Eén lijst per keer. Tikken schuift de volgende laag eroverheen, links
   bovenin komt een terugknop met de naam van de laag waar je vandaan komt.
   Zo kom je in drie tikken bij je eigen bataljon in plaats van door een
   accordeon van duizend regels te scrollen.

   Het paneel is licht, net als de rest van de site. Belangrijk detail: de
   bestaande regel `.panel a, .panel summary` zet op elke link in het paneel
   een gutterpadding en een onderrand. Die generieke regel moet voor de
   nieuwe rijen teruggedraaid worden, anders krijgt het pijltje rechts een
   halve schermbreedte aan padding mee.
   ========================================================================= */
@media (max-width:900px){

  /* De horizontale ruimte zit nu op het lichaam, niet meer per regel. Zo
     kunnen de rij en het pijltje ernaast één doorlopende lijn delen. */
  .panel__body{
    position:relative;
    overflow-x:clip;
    padding-inline:var(--gut);
  }

  /* --- De kop van het paneel ------------------------------------------- */
  .panel__top{
    display:grid;grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;gap:.5rem;
  }
  .panel__terug{
    display:inline-flex;align-items:center;gap:.15rem;
    padding:.35rem .45rem .35rem .1rem;margin:0;
    background:none;border:0;
    font-family:var(--f-mono);font-size:var(--t1);font-weight:700;
    letter-spacing:.04em;
    color:var(--accent-ink);cursor:pointer;
    max-width:9.5rem;
  }
  .panel__terug[hidden]{display:none}
  .panel__terug span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .panel__terug:active{color:var(--ink)}

  .panel__titel{
    font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.12em;
    text-transform:uppercase;color:var(--ink-2);font-weight:600;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    text-align:center;
  }
  /* Zonder terugknop staat de titel links, net als eerst. */
  .panel__terug[hidden] + .panel__titel{text-align:left;color:var(--ink-3)}

  /* --- De pagina's ----------------------------------------------------- */
  .mpage{display:none}
  .mpage.is-actief{display:block}
  .mpage[hidden]{display:none}
  .mpage.komt-rechts{animation:mpageRechts .2s ease-out}
  .mpage.komt-links{animation:mpageLinks .2s ease-out}
  @keyframes mpageRechts{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
  @keyframes mpageLinks{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}

  /* --- De rij naar de laag eronder ------------------------------------- */
  /* Twee raakvlakken op één regel: de naam opent de laag eronder, het
     pijltje rechts gaat naar de pagina zelf. Zonder dat tweede kun je nooit
     bij Landmacht zelf komen, omdat de tik altijd een laag dieper springt. */
  .mrij{
    display:flex;align-items:stretch;
    border-bottom:1px solid var(--line);
  }
  .panel .mrij__diep{
    flex:1 1 auto;min-width:0;
    display:flex;align-items:center;gap:.55rem;
    padding:.95rem .3rem .95rem 0;margin:0;
    background:none;border:0;
    font-family:var(--f-ui);font-size:var(--t3);font-weight:700;
    color:var(--ink);text-align:left;cursor:pointer;
    min-height:52px;
  }
  .mrij__diep > span:first-child{
    flex:1 1 auto;min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .panel .mrij__diep:active{color:var(--accent-ink)}
  .mrij__pijl{flex:0 0 auto;opacity:.4;color:var(--ink-2)}

  /* De generieke .panel a-regel teruggedraaid voor deze twee. */
  .panel .mrij__direct{
    flex:0 0 auto;
    display:flex;align-items:center;justify-content:center;
    width:3rem;padding:0;margin:0;
    border:0;border-left:1px solid var(--line);
    color:var(--accent-ink);
    min-height:52px;
  }
  .panel .mrij__direct:active{background:var(--accent-soft)}

  .panel .mrij__plat{
    display:flex;align-items:center;gap:.55rem;
    padding:.95rem 0;margin:0;
    border:0;border-bottom:1px solid var(--line);
    font-family:var(--f-ui);font-size:var(--t3);font-weight:700;
    color:var(--ink);
    min-height:52px;
  }
  .mrij__plat > span:first-child{
    flex:1 1 auto;min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .panel .mrij__plat:active{color:var(--accent-ink)}

  .mrij__kop{
    margin:var(--sp4) 0 .15rem;
    font-family:var(--f-mono);font-size:var(--t0);letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink-3);
  }

  .mrij .c,
  .mrij__plat .c{
    flex:0 0 auto;
    font-family:var(--f-mono);font-size:var(--t1);font-weight:400;
    color:var(--ink-3);
    font-variant-numeric:tabular-nums;
  }

  /* --- De snelkoppeling naar de overzichtspagina ----------------------- */
  .panel .mpage__alles{
    display:flex;align-items:center;justify-content:space-between;gap:.5rem;
    padding:.75rem .8rem;margin:var(--sp3) 0;
    background:var(--accent-soft);
    border:0;border-left:3px solid var(--accent);
    font-family:var(--f-mono);font-size:var(--t1);font-weight:700;
    letter-spacing:.04em;
    color:var(--accent-ink);
    min-height:auto;
  }

  /* De zwevende winkelmand van Modern Cart valt over de knop onderin het
     paneel. Zolang het menu open staat hoort hij weg te zijn. */
  body.panel-open #moderncart-floating-cart{display:none}
}

@media (prefers-reduced-motion:reduce){
  .mpage.komt-rechts,.mpage.komt-links{animation:none}
  .nav__item.is-open .mega{animation:none}
}

/* =========================================================================
   37. DE PRIJS

   WooCommerce zet in zijn eigen stylesheet een mosterdgroene kleur op
   div.product p.price. Die past bij niets hier, dus overschrijven we hem —
   met een selector die specifiek genoeg is om te winnen zonder !important.
   ========================================================================= */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce div.product p.price .woocommerce-Price-amount,
.woocommerce div.product span.price .woocommerce-Price-amount,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price .woocommerce-Price-amount{
  color:var(--ink);
}

/* De actieprijs mag opvallen, de oude prijs hoort weg te vallen. */
.woocommerce div.product p.price ins,
.woocommerce div.product p.price ins .woocommerce-Price-amount,
.woocommerce ul.products li.product .price ins,
.woocommerce ul.products li.product .price ins .woocommerce-Price-amount{
  color:var(--alarm);text-decoration:none;font-weight:700;
}
.woocommerce div.product p.price del,
.woocommerce div.product p.price del .woocommerce-Price-amount,
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price del .woocommerce-Price-amount{
  color:var(--ink-3);font-weight:400;
}

/* =========================================================================
   39. DE ZWEVENDE WINKELMAND VAN MODERN CART

   Die knop rechtsonder komt niet uit dit thema maar uit de plugin Modern
   Cart. Die zet zijn eigen kleuren via CSS-variabelen: een hemelsblauwe
   knop (#0284C7) met een smaragdgroen aantalbolletje (#10B981). Dat zijn
   allebei kleuren die hier nergens voorkomen.

   Deze variabelen zijn ook in de instellingen van Modern Cart zelf te
   wijzigen (WooCommerce > Modern Cart). Ze hier overschrijven zorgt dat de
   mand meeloopt met de huisstijl zonder dat iemand daar iets hoeft te doen.
   Wil Patrick het later zelf regelen: haal dit blok weg, dan winnen de
   plugininstellingen weer.
   ========================================================================= */
:root,
#moderncart-floating-cart,
#moderncart-slide-out-modal,
.moderncart-container{
  --moderncart-highlight-color:#00ADBA;
  --moderncart-highlight-color-light:#00ADBA1F;
  --moderncart-button-font-color:#FFFFFF;
  --moderncart-header-font-color:#0B2027;
  --moderncart-quantity-font-color:#0B2027;
}

/* De knop zelf staat op een vaste kleur in de plugin-CSS, niet op een
   variabele. Daarom hier expliciet. */
.moderncart-floating-cart-button{
  background:var(--deep);
  color:var(--paper);
  border:1px solid var(--line-deep);
  transition:background .15s,transform .15s;
}
.moderncart-floating-cart-button:hover{background:var(--deep-2);transform:translateY(-2px)}

/* Het aantalbolletje: cyaan met donkere cijfers. #00ADBA haalt op wit maar
   2,7:1 en zakt dus door de leesbaarheidsgrens als tekstkleur — als vlak
   met donkere cijfers erop komt hij op 7,8:1 uit en klopt het wel. */
.moderncart-floating-cart-count{
  background:var(--accent);
  color:var(--deep);
  font-weight:700;
}
.moderncart-floating-cart-count span{color:var(--deep)}

/* =========================================================================
   40. DE INDELING VAN DE MENUBALK
   De opmaak van het zoekveld zelf staat in blok 45.
   ========================================================================= */
/* --- De indeling van de balk ------------------------------------------- */
/* Eerst waar je iets kunt kopen en zoeken, dan de verhalen eromheen. En
   Maatwerk als aparte knop rechts, want dat is een andere soort actie dan
   "ergens naartoe navigeren". */
@media (min-width:901px){
  .nav__in{gap:0}

  .nav__item--rechts{margin-left:auto}
  .nav__link--rechts{margin-left:auto}

  /* Een scheidingslijn vóór het rechterblok, zodat het oog ziet dat hier
     iets anders begint.

     De lijn hangt aan de LINK en niet aan het menu-item, en dat is geen
     smaakkwestie. Een item met position:relative wordt het ankerpunt voor
     het paneel eronder, en dan werd het maatwerkpaneel 144 pixels breed
     (zo breed als de knop) met een schuifbalk erin. Alle andere panelen
     hangen aan de balk en zijn 1180 breed. */
  .nav__item--rechts{padding-left:var(--sp4)}
  .nav__item--rechts > .nav__link{position:relative}
  .nav__item--rechts > .nav__link::before{
    content:"";
    position:absolute;left:calc(-1 * var(--sp4));top:22%;bottom:22%;
    width:1px;background:var(--line);
  }

  /* Maatwerk krijgt vulling in plaats van alleen een kleurtje. #00ADBA
     haalt op wit maar 2,7:1 en zakt daarmee door de leesbaarheidsgrens als
     tekstkleur — als vlak met donkere tekst erop komt hij op 7,8:1 uit. */
  .nav__item--rechts > .nav__link.is-accent{
    background:var(--accent);
    color:var(--deep);
    font-weight:700;
    padding-inline:1rem;
    margin-block:.42rem;
    transition:background .15s,transform .15s;
  }
  .nav__item--rechts > .nav__link.is-accent:hover{
    background:var(--accent-bright);
    transform:translateY(-1px);
  }
  .nav__item--rechts.is-open > .nav__link.is-accent{background:var(--accent-bright);color:var(--deep)}
  .nav__item--rechts > .nav__link.is-accent .nav__pijl{opacity:.75}
}

@media (max-width:900px){
  /* Op mobiel staat er maar één regel kop; daar heeft het vergrootglas
     geen ruimte naast de plaatsaanduiding. */
  .search-mob .search:not(body)::before{width:2.2rem}
}

/* =========================================================================
   41. DE MAATWERKPAGINA

   Dit is de pagina waar de omzet vandaan moet komen, dus hij mag ruimte
   innemen. Drie kaarten met wat we maken, drie staffeltabellen met wat het
   kost, vijf stappen met hoe het gaat.

   De prijzen komen uit dezelfde tabel als de calculator. Daarom zijn ze
   opgemaakt met tabelcijfers: als de cijfers onder elkaar niet uitlijnen
   leest een prijstabel als een rommeltje, ook als de getallen kloppen.
   ========================================================================= */

/* --- Losse tekstonderdelen die op meer pagina's terugkomen ------------- */
.lead{
  font-family:var(--f-text);font-size:var(--t4);line-height:1.6;
  color:var(--ink-2);margin:0 0 var(--sp5);
}
.link{
  display:inline-block;margin-top:.6rem;
  font-family:var(--f-mono);font-size:var(--t1);font-weight:600;
  color:var(--accent-ink);text-decoration:none;
  border-bottom:1px solid transparent;
}
.link:hover{border-bottom-color:currentColor}

/* --- De drie routes ---------------------------------------------------- */
.routes{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp5);
}
.route{
  display:flex;flex-direction:column;
  background:var(--surface,#fff);
  border:1px solid var(--line);
  border-top:3px solid var(--accent);
  padding:var(--sp5);
  /* Zodat het ankerpunt uit het menu niet onder de plakkende kop landt. */
  scroll-margin-top:170px;
}
.route__ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:3rem;height:3rem;margin-bottom:var(--sp4);
  background:var(--accent-soft);border:1px solid var(--accent);
  color:var(--accent-ink);
}
.route__t{
  margin:0 0 .2rem;
  font-size:var(--t6);letter-spacing:-.02em;line-height:1.15;
}
.route__wat{
  margin:0 0 var(--sp3);
  font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);
}
.route__d{
  margin:0 0 var(--sp4);
  font-family:var(--f-text);font-size:var(--t3);line-height:1.55;color:var(--ink-2);
}
.route__punten{
  list-style:none;margin:0 0 var(--sp4);padding:0;
}
.route__punten li{
  position:relative;padding-left:1.25rem;margin-bottom:.4rem;
  font-family:var(--f-text);font-size:var(--t2);line-height:1.45;color:var(--ink-2);
}
.route__punten li::before{
  content:"";
  position:absolute;left:0;top:.55em;
  width:.5rem;height:.5rem;
  background:var(--accent);
}

.route__cijfers{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.5rem;
  margin:0 0 var(--sp4);padding-top:var(--sp4);
  border-top:1px solid var(--line);
}
.route__cijfers div{min-width:0}
.route__cijfers dt{
  font-family:var(--f-mono);font-size:var(--t0);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.2rem;
}
.route__cijfers dd{
  margin:0;
  font-family:var(--f-mono);font-size:var(--t2);font-weight:700;
  color:var(--ink);font-variant-numeric:tabular-nums;
  line-height:1.25;
}

/* De knop onderaan altijd op dezelfde hoogte, ook als de ene kaart een
   regel meer tekst heeft dan de andere. */
.route > .btn{margin-top:auto;align-self:flex-start}

/* --- De staffeltabellen ------------------------------------------------ */
.staffels{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp5);
}
.staffel{
  background:var(--surface,#fff);
  border:1px solid var(--line);
  padding:var(--sp4);
}
.staffel__t{
  display:flex;align-items:center;gap:.45rem;
  margin:0 0 var(--sp3);padding-bottom:.5rem;
  border-bottom:2px solid var(--line-2);
  font-weight:700;font-size:var(--t3);
}
.staffel__tabel{
  width:100%;border-collapse:collapse;
  font-family:var(--f-mono);font-size:var(--t2);
  font-variant-numeric:tabular-nums;
}
.staffel__tabel thead th{
  text-align:left;padding:.3rem 0;
  font-size:var(--t0);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;
  border-bottom:1px solid var(--line);
}
.staffel__tabel thead th:last-child,
.staffel__tabel td{text-align:right}
.staffel__tabel tbody th{
  text-align:left;padding:.42rem 0;
  font-weight:400;color:var(--ink-2);
}
.staffel__tabel td{padding:.42rem 0;font-weight:700;color:var(--ink)}
.staffel__tabel tbody tr + tr th,
.staffel__tabel tbody tr + tr td{border-top:1px solid var(--paper-2)}
/* De onderste trede is de scherpste prijs; die mag je zien. */
.staffel__tabel tbody tr:last-child td{color:var(--accent-ink)}

/* --- De vijf stappen --------------------------------------------------- */
.stappen{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:var(--sp4);
  counter-reset:none;
}
.stappen .step{
  background:var(--paper);
  padding:var(--sp5) var(--sp4);
  border-top:2px solid var(--line-2);
}
.stappen .step:first-child{border-top-color:var(--accent)}
.step__t{
  margin:0 0 .35rem;
  font-size:var(--t3);line-height:1.25;letter-spacing:-.01em;
}
.step__d{
  margin:0;
  font-family:var(--f-text);font-size:var(--t2);line-height:1.5;color:var(--ink-2);
}

/* --- De vragenlijst ---------------------------------------------------- */
.faq{margin-top:var(--sp5)}
.faq details{
  border-bottom:1px solid var(--line);
}
.faq summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;
  padding:var(--sp4) 0;
  font-weight:700;font-size:var(--t3);line-height:1.35;
  color:var(--ink);cursor:pointer;
  list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";
  flex:0 0 auto;
  font-family:var(--f-mono);font-size:var(--t5);font-weight:400;
  line-height:1;color:var(--accent-ink);
}
.faq details[open] summary::after{content:"\2212"}
.faq details[open] summary{color:var(--accent-ink)}
.faq details p{
  margin:0 0 var(--sp4);
  max-width:66ch;
  font-family:var(--f-text);font-size:var(--t3);line-height:1.6;color:var(--ink-2);
}

/* --- Projectkaarten op deze pagina ------------------------------------- */
.prod__excerpt{
  margin:.4rem 0 0;
  font-family:var(--f-text);font-size:var(--t2);line-height:1.5;color:var(--ink-2);
}

@media (max-width:1024px){
  .routes,.staffels{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stappen{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:720px){
  .routes,.staffels{grid-template-columns:1fr}
  .stappen{grid-template-columns:1fr}
  .route__cijfers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .route > .btn{align-self:stretch;text-align:center}
  .lead{font-size:var(--t3)}
}

/* =========================================================================
   42. HET MEGAMENU WINT VAN DE BALKREGELS

   `.nav a` zet alle links in de balk op var(--ink-2), en dat heeft een
   hogere specificiteit dan `.mega__actie`. Gevolg: donkergrijze tekst op de
   donkerblauwe zijkolom, vrijwel onleesbaar. Hier staan dezelfde regels
   nog een keer maar dan wel onder `.nav`, zodat ze het wel winnen.

   Dit hoort eigenlijk in blok 35, maar dan zouden de selectors daar allemaal
   twee keer zo lang worden voor één uitzondering. Zo blijft dat blok leesbaar
   en staat de reden hier opgeschreven.
   ========================================================================= */
.nav .mega__actie{
  color:var(--ink-on-deep);
  /* De labels zijn soms langer dan de zijkolom breed is. Laten aflopen in
     plaats van over de rand heen duwen. */
  align-items:flex-start;
  line-height:1.35;
  text-wrap:pretty;
}
.nav .mega__actie > span:first-child{
  flex:1 1 auto;min-width:0;
}
.nav .mega__actie .btn__arrow{margin-top:.1rem}
.nav .mega__actie:hover{color:var(--deep)}

.nav .mega__kolkop{color:var(--ink)}
.nav a.mega__kolkop:hover{color:var(--accent-ink)}
.nav .mega__kolkop--plat{color:var(--ink-3)}

.nav .mega__lijst a{color:var(--ink-2)}
.nav .mega__lijst a:hover{color:var(--accent-ink)}
.nav .mega__meer{color:var(--accent-ink)}

/* =========================================================================
   43. FILTEREN OP MOBIEL

   Wat er stond: `.shop__facets{display:none}` onder de 900 pixels. Daarmee
   was de helft van de shop op een telefoon onbereikbaar. Je kon alleen nog
   de snelknoppen bovenaan gebruiken en verder niets.

   Nu is het dezelfde zijbalk, maar op mobiel als lade die van rechts over
   de resultaten schuift. Dezelfde HTML, dezelfde facetten, dezelfde
   afhankelijke tellingen. Onderin staat vast hoeveel producten er nog over
   zijn, want dat is de vraag die je stelt terwijl je aan het filteren bent.
   ========================================================================= */

/* Op desktop bestaan de lade-onderdelen niet. */
.facets__top,
.facets__voet,
.facetscrim,
.filterknop{display:none}

@media (max-width:900px){

  .filterknop{
    display:inline-flex;align-items:center;gap:.5rem;
    margin:0 0 var(--sp4);padding:.7rem 1rem;
    background:var(--deep);border:0;
    font-family:var(--f-mono);font-size:var(--t2);font-weight:700;
    letter-spacing:.06em;text-transform:uppercase;
    color:var(--paper);cursor:pointer;
  }
  .filterknop:active{background:var(--deep-2)}
  .filterknop__n{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:1.4rem;height:1.4rem;padding:0 .3rem;
    background:var(--accent);color:var(--deep);
    font-size:var(--t1);
  }

  .facetscrim{
    display:block;
    position:fixed;inset:0;
    background:rgba(11,32,39,.55);
    z-index:190;
    opacity:0;pointer-events:none;
    transition:opacity .2s ease;
  }
  .facetscrim.is-open{opacity:1;pointer-events:auto}

  /* De lade zelf. Belangrijk: display:flex in plaats van het oude
     display:none, anders is er niets om open te schuiven. */
  .shop__facets{
    display:flex;flex-direction:column;
    position:fixed;inset:0 0 0 auto;
    width:min(90vw,400px);
    background:var(--paper);
    z-index:200;
    transform:translateX(101%);
    transition:transform .22s ease;
    box-shadow:-8px 0 30px rgba(11,32,39,.2);
    visibility:hidden;
  }
  .shop__facets.is-open{transform:translateX(0);visibility:visible}

  .facets__top{
    display:flex;align-items:center;justify-content:space-between;
    padding:.7rem var(--gut);
    border-bottom:1px solid var(--line);
    min-height:54px;flex:0 0 auto;
  }
  .facets__top span{
    font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink-3);
  }

  .facets__body{
    flex:1 1 auto;overflow-y:auto;
    padding:var(--sp4) var(--gut) var(--sp6);
    overscroll-behavior:contain;
  }

  .facets__voet{
    flex:0 0 auto;
    display:flex;align-items:center;gap:var(--sp4);
    padding:var(--sp4) var(--gut);
    border-top:1px solid var(--line);
    background:var(--surface,#fff);
  }
  .facets__voet .btn{flex:1 1 auto;justify-content:center;text-align:center}
  .facets__wis{
    flex:0 0 auto;
    font-family:var(--f-mono);font-size:var(--t1);font-weight:600;
    color:var(--ink-3);text-decoration:none;
    border-bottom:1px solid transparent;
  }
  .facets__wis:hover{color:var(--alarm);border-bottom-color:currentColor}

  /* De facetten zelf mogen op een telefoon wat ruimer, want je tikt met
     een duim en niet met een muispijl. */
  .shop__facets .facet label{min-height:44px}

  /* Zolang de lade openstaat mag de pagina eronder niet meescrollen, en
     moet de zwevende winkelmand niet over de knop onderin vallen. */
  body.filters-open{overflow:hidden}
  body.filters-open #moderncart-floating-cart{display:none}
}

/* =========================================================================
   44. DE KOP OP MOBIEL RECHT ZETTEN

   Drie dingen stonden scheef.

   De knoppen rechts stonden niet rechts. `.header__in` had op mobiel
   `grid-template-columns:auto auto`, dus de tweede kolom werd zo breed als
   zijn inhoud en plakte tegen het logo aan. Daardoor stonden account,
   mand en hamburger ergens in het midden van het scherm te zweven met een
   gat van dertig pixels tot de rand.

   De balk bovenaan liep het scherm uit. Vier mededelingen naast elkaar
   passen niet op 375 pixels, dus stond er "VERZENDING VIA PO" en dan hield
   het op. Op een telefoon is er ruimte voor precies één mededeling, en dat
   moet de levertijd zijn, want dat is de enige die per week verandert.

   En de raakvlakken waren te klein en te dicht op elkaar. Op een
   aanraakscherm hoort daar minstens 44 pixels tussen te zitten.
   ========================================================================= */
@media (max-width:820px){

  /* Logo links, knoppen rechts, en de ruimte ertussen mag oprekken. */
  .header__in{
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    column-gap:var(--sp4);
  }
  .header__acts{
    justify-self:end;
    gap:.15rem;
  }
  .header__acts .iconbtn,
  .header__acts .navtoggle{
    width:44px;height:44px;
    display:inline-flex;align-items:center;justify-content:center;
    padding:0;
  }
  /* Het telbolletje op de mand mag niet buiten de knop vallen. */
  .header__acts .iconbtn{position:relative}

  /* Het logo krijgt een vaste hoogte zodat de rij niet meebeweegt met de
     hoogte van de afbeelding. */
  .logo{flex:0 0 auto}
  .logo__img,.logo img{max-height:32px;width:auto;display:block}

  /* Eén mededeling, gecentreerd, en de rest verbergen. Horizontaal kunnen
     schuiven in een balk van vier regels tekst leest niemand toch. */
  .topbar__in{
    justify-content:center;
    gap:0;
    overflow:visible;
    padding-block:.25rem;
  }
  .topbar__in span{
    display:none;
    white-space:normal;
    text-align:center;
  }
  .topbar__in span:first-child{display:inline}

  /* De zoekregel eronder sluit aan op dezelfde marge als de rij erboven. */
  .search-mob{padding-block:var(--sp3)}
  .search-mob .search:not(body){max-width:none}
}

@media (max-width:359px){
  /* Op de smalste telefoons is het account-icoon het eerste dat mag wijken:
     inloggen doe je hier zelden, zoeken en de mand wel. */
  .header__acts .iconbtn:first-child{display:none}
  .logo__img,.logo img{max-height:28px}
}

/* =========================================================================
   45. HET ZOEKVENSTER

   Zoeken is hier geen bijzaak. Wie "42 BLJ" of "UNIFIL" in zijn hoofd heeft
   wil dat intikken en niet door zeven menu-items klikken. Daarom staat het
   midden in de kop, mag het breed zijn en licht de hele rand op zodra je
   erin klikt.

   Wat er niet goed aan was: de suggestielijst zette naam en bijschrift
   allebei in een kale span, en de opmaak van het bijschrift pakte daardoor
   ook de naam. Alles werd even grijs en even klein, dus je zag niet welke
   regel de eenheid was en welke de toelichting.

   Nu staat de naam vet in de leeskleur, het bijschrift klein en grijs erna,
   en per groep (eenheden, missies, producten) een kopje. De regel waar je
   met de pijltjestoetsen op staat krijgt een cyaan balk aan de zijkant,
   zodat je met het toetsenbord kunt zien waar je bent.
   ========================================================================= */

/* --- Het veld ---------------------------------------------------------- */
.search:not(body){
  position:relative;
  display:flex;align-items:stretch;
  max-width:640px;width:100%;
  background:var(--surface,#fff);
  border:1.5px solid var(--line-2);
  transition:border-color .15s,box-shadow .15s;
}
.search:not(body):hover{border-color:var(--ink-3)}
.search:not(body):focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}

/* Het vergrootglas. Decoratief, dus buiten de tabvolgorde gehouden. */
.search:not(body)::before{
  content:"";
  flex:0 0 auto;
  width:2.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%236B8189' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.4 15.4L21 21'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;
  pointer-events:none;
  transition:background-image .15s;
}
.search:not(body):focus-within::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%2300727C' stroke-width='2.1' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.4 15.4L21 21'/%3E%3C/svg%3E");
}

.search:not(body) input{
  flex:1;min-width:0;
  border:0;padding:.8rem .5rem .8rem 0;
  background:transparent;
  font-size:var(--t3);color:var(--ink);
}
.search:not(body) input::placeholder{color:var(--ink-3);opacity:1}
.search:not(body) input:focus{outline:0}
.search:not(body) input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

.search:not(body) button{
  flex:0 0 auto;
  padding-inline:1.2rem;
  border:0;background:var(--deep);color:var(--paper);
  font-family:var(--f-mono);font-size:var(--t1);font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
  cursor:pointer;transition:background .15s;
}
.search:not(body) button:hover{background:var(--accent-ink)}
.search:not(body):focus-within button{background:var(--accent-ink)}

/* --- De suggestielijst -------------------------------------------------- */
.suggest{
  position:absolute;left:-1.5px;right:-1.5px;top:calc(100% + 1.5px);
  z-index:80;
  background:var(--surface,#fff);
  border:1.5px solid var(--accent);
  border-top:0;
  box-shadow:0 18px 40px -14px rgba(11,32,39,.3);
  max-height:min(68vh,520px);
  overflow-y:auto;overscroll-behavior:contain;
  padding-bottom:.3rem;
}

.suggest__group{
  position:sticky;top:0;z-index:1;
  margin:0;
  padding:.5rem .9rem .35rem;
  background:var(--paper);
  border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:var(--t0);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
}
.suggest__group:first-child{border-top:0}

.suggest a{
  display:flex;align-items:baseline;gap:.6rem;
  padding:.6rem .9rem;
  border-left:3px solid transparent;
  color:var(--ink);text-decoration:none;
  transition:background .1s,border-color .1s,color .1s;
}
.suggest__naam{
  flex:0 1 auto;min-width:0;
  font-size:var(--t3);font-weight:700;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.suggest__extra{
  flex:0 1 auto;min-width:0;
  font-family:var(--f-mono);font-size:var(--t1);font-weight:400;
  color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.suggest__pijl{
  flex:0 0 auto;margin-left:auto;
  color:var(--ink-3);opacity:0;
  transition:opacity .1s,transform .1s;
}

.suggest a:hover,
.suggest a.is-on{
  background:var(--accent-soft);
  border-left-color:var(--accent);
  color:var(--accent-ink);
}
.suggest a:hover .suggest__naam,
.suggest a.is-on .suggest__naam{color:var(--accent-ink)}
.suggest a:hover .suggest__pijl,
.suggest a.is-on .suggest__pijl{opacity:1;transform:translateX(2px);color:var(--accent-ink)}

.suggest__empty{
  padding:var(--sp4) .9rem;
  font-family:var(--f-text);font-size:var(--t3);line-height:1.5;
  color:var(--ink-2);margin:0;
}

/* Een zichtbare uitweg. Op een telefoon vult de lijst bijna het scherm en is
   "ergens anders tikken" niet iets wat je bedenkt. */
.search:not(body) .suggest__dicht{
  position:sticky;top:0;float:right;
  z-index:2;
  width:2.4rem;height:2.4rem;padding:0;margin:0;
  border:0;border-radius:0;
  background:var(--paper);color:var(--ink-3);
  font-family:var(--f-text);font-size:1.4rem;font-weight:400;
  letter-spacing:0;text-transform:none;line-height:1;cursor:pointer;
}
.search:not(body) .suggest__dicht:hover{background:var(--paper);color:var(--ink)}
.search:not(body):focus-within .suggest__dicht{background:var(--paper)}

/* --- Op mobiel ---------------------------------------------------------- */
@media (max-width:820px){
  .search:not(body)::before{width:2.3rem}
  .search:not(body) input{font-size:16px} /* onder de 16px zoomt iOS het scherm in */
  .search:not(body) button{padding-inline:.95rem}
  .suggest{max-height:60vh}
  .suggest a{padding:.75rem .9rem}
}

/* =========================================================================
   46. HET NIEUWSBRIEFFORMULIER

   De keuze bovenaan is het hele punt van deze pagina. Er komt geen algemene
   nieuwsbrief maar een per divisie, en dat werkt alleen als iemand bij de
   aanmelding aangeeft waar hij iets mee heeft.

   Daarom staan de vakjes als een raster van knoppen en niet als een lijst
   met kleine vinkjes: een raster nodigt uit om er drie aan te tikken, een
   lijst van dertig regels scrol je voorbij.
   ========================================================================= */
.nbform{margin-top:var(--sp6)}

.nbform__rij{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp4);margin-bottom:var(--sp6);
}

.nbkeuze{border:0;margin:0 0 var(--sp6);padding:0}
.nbkeuze legend{
  padding:0;margin:0 0 .3rem;
  font-weight:800;font-size:var(--t5);letter-spacing:-.02em;
}
.nbkeuze__uitleg{
  margin:0 0 var(--sp5);
  font-family:var(--f-text);font-size:var(--t3);line-height:1.55;color:var(--ink-2);
}
.nbkeuze__groep{margin-bottom:var(--sp5)}
.nbkeuze__kop{
  margin:0 0 .5rem;
  font-family:var(--f-mono);font-size:var(--t0);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
}
.nbkeuze__vakjes{display:flex;flex-wrap:wrap;gap:.4rem}

/* De interessevakjes gebruiken .opts en .opt uit het bestaande
   formuliersysteem, zie regel 534. Geen tweede variant ernaast. */

.nbform__voet{
  padding-top:var(--sp5);
  border-top:1px solid var(--line);
}
.nbform__klein{
  margin:var(--sp4) 0 0;max-width:62ch;
  font-family:var(--f-text);font-size:var(--t2);line-height:1.5;color:var(--ink-3);
}

@media (max-width:640px){
  .nbform__rij{grid-template-columns:1fr}
  .nbform__voet .btn{width:100%;justify-content:center;text-align:center}
}

/* De kop in een bevestigingsblok. Stond er nog niet; .done gebruikte een h2. */
.done__t{
  font-weight:800;font-size:var(--t6);letter-spacing:-.025em;
  margin:0 0 .4rem;color:var(--accent-ink);
}

/* =========================================================================
   47. DE PRIJSCALCULATOR OP MOBIEL

   Wat er misging: `.cfg` staat op mobiel op `grid-template-columns:1fr`, en
   een 1fr-baan heeft standaard een minimumbreedte gelijk aan zijn inhoud.
   De stappenbalk daarin is vier stappen van 130 pixels breed, dus de baan
   werd 525 pixels en daarmee de hele kolom. Op een scherm van 375 stak
   alles er rechts uit.

   De oplossing is `minmax(0,1fr)`: dan mag de baan wel kleiner worden dan
   zijn inhoud, en kan de stappenbalk zelf schuiven zoals bedoeld.

   Verder is dit het formulier waar de omzet doorheen moet, dus mag het op
   een telefoon net zo goed werken als op een computer. Grotere raakvlakken,
   een stappenbalk die meeschuift naar de stap waar je bent, en de prijs
   onderin vast in beeld: dat laatste is de vraag die iemand de hele tijd
   in zijn hoofd heeft terwijl hij zit in te vullen.
   ========================================================================= */

@media (max-width:1080px){
  /* Dit is de eigenlijke reparatie. */
  .cfg{grid-template-columns:minmax(0,1fr)}
  .cfg > *{min-width:0}

  .cfg__steps{
    overflow-x:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
    scroll-snap-type:x proximity;
  }
  .cfg__steps::-webkit-scrollbar{display:none}
  .cfg__step{flex:0 0 auto;scroll-snap-align:start}
}

@media (max-width:820px){

  /* Grotere keuzevlakken: je tikt met een duim, niet met een muispijl. */
  .opts{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.45rem}
  /* Ruimer raakvlak, en het rondje blijft in de hoek. */
  .opt span{padding:.85rem 2.5rem .85rem .8rem;min-height:56px;justify-content:center}
  .opt span::before{top:.6rem;right:.6rem}
  .opt span::after{top:.93rem;right:1.07rem}

  .fld{padding:var(--sp4) 0}
  .fld__q{font-size:var(--t4)}
  .fld input[type=text],.fld input[type=email],.fld input[type=tel],
  .fld input[type=number],.fld input[type=date],.fld select,.fld textarea{
    /* Onder de 16 pixels zoomt iOS het hele scherm in zodra je in een veld
       tikt, en daarna staat de pagina scheef. */
    font-size:16px;
    padding:.8rem .85rem;
  }

  /* De knoppen onderaan een stap naast elkaar, elk de helft. */
  .cfg__nav{gap:var(--sp3)}
  .cfg__nav .btn{flex:1 1 0;justify-content:center;text-align:center;padding-inline:.8rem}

  /* De stappenbalk compacter: twee en een halve stap in beeld is genoeg om
     te zien dat er meer is. */
  .cfg__step{min-width:118px;padding:.6rem .7rem}
}

@media (max-width:560px){
  .opts{grid-template-columns:1fr 1fr}
  .opt span{font-size:var(--t2)}
}

/* --- De prijs vast onderin -------------------------------------------- */
/* Op desktop staat de samenvatting rechts mee te lopen. Op mobiel valt hij
   boven het formulier en scrol je hem meteen voorbij, terwijl "wat kost dit
   nu" precies de vraag is die je bezighoudt. Daarom onderin vastgezet. */
@media (max-width:1080px){
  .quote{
    position:sticky;
    bottom:0;
    z-index:60;
    order:2;
    margin-top:var(--sp5);
    box-shadow:0 -8px 24px -12px rgba(11,32,39,.35);
  }
}

/* De zwevende winkelmand van Modern Cart hoort niet op de formulierpagina's.
   Daar staat niets in een mand, en op mobiel dekte de knop een keuzevak van
   de calculator af. */
.page-template-offerte #moderncart-floating-cart,
.page-template-bijdragen #moderncart-floating-cart,
.page-template-bestanden #moderncart-floating-cart,
.page-template-nieuwsbrief #moderncart-floating-cart{display:none}

/* =========================================================================
   48. MEER EENHEID OP DE EENHEIDSPAGINA

   Wie op de pagina van zijn eigen eenheid komt moet het gevoel hebben dat
   het over hem gaat, niet over een categorie in een webshop. Twee dingen
   dragen daar het meest aan bij en allebei komen ze uit echte data:

   Het embleem bovenaan. Staat er geen embleem ingesteld, dan pakken we een
   patch uit die eenheid. Dat is meestal precies het embleem dat mensen
   kennen, en beter dan een lege plek boven je eigen eenheid.

   De missiegebieden. Afgeleid uit de producten die zowel aan deze eenheid
   als aan een missie hangen. Iemand die Bosnie ziet staan bij zijn eigen
   bataljon herkent zijn eigen uitzending, en dat is precies het moment
   waarop een pagina van jou wordt.
   ========================================================================= */
.side__uitleg{
  margin:-.2rem 0 var(--sp4);
  font-family:var(--f-text);font-size:var(--t2);line-height:1.5;color:var(--ink-3);
}

.missielijst{display:flex;flex-direction:column}
.missielijst__rij{
  display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
  padding:.55rem 0;
  border-top:1px solid var(--line);
  font-size:var(--t3);font-weight:600;color:var(--ink);
  text-decoration:none;
  transition:color .12s,padding-left .12s;
}
.missielijst__rij:first-child{border-top:0}
.missielijst__rij:hover{color:var(--accent-ink);padding-left:.25rem}
.missielijst__rij .c{
  flex:0 0 auto;
  font-family:var(--f-mono);font-size:var(--t1);font-weight:400;color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.missielijst__rij:hover .c{color:var(--accent-ink)}

/* Het blok dat om aanvulling vraagt mag opvallen: dat is de motor onder de
   community en het moet niet wegvallen tussen de andere zijbalkblokken. */
.side--vraag{
  border-color:var(--accent);
  border-left-width:3px;
  background:var(--accent-soft);
}
.side--vraag h4{color:var(--accent-ink)}
.side--vraag .side__uitleg{color:var(--ink-2)}
.side--vraag .btn{margin-top:var(--sp3)}

/* =========================================================================
   49. MEER LEGER IN DE UITSTRALING

   Het probleem met de vorige versie: navy met cyaan leest als een
   softwarebedrijf. Netjes, maar het zegt niets over voor wie dit is.

   Wat het wel militair maakt, zonder in camouflageprint en gescheurde
   letters te vervallen:

   1. Olijfgroen en zandkleur als steunkleuren. Dat zijn de kleuren van de
      uitrusting zelf. Ze staan naast het cyaan uit het logo, niet in de
      plaats ervan; het logo blijft leidend.
   2. Sjabloonletters voor labels. De mono die er al staat, maar met haakjes
      en een nummer ervoor, zoals een kist waar iets in zit gemerkt wordt.
   3. Een schuine waarschuwingsband op de donkere secties. Twee tinten
      olijf, subtiel genoeg om achtergrond te blijven.
   4. De cijfers in de kop als gestempelde blokken in plaats van gewone
      tekst.

   Alles in CSS, niets als afbeelding, dus het kost geen laadtijd en het
   blijft scherp op elk scherm.
   ========================================================================= */

:root{
  /* De kleuren van de uitrusting. Olijf voor het vlak, zand voor de
     accenten erop. Beide donker genoeg om er witte tekst op te zetten. */
  --olijf:#4A5240;
  --olijf-2:#3A4132;
  --olijf-licht:#6B7259;
  --zand:#B3A281;
  --zand-licht:#D6C9AC;
}

/* --- Het sjabloonlabel -------------------------------------------------- */
/* Een eyebrow met haakjes eromheen, zoals een kist gemerkt wordt. Alleen op
   de homepage en de maatwerkpagina, want overal wordt het een tic. */
.home .eyebrow--accent::before,
.page-template-maatwerk .eyebrow--accent::before{
  content:"[ ";
  color:var(--accent);
  font-weight:400;
}
.home .eyebrow--accent::after,
.page-template-maatwerk .eyebrow--accent::after{
  content:" ]";
  color:var(--accent);
  font-weight:400;
}

/* --- De cijfers in de kop ----------------------------------------------- */
/* Gestempeld in plaats van gezet: een blokje eromheen, cijfers die uitlijnen,
   en de eenheid eronder in sjabloonletters. */
.hero__fact{
  position:relative;
  padding:.55rem .9rem .55rem 0;
}
.hero__fact b{
  display:block;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}
.hero__fact span{
  display:block;
  font-family:var(--f-mono);font-size:var(--t0);
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);
}
/* Een klein streepje in zandkleur onder elk cijfer, als een merkteken. */
.hero__fact::after{
  content:"";
  position:absolute;left:0;bottom:0;
  width:22px;height:2px;
  background:var(--zand);
}

/* --- Sectiekoppen met een rangchevron ----------------------------------- */
/* Drie chevrons zoals op een mouw, in zandkleur. Klein, links van de kop. */
.home .sec__head .eyebrow::before{
  content:"";
  display:inline-block;
  width:16px;height:9px;margin-right:.5rem;
  vertical-align:-1px;
  background:
    linear-gradient(135deg,transparent 45%,var(--zand) 45% 62%,transparent 62%),
    linear-gradient(45deg,transparent 45%,var(--zand) 45% 62%,transparent 62%);
  background-size:8px 9px;
  background-position:0 0,8px 0;
  background-repeat:no-repeat;
}

/* --- Structuur op de donkere vlakken ------------------------------------- */
/* Een heel licht ruitpatroon, zoals ripstop. Op 3 procent dekking zie je het
   niet bewust, maar het vlak voelt niet meer als een egale kleurplaat. */
.sec--deep{
  background-image:
    repeating-linear-gradient(45deg,rgba(255,255,255,.025) 0 1px,transparent 1px 7px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.025) 0 1px,transparent 1px 7px);
}

/* --- De knop met de meeste nadruk --------------------------------------- */
/* Een kleine hoekmarkering rechtsonder, zoals een snijteken op een sjabloon. */
.btn--primary{position:relative;overflow:hidden}
.btn--primary::after{
  content:"";
  position:absolute;right:0;bottom:0;
  width:10px;height:10px;
  background:linear-gradient(135deg,transparent 50%,rgba(11,32,39,.28) 50%);
}

@media (prefers-reduced-motion:no-preference){
  .btn--primary{transition:transform .14s,background .14s}
  .btn--primary:hover{transform:translateY(-1px)}
}

/* =========================================================================
   51. HET KRUIMELPAD ZWAARDER

   De H1 is op desktop behoorlijk fors, en daar direct onder stond het
   kruimelpad in de kleinste mono die er is, in de lichtste grijstint. Dat
   viel volledig weg. Nu een maat groter, dikker, en in de leeskleur in
   plaats van de hulpkleur. De scheidingstekens blijven wel licht, want die
   hoeven niet mee te schreeuwen.
   ========================================================================= */
.crumb{
  font-size:var(--t2);
  font-weight:600;
  letter-spacing:.07em;
  color:var(--ink-2);
}
.crumb a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid transparent}
.crumb a:hover{color:var(--accent-ink);border-bottom-color:currentColor}
.crumb span{margin:0 .5rem;opacity:.4;font-weight:400}
/* De laatste kruimel is waar je nu bent; die mag het zwaarst. */
.crumb > span:last-child{color:var(--ink);opacity:1;font-weight:700;margin-right:0}

/* =========================================================================
   52. HOMEPAGE: DE H1, DE AGENDA EN HET NIEUWSBRIEFBLOK
   ========================================================================= */

/* --- De H1 kleiner ----------------------------------------------------- */
/* Stond op clamp(2.6rem, 5.2vw, 5rem). Op een breed scherm werd dat vijf
   rem en dat is behoorlijk aanwezig; op verzoek zo'n veertig procent
   kleiner. De onderkant blijft staan, want op een telefoon was hij goed. */
.hero h1{
  font-size:clamp(2.1rem,3.1vw,3rem);
  line-height:1.02;
}

/* --- Het kopje boven de carrousel -------------------------------------- */
.slider3d__kop{
  margin:0 0 var(--sp3);
  font-family:var(--f-mono);font-size:var(--t1);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;
}
.hero .slider3d__kop{color:var(--ink-2)}

/* --- De agenda op de homepage ------------------------------------------ */
/* Hier stond een tweede weergave van de nieuwste producten, terwijl die al
   in de carrousel bovenaan staan. Nu de agenda: nieuws dat je nergens
   anders op de pagina ziet, en de reden dat mensen terugkomen. */
.agenda{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp5);
}
.agenda__item{
  display:grid;grid-template-columns:74px minmax(0,1fr);
  gap:var(--sp4);
  padding:var(--sp4);
  background:var(--surface,#fff);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
}
.agenda__dag{
  flex:0 0 auto;
  text-align:center;
  padding:.5rem .2rem;
  background:var(--deep);
  color:var(--ink-on-deep);
  align-self:start;
}
.agenda__dag b{
  display:block;
  font-weight:800;font-size:var(--t7);line-height:1;
  letter-spacing:-.03em;color:var(--accent-bright);
  font-variant-numeric:tabular-nums;
}
.agenda__dag span{
  display:block;margin-top:.2rem;
  font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-on-deep);
}
.agenda__dag em{
  display:block;
  font-style:normal;font-family:var(--f-mono);font-size:var(--t0);
  color:var(--ink-3);
}
.agenda__body{min-width:0}
.agenda__vlag{
  display:inline-block;margin-bottom:.35rem;
  padding:.12rem .45rem;
  background:var(--accent);color:var(--deep);
  font-family:var(--f-mono);font-size:var(--t0);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
}
.agenda__t{
  margin:0 0 .25rem;
  font-size:var(--t4);line-height:1.2;letter-spacing:-.015em;
}
.agenda__t a{color:var(--ink);text-decoration:none}
.agenda__t a:hover{color:var(--accent-ink)}
.agenda__meta{
  margin:0;
  font-family:var(--f-mono);font-size:var(--t1);color:var(--ink-3);
}
.agenda__tekst{
  margin:.5rem 0 0;
  font-family:var(--f-text);font-size:var(--t2);line-height:1.5;color:var(--ink-2);
}

/* --- Het nieuwsbriefblok met de gorilla -------------------------------- */
/* Twee kolommen: het beeld links, de teksten rechts. De kolom met het beeld
   is smaller, want de gorilla is een staand plaatje en de tekst heeft de
   ruimte harder nodig. */
.nbblok{
  display:grid;grid-template-columns:300px minmax(0,1fr);
  gap:var(--sp8);align-items:center;
}
.nbblok__beeld{min-width:0}
.nbblok__beeld img{
  display:block;width:100%;height:auto;
  max-width:340px;
  /* Een zachte schaduw eronder, zodat hij op het donkere vlak niet zweeft. */
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.45));
}

@media (max-width:900px){
  .agenda{grid-template-columns:1fr}
  .nbblok{grid-template-columns:1fr;gap:var(--sp6)}
  /* Eerst wat er te halen valt, dan het plaatje. Andersom scrol je op een
     telefoon eerst langs een gorilla van driehonderd pixels hoog. */
  .nbblok__beeld{order:2;justify-self:center}
  .nbblok__beeld img{max-width:260px}
}

/* De carrousel heeft een eigen kolom, want met een kopje erboven zijn het
   twee elementen en dan viel de slider naar een eigen rij in het raster. */
.hero__slider{min-width:0}

/* =========================================================================
   53. DE HEADER ZONDER TEKST

   Er is nu een versie van de banner zonder de gebakken tekst, en die is
   ook al verbleekt aangeleverd. Daarmee vervalt de reden voor de uitsnede
   uit blok 50: het hele beeld kan gewoon in beeld, en de sluier eroverheen
   mag veel lichter omdat het beeld zelf al nauwelijks contrast heeft.

   Deze klasse komt achter .hero--beeld en overschrijft dus de uitsnede.
   ========================================================================= */
.hero--schoon::after{
  background-size:cover;
  background-position:center right;
}
.hero--schoon::before{
  /* Alleen nog een lichte sluier links, waar de tekst staat. Rechts blijft
     het beeld helemaal open. */
  background:linear-gradient(
    100deg,
    rgba(244,247,248,.94) 0%,
    rgba(244,247,248,.86) 30%,
    rgba(244,247,248,.5) 55%,
    rgba(244,247,248,.12) 80%,
    rgba(244,247,248,0) 100%
  );
}

@media (max-width:900px){
  .hero--schoon::after{background-size:cover;background-position:center}
  .hero--schoon::before{
    background:linear-gradient(
      180deg,
      rgba(244,247,248,.92) 0%,
      rgba(244,247,248,.84) 50%,
      rgba(244,247,248,.62) 100%
    );
  }
}

/* --- Dezelfde textuur achter de categoriepagina's ---------------------- */
/* Zoals voorgesteld: hetzelfde beeld achter de eenheids- en missiekop. Die
   is donkerblauw en het beeld is bijna wit, dus hier op lage dekking als
   textuur in plaats van als afbeelding. Zo krijgt elke eenheidspagina wat
   diepte in plaats van een egaal blauw vlak, zonder dat de tekst eronder
   lijdt.
   Heeft een eenheid zijn eigen beeld ingesteld, dan wint dat: dat staat als
   inline stijl op de sectie en gaat hier dus voor. */
.uhero--textuur::after{
  content:"";
  position:absolute;inset:0;z-index:0;
  background-image:var(--uhero-textuur);
  background-size:cover;
  background-position:center right;
  opacity:.07;
  pointer-events:none;
}
.uhero--textuur > *{position:relative;z-index:1}

/* =========================================================================
   54. DE LABELS BOVEN DE KOPPEN GROTER

   Deze labels stonden op var(--t1), dat is 11 pixels, in mono met een
   letterafstand van 0,2em. Die combinatie leest slecht: mono met veel
   letterafstand heeft méér grootte nodig dan gewone tekst, niet minder.
   Naast een H1 van 45 pixels verdween het label volledig.

   Nu een maat groter, iets zwaarder, en de letterafstand een tikje terug.
   Dat laatste is nodig: bij een grotere letter valt 0,2em uiteen in losse
   tekens. Deze regel staat na blok 6 en overschrijft die dus.
   ========================================================================= */
.eyebrow{
  font-size:var(--t2);
  font-weight:700;
  letter-spacing:.16em;
}

/* Op de plek waar het label direct boven een grote kop staat, mag hij nog
   een tandje groter: daar is het contrast met de H1 het grootst. */
.hero .eyebrow,
.uhero .eyebrow,
.sec__head .eyebrow{
  font-size:var(--t3);
  letter-spacing:.14em;
}

/* =========================================================================
   55. HET MAATWERKBLOK EN DE AGENDA IN DE HUISSTIJL

   Het maatwerkblok stond even in olijfgroen met een schuine zandband
   erboven. Dat was een poging om de site militairder te laten voelen, maar
   het werd een groot plat vlak in een kleur die nergens anders op de site
   voorkomt, met een rand erboven die uit de lucht kwam vallen. Terecht
   afgekeurd.

   Wat er nu staat gebruikt alleen wat er al is: het lichte grijs van de
   winkel, witte kaarten, en cyaan als accent. Het blok valt nog steeds op
   tussen de witte secties eromheen, maar nu omdat het rustiger is dan de
   rest en niet omdat het schreeuwt.

   Bij de agenda hetzelfde: de datumblokjes stonden in donkerblauw en dat
   werd, drie op een rij naast elkaar, een zwarte streep over de pagina.
   Nu lichtcyaan met donkere cijfers erop.
   ========================================================================= */

/* --- Het maatwerkblok -------------------------------------------------- */
.sec--maatwerk{
  background:var(--paper-2);
  /* Een cyaan lijn bovenaan in plaats van een schuine band. Zelfde functie,
     namelijk aangeven dat hier een ander soort blok begint, maar in de
     kleur die de site al gebruikt. */
  border-top:3px solid var(--accent);
  border-bottom:1px solid var(--line);
}
.sec--maatwerk .step{
  background:var(--surface,#fff);
  border:1px solid var(--line);
  border-top:2px solid var(--line-2);
  padding:var(--sp5) var(--sp4);
}
.sec--maatwerk .step:first-child{border-top-color:var(--accent)}
.sec--maatwerk .step h4{color:var(--ink)}
.sec--maatwerk .step p{color:var(--ink-2)}
.sec--maatwerk .step__n{color:var(--accent-ink)}

/* --- De agenda --------------------------------------------------------- */
.agenda__dag{
  background:var(--accent-soft);
  border:1px solid var(--accent);
  color:var(--accent-ink);
}
.agenda__dag b{color:var(--accent-ink)}
.agenda__dag span{color:var(--accent-ink)}
.agenda__dag em{color:var(--ink-3)}

/* De kaart eromheen mag rustiger: een lichte rand is genoeg, de cyaan
   streep links deed te veel naast een cyaan datumblok. */
.agenda__item{
  border-left:1px solid var(--line);
  border-top:2px solid var(--accent);
}

/* De opmaak van de voet staat in blok 66, onderaan dit bestand. */

/* =========================================================================
   57. HET KOPJE BOVEN DE CARROUSEL

   Zelfde probleem als bij de labels boven de koppen: mono op 11 pixels met
   veel letterafstand leest slecht. Dezelfde behandeling als in blok 54.
   ========================================================================= */
.slider3d__kop{
  font-size:var(--t3);
  font-weight:700;
  letter-spacing:.14em;
  color:var(--ink-2);
}
.hero .slider3d__kop{color:var(--ink-2)}

/* =========================================================================
   58. DE HEADER-AFBEELDING ACHTER DE KOP

   Deze regels stonden eerder in blok 50, maar zijn per ongeluk meegegaan
   toen ik het olijfgroene experiment eruit haalde: dat blok stond er vlak
   voor, en ik heb te ruim geknipt. Vandaar dat ze hier opnieuw staan.

   Wat het doet: het beeld achter de kop van de homepage. Er is een versie
   zonder de gebakken tekst, en die is ook al verbleekt aangeleverd, dus het
   hele beeld kan in beeld en de sluier eroverheen mag licht blijven.
   ========================================================================= */
.hero--beeld{position:relative;isolation:isolate}

.hero--beeld::after{
  content:"";
  position:absolute;inset:0;z-index:-2;
  background-image:var(--hero-beeld);
  background-repeat:no-repeat;
  /*
   * Op BREEDTE schalen, niet op hoogte. Deze banner is veel breder dan
   * hoog; laat je hem op de hoogte van de kop meeschalen, dan wordt hij op
   * een breed scherm meters breed en is de coin zo groot als een autowiel.
   */
  background-size:145% auto;
  background-position:right 22% center;
}

.hero--beeld::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(
    100deg,
    var(--paper) 0%,
    var(--paper) 34%,
    rgba(244,247,248,.82) 52%,
    rgba(244,247,248,.35) 74%,
    rgba(244,247,248,.1) 100%
  );
}

/* De tekstloze versie mag helemaal in beeld: geen uitsnede nodig, en een
   veel lichtere sluier omdat het beeld zelf al nauwelijks contrast heeft. */
.hero--schoon::after{
  background-size:cover;
  background-position:center right;
}
.hero--schoon::before{
  background:linear-gradient(
    100deg,
    rgba(244,247,248,.94) 0%,
    rgba(244,247,248,.86) 30%,
    rgba(244,247,248,.5) 55%,
    rgba(244,247,248,.12) 80%,
    rgba(244,247,248,0) 100%
  );
}

@media (max-width:900px){
  .hero--beeld::after{background-size:230% auto;background-position:right 30% top 30%}
  .hero--beeld::before{
    background:linear-gradient(
      180deg,
      rgba(244,247,248,.94) 0%,
      rgba(244,247,248,.88) 55%,
      rgba(244,247,248,.6) 100%
    );
  }
  .hero--schoon::after{background-size:cover;background-position:center}
  .hero--schoon::before{
    background:linear-gradient(
      180deg,
      rgba(244,247,248,.92) 0%,
      rgba(244,247,248,.84) 50%,
      rgba(244,247,248,.62) 100%
    );
  }
}

/* =========================================================================
   59. DE BEELDMERKEN IN HET MEGAMENU

   Wat er niet goed aan was: het beeld werd met `cover` in een vierkantje
   van vierenveertig pixels geduwd. Productfoto's hebben witruimte rondom,
   dus `cover` zoomt precies op het midden in en je ziet een fragment van
   een patch in plaats van de patch. Met een harde rand eromheen werd het
   een rijtje miniatuurtjes in plaats van beeldmerken.

   Nu: rond in plaats van vierkant, `contain` in plaats van `cover`, en een
   lichte ring eromheen. Rond werkt omdat coins rond zijn en patches vaak
   schild- of rondvormig; het leest als een embleem en niet als een foto.
   En `contain` laat het hele ontwerp zien in plaats van het midden.

   Heeft een categorie geen patch, coin of speld, dan staat er niets meer
   uit de productcatalogus maar een rustig vakje met de initialen. Een
   T-shirtfoto van vierenveertig pixels zei niets.
   ========================================================================= */
.beeldmerk{
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--paper);
  padding:3px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
  transition:border-color .14s,transform .14s,box-shadow .14s;
}
.beeldmerk img{
  width:100%;height:100%;
  object-fit:contain;
  border-radius:50%;
  display:block;
}
a.mega__kolkop:hover .beeldmerk{
  border-color:var(--accent);
  transform:scale(1.06);
  box-shadow:0 2px 8px -2px rgba(0,173,186,.5);
}

/* Geen beeldmerk beschikbaar: de initialen, rustig en zonder nadruk. Het
   houdt de rijen even hoog zodat de kolommen blijven uitlijnen. */
.beeldmerk--leeg{
  border-style:dashed;
  border-color:var(--line-2);
  background:transparent;
  box-shadow:none;
  color:var(--ink-3);
  font-size:var(--t0);
  letter-spacing:.02em;
}
a.mega__kolkop:hover .beeldmerk--leeg{
  border-color:var(--accent);
  transform:none;
  box-shadow:none;
  color:var(--accent-ink);
}

/* =========================================================================
   60. HET KADER OM DE BEELDMERKEN WEG

   Het randje eromheen maakte er een rijtje miniaturen van in plaats van
   beeldmerken. Nu staat het beeld vrij: rond, zonder rand, zonder
   achtergrond, zonder schaduw. Precies zoals een patch op een mouw zit.

   Waar geen beeldmerk is blijft een leeg vak van dezelfde maat staan, maar
   volledig onzichtbaar. Dat is nodig omdat de kolomkoppen anders niet meer
   op één lijn staan: de ene kolom zou dan vierenveertig pixels naar links
   opschuiven ten opzichte van de andere.
   ========================================================================= */
.beeldmerk{
  border:0;
  background:none;
  padding:0;
  box-shadow:none;
  border-radius:0;
  overflow:visible;
  transition:transform .14s;
}
.beeldmerk img{
  border-radius:0;
  object-fit:contain;
  /* Een heel zachte schaduw onder het beeld, zodat een patch op een licht
     vlak niet lijkt te zweven. Geen rand: dat was juist het probleem. */
  filter:drop-shadow(0 1px 2px rgba(11,32,39,.22));
}
a.mega__kolkop:hover .beeldmerk{
  transform:scale(1.08);
  box-shadow:none;
  border-color:transparent;
}

/* Geen beeldmerk: ruimte reserveren, verder niets tonen. */
.beeldmerk--leeg{
  border:0;
  background:none;
  box-shadow:none;
  color:transparent;
}
a.mega__kolkop:hover .beeldmerk--leeg{
  border-color:transparent;
  color:transparent;
  transform:none;
}

/* =========================================================================
   61. DE AGENDA EN DE EVENEMENTPAGINA

   Er was geen sjabloon voor een los evenement, dus alles wat een evenement
   tot een evenement maakt stond in de database maar nergens op de pagina.
   En op het overzicht zag komend er hetzelfde uit als geweest, terwijl het
   eerstvolgende evenement juist het belangrijkste ding op die pagina is.

   Twee dingen bepalen de opmaak hier.

   De datum moet je van een afstand kunnen lezen. Dat is de vraag waarmee
   iemand op een agenda komt, dus die staat als blok en niet als regel tekst.

   En de producten die voor een evenement gemaakt zijn horen op die pagina
   zelf te staan, niet weggestopt in de shop. Bij het eerstvolgende evenement
   staan ze zelfs al op het overzicht, want dat is de reden om te komen.
   ========================================================================= */

/* --- Het datumblok, in drie maten -------------------------------------- */
.edatum{
  flex:0 0 auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  background:var(--accent-soft);
  border:1px solid var(--accent);
  padding:.7rem .5rem;
  min-width:88px;
  align-self:start;
}
.edatum__dag{
  font-family:var(--f-ui);font-weight:800;
  font-size:var(--t8);line-height:.9;letter-spacing:-.04em;
  color:var(--accent-ink);
  font-variant-numeric:tabular-nums;
}
.edatum__maand{
  margin-top:.25rem;
  font-family:var(--f-mono);font-size:var(--t2);font-weight:700;
  letter-spacing:.14em;color:var(--accent-ink);
}
.edatum__jaar{
  font-family:var(--f-mono);font-size:var(--t1);
  letter-spacing:.1em;color:var(--ink-3);
}
.edatum--groot{min-width:118px;padding:1rem .7rem}
.edatum--groot .edatum__dag{font-size:var(--t10)}
.edatum--klein{min-width:64px;padding:.45rem .35rem}
.edatum--klein .edatum__dag{font-size:var(--t6)}
.edatum--klein .edatum__maand{font-size:var(--t1);letter-spacing:.1em}

/* --- De kop van een los evenement -------------------------------------- */
.ehero{
  position:relative;isolation:isolate;
  background:var(--deep);color:var(--ink-on-deep);
  overflow:hidden;
}
.ehero::after{
  content:"";
  position:absolute;inset:0;z-index:-2;
  background-image:var(--ehero-beeld);
  background-size:cover;background-position:center;
}
.ehero::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(11,32,39,.94) 0%,rgba(11,32,39,.86) 45%,rgba(11,32,39,.6) 100%);
}
/* Een evenement dat geweest is mag rustiger: grijzer, minder nadruk. */
.ehero--voorbij::after{filter:grayscale(1);opacity:.5}

.ehero__in{
  display:flex;gap:var(--sp6);align-items:flex-start;
  padding-block:var(--sp8);
}
.ehero__tekst{min-width:0;flex:1 1 auto}
.ehero h1{
  color:var(--ink-on-deep);
  font-size:clamp(1.9rem,3.4vw,3rem);
  line-height:1.05;margin-bottom:var(--sp5);
}
.ehero .edatum{
  background:transparent;
  border-color:var(--accent);
}
.ehero .edatum__dag,
.ehero .edatum__maand{color:var(--accent-bright)}
.ehero .edatum__jaar{color:var(--ink-on-deep-2)}

.efeiten{
  display:flex;flex-wrap:wrap;gap:0;
  margin:0 0 var(--sp6);
  border-top:1px solid var(--line-deep);padding-top:var(--sp4);
}
.efeiten div{margin-right:var(--sp7);padding-bottom:var(--sp3)}
.efeiten dt{
  font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.25rem;
}
.efeiten dd{
  margin:0;font-weight:700;font-size:var(--t3);
  color:var(--ink-on-deep);
}
.ehero__acts{display:flex;gap:var(--sp3);flex-wrap:wrap}

/* --- Het eerstvolgende evenement op het overzicht ---------------------- */
.eerste{
  background:var(--surface,#fff);
  border:1px solid var(--line);
  border-top:3px solid var(--accent);
}
.eerste__in{
  position:relative;isolation:isolate;
  display:flex;gap:var(--sp6);align-items:flex-start;
  padding:var(--sp6);
}
.eerste--beeld .eerste__in::after{
  content:"";
  position:absolute;inset:0;z-index:-2;
  background-image:var(--eerste-beeld);
  background-size:cover;background-position:center right;
}
.eerste--beeld .eerste__in::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,var(--surface,#fff) 0%,rgba(255,255,255,.95) 42%,rgba(255,255,255,.6) 72%,rgba(255,255,255,.25) 100%);
}
.eerste__tekst{min-width:0;flex:1 1 auto}
.eerste__t{
  margin:0 0 .4rem;
  font-size:clamp(1.5rem,2.6vw,var(--t8));line-height:1.1;letter-spacing:-.02em;
}
.eerste__t a{color:var(--ink);text-decoration:none}
.eerste__t a:hover{color:var(--accent-ink)}
.eerste__meta{
  margin:0;
  font-family:var(--f-mono);font-size:var(--t2);color:var(--ink-3);
}
.eerste__tekstje{
  margin:var(--sp4) 0 0;max-width:62ch;
  font-family:var(--f-text);font-size:var(--t3);line-height:1.55;color:var(--ink-2);
}
.eerste__prod{
  padding:var(--sp5) var(--sp6) var(--sp6);
  border-top:1px solid var(--line);
  background:var(--paper);
}

/* --- De kaarten met wat er daarna komt --------------------------------- */
.ekaarten{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp5);
}
.ekaart{
  display:flex;flex-direction:column;
  background:var(--surface,#fff);
  border:1px solid var(--line);
  overflow:hidden;
  transition:border-color .14s,transform .14s,box-shadow .14s;
}
.ekaart:hover{
  border-color:var(--accent);
  transform:translateY(-2px);
  box-shadow:0 10px 24px -14px rgba(11,32,39,.35);
}
.ekaart__beeld{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--paper-2)}
.ekaart__beeld img{width:100%;height:100%;object-fit:cover;display:block}
.ekaart__body{
  display:flex;flex-direction:column;gap:var(--sp3);
  padding:var(--sp4);flex:1 1 auto;
}
.ekaart__top{display:flex;gap:var(--sp4);align-items:flex-start}
.ekaart__t{
  margin:0 0 .2rem;
  font-size:var(--t4);line-height:1.2;letter-spacing:-.015em;
}
.ekaart__t a{color:var(--ink);text-decoration:none}
.ekaart__t a:hover{color:var(--accent-ink)}
.ekaart__meta{
  margin:0;
  font-family:var(--f-mono);font-size:var(--t1);color:var(--ink-3);
}
.ekaart__tekst{
  margin:0;
  font-family:var(--f-text);font-size:var(--t2);line-height:1.5;color:var(--ink-2);
}
.ekaart__voet{
  margin-top:auto;padding-top:var(--sp3);
  border-top:1px solid var(--line);
  display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;
}
.ekaart__link{
  margin-left:auto;
  font-family:var(--f-mono);font-size:var(--t1);font-weight:700;
  color:var(--accent-ink);text-decoration:none;
}
.ekaart__link:hover{text-decoration:underline}

.evlag{
  display:inline-block;
  padding:.15rem .45rem;
  background:var(--accent);color:var(--deep);
  font-family:var(--f-mono);font-size:var(--t0);font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
}
.evlag--prod{background:var(--deep);color:var(--accent-bright)}

/* --- Wat geweest is ---------------------------------------------------- */
/* Compact als lijst, niet als kaarten. Het blijft staan als bewijs dat we
   er waren, maar het hoeft niet met het komende te concurreren. */
.egeweest{display:flex;flex-direction:column}
.egeweest__rij{
  display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,.8fr) 80px;
  gap:var(--sp4);align-items:baseline;
  padding:.75rem 0;
  border-top:1px solid var(--line);
  text-decoration:none;
  transition:padding-left .12s,color .12s;
}
.egeweest__rij:first-child{border-top:0}
.egeweest__rij:hover{padding-left:.3rem}
.egeweest__datum{
  font-family:var(--f-mono);font-size:var(--t2);color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.egeweest__naam{font-weight:700;font-size:var(--t3);color:var(--ink);min-width:0}
.egeweest__rij:hover .egeweest__naam{color:var(--accent-ink)}
.egeweest__loc{font-family:var(--f-text);font-size:var(--t2);color:var(--ink-3);min-width:0}
.egeweest__extra{
  font-family:var(--f-mono);font-size:var(--t1);color:var(--accent-ink);
  text-align:right;
}

/* --- De kleine agenda in de zijbalk ------------------------------------ */
.minagenda{display:flex;flex-direction:column;margin-bottom:var(--sp3)}
.minagenda__rij{
  display:grid;grid-template-columns:64px minmax(0,1fr);
  gap:.6rem;align-items:baseline;
  padding:.5rem 0;
  border-top:1px solid var(--line);
  text-decoration:none;
}
.minagenda__rij:first-child{border-top:0}
.minagenda__dag{
  font-family:var(--f-mono);font-size:var(--t1);font-weight:700;
  color:var(--accent-ink);
}
.minagenda__naam{
  font-size:var(--t2);font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.minagenda__rij:hover .minagenda__naam{color:var(--accent-ink)}

/* --- Het fotoverslag --------------------------------------------------- */
.efotos{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:var(--sp3);
}
.efoto{margin:0;aspect-ratio:1/1;overflow:hidden;background:var(--paper-2)}
.efoto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.efoto:hover img{transform:scale(1.04)}

/* --- De kop van het overzicht ------------------------------------------ */
.agkop{
  font-size:clamp(2rem,3.6vw,3.2rem);
  line-height:1.02;margin-bottom:var(--sp4);
}

@media (max-width:1024px){
  .ekaarten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .efeiten div{margin-right:var(--sp5)}
}

@media (max-width:820px){
  .ehero__in,
  .eerste__in{flex-direction:column;gap:var(--sp4)}
  .ehero__in{padding-block:var(--sp6)}
  .eerste__in{padding:var(--sp4)}
  .eerste--beeld .eerste__in::before{
    background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.9) 60%,rgba(255,255,255,.7) 100%);
  }
  .edatum--groot{min-width:96px}
  .ekaarten{grid-template-columns:1fr}
  .ehero__acts .btn{flex:1 1 100%;justify-content:center;text-align:center}

  /* De lijst met wat geweest is wordt op een telefoon twee regels per item:
     datum en naam boven, locatie eronder. Vier kolommen van tachtig pixels
     leest niemand. */
  .egeweest__rij{
    grid-template-columns:auto minmax(0,1fr);
    gap:.3rem var(--sp4);
    padding:.85rem 0;
  }
  .egeweest__loc{grid-column:2}
  .egeweest__extra{grid-column:2;text-align:left}
}

@media (max-width:520px){
  .efotos{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* =========================================================================
   62. HET LETTERTYPE UIT DE BANNER

   Gevraagd: het lettertype van "JOUW UNIT JOUW GEAR" uit de banner ook op
   de kop van de pagina zetten.

   Eerlijk over wat hier gebeurt: ik kan uit een afbeelding niet met
   zekerheid vaststellen welk lettertype het is, en de ruwe randen in de
   banner zijn geen eigenschap van de letter maar een laag die er in het
   ontwerpprogramma over is gelegd. Wat er in de banner staat is een zware,
   smalle kapitaal, en de dichtstbijzijnde die vrij te gebruiken is heet
   Anton. Die staat hier nu.

   Weet Patrick de naam van zijn eigen lettertype, dan is dat beter: dan
   hoeven we niet te benaderen. Laat het weten, dan wisselen we het om.
   Wil hij ook die ruwe randen, dan kan dat niet met een webfont; dat moet
   dan een afbeelding of een SVG worden.
   ========================================================================= */
.hero h1{
  font-family:var(--f-kop);
  font-weight:400;              /* Anton heeft maar één gewicht */
  text-transform:uppercase;
  letter-spacing:.005em;        /* Anton staat van zichzelf al smal */
  line-height:.94;
  /* Anton is zwaarder dan Archivo op dezelfde maat, dus een tandje terug
     zodat de kop niet groter oogt dan hij was. */
  font-size:clamp(2rem,2.9vw,2.8rem);
}
.hero h1 em{
  font-family:inherit;
  font-weight:400;
  letter-spacing:inherit;
}

/* Dezelfde kop op de evenementpagina en de agenda, zodat het merk consequent
   is en niet alleen op de voorpagina opvalt. */
.ehero h1,
.agkop,
.eerste__t{
  font-family:var(--f-kop);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.005em;
  line-height:.96;
}

/* =========================================================================
   63. DE EIGEN LETTERTYPES VAN GORILLA SHOP

   Drie bestanden aangeleverd. Ze staan hier klaar als webfont zodat je ze
   in de echte pagina kunt vergelijken met ?kop=hce, ?kop=gabriele of
   ?kop=blur achter de URL. Zonder die parameter blijft Anton staan.

   Wat je van elk mag verwachten:

   Hotel Coral Essex is verweerd: de letters hebben gaten en rafels. Dat is
   precies de look van de banner, maar het betekent ook dat hij alleen groot
   werkt. Onder ongeveer 28 pixels lopen de gaten dicht en wordt het een
   grijze vlek. Dus: koppen ja, alles daaronder nee.

   Gabriele Bad AH is een versleten typemachineletter. Smaller en lichter
   dan de andere twee, dus een kop erin oogt minder zwaar.

   Blur Medium heeft zachte, uitgelopen randen. Mooi als sfeer, maar het is
   het minst scherp van de drie en dat merk je meteen op een schermkop.

   Let op twee dingen. Een lettertype dat je op je computer mag gebruiken
   mag je niet per definitie ook als webfont op een publieke site zetten;
   dat is bij veel foundries een aparte licentie. Kijk dat na voor het live
   gaat. En Hotel Coral Essex is 478 KB als TTF, dat is zwaar voor één kop.
   Omgezet naar woff2 en teruggebracht tot de tekens die we echt gebruiken
   wordt dat eerder 40 KB.
   ========================================================================= */
@font-face{
  font-family:'Hotel Coral Essex';
  src:url('assets/fonts/hotel-coral-essex.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Gabriele Bad AH';
  src:url('assets/fonts/gabriele-bad.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Blur';
  src:url('assets/fonts/blur-medium.ttf') format('truetype');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

/* --- De keuzebalk, alleen zichtbaar zolang je vergelijkt --------------- */
.kopkiezer{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  padding:.6rem var(--gut);
  background:var(--alarm);color:#fff;
  font-family:var(--f-mono);font-size:var(--t1);
}
.kopkiezer span{font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.kopkiezer a{
  padding:.28rem .6rem;
  background:rgba(255,255,255,.16);color:#fff;text-decoration:none;
}
.kopkiezer a:hover{background:rgba(255,255,255,.32)}
.kopkiezer a.is-nu{background:#fff;color:var(--alarm);font-weight:700}

/* --- De varianten ----------------------------------------------------- */
/* Elk lettertype heeft zijn eigen maat nodig. Ze staan alle drie op een
   andere hoogte per punt, dus dezelfde font-size geeft drie verschillende
   optische groottes. */
.kop--hce .hero h1,
.kop--hce .ehero h1,
.kop--hce .agkop{
  font-family:'Hotel Coral Essex','Anton',var(--f-ui);
  font-weight:400;
  letter-spacing:.01em;
  line-height:1;
  font-size:clamp(2.2rem,3.4vw,3.3rem);
}

.kop--gabriele .hero h1,
.kop--gabriele .ehero h1,
.kop--gabriele .agkop{
  font-family:'Gabriele Bad AH','Anton',var(--f-ui);
  font-weight:400;
  letter-spacing:0;
  line-height:1.06;
  font-size:clamp(2rem,3.1vw,2.9rem);
}

.kop--blur .hero h1,
.kop--blur .ehero h1,
.kop--blur .agkop{
  font-family:'Blur','Anton',var(--f-ui);
  font-weight:500;
  letter-spacing:.02em;
  line-height:1.04;
  font-size:clamp(2.1rem,3.2vw,3rem);
}

/* =========================================================================
   64. DE KOPLETTER: ANTON

   Hotel Coral Essex is de letter uit de banner, maar op een schermkop in een
   lichte pagina las die niet als stoer maar als vuil: de rafels worden op
   49 pixels kleine zwarte spatten en de kop wordt onrustig. Afgekeurd, en
   dat snap ik.

   Wat er nu staat is Anton. Dezelfde soort letter als in de banner, een
   smalle zware kapitaal, maar schoon. Daarmee houdt de kop de vorm van het
   merk zonder de textuur die op een scherm tegen je gaat werken.

   De drie aangeleverde lettertypes blijven wel klaarstaan, zie blok 63.
   Vergelijken kan met ?kop=hce, ?kop=gabriele, ?kop=blur en ?kop=archivo
   achter de URL, waarbij die laatste de oorspronkelijke Archivo teruggeeft.
   ========================================================================= */
.hero h1,
.ehero h1,
.agkop,
.eerste__t{
  font-family:'Anton',var(--f-ui);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.005em;
  line-height:.98;
}
.hero h1{font-size:clamp(2.1rem,3.1vw,2.9rem)}
.ehero h1{font-size:clamp(1.9rem,2.9vw,2.7rem)}
.agkop{font-size:clamp(2.1rem,3.2vw,3rem)}
.eerste__t{font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.04}

/* --- Vierde vergelijkoptie: terug naar hoe het was -------------------- */
/* Archivo in de zware variant, met hoofd- en kleine letters. Dat is de kop
   zoals hij was voordat er een display-letter bij kwam. */
.kop--archivo .hero h1,
.kop--archivo .ehero h1,
.kop--archivo .agkop,
.kop--archivo .eerste__t{
  font-family:var(--f-ui);
  font-weight:800;
  text-transform:none;
  letter-spacing:-.03em;
  line-height:1.02;
}

/* =========================================================================
   65. HET AANTAL IN DE WINKELMAND

   Stond rechtsboven op het icoon in de oranjerode alarmkleur, en viel daar
   weg tegen de rand van de knop. Gevraagd: linksboven en rood, zodat het
   opvalt. Dat werkt ook beter: linksboven is de hoek waar het oog eerst
   komt, en het valt daar niet samen met de rand van de knop ernaast.

   Een witte ring eromheen zorgt dat het bolletje van het icoon loskomt, ook
   als het over een lijn van de tas heen valt.
   ========================================================================= */
:root{
  /* Bewust een eigen rood en niet --alarm: die is oranjerood en leest als
     een waarschuwing. Dit moet een aantal zijn, niet een alarm. */
  --rood:#D92D20;
}

.iconbtn__count{
  top:2px;
  left:2px;
  right:auto;
  min-width:18px;height:18px;
  padding:0;
  border-radius:50%;
  background:var(--rood);
  color:#fff;
  font-size:10px;font-weight:700;
  box-shadow:0 0 0 2px var(--paper);
  font-variant-numeric:tabular-nums;
}

/* De zwevende mand van Modern Cart krijgt hetzelfde bolletje, want die is op
   mobiel het icoon dat je gebruikt. Stond in het smaragdgroen van de plugin. */
.moderncart-floating-cart-count{
  background:var(--rood) !important;
  color:#fff !important;
  border-radius:50%;
  box-shadow:0 0 0 2px #fff;
}
.moderncart-floating-cart-count span{color:#fff !important}

/* =========================================================================
   66. DE VOET

   De laatste meter van een webwinkel. Wie hier belandt heeft net getwijfeld
   of is klaar met kijken, en in beide gevallen is dit de plek om de vier
   redenen om hier te kopen nog een keer neer te zetten.

   Vier lagen, van boven naar onder:

   Een strook met die redenen, op het donkerste vlak van de pagina zodat hij
   loskomt van de inhoud erboven. De levertijd erin komt uit de instelling,
   dus er staat nooit een belofte die niet klopt.

   Daaronder het merk met het inschrijfveld voor de nieuwsbrief links, en de
   navigatie in drie kolommen rechts. Die links komen uit een vaste lijst en
   niet uit WordPress-menus, want dat is precies waarom hier eerder drie
   lege kolommen stonden.

   En onderaan de regel die er voor een winkel gewoon moet staan: copyright,
   KvK, BTW, de juridische paginas en de betaalmethoden.

   Op de achtergrond het wapen uit versie 2, op dertig procent dekking met
   een verloop eroverheen. Textuur, geen plaatje.
   ========================================================================= */
.footer{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--deep);color:var(--ink-on-deep-2);
  padding:0 0 var(--sp6);
}
.footer--beeld::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background-image:var(--footer-beeld);
  background-size:cover;background-position:center;
  opacity:.3;
}
.footer--beeld::after{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,var(--deep) 0%,rgba(11,32,39,.7) 35%,rgba(11,32,39,.9) 100%);
}

/* --- 1. De vier redenen ------------------------------------------------ */
.vredenen{
  border-bottom:1px solid var(--line-deep);
  background:rgba(0,0,0,.22);
  margin-bottom:var(--sp7);
}
.vredenen__in{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--sp5);
  padding-block:var(--sp5);
}
.vreden{display:flex;gap:.7rem;align-items:flex-start;min-width:0}
.vreden__ico{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:2.4rem;height:2.4rem;
  border:1px solid var(--accent);
  color:var(--accent-bright);
}
.vreden b{
  display:block;
  font-size:var(--t3);font-weight:700;letter-spacing:-.01em;
  color:var(--ink-on-deep);
  line-height:1.2;
}
.vreden span{
  display:block;margin-top:.2rem;
  font-family:var(--f-text);font-size:var(--t2);line-height:1.45;
  color:var(--ink-on-deep-2);
}

/* --- 2. Merk, nieuwsbrief en navigatie --------------------------------- */
.footer__in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:var(--sp8);align-items:start;
}
.footer__merk .logo{color:var(--ink-on-deep)}
.footer__merk .logo small{color:var(--accent-bright)}
.footer__over{
  margin:var(--sp4) 0 var(--sp6);max-width:44ch;
  font-family:var(--f-text);font-size:var(--t3);line-height:1.55;
  color:var(--ink-on-deep-2);
}

/* --- 3. Het inschrijfveld ---------------------------------------------- */
.vnb{max-width:420px}
.vnb__lbl{
  display:block;margin-bottom:.5rem;
  font-family:var(--f-mono);font-size:var(--t2);font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent-bright);
}
.vnb__rij{
  display:flex;
  border:1.5px solid var(--line-deep);
  background:rgba(0,0,0,.28);
  transition:border-color .15s,box-shadow .15s;
}
.vnb__rij:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(0,173,186,.22);
}
.vnb__rij input{
  flex:1;min-width:0;
  border:0;background:transparent;
  padding:.72rem .8rem;
  font-size:var(--t3);color:var(--ink-on-deep);
}
.vnb__rij input::placeholder{color:var(--ink-3)}
.vnb__rij input:focus{outline:0}
.vnb__rij button{
  flex:0 0 auto;border:0;cursor:pointer;
  padding-inline:1.1rem;
  background:var(--accent);color:var(--deep);
  font-family:var(--f-mono);font-size:var(--t1);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  transition:background .15s;
}
.vnb__rij button:hover{background:var(--accent-bright)}
.vnb__klein{
  margin:.6rem 0 0;
  font-family:var(--f-text);font-size:var(--t2);line-height:1.45;
  color:var(--ink-3);
}

/* --- De drie kolommen -------------------------------------------------- */
.footer__nav{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp6);
}
.footer__kol{min-width:0}
.footer__kolkop{
  margin:0 0 var(--sp4);padding-bottom:.5rem;
  border-bottom:1px solid var(--line-deep);
  font-family:var(--f-mono);font-size:var(--t2);font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-on-deep);
}
.footer__kol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.footer__kol a{
  font-size:var(--t3);
  color:var(--ink-on-deep-2);text-decoration:none;
  border-left:2px solid transparent;padding-left:.45rem;margin-left:-.45rem;
  transition:color .12s,border-color .12s;
}
.footer__kol a:hover{color:var(--accent-bright);border-left-color:var(--accent)}

/* --- 4. De onderste regel ---------------------------------------------- */
.footer__bottom{
  margin-top:var(--sp7);padding-top:var(--sp5);
  border-top:1px solid var(--line-deep);
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp5);flex-wrap:wrap;
  font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.06em;
  color:var(--ink-3);
}
.footer__rechten{text-transform:uppercase}
.footer__juridisch{display:flex;gap:1rem;flex-wrap:wrap}
.footer__juridisch a{color:var(--ink-on-deep-2);text-decoration:none}
.footer__juridisch a:hover{color:var(--accent-bright)}

@media (max-width:1024px){
  .vredenen__in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__in{grid-template-columns:1fr;gap:var(--sp6)}
}

@media (max-width:640px){
  .vredenen__in{grid-template-columns:1fr;gap:var(--sp4)}
  .footer__nav{grid-template-columns:1fr;gap:var(--sp5)}
  .footer__bottom{flex-direction:column;align-items:flex-start;gap:var(--sp4)}
  .vnb{max-width:none}
}

/* Het logo in de voet. De witte versie is 165 pixels breed aangeleverd, dus
   hij wordt hier op 150 gezet: groter opblazen wordt zichtbaar zacht op een
   scherm met dubbele pixeldichtheid. Een grotere PNG of een SVG zou hier
   scherper staan. */
.logo--voet{display:inline-block;max-width:150px}
.logo--voet .logo__img{width:100%;height:auto;display:block}

/* =========================================================================
   67. DE STROOK MET DE VIER REDENEN

   Twee dingen waren mis. De iconen hoorden niet bij hun tekst: een naald
   bij "vanaf 16 stuks", een schild bij "proef vooraf" en een wereldbol bij
   "gratis verzending". Nu een stapel, een oog, een klok en een bestelbus,
   en dan hoef je de tekst niet te lezen om te weten wat er staat.

   En het vierkante kadertje eromheen maakte er vier lege lijstjes van. Weg
   dus, net als bij de beeldmerken in het megamenu. Het icoon staat nu vrij
   in de accentkleur, met een dunne lijn eronder in plaats van eromheen: dat
   verbindt het met de tekst in plaats van het ervan af te sluiten.
   ========================================================================= */
.vreden__ico{
  border:0;
  width:auto;height:auto;
  padding:.15rem .1rem .4rem;
  border-bottom:2px solid var(--accent);
  color:var(--accent-bright);
  align-self:flex-start;
}
.vreden{align-items:center;gap:.85rem}
.vreden b{font-size:var(--t3)}
/* De koppen zijn niet allemaal even lang; op één regel houden voorkomt dat
   de vier blokken verschillend hoog worden. */
.vreden b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Een productkenmerk met maar één mogelijkheid staat als tekst in plaats van
   als keuzelijst. Zie de filter in functions.php: er valt niets te kiezen,
   dus hoort er geen keuzelijst te staan. */
.vast-attr{
  display:inline-block;
  padding:.35rem 0;
  font-weight:600;font-size:var(--t3);color:var(--ink);
}

/* =========================================================================
   68. DE VOORWAARDENPAGINA

   Een pagina die niemand voor zijn plezier leest, maar waar mensen wel iets
   op moeten kunnen terugvinden. Daarom een inhoudsopgave die op een breed
   scherm meeloopt, en koppen die je van een afstand ziet: de twee delen
   (webshop en maatwerk) staan met een lijn erboven en de accentkleur, de
   onderdelen daarbinnen gewoon.

   Regelbreedte is hier bewust smal gehouden. Voorwaarden lezen is al werk
   genoeg zonder dat je regels van honderd tekens moet volgen.
   ========================================================================= */

.vw{display:grid;grid-template-columns:230px 1fr;gap:var(--sp8);align-items:start}
.vw__versie{margin-top:var(--sp4);font-size:var(--t3);color:var(--ink-3)}

.vw__index{position:sticky;top:calc(var(--header-h, 72px) + 16px)}
.vw__index-kop{
  margin:0 0 .6rem;font-family:var(--f-ui);font-size:var(--t2);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
}
.vw__index ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.vw__index li{margin:0}
.vw__index a{
  display:block;padding:.3rem 0 .3rem .8rem;
  font-size:var(--t3);line-height:1.35;color:var(--ink-2);text-decoration:none;
  border-left:2px solid transparent;margin-left:-2px;
}
.vw__index a:hover{color:var(--accent-ink);border-left-color:var(--accent)}
.vw__index-hoofd{margin-top:.5rem}
.vw__index-hoofd a{font-weight:700;color:var(--ink)}
.vw__index-hoofd:first-child{margin-top:0}

.vw__tekst{max-width:66ch}
.vw__tekst h2{
  font-size:clamp(1.35rem,2.6vw,var(--t8));letter-spacing:-.02em;
  margin:0 0 .6em;scroll-margin-top:calc(var(--header-h, 72px) + 20px);
}
.vw__tekst h2.vw__deel{
  margin-top:2.4em;padding-top:1.1em;border-top:3px solid var(--accent);
  color:var(--accent-ink);
}
.vw__tekst h3{
  scroll-margin-top:calc(var(--header-h, 72px) + 20px);
  margin:2em 0 .5em;font-size:var(--t6);
}
.vw__deel-intro{font-size:var(--t5);color:var(--ink-2)}

.vw__let{
  padding:var(--sp4) var(--sp5);background:#FFF8E6;
  border-left:3px solid #C08A00;font-size:var(--t4);line-height:1.6;
}
.vw__model{
  margin:1.2em 0 1.6em;padding:var(--sp5);
  background:var(--paper);border:1px solid var(--line);
  font-size:var(--t3);line-height:1.9;
}
.vw__model p{margin:0 0 .8em}
.vw__model p:last-child{margin:0}

.vw__voet{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--sp5);margin-top:var(--sp8);padding-top:var(--sp6);
  border-top:1px solid var(--line);
}
.vw__voet p{margin:0;max-width:52ch;color:var(--ink-2);font-size:var(--t4)}

@media (max-width:900px){
  .vw{grid-template-columns:1fr;gap:var(--sp6)}
  /* Op een telefoon is een meelopende inhoudsopgave alleen in de weg. Hij
     staat er nog wel, maar dan als gewoon lijstje bovenaan. */
  .vw__index{position:static}
  .vw__index ol{
    columns:2;column-gap:var(--sp5);
    border-left:0;border-top:1px solid var(--line);padding-top:.6rem;
  }
  .vw__index a{padding-left:0;border-left:0;margin-left:0}
  .vw__index a:hover{border-left:0}
}
@media (max-width:560px){
  .vw__index ol{columns:1}
}

/* =========================================================================
   69. AANPASSING V2

   De maatwerkkop krijgt hetzelfde beeld als de voorpagina. Hij stond op een
   vlakke donkere balk en dat is zonde voor de belangrijkste pagina van de
   site. De slider ernaast is eruit, dus de tekst mag nu de volle breedte
   gebruiken in plaats van de helft.
   ========================================================================= */

.uhero--beeld{
  position:relative;
  background-image:linear-gradient(
      to right,
      rgba(11,32,39,.92) 0%,
      rgba(11,32,39,.86) 46%,
      rgba(11,32,39,.55) 78%,
      rgba(11,32,39,.42) 100%
    ),var(--hero-beeld);
  background-size:cover,145% auto;
  background-position:center,center 30%;
  background-repeat:no-repeat;
}

/* De slider is weg, dus geen tweede kolom meer. Zonder dit blijft de tekst
   in een halve kolom staan met een gat ernaast. */
.uhero--beeld .uhero__grid,
.uhero__grid:not(:has(.uhero__slider)){
  grid-template-columns:1fr;
  max-width:none;
}
.uhero__grid:not(:has(.uhero__slider)) > div:first-child{max-width:64ch}

/* Op een telefoon moet het beeld niet met de tekst gaan vechten. */
@media (max-width:760px){
  .uhero--beeld{
    background-size:cover,190% auto;
    background-position:center,center 24%;
  }
}

/* De kop met beeld is donker; de gewone kop van een eenheid of missie is juist
   licht. Alles hieronder geldt daarom ALLEEN voor de versie met beeld.
   Deed ik dat niet, dan werden de labels op de eenheidspagina lichtgrijs op
   lichtgrijs en las je "Baret" en het aantal producten helemaal niet meer. */
.uhero--beeld{color:var(--ink-on-deep);border-bottom-color:transparent}
.uhero--beeld h1{color:var(--ink-on-deep)}
.uhero--beeld .uhero__alias{color:var(--accent-bright)}
.uhero--beeld .uhero__meta{border-top-color:rgba(255,255,255,.22)}
.uhero--beeld .uhero__meta dt{color:var(--ink-on-deep-2)}
.uhero--beeld .desig--deep{border-color:rgba(255,255,255,.3);color:var(--ink-on-deep-2)}
.uhero--beeld .desig--accent{border-color:var(--accent);color:var(--accent-bright)}
.uhero--beeld .btn--on-deep{border-color:var(--ink-on-deep);color:var(--ink-on-deep)}
.uhero--beeld .btn--on-deep:hover{background:var(--ink-on-deep);color:var(--deep)}

/* Iets meer beeld en iets minder sluier aan de rechterkant: zo zie je waar
   de pagina over gaat zonder dat de kop onleesbaar wordt. */
/*
 * De banner is een close-up van een coin met flinke letters erin. Die letters
 * liepen dwars achter de kop en achter de knoppen door, en dan lees je twee
 * teksten over elkaar heen. Links daarom vrijwel dicht, en pas vanaf de plek
 * waar de tekstkolom ophoudt laten we het beeld doorkomen.
 */
.uhero--beeld{
  background-image:linear-gradient(
      100deg,
      rgba(11,32,39,.985) 0%,
      rgba(11,32,39,.975) 42%,
      rgba(11,32,39,.86) 62%,
      rgba(11,32,39,.52) 82%,
      rgba(11,32,39,.34) 100%
    ),var(--hero-beeld);
  background-size:cover,cover;
  background-position:center,right center;
}

/* De getallen in de kop. Alleen op de versie met beeld, want die is donker.
   Eerst stond hier .uhero zonder meer, en toen werden op de eenheidspagina
   "Baret" en het aantal producten wit op lichtgrijs: onzichtbaar. */
.uhero--beeld .uhero__meta dd{color:var(--ink-on-deep)}
.uhero--beeld .uhero__meta dd small{color:var(--ink-on-deep-2) !important}

/* =========================================================================
   70. BREDERE PAGINA'S

   De veelgestelde vragen, de voorwaarden en de contactpagina stonden in de
   kolom die voor artikelen bedoeld is: 920 pixels breed met een regellengte
   van een boek. Dat leest fijn voor een verhaal en beroerd voor een naslagwerk
   met lijsten, tabellen en maattabellen erin.

   Berichten houden de smalle kolom. Pagina's krijgen de volle breedte.
   ========================================================================= */

.wrap--pagina{max-width:1180px}
.prose--breed{max-width:none}

/* Twee kolommen zodra er ruimte voor is. Een lijst met vragen naast elkaar
   scheelt scrollen, en de losse blokken van de oude pagina's vallen vanzelf
   goed uit. */
@media (min-width:1000px){
  .prose--breed > ul,
  .prose--breed > ol{columns:2;column-gap:var(--sp8)}
  .prose--breed > ul > li,
  .prose--breed > ol > li{break-inside:avoid}
}

/* Wat er uit de oude pagina's komt is niet altijd netjes; dit houdt het
   binnen de lijnen. */
.prose--breed img{max-width:100%;height:auto}
.prose--breed table{width:100%;border-collapse:collapse;margin:0 0 1.4em}
.prose--breed table td,
.prose--breed table th{border-bottom:1px solid var(--line);padding:.6em .8em;text-align:left}
.prose--breed table th{background:var(--paper);font-size:var(--t3);letter-spacing:.04em;text-transform:uppercase}
.prose--breed iframe{max-width:100%}

/* De voorwaardenpagina had zijn eigen smalle kolom. */
.vw__tekst{max-width:80ch}
.vw{grid-template-columns:250px 1fr}

/* =========================================================================
   71. DE PRODUCTFOTO BLIJFT STAAN

   De rechterkolom van een productpagina is bijna twee keer zo hoog als de
   foto ernaast. Wie naar de levertijd of de maten scrolde keek daarna tegen
   een halve meter wit aan. De foto schuift nu mee tot het einde van de kolom.
   ========================================================================= */

@media (min-width:900px){
  .pdp > :first-child{
    position:sticky;
    top:calc(var(--header-h, 96px) + 16px);
    align-self:start;
  }
}

/* =========================================================================
   72. DE BETAALMERKEN IN DE VOET

   Vijf woorden in een kadertje werden zes getekende merktekens. Ze staan op
   wit, want dat is hoe je ze kent, en ze zijn allemaal even hoog zodat de rij
   rustig blijft.
   ========================================================================= */

/* Sinds 16-09 zijn het de echte merktekens van Patrick: wit op doorzichtig,
   gemaakt voor deze donkere voet. Geen witte kaartjes meer eronder, dus ook
   geen tegels: het zijn gewoon zeven tekens op één lijn. De ruimte ertussen
   is iets ruimer dan eerst, want zonder kader lopen ze anders in elkaar. */
.pay{display:flex;gap:.95rem;align-items:center;flex-wrap:wrap}
.pay__tegel{display:inline-flex;line-height:0}
.pay__tegel svg,
.pay__tegel img{display:block;height:var(--pay-h,26px);width:auto}

/* Niet allemaal even hoog, wel even zwaar. Elk merkteken vult zijn vlak
   anders: "wero" is een breed woord van negentien pixels hoog, het logo van
   PostNL is een blok van zevenenveertig. Op één vaste hoogte wordt het ene
   een streepje en het andere een postzegel. Deze hoogtes zijn op een donkere
   ondergrond naast elkaar gelegd tot de rij rustig werd. */
.pay__tegel--bancontact{--pay-h:27px}
.pay__tegel--kbc{--pay-h:26px}
.pay__tegel--eps{--pay-h:26px}
.pay__tegel--paypal{--pay-h:25px}
.pay__tegel--wero{--pay-h:26px}
.pay__tegel--postnl{--pay-h:30px}

/* PostNL is bezorging, geen betaalmiddel. Een streep ervoor zegt dat zonder
   er een woord aan vuil te maken. */
.pay__tegel--postnl{margin-left:.35rem;padding-left:1.1rem;border-left:1px solid var(--line-deep)}

@media (max-width:560px){
  .pay{gap:.8rem}
  .pay__tegel svg,
  .pay__tegel img{height:calc(var(--pay-h,26px) * .85)}
  .pay__tegel--postnl{margin-left:.2rem;padding-left:.85rem}
}

/* Rasters voor een of twee producten. Een evenement waar één ding voor
   gemaakt is hoort niet in een rij met drie gaten te staan. */
.grid-prod--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-prod--1{grid-template-columns:minmax(0,340px)}
.eerste__meer{margin:var(--sp4) 0 0;font-size:var(--t3)}
.eerste__meer a{color:var(--accent-ink);text-decoration:none;font-weight:600}
.eerste__meer a:hover{text-decoration:underline}

/* =========================================================================
   73. DE CONTACTPAGINA

   Drie redenen waarom iemand hier komt, naast elkaar, met de maatwerkroute in
   de accentkleur omdat daar de omzet zit. Daaronder het formulier met de
   gegevens ernaast.
   ========================================================================= */

.ctroutes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.ctroute{background:var(--surface,#fff);padding:var(--sp6);display:flex;flex-direction:column;gap:.7rem}
.ctroute--accent{background:var(--paper)}
.ctroute__nr{
  font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.14em;
  color:var(--accent-ink);
}
.ctroute h2{font-size:var(--t6);letter-spacing:-.02em;margin:0}
.ctroute p{margin:0;font-size:var(--t3);line-height:1.6;color:var(--ink-2)}
.ctroute__snel{font-weight:600;color:var(--ink) !important}
.ctroute__snel a{color:var(--accent-ink);text-decoration:none}
.ctroute__snel a:hover{text-decoration:underline}
.ctroute .btn{align-self:flex-start;margin-top:.2rem}
.ctroute .link{margin-top:auto;font-size:var(--t3)}

.ctgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--sp8);align-items:start}
/* Het contactformulier.

   De velden erfden de verticale ruimte van het offerteformulier, waar elk veld
   een eigen blok in een lange kolom is. In twee kolommen naast elkaar pakt dat
   verkeerd uit: het linkerveld kreeg zijn ruimte onder zich en het rechterveld
   erboven, dus begonnen de twee kolommen niet op dezelfde hoogte. Hier dus één
   rustige regelafstand en velden die netjes bovenaan uitlijnen, verder precies
   dezelfde randen, letters en focuskleur als bij de offerte. */
.ctform{max-width:64ch}
.ctform .fld{padding:0;margin:0 0 var(--sp4)}
.ctform .grid2{margin-bottom:0;gap:0 var(--sp4);align-items:start}
.ctform .grid2 .fld{margin-bottom:var(--sp4)}
.ctform .fld:last-of-type{margin-bottom:0}
.ctform textarea{min-height:170px}
.ctform .btn{margin-top:var(--sp5)}
.ctform__klein{margin:var(--sp4) 0 0;font-size:var(--t2);line-height:1.6;color:var(--ink-3);max-width:56ch}
.lbl__opt{text-transform:none;letter-spacing:0;font-family:var(--f-text);color:var(--ink-3)}

/* Het veld voor de robots. Niet display:none, want sommige robots slaan dat
   juist over; wel volledig uit beeld en uit de voorleesvolgorde. */
.valstrik{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.ctzij{position:sticky;top:calc(var(--header-h, 96px) + 16px);display:grid;gap:var(--sp5)}
.ctkaart{border:1px solid var(--line);padding:var(--sp5) var(--sp5) var(--sp6)}
.ctkaart--stil{background:var(--paper)}
.ctlijst,.ctsnel{list-style:none;margin:var(--sp4) 0 0;padding:0}
.ctlijst li{display:grid;grid-template-columns:76px 1fr;gap:.6rem;padding:.5rem 0;border-top:1px solid var(--line);font-size:var(--t3)}
.ctlijst li:first-child{border-top:0}
.ctlijst span{font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.ctlijst a{color:var(--accent-ink);text-decoration:none}
.ctlijst a:hover{text-decoration:underline}
.ctsnel li{padding:.42rem 0;border-top:1px solid var(--line);font-size:var(--t3)}
.ctsnel li:first-child{border-top:0}
.ctsnel a{color:var(--ink-2);text-decoration:none}
.ctsnel a:hover{color:var(--accent-ink);text-decoration:underline}

@media (max-width:1000px){
  .ctroutes{grid-template-columns:1fr}
  .ctgrid{grid-template-columns:1fr;gap:var(--sp6)}
  .ctzij{position:static}
}
@media (max-width:620px){
  .ctform .grid2{grid-template-columns:1fr}
}

/* =========================================================================
   74. HET CADEAU BIJ EEN BESTELLING

   Twee toestanden. Onder de grens een balkje dat volloopt met "nog zoveel
   euro"; dat is het stukje dat mensen er nog iets bij laat leggen. Boven de
   grens de keuze zelf, als kaarten met een foto erop.

   De winkelwagen is een blok van WooCommerce en die brengt zijn eigen opmaak
   mee. Daarom staat dit blok er bewust los boven, met een eigen kader, in
   plaats van dat ik tussen hun HTML ga zitten.
   ========================================================================= */

.cadeau{
  margin:0 0 var(--sp6);
  padding:var(--sp5) var(--sp6) var(--sp6);
  border:2px solid var(--accent);
  background:var(--surface,#fff);
}
.cadeau--bijna{border-style:dashed;border-color:var(--line-2);padding-bottom:var(--sp5)}

.cadeau__kop{
  margin:0;font-family:var(--f-ui);font-weight:800;
  font-size:var(--t6);letter-spacing:-.02em;color:var(--ink);
}
.cadeau__tekst{margin:.3rem 0 0;color:var(--ink-2);font-size:var(--t3)}
.cadeau__bijna{margin:.4rem 0 .7rem;color:var(--ink-2);font-size:var(--t4)}
.cadeau__bijna strong{color:var(--accent-ink)}

.cadeau__balk{height:8px;background:var(--paper-2);overflow:hidden}
.cadeau__balk span{display:block;height:100%;background:var(--accent);transition:width .3s}

.cadeau__top{display:flex;gap:var(--sp5);align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.cadeau__zoek input{
  min-width:220px;padding:.5rem .7rem;
  border:1px solid var(--line);background:#fff;font:inherit;font-size:var(--t3);
}
.cadeau__zoek input:focus{outline:2px solid var(--accent);outline-offset:-1px}

.cadeau__gekozen{
  display:flex;align-items:center;gap:var(--sp4);
  margin:var(--sp5) 0 0;padding:var(--sp4);background:var(--paper);
}
.cadeau__gekozen img{width:56px;height:56px;object-fit:cover;display:block}
.cadeau__gekozen strong{display:block;font-size:var(--t4)}
.cadeau__gekozen span{display:block;font-size:var(--t2);color:var(--ink-3)}
.cadeau__gekozen form{margin-left:auto}
.cadeau__weg{
  background:none;border:1px solid var(--line-2);padding:.45rem .8rem;
  font:inherit;font-size:var(--t2);color:var(--ink-2);cursor:pointer;
}
.cadeau__weg:hover{border-color:var(--ink);color:var(--ink)}

.cadeau__grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
  margin-top:var(--sp5);
}
.cadeaukaart{
  display:flex;flex-direction:column;gap:.4rem;
  padding:var(--sp4);background:#fff;text-align:left;
}
.cadeaukaart__beeld img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.cadeaukaart__naam{font-weight:600;font-size:var(--t3);line-height:1.3;color:var(--ink)}
.cadeaukaart__waarde{font-size:var(--t2);color:var(--ink-3);margin-top:-.2rem}
.cadeaukaart__waarde .amount{text-decoration:line-through}
.cadeaukaart__knop{
  margin-top:auto;padding:.55rem .7rem;
  background:var(--accent);color:var(--deep);border:0;cursor:pointer;
  font:inherit;font-weight:700;font-size:var(--t2);
}
.cadeaukaart__knop:hover{background:var(--accent-bright)}
.cadeau__leeg{margin:var(--sp5) 0 0;color:var(--ink-3)}

/* Het merkteken op de regel in de winkelwagen. */
.cadeau-merk{
  display:inline-block;margin-left:.4rem;padding:.1rem .4rem;
  background:var(--accent);color:var(--deep);
  font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.08em;text-transform:uppercase;
}
.cadeau-gratis{font-weight:700;color:var(--accent-ink)}

@media (max-width:600px){
  .cadeau{padding:var(--sp4) var(--sp4) var(--sp5)}
  .cadeau__grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .cadeau__zoek input{min-width:0;width:100%}
  .cadeau__gekozen{flex-wrap:wrap}
  .cadeau__gekozen form{margin-left:0;width:100%}
  .cadeau__weg{width:100%}
}

/* De gekozen kaart. Hij blijft in het rooster staan zodat wisselen één klik
   is; een randje en een regeltje laten zien welke het is. */
.cadeaukaart--gekozen{outline:2px solid var(--accent);outline-offset:-2px;background:var(--paper)}
.cadeaukaart__gekozen{
  margin-top:auto;padding:.55rem .7rem;text-align:center;
  background:var(--deep);color:var(--ink-on-deep);
  font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.08em;text-transform:uppercase;
}
.cadeau__grid[hidden]{display:none}

/* =========================================================================
   75. HET OFFERTEFORMULIER, BIJGEWERKT

   Het bestandenveld was een <label> zonder display:block. Een inline element
   met padding en een streepjesrand eromheen breekt in tweeën zodra de tekst
   over twee regels loopt, en dan staat er een half kader boven een half
   kader. Vandaar flex, en meteen een pijltje erbij zodat je ziet dat je erop
   kunt klikken.
   ========================================================================= */

.drop{
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
  border:1.5px dashed var(--line-2);background:var(--surface);
  padding:var(--sp6) var(--sp5);text-align:center;cursor:pointer;
  transition:border-color .15s,background .15s;
}
.drop__ico{color:var(--accent-ink);margin-bottom:.15rem}
.drop b{display:block;font-size:var(--t4);margin:0}
.drop span{
  display:block;font-family:var(--f-text);font-size:var(--t3);
  color:var(--ink-3);max-width:46ch;line-height:1.5;
}
.drop:hover,
.drop:focus-within{border-color:var(--accent-ink);background:var(--accent-soft)}
.drop:focus-within{outline:2px solid var(--accent);outline-offset:2px}

.drop__lijst{
  margin:var(--sp3) 0 0;font-family:var(--f-mono);font-size:var(--t2);
  color:var(--accent-ink);line-height:1.7;
}

/* De optieblokken. Vier op een rij waar dat past, en een brede variant voor
   keuzes met een hele zin uitleg eronder. */
.opts--4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.opt--breed{grid-column:1 / -1}
.opt--breed span em{display:block;margin-top:.2rem;line-height:1.5;max-width:62ch}

.quote__eenmalig{
  font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);
}

/* Op een telefoon staat het prijspaneel onder het formulier, en dan wil je
   hem juist bovenaan in beeld houden terwijl je keuzes maakt. */
@media (max-width:900px){
  .cfg{display:block}
  .quote{
    position:sticky;top:auto;bottom:0;z-index:20;
    margin-top:var(--sp6);
    box-shadow:0 -8px 24px -12px rgba(11,32,39,.35);
  }
  .quote__body{padding:var(--sp4)}
  /* De bon zit hier achter één tik, zie blok 81. */
  .quote__meer{display:flex}
  .quote__bon{display:none}
  .quote.is-uit .quote__bon{display:block}
  .quote__hd{padding:var(--sp3) var(--sp4)}
  .quote__hd b{font-size:var(--t7)}
  .quote__note{font-size:var(--t2)}
  .opts--4{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
}

/* =========================================================================
   76. VEELGESTELDE VRAGEN

   De vragen zijn <details>-elementen, dus het openklappen doet de browser
   zelf. Wat hier staat is opmaak, en die is met de telefoon als uitgangspunt
   gemaakt: een aanraakvlak van ruim vijftig pixels hoog, een antwoord op
   leesmaat, en geen enkel element dat breder wil zijn dan het scherm.
   ========================================================================= */

.faqkop h1{margin:0 0 var(--sp3)}
.faqkop .lede{max-width:62ch}

.faqzoek{margin:var(--sp5) 0 0;max-width:34rem}
.faqzoek input{
  width:100%;padding:.95rem 1.05rem;
  border:1.5px solid var(--line-2);background:var(--surface);
  font:var(--t4)/1.4 var(--f-ui);color:var(--ink);
  transition:border-color .16s cubic-bezier(.2,.7,.3,1),box-shadow .16s;
}
.faqzoek input:focus{
  border-color:var(--accent-ink);outline:none;
  box-shadow:0 2px 12px rgba(0,114,124,.12);
}
.faqzoek__uit{
  margin:.5rem 0 0;min-height:1.2em;
  font-family:var(--f-mono);font-size:var(--t2);color:var(--accent-ink);
}

/* De sprongknoppen naar een groep. */
.faqsprong{display:flex;flex-wrap:wrap;gap:.5rem;margin:var(--sp5) 0 0}
.faqsprong a{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.55rem .9rem;border:1.5px solid var(--line-2);background:var(--surface);
  font-size:var(--t3);font-weight:600;color:var(--ink);text-decoration:none;
  transition:border-color .16s,background .16s,transform .16s;
}
.faqsprong a:hover{border-color:var(--accent-ink);background:#FBF6EC;transform:translateY(-1px)}
.faqsprong a span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:1.35rem;height:1.35rem;padding:0 .3rem;border-radius:999px;
  background:var(--accent-ink);color:#fff;
  font-family:var(--f-mono);font-size:var(--t1);font-weight:700;
}

.faqgroep__kop{margin:0 0 var(--sp4);padding-bottom:var(--sp3);border-bottom:2px solid var(--ink)}
.faqgroep__kop h2{margin:0 0 .25rem;font-size:var(--t7);letter-spacing:-.02em}
.faqgroep__kop p{margin:0;font-family:var(--f-text);color:var(--ink-3);max-width:60ch}

.faqlijst{display:grid;gap:.6rem}

.vraag{
  border:1.5px solid var(--line);background:var(--surface);
  transition:border-color .16s cubic-bezier(.2,.7,.3,1),box-shadow .16s;
}
.vraag:hover{border-color:var(--line-2)}
.vraag[open]{border-color:var(--accent-ink);box-shadow:0 4px 16px rgba(0,114,124,.1)}

.vraag summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.05rem 1.15rem;min-height:3.4rem;
  cursor:pointer;list-style:none;
  font-size:var(--t4);font-weight:700;line-height:1.4;color:var(--ink);
}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary:focus-visible{outline:2px solid var(--accent-ink);outline-offset:-2px}
.vraag[open] summary{color:var(--accent-ink)}

/* Het plusje dat een minnetje wordt. Twee streepjes, eentje draait weg. */
.vraag__teken{position:relative;flex:0 0 auto;width:1.1rem;height:1.1rem}
.vraag__teken::before,.vraag__teken::after{
  content:"";position:absolute;left:0;top:50%;
  width:1.1rem;height:2px;margin-top:-1px;background:var(--accent-ink);
  transition:transform .22s cubic-bezier(.34,1.4,.64,1),opacity .18s;
}
.vraag__teken::after{transform:rotate(90deg)}
.vraag[open] .vraag__teken::after{transform:rotate(0);opacity:0}

.vraag__a{padding:0 1.15rem 1.25rem;max-width:68ch}
.vraag__a p{margin:0 0 .85rem;font-family:var(--f-text);font-size:var(--t4);line-height:1.7;color:var(--ink-2)}
.vraag__a p:last-child{margin-bottom:0}
.vraag__a strong{color:var(--ink)}
.vraag__a ul{margin:0 0 .85rem;padding-left:1.15rem}
.vraag__a li{margin:0 0 .4rem;font-family:var(--f-text);font-size:var(--t4);line-height:1.65;color:var(--ink-2)}
.vraag__a a:not(.btn){color:var(--accent-ink);text-underline-offset:.2em}
.vraag__a .btn{margin-top:.35rem}

/* Het blok onderaan. */
.faqhulp{
  display:grid;grid-template-columns:1.4fr 1fr;gap:var(--sp5);align-items:center;
  padding:var(--sp5);background:var(--deep);color:var(--ink-on-deep);
}
.faqhulp h2{margin:.2rem 0 .5rem;color:#fff;font-size:var(--t7)}
.faqhulp p{margin:0;font-family:var(--f-text);color:var(--ink-on-deep-2);max-width:46ch}
.faqhulp__knoppen{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:flex-end}
.faqhulp .btn--ghost{border-color:var(--line-deep);color:var(--ink-on-deep)}
.faqhulp .btn--ghost:hover{background:var(--accent);border-color:var(--accent);color:var(--deep)}

@media (max-width:900px){
  .faqhulp{grid-template-columns:1fr;gap:var(--sp4)}
  .faqhulp__knoppen{justify-content:flex-start}
}

@media (max-width:640px){
  /* Op een telefoon leest een antwoord het prettigst met wat meer lucht
     tussen de regels en een iets kleinere kop, maar het aanraakvlak van de
     vraag blijft groot: daar tik je op. */
  .faqzoek{margin-top:var(--sp4)}
  .faqzoek input{padding:.9rem 1rem;font-size:16px}
  .faqsprong{gap:.4rem}
  .faqsprong a{padding:.5rem .7rem;font-size:var(--t2)}
  .faqgroep__kop h2{font-size:var(--t6)}
  .vraag summary{padding:.95rem 1rem;font-size:15px;min-height:3.2rem}
  .vraag__a{padding:0 1rem 1.2rem}
  /* Zestien pixels met veel regelafstand: dat is de maat waarop je op een
     telefoon een alinea van vijf regels nog zonder moeite uitleest. */
  .vraag__a p,.vraag__a li{font-size:16px;line-height:1.8}
  .vraag__a ul{padding-left:1.05rem}
  .vraag__a li{margin-bottom:.55rem}
  .vraag__a .btn{width:100%;justify-content:center;text-align:center}
  .faqhulp{padding:var(--sp4)}
  .faqhulp__knoppen .btn{width:100%;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .vraag,.vraag__teken::before,.vraag__teken::after,.faqsprong a,.faqzoek input{transition:none}
  .faqsprong a:hover{transform:none}
}

/* =========================================================================
   77. OVER GORILLA SHOP

   Een verhaalpagina, dus leesmaat voorop: één kolom tekst van hooguit 68
   tekens breed, en alleen bij de vier productblokken en de cijfers een raster.
   ========================================================================= */

.overkop h1{margin:0 0 var(--sp3);letter-spacing:-.02em}
.overkop .lede{max-width:60ch}

.overcijfers{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
}
.overcijfers div{padding:var(--sp4);background:var(--surface);text-align:center}
.overcijfers b{
  display:block;font-family:var(--f-kop);font-size:var(--t8);line-height:1;
  letter-spacing:-.02em;color:var(--accent-ink);
}
.overcijfers span{
  display:block;margin-top:.4rem;font-family:var(--f-mono);font-size:var(--t1);
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
}

.overtekst{max-width:68ch}
.overtekst h2{
  margin:var(--sp6) 0 var(--sp3);font-size:var(--t7);letter-spacing:-.02em;
  padding-bottom:.5rem;border-bottom:2px solid var(--ink);
}
.overtekst h2:first-child{margin-top:0}
.overtekst h3{
  margin:var(--sp4) 0 .3rem;font-size:var(--t4);color:var(--accent-ink);
  letter-spacing:-.01em;
}
.overtekst p{
  margin:0 0 var(--sp3);font-family:var(--f-text);font-size:var(--t4);
  line-height:1.75;color:var(--ink-2);
}
.overtekst strong{color:var(--ink)}

.overkaarten{
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp3);
  margin:0 0 var(--sp4);
}
.overkaarten article{padding:var(--sp4);border:1.5px solid var(--line);background:var(--surface)}
.overkaarten h3{margin:0 0 .4rem;font-size:var(--t4);color:var(--accent-ink)}
.overkaarten p{margin:0;font-size:var(--t3);line-height:1.65}

.overlangs{
  display:grid;grid-template-columns:1.5fr 1fr;gap:var(--sp5);align-items:center;
  padding:var(--sp5);background:var(--deep);color:var(--ink-on-deep);
}
.overlangs h2{margin:.2rem 0 .6rem;color:#fff;font-size:var(--t7)}
.overlangs p{margin:0 0 .6rem;font-family:var(--f-text);color:var(--ink-on-deep-2);max-width:48ch}
.overlangs__adres{font-family:var(--f-mono)!important;font-size:var(--t2)!important;color:var(--accent-bright)!important}
.overlangs__knoppen{display:flex;flex-direction:column;gap:.6rem}
.overlangs .btn--ghost{border-color:var(--line-deep);color:var(--ink-on-deep)}
.overlangs .btn--ghost:hover{background:var(--accent);border-color:var(--accent);color:var(--deep)}

.overklein{font-size:var(--t2);color:var(--ink-3);max-width:68ch}
.overklein a{color:var(--accent-ink)}

@media (max-width:900px){
  .overcijfers{grid-template-columns:repeat(2,1fr)}
  .overlangs{grid-template-columns:1fr;gap:var(--sp4)}
}

@media (max-width:640px){
  .overkaarten{grid-template-columns:1fr}
  .overcijfers div{padding:var(--sp3)}
  .overcijfers b{font-size:var(--t7)}
  /* Een verhaal lees je op een telefoon met grotere letters en meer lucht. */
  .overtekst p{font-size:16px;line-height:1.8}
  .overtekst h2{font-size:var(--t6)}
  .overlangs{padding:var(--sp4)}
  .overlangs__knoppen .btn{width:100%;justify-content:center}
}

/* ------------------------------------------------------------------
   78. Jouw aanvraag, in het prijspaneel

   Naast de prijs hoort te staan waar die prijs bij hoort. Anders ziet
   iemand wel een bedrag maar niet meer waarvoor, en dat is precies waar
   de twijfel begint vlak voor het versturen. De keuzes staan boven de
   opbouw, want eerst wat je hebt gevraagd, dan wat het kost.
   ------------------------------------------------------------------ */
.quote__kop{
  font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);
  margin:0 0 .55rem;font-weight:600;
}
.quote__keuzes{margin-bottom:var(--sp4)}
.quote__keus{display:flex;flex-direction:column;gap:.05rem;margin:0}
.quote__keus .quote__row{padding:.34rem 0;border-bottom:1px dashed var(--line)}
.quote__keus .quote__row:last-child{border-bottom:0}
.quote__keus dd{font-weight:600;font-size:var(--t3)}

/* Tijdens het rekenen dimt de aanvraag mee, anders lijkt hij los te staan. */
.quote.is-rekenen .quote__keus{opacity:.45}
.quote .quote__keus{transition:opacity .18s ease-out}

/* ------------------------------------------------------------------
   79. Een fieldset die zich als een gewoon veldblok gedraagt

   Een fieldset komt met een eigen rand, marge en padding uit de browser.
   Die moeten weg, maar de streep en de ruimte van .fld horen te blijven:
   die maken juist dat je in het formulier ziet waar de ene vraag ophoudt
   en de volgende begint. Eerder stond die reset inline in het sjabloon en
   nam hij ook het ontwerp mee, waardoor Techniek en Formaat tegen elkaar
   aan plakten terwijl de blokken eronder wel netjes gescheiden stonden.

   min-inline-size is geen detail: zonder die regel weigert een fieldset
   smaller te worden dan zijn inhoud, en schiet een raster erbinnen uit
   zijn kolom op een smal scherm.
   ------------------------------------------------------------------ */
fieldset.fld{
  border-left:0;border-right:0;border-bottom:0;
  margin:0;
  min-inline-size:auto;
}

/* ------------------------------------------------------------------
   80. De producten in één aanvraag

   Shirts én coins én een vlag horen één gesprek te zijn. De mand staat
   bovenaan in het prijspaneel, want dat is waar je je afvraagt of alles
   er wel in zit. Het kruisje mag rustig blijven: iemand die twijfelt
   moet iets kunnen weghalen zonder opnieuw te beginnen.
   ------------------------------------------------------------------ */
.quote__mand{margin-bottom:var(--sp4)}
.mand{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem}
.mand__r{
  display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:.55rem;
  padding:.5rem .6rem;background:var(--wash);border:1px solid var(--line);
}
.mand__t{font-size:var(--t3);font-weight:600;line-height:1.25}
.mand__b{
  font-family:var(--f-mono);font-size:var(--t2);font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.mand__x{
  appearance:none;border:0;background:transparent;cursor:pointer;
  font-size:1.05rem;line-height:1;padding:.2rem .3rem;color:var(--ink-3);
  border-radius:2px;transition:color .14s ease-out,background-color .14s ease-out;
}
.mand__x:hover{color:var(--alarm);background:rgba(0,0,0,.05)}
.mand__x:focus-visible{outline:2px solid var(--accent-ink);outline-offset:1px}

/* De knop om er nog een product bij te doen. */
.meer .btn{margin-top:.2rem}

/* ------------------------------------------------------------------
   81. De bon, op mobiel achter één tik

   Op een breed scherm staat het prijspaneel naast het formulier en kan
   alles gewoon open. Op mobiel plakt hij onderaan het scherm, en dan
   dekt de volledige bon het formulier af waar je nog aan het kiezen
   bent. Weglaten is geen optie: juist bij meerdere producten wil je
   kunnen nalopen wat erin zit. Dus staat hij er wel, achter een knop,
   met een eigen schuifbalk zodat hij nooit het hele scherm opslokt.
   ------------------------------------------------------------------ */
.quote__meer{
  display:none; /* Alleen op smalle schermen, zie de mediaregel hierboven. */
  width:100%;align-items:center;justify-content:space-between;gap:.6rem;
  appearance:none;background:transparent;cursor:pointer;
  border:0;border-bottom:1px solid var(--line);
  padding:0 0 var(--sp3);margin:0 0 var(--sp3);
  font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;text-align:left;
}
.quote__meer[hidden]{display:none} /* `display:flex` hieronder wint anders van hidden. */
.quote__meer:hover{color:var(--accent-ink)}
.quote__meer:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
/* Het pijltje is de enige aanwijzing dat hier iets open kan. Dat mag je
   zien: de knoptekst staat in kleine kapitalen, dus op .85em verdween hij
   vrijwel. Nu een eigen maat, los van de tekst ernaast. */
.quote__meer-pijl{
  font-size:1.4rem;line-height:1;color:var(--accent-ink);
  transition:transform .18s ease-out;
}
.quote.is-uit .quote__meer-pijl{transform:rotate(180deg)}

@media (max-width:900px){
  /* Dit blok staat achteraan in het bestand en heeft dus het laatste woord. */
  .quote__meer{display:flex}
  .quote__meer[hidden]{display:none}
  .quote__bon{display:none}
  .quote.is-uit .quote__bon{display:block}

  /* Nooit meer dan een deel van het scherm, en met een eigen schuifbalk. */
  .quote.is-uit .quote__bon{
    max-height:46vh;overflow-y:auto;overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    margin-bottom:var(--sp3);
    /* De schuifbalk komt binnen dit vak te staan en de bedragen lijnen
       rechts uit. Zonder deze marge verdwijnt de laatste letter eronder. */
    padding-right:.6rem;
    scrollbar-gutter:stable;
  }
}

/* ------------------------------------------------------------------
   82. Keuzevakjes even hoog

   De vakjes stonden op `min-height:100%`, maar een percentagehoogte
   heeft een ouder met een vaste hoogte nodig en die is er in een raster
   niet. Gevolg: "Coins & tokens" brak over twee regels en werd hoger dan
   "Patches" ernaast. Op een breed scherm valt dat nauwelijks op, op een
   telefoon staan ze twee naast elkaar en zie je het meteen.

   Twee dingen samen: het vakje mag zichzelf uitrekken binnen zijn cel,
   en alle rijen krijgen de hoogte van de hoogste. Dan staat de hele
   groep als een blok, ook als de ene tekst langer is dan de andere.
   ------------------------------------------------------------------ */
.opts{grid-auto-rows:1fr}
.opt{display:flex}
.opt > span{flex:1 1 auto}

/* De losse vinkjes buiten een raster houden hun eigen breedte. */
.opt[style*="block"]{display:block}

/* ------------------------------------------------------------------
   83. De aanvraag als lijst

   Het hoofdscherm. Eén kaart per product, met de prijs rechts en twee
   knopjes eronder. Geen randen om alles heen: de kaart doet het werk,
   de rest blijft rustig. Wie nog niets heeft gekozen ziet een uitnodiging
   in plaats van een leeg vlak, want een leeg vlak zegt niet wat je moet
   doen.
   ------------------------------------------------------------------ */
.leeg{padding:var(--sp5) 0 var(--sp4)}
.leeg__t{font-weight:800;font-size:var(--t6);letter-spacing:-.025em;margin:0 0 .5rem}
.leeg__h{font-family:var(--f-text);font-size:var(--t4);color:var(--ink-3);margin:0;max-width:52ch}

.rij{display:flex;flex-direction:column;gap:.6rem;margin:0 0 var(--sp5)}

.kaart{
  border:1.5px solid var(--line-2);background:var(--surface);
  padding:var(--sp4);
  transition:border-color .16s ease-out,box-shadow .16s ease-out;
}
.kaart:hover{border-color:var(--ink-3);box-shadow:0 2px 10px -6px rgba(11,32,39,.3)}
.kaart__kop{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp3)}
.kaart__t{
  font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent-ink);margin:0;font-weight:600;
}
.kaart__b{
  font-family:var(--f-mono);font-size:var(--t5);font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.kaart__r{
  font-size:var(--t4);font-weight:600;line-height:1.35;
  margin:.35rem 0 .7rem;
}
.kaart__k{display:flex;gap:.9rem;align-items:center}

.knopje{
  appearance:none;border:0;background:transparent;padding:.2rem 0;cursor:pointer;
  font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.09em;
  text-transform:uppercase;font-weight:600;color:var(--accent-ink);
  border-bottom:1.5px solid currentColor;
  transition:color .14s ease-out;
}
.knopje:hover{color:var(--ink)}
.knopje--weg{color:var(--ink-3)}
.knopje--weg:hover{color:var(--alarm)}
.knopje:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px}

/* Het productpad staat onder de hoofdbalk en is duidelijk ondergeschikt. */
.cfg__steps--sub{margin-top:calc(var(--sp6) * -1 + .5rem)}
.cfg__steps--sub .cfg__step{background:var(--wash)}
.cfg__steps--sub .cfg__step b{font-weight:600}

/* `display:flex` uit blok 537 wint het van het hidden-attribuut, dus die
   moet hier expliciet terug. Zonder dit blijft het productpad in beeld
   terwijl je op je aanvraag kijkt, en dan lijkt het of je er middenin zit. */
.cfg__steps[hidden]{display:none}

/* Het product dat je op dit moment aanpast, in de bon. */
.mand__r.is-nu{border-color:var(--accent-ink);background:var(--surface)}

/* Op de lijst gaat de kop over de hele aanvraag, dus mag het bedrag groter. */
.quote.is-lijst .quote__hd b{font-size:var(--t7)}

/* ------------------------------------------------------------------
   84. Impressies

   Het werk van Patrick. De foto's verschillen sterk in verhouding —
   een spandoek is breed, een coin is vierkant, een tattoo staand — dus
   geen vaste beeldverhouding die overal bijsnijdt. Een kolomraster laat
   elke foto zijn eigen hoogte houden; dat leest als een prikbord, en dat
   is precies wat dit is.
   ------------------------------------------------------------------ */
.imfilter{
  display:flex;flex-wrap:wrap;gap:.45rem;
  margin:0 0 var(--sp5);
}
.imfilter__k{
  appearance:none;cursor:pointer;
  border:1.5px solid var(--line-2);background:var(--surface);color:var(--ink);
  padding:.5rem .9rem;
  font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.08em;
  text-transform:uppercase;font-weight:600;
  display:inline-flex;align-items:center;gap:.5rem;
  transition:border-color .14s ease-out,background .14s ease-out,color .14s ease-out;
}
.imfilter__k span{
  font-variant-numeric:tabular-nums;color:var(--ink-3);
  font-size:.92em;
}
.imfilter__k:hover{border-color:var(--ink-3)}
.imfilter__k.is-aan{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.imfilter__k.is-aan span{color:var(--accent-bright)}
.imfilter__k:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}

/* Kolommen in plaats van een raster: elke foto houdt zijn eigen hoogte. */
.imgrid{columns:4 260px;column-gap:var(--sp4)}
.imkaart{
  break-inside:avoid;margin:0 0 var(--sp4);
  background:var(--surface);border:1px solid var(--line);
}
.imkaart[hidden]{display:none}
.imkaart__k{
  display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
  position:relative;line-height:0;
}
.imkaart__k img{display:block;width:100%;height:auto}
.imkaart__k:focus-visible{outline:2px solid var(--accent-ink);outline-offset:-2px}

/* Het loepje verschijnt pas bij zweven; op aanraakschermen staat het er altijd. */
.imkaart__loep{
  position:absolute;top:.6rem;right:.6rem;
  width:2rem;height:2rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(11,32,39,.78);color:#fff;
  opacity:0;transform:scale(.9);
  transition:opacity .16s ease-out,transform .16s ease-out;
}
.imkaart__k:hover .imkaart__loep,
.imkaart__k:focus-visible .imkaart__loep{opacity:1;transform:scale(1)}
@media (hover:none){ .imkaart__loep{opacity:1;transform:scale(1)} }

.imkaart__t{
  padding:.7rem .85rem .8rem;
  font-size:var(--t3);font-weight:600;line-height:1.3;
}
.imkaart__t span{
  display:block;margin-top:.25rem;
  font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);font-weight:400;
}
.imleeg{color:var(--ink-3);font-style:italic}

/* ---- Op ware grootte ---- */
.imgroot{
  position:fixed;top:0;right:0;bottom:0;left:0;z-index:120;
  background:rgba(11,32,39,.94);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(1rem,4vw,3rem);
}
.imgroot[hidden]{display:none}
.imgroot__vak{margin:0;max-width:min(1100px,92vw);text-align:center}
.imgroot__vak img{
  display:block;max-width:100%;max-height:78vh;width:auto;height:auto;margin:0 auto;
  background:#0B2027;
}
.imgroot__vak figcaption{
  margin-top:.9rem;color:#E9F1F3;
  font-family:var(--f-mono);font-size:var(--t2);letter-spacing:.06em;
}
.imgroot__sluit,.imgroot__pijl{
  position:absolute;appearance:none;border:0;cursor:pointer;
  background:rgba(255,255,255,.1);color:#fff;
  width:2.9rem;height:2.9rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background .14s ease-out;
}
.imgroot__sluit{top:1rem;right:1rem;font-size:1.7rem}
.imgroot__pijl{top:50%;transform:translateY(-50%);font-size:2rem}
.imgroot__pijl--links{left:1rem}
.imgroot__pijl--rechts{right:1rem}
.imgroot__sluit:hover,.imgroot__pijl:hover{background:rgba(255,255,255,.22)}
.imgroot__sluit:focus-visible,.imgroot__pijl:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px}

/* ---- De uitnodiging ---- */
.imoproep{
  border:1.5px solid var(--line-2);background:var(--wash);
  padding:var(--sp5);
}
.imoproep h2{font-size:var(--t6);letter-spacing:-.02em;margin:0 0 .6rem}
.imoproep p{max-width:62ch}
.imoproep__k{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:var(--sp4)}

@media (max-width:900px){
  .imgrid{columns:2 150px;column-gap:var(--sp3)}
  .imkaart{margin-bottom:var(--sp3)}
  .imgroot__pijl{width:2.4rem;height:2.4rem;font-size:1.6rem}
  .imgroot__vak img{max-height:66vh}
}

/* ------------------------------------------------------------------
   85. De headerstrook boven de voorpagina

   Volle breedte, geen marges: dit is een beeldmerk en geen inhoudsblok.
   De hoogte komt van het beeld zelf, dus de strook verspringt niet als
   Patrick er een andere verhouding in zet.
   ------------------------------------------------------------------ */
.kopstrook{background:var(--ink);line-height:0;position:relative}

/*
 * De naad tussen de banner en de hero eronder wegvagen.
 *
 * De banner eindigde met een kaarsrechte rand en daaronder begon het lichte
 * vlak van de hero. Twee blokken op elkaar dus, terwijl het één kop hoort te
 * zijn. Deze sluier loopt van niets naar de achtergrondkleur van de hero, zodat
 * het beeld erin oplost in plaats van afgesneden te worden.
 *
 * De kleur staat hier twee keer: één keer doorzichtig, één keer vol. Dat is
 * geen slordigheid maar noodzaak — `transparent` is in een verloop zwart met
 * alpha nul, en dat geeft een grijze waas halverwege. Wie --paper wijzigt,
 * wijzigt hier dus ook de bovenste waarde.
 */
.kopstrook::after{
  content:"";
  position:absolute;left:0;right:0;bottom:-1px;
  height:clamp(40px,7vw,96px);
  background:linear-gradient(to bottom, rgba(244,247,248,0) 0%, var(--paper) 92%);
  pointer-events:none;
}
.kopstrook__p,.kopstrook__l{display:block}
.kopstrook img{
  display:block;width:100%;height:auto;
  /* Heel brede banners op een klein scherm hoeven niet volledig in beeld;
     zo blijft de strook een strook in plaats van een streepje. */
  object-fit:cover;
}
.kopstrook__l{transition:opacity .16s ease-out}
.kopstrook__l:hover{opacity:.93}
.kopstrook__l:focus-visible{outline:2px solid var(--accent-bright);outline-offset:-3px}

/* ------------------------------------------------------------------
   86. Een projectfoto die zichzelf mag zijn

   De foto's van Patrick lopen sterk uiteen: staand, liggend, vierkant,
   en zelden breder dan duizend pixels. Een vaste verhouding met een
   uitsnede sneed staande foto's doormidden en rekte smalle foto's tot
   over de volle breedte uit, waardoor ze wazig werden. Hier houdt het
   beeld zijn eigen maat en verhouding, gecentreerd op de donkere
   ondergrond die er toch al was.
   ------------------------------------------------------------------ */
.shot--vrij{
  aspect-ratio:auto;
  display:flex;align-items:center;justify-content:center;
  min-height:clamp(220px,32vw,420px);
  padding:var(--sp3);
}
.shot--vrij img{
  width:auto;height:auto;
  max-width:100%;max-height:clamp(260px,46vw,560px);
  object-fit:contain;
}

/* ------------------------------------------------------------------
   87. De kop van een pagina

   Overal op de site staat hetzelfde patroon: een klein label, daaronder
   de H1, daaronder de inleiding. Op de voorpagina klopte dat, op de
   andere pagina's niet:

     - het label bleef op .78rem staan terwijl het in de hero .875rem is,
       waardoor het onder een kop van bijna zeventig pixels wegviel;
     - de H1 had geen marge eronder, dus de inleiding plakte er tegenaan.
       Op de voorpagina valt dat niet op omdat die kop veel kleiner is,
       maar op een paginakop van 68 pixels is nul ruimte gewoon fout.

   Het wordt hier op het patroon gedaan en niet in vijftien sjablonen:
   een label dat direct door een H1 wordt gevolgd ís de kop van een
   pagina. Dat scheelt vijftien plekken die uit elkaar kunnen lopen.

   De hero en de eenheidskop houden hun eigen maatvoering, die klopte al.
   ------------------------------------------------------------------ */
.eyebrow:has(+ h1){
  font-size:var(--t3);
  letter-spacing:.14em;
}

.eyebrow + h1{
  margin-bottom:var(--sp5);
}

/* Daar was niets mis mee, dus daar blijven we vanaf. */
.hero .eyebrow + h1,
.uhero .eyebrow + h1,
.sectorhero .eyebrow + h1{
  margin-bottom:0;
}

@media (max-width:700px){
  /* Op een smal scherm is de kop kleiner, dus mag de ruimte ook wat terug. */
  .eyebrow + h1{ margin-bottom:var(--sp4) }
}

/* =========================================================================
   88. DE REST VAN EEN FILTERLIJST

   In het filtermenu stond onderaan "+ 4 meer, kies er een om verder te
   gaan", maar er viel niets te kiezen: die vier stonden er domweg niet.
   Nu staan ze er wel, ingeklapt, met een knop erbij.
   ========================================================================= */

.facet label[hidden]{display:none} /* `display:flex` hierboven wint anders van hidden. */

.facet__meer{
  display:block;width:100%;text-align:left;
  margin:.45rem 0 0;padding:.35rem 0 0;
  border:0;background:none;cursor:pointer;
  font-family:var(--f-mono);font-size:var(--t1);letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent-ink);
}
.facet__meer:hover{text-decoration:underline}
.facet__meer:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* =========================================================================
   89. DE NIEUWSBRIEFKEUZE OP DE VOORPAGINA

   Er stonden twaalf "interesses" die nergens op uitkwamen. Nu twee vakjes
   die echt meegaan met het formulier, op de donkere ondergrond van die
   sectie.
   ========================================================================= */

.nbkies__vakjes{display:grid;gap:.55rem;margin:.2rem 0 var(--sp5);max-width:52ch}
.nbkies__vak{
  display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:start;
  color:var(--ink-on-deep-2);font-size:var(--t3);line-height:1.45;cursor:pointer;
}
.nbkies__vak input{
  margin-top:.22rem;width:16px;height:16px;flex:0 0 16px;
  accent-color:var(--accent);
}
.nbkies__vak:hover{color:var(--ink-on-deep)}
.nbkies__vak input:checked + span{color:var(--ink-on-deep)}

/* =========================================================================
   90. HET MAATWERKBLOK IN EEN ZIJBALK

   `.upsell` is een grid van twee kolommen: tekst links, knop rechts. In een
   zijbalk past dat niet — de knop is 265 pixels breed en laat voor de tekst
   een reepje over. Deze variant zet alles onder elkaar.
   ========================================================================= */

.upsell--kolom{grid-template-columns:minmax(0,1fr);align-items:start;gap:var(--sp4)}
.upsell--kolom .btn{width:100%;justify-content:center}

/* =========================================================================
   91. HET RADARBEELD

   Gemaakt voor de aftelklok van de verhuizing en bewaard als los onderdeel:
   `get_template_part( 'parts/radar' )` binnen een donker vlak. Drie ringen,
   een fijn raster dat naar de randen wegvalt, en een straal die er acht
   seconden over doet. Traag genoeg om rustig te blijven, net genoeg beweging
   om te laten zien dat er iets leeft.

   De ouder heeft `position:relative` en meestal `overflow:hidden` nodig; wat
   erbovenop moet komen een eigen `z-index`.
   ========================================================================= */

.radar{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}

.radar__raster{
  position:absolute;inset:-2px;
  background-image:
    linear-gradient(rgba(0,173,186,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,173,186,.06) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 70% at var(--radar-x,50%) var(--radar-y,42%),#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at var(--radar-x,50%) var(--radar-y,42%),#000 30%,transparent 78%);
}

.radar__ring,
.radar__sweep{
  position:absolute;left:var(--radar-x,50%);top:var(--radar-y,42%);
  aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
}

.radar__ring--1{width:min(150vw,1100px);border:1px solid rgba(0,173,186,.10)}
.radar__ring--2{width:min(100vw,760px);border:1px solid rgba(0,173,186,.14)}
.radar__ring--3{width:min(62vw,470px);border:1px solid rgba(0,173,186,.18)}

.radar__sweep{
  width:min(150vw,1100px);
  background:conic-gradient(from 0deg,rgba(0,173,186,.22),rgba(0,173,186,0) 28%);
  animation:radar-draai 8s linear infinite;
}

@keyframes radar-draai{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* Het middelpunt verzetten voor een blok waar de tekst links of rechts staat. */
.radar--links{--radar-x:22%}
.radar--rechts{--radar-x:78%}

@media (prefers-reduced-motion:reduce){
  .radar__sweep{animation:none}
}