/* ==========================================================================
   D&C Food - webshop voor de groothandel
   Licht en rustig, marineblauw met een rood accent. Gebouwd voor een catalogus van honderden
   producten: alles draait om scanbaarheid en snelheid van filteren.
   ========================================================================== */

:root{
  --wit:      #ffffff;
  --pagina:   #f4f7fb;
  --vlak:     #ffffff;
  --vlak-2:   #eef3f9;
  --lijn:     #dde5ef;
  --lijn-2:   #c7d4e4;

  /* De huisstijl van D&C: diep marineblauw met rood als accent. */
  --blauw:      #17337a;
  --blauw-dk:   #0f2255;
  --blauw-lt:   #e8edf8;
  --blauw-zacht:#f4f7fd;
  --marine:     #12275a;
  --accent:     #e01a2b;
  --accent-dk:  #b31220;

  --tekst:    #10233b;
  --tekst-2:  #4a5c74;
  --zwak:     #7c8ca3;

  --groen:    #0f9d58;
  --groen-lt: #e6f6ee;
  --oranje:   #e8830c;
  --oranje-lt:#fdf1e3;
  --rood:     #d93636;
  --rood-lt:  #fdecec;

  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Consolas, monospace;

  --wrap: 1340px;
  --r:    14px;
  --r-sm: 9px;
  --r-xs: 6px;

  --schaduw:    0 1px 2px rgba(16,35,59,.06), 0 2px 8px rgba(16,35,59,.05);
  --schaduw-op: 0 6px 16px rgba(16,35,59,.10), 0 12px 32px rgba(16,35,59,.08);
  --ease:   cubic-bezier(.22,.61,.36,1);
  --veer:   cubic-bezier(.34,1.4,.64,1);
}

/* --------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:130px}
body{
  margin:0;background:var(--pagina);color:var(--tekst);
  font-family:var(--sans);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.2;font-weight:700;letter-spacing:-.015em}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--blauw);outline-offset:2px;border-radius:4px}
::selection{background:var(--blauw);color:#fff}

.wrap{width:min(100% - clamp(24px,4vw,64px),var(--wrap));margin-inline:auto}
.skip{position:absolute;left:-9999px;background:var(--blauw);color:#fff;padding:12px 20px;z-index:300}
.skip:focus{left:12px;top:12px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.zwak{color:var(--zwak)}
.klein{font-size:.85rem}

/* =======================================================================
   Knoppen
   ======================================================================= */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border:1px solid transparent;border-radius:var(--r-sm);
  font-size:.9rem;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background .2s var(--ease),border-color .2s,color .2s,
             transform .2s var(--veer),box-shadow .2s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn-blauw{background:var(--blauw);color:#fff;box-shadow:0 1px 2px rgba(23,51,122,.3)}
.btn-blauw:hover{background:var(--blauw-dk);box-shadow:0 4px 12px rgba(23,51,122,.32);transform:translateY(-1px)}
.btn-licht{background:var(--vlak);color:var(--tekst);border-color:var(--lijn-2)}
.btn-licht:hover{border-color:var(--blauw);color:var(--blauw);background:var(--blauw-zacht)}
.btn-zacht{background:var(--blauw-lt);color:var(--blauw-dk)}
.btn-zacht:hover{background:#d9e6fd}
.btn-groen{background:var(--groen);color:#fff}
.btn-groen:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn.sm{padding:8px 14px;font-size:.82rem}
.btn.lg{padding:14px 26px;font-size:.98rem}
.btn.blok{width:100%}
.btn[disabled],.btn.bezig{opacity:.55;pointer-events:none}
.btn-link{padding:0;border:0;background:none;color:var(--blauw);font-weight:600}
.btn-link:hover{text-decoration:underline}

/* =======================================================================
   Kop
   Een zwevende pil in plaats van drie balken onder elkaar. Bij het scrollen
   krimpt hij en schuift het bandje erboven weg.
   ======================================================================= */

/* -------------------------------------------------- bandje helemaal boven */
.lint-boven{
  background:var(--tekst);color:#a9c0dc;font-size:.78rem;
  transition:height .3s var(--ease),opacity .25s var(--ease);
  height:34px;overflow:hidden}
.lb-in{width:min(100% - clamp(24px,4vw,64px),var(--wrap));margin-inline:auto;
  display:flex;align-items:center;gap:20px;height:34px}
.lb-usp{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.lb-usp::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--groen);flex:none}
.lb-rechts{margin-left:auto;display:flex;gap:16px;white-space:nowrap}
.lb-rechts a{color:#fff;font-weight:550}
.lb-rechts a:hover{color:#9fc4ff}
@media (max-width:900px){
  .lb-usp:nth-child(2),.lb-usp:nth-child(3){display:none}
}
@media (max-width:560px){
  .lb-rechts a:last-child{display:none}
}

/* ---------------------------------------------------------------- de pil */
.kop{position:sticky;top:12px;z-index:120;padding:12px 0 0;
  width:min(100% - clamp(20px,4vw,64px),var(--wrap));margin-inline:auto}

.kop-pil{
  position:relative;display:flex;align-items:center;gap:10px;
  padding:9px 9px 9px 16px;border-radius:999px;
  background:rgba(255,255,255,.86);
  box-shadow:0 1px 2px rgba(16,35,59,.06),
             0 10px 30px rgba(16,35,59,.10),
             inset 0 0 0 1px rgba(255,255,255,.7);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  transition:padding .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);
}
/* Dunne rand die met de pil meebuigt. */
.kop-pil::before{content:"";position:absolute;inset:0;border-radius:inherit;
  border:1px solid rgba(16,35,59,.07);pointer-events:none}

/* Zodra je scrolt wordt hij compacter en verdwijnt het bandje. */
body.gescrold .lint-boven{height:0;opacity:0}
body.gescrold .kop{top:8px}
body.gescrold .kop-pil{padding:6px 6px 6px 14px;
  background:rgba(255,255,255,.94);
  box-shadow:0 1px 2px rgba(16,35,59,.06),0 14px 34px rgba(16,35,59,.14),
             inset 0 0 0 1px rgba(255,255,255,.75)}

/* ----------------------------------------------------------------- merk */
.merk{display:flex;align-items:center;gap:10px;font-size:1.14rem;font-weight:800;
  letter-spacing:-.03em;flex:none;transition:transform .25s var(--veer)}
.merk:hover{transform:translateY(-1px)}
.kop-merkteken{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;flex:none;
  background:linear-gradient(140deg,#2a4d9e,var(--marine) 55%,#0a1838);color:#fff;
  box-shadow:0 3px 10px rgba(23,51,122,.36);transition:transform .35s var(--veer)}
.merk:hover .kop-merkteken{transform:rotate(-8deg) scale(1.06)}
.merk-woordmerk b{color:var(--blauw)}
@media (max-width:1180px){ .merk-woordmerk{display:none} }

/* ------------------------------------------------------------ pilknoppen */
.pilknop{
  position:relative;display:inline-flex;align-items:center;gap:7px;flex:none;
  padding:9px 15px;border:0;border-radius:999px;background:transparent;cursor:pointer;
  font-size:.87rem;font-weight:600;color:var(--tekst-2);white-space:nowrap;
  transition:color .2s,background .2s var(--ease),transform .2s var(--veer)}
.pilknop:hover{color:var(--tekst);background:rgba(16,35,59,.05)}
.pilknop:active{transform:scale(.97)}
.pilknop.aan{background:var(--blauw-lt);color:var(--blauw-dk)}
.pk-mega{background:var(--tekst);color:#fff;box-shadow:0 3px 10px rgba(16,35,59,.22)}
.pk-mega:hover{background:#1c3a5e}
.pk-pijl{transition:transform .3s var(--veer);opacity:.75}
.pk-mega[aria-expanded="true"] .pk-pijl{transform:rotate(180deg)}

.pil-nav{display:flex;align-items:center;gap:2px;flex:none}
@media (max-width:1080px){ .pil-nav{display:none} }

/* --------------------------------------------------------------- zoeken */
.zoek{position:relative;flex:1 1 auto;min-width:0}
.zoek input{
  width:100%;height:40px;padding:0 44px 0 40px;border-radius:999px;
  border:1px solid transparent;background:rgba(16,35,59,.05);font-size:.9rem;
  transition:background .2s,border-color .2s,box-shadow .25s var(--ease)}
.zoek input::placeholder{color:#8b9bb0}
.zoek input:hover{background:rgba(16,35,59,.075)}
.zoek input:focus{outline:none;background:var(--wit);border-color:var(--blauw);
  box-shadow:0 0 0 4px rgba(23,51,122,.13)}
.zoek .loep{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--zwak);pointer-events:none;transition:color .2s}
.zoek:focus-within .loep{color:var(--blauw)}
.zoek button{position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:50%;
  background:var(--blauw);color:#fff;cursor:pointer;
  transition:background .2s,transform .25s var(--veer)}
.zoek button:hover{background:var(--blauw-dk);transform:translateY(-50%) scale(1.06)}

.suggesties{
  position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:60;
  background:var(--wit);border:1px solid var(--lijn);border-radius:16px;
  box-shadow:0 18px 46px rgba(16,35,59,.16);overflow:hidden;max-height:64vh;overflow-y:auto;
  animation:opkomen .22s var(--ease) both}
.suggesties[hidden]{display:none}
.suggesties a{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--lijn)}
.suggesties a:last-child{border-bottom:0}
.suggesties a:hover,.suggesties a.actief{background:var(--blauw-zacht)}
.suggesties img{width:38px;height:38px;object-fit:contain;border-radius:8px;background:var(--vlak-2);flex:none}
.suggesties .s-naam{font-weight:600;font-size:.88rem;line-height:1.3}
.suggesties .s-merk{font-size:.76rem;color:var(--zwak)}
.suggesties .s-prijs{margin-left:auto;font-weight:700;color:var(--blauw);white-space:nowrap}
.suggesties .leeg{padding:16px;text-align:center;color:var(--zwak);font-size:.88rem}

/* ------------------------------------------------------------- ronde knoppen */
.kop-acties{display:flex;align-items:center;gap:6px;flex:none}
.rondknop{position:relative;display:grid;place-items:center;width:40px;height:40px;
  border:0;border-radius:50%;background:rgba(16,35,59,.05);color:var(--tekst);cursor:pointer;
  transition:background .2s,color .2s,transform .22s var(--veer)}
.rondknop:hover{background:var(--blauw-lt);color:var(--blauw-dk);transform:translateY(-2px)}
.rondknop:active{transform:scale(.94)}
.rondknop .stip{position:absolute;right:8px;top:8px;width:7px;height:7px;border-radius:50%;
  background:var(--groen);box-shadow:0 0 0 2px rgba(255,255,255,.9)}
.mandjeknop{background:var(--blauw);color:#fff}
.mandjeknop:hover{background:var(--blauw-dk);color:#fff}
.telling{position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 5px;
  display:grid;place-items:center;border-radius:99px;background:var(--tekst);color:#fff;
  font-size:.68rem;font-weight:800;box-shadow:0 0 0 2px rgba(255,255,255,.9);
  transition:transform .35s var(--veer)}
.telling:empty{display:none}
.enkel-mobiel{display:none}
@media (max-width:760px){
  .zoek{display:none}
  .enkel-mobiel{display:grid}
  body.zoekopen .zoek{display:block;position:absolute;left:12px;right:12px;top:calc(100% + 8px)}
  body.zoekopen .zoek input{background:var(--wit);box-shadow:0 10px 30px rgba(16,35,59,.16)}
}

/* --------------------------------------------------------------- megamenu */
.mega-houder{position:relative;flex:none}
.mega{
  position:absolute;left:0;top:calc(100% + 14px);z-index:70;
  width:min(84vw,880px);padding:22px;border-radius:20px;
  background:var(--wit);border:1px solid var(--lijn);
  box-shadow:0 24px 60px rgba(16,35,59,.18);
  animation:megaop .26s var(--ease) both}
.mega[hidden]{display:none}
@keyframes megaop{from{opacity:0;transform:translateY(-8px) scale(.985)}to{opacity:1;transform:none}}
.mega-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,178px),1fr));gap:6px 22px}
.mega-kolom{min-width:0}
.mega h4{font-size:.82rem;margin:0 0 6px}
.mega h4 a{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:9px;
  color:var(--tekst);font-weight:700}
.mega h4 a:hover{background:var(--blauw-zacht);color:var(--blauw-dk)}
.mega-ic{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;flex:none;
  background:var(--blauw-lt);color:var(--blauw);transition:transform .3s var(--veer)}
.mega-ic svg{width:16px;height:16px}
.mega h4 a:hover .mega-ic{transform:rotate(-8deg) scale(1.08)}
.mega-kolom > a{display:flex;align-items:center;padding:5px 8px 5px 42px;border-radius:8px;
  font-size:.85rem;color:var(--tekst-2);
  transition:background .15s,color .15s,padding-left .2s var(--ease)}
.mega-kolom > a:hover{background:var(--vlak-2);color:var(--blauw);padding-left:46px}
.mega-kolom > a .n{margin-left:auto;font-size:.75rem;color:var(--zwak);
  background:var(--vlak-2);border-radius:99px;padding:1px 7px}
.mega-kolom > a:hover .n{background:var(--blauw-lt);color:var(--blauw-dk)}
.mega-voet{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--lijn)}
.mega-voet a{padding:8px 15px;border-radius:999px;background:var(--vlak-2);
  font-size:.84rem;font-weight:600;color:var(--tekst-2);
  transition:background .2s,color .2s,transform .2s var(--veer)}
.mega-voet a:hover{background:var(--blauw);color:#fff;transform:translateY(-2px)}
@media (max-width:900px){ .mega{display:none!important} }

/* ------------------------------------------------------------ mobiel menu */
.burger{display:none}
@media (max-width:1080px){ .burger{display:grid} }
.burger span,.burger span::before,.burger span::after{
  position:absolute;left:50%;width:17px;height:2px;background:currentColor;border-radius:2px;
  transition:transform .3s var(--veer),opacity .2s}
.burger span{top:50%;transform:translate(-50%,-50%)}
.burger span::before,.burger span::after{content:"";left:0}
.burger span::before{top:-6px} .burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

.mob{position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:60}
.mob[hidden]{display:none}
.mob-in{padding:10px;border-radius:20px;background:var(--wit);border:1px solid var(--lijn);
  box-shadow:0 22px 54px rgba(16,35,59,.18);max-height:70vh;overflow-y:auto;
  animation:megaop .24s var(--ease) both}
.mob-in a{display:flex;align-items:center;padding:12px 14px;border-radius:11px;
  font-size:.93rem;font-weight:600;color:var(--tekst);
  transition:background .16s,padding-left .2s var(--ease)}
.mob-in a:hover{background:var(--blauw-zacht);color:var(--blauw-dk);padding-left:18px}
.mob-in a .n{margin-left:auto;font-size:.76rem;font-weight:700;color:var(--zwak);
  background:var(--vlak-2);border-radius:99px;padding:2px 8px}
.mob-in a.uit{color:var(--tekst-2)}
.mob-in a.uit:first-of-type{margin-top:6px;border-top:1px solid var(--lijn);
  border-radius:0 0 11px 11px;padding-top:16px}

/* De inhoud begint onder de zwevende pil. */
body{padding-bottom:1px}
main{padding-top:22px}

@media (prefers-reduced-motion:reduce){
  .kop,.kop-pil,.lint-boven{transition:none}
}

/* =======================================================================
   Kruimelpad en koppen
   ======================================================================= */
.kruimels{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.82rem;color:var(--zwak);padding:16px 0}
.kruimels a:hover{color:var(--blauw)}
.kruimels span::after{content:"/";margin-left:6px;color:var(--lijn-2)}
.kruimels span:last-child::after{content:""}

.paginakop{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.paginakop h1{font-size:clamp(1.5rem,3vw,2.1rem)}
.paginakop p{margin:6px 0 0;color:var(--tekst-2);max-width:70ch}

/* =======================================================================
   Productkaarten
   ======================================================================= */
.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,215px),1fr));gap:16px}
.kaart{
  position:relative;display:flex;flex-direction:column;background:var(--wit);
  border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden;
  transition:border-color .2s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease);
}
.kaart:hover{border-color:var(--lijn-2);box-shadow:var(--schaduw-op);transform:translateY(-3px)}
.kaart-foto{position:relative;aspect-ratio:1;background:var(--vlak-2);display:grid;place-items:center;overflow:hidden}
.kaart-foto img{width:100%;height:100%;object-fit:contain;padding:12px;transition:transform .4s var(--ease)}
.kaart:hover .kaart-foto img{transform:scale(1.05)}
.kaart-body{display:flex;flex-direction:column;gap:5px;padding:13px 14px 0;flex:1}
.kaart-merk{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--blauw)}
.kaart-naam{font-size:.9rem;font-weight:600;line-height:1.35;color:var(--tekst);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kaart-meta{font-size:.78rem;color:var(--zwak)}
.kaart-voet{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:10px 14px 14px}
.prijs{display:flex;flex-direction:column;line-height:1.15}
.prijs b{font-size:1.12rem;font-weight:800;letter-spacing:-.02em}
.prijs small{font-size:.72rem;color:var(--zwak)}
.prijs .aanvraag{font-size:.88rem;font-weight:600;color:var(--zwak)}

.vlag{position:absolute;top:9px;left:9px;z-index:2;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.vlag span{padding:3px 8px;border-radius:99px;font-size:.68rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.vlag .nieuw{background:var(--blauw);color:#fff}
.vlag .top{background:var(--oranje-lt);color:var(--oranje)}
.vlag .b2b{background:var(--tekst);color:#fff}

.voorraad{display:inline-flex;align-items:center;gap:5px;font-size:.75rem;font-weight:600}
.voorraad::before{content:"";width:6px;height:6px;border-radius:50%}
.voorraad.ok{color:var(--groen)}   .voorraad.ok::before{background:var(--groen)}
.voorraad.laag{color:var(--oranje)}.voorraad.laag::before{background:var(--oranje)}
.voorraad.uit{color:var(--rood)}   .voorraad.uit::before{background:var(--rood)}

/* Toevoegknop verschijnt bij hover, maar is op touch altijd zichtbaar. */
.snel-toe{
  position:absolute;right:9px;bottom:9px;width:38px;height:38px;border-radius:50%;
  border:0;background:var(--blauw);color:#fff;display:grid;place-items:center;cursor:pointer;
  box-shadow:0 3px 10px rgba(23,51,122,.35);
  opacity:0;transform:translateY(6px) scale(.9);
  transition:opacity .2s var(--ease),transform .25s var(--veer),background .2s;
}
.kaart:hover .snel-toe,.snel-toe:focus-visible{opacity:1;transform:none}
.snel-toe:hover{background:var(--blauw-dk)}
@media (hover:none){ .snel-toe{opacity:1;transform:none} }

/* =======================================================================
   Filters
   ======================================================================= */
.shop{display:grid;grid-template-columns:262px minmax(0,1fr);gap:26px;align-items:start;padding-bottom:60px}
.zijbalk{position:sticky;top:150px;max-height:calc(100vh - 170px);overflow-y:auto;padding-right:4px}
.filterblok{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);padding:16px 16px 6px;margin-bottom:14px}
.filterblok h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.07em;color:var(--zwak);margin-bottom:10px}
.filterlijst{list-style:none;margin:0;padding:0;max-height:290px;overflow-y:auto}
.filterlijst li{margin-bottom:2px}
.filterlijst a,.filterlijst label{
  display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--r-xs);
  font-size:.87rem;color:var(--tekst-2);cursor:pointer;transition:background .15s,color .15s;
}
.filterlijst a:hover,.filterlijst label:hover{background:var(--blauw-zacht);color:var(--blauw)}
.filterlijst .aan{background:var(--blauw-lt);color:var(--blauw-dk);font-weight:600}
.filterlijst .n{margin-left:auto;font-size:.78rem;color:var(--zwak)}
.filterlijst .aan .n{color:var(--blauw-dk)}

.balk{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);padding:11px 14px;margin-bottom:16px}
.balk select{padding:8px 12px;border:1px solid var(--lijn-2);border-radius:var(--r-sm);background:var(--vlak)}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;
  background:var(--blauw-lt);color:var(--blauw-dk);font-size:.8rem;font-weight:600}
.chip a{opacity:.6} .chip a:hover{opacity:1}

.pagineer{display:flex;justify-content:center;align-items:center;gap:6px;margin:32px 0 0;flex-wrap:wrap}
.pagineer a,.pagineer span{min-width:38px;height:38px;padding:0 11px;display:grid;place-items:center;
  border:1px solid var(--lijn);border-radius:var(--r-sm);background:var(--wit);font-size:.88rem;font-weight:600}
.pagineer a:hover{border-color:var(--blauw);color:var(--blauw)}
.pagineer .nu{background:var(--blauw);color:#fff;border-color:var(--blauw)}
.pagineer .leeg{border:0;background:none}

/* =======================================================================
   Meldingen en lege toestanden
   ======================================================================= */
.melding{padding:13px 16px;border-radius:var(--r-sm);font-size:.9rem;border:1px solid;margin-bottom:16px}
.melding-ok{background:var(--groen-lt);border-color:#b9e4cd;color:#0b6b3d}
.melding-fout{background:var(--rood-lt);border-color:#f3c2c2;color:#a12222}
.melding-info{background:var(--blauw-lt);border-color:#c5dafb;color:var(--blauw-dk)}
.melding-let{background:var(--oranje-lt);border-color:#f6d9b4;color:#9a5a06}

.leeg-blok{background:var(--wit);border:1px dashed var(--lijn-2);border-radius:var(--r);padding:54px 24px;text-align:center}
.leeg-blok b{display:block;font-size:1.05rem;margin-bottom:6px}
.leeg-blok p{color:var(--zwak);margin:0}

/* =======================================================================
   Voet
   ======================================================================= */
.voet{background:var(--tekst);color:#a9bcd2;margin-top:50px;padding:46px 0 22px;font-size:.88rem}
.voet h4{color:#fff;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px}
.voet a{color:#a9bcd2} .voet a:hover{color:#fff}
.voet ul{list-style:none;margin:0;padding:0;line-height:2}
.voet-onder{border-top:1px solid rgba(255,255,255,.1);padding-top:18px;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-size:.82rem;color:#89a0ba}

/* =======================================================================
   Responsief
   ======================================================================= */
@media (max-width:1080px){
  .shop{grid-template-columns:1fr}
  .zijbalk{position:static;max-height:none;display:none}
  .zijbalk.open{display:block}
}
@media (max-width:820px){
  .pk-mega span{display:none}
  .pk-mega{padding:9px 11px}
}
@media (max-width:560px){
  .raster{grid-template-columns:repeat(auto-fill,minmax(min(100%,155px),1fr));gap:11px}
  .kaart-body{padding:11px 11px 0}
  .kaart-voet{padding:8px 11px 11px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* =======================================================================
   Startpagina
   ======================================================================= */
.blok{padding:38px 0 6px}
.blok-kop{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px}
.blok-kop h2{font-size:clamp(1.15rem,2.2vw,1.5rem)}

/* =======================================================================
   Productpagina
   ======================================================================= */
.product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:38px;align-items:start;padding-bottom:16px}
.product-foto{position:relative;background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);
  display:grid;place-items:center;padding:30px;aspect-ratio:1;overflow:hidden}
.product-foto img{width:100%;height:100%;object-fit:contain}
.product-info h1{font-size:clamp(1.4rem,2.8vw,2rem);margin:6px 0 14px}
.product-meta{display:flex;gap:18px;flex-wrap:wrap;align-items:center;font-size:.88rem;color:var(--tekst-2);margin-bottom:16px}
.product-oms{color:var(--tekst-2)}

.koopblok{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);padding:18px;margin-top:20px}
.koop-keuze{display:grid;gap:9px;margin-bottom:16px}
.koop-optie{display:flex;align-items:center;gap:12px;padding:13px 15px;border:1px solid var(--lijn-2);
  border-radius:var(--r-sm);cursor:pointer;transition:border-color .2s,background .2s}
.koop-optie:hover{border-color:var(--blauw)}
.koop-optie.aan{border-color:var(--blauw);background:var(--blauw-zacht);box-shadow:inset 0 0 0 1px var(--blauw)}
.koop-optie input{accent-color:var(--blauw);width:17px;height:17px;flex:none}
.ko-naam{font-weight:600;font-size:.92rem}
.ko-prijs{margin-left:auto;text-align:right;font-weight:800;font-size:1.02rem}
.ko-korting{display:block;font-size:.74rem;font-weight:600;color:var(--groen)}

.staffel{width:100%;border-collapse:collapse;font-size:.85rem;margin-bottom:16px}
.staffel caption{text-align:left;font-size:.78rem;color:var(--zwak);padding-bottom:7px}
.staffel th,.staffel td{padding:7px 9px;border-bottom:1px solid var(--lijn);text-align:left}
.staffel th{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--zwak)}
.staffel .r{text-align:right;font-weight:700}

.koop-actie{display:flex;gap:11px;align-items:stretch}
.koop-actie .btn{flex:1}
.aantal{display:flex;align-items:center;border:1px solid var(--lijn-2);border-radius:var(--r-sm);overflow:hidden;background:var(--wit)}
.aantal button{width:40px;border:0;background:var(--vlak-2);font-size:1.1rem;font-weight:700;cursor:pointer;
  color:var(--tekst-2);transition:background .15s}
.aantal button:hover{background:var(--blauw-lt);color:var(--blauw)}
.aantal input{width:56px;border:0;text-align:center;font-weight:700;-moz-appearance:textfield}
.aantal input::-webkit-outer-spin-button,.aantal input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.koop-totaal{margin:12px 0 0}

.product-specs{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin-top:26px;
  padding-top:20px;border-top:1px solid var(--lijn);font-size:.9rem}
.product-specs dt{color:var(--zwak)}
.product-specs dd{margin:0;font-weight:600}

/* =======================================================================
   Toasts
   ======================================================================= */
.toasts{position:fixed;right:16px;bottom:16px;z-index:200;display:flex;flex-direction:column;gap:9px}
.toast{padding:12px 17px;border-radius:var(--r-sm);background:var(--tekst);color:#fff;font-size:.88rem;
  font-weight:600;box-shadow:var(--schaduw-op);opacity:0;transform:translateY(10px);
  transition:opacity .25s var(--ease),transform .3s var(--veer);max-width:320px}
.toast.in{opacity:1;transform:none}
.toast.fout{background:var(--rood)}
.toast.ok::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--groen);margin-right:8px;vertical-align:middle}

[data-toevoegen].gelukt{background:var(--groen)!important}
[data-toevoegen].bezig{opacity:.6;pointer-events:none}
.s-alles{justify-content:center!important;background:var(--vlak-2);font-weight:700;color:var(--blauw)}

.filterknop{display:none}
@media (max-width:1080px){ .filterknop{display:inline-flex} }
@media (max-width:900px){
  .product{grid-template-columns:1fr;gap:24px}
}
@media (max-width:560px){
  .koop-actie{flex-direction:column}
  .merkraster{grid-template-columns:repeat(auto-fill,minmax(min(100%,110px),1fr))}
}

/* =======================================================================
   Beweging
   Een webshop mag niet aanvoelen als een spreadsheet. Alles wat je kan
   aanraken reageert, en er trekt licht over wat belangrijk is.
   ======================================================================= */

@keyframes glans{ from{transform:translateX(-160%) skewX(-18deg)} to{transform:translateX(360%) skewX(-18deg)} }
@keyframes opkomen{ from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
@keyframes pols{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.14)} }
@keyframes wiebel{ 0%,100%{transform:rotate(0)} 25%{transform:rotate(-7deg)} 75%{transform:rotate(7deg)} }
@keyframes schuif{ from{background-position:200% 0} to{background-position:-200% 0} }

/* ------------------------------------------------------------- knoppen */
.btn-blauw,.btn-groen{overflow:hidden;isolation:isolate}
.btn-blauw::after,.btn-groen::after{
  content:"";position:absolute;top:-60%;bottom:-60%;left:-40%;width:34%;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);transition:left .6s var(--ease);
}
.btn-blauw:hover::after,.btn-groen:hover::after{left:150%}
.btn-licht{overflow:hidden;isolation:isolate}
.btn-licht::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;transform:scale(.92);
  background:radial-gradient(120% 160% at 50% 120%,rgba(23,51,122,.14),transparent 70%);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.btn-licht:hover::after{opacity:1;transform:scale(1)}

/* ---------------------------------------------------------- productkaart */
.kaart{isolation:isolate}
/* Lichtveeg over de kaart bij hover. */
.kaart::after{
  content:"";position:absolute;top:-60%;bottom:-60%;left:-45%;width:32%;z-index:3;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);
  transform:skewX(-16deg);transition:left .75s var(--ease);
}
.kaart:hover::after{left:150%}
/* Blauwe gloed die van onderaf opkomt. */
.kaart::before{
  content:"";position:absolute;inset:auto 0 0 0;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--blauw),#5aa0ff,var(--blauw));
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.kaart:hover::before{transform:scaleX(1)}
.kaart-foto::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(70% 60% at 50% 100%,rgba(23,51,122,.10),transparent 70%);
  transition:opacity .35s var(--ease);
}
.kaart:hover .kaart-foto::after{opacity:1}
.kaart:hover .kaart-naam{color:var(--blauw)}
.kaart-naam{transition:color .2s var(--ease)}
.kaart-merk{position:relative;display:inline-block;width:fit-content}
.kaart-merk::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.kaart-merk:hover::after{transform:scaleX(1)}
.kaart .prijs b{transition:transform .3s var(--veer)}
.kaart:hover .prijs b{transform:scale(1.06)}

/* Kaarten komen op zodra ze in beeld schuiven. */
.raster > .kaart{animation:opkomen .5s var(--ease) both;animation-delay:calc(var(--i,0)*38ms)}

/* -------------------------------------------------------------- vlaggen */
.vlag .nieuw{position:relative;overflow:hidden}
.vlag .nieuw::after{
  content:"";position:absolute;top:-60%;bottom:-60%;left:-50%;width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);
  transform:skewX(-18deg);animation:glans 3.4s var(--ease) infinite;
}

/* -------------------------------------------------------------- tegels */
.merktegel,.cattegel{position:relative;overflow:hidden;isolation:isolate}
.merktegel::after{
  content:"";position:absolute;top:-60%;bottom:-60%;left:-45%;width:30%;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(23,51,122,.14),transparent);
  transform:skewX(-16deg);transition:left .7s var(--ease);
}
.merktegel:hover::after{left:150%}

/* ------------------------------------------------------------ mandje */
.telling.springt{animation:pols .45s var(--veer)}
.rondknop:hover svg{animation:wiebel .5s var(--ease)}

/* --------------------------------------------------------- koopblok */
.koop-optie{position:relative;overflow:hidden;isolation:isolate}
.koop-optie::after{
  content:"";position:absolute;top:-60%;bottom:-60%;left:-45%;width:30%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(23,51,122,.13),transparent);
  transform:skewX(-16deg);transition:left .65s var(--ease);
}
.koop-optie:hover::after{left:150%}
.koop-optie.aan .ko-prijs{color:var(--blauw)}

/* --------------------------------------------------------- filters */
.filterlijst a{position:relative}
.filterlijst a::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:2px;
  background:var(--blauw);transform:scaleY(0);transition:transform .25s var(--ease);
}
.filterlijst a:hover::before,.filterlijst a.aan::before{transform:scaleY(1)}
.chip{transition:transform .2s var(--veer),background .2s}
.chip:hover{transform:translateY(-1px);background:#d9e6fd}

/* ------------------------------------------------------- zoekbalk */
.zoek input{transition:border-color .2s,background .2s,box-shadow .25s var(--ease),transform .2s var(--ease)}
.zoek:focus-within input{transform:translateY(-1px)}
.suggesties a{transition:background .15s,padding-left .2s var(--ease)}
.suggesties a:hover,.suggesties a.actief{padding-left:20px}

/* --------------------------------------------------- skeletlader */
.skelet{
  background:linear-gradient(90deg,var(--vlak-2) 25%,#e3ebf5 37%,var(--vlak-2) 63%);
  background-size:400% 100%;animation:schuif 1.3s ease infinite;border-radius:var(--r-xs);
}

@media (prefers-reduced-motion:reduce){
  .kaart::after,.tegel::after,.merktegel::after,.btn-blauw::after,.koop-optie::after,
  .b2b-band::after,.vlag .nieuw::after{display:none}
  .raster > .kaart,.merktegel,.cattegel{animation:none}
}

/* =======================================================================
   Startpagina als winkel
   Geen landingspagina met verkooppraat, maar meteen waar je heen wil.
   ======================================================================= */

/* ------------------------------------------------------------ lintbalk */
.lint{background:var(--wit);border-bottom:1px solid var(--lijn)}
.lint-in{display:flex;gap:8px;align-items:center;overflow-x:auto;scrollbar-width:none;padding:10px 0}
.lint-in::-webkit-scrollbar{display:none}
.lint-item{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:99px;
  background:var(--vlak-2);font-size:.82rem;color:var(--tekst-2);white-space:nowrap;
  transition:background .2s,color .2s,transform .2s var(--veer)}
.lint-item b{color:var(--tekst);font-weight:700}
a.lint-item:hover{background:var(--blauw-lt);color:var(--blauw-dk);transform:translateY(-1px)}
.lint-b2b{background:var(--blauw);color:#fff!important}
.lint-b2b b{color:#fff}
a.lint-b2b:hover{background:var(--blauw-dk)}

/* ------------------------------------------------------------- kiezer */
.kiezer{margin:26px 0 8px}
.kiezer-tabs{position:relative;display:flex;gap:4px;border-bottom:1px solid var(--lijn);margin-bottom:20px}
.kiezer-tab{position:relative;padding:12px 20px;border:0;background:none;cursor:pointer;
  font-size:1.02rem;font-weight:700;color:var(--zwak);transition:color .2s}
.kiezer-tab:hover{color:var(--tekst-2)}
.kiezer-tab.aan{color:var(--blauw)}
.tab-n{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:99px;background:var(--vlak-2);
  font-size:.72rem;font-weight:700;color:var(--zwak);vertical-align:middle}
.kiezer-tab.aan .tab-n{background:var(--blauw-lt);color:var(--blauw-dk)}
.kiezer-streep{position:absolute;bottom:-1px;height:2px;background:var(--blauw);border-radius:2px;
  transition:left .3s var(--ease),width .3s var(--ease)}
.kiezer-vak[hidden]{display:none}

/* ------------------------------------------------------- merktegels */
.merkraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,158px),1fr));gap:12px}
.merktegel{
  position:relative;display:flex;flex-direction:column;background:var(--wit);
  border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden;
  animation:opkomen .45s var(--ease) both;animation-delay:calc(var(--i,0)*26ms);
  transition:border-color .2s,box-shadow .25s var(--ease),transform .25s var(--ease);
}
.merktegel:hover{border-color:var(--merk,var(--blauw));box-shadow:var(--schaduw-op);transform:translateY(-3px)}
.merk-vlak{display:grid;place-items:center;min-height:92px;padding:18px 16px;background:var(--vlak-2);
  transition:background .25s var(--ease)}
.merktegel:hover .merk-vlak{background:var(--wit)}
.merk-vlak img{max-height:46px;max-width:100%;object-fit:contain;
  transition:transform .35s var(--veer)}
.merktegel:hover .merk-vlak img{transform:scale(1.08)}
/* Zonder logo: het merk als woordmerk in zijn eigen kleur. */
.merk-woord{font-weight:800;font-size:1.02rem;letter-spacing:-.02em;text-align:center;line-height:1.15;
  color:var(--merk,var(--tekst));transition:transform .35s var(--veer)}
.merktegel:hover .merk-woord{transform:scale(1.06)}
.merk-onder{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 13px;border-top:1px solid var(--lijn)}
.merk-naam{font-size:.86rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.merk-n{font-size:.74rem;font-weight:700;color:var(--zwak);background:var(--vlak-2);
  padding:2px 8px;border-radius:99px;flex:none;transition:background .2s,color .2s}
.merktegel:hover .merk-n{background:var(--merk,var(--blauw));color:#fff}
/* Kleurstreep die vanaf links inschuift. */
.merktegel::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:2;
  background:var(--merk,var(--blauw));transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease)}
.merktegel:hover::before{transform:scaleX(1)}

/* ---------------------------------------------------- categorietegels */
.catraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:12px}
.cattegel{
  position:relative;display:flex;flex-direction:column;gap:3px;padding:20px;background:var(--wit);
  border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden;isolation:isolate;
  animation:opkomen .45s var(--ease) both;animation-delay:calc(var(--i,0)*30ms);
  transition:border-color .2s,box-shadow .25s var(--ease),transform .25s var(--ease);
}
.cattegel:hover{border-color:var(--blauw);box-shadow:var(--schaduw-op);transform:translateY(-3px)}
.cattegel::after{content:"";position:absolute;right:-26px;bottom:-26px;width:92px;height:92px;border-radius:50%;
  background:var(--blauw-lt);z-index:-1;transform:scale(.4);opacity:0;
  transition:transform .4s var(--veer),opacity .3s var(--ease)}
.cattegel:hover::after{transform:scale(1);opacity:1}
.cat-vlak{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;
  background:var(--blauw-lt);color:var(--blauw);margin-bottom:12px;
  transition:background .25s,color .25s,transform .4s var(--veer)}
.cattegel:hover .cat-vlak{background:var(--blauw);color:#fff;transform:rotate(-6deg) scale(1.06)}
.cat-icoon{width:28px;height:28px}
.cat-naam{font-weight:700;font-size:1rem}
.cat-n{font-size:.8rem;color:var(--zwak)}
.cat-subs{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.cat-subs span{padding:2px 8px;border-radius:99px;background:var(--vlak-2);font-size:.72rem;color:var(--tekst-2)}

/* De losse onderdelen van elk icoon bewegen apart. */
.cat-icoon .i-vorm{transition:transform .4s var(--veer)}
.cat-icoon .i-stuk{transition:transform .45s var(--veer) .04s}
.cat-icoon .i-stip{transition:transform .4s var(--veer)}
.cat-icoon .i-damp{transition:transform .5s var(--ease),opacity .4s;opacity:.7}
.cat-icoon .i-lijn{transition:opacity .3s}
.cattegel:hover .i-stuk{transform:translateY(-2px) rotate(-8deg)}
.cattegel:hover .i-stip{transform:scale(1.25)}
.cattegel:hover .i-damp{transform:translateY(-3px);opacity:1}
.cattegel:hover .i-vorm{transform:scale(1.04)}

/* Icoon naast een sectiekop. */
.blok-kop h2{display:flex;align-items:center;gap:10px}
.blok-kop h2 .cat-icoon{width:24px;height:24px;color:var(--blauw);flex:none}

/* ------------------------------------------------------- zakelijke band */
.b2b-band{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
  background:linear-gradient(120deg,#12326e,#1f6feb 62%,#3a86ff);
  color:#fff;border-radius:var(--r);padding:30px 34px;margin:34px 0 8px}
.b2b-label{display:inline-block;padding:4px 11px;border-radius:99px;background:rgba(255,255,255,.18);
  font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
.b2b-band h2{font-size:clamp(1.15rem,2.2vw,1.5rem);margin-bottom:8px;color:#fff}
.b2b-band p{margin:0;color:rgba(255,255,255,.86);max-width:64ch;font-size:.93rem}
.b2b-tekst{flex:1 1 380px}
.btn-wit{background:#fff;color:var(--blauw-dk)}
.btn-wit:hover{background:#eaf1ff;transform:translateY(-1px)}

/* ----------------------------------------------------------- zekerheid */
.zeker{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr));gap:12px;margin:40px 0 8px}
.zeker-item{display:flex;flex-direction:column;gap:3px;padding:20px;background:var(--wit);
  border:1px solid var(--lijn);border-radius:var(--r);transition:border-color .2s,transform .2s var(--ease)}
.zeker-item:hover{border-color:var(--lijn-2);transform:translateY(-2px)}
.zeker-item b{font-size:.95rem}
.zeker-item span:last-child{font-size:.85rem;color:var(--zwak)}
.zeker-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;
  background:var(--blauw-lt);color:var(--blauw);margin-bottom:9px}
.zeker-ic svg{width:21px;height:21px}
.zeker-item a{color:var(--blauw);font-weight:600}

@media (max-width:560px){
  .merkraster{grid-template-columns:repeat(auto-fill,minmax(min(100%,128px),1fr));gap:9px}
  .catraster{grid-template-columns:1fr 1fr;gap:9px}
  .cattegel{padding:15px}
  .cat-vlak{width:44px;height:44px}
  .cat-subs{display:none}
  .b2b-band{padding:22px}
}

/* =======================================================================
   Formulieren, account, mandje, afrekenen
   Alles wat achter de catalogus zit. Zelfde toon als de winkel: licht,
   veel wit, blauw waar het telt, en overal een klein beetje beweging.
   ======================================================================= */

.wrap.smal{width:min(100% - clamp(24px,4vw,64px),760px)}
.smal{width:min(100%,760px);margin-inline:auto}
.wrap .smal{width:min(100%,760px)}

/* ----------------------------------------------------------- glans */
/* Een schijn die over de knop trekt. De inhoud staat in een span zodat
   de glans eronder kan blijven. */
.btn.glans{overflow:hidden;isolation:isolate}
.btn.glans > span{position:relative;z-index:2}
.btn.glans::after{
  content:"";position:absolute;top:-60%;left:-140%;width:60%;height:220%;z-index:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);transition:left .65s var(--ease);pointer-events:none}
.btn.glans:hover::after{left:150%}
.btn.glans:disabled::after{display:none}

/* ------------------------------------------------------------ pillen */
.pil{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:99px;
  font-size:.76rem;font-weight:700;letter-spacing:.01em;white-space:nowrap;
  background:var(--vlak-2);color:var(--tekst-2)}
.pil::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.75}
.pil-ok{background:var(--groen-lt);color:#0b6b3d}
.pil-let{background:var(--oranje-lt);color:#9a5a06}
.pil-mis{background:var(--rood-lt);color:#a12222}
.pil-blauw{background:var(--blauw-lt);color:var(--blauw-dk)}
.pil-off{background:var(--vlak-2);color:var(--zwak)}
.chip-aan{background:var(--blauw);color:#fff}

/* ========================================================= formulieren */
.form{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.form > *{min-width:0}

.kaartform{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);
  padding:clamp(20px,3vw,30px);box-shadow:var(--schaduw)}

.kaartform-vak{position:relative;background:var(--wit);border:1px solid var(--lijn);
  border-radius:var(--r);padding:clamp(20px,3vw,28px);box-shadow:var(--schaduw);
  margin-bottom:16px;display:grid;grid-template-columns:minmax(0,1fr);gap:15px;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.kaartform-vak:focus-within{border-color:var(--lijn-2);box-shadow:var(--schaduw-op)}
.kaartform-vak > *{min-width:0}
.kaartform-vak h2{display:flex;align-items:center;gap:11px;font-size:1.06rem}
.kaartform-vak h3{font-size:.98rem}
.kaartform-vak p{margin:0}

.stapnr{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;flex:none;
  background:var(--blauw-lt);color:var(--blauw-dk);font-size:.8rem;font-weight:800}

.veld{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;min-width:0}
.veld > *{min-width:0}
.veld label{font-size:.84rem;font-weight:650;color:var(--tekst-2)}
.veld label .zwak{font-weight:500}
.veld input,.veld select,.veld textarea{
  width:100%;min-width:0;padding:11px 13px;background:var(--wit);
  border:1px solid var(--lijn-2);border-radius:var(--r-sm);font-size:.94rem;
  transition:border-color .2s,box-shadow .25s var(--ease),background .2s}
.veld textarea{resize:vertical;min-height:64px;line-height:1.55}
.veld select{appearance:none;cursor:pointer;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c8ca3' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:15px}
.veld input:hover,.veld select:hover,.veld textarea:hover{border-color:#adbfd6}
.veld input:focus,.veld select:focus,.veld textarea:focus{
  outline:0;border-color:var(--blauw);background:var(--wit);
  box-shadow:0 0 0 3px rgba(23,51,122,.14)}
.veld input::placeholder,.veld textarea::placeholder{color:#a9b7c9}
.veld input[aria-invalid="true"]{border-color:var(--rood);box-shadow:0 0 0 3px rgba(217,54,54,.12)}
.hint{font-size:.78rem;color:var(--zwak);line-height:1.45}

/* align-items:start, anders rekken alle kolommen mee met de langste. Een
   veld met een hint eronder maakte zijn buurman dan even hoog en het
   invulvak zweefde midden in een te hoog vak. */
.veld-2,.veld-3{display:grid;gap:14px;min-width:0;align-items:start}
.veld-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.veld-3{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)}
.veld-2 > *,.veld-3 > *{min-width:0}
@media (max-width:620px){
  .veld-2,.veld-3{grid-template-columns:minmax(0,1fr)}
}

.vink{display:flex;align-items:flex-start;gap:10px;font-size:.88rem;line-height:1.5;
  color:var(--tekst-2);cursor:pointer;padding:2px 0}
.vink input{appearance:none;flex:none;width:19px;height:19px;margin-top:1px;border-radius:6px;
  border:1px solid var(--lijn-2);background:var(--wit);cursor:pointer;
  transition:background .18s,border-color .18s,transform .18s var(--veer)}
.vink input:checked{background:var(--blauw) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/13px no-repeat;
  border-color:var(--blauw)}
.vink input:active{transform:scale(.9)}
.vink a{color:var(--blauw);font-weight:600}
.vink a:hover{text-decoration:underline}

.formvoet{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding-top:4px}
.formvoet .btn{flex:0 0 auto}

.uitklap{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;
  padding:16px;border-radius:var(--r-sm);background:var(--blauw-zacht);
  border:1px solid #dbe7fb;animation:opkomen .3s var(--ease) both}
.uitklap[hidden]{display:none!important}

/* --------------------------------------------------------- btw-veld */
.btw-veld{position:relative;display:block}
.btw-veld input{padding-right:120px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.btw-status{position:absolute;right:10px;top:50%;transform:translateY(-50%);
  font-size:.74rem;font-weight:700;padding:4px 10px;border-radius:99px;
  background:var(--vlak-2);color:var(--zwak);max-width:104px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;opacity:0;transition:opacity .25s var(--ease)}
.btw-status:not(:empty){opacity:1}
.btw-status.bezig{background:var(--vlak-2);color:var(--zwak)}
.btw-status.geldig{background:var(--groen-lt);color:#0b6b3d}
.btw-status.ongeldig{background:var(--rood-lt);color:#a12222}
.btw-status.onbekend{background:var(--oranje-lt);color:#9a5a06}

/* ======================================================= zakelijk */
.b2b-pagina{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:start;
  margin-bottom:40px}
.b2b-zij{display:grid;gap:12px;position:sticky;top:130px}
.b2b-kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);
  padding:20px 22px;box-shadow:var(--schaduw);
  transition:border-color .25s var(--ease),transform .25s var(--ease)}
.b2b-kaart:hover{border-color:var(--lijn-2);transform:translateY(-2px)}
.b2b-kaart h3{font-size:.98rem;margin-bottom:11px}
.b2b-kaart p{margin:0;font-size:.88rem;color:var(--tekst-2);line-height:1.55}
.b2b-hulp{background:linear-gradient(135deg,#12326e,#1f6feb 78%);border-color:transparent;color:#fff}
.b2b-hulp h3{color:#fff}
.b2b-hulp p{color:rgba(255,255,255,.85)}
.b2b-hulp .btn{margin-top:12px}

.vinklijst{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.vinklijst li{position:relative;padding-left:26px;font-size:.88rem;color:var(--tekst-2);line-height:1.45}
.vinklijst li::before{
  content:"";position:absolute;left:0;top:2px;width:17px;height:17px;border-radius:50%;
  background:var(--groen-lt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f9d58' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/11px no-repeat}

.stappen{list-style:none;margin:0;padding:0;counter-reset:stap;display:grid;gap:14px}
.stappen li{position:relative;padding-left:34px;display:grid;gap:2px}
.stappen li::before{counter-increment:stap;content:counter(stap);
  position:absolute;left:0;top:-1px;width:23px;height:23px;border-radius:50%;
  display:grid;place-items:center;background:var(--blauw-lt);color:var(--blauw-dk);
  font-size:.75rem;font-weight:800}
.stappen li::after{content:"";position:absolute;left:11px;top:26px;bottom:-14px;width:1px;
  background:var(--lijn)}
.stappen li:last-child::after{display:none}
.stappen b{font-size:.9rem}
.stappen span{font-size:.82rem;color:var(--zwak)}

@media (max-width:900px){
  .b2b-pagina{grid-template-columns:minmax(0,1fr)}
  .b2b-zij{position:static}
}

/* ======================================================== merkenpagina */
.letterbalk{display:flex;flex-wrap:wrap;gap:5px;padding:14px 0 22px;border-bottom:1px solid var(--lijn);
  margin-bottom:24px}
.letterbalk a{display:grid;place-items:center;min-width:32px;height:32px;padding:0 8px;
  border-radius:var(--r-xs);font-size:.82rem;font-weight:700;color:var(--tekst-2);
  background:var(--wit);border:1px solid var(--lijn);
  transition:background .18s,color .18s,transform .18s var(--veer),border-color .18s}
.letterbalk a:hover{background:var(--blauw-lt);color:var(--blauw-dk);border-color:#c5dafb;
  transform:translateY(-2px)}
.letterbalk a.aan{background:var(--blauw);border-color:var(--blauw);color:#fff}
.letterbalk .uit{opacity:.35;pointer-events:none}

.merkkop{display:flex;align-items:center;gap:20px;flex-wrap:wrap;background:var(--wit);
  border:1px solid var(--lijn);border-radius:var(--r);padding:22px 24px;margin-bottom:22px;
  box-shadow:var(--schaduw);position:relative;overflow:hidden}
.merkkop::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--merk,var(--blauw))}
.merkkop-vlak{display:grid;place-items:center;min-width:132px;min-height:78px;padding:12px 18px;
  border-radius:var(--r-sm);background:var(--vlak-2);flex:none;
  transition:background .25s var(--ease)}
.merkkop:hover .merkkop-vlak{background:var(--blauw-zacht)}
.merkkop-vlak .merk-woord{color:var(--merk,var(--blauw))}
.merkkop img{max-height:56px;max-width:170px;object-fit:contain}
.merkkop h1{font-size:clamp(1.4rem,2.6vw,1.9rem)}
.merkkop p{margin:5px 0 0;color:var(--tekst-2);font-size:.9rem}

.letterkop{font-size:1.5rem;font-weight:800;color:var(--blauw);margin:26px 0 12px;
  padding-bottom:6px;border-bottom:1px solid var(--lijn);scroll-margin-top:140px}

/* ========================================================= winkelwagen */
.mandje{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start;
  margin-bottom:44px}

.mregel{display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:16px;align-items:center;
  background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);
  padding:14px;margin-bottom:10px;position:relative;overflow:hidden;
  transition:border-color .22s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease)}
.mregel::after{content:"";position:absolute;top:-60%;left:-140%;width:45%;height:220%;
  background:linear-gradient(100deg,transparent,rgba(23,51,122,.07),transparent);
  transform:skewX(-18deg);transition:left .8s var(--ease);pointer-events:none}
.mregel:hover{border-color:var(--lijn-2);box-shadow:var(--schaduw-op);transform:translateY(-2px)}
.mregel:hover::after{left:160%}
.mregel-foto{width:84px;height:84px;border-radius:var(--r-sm);background:var(--vlak-2);
  display:grid;place-items:center;overflow:hidden;flex:none}
.mregel-foto img{width:100%;height:100%;object-fit:contain;padding:6px;
  transition:transform .35s var(--veer)}
.mregel:hover .mregel-foto img{transform:scale(1.07)}
.mregel-info{display:grid;gap:3px;min-width:0}
.mregel-merk{font-size:.75rem;font-weight:700;color:var(--zwak);text-transform:uppercase;
  letter-spacing:.05em}
.mregel-naam{font-weight:650;font-size:.96rem;line-height:1.3}
.mregel-naam:hover{color:var(--blauw)}
.mregel-eenheid{font-size:.8rem;color:var(--zwak)}
.mregel-rechts{display:grid;justify-items:end;gap:9px}
.mregel-prijs{font-weight:800;font-size:1.02rem;font-variant-numeric:tabular-nums}
.mregel-stuk{font-size:.76rem;color:var(--zwak)}
.mregel-weg{background:none;border:0;cursor:pointer;font-size:.78rem;color:var(--zwak);
  padding:2px 0;transition:color .2s}
.mregel-weg:hover{color:var(--rood)}

.mregel-meta{font-size:.8rem;color:var(--tekst-2)}
.mregel-aantal{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.mandje-regels{min-width:0}

/* Aantalregelaar in de wagen. */
.aantal{display:inline-flex;align-items:center;background:var(--wit);
  border:1px solid var(--lijn-2);border-radius:99px;overflow:hidden;flex:none}
.aantal button{width:32px;height:32px;border:0;background:none;cursor:pointer;
  font-size:1.05rem;line-height:1;color:var(--tekst-2);
  transition:background .18s,color .18s}
.aantal button:hover{background:var(--blauw-lt);color:var(--blauw-dk)}
.aantal button:active{background:#d9e6fd}
.aantal input{width:46px;height:32px;border:0;text-align:center;font-weight:700;
  font-size:.9rem;font-variant-numeric:tabular-nums;background:none;
  -moz-appearance:textfield}
.aantal input:focus{outline:0;background:var(--blauw-zacht)}
.aantal input::-webkit-outer-spin-button,
.aantal input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.mandje-totaal{position:sticky;top:130px;background:var(--wit);border:1px solid var(--lijn);
  border-radius:var(--r);padding:22px;box-shadow:var(--schaduw)}
.mandje-totaal h2{font-size:1.05rem;margin-bottom:14px}

.totaalrij{display:grid;grid-template-columns:1fr auto;gap:8px 14px;margin:0 0 14px;
  font-size:.9rem;color:var(--tekst-2)}
.totaalrij dt{margin:0}
.totaalrij dd{margin:0;text-align:right;font-weight:650;color:var(--tekst);
  font-variant-numeric:tabular-nums}
.totaalrij .korting{color:var(--groen)}
.totaalrij.groot{font-size:.95rem;max-width:360px;margin-left:auto;margin-top:18px}
.totaalrij .eind{border-top:2px solid var(--tekst);padding-top:10px;margin-top:4px;
  font-size:1.1rem;font-weight:800;color:var(--tekst)}

.mandje-som{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-top:13px;border-top:2px solid var(--tekst);margin-bottom:16px}
.mandje-som strong{font-size:1.5rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mandje-som span{font-size:.88rem;color:var(--tekst-2)}

/* Balk die toont hoeveel er nog bij moet voor gratis levering. */
.verzendbalk{position:relative;height:7px;border-radius:99px;background:#dbe7fb;
  overflow:hidden;margin:14px 0 0}
.verzendbalk-vul{height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--blauw),#4d95ff);
  transition:width .6s var(--ease);position:relative;overflow:hidden}
.verzendbalk-vul::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-100%);animation:vbschijn 2.6s var(--ease) infinite}
@keyframes vbschijn{60%,100%{transform:translateX(100%)}}

/* Groot totaalbedrag onder de opsomming. */
.totaal-groot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-top:13px;border-top:2px solid var(--tekst);margin-bottom:16px}
.totaal-groot b{font-size:1.5rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.totaal-groot span{font-size:.88rem;color:var(--tekst-2)}

@media (max-width:920px){
  .mandje{grid-template-columns:minmax(0,1fr)}
  .mandje-totaal{position:static}
}
@media (max-width:520px){
  .mregel{grid-template-columns:64px minmax(0,1fr);gap:12px}
  .mregel-foto{width:64px;height:64px}
  .mregel-rechts{grid-column:1 / -1;justify-items:stretch;
    grid-template-columns:auto 1fr;align-items:center;gap:10px}
  .mregel-prijs{text-align:right}
}

/* =========================================================== afrekenen */
.afreken{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:22px;align-items:start;
  margin-bottom:46px}
.afreken-links{min-width:0}
.afreken-zij{min-width:0}

.besteloverzicht{position:sticky;top:130px;background:var(--wit);border:1px solid var(--lijn);
  border-radius:var(--r);padding:22px;box-shadow:var(--schaduw)}
.besteloverzicht h2{font-size:1.02rem;margin-bottom:14px}
.besteloverzicht .btn{margin-top:4px}

.bo-regels{list-style:none;margin:0 0 14px;padding:0 0 14px;border-bottom:1px solid var(--lijn);
  display:grid;gap:10px;max-height:280px;overflow:auto}
.bo-regels li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;
  align-items:baseline;font-size:.87rem}
.bo-n{font-weight:800;color:var(--blauw);font-variant-numeric:tabular-nums}
.bo-naam{min-width:0;line-height:1.35}
.bo-naam small{display:block;color:var(--zwak);font-size:.76rem}
.bo-p{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}

.bo-totaal{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-top:12px;border-top:2px solid var(--tekst);margin-bottom:16px}
.bo-totaal strong{font-size:1.45rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bo-totaal span{font-size:.88rem;color:var(--tekst-2)}

.bo-gerust{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:7px}
.bo-gerust li{position:relative;padding-left:20px;font-size:.79rem;color:var(--zwak)}
.bo-gerust li::before{content:"";position:absolute;left:0;top:6px;width:7px;height:7px;
  border-radius:50%;background:var(--groen)}

/* Adressen die je snel kan overnemen. */
.adreskiezer{display:flex;gap:9px;flex-wrap:wrap}
.adreschip{display:grid;gap:1px;text-align:left;padding:9px 14px;border-radius:var(--r-sm);
  background:var(--wit);border:1px solid var(--lijn);cursor:pointer;
  transition:border-color .2s,background .2s,transform .2s var(--veer)}
.adreschip:hover{border-color:var(--blauw);transform:translateY(-1px)}
.adreschip.aan{border-color:var(--blauw);background:var(--blauw-lt)}
.adreschip b{font-size:.85rem}
.adreschip span{font-size:.76rem;color:var(--zwak)}

/* Betaalkeuze. */
.betaalkeuze{position:relative;display:flex;align-items:center;gap:14px;padding:15px 17px;
  border:1px solid var(--lijn-2);border-radius:var(--r-sm);cursor:pointer;overflow:hidden;
  transition:border-color .2s,background .2s,box-shadow .25s var(--ease)}
.betaalkeuze::after{content:"";position:absolute;top:-60%;left:-140%;width:45%;height:220%;
  background:linear-gradient(100deg,transparent,rgba(23,51,122,.10),transparent);
  transform:skewX(-18deg);transition:left .7s var(--ease);pointer-events:none}
.betaalkeuze:hover{border-color:var(--blauw)}
.betaalkeuze:hover::after{left:160%}
.betaalkeuze:has(input:checked){border-color:var(--blauw);background:var(--blauw-zacht);
  box-shadow:0 0 0 3px rgba(23,51,122,.10)}
.betaalkeuze input{appearance:none;flex:none;width:19px;height:19px;border-radius:50%;
  border:1px solid var(--lijn-2);background:var(--wit);cursor:pointer;
  transition:border-color .2s,box-shadow .2s}
.betaalkeuze input:checked{border-color:var(--blauw);border-width:6px}
.bk-tekst{display:grid;gap:2px;min-width:0;flex:1}
.bk-tekst b{font-size:.94rem}
.bk-tekst small{font-size:.8rem;color:var(--zwak);line-height:1.45}
.bk-logos{display:flex;gap:5px;flex:none}
.betaalkeuze.aan{border-color:var(--blauw);background:var(--blauw-zacht);
  box-shadow:0 0 0 3px rgba(23,51,122,.10)}
/* Kort oplichten wanneer een adres wordt overgenomen. */
.net-gevuld{animation:gevuld .7s var(--ease)}
@keyframes gevuld{
  0%{background:var(--blauw-lt);border-color:var(--blauw)}
  100%{background:var(--wit)}
}
.bk-logos i{font-style:normal;font-size:.62rem;font-weight:800;letter-spacing:.02em;
  padding:4px 6px;border-radius:4px;background:var(--vlak-2);color:var(--tekst-2)}

@media (max-width:960px){
  .afreken{grid-template-columns:minmax(0,1fr)}
  .besteloverzicht{position:static}
  .afreken-zij{order:-1}
  .bo-regels{max-height:none}
}
@media (max-width:520px){
  .bk-logos{display:none}
}

/* ====================================================== bedankpagina */
.klaar-kop{text-align:center;padding:34px 24px 30px;border-radius:var(--r);margin-bottom:16px;
  background:var(--wit);border:1px solid var(--lijn);box-shadow:var(--schaduw)}
.klaar-kop h1{font-size:clamp(1.4rem,3vw,2rem);margin-bottom:8px}
.klaar-kop p{margin:0 auto;max-width:52ch;color:var(--tekst-2)}
.klaar-kop form{margin-top:16px}
.klaar-kop.gelukt{background:linear-gradient(180deg,var(--groen-lt),var(--wit) 62%);
  border-color:#b9e4cd}
.klaar-kop.mis{background:linear-gradient(180deg,var(--rood-lt),var(--wit) 62%);border-color:#f3c2c2}
.klaar-kop.bezig{background:linear-gradient(180deg,var(--blauw-lt),var(--wit) 62%);border-color:#c5dafb}

.klaar-vink{display:block;width:64px;height:64px;margin:0 auto 14px}
.klaar-vink svg{width:100%;height:100%;fill:none;stroke:var(--groen);stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}
.klaar-vink circle{stroke-dasharray:132;stroke-dashoffset:132;
  animation:vinkring .6s var(--ease) forwards}
.klaar-vink path{stroke-dasharray:30;stroke-dashoffset:30;
  animation:vinkstreep .35s var(--ease) .45s forwards}
@keyframes vinkring{to{stroke-dashoffset:0}}
@keyframes vinkstreep{to{stroke-dashoffset:0}}

.klaar-spin{display:block;width:38px;height:38px;margin:0 auto 14px;border-radius:50%;
  border:3px solid #c5dafb;border-top-color:var(--blauw);animation:draai .8s linear infinite}
@keyframes draai{to{transform:rotate(360deg)}}

.klaar-kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);
  padding:20px 22px;margin-bottom:14px;box-shadow:var(--schaduw)}
.klaar-kaart h2{font-size:1rem;margin-bottom:12px}
.klaar-rij{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:9px 0;border-bottom:1px dashed var(--lijn);font-size:.9rem}
.klaar-rij:last-child{border-bottom:0;padding-bottom:0}
.klaar-rij span{color:var(--zwak)}
.klaar-rij b{font-variant-numeric:tabular-nums}
.klaar-knoppen{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:22px 0 46px}

/* ================================================== mijn bestellingen */
.leeg-vak{background:var(--wit);border:1px dashed var(--lijn-2);border-radius:var(--r);
  padding:52px 26px;text-align:center;margin-bottom:40px}
.leeg-vak h2{font-size:1.1rem;margin-bottom:7px}
.leeg-vak p{color:var(--zwak);max-width:46ch;margin:0 auto 18px}

.bestellijst{display:grid;gap:11px;margin-bottom:44px}
.bestelrij{position:relative;overflow:hidden;background:var(--wit);border:1px solid var(--lijn);
  border-radius:var(--r);padding:17px 20px;display:grid;
  grid-template-columns:minmax(0,1.4fr) auto auto;gap:16px;align-items:center;
  box-shadow:var(--schaduw);
  transition:border-color .22s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease)}
.bestelrij::after{content:"";position:absolute;top:-60%;left:-140%;width:42%;height:220%;
  background:linear-gradient(100deg,transparent,rgba(23,51,122,.07),transparent);
  transform:skewX(-18deg);transition:left .8s var(--ease);pointer-events:none}
.bestelrij:hover{border-color:var(--lijn-2);box-shadow:var(--schaduw-op);transform:translateY(-2px)}
.bestelrij:hover::after{left:160%}
.br-kop{display:flex;align-items:center;gap:12px;justify-content:space-between;min-width:0}
.br-nr{font-weight:800;font-size:.98rem;letter-spacing:-.01em}
.br-nr:hover{color:var(--blauw)}
.br-datum{display:block;font-size:.79rem;color:var(--zwak)}
.br-cijfers{display:grid;gap:2px;justify-items:end;font-size:.82rem;color:var(--zwak)}
.br-bedrag{font-size:1.05rem;font-weight:800;color:var(--tekst);font-variant-numeric:tabular-nums}
.br-acties{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}

@media (max-width:760px){
  .bestelrij{grid-template-columns:minmax(0,1fr)}
  .br-cijfers{justify-items:start}
  .br-acties{justify-content:flex-start}
}

/* ------------------------------------------------ bestelling in detail */
.bestel-detail{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;
  align-items:start;margin-bottom:46px}
.bestel-zij{display:grid;gap:12px;min-width:0}
.detail-acties{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}

.tabel-vak{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--schaduw)}
.tabel{width:100%;border-collapse:collapse;font-size:.88rem}
.tabel th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--zwak);font-weight:700;padding:13px 16px;background:var(--vlak-2);
  border-bottom:1px solid var(--lijn);white-space:nowrap}
.tabel td{padding:13px 16px;border-bottom:1px solid var(--lijn);vertical-align:top}
.tabel tbody tr:last-child td{border-bottom:0}
.tabel tbody tr{transition:background .16s}
.tabel tbody tr:hover{background:var(--blauw-zacht)}
.tabel .r{text-align:right;font-variant-numeric:tabular-nums}
.tabel-vak.rol{overflow:auto}

.tijdlijn{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.tijdlijn li{position:relative;padding-left:22px;display:grid;gap:1px}
.tijdlijn li::before{content:"";position:absolute;left:0;top:5px;width:9px;height:9px;
  border-radius:50%;background:var(--blauw);box-shadow:0 0 0 3px var(--blauw-lt)}
.tijdlijn li:not(:last-child)::after{content:"";position:absolute;left:4px;top:18px;bottom:-14px;
  width:1px;background:var(--lijn)}
.tijdlijn b{font-size:.87rem;font-weight:650}
.tijdlijn span{font-size:.76rem;color:var(--zwak)}

@media (max-width:900px){
  .bestel-detail{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .tabel th:nth-child(2),.tabel td:nth-child(2),
  .tabel th:nth-child(4),.tabel td:nth-child(4){display:none}
}

/* ========================================================= mijn account */
.tabbalk{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;
  border-bottom:1px solid var(--lijn);margin-bottom:22px}
.tabbalk::-webkit-scrollbar{display:none}
.tabbalk a{position:relative;padding:12px 17px;font-size:.89rem;font-weight:650;
  color:var(--zwak);white-space:nowrap;transition:color .2s}
.tabbalk a::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;
  border-radius:2px;background:var(--blauw);transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease)}
.tabbalk a:hover{color:var(--tekst-2)}
.tabbalk a.aan{color:var(--blauw)}
.tabbalk a.aan::after,.tabbalk a:hover::after{transform:scaleX(1)}

.paneel{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);
  padding:clamp(18px,2.6vw,26px);box-shadow:var(--schaduw);margin-bottom:16px;
  transition:border-color .25s var(--ease)}
.paneel:hover{border-color:var(--lijn-2)}
.paneel > h2{font-size:1.04rem;margin-bottom:5px}
.paneel > h2 + p{color:var(--tekst-2);font-size:.88rem;margin-bottom:16px}
.paneel-kop{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-bottom:14px}
.paneel-kop h2{font-size:1.04rem}

/* Twee kolommen in het klantenportaal, met de smalle kant rechts. */
.portaal-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;
  align-items:start;margin-bottom:40px}
.portaal-grid > *{min-width:0}
.portaal-grid .breed{grid-column:1 / -1}
@media (max-width:860px){
  .portaal-grid{grid-template-columns:minmax(0,1fr)}
}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,168px),1fr));gap:11px;
  margin-bottom:20px}
.kpi{position:relative;overflow:hidden;background:var(--wit);border:1px solid var(--lijn);
  border-radius:var(--r);padding:17px 19px;box-shadow:var(--schaduw);
  transition:transform .22s var(--ease),border-color .22s,box-shadow .22s var(--ease)}
.kpi::after{content:"";position:absolute;right:-24px;bottom:-24px;width:84px;height:84px;
  border-radius:50%;background:var(--blauw-lt);opacity:0;transform:scale(.6);
  transition:transform .4s var(--veer),opacity .3s}
.kpi:hover{transform:translateY(-3px);border-color:var(--lijn-2);box-shadow:var(--schaduw-op)}
.kpi:hover::after{transform:scale(1);opacity:.55}
.kpi span,.kpi strong,.kpi small{position:relative;z-index:1}
.kpi span{display:block;font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--zwak);font-weight:700;margin-bottom:5px}
.kpi strong{display:block;font-size:1.6rem;letter-spacing:-.02em;line-height:1.1;
  font-variant-numeric:tabular-nums}
.kpi small{display:block;font-size:.78rem;color:var(--zwak);margin-top:3px}

.mini-dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 18px;margin:0;
  font-size:.88rem}
.mini-dl dt{color:var(--zwak)}
.mini-dl dd{margin:0;font-weight:650;overflow-wrap:anywhere}

.adreslijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:11px}
.adres{position:relative;background:var(--vlak-2);border:1px solid var(--lijn);
  border-radius:var(--r-sm);padding:15px 16px;font-size:.87rem;line-height:1.55;
  transition:border-color .2s,background .2s,transform .2s var(--ease)}
.adres:hover{border-color:var(--lijn-2);background:var(--wit);transform:translateY(-2px)}
.adres b{display:block;font-size:.9rem;margin-bottom:3px}
.adres .adres-soort{position:absolute;right:12px;top:12px;font-size:.68rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;color:var(--zwak)}
.adres form{margin-top:9px}
.adres-weg{background:none;border:0;cursor:pointer;font-size:.78rem;color:var(--zwak);
  padding:0;transition:color .2s}
.adres-weg:hover{color:var(--rood)}

@media (max-width:620px){
  .kpis{grid-template-columns:1fr 1fr}
  .kpi strong{font-size:1.35rem}
}

/* Minder beweging als het besturingssysteem daarom vraagt. */
@media (prefers-reduced-motion:reduce){
  .btn.glans::after,.mregel::after,.bestelrij::after,.betaalkeuze::after{display:none}
  .klaar-vink circle,.klaar-vink path{animation:none;stroke-dashoffset:0}
  .klaar-spin{animation-duration:2s}
}

/* =======================================================================
   Informatiepagina's, contact, 404 en de cookiemelding
   ======================================================================= */

.info-pagina{display:grid;grid-template-columns:230px minmax(0,1fr);gap:34px;
  align-items:start;margin-bottom:56px}
.info-inhoud{min-width:0;max-width:74ch}

.info-nav{position:sticky;top:130px;background:var(--wit);border:1px solid var(--lijn);
  border-radius:var(--r);padding:18px 20px;box-shadow:var(--schaduw)}
.info-nav-kop{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;
  font-weight:800;color:var(--zwak);margin:0 0 10px}
.info-nav ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;counter-reset:inav}
.info-nav a{position:relative;display:block;padding:6px 0 6px 12px;font-size:.83rem;
  color:var(--tekst-2);line-height:1.35;transition:color .2s,padding-left .2s var(--ease)}
.info-nav a::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:2px;
  border-radius:2px;background:var(--blauw);transform:scaleY(0);transform-origin:top;
  transition:transform .25s var(--ease)}
.info-nav a:hover{color:var(--blauw);padding-left:16px}
.info-nav a:hover::before{transform:scaleY(1)}

.info-lead{font-size:1.02rem;line-height:1.7;color:var(--tekst-2);
  padding:16px 18px;border-radius:var(--r-sm);background:var(--blauw-zacht);
  border-left:3px solid var(--blauw)}
.info-inhoud h2{font-size:1.14rem;margin:34px 0 12px;scroll-margin-top:140px;
  padding-bottom:8px;border-bottom:1px solid var(--lijn)}
.info-inhoud h2:first-of-type{margin-top:28px}
.info-inhoud p{line-height:1.72;color:var(--tekst-2)}
.info-inhoud a{color:var(--blauw);font-weight:600}
.info-inhoud a:hover{text-decoration:underline}
.info-inhoud code{font-family:var(--mono);font-size:.85em;padding:2px 6px;border-radius:5px;
  background:var(--vlak-2);color:var(--tekst)}

.lijst{list-style:none;margin:0 0 1.2em;padding:0;display:grid;gap:9px}
.lijst li{position:relative;padding-left:20px;line-height:1.65;color:var(--tekst-2)}
.lijst li::before{content:"";position:absolute;left:2px;top:10px;width:6px;height:6px;
  border-radius:50%;background:var(--blauw);opacity:.65}
.lijst b{color:var(--tekst)}

.stappen.breed{margin-bottom:1.4em}
.stappen.breed span{font-size:.87rem}

/* Kleine prijs- en feitentabel zonder tabelmarkup. */
.prijstabel{border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden;
  background:var(--wit);margin:0 0 1.4em;box-shadow:var(--schaduw)}
.pt-rij{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 17px;border-bottom:1px solid var(--lijn);font-size:.9rem;
  transition:background .16s}
.pt-rij:last-child{border-bottom:0}
.pt-rij:hover{background:var(--blauw-zacht)}
.pt-rij span{color:var(--tekst-2)}
.pt-rij b{font-weight:700;text-align:right}
.pt-rij.uit b{color:var(--groen)}

.adreskaart{display:grid;gap:2px;padding:18px 20px;border-radius:var(--r);
  background:var(--vlak-2);border:1px solid var(--lijn);margin:0 0 1.4em;font-size:.9rem;
  color:var(--tekst-2)}
.adreskaart b{font-size:1rem;color:var(--tekst);margin-bottom:4px}
.adreskaart .ak-kop{font-style:normal;font-size:.72rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--zwak);margin-bottom:7px}
.adreskaart .btn{justify-self:start;margin-top:11px}

.info-hulp{display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-top:38px;padding:22px 24px;border-radius:var(--r);color:#fff;
  background:linear-gradient(120deg,#12326e,#1f6feb 68%,#3a86ff)}
.info-hulp b{display:block;font-size:1.02rem}
.info-hulp span{font-size:.88rem;color:rgba(255,255,255,.85)}
.info-hulp-knoppen{display:flex;gap:9px;flex-wrap:wrap}
.info-hulp .btn-blauw{background:#fff;color:var(--blauw-dk);box-shadow:none}
.info-hulp .btn-blauw:hover{background:#eaf1ff}
.info-hulp .btn-licht{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.28)}
.info-hulp .btn-licht:hover{background:rgba(255,255,255,.24)}

@media (max-width:880px){
  .info-pagina{grid-template-columns:minmax(0,1fr);gap:20px}
  .info-nav{position:static}
  .info-nav ol{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .info-nav ol{grid-template-columns:1fr}
}

/* ------------------------------------------------------------- contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;
  align-items:start;margin-bottom:50px}
.contact-zij{display:grid;gap:12px;min-width:0}
.contact-zij .b2b-kaart a.blok{margin-top:11px}
.contact-zij .vinklijst a{color:var(--blauw);font-weight:600}
@media (max-width:900px){
  .contact-grid{grid-template-columns:minmax(0,1fr)}
}

/* ----------------------------------------------------------------- 404 */
.vier-nul-vier{position:relative;text-align:center;padding:56px 24px 46px;margin:14px 0 34px;
  background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--schaduw)}
.vnv-cijfer{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:clamp(9rem,26vw,17rem);font-weight:900;letter-spacing:-.05em;
  color:var(--blauw);opacity:.06;line-height:1;pointer-events:none;user-select:none}
.vier-nul-vier h1{position:relative;font-size:clamp(1.4rem,3vw,2rem);margin-bottom:9px}
.vier-nul-vier p{position:relative;max-width:52ch;margin:0 auto 22px;color:var(--tekst-2)}
.vnv-zoek{position:relative;display:flex;gap:9px;max-width:520px;margin:0 auto 20px}
.vnv-zoek input{flex:1;min-width:0;padding:12px 16px;border:1px solid var(--lijn-2);
  border-radius:99px;background:var(--wit);font-size:.94rem;
  transition:border-color .2s,box-shadow .25s var(--ease)}
.vnv-zoek input:focus{outline:0;border-color:var(--blauw);
  box-shadow:0 0 0 3px rgba(23,51,122,.14)}
.vnv-zoek .btn{border-radius:99px}
.vnv-links{position:relative;display:flex;flex-wrap:wrap;gap:7px;justify-content:center}

/* ---------------------------------------------------- cookiemelding */
.ckbalk{position:fixed;left:12px;right:12px;bottom:12px;z-index:220;
  animation:ckop .45s var(--ease) .5s both}
.ckbalk.weg{animation:ckweg .3s var(--ease) forwards}
.ckbalk-in{display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;max-width:var(--wrap);margin:0 auto;padding:15px 20px;
  background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);
  box-shadow:0 10px 34px rgba(16,35,59,.16)}
.ckbalk p{margin:0;font-size:.85rem;color:var(--tekst-2);line-height:1.55;max-width:74ch}
.ckbalk a{color:var(--blauw);font-weight:600}
.ckbalk a:hover{text-decoration:underline}
.ckbalk .btn{flex:none}
@keyframes ckop{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes ckweg{to{opacity:0;transform:translateY(16px)}}
@media (max-width:600px){
  .ckbalk-in{padding:14px 16px}
  .ckbalk .btn{width:100%}
}

/* =======================================================================
   Snel bestellen, vaste lijst, voorraadmelding
   ======================================================================= */

.snel-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;
  align-items:start;margin-bottom:34px}
.snel-zij{display:grid;gap:12px;min-width:0}
.snel-grid textarea{font-family:var(--mono);font-size:.88rem;line-height:1.65;
  min-height:200px;tab-size:2}
.snel-grid .hint code{font-family:var(--mono);font-size:.85em;padding:1px 5px;border-radius:4px;
  background:var(--vlak-2);color:var(--tekst)}
@media (max-width:900px){
  .snel-grid{grid-template-columns:minmax(0,1fr)}
  .snel-zij{order:-1}
}

/* Knop om iets op de vaste lijst te zetten. */
.koop-extra{margin-top:12px}
.btn-zacht{background:var(--vlak-2);color:var(--tekst-2);border-color:var(--lijn)}
.btn-zacht:hover{background:var(--blauw-lt);color:var(--blauw-dk);border-color:#c5dafb}
.btn-zacht svg{flex:none}

/* Voet van de vaste lijst met het totaal. */
.lijst-voet{display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;margin:18px 0 40px;padding:18px 22px;border-radius:var(--r);
  background:var(--wit);border:1px solid var(--lijn);box-shadow:var(--schaduw)}
.lijst-voet > div{display:flex;align-items:baseline;gap:9px}
.lijst-voet strong{font-size:1.5rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* Vak dat vraagt om een seintje bij nieuwe voorraad. */
.wachtvak{margin:18px 0;padding:18px 20px;border-radius:var(--r);
  background:var(--oranje-lt);border:1px solid #f6d9b4}
.wachtvak b{display:block;font-size:.98rem;color:#9a5a06;margin-bottom:4px}
.wachtvak p{margin:0 0 12px;font-size:.86rem;color:#8a5a1a;line-height:1.55}
.wachtvak form{display:flex;gap:8px;flex-wrap:wrap}
.wachtvak input{flex:1 1 200px;min-width:0;padding:10px 13px;border:1px solid #eac48b;
  border-radius:var(--r-sm);background:var(--wit);font-size:.9rem;
  transition:border-color .2s,box-shadow .25s var(--ease)}
.wachtvak input:focus{outline:0;border-color:var(--oranje);
  box-shadow:0 0 0 3px rgba(232,131,12,.16)}

/* De kleine invoervelden uit het beheer worden ook in de winkel gebruikt. */
.tabel .bh-mini{width:78px;padding:7px 9px;border:1px solid var(--lijn-2);
  border-radius:var(--r-xs);background:var(--wit);font-size:.85rem;text-align:right;
  font-variant-numeric:tabular-nums;transition:border-color .2s,box-shadow .2s,background .2s}
.tabel .bh-mini:focus{outline:0;border-color:var(--blauw);background:var(--blauw-zacht);
  box-shadow:0 0 0 3px rgba(23,51,122,.13)}
.tabel .bh-mini.smal{width:64px}
.tabel select{padding:7px 10px;border:1px solid var(--lijn-2);border-radius:var(--r-xs);
  background:var(--wit);font-size:.85rem;cursor:pointer}
.tabel select:focus{outline:0;border-color:var(--blauw);box-shadow:0 0 0 3px rgba(23,51,122,.13)}
.bh-tabelvoet{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:14px 0 8px}

/* =======================================================================
   Volle rijen op de startpagina
   Een halfvolle tweede rij ziet er slordig uit. We tonen precies zoveel
   artikelen als er in hele rijen passen en verbergen de rest.
   ======================================================================= */
.raster.schap{grid-template-columns:repeat(5,minmax(0,1fr))}
.raster.schap > .kaart:nth-child(n+11){display:none}

@media (max-width:1240px){
  .raster.schap{grid-template-columns:repeat(4,minmax(0,1fr))}
  .raster.schap > .kaart:nth-child(n+9){display:none}
}
@media (max-width:980px){
  .raster.schap{grid-template-columns:repeat(3,minmax(0,1fr))}
  .raster.schap > .kaart:nth-child(n+7){display:none}
}
@media (max-width:700px){
  .raster.schap{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  .raster.schap > .kaart:nth-child(n+7){display:none}
}

/* ----------------------------------------------- modelformulier herroeping */
.herroep{margin:0 0 1.6em;padding:24px 26px;border-radius:var(--r);background:var(--wit);
  border:1px solid var(--lijn-2);box-shadow:var(--schaduw)}
.herroep-kop{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;padding-bottom:14px;margin-bottom:16px;border-bottom:2px solid var(--tekst)}
.herroep-kop b{font-size:1.02rem}
.herroep-aan{font-size:.86rem;color:var(--tekst-2);padding:13px 15px;border-radius:var(--r-sm);
  background:var(--vlak-2);line-height:1.6}
.herroep p{font-size:.89rem;line-height:1.65}
.herroep-regels{display:grid;gap:16px;margin:18px 0}
.herroep-regels label{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-size:.84rem;color:var(--tekst-2);white-space:nowrap}
.herroep-regels .lijn{flex:1 1 180px;min-width:120px;height:1px;background:var(--lijn-2);
  align-self:flex-end;margin-bottom:3px}
.herroep-regels .lijn.kort{flex:0 1 130px}
.herroep-regels .lijn.breed{flex:1 1 100%}
.herroep-voet{font-size:.78rem;color:var(--zwak);margin:0;padding-top:14px;
  border-top:1px solid var(--lijn)}

@media print{
  .kop,.lint-boven,.ckbalk,.info-nav,.info-hulp,.voet,.kruimels,.herroep-kop .btn{display:none!important}
  .herroep{box-shadow:none;border-color:#000}
  .info-pagina{grid-template-columns:1fr}
}

/* --------------------------------------------- voetnoot onder een formulier */
.onderform{margin-top:18px;padding-top:16px;border-top:1px solid var(--lijn);
  text-align:center;display:grid;gap:9px}
.onderform-link{display:inline-block;justify-self:center;font-size:.86rem;font-weight:650;
  color:var(--blauw);padding:6px 14px;border-radius:999px;background:var(--blauw-zacht);
  transition:background .2s,transform .2s var(--veer)}
.onderform-link:hover{background:var(--blauw-lt);transform:translateY(-1px)}
.onderform p{margin:0;font-size:.85rem;color:var(--tekst-2);line-height:1.6}
.onderform p a{color:var(--blauw);font-weight:650}
.onderform p a:hover{text-decoration:underline}

/* Knoppen op de blauwe hulpkaart moeten wit blijven, niet grijs. */
.b2b-hulp .btn-licht,
.b2b-hulp .btn{background:#fff;color:var(--blauw-dk);border-color:transparent;
  font-weight:700;box-shadow:0 3px 12px rgba(0,0,0,.14)}
.b2b-hulp .btn:hover{background:#eaf1ff;color:var(--blauw-dk);transform:translateY(-2px)}
.b2b-hulp .btn.blok{justify-content:center}

/* =======================================================================
   D&C Food - eigen onderdelen
   Alles hieronder hoort bij de offertewerking en bij de slideshow die het
   beheer zelf vult. Bewust achteraan, zodat een update van de basis er
   nooit dwars doorheen loopt.
   ======================================================================= */

/* ------------------------------------------------------------ woordmerk */
.kop-merkteken{
  font-family:Georgia,"Times New Roman",serif;font-size:.92rem;font-weight:700;
  letter-spacing:-.02em;line-height:1}
.merk-woordmerk{display:flex;flex-direction:column;line-height:1.05}
.merk-woordmerk b{color:var(--marine);font-weight:800;letter-spacing:-.02em}
.merk-woordmerk em{font-style:normal;font-size:.66rem;font-weight:600;color:var(--zwak);
  letter-spacing:.02em}

/* =======================================================================
   Slideshow
   Alle dia's liggen op elkaar; alleen de actieve is zichtbaar. Zo springt
   de pagina niet en werkt het ook wanneer JavaScript uitvalt: dan blijft
   gewoon de eerste dia staan.
   ======================================================================= */
.diavak{
  position:relative;margin:0 0 6px;background:var(--marine);overflow:hidden;
  isolation:isolate}
.dia-spoor{position:relative;display:grid}
.dia{
  grid-area:1/1;position:relative;display:block;color:#fff;
  opacity:0;visibility:hidden;transition:opacity .7s var(--ease);
  aspect-ratio:1600/660;min-height:230px}
.dia.aan{opacity:1;visibility:visible}
.dia img{width:100%;height:100%;object-fit:cover;object-position:center}
.dia-waas{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,16,42,var(--waas,.45)) 0%,
             rgba(6,16,42,calc(var(--waas,.45) * .55)) 45%,rgba(6,16,42,0) 78%)}
.dia-rechts .dia-waas{transform:scaleX(-1)}
.dia-midden .dia-waas{
  background:radial-gradient(ellipse at center,rgba(6,16,42,var(--waas,.45)) 0%,
             rgba(6,16,42,calc(var(--waas,.45) * .4)) 70%,rgba(6,16,42,0) 100%)}
.dia-donker .dia-waas{
  background:linear-gradient(90deg,rgba(255,255,255,var(--waas,.45)) 0%,
             rgba(255,255,255,0) 72%)}

.dia-tekst{
  position:absolute;top:50%;left:clamp(20px,6vw,72px);transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  max-width:min(560px,60%);text-shadow:0 2px 14px rgba(6,16,42,.35)}
.dia-rechts .dia-tekst{left:auto;right:clamp(20px,6vw,72px);align-items:flex-end;text-align:right}
.dia-midden .dia-tekst{left:50%;transform:translate(-50%,-50%);align-items:center;text-align:center;
  max-width:min(680px,84%)}
.dia-tekst strong{font-size:clamp(1.5rem,3.6vw,2.9rem);font-weight:800;letter-spacing:-.03em;
  line-height:1.06}
.dia-tekst em{font-style:normal;font-size:clamp(.92rem,1.5vw,1.12rem);font-weight:500;
  opacity:.94;line-height:1.45}
.dia-donker .dia-tekst{color:var(--marine);text-shadow:0 1px 10px rgba(255,255,255,.5)}
.dia-knop{
  display:inline-flex;align-items:center;gap:8px;margin-top:4px;
  padding:11px 22px;border-radius:999px;background:var(--accent);color:#fff;
  font-size:.9rem;font-weight:700;text-shadow:none;
  box-shadow:0 6px 20px rgba(224,26,43,.35);
  transition:background .2s var(--ease),transform .2s var(--veer)}
a.dia:hover .dia-knop{background:var(--accent-dk);transform:translateY(-2px)}

.dia-pijl{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;
  background:rgba(255,255,255,.86);color:var(--marine);cursor:pointer;
  box-shadow:0 4px 16px rgba(6,16,42,.28);opacity:0;
  transition:opacity .25s,background .2s,transform .2s var(--veer)}
.diavak:hover .dia-pijl,.dia-pijl:focus-visible{opacity:1}
.dia-pijl:hover{background:#fff;transform:translateY(-50%) scale(1.08)}
.dia-vorige{left:16px}
.dia-volgende{right:16px}

.dia-bolletjes{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:2;
  display:flex;gap:8px;padding:7px 12px;border-radius:999px;
  background:rgba(6,16,42,.34);backdrop-filter:blur(6px)}
.dia-bolletjes button{
  width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.5);transition:background .2s,width .3s var(--veer)}
.dia-bolletjes button.aan{background:#fff;width:26px;border-radius:999px}

.dia-leeg{
  background:linear-gradient(140deg,var(--marine),#0a1838);color:#fff;
  padding:clamp(40px,7vw,86px) 0;text-align:center}
.dia-leeg h1{font-size:clamp(1.8rem,4.4vw,3.1rem);letter-spacing:-.03em}
.dia-leeg p{max-width:620px;margin:14px auto 24px;opacity:.9}

@media (max-width:760px){
  .dia{aspect-ratio:4/3;min-height:300px}
  .dia-tekst,.dia-rechts .dia-tekst{left:20px;right:20px;max-width:none;
    align-items:flex-start;text-align:left}
  .dia-pijl{display:none}
}
@media (prefers-reduced-motion:reduce){
  .dia{transition:none}
}

/* =======================================================================
   Werkwijze in vier stappen
   ======================================================================= */
.werkwijze{margin:34px 0 8px}
.werkwijze-kop{font-size:1.32rem;margin-bottom:18px}
.werkwijze-rij{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px;
  margin:0;padding:0;list-style:none;counter-reset:stap}
.werkwijze-rij li{
  position:relative;background:var(--vlak);border:1px solid var(--lijn);
  border-radius:var(--r);padding:20px 18px 18px;
  display:flex;flex-direction:column;gap:6px;
  transition:border-color .2s,box-shadow .2s var(--ease),transform .2s var(--veer)}
.werkwijze-rij li:hover{border-color:var(--lijn-2);box-shadow:var(--schaduw-op);transform:translateY(-2px)}
.stap-n{
  display:grid;place-items:center;width:30px;height:30px;border-radius:9px;
  background:var(--blauw-lt);color:var(--marine);font-weight:800;font-size:.95rem;margin-bottom:4px}
.werkwijze-rij b{font-size:1rem}
.werkwijze-rij span:not(.stap-n){color:var(--tekst-2);font-size:.88rem;line-height:1.55}
.werkwijze-rij a{color:var(--blauw);font-weight:600;text-decoration:underline}

/* =======================================================================
   Productkaart in offertemodus
   ======================================================================= */
.kaart-voet-offerte{flex-direction:column;align-items:stretch;gap:9px}
.kaart-eenheid{font-size:.8rem;color:var(--zwak);font-weight:600}
.kaart-aanvraag{
  font-size:.78rem;font-weight:600;color:var(--zwak);text-align:center;letter-spacing:.01em}
.btn.blok{width:100%}

.eenheidkeuze{display:flex;gap:0;border:1px solid var(--lijn);border-radius:var(--r-sm);
  overflow:hidden;background:var(--vlak-2)}
.eenheidkeuze button{
  flex:1;padding:7px 6px;border:0;background:transparent;cursor:pointer;
  font-size:.8rem;font-weight:600;color:var(--tekst-2);
  transition:background .2s,color .2s}
.eenheidkeuze button.aan{background:var(--marine);color:#fff}
.eenheidkeuze button:not(.aan):hover{background:var(--blauw-lt);color:var(--marine)}

/* ------------------------------------------------- koopblok op offerte */
.koopblok-offerte .offerte-kop{
  padding:14px 16px;border-radius:var(--r-sm);background:var(--blauw-zacht);
  border:1px solid var(--blauw-lt);margin-bottom:14px}
.koopblok-offerte .offerte-kop b{color:var(--marine);font-size:1.05rem}
.koopblok-offerte .offerte-kop p{margin:5px 0 0;color:var(--tekst-2);font-size:.88rem}
.ko-aanvraag{color:var(--zwak);font-weight:600;font-size:.82rem}

/* =======================================================================
   Aanvraaglijst en aanvraagformulier
   ======================================================================= */
.mregel-stuks b{font-size:1.05rem;color:var(--marine)}
.aanvraag-uitleg{
  margin-top:16px;padding:14px 16px;border-radius:var(--r-sm);
  background:var(--blauw-zacht);border:1px solid var(--blauw-lt)}
.aanvraag-uitleg b{color:var(--marine);display:block;margin-bottom:4px}
.aanvraag-uitleg p{margin:0;font-size:.86rem;color:var(--tekst-2);line-height:1.55}

.afreken-regels{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:10px;
  max-height:340px;overflow:auto}
.afreken-regels li{display:flex;gap:10px;align-items:center}
.afreken-regels img{width:42px;height:42px;object-fit:contain;border-radius:var(--r-xs);
  background:var(--vlak-2);flex:none}
.afreken-regels span{display:flex;flex-direction:column;min-width:0}
.afreken-regels b{font-size:.86rem;font-weight:600;line-height:1.3;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.afreken-regels em{font-style:normal;font-size:.78rem;color:var(--zwak)}

.vink.groot{display:flex;align-items:center;gap:10px;padding:12px 14px;margin-bottom:14px;
  border:1px solid var(--lijn);border-radius:var(--r-sm);background:var(--vlak-2);cursor:pointer}
.vink.groot span{font-weight:600}

.klaar-vak{text-align:center;padding:34px 20px;background:var(--vlak);
  border:1px solid var(--lijn);border-radius:var(--r);margin:24px 0}
.klaar-vink{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 14px;
  border-radius:50%;background:var(--groen-lt);color:var(--groen)}
.klaar-nummer{font-size:.95rem;color:var(--tekst-2)}
.klaar-knoppen{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}

/* =======================================================================
   D&C Food v2 - het handelaarsjasje
   ------------------------------------------------------------------
   Uitgangspunt: dit is een groothandel, geen softwareproduct. Dus geen
   zwevende dashboardkaartjes, maar dichte rekken, echte diepte en een
   marineblauw dat de hele pagina vasthoudt. Rood blijft het enige accent
   en wordt alleen gebruikt waar we iets willen laten opvallen.

   Radius blijft het bestaande stelsel: 14px vlakken, 9px kleine vlakken,
   999px voor alles waar je op klikt. Niets mengen.
   ======================================================================= */

:root{
  --marine-2:  #1b3a7a;
  --marine-dp: #0a1838;
  --goud:      #c9a44c;
  --rand-glans: inset 0 1px 0 rgba(255,255,255,.6);
  --diepte-1: 0 1px 2px rgba(10,24,56,.06), 0 4px 12px rgba(10,24,56,.05);
  --diepte-2: 0 10px 24px rgba(10,24,56,.10), 0 22px 48px rgba(10,24,56,.08);
  --diepte-3: 0 18px 40px rgba(10,24,56,.16), 0 40px 80px rgba(10,24,56,.12);
}

/* ------------------------------------------------------------------ kop */
/* Glas met een echte binnenrand: dat geeft de pil een fysieke kant in
   plaats van de platte witte balk van daarnet. */
.kop-pil{
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(18px) saturate(170%);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:var(--diepte-2), var(--rand-glans);
}
body.gescrold .kop-pil{
  background:rgba(255,255,255,.9);
  box-shadow:var(--diepte-3), var(--rand-glans)}
@media (prefers-reduced-transparency: reduce){
  .kop-pil{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
}

.kop-merkteken{
  background:linear-gradient(150deg,var(--marine-2),var(--marine) 48%,var(--marine-dp));
  box-shadow:0 4px 14px rgba(10,24,56,.34), inset 0 1px 0 rgba(255,255,255,.28);
  position:relative;overflow:hidden}
.kop-merkteken::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.42),transparent 52%)}

/* De zoekbalk mag de breedste zijn: dat is wat een inkoper echt gebruikt. */
.zoek input{font-size:.92rem}
.zoek:focus-within{box-shadow:0 0 0 3px rgba(23,51,122,.14)}

/* ------------------------------------------------------- het megamenu */
/* Was: een witte SaaS-dropdown. Nu: een donker rek met kolommen, waarbij
   de hoofdcategorie de kop van het schap is en de subrubrieken eronder
   hangen. Donker omdat het menu dan duidelijk boven de pagina zweeft in
   plaats van erin te verdwijnen. */
.mega{
  width:min(94vw,1180px);
  /* De gloed zit in de achtergrond zelf en niet in een ::before, anders
     schuift hij weg zodra het paneel moet scrollen. */
  background:
    radial-gradient(900px 260px at 12% 0%, rgba(120,160,255,.20), transparent 60%),
    radial-gradient(700px 240px at 92% 0%, rgba(224,26,43,.14), transparent 60%),
    linear-gradient(168deg,var(--marine) 0%,var(--marine-dp) 100%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:var(--diepte-3);
  border-radius:var(--r);
  padding:18px 18px 14px;
  /* Elf rubrieken passen niet altijd op een scherm. Liever een paneel dat
     binnen beeld blijft en zelf scrolt, dan een menu dat over de knoppen
     eronder heen valt. */
  max-height:min(74vh,620px);
  overflow-y:auto;overscroll-behavior:contain}
.mega::-webkit-scrollbar{width:10px}
.mega::-webkit-scrollbar-track{background:transparent}
.mega::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:99px;
  border:3px solid transparent;background-clip:content-box}
.mega::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3);background-clip:content-box}
.mega{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
/* De teller staat in de basis rechts uitgelijnd met margin-left; dat botst
   met de flexverdeling hierboven, dus zetten we hem terug. */
.mega-kolom > a .n{margin-left:0}
.mega-grid{position:relative;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,158px),1fr));gap:2px 14px}

.mega-kolom{
  padding:8px 8px 10px;border-radius:var(--r-sm);
  transition:background .22s var(--ease)}
.mega-kolom:hover{background:rgba(255,255,255,.05)}

.mega-kolom h4{margin:0 0 7px;padding-bottom:7px;
  border-bottom:1px solid rgba(255,255,255,.13)}
.mega-kolom h4 a{
  display:flex;align-items:center;gap:9px;padding:4px 6px;border-radius:var(--r-xs);
  color:#fff;font-size:.875rem;font-weight:700;letter-spacing:-.01em;line-height:1.25}
/* De basis kleurt dit vlak lichtblauw bij hover; met witte letters erop
   verdween de naam volledig. Daarom hier zowel kleur als vlak zetten. */
.mega-kolom h4 a:hover{background:rgba(255,255,255,.12);color:#fff}
.mega-ic{
  display:grid;place-items:center;width:26px;height:26px;border-radius:8px;flex:none;
  background:rgba(255,255,255,.10);color:#bcd0ff;
  border:1px solid rgba(255,255,255,.12);
  transition:background .22s var(--ease),color .22s,transform .3s var(--veer)}
.mega-kolom:hover .mega-ic{background:var(--accent);color:#fff;transform:rotate(-6deg) scale(1.06)}
.mega-ic .cat-icoon{width:15px;height:15px}

.mega-kolom > a{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:4px 6px;border-radius:var(--r-xs);
  color:#c3d2ee;font-size:.82rem;font-weight:500;line-height:1.3;
  transition:background .16s,color .16s,padding-left .16s var(--ease)}
.mega-kolom > a:hover{background:rgba(255,255,255,.09);color:#fff;padding-left:13px}
.mega-kolom > a .n{
  min-width:22px;padding:1px 6px;border-radius:999px;text-align:center;
  background:rgba(255,255,255,.09);color:#9fb4d8;
  font-size:.7rem;font-weight:700;font-variant-numeric:tabular-nums}
.mega-kolom > a:hover .n{background:rgba(255,255,255,.18);color:#fff}

.mega-voet{
  position:relative;margin-top:12px;padding-top:12px;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;gap:8px;flex-wrap:wrap}
.mega-voet a{
  padding:8px 16px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  color:#dbe5f7;font-size:.83rem;font-weight:600;
  transition:background .2s,color .2s,transform .2s var(--veer)}
.mega-voet a:hover{background:#fff;color:var(--marine);transform:translateY(-2px)}

@media (max-width:900px){ .mega{padding:18px} }

/* ======================================================================
   Slideshow: tekst uitlijnen op het paginaraster
   Stond eerder op een vast aantal pixels van de rand, waardoor hij bij
   brede schermen los kwam te staan van de rest van de pagina.
   ====================================================================== */
.dia-tekst{
  left:50%;transform:translate(-50%,-50%);
  width:min(100% - clamp(24px,4vw,64px),var(--wrap));
  max-width:none;align-items:flex-start}
.dia-rechts .dia-tekst{left:50%;right:auto;align-items:flex-end;text-align:right}
.dia-midden .dia-tekst{align-items:center;text-align:center}
.dia-tekst > *{max-width:min(560px,72%)}
.dia-midden .dia-tekst > *{max-width:min(720px,90%)}
.dia-tekst strong{text-wrap:balance}
.dia-knop{border-radius:999px;box-shadow:0 8px 24px rgba(224,26,43,.38),
  inset 0 1px 0 rgba(255,255,255,.28)}
@media (max-width:760px){
  .dia-tekst > *,.dia-midden .dia-tekst > *{max-width:100%}
}

/* ======================================================================
   Troeven: waarom een handelaar hier koopt
   ====================================================================== */
.troeven{
  background:linear-gradient(180deg,#fff,var(--pagina));
  border-bottom:1px solid var(--lijn);
  padding:26px 0 24px}
.troeven-rij{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,228px),1fr));gap:10px}
.troef{
  display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;
  column-gap:13px;row-gap:2px;align-items:start;
  padding:14px 15px;border-radius:var(--r);
  background:var(--wit);border:1px solid var(--lijn);
  box-shadow:var(--diepte-1);
  transition:border-color .22s,box-shadow .24s var(--ease),transform .24s var(--veer)}
.troef:hover{border-color:#c2d2ea;box-shadow:var(--diepte-2);transform:translateY(-3px)}
.troef-ic{
  grid-row:1/3;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
  background:linear-gradient(150deg,var(--blauw-lt),#dbe5f8);
  color:var(--marine);border:1px solid #cfdcf1;
  box-shadow:var(--rand-glans)}
.troef-ic svg{width:21px;height:21px}
.troef b{font-size:.9rem;line-height:1.25;letter-spacing:-.01em}
.troef span{font-size:.82rem;color:var(--tekst-2);line-height:1.5}
@media (max-width:640px){ .troef{grid-template-columns:38px 1fr} .troef-ic{width:38px;height:38px} }

/* ======================================================================
   Werkwijze in vier stappen: een spoor, geen losse kaartjes
   ====================================================================== */
/* De opmaak van de stappen staat verderop, bij "Werkwijze: een spoor".
   Daar zijn het geen kaartjes meer maar cirkels op een lijn. */

/* ======================================================================
   Merkenband: een doorlopend rek
   Eenmalig op de pagina. Staat stil zodra je hem aanwijst of met het
   toetsenbord binnenkomt, en volledig bij reduced motion.
   ====================================================================== */
.band{margin:38px 0 6px}
.band-kop{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-bottom:16px;flex-wrap:wrap}
.band-kop h2{font-size:1.32rem}
.band-venster{
  position:relative;overflow:hidden;
  border:1px solid var(--lijn);border-radius:var(--r);background:var(--wit);
  box-shadow:var(--diepte-1);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.band-spoor{display:flex;align-items:center;gap:10px;padding:16px 10px;width:max-content;
  animation:bandloop 46s linear infinite}
.band-venster:hover .band-spoor,
.band-venster:focus-within .band-spoor{animation-play-state:paused}
@keyframes bandloop{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* De opmaak van een los logo staat verderop, bij "Partnerband, tweede
   opzet". Hier alleen wat de band zelf nodig heeft. */
@media (prefers-reduced-motion:reduce){
  .band-spoor{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .band-venster{-webkit-mask-image:none;mask-image:none}
}

/* ======================================================================
   Afhandeling na de offerte
   ====================================================================== */
.afhandeling{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:28px;
  align-items:center;margin:12px 0 44px;padding:26px;
  border-radius:var(--r);border:1px solid var(--lijn);
  background:
    radial-gradient(700px 200px at 0% 0%, #eef3fc, transparent 70%),
    var(--wit);
  box-shadow:var(--diepte-1)}
.afh-tekst h2{font-size:1.3rem;margin-bottom:8px}
.afh-tekst p{margin:0;color:var(--tekst-2);font-size:.9rem;line-height:1.6;max-width:44ch}
.afh-lijst{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:10px}
.afh-lijst li{
  display:grid;grid-template-columns:36px 1fr;grid-template-rows:auto auto;
  column-gap:11px;align-items:center;
  padding:12px 13px;border-radius:var(--r-sm);
  background:var(--vlak-2);border:1px solid var(--lijn)}
.afh-ic{grid-row:1/3;display:grid;place-items:center;width:36px;height:36px;
  border-radius:10px;background:#fff;color:var(--marine);border:1px solid var(--lijn)}
.afh-ic svg{width:19px;height:19px}
.afh-lijst b{font-size:.86rem}
.afh-lijst small{font-size:.78rem;color:var(--zwak);line-height:1.4}
@media (max-width:860px){ .afhandeling{grid-template-columns:1fr;padding:20px} }

/* ======================================================================
   Productkaart: een artikel in het rek, met glans
   ====================================================================== */
.kaart{
  border-radius:var(--r);border:1px solid var(--lijn);
  box-shadow:var(--diepte-1);overflow:hidden;
  transition:border-color .22s,box-shadow .26s var(--ease),transform .26s var(--veer)}
.kaart:hover{border-color:#c2d2ea;box-shadow:var(--diepte-2);transform:translateY(-4px)}
.kaart-foto{
  position:relative;background:
    radial-gradient(420px 180px at 50% 8%, #fff, var(--vlak-2) 78%);
  overflow:hidden}
/* De glans loopt eenmalig over de foto bij hover: dat geeft het gevoel
   van gelakt karton in plaats van een platte div. */
.kaart-foto::after{
  content:"";position:absolute;top:-70%;left:-150%;width:52%;height:240%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.72),transparent);
  transform:skewX(-18deg);transition:left .75s var(--ease);pointer-events:none;z-index:1}
.kaart:hover .kaart-foto::after{left:170%}
.kaart-foto img{transition:transform .45s var(--veer)}
.kaart:hover .kaart-foto img{transform:scale(1.06)}

.kaart-merk{
  font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--marine-2)}
.kaart-naam{font-weight:650;letter-spacing:-.012em;line-height:1.32}
.kaart:hover .kaart-naam{color:var(--marine)}

.vlag span{
  border-radius:999px;font-size:.68rem;font-weight:800;letter-spacing:.03em;
  padding:4px 9px;box-shadow:0 3px 10px rgba(10,24,56,.18), var(--rand-glans)}
.vlag .nieuw{background:linear-gradient(160deg,#1aa563,#0d7d49);color:#fff}
.vlag .top{background:linear-gradient(160deg,var(--accent),var(--accent-dk));color:#fff}
.vlag .b2b{background:linear-gradient(160deg,var(--marine-2),var(--marine-dp));color:#fff}

.kaart-aanvraag{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  color:var(--marine-2);background:var(--blauw-zacht);
  border:1px dashed #c2d2ea;border-radius:999px;padding:4px 10px}

.eenheidkeuze{border-radius:999px;padding:3px;background:var(--vlak-2);
  border:1px solid var(--lijn)}
.eenheidkeuze button{border-radius:999px;padding:6px 8px}
.eenheidkeuze button.aan{
  background:linear-gradient(160deg,var(--marine-2),var(--marine));color:#fff;
  box-shadow:0 2px 8px rgba(10,24,56,.24), var(--rand-glans)}

/* Knoppen krijgen dezelfde gelakte afwerking. */
.btn-blauw{
  background:linear-gradient(160deg,var(--marine-2),var(--marine) 60%,var(--marine-dp));
  box-shadow:0 2px 8px rgba(10,24,56,.26), inset 0 1px 0 rgba(255,255,255,.18);
  position:relative;overflow:hidden}
.btn-blauw::after{
  content:"";position:absolute;top:-70%;left:-140%;width:45%;height:240%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.36),transparent);
  transform:skewX(-18deg);transition:left .7s var(--ease)}
.btn-blauw:hover::after{left:170%}
.btn-blauw:hover{background:linear-gradient(160deg,var(--marine),var(--marine-dp));
  box-shadow:0 8px 22px rgba(10,24,56,.30), inset 0 1px 0 rgba(255,255,255,.18)}

/* ------------------------------------------------------ merk- en cattegels */
.merktegel,.cattegel{
  border-radius:var(--r);box-shadow:var(--diepte-1);
  transition:border-color .22s,box-shadow .26s var(--ease),transform .26s var(--veer)}
.merktegel:hover,.cattegel:hover{box-shadow:var(--diepte-2);transform:translateY(-4px)}
.merk-vlak{background:
  radial-gradient(240px 120px at 50% 0%, #fff, var(--vlak-2) 80%)}
.merk-vlak img{max-width:82%;max-height:64%;object-fit:contain}
.cat-vlak{
  background:linear-gradient(150deg,var(--blauw-lt),#dde7f8);
  color:var(--marine);border:1px solid #cfdcf1;box-shadow:var(--rand-glans)}
.cattegel:hover .cat-vlak{
  background:linear-gradient(150deg,var(--marine-2),var(--marine));color:#fff;
  border-color:transparent}

/* ======================================================================
   Aanvraaglijst: drie kolommen, alles op een lijn
   De rechterkolom stond eerder buiten het raster, waardoor "20 st." en
   "dozen" over elkaar heen vielen.
   ====================================================================== */
.mregel{grid-template-columns:88px minmax(0,1fr) auto;align-items:center;
  border-radius:var(--r);box-shadow:var(--diepte-1)}
.mregel-foto{width:88px;height:88px;
  background:radial-gradient(200px 90px at 50% 10%, #fff, var(--vlak-2) 80%)}
.mregel-rechts{
  display:grid;grid-auto-flow:row;justify-items:end;align-content:center;gap:9px;
  min-width:158px}
.mregel-stuks{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.mregel-stuks b{font-size:1.15rem;font-weight:800;color:var(--marine);
  font-variant-numeric:tabular-nums;line-height:1}
.mregel-stuks small{font-size:.76rem;color:var(--zwak)}
@media (max-width:720px){
  .mregel{grid-template-columns:64px minmax(0,1fr);row-gap:12px}
  .mregel-foto{width:64px;height:64px}
  .mregel-rechts{grid-column:1/-1;justify-items:stretch;grid-auto-flow:column;
    align-items:center;justify-content:space-between;min-width:0}
  .mregel-rechts .aantal{justify-self:center}
  .mregel-weg{justify-self:end}
}

.mandje-totaal{border-radius:var(--r);box-shadow:var(--diepte-2)}
.aanvraag-uitleg{background:
  radial-gradient(400px 140px at 0% 0%, #eaf0fc, var(--blauw-zacht) 70%)}

/* ======================================================================
   Reduced motion: alles wat loopt, staat stil
   ====================================================================== */
@media (prefers-reduced-motion:reduce){
  .band-spoor,.kaart-foto::after,.btn-blauw::after,.mregel::after{animation:none;transition:none}
  .werkwijze-rij li::before{transition:none;transform:scaleX(1)}
}

/* ======================================================================
   Offerteformulier
   De basis kende .veld met een <label> erin; wij zetten het bijschrift in
   een <span> zodat het hele blok klikbaar is. Deze regels vullen dat aan
   en geven de aanvraagpagina dezelfde opbouw als de rest van de site.
   ====================================================================== */
.vak{
  background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);
  padding:22px;margin-bottom:16px;box-shadow:var(--diepte-1)}
.vak > h2{font-size:1.05rem;margin-bottom:16px;letter-spacing:-.015em}

/* Een <span> in een veld doet hier dienst als label. Maar de uitlegregel
   onder een veld is ook een span, en die kreeg zo hetzelfde gewicht en
   dezelfde kleur als het label erboven: twee regels die er even belangrijk
   uitzien, terwijl de ene vertelt wat je moet invullen en de andere alleen
   uitlegt. Vandaar de uitzondering; die staat er meteen bij, want los in
   het bestand raakt hij ooit los van deze regel. */
.veld > span{font-size:.84rem;font-weight:650;color:var(--tekst-2)}
.veld > span.hint{font-size:.78rem;font-weight:400;color:var(--zwak);line-height:1.45}
.veld > span em{font-style:normal;color:var(--accent);font-weight:700}
.veld > small{font-size:.76rem;color:var(--zwak);line-height:1.45}
.veld input:disabled{background:var(--vlak-2);color:var(--zwak);cursor:not-allowed}

.veldrij{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  gap:12px;margin-bottom:12px;align-items:start}
.veldrij:last-child{margin-bottom:0}
.veldrij .veld.breed{grid-column:span 2}
.veldrij .veld.smal{grid-column:span 1}
@media (max-width:620px){
  .veldrij{grid-template-columns:1fr}
  .veldrij .veld.breed,.veldrij .veld.smal{grid-column:auto}
}

.leveradres{
  padding:16px;border-radius:var(--r-sm);background:var(--vlak-2);
  border:1px solid var(--lijn);margin-bottom:14px}
.leveradres[hidden]{display:none}

.afreken-zij{position:sticky;top:130px;background:var(--wit);
  border:1px solid var(--lijn);border-radius:var(--r);padding:22px;
  box-shadow:var(--diepte-2)}
.afreken-zij > h2{font-size:1.02rem;margin-bottom:14px}

/* Aanvraagbevestiging */
.klaar-vak{box-shadow:var(--diepte-2)}
.klaar-vak h1{font-size:1.7rem;letter-spacing:-.025em;margin-bottom:6px}
.klaar-nummer b{font-variant-numeric:tabular-nums;color:var(--marine)}

@media (max-width:900px){
  .afreken{grid-template-columns:1fr}
  .afreken-zij{position:static}
}

/* Een kaart in offertemodus: geen prijsregel, dus de voet mag rustiger en
   de nadruk ligt op de eenheidkeuze en de knop. */
.kaart-offerte .kaart-voet{border-top:1px solid var(--lijn);background:var(--vlak-2)}
.kaart-offerte:hover .kaart-voet{background:var(--blauw-zacht)}

/* ======================================================================
   Partnerband
   Echte logo's in allerlei formaten en kleuren. Ze staan standaard in
   grijstinten zodat de rij rustig blijft, en komen tot leven als je er
   met de muis overheen gaat.
   ====================================================================== */
.band-kop .klein{white-space:nowrap}
.band-merk{width:158px;height:88px;padding:16px}
.band-merk img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
@media (max-width:560px){ .band-merk{width:126px;height:74px;padding:12px} }

/* ======================================================================
   Partnerband, tweede opzet
   ------------------------------------------------------------------
   De logo's stonden in grijze vakjes en waren ontkleurd. Dat werkt niet:
   deze bestanden hebben een doorzichtige achtergrond, dus je zag vooral
   het vakje. En een partnerlogo hoort in zijn eigen kleuren te staan,
   anders is het geen visitekaartje meer.

   Nu: geen kaartjes, geen filter. Alleen de logo's, ruim uit elkaar, op
   een rustige witte strook. De hoogte is per logo gelijk zodat een breed
   en een smal merk toch even zwaar wegen.
   ====================================================================== */
.band-venster{
  background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);
  box-shadow:var(--diepte-1)}
.band-spoor{gap:0;padding:26px 8px}

.band-merk{
  display:grid;place-items:center;flex:none;
  padding:0 clamp(22px,3vw,46px);
  transition:transform .3s var(--veer)}
.band-merk:hover{transform:translateY(-3px) scale(1.05)}

/* Eén vaste hoogte, breedte volgt. Zo blijft de rij optisch in balans
   zonder dat een liggend logo de rest wegdrukt. */
.band-merk img{height:clamp(38px,4.4vw,54px);width:auto;object-fit:contain}
.band-merk span{
  font-size:1.05rem;font-weight:800;color:var(--marine);white-space:nowrap}

@media (max-width:560px){
  .band-spoor{padding:20px 6px}
  .band-merk{padding:0 20px}
  .band-merk img{height:34px}
}

/* ======================================================================
   Categorietegels met eigen foto
   De foto staat gecentreerd boven de naam. Geen subrubrieken meer in de
   tegel: die staan al in het assortimentsmenu en maakten de tegel een
   opsomming in plaats van een ingang.
   ====================================================================== */
.cattegel{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:2px;padding:20px 16px 18px;background:var(--wit);
  border:1px solid var(--lijn);border-radius:var(--r);
  position:relative;overflow:hidden}
.cattegel::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--marine),var(--marine-2),var(--accent));
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.cattegel:hover::before{transform:scaleX(1)}

.cat-vlak{
  display:grid;place-items:center;width:92px;height:92px;margin-bottom:12px;
  border-radius:50%;overflow:hidden;flex:none;
  background:linear-gradient(150deg,var(--blauw-lt),#dde7f8);
  border:1px solid #cfdcf1;box-shadow:var(--rand-glans);
  transition:transform .4s var(--veer),box-shadow .3s var(--ease)}
.cattegel:hover .cat-vlak{transform:translateY(-3px) scale(1.06);
  box-shadow:0 10px 24px rgba(10,24,56,.16)}
.cat-vlak img{width:100%;height:100%;object-fit:cover}
.cattegel.met-foto .cat-vlak{background:var(--vlak-2);padding:0}
.cat-vlak .cat-icoon{width:38px;height:38px}

.cat-naam{font-size:1rem;font-weight:700;letter-spacing:-.015em;line-height:1.25}
.cat-n{font-size:.82rem;color:var(--zwak);font-variant-numeric:tabular-nums}

.catraster{grid-template-columns:repeat(auto-fill,minmax(min(100%,178px),1fr));gap:12px}

/* ======================================================================
   Mobiel
   ====================================================================== */
/* Tussen 761 en 900px is er nog plaats voor de zoekbalk, maar niet meer
   naast de navigatie. Hij zakt daar naar een eigen regel. Onder 760px
   neemt de basis het over en verdwijnt hij achter het loepje. */
@media (min-width:761px) and (max-width:900px){
  .kop-pil{flex-wrap:wrap}
  .zoek{order:5;flex:1 1 100%;min-width:0}
}

@media (max-width:900px){
  /* Het bovenbandje werd te vol en liep buiten beeld. */
  .lb-in{gap:12px;font-size:.72rem}
  .lb-usp:nth-child(n+2){display:none}
  .lb-rechts{gap:12px}

  .kop{width:min(100% - 20px,var(--wrap));padding-top:8px}
  .kop-pil{gap:8px;padding:8px 8px 8px 12px}
  .pil-nav{display:none}
  /* De Assortiment-knop en het hamburgermenu openen hetzelfde paneel.
     Twee knoppen voor één ding maakte de kop onrustig, dus op mobiel
     blijft alleen het hamburgermenu over. */
  .mega-houder{display:none}
  .kop-acties{margin-left:auto;gap:2px}
  .merk-woordmerk{font-size:.9rem}
  .merk-woordmerk em{display:none}
}

@media (max-width:400px){
  .merk-woordmerk{display:none}
}

@media (max-width:560px){
  .kop-pil{padding:7px 7px 7px 10px}
  .catraster{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cat-vlak{width:74px;height:74px}
  .cat-naam{font-size:.9rem}
  .troeven-rij{grid-template-columns:1fr}
  .werkwijze-rij{grid-template-columns:1fr}
  .afh-lijst{grid-template-columns:1fr}
  /* Kerncijfers mogen zijwaarts schuiven in plaats van af te breken. */
  .lint-in{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;
    -webkit-overflow-scrolling:touch}
  .lint-in::-webkit-scrollbar{display:none}
  .lint-item{flex:none}
}

/* De dia's: op een telefoon staat de tekst onder de foto in plaats van
   erover, anders is hij niet te lezen. De foto houdt een vaste verhouding
   zodat de hoogte niet per dia verspringt. */
@media (max-width:640px){
  .dia{aspect-ratio:auto;min-height:0;display:grid;grid-template-rows:auto 1fr;
    align-content:start}
  .dia img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
  .dia-waas{display:none}
  .dia-tekst{
    position:static;transform:none;inset:auto;width:auto;max-width:none;
    padding:16px 18px 40px;gap:7px;
    background:linear-gradient(170deg,var(--marine),var(--marine-dp));
    color:#fff;text-shadow:none;align-items:flex-start;text-align:left}
  .dia-rechts .dia-tekst,.dia-midden .dia-tekst{
    align-items:flex-start;text-align:left;left:auto;right:auto}
  .dia-donker .dia-tekst{color:#fff;text-shadow:none}
  .dia-tekst > *{max-width:none}
  .dia-tekst strong{font-size:1.3rem;line-height:1.15}
  .dia-tekst em{font-size:.9rem}
  .dia-knop{margin-top:2px;padding:9px 18px;font-size:.85rem}
  /* Bolletjes onderaan het hele blok, niet halverwege de foto. */
  .dia-bolletjes{bottom:10px;top:auto}
}

/* ======================================================================
   Elk blok zijn eigen gezicht
   ------------------------------------------------------------------
   De pagina bestond uit één soort wit kaartje, steeds opnieuw. Hieronder
   krijgt elk blok een eigen vorm en materiaal, zodat je al scrollend ziet
   dat je in een ander deel van de pagina zit:

     werkwijze   genummerd spoor op de achtergrond, geen doos
     troefband   donkere band met ademende iconen
     cattegel    ronde foto boven de naam
     kaart       gelakt karton met glans
     afhandeling lichte strook met opsomming

   Alle beweging is subtiel en valt volledig weg bij reduced motion.
   ====================================================================== */

/* -------------------------------------------------- ademende beweging */
@keyframes adem{
  0%,100%{transform:translateY(0) scale(1)}
  50%    {transform:translateY(-3px) scale(1.045)}
}
@keyframes gloed{
  0%,100%{opacity:.35;transform:scale(1)}
  50%    {opacity:.7;transform:scale(1.18)}
}
@keyframes onthul{
  from{opacity:0;transform:translateY(22px)}
  to  {opacity:1;transform:none}
}

/* Blokken komen rustig in beeld zodra je ze nadert.
   Het verbergen hangt bewust aan een class die JavaScript zelf zet. Staat
   JS uit of gaat er iets mis, dan blijft alles gewoon staan; anders zou
   een fout in het script de halve pagina onzichtbaar maken. */
.js-onthul [data-onthul]{opacity:0}
.js-onthul [data-onthul].in-beeld{animation:onthul .65s var(--ease) both}

/* ======================================================================
   Werkwijze: een spoor, geen vier dozen
   ====================================================================== */
.werkwijze-rij{
  position:relative;gap:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
/* De lijn die de vier stappen verbindt. */
.werkwijze-rij::before{
  content:"";position:absolute;left:8%;right:8%;top:31px;height:2px;
  background:linear-gradient(90deg,var(--blauw-lt),var(--marine-2) 30%,
             var(--marine-2) 70%,var(--blauw-lt));
  opacity:.5}
.werkwijze-rij li{
  background:none;border:0;box-shadow:none;border-radius:0;
  padding:0 16px;text-align:center;align-items:center;gap:4px}
.werkwijze-rij li:hover{transform:none;box-shadow:none;border:0}
.werkwijze-rij li::before{display:none}
.werkwijze-rij .stap-n{
  position:static;width:62px;height:62px;border-radius:50%;margin:0 auto 12px;
  font-size:1.25rem;font-weight:800;
  background:linear-gradient(155deg,#fff,var(--blauw-lt));
  color:var(--marine);border:2px solid var(--marine-2);
  box-shadow:0 6px 18px rgba(10,24,56,.14), inset 0 1px 0 #fff;
  display:grid;place-items:center;
  transition:transform .35s var(--veer),background .3s,color .3s}
.werkwijze-rij li:hover .stap-n{
  background:linear-gradient(155deg,var(--marine-2),var(--marine-dp));
  color:#fff;transform:translateY(-4px) scale(1.08)}
.werkwijze-rij b{font-size:1rem;margin-bottom:2px}
@media (max-width:640px){
  .werkwijze-rij::before{display:none}
  .werkwijze-rij li{padding:0 0 22px}
}

/* ======================================================================
   Troefband: donkere onderbreking tussen de schappen
   ====================================================================== */
.troefband{
  position:relative;margin:34px 0 40px;padding:30px clamp(20px,3vw,38px) 32px;
  border-radius:var(--r);overflow:hidden;color:#fff;
  background:
    radial-gradient(760px 240px at 8% 0%, rgba(120,160,255,.22), transparent 62%),
    radial-gradient(620px 220px at 96% 100%, rgba(224,26,43,.20), transparent 62%),
    linear-gradient(150deg,var(--marine) 0%,var(--marine-dp) 100%);
  box-shadow:var(--diepte-2)}
.troefband-kop{
  font-size:1.22rem;margin-bottom:22px;letter-spacing:-.02em;color:#fff}
.troefband-rij{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:8px}
.troefband .troef{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  background:none;border:0;box-shadow:none;padding:6px 14px 6px 0;
  border-left:1px solid rgba(255,255,255,.14)}
.troefband .troef:first-child{border-left:0;padding-left:0}
.troefband .troef:hover{transform:none;box-shadow:none;border-color:rgba(255,255,255,.14)}
.troefband .troef{padding-left:18px}
.troefband .troef:first-child{padding-left:0}

/* De iconen ademen, elk met een eigen tel, zodat het geen marcherende
   rij wordt. De gloed erachter pulseert mee. */
.troefband .troef-ic{
  position:relative;grid-row:auto;width:46px;height:46px;border-radius:14px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
  color:#dbe6ff;box-shadow:none;
  animation:adem 4.6s var(--ease) infinite;
  animation-delay:calc(var(--t,0) * .55s)}
.troefband .troef-ic::after{
  content:"";position:absolute;inset:-7px;border-radius:inherit;z-index:-1;
  background:radial-gradient(circle,rgba(140,180,255,.5),transparent 68%);
  animation:gloed 4.6s var(--ease) infinite;
  animation-delay:calc(var(--t,0) * .55s)}
.troefband .troef-ic svg{width:22px;height:22px}
.troefband .troef b{color:#fff;font-size:.95rem}
.troefband .troef span{color:#c2d2ee;font-size:.84rem;line-height:1.5}

@media (max-width:640px){
  .troefband .troef{border-left:0;padding-left:0;
    border-top:1px solid rgba(255,255,255,.12);padding-top:14px}
  .troefband .troef:first-child{border-top:0;padding-top:0}
}

/* ======================================================================
   Kleine tekenen van leven elders
   ====================================================================== */
/* Het mandje-bolletje tikt zachtjes als er iets in zit. */
.telling[data-n]:not([data-n="0"]):not(:empty){animation:adem 3.4s var(--ease) infinite}
/* Het lint-item dat naar de offerte wijst, blijft zacht pulseren. */
.lint-b2b{position:relative}
.lint-b2b::after{
  content:"";position:absolute;inset:-3px;border-radius:inherit;z-index:-1;
  background:radial-gradient(circle,rgba(23,51,122,.22),transparent 70%);
  animation:gloed 5s var(--ease) infinite}

@media (prefers-reduced-motion:reduce){
  .js-onthul [data-onthul]{opacity:1;animation:none}
  .troefband .troef-ic,.troefband .troef-ic::after,
  .telling,.lint-b2b::after{animation:none}
}

/* ======================================================================
   Mobiel menu: een echt handelaarsmenu
   Iconen per rubriek, twee duidelijke groepen en onderaan een belknop.
   Zonder die iconen was het een kale lijst die bij elke webshop had
   kunnen horen.
   ====================================================================== */
.mob-in{padding:10px 8px 12px}
.mob-kop{
  display:block;padding:12px 12px 6px;
  font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--zwak)}
.mob-kop:not(:first-child){
  margin-top:6px;border-top:1px solid var(--lijn);padding-top:14px}

.mob-in a{
  display:flex;align-items:center;gap:12px;
  padding:11px 12px;border-radius:var(--r-sm);
  font-size:.95rem;font-weight:600;color:var(--tekst);
  transition:background .16s,color .16s,transform .18s var(--ease)}
.mob-in a:active{transform:scale(.985)}
.mob-in a:hover{background:var(--blauw-zacht);color:var(--marine)}
.mob-in a.uit{font-weight:550;color:var(--tekst-2)}

.mob-ic{
  display:grid;place-items:center;width:36px;height:36px;flex:none;
  border-radius:11px;color:var(--marine);
  background:linear-gradient(150deg,var(--blauw-lt),#dde7f8);
  border:1px solid #cfdcf1;box-shadow:var(--rand-glans)}
.mob-ic svg,.mob-ic .cat-icoon{width:19px;height:19px}
.mob-in a:hover .mob-ic{background:linear-gradient(150deg,var(--marine-2),var(--marine));
  color:#fff;border-color:transparent}
.mob-in a .n{
  margin-left:auto;min-width:26px;text-align:center;
  padding:2px 8px;border-radius:999px;background:var(--vlak-2);
  font-size:.75rem;font-weight:700;color:var(--zwak);
  font-variant-numeric:tabular-nums}
.mob-in a .n:empty{display:none}

.mob-bel{
  margin-top:12px;justify-content:center;
  background:linear-gradient(160deg,var(--marine-2),var(--marine-dp));
  color:#fff!important;box-shadow:0 6px 18px rgba(10,24,56,.28)}
.mob-bel:hover{background:linear-gradient(160deg,var(--marine),var(--marine-dp))}
.mob-bel svg{width:19px;height:19px;flex:none}
.mob-bel span{display:flex;flex-direction:column;line-height:1.15}
.mob-bel b{font-size:1rem;font-weight:800}

/* ======================================================================
   De kop leeft
   De pil, het bandje en het menu stonden stil: alle beweging zat in de
   pagina eronder. Hierdoor voelde het bovenste kwart van het scherm dood
   aan, terwijl dat juist het eerste is wat iemand ziet.

   Alles hieronder is puur sier. Er verandert geen enkele afmeting die de
   hoogte van de kop bepaalt, want die hoogte hangt vast aan de dode zone
   in kopKrimpt(). Zie hoofdstuk 9, valkuil 4.
   ====================================================================== */

@keyframes dcl-inzakken{ from{opacity:0;transform:translateY(-14px)} to{opacity:1;transform:none} }
@keyframes dcl-veeg{ 0%{transform:translateX(-130%) skewX(-20deg)}
                     55%,100%{transform:translateX(320%) skewX(-20deg)} }
@keyframes dcl-tik{ 0%,88%,100%{transform:scale(1);opacity:.85}
                    94%{transform:scale(1.5);opacity:1} }
@keyframes dcl-schuifin{ from{opacity:0;transform:translateY(-9px)} to{opacity:1;transform:none} }
@keyframes dcl-zijin{ from{opacity:0;transform:translateX(-10px)} to{opacity:1;transform:none} }
@keyframes dcl-drift{ 0%{background-position:0% 50%} 100%{background-position:200% 50%} }
@keyframes dcl-kenburns{ from{transform:scale(1)} to{transform:scale(1.075)} }

/* ---------------------------------------------------- bandje bovenaan */
/* Een heel trage kleurdrift over het donker. Je ziet het niet bewegen,
   je merkt alleen dat het niet stilstaat. */
.lint-boven{
  background:
    linear-gradient(100deg,var(--marine-dp) 0%,var(--marine) 30%,#1b3a7a 50%,
                    var(--marine) 70%,var(--marine-dp) 100%);
  background-size:200% 100%;
  animation:dcl-drift 26s linear infinite}

/* De groene stippen tikken om beurten, niet tegelijk: een rij die samen
   knippert leest als een defect lampje. */
.lb-usp::before{animation:dcl-tik 5.5s var(--ease) infinite}
.lb-usp:nth-child(2)::before{animation-delay:1.1s}
.lb-usp:nth-child(3)::before{animation-delay:2.2s}

.lb-rechts a{position:relative;transition:color .2s}
.lb-rechts a::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .25s var(--ease)}
.lb-rechts a:hover::after{transform:scaleX(1)}

/* ------------------------------------------------------------- de pil */
/* Komt bij het laden van boven binnenzakken. Eenmalig, dus het leidt niet
   af bij het lezen. */
.kop-pil{animation:dcl-inzakken .5s var(--ease) both}

/* Zodra je scrolt legt de pil een dunne accentgloed onder zich. Dat maakt
   zichtbaar dat hij zweeft in plaats van vastgeplakt te zitten. */
.kop-pil::after{
  content:"";position:absolute;left:12%;right:12%;bottom:-9px;height:10px;
  border-radius:999px;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse at center,rgba(23,51,122,.30),transparent 72%);
  opacity:0;transition:opacity .35s var(--ease)}
body.gescrold .kop-pil::after{opacity:1}

/* Het merkteken krijgt af en toe een glansveeg, zoals licht over lak. */
.kop-merkteken::before{
  content:"";position:absolute;top:0;bottom:0;left:0;width:36%;z-index:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.62),transparent);
  animation:dcl-veeg 7s var(--ease) infinite}
.merk:hover .kop-merkteken::before{animation-duration:1.4s}

/* --------------------------------------------------------- pilknoppen */
/* Was: een grijs vlak dat bij hover aan- en uitknipt. Nu groeit het vlak
   vanuit het midden open, en blijft er onder de actieve knop een rood
   streepje staan. Kleur en vlak worden altijd samen gezet, anders krijg
   je wit op wit (hoofdstuk 9, valkuil 2). */
.pilknop{overflow:visible;z-index:0}
.pilknop::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  background:rgba(16,35,59,.06);
  transform:scaleX(.55);opacity:0;
  transition:transform .28s var(--veer),opacity .2s var(--ease)}
.pilknop:hover::before{transform:scaleX(1);opacity:1}
.pk-mega::before,.pilknop.aan::before{display:none}
/* De basis zette bij hover zelf al een vlak. Dat zou nu bovenop het
   groeiende vlak komen en dubbel donker worden, dus daar halen we het
   weg. Kleur en vlak samen zetten, nooit alleen een van de twee. */
.pilknop:not(.aan):not(.pk-mega):hover{background:transparent;color:var(--tekst)}

.pil-nav .pilknop::after{
  content:"";position:absolute;left:50%;bottom:3px;width:0;height:2px;
  border-radius:2px;background:var(--accent);transform:translateX(-50%);
  transition:width .28s var(--veer)}
.pil-nav .pilknop:hover::after{width:16px}
.pil-nav .pilknop.aan::after{width:20px}

/* De assortimentsknop is de belangrijkste knop van de site. Bij hover
   licht hij op in plaats van alleen iets lichter te worden. */
.pk-mega{
  background:linear-gradient(150deg,var(--marine-2),var(--marine) 55%,var(--marine-dp));
  transition:box-shadow .28s var(--ease),transform .2s var(--veer),background .25s}
.pk-mega:hover{
  background:linear-gradient(150deg,#224590,var(--marine-2) 60%,var(--marine));
  box-shadow:0 6px 20px rgba(10,24,56,.34), 0 0 0 3px rgba(23,51,122,.14);
  transform:translateY(-1px)}
/* Open staat: een ring in de huiskleur. Hij stond in het rood, en rood is
   op deze site het accent voor promo en voor iets dat mis is. Een rode gloed
   om de menuknop leest daardoor als een foutmelding in plaats van als
   "dit staat open". */
.pk-mega[aria-expanded="true"]{
  box-shadow:0 6px 20px rgba(10,24,56,.34), 0 0 0 3px rgba(23,51,122,.22)}
.pk-mega svg:first-of-type{transition:transform .3s var(--veer)}
.pk-mega:hover svg:first-of-type{transform:rotate(-90deg)}

/* ------------------------------------------------------------- zoeken */
/* De loep loopt bij focus mee naar binnen en de balk licht op. Zo weet je
   zonder te kijken waar je cursor staat. */
.zoek .loep{transition:color .2s,transform .3s var(--veer)}
.zoek:focus-within .loep{transform:translateY(-50%) scale(1.12) rotate(-10deg)}
.zoek button svg{transition:transform .25s var(--veer)}
.zoek button:hover svg{transform:translateX(2px)}

/* ------------------------------------------------------- ronde knoppen */
.rondknop svg{transition:transform .3s var(--veer)}
.rondknop:hover svg{transform:scale(1.12)}
.mandjeknop:hover svg{transform:scale(1.1) rotate(-6deg)}
/* Het accountbolletje wipt even als je het account hebt. */
.rondknop .stip{animation:dcl-tik 6s var(--ease) infinite}

/* ----------------------------------------------------------- megamenu */
/* De kolommen komen na elkaar op in plaats van als één blok. Dat leest
   als een rek dat opengaat. De vertraging loopt op via nth-child, zodat
   er geen extra attribuut in de PHP hoeft. */
.mega-kolom{animation:dcl-schuifin .34s var(--ease) both}
.mega-kolom:nth-child(1){animation-delay:.02s}
.mega-kolom:nth-child(2){animation-delay:.05s}
.mega-kolom:nth-child(3){animation-delay:.08s}
.mega-kolom:nth-child(4){animation-delay:.11s}
.mega-kolom:nth-child(5){animation-delay:.14s}
.mega-kolom:nth-child(6){animation-delay:.17s}
.mega-kolom:nth-child(7){animation-delay:.20s}
.mega-kolom:nth-child(8){animation-delay:.23s}
.mega-kolom:nth-child(9){animation-delay:.26s}
.mega-kolom:nth-child(10){animation-delay:.29s}
.mega-kolom:nth-child(n+11){animation-delay:.32s}
.mega-voet{animation:dcl-schuifin .34s var(--ease) .30s both}

/* De rubriekregel schuift naar rechts en krijgt een rood streepje ervoor,
   zodat je ziet welke regel je zo aanklikt. */
.mega-kolom > a{position:relative}
.mega-kolom > a::before{
  content:"";position:absolute;left:2px;top:50%;width:0;height:2px;
  border-radius:2px;background:var(--accent);transform:translateY(-50%);
  transition:width .22s var(--ease)}
.mega-kolom > a:hover::before{width:6px}

/* -------------------------------------------------------- mobiel menu */
.mob-in > *{animation:dcl-zijin .3s var(--ease) both}
.mob-in > *:nth-child(1){animation-delay:.01s}
.mob-in > *:nth-child(2){animation-delay:.04s}
.mob-in > *:nth-child(3){animation-delay:.07s}
.mob-in > *:nth-child(4){animation-delay:.10s}
.mob-in > *:nth-child(5){animation-delay:.13s}
.mob-in > *:nth-child(6){animation-delay:.16s}
.mob-in > *:nth-child(7){animation-delay:.19s}
.mob-in > *:nth-child(n+8){animation-delay:.22s}

/* ---------------------------------------------------------- slideshow */
/* Een heel trage inzoom op de zichtbare dia. Een stilstaande banner van
   660px hoog is het grootste dode vlak van de startpagina. */
.dia img{will-change:transform}
.dia.aan img{animation:dcl-kenburns 14s var(--ease) both}

/* De bolletjes reageren voordat je klikt. */
.dia-bolletjes button:hover{background:rgba(255,255,255,.85)}
.dia-bolletjes button.aan:hover{background:#fff}

/* ------------------------------------------------------ lintbalk eronder */
.lint-item{transition:background .2s,color .2s,transform .2s var(--veer)}
.lint-item:hover{transform:translateY(-2px)}

/* ------------------------------------------------------------------- */
/* Wie beweging heeft uitgezet, krijgt precies de kop van hiervoor terug.
   Let op: de veeg en de inzoom moeten hier ook echt uit, niet alleen
   trager, anders blijft het scherm onrustig. */
@media (prefers-reduced-motion:reduce){
  .lint-boven,.lb-usp::before,.kop-pil,.kop-merkteken::before,
  .rondknop .stip,.mega-kolom,.mega-voet,.mob-in > *,.dia.aan img{
    animation:none}
  .kop-merkteken::before{display:none}
  .pilknop::before,.pil-nav .pilknop::after,.mega-kolom > a::before,
  .zoek .loep,.rondknop svg,.zoek button svg{transition:none}
  .mob-in > *,.mega-kolom,.mega-voet{opacity:1;transform:none}
}

/* ======================================================================
   De voet, tweede opzet
   Was: vier gelijke kolommen met links, zoals elke webshop. Het probleem
   daarmee is niet dat het lelijk is maar dat het niets zegt. Een
   groothandel wordt beoordeeld op of je hem kunt vinden en bereiken.

   Daarom drie vormen die van elkaar verschillen in plaats van vier
   dezelfde kolommen:
     - een oproepstrook die half over de voet heen ligt
     - een magazijnkaart met adres, nummer en afhaalregeling
     - rubrieken als pillen, want dat zijn knoppen en geen zinnen
   ====================================================================== */

.voet{
  position:relative;
  background:
    radial-gradient(900px 300px at 8% 0%, rgba(40,80,170,.28), transparent 62%),
    radial-gradient(700px 260px at 92% 8%, rgba(224,26,43,.12), transparent 60%),
    var(--marine-dp);
  color:#a9bcd2;margin-top:96px;padding:0 0 20px;
  /* Zonder dit klapt de negatieve marge van de strook hieronder samen met
     de bovenrand van de voet zelf: dan schuift het hele donkere vlak mee
     omhoog en ligt de strook er niet overheen maar erin. flow-root maakt
     van de voet een eigen blokopmaakcontext, en dan gebeurt dat niet. */
  display:flow-root}

/* ------------------------------------------------------ de oproepstrook */
/* Ligt met een negatieve marge over de bovenrand heen. De pagina eindigt
   daardoor niet met een streep maar met iets waar je op kunt klikken. */
.voet-strook{
  width:min(100% - clamp(20px,4vw,64px),var(--wrap));
  margin:-56px auto 34px;
  padding:22px clamp(20px,3vw,34px);border-radius:18px;
  background:linear-gradient(120deg,var(--accent),#b31220 78%);
  box-shadow:0 18px 40px rgba(140,10,25,.32), inset 0 1px 0 rgba(255,255,255,.22)}
.voet-strook-in{display:flex;align-items:center;justify-content:space-between;
  gap:22px;flex-wrap:wrap}
.vs-tekst{display:flex;flex-direction:column;gap:4px;min-width:min(100%,280px);flex:1 1 340px}
.vs-tekst b{color:#fff;font-size:1.16rem;font-weight:800;letter-spacing:-.02em}
.vs-tekst span{color:rgba(255,255,255,.86);font-size:.9rem;line-height:1.5;max-width:52ch}
.vs-knoppen{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.voet-strook .btn-wit{background:#fff;color:var(--marine-dp);font-weight:700;
  box-shadow:0 6px 18px rgba(80,0,10,.28)}
.voet-strook .btn-wit:hover{background:#fff;color:var(--accent-dk);transform:translateY(-2px)}

.vs-bel{display:flex;align-items:center;gap:11px;color:#fff!important}
.vs-bel-ic{display:grid;place-items:center;width:40px;height:40px;flex:none;
  border-radius:50%;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.3);
  transition:background .2s,transform .25s var(--veer)}
.vs-bel-ic svg{width:19px;height:19px}
.vs-bel:hover .vs-bel-ic{background:rgba(255,255,255,.28);transform:scale(1.06)}
.vs-bel > span:last-child{display:flex;flex-direction:column;line-height:1.2;
  font-size:.78rem;color:rgba(255,255,255,.82)}
.vs-bel b{font-size:1.02rem;font-weight:800;color:#fff}

/* --------------------------------------------------------- de indeling */
.voet-in{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);padding-bottom:32px}

/* ------------------------------------------------------ magazijnkaart */
.voet-magazijn{
  padding:22px;border-radius:16px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.vm-kop{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.vm-kop img{flex:none}
.vm-kop span{display:flex;flex-direction:column;line-height:1.2}
.vm-kop b{color:#fff;font-size:1.14rem;font-weight:800;letter-spacing:-.02em}
.vm-kop em{font-style:normal;font-size:.76rem;color:#7f96b3}
.vm-zin{font-size:.86rem;line-height:1.6;margin:0 0 18px;color:#9db1c9}

.vm-lijst{margin:0;display:grid;gap:14px}
.vm-lijst > div{display:grid;gap:3px}
.vm-lijst dt{display:flex;align-items:center;gap:9px;
  font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:#6f88a8}
.vm-lijst dd{margin:0;font-size:.88rem;line-height:1.55;padding-left:37px}
.vm-ic{display:grid;place-items:center;width:28px;height:28px;flex:none;
  border-radius:9px;background:rgba(255,255,255,.08);color:#9fc0ee}
.vm-ic svg{width:15px;height:15px}
.vm-groot{font-size:1.16rem;font-weight:800;color:#fff!important;letter-spacing:-.01em}
.vm-groot:hover{color:#9fc4ff!important}

/* -------------------------------------------------------- de link-vakken */
/* Twee vaste kolommen en geen auto-fit. Met auto-fit maakte de browser op
   een breed scherm zes kolommen van de resterende ruimte, waarna Snel
   regelen en de kennisbank er elk een pakten en er vier leeg bleven. Dat is
   precies het gat dat rechts in de voet stond. */
.voet-vakken{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(22px,3vw,40px);align-content:start}
.voet-vak-breed{grid-column:1 / -1}
.voet-vak h4{color:#fff;font-size:.7rem;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;margin:0 0 13px}
.voet-vak ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;line-height:1.4}
.voet-vak ul a{position:relative;display:inline-block;font-size:.88rem;
  transition:color .18s,transform .2s var(--ease)}
.voet-vak ul a:hover{transform:translateX(3px)}

/* Rubrieken als pillen. Er zijn er elf: in een lijst is dat een muur. */
.voet-pillen{display:flex;flex-wrap:wrap;gap:7px}
.voet-pillen a{
  padding:6px 13px;border-radius:999px;font-size:.83rem;font-weight:600;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  transition:background .2s,color .2s,border-color .2s,transform .2s var(--veer)}
.voet-pillen a:hover{background:#fff;color:var(--marine-dp)!important;
  border-color:#fff;transform:translateY(-2px)}
.voet-pillen .vp-uit{background:transparent;border-style:dashed;color:#8ba4c2}
.voet-pillen .vp-uit:hover{background:rgba(255,255,255,.12);color:#fff!important;
  border-style:solid;border-color:rgba(255,255,255,.3)}

/* ------------------------------------------------- drie artikelen in de voet */
/* Krijgt de volle breedte als er naast de pillen geen ruimte meer over is,
   want drie titels naast elkaar in een smalle kolom zijn onleesbaar. */
.voet-kennis{min-width:220px}
.vk-lijst{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:2px}
.vk-lijst a{display:grid;gap:2px;padding:9px 10px;margin-left:-10px;border-radius:10px;
  transition:background .18s}
.vk-lijst a:hover{background:rgba(255,255,255,.06)}
.vk-lijst time{font-size:.72rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:#6f88a8}
.vk-lijst a span{font-size:.87rem;font-weight:600;line-height:1.4;color:#c6d6ea}
.vk-lijst a:hover span{color:#fff}
.vk-alles{font-size:.83rem;font-weight:700;color:#9fc4ff!important}
.vk-alles:hover{color:#fff!important}

/* ----------------------------------------------------------- onderregel */
/* De wettelijke identificatie. Staat als eigen regel boven de copyright,
   want dit is wat een klant of een controleur moet kunnen vinden: met welke
   vennootschap doe je zaken, waar staat die, en hoe bereik je hem. De punten
   staan met een scheidingsteken op een rij zodat het een regel blijft en
   geen blok dat de voet nog langer maakt. */
.voet-gegevens{
  border-top:1px solid rgba(255,255,255,.1);padding-top:16px;margin-bottom:14px;
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;
  font-size:.8rem;color:#93a9c4;line-height:1.6}
.voet-gegevens span + span::before{content:"·";margin:0 10px;color:#4d688c}
.voet-gegevens .vg-naam{color:#dbe6f4;font-weight:700}
.voet-gegevens a{color:#93a9c4}
.voet-gegevens a:hover{color:#fff}
@media (max-width:560px){
  .voet-gegevens{display:grid;gap:3px}
  .voet-gegevens span + span::before{content:none}
}

.voet-onder{
  border-top:1px solid rgba(255,255,255,.1);padding-top:18px;
  display:flex;justify-content:space-between;align-items:center;
  gap:10px 22px;flex-wrap:wrap;font-size:.8rem;color:#93a9c4}
.voet-juridisch{display:flex;flex-wrap:wrap;gap:6px 18px}
.voet-juridisch a{color:#93a9c4}
.voet-juridisch a:hover{color:#fff}
.vo-noot{width:100%;color:#7a90ad;font-size:.78rem}

@media (max-width:1000px){
  .voet-in{grid-template-columns:1fr}
  .voet-strook{margin-top:-46px}
}
@media (max-width:720px){
  .voet-vakken{grid-template-columns:1fr}
}
@media (max-width:560px){
  .voet{margin-top:78px}
  .voet-strook{padding:20px}
  .vs-knoppen{width:100%;justify-content:space-between}
  .voet-strook .btn-wit{flex:1 1 auto;justify-content:center}
  .vm-lijst dd{padding-left:0}
  .voet-onder{flex-direction:column;align-items:flex-start}
}

/* ======================================================================
   Kennisbank
   Bewust geen productkaarten met een schaduw: dan gaat een bezoeker in de
   kennisbank naar producten zoeken. Dit is een vakblad-index. Een streep
   bovenaan, een datum, een titel, een zin. Het beeld komt van de
   typografie en niet van vlakken.
   ====================================================================== */

/* --------------------------------------------------------- rubriekmerk */
.rubriek{
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  padding:4px 11px;border-radius:999px;
  font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  background:var(--vlak-2);color:var(--tekst-2)}
.rubriek::before{content:"";width:5px;height:5px;border-radius:50%;
  background:currentColor;flex:none;opacity:.75}
.rub-regel {background:#fdecec;color:#a5121f}
.rub-prijs {background:#fdf1e3;color:#8a4c05}
.rub-assort{background:var(--blauw-lt);color:var(--blauw-dk)}
.rub-werk  {background:var(--groen-lt);color:#0a6b3c}

/* ------------------------------------------------------------- kiezer */
.kenniskiezer{display:flex;flex-wrap:wrap;gap:7px;margin:4px 0 26px}
.kenniskiezer a{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 16px;border-radius:999px;font-size:.86rem;font-weight:600;
  color:var(--tekst-2);background:var(--vlak);border:1px solid var(--lijn);
  transition:background .2s,color .2s,border-color .2s,transform .2s var(--veer)}
.kenniskiezer a:hover{border-color:var(--lijn-2);transform:translateY(-2px)}
.kenniskiezer a.aan{background:var(--marine);color:#fff;border-color:transparent;
  box-shadow:0 5px 16px rgba(10,24,56,.24)}
.kenniskiezer .n{font-size:.75rem;font-weight:700;padding:1px 7px;border-radius:99px;
  background:var(--vlak-2);color:var(--zwak)}
.kenniskiezer a.aan .n{background:rgba(255,255,255,.2);color:#fff}

/* ------------------------------------------------------- het leidende stuk */
.kennisleider{
  position:relative;display:grid;gap:0;margin-bottom:34px;overflow:hidden;
  border-radius:18px;color:#fff;
  background:
    radial-gradient(700px 240px at 88% 10%, rgba(224,26,43,.28), transparent 62%),
    linear-gradient(135deg,var(--marine-2),var(--marine) 45%,var(--marine-dp));
  box-shadow:var(--diepte-2);
  transition:transform .28s var(--veer),box-shadow .28s var(--ease)}
.kennisleider:hover{transform:translateY(-3px);box-shadow:var(--diepte-3)}
.kennisleider.met-beeld{grid-template-columns:minmax(0,1fr) minmax(0,42%)}
.kl-beeld{order:2;position:relative;min-height:200px}
.kl-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kl-beeld::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--marine),transparent 42%)}
.kl-tekst{order:1;display:flex;flex-direction:column;align-items:flex-start;gap:11px;
  padding:clamp(24px,3.4vw,40px)}
.kl-band{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.kl-nieuw{
  padding:4px 11px;border-radius:999px;
  font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);color:#fff}
.kennisleider strong{font-size:clamp(1.3rem,2.5vw,2rem);font-weight:800;
  letter-spacing:-.03em;line-height:1.14;color:#fff}
.kl-sam{font-size:.95rem;line-height:1.6;color:#c2d3ec;max-width:56ch}
.kl-meta{display:flex;align-items:center;gap:9px;font-size:.8rem;color:#8ea6c6;margin-top:2px}

/* --------------------------------------------------------- de losse regels */
/* Eerst waren dit kale regels met een streep erboven, in de gedachte dat een
   kennisbank er niet als de catalogus uit moet zien. Op het scherm werkte dat
   niet: tussen de gelakte productkaarten zag het eruit alsof het blok nog
   niet af was. Nu is het wel een kaart, maar zonder fotovlak en met een
   streep die pas bij aanwijzen doorloopt. Dat onderscheidt hem genoeg. */
.kennisraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
  gap:18px;align-items:stretch}
.kennisitem{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  padding:22px 22px 18px;border-radius:var(--r);height:100%;
  background:var(--vlak);border:1px solid var(--lijn);box-shadow:var(--diepte-1);
  transition:border-color .22s,box-shadow .28s var(--ease),transform .24s var(--veer)}
.kennisitem:hover{border-color:#c2d2ea;box-shadow:var(--diepte-2);transform:translateY(-3px)}
/* Geen overflow:hidden op de kaart: de pijl erin verschuift, en die zou dan
   op de rand afgesneden worden. De streep krijgt dus zelf zijn ronding. */
.kennisitem::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  border-radius:var(--r) var(--r) 0 0;
  background:linear-gradient(90deg,var(--marine),var(--accent));
  transform:scaleX(0);transform-origin:left;
  transition:transform .32s var(--ease)}
.kennisitem:hover::before{transform:scaleX(1)}

.ki-band{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ki-band time{font-size:.75rem;font-weight:600;color:var(--zwak)}
.kennisitem strong{font-size:1.06rem;font-weight:700;letter-spacing:-.02em;
  line-height:1.34;color:var(--tekst);transition:color .2s}
.kennisitem:hover strong{color:var(--marine)}
.ki-sam{font-size:.88rem;line-height:1.6;color:var(--tekst-2)}
.ki-voet{
  display:flex;align-items:center;gap:9px;width:100%;
  margin-top:auto;padding-top:14px;border-top:1px solid var(--lijn);
  font-size:.79rem;font-weight:700;color:var(--zwak)}
.ki-pijl{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  margin-left:auto;background:var(--vlak-2);color:var(--marine);
  transition:background .22s,color .22s,transform .28s var(--veer)}
.kennisitem:hover .ki-pijl{background:var(--accent);color:#fff;transform:translateX(3px)}
.kennis-intro{max-width:62ch;color:var(--tekst-2);font-size:.92rem;line-height:1.65;
  margin:-6px 0 18px}

/* =========================================================== het artikel */
/* Het artikel als geheel. De kop loopt over de volle breedte, de tekst
   niet; daarom staat de begrenzing op .art-tekst en niet hier. */
.art{display:block;margin-bottom:46px}
.art-kop{
  background:linear-gradient(170deg,var(--blauw-zacht),var(--pagina));
  border-bottom:1px solid var(--lijn);padding:clamp(22px,3vw,38px) 0 clamp(24px,3vw,36px);
  margin-bottom:clamp(24px,3vw,40px)}
.art-kop .wrap{display:flex;flex-direction:column;align-items:flex-start;gap:13px}
.art-kop h1{font-size:clamp(1.6rem,3.6vw,2.6rem);letter-spacing:-.035em;line-height:1.1;
  max-width:22ch;margin:0}
.art-lead{font-size:clamp(1rem,1.5vw,1.14rem);line-height:1.6;color:var(--tekst-2);
  max-width:62ch;margin:0}
.art-meta{display:flex;align-items:center;gap:10px;font-size:.83rem;color:var(--zwak);margin:0}
.art-punt{width:4px;height:4px;border-radius:50%;background:currentColor;
  display:inline-block;opacity:.55;flex:none}

/* Eén kolom van 68 tekens. Een artikel over regelgeving lees je niet als
   het over de volle 1340 pixels loopt. */
.art-body{max-width:none}
.art-tekst,.art-bronnen,.art-oproep,.art-beeld{max-width:68ch;margin-inline:auto}
.art-beeld{display:block;width:100%;border-radius:14px;margin-bottom:26px}

.art-tekst{font-size:1.02rem;line-height:1.75;color:#233448}
.art-tekst p{margin:0 0 18px}
.art-tekst h2{font-size:1.32rem;letter-spacing:-.02em;line-height:1.3;
  margin:34px 0 12px;padding-top:14px;border-top:1px solid var(--lijn)}
.art-tekst h2:first-child{margin-top:0;padding-top:0;border-top:0}
.art-tekst a{color:var(--blauw);font-weight:600;text-decoration:underline;
  text-underline-offset:2px}
.art-tekst a:hover{color:var(--accent)}
.art-tekst strong{font-weight:700;color:var(--tekst)}

.art-lijst{margin:0 0 18px;padding-left:0;list-style:none;display:grid;gap:10px}
.art-lijst li{position:relative;padding-left:26px}
.art-lijst li::before{content:"";position:absolute;left:6px;top:.62em;
  width:7px;height:7px;border-radius:50%;background:var(--accent)}
.art-genummerd{counter-reset:artn}
.art-genummerd li::before{
  counter-increment:artn;content:counter(artn);
  left:0;top:.06em;width:20px;height:20px;border-radius:7px;
  background:var(--blauw-lt);color:var(--marine);
  font-size:.74rem;font-weight:800;display:grid;place-items:center}

/* Het kader is de enige plek in een artikel met een vlak eromheen. Zo blijft
   het echt opvallen; drie soorten kaders naast elkaar valt weg. */
.art-kader{
  position:relative;margin:24px 0;padding:18px 20px 18px 24px;
  border-radius:0 12px 12px 0;border-left:3px solid var(--accent);
  background:var(--blauw-zacht);
  font-size:.97rem;line-height:1.65;color:var(--tekst)}

/* ------------------------------------------------------------- bronnen */
.art-bronnen{margin-top:38px;padding:22px 24px;border-radius:14px;
  background:var(--vlak-2);border:1px solid var(--lijn)}
.art-bronnen h2{font-size:.98rem;margin:0 0 6px}
.art-bronnen ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.art-bronnen li{position:relative;padding-left:24px;font-size:.87rem;line-height:1.5}
.art-bronnen li::before{
  content:"";position:absolute;left:0;top:.34em;width:14px;height:14px;
  background:currentColor;color:var(--zwak);opacity:.7;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1'/%3E%3Cpath d='M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1'/%3E%3Cpath d='M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1'/%3E%3C/svg%3E") center/contain no-repeat}
.art-bronnen a{color:var(--blauw);font-weight:600}
.art-bronnen a:hover{color:var(--accent);text-decoration:underline}

/* --------------------------------------------------------- de oproep eronder */
.art-oproep{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin:30px auto 10px;padding:22px 24px;border-radius:14px;
  background:linear-gradient(135deg,var(--marine-2),var(--marine-dp));color:#fff;
  box-shadow:var(--diepte-2)}
.art-oproep > div{display:flex;flex-direction:column;gap:4px;flex:1 1 260px}
.art-oproep b{font-size:1.06rem;font-weight:800;letter-spacing:-.02em}
.art-oproep span{font-size:.88rem;line-height:1.55;color:#c2d3ec;max-width:48ch}
.art-oproep .btn-blauw{background:#fff;color:var(--marine-dp)}
.art-oproep .btn-blauw:hover{background:#eaf1ff;color:var(--marine-dp);transform:translateY(-2px)}

@media (max-width:760px){
  .kennisleider.met-beeld{grid-template-columns:1fr}
  .kl-beeld{order:0;min-height:170px}
  .kl-beeld::after{background:linear-gradient(180deg,transparent 30%,var(--marine))}
  .art-tekst{font-size:.98rem}
}
@media (prefers-reduced-motion:reduce){
  .kennisleider,.kennisitem,.ki-pijl,.kenniskiezer a,
  .kennisitem::before{transition:none}
  .kennisitem::before{transform:none}
}

/* ======================================================================
   Banner in de pagina, promo en de promokaart
   ====================================================================== */

/* ------------------------------------------------- de bannerslideshow */
/* Dezelfde dia-machinerie als de banner bovenaan, maar dan als kaart in de
   kolom. Alleen de omlijsting verschilt, want alles wat met de dia's zelf
   te maken heeft staat al hierboven bij .diavak. */
.bandvak{margin:34px 0 8px}
.diavak-kaart{
  border-radius:18px;overflow:hidden;background:var(--marine);
  box-shadow:var(--diepte-2);
  transition:box-shadow .3s var(--ease)}
.diavak-kaart:hover{box-shadow:var(--diepte-3)}
/* Lager dan de banner bovenaan: dit blok staat middenin een pagina en mag
   het schap eronder niet uit beeld duwen. */
.diavak-kaart .dia{aspect-ratio:1600/440;min-height:200px}
.diavak-kaart .dia-tekst{max-width:min(520px,64%)}
.diavak-kaart .dia-tekst strong{font-size:clamp(1.25rem,2.4vw,2rem)}
.diavak-kaart .dia-tekst em{font-size:clamp(.86rem,1.2vw,1rem)}
.diavak-kaart .dia-knop{padding:9px 18px;font-size:.85rem}
.diavak-kaart .dia-pijl{width:38px;height:38px}
.diavak-kaart .dia-bolletjes{bottom:12px}
@media (max-width:760px){
  .diavak-kaart .dia{aspect-ratio:3/2;min-height:240px}
  .diavak-kaart .dia-tekst{max-width:none}
}

/* ------------------------------------------------------ de promovlag */
/* Rood, en als enige met een vaste plek bovenaan de stapel vlaggen. Het is
   de enige vlag die over geld gaat, dus die moet je het eerst lezen. */
.vlag .promo{
  background:linear-gradient(160deg,var(--accent),var(--accent-dk));color:#fff;
  box-shadow:0 3px 10px rgba(224,26,43,.34);
  position:relative;overflow:hidden}
.vlag .promo::after{
  content:"";position:absolute;top:-60%;bottom:-60%;left:-50%;width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.8),transparent);
  transform:skewX(-18deg);animation:glans 3.4s var(--ease) .8s infinite}
/* De uitgelichtvlag was ook rood. Twee rode labels naast elkaar op een kaart
   maken allebei betekenisloos, dus Populair wordt weer oranje. */
.vlag .top{background:linear-gradient(160deg,#f0920f,#c76d04);color:#fff}

/* De actietekst onder de kaart. Geen bedrag: dat staat in het voorstel. */
.kaart-promo{
  display:flex;align-items:center;gap:7px;
  padding:7px 11px;border-radius:var(--r-sm);
  background:var(--rood-lt);color:var(--accent-dk);
  font-size:.79rem;font-weight:700;line-height:1.35}
.kaart-promo::before{
  content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--accent)}

/* --------------------------------------------------------- het blok */
.promoblok .blok-kop h2{display:flex;align-items:center;gap:10px}
.promo-vlam{
  display:grid;place-items:center;width:32px;height:32px;flex:none;
  border-radius:10px;color:#fff;
  background:linear-gradient(160deg,var(--accent),var(--accent-dk));
  box-shadow:0 5px 14px rgba(224,26,43,.32)}
.promo-vlam svg{width:19px;height:19px}
.promo-intro{max-width:62ch;color:var(--tekst-2);font-size:.92rem;line-height:1.65;
  margin:-6px 0 18px}

@media (prefers-reduced-motion:reduce){
  .vlag .promo::after{display:none}
  .diavak-kaart{transition:none}
}

/* ======================================================================
   Merktegels, derde opzet: gelijke kaarten en een logo per merk op maat

   Er zaten twee problemen in, en ze versterkten elkaar.

   1. De hoogte van .merk-vlak stond op min-height. Een hoog logo maakte
      het vak hoger en dus de hele kaart hoger, waardoor de rij ongelijk
      werd. Nu heeft het vak een vaste hoogte, dus elke kaart is even hoog,
      ongeacht wat erin staat.

   2. Het logo werd begrensd met max-height in procenten, en procenten van
      een hoogte die zelf nog niet vaststond. De browser laat zo'n regel
      dan vallen, waardoor sommige logo's op hun volle grootte stonden en
      andere niet. Met een vaste vakhoogte hebben die procenten weer iets
      om zich toe te verhouden.

   Wat daarna nog overblijft is geen fout maar een eigenschap van de
   bestanden: het ene logo is strak bijgesneden, het andere heeft een rand
   wit ingebakken. Dat kun je niet automatisch goed raden zonder logo's met
   een bedoelde rand kapot te snijden. Vandaar --logo, een percentage dat
   het beheer per merk zet met een schuifje.
   ====================================================================== */

.merkraster{align-items:stretch}
.merktegel{height:100%;align-self:stretch}

.merk-vlak{
  height:104px;min-height:0;flex:none;
  padding:14px;overflow:hidden}
/* De ruimte die het logo binnen zijn vak mag innemen. 100% op het schuifje
   is dus 78 bij 62 procent van het vak, en dat is met opzet niet 100: een
   logo dat zijn vak volledig raakt, ziet er benauwd uit. */
.merk-vlak img{
  width:auto;height:auto;
  max-width:calc(78% * var(--logo, 1));
  max-height:calc(62% * var(--logo, 1));
  object-fit:contain}
.merk-woord{
  font-size:calc(1rem * var(--logo, 1));
  max-width:100%;overflow:hidden;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;line-clamp:2}

/* De naamregel zakt naar de onderkant, zodat hij bij elke kaart op dezelfde
   hoogte staat ook als er ooit iets tussen komt. */
.merk-onder{margin-top:auto}

/* Op de merkpagina zelf hetzelfde schuifje, zodat het logo daar niet ineens
   een andere maat heeft dan op de tegel. */
.merkkop-vlak{height:86px;min-height:0}
.merkkop img{
  max-height:calc(66% * var(--logo, 1));
  max-width:calc(160px * var(--logo, 1))}

@media (max-width:760px){
  .merk-vlak{height:88px;padding:11px}
}

/* ======================================================================
   Partnerband, derde opzet: de logo's groter en op maat

   Ze stonden veel te klein. Twee oorzaken die elkaar versterkten:

   1. De hoogte stond op clamp(38px,4.4vw,54px). Die 54 pixels gelden voor
      het hele bestand, en de meeste van deze logo's hebben een flinke rand
      lucht ingebakken. Wat je overhoudt is dan een beeldmerk van een pixel
      of dertig in een band van ruim honderd.
   2. De ruimte tussen de logo's stond op clamp(22px,3vw,46px) aan elke
      kant, dus tot 92 pixels tussen twee logo's. Klein beeld met veel lucht
      eromheen leest als een lege band.

   Nu een fors grotere basishoogte, minder ruimte ertussen, en net als bij
   de merken een percentage per partner in `partners.logo_schaal`. Dat laatste
   is nodig omdat de ingebakken rand per bestand verschilt en je die niet
   automatisch kunt wegsnijden zonder logo's met een bedoelde rand te slopen.
   ====================================================================== */

.band-spoor{padding:20px 4px}

.band-merk{padding:0 clamp(14px,1.8vw,30px)}
.band-merk img{
  height:calc(clamp(58px, 5.2vw, 82px) * var(--logo, 1));
  width:auto;max-width:none;object-fit:contain}

/* Het venster krijgt een vaste hoogte zodat een uitschieter met een hoge
   schaal de band niet oprekt. Zonder deze regel zou een logo op 200 procent
   de hele rij hoger maken. */
.band-venster{overflow:hidden}
.band-spoor{min-height:104px}
.band-merk{max-height:100%}

@media (max-width:900px){
  .band-merk{padding:0 16px}
  .band-merk img{height:calc(clamp(50px, 9vw, 66px) * var(--logo, 1))}
  .band-spoor{min-height:92px;padding:16px 4px}
}
@media (max-width:560px){
  .band-merk{padding:0 13px}
  .band-merk img{height:calc(54px * var(--logo, 1))}
  .band-spoor{min-height:86px;padding:15px 4px}
}

/* ======================================================================
   Dia's: video en volledig zichtbaar beeld

   De dia was tot nu toe altijd een liggende foto die het vlak vulde. Dat
   werkt voor een banner die je daarvoor laat maken, maar niet voor het
   beeld dat leveranciers aanleveren: dat is vierkant, met het product
   middenin en veel rust eromheen. Snijd je daar een strook van 1600 bij
   440 uit, dan valt de helft van het product weg en ligt de tekst er ook
   nog eens overheen.

   Vandaar twee weergaven. Bij 'vullend' verandert er niets. Bij 'naast'
   krijgt het beeld een eigen kolom waarin het in zijn geheel past, en
   staat de tekst in de kolom ernaast op een eigen vlak.
   ====================================================================== */

/* Het beeld zat eerst rechtstreeks in .dia. Nu zit er een omhullend vak
   omheen, zodat een video en een foto precies hetzelfde behandeld worden. */
.dia-media{position:absolute;inset:0;display:block;overflow:hidden}
.dia-media img,.dia-media video{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block}

/* ------------------------------------------------------- beeld ernaast */
.dia-naast{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,46%);
  background:linear-gradient(135deg,var(--marine-2),var(--marine) 45%,var(--marine-dp))}
.dia-naast .dia-media{
  position:relative;inset:auto;grid-column:2;
  background:var(--wit);
  /* Een zachte overgang naar het donkere tekstvlak, zodat het geen twee
     aan elkaar geplakte vlakken wordt. */
  clip-path:polygon(6% 0, 100% 0, 100% 100%, 0 100%)}
.dia-naast .dia-media img,
.dia-naast .dia-media video{object-fit:contain;padding:clamp(10px,1.6vw,22px)}
/* Geen trage inzoom op een beeld dat juist volledig zichtbaar moet blijven:
   die zou het product er alsnog uit laten lopen. */
.dia-naast.aan img{animation:none}

.dia-naast .dia-tekst{
  position:relative;top:auto;left:auto;right:auto;transform:none;
  grid-column:1;grid-row:1;align-self:center;
  padding:clamp(20px,3vw,44px);max-width:none;text-shadow:none}
.dia-naast .dia-tekst strong{color:#fff}
.dia-naast .dia-tekst em{color:#c2d3ec}
/* De uitlijning links, midden en rechts slaat in deze weergave op de tekst
   binnen zijn eigen kolom en niet meer op het hele vlak. */
.dia-naast.dia-rechts .dia-tekst{align-items:flex-start;text-align:left}
.dia-naast.dia-midden .dia-tekst{align-items:flex-start;text-align:left;transform:none}
/* Een lichte dia in deze weergave: dan wordt het tekstvlak wit. */
.dia-naast.dia-donker{background:linear-gradient(135deg,#f2f6fc,var(--vlak-2))}
.dia-naast.dia-donker .dia-tekst strong{color:var(--marine)}
.dia-naast.dia-donker .dia-tekst em{color:var(--tekst-2)}

@media (max-width:760px){
  /* Onder elkaar, want naast elkaar wordt allebei te smal. Beeld eerst:
     dat is waar het om gaat. */
  .dia-naast{grid-template-columns:1fr;grid-template-rows:auto auto}
  .dia-naast .dia-media{grid-column:1;grid-row:1;clip-path:none;min-height:210px}
  .dia-naast .dia-tekst{grid-column:1;grid-row:2;padding:18px 20px 22px}
  .dia-naast{aspect-ratio:auto}
  .diavak-kaart .dia-naast,.diavak .dia-naast{aspect-ratio:auto;min-height:0}
}

/* Een video die vanzelf speelt is beweging. Wie dat uitgezet heeft, krijgt
   hem stilgezet door main.js op zijn posterbeeld; in css kunnen we hem niet
   pauzeren en verbergen zou een leeg vlak opleveren. */

/* ======================================================================
   Partnerband: weer lucht tussen de logo's

   Ze zijn een stuk groter geworden en toen bleek de ruimte ertussen te
   krap: bij een breed logo als Barilla raakte de rand van de buur bijna.
   De afstand hangt nu af van de schermbreedte en niet meer van een vaste
   marge, en er staat een minimum onder zodat twee brede logo's elkaar
   nooit meer raken.
   ====================================================================== */
.band-spoor{gap:clamp(18px,2.6vw,44px)}
.band-merk{padding:0 clamp(10px,1.2vw,20px)}
@media (max-width:900px){
  .band-spoor{gap:22px}
  .band-merk{padding:0 8px}
}
@media (max-width:560px){
  .band-spoor{gap:18px}
  .band-merk{padding:0 6px}
}

/* Betaalverloop in het klantenportaal. */
.betaallijst{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.betaallijst li{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 13px;border:1px solid var(--lijn);border-radius:var(--r-sm);
  background:var(--vlak-2)}
.betaal-info{flex:1 1 auto;min-width:0;font-size:.86rem;color:var(--tekst-2)}
.betaallijst b{font-variant-numeric:tabular-nums}

/* ======================================================================
   Afrekenen: leveren of afhalen, betaalmethoden, vertrouwen
   ====================================================================== */
.leverkeuze{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:10px;margin-bottom:18px}
.leverwijze{
  display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:center;
  padding:14px;border:1px solid var(--lijn);border-radius:var(--r);
  background:var(--wit);cursor:pointer;position:relative;
  transition:border-color .2s,box-shadow .2s var(--ease),background .2s}
.leverwijze:hover{border-color:var(--lijn-2)}
.leverwijze.aan{border-color:var(--marine);background:var(--blauw-zacht);
  box-shadow:0 0 0 3px rgba(23,51,122,.10)}
.leverwijze input{position:absolute;opacity:0;pointer-events:none}
.lw-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
  background:var(--blauw-lt);color:var(--marine);border:1px solid #cfdcf1}
.lw-ic svg{width:21px;height:21px}
.leverwijze.aan .lw-ic{background:var(--marine);color:#fff;border-color:transparent}
.lw-tekst{display:flex;flex-direction:column;gap:2px;min-width:0}
.lw-tekst b{font-size:.95rem}
.lw-tekst small{font-size:.8rem;color:var(--tekst-2);line-height:1.4}
.leveradresblok[hidden]{display:none}

/* Betaalmethoden. Tekstplaatjes met de merkkleur erachter: geen officiele
   logo's, want die zijn merkrechtelijk beschermd en mogen niet zomaar
   nagebouwd worden. Vervang ze door de officiele assets van Mollie zodra
   je die in je account hebt staan. */
.bk-logos{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.bm{display:grid;place-items:center;min-width:38px;height:26px;padding:0 7px;
  border-radius:5px;font-style:normal;font-size:.62rem;font-weight:800;
  letter-spacing:.02em;color:#fff;border:1px solid rgba(0,0,0,.08)}
.bm-bancontact{background:#005498}
.bm-ideal{background:#cc0066}
.bm-creditcard{background:#1a1f71}
.bm-paypal{background:#003087}
.bm-applepay{background:#000}
.bm-googlepay{background:#3c4043}
.bm-klarna{background:#ffb3c7;color:#0b051d}
.bm-banktransfer{background:#4a5c74}

.betaalkeuze{display:flex;align-items:center;gap:13px;flex-wrap:wrap;
  padding:14px;border:1px solid var(--lijn);border-radius:var(--r);
  background:var(--wit);cursor:pointer;margin-bottom:10px;
  transition:border-color .2s,background .2s,box-shadow .2s var(--ease)}
.betaalkeuze.aan{border-color:var(--marine);background:var(--blauw-zacht);
  box-shadow:0 0 0 3px rgba(23,51,122,.10)}
.bk-tekst{display:flex;flex-direction:column;gap:2px;flex:1 1 200px;min-width:0}
.bk-tekst small{font-size:.8rem;color:var(--tekst-2)}

/* Geruststelling naast de bestelknop. */
.afreken-trust{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.afreken-trust li{display:flex;align-items:flex-start;gap:9px;
  font-size:.82rem;color:var(--tekst-2);line-height:1.45}
.afreken-trust svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--groen)}

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

/* ======================================================================
   Partnerband, vierde opzet: elk logo zijn eigen vak

   De band bleef krap ogen omdat de afstand tussen twee logo's alleen uit
   marge kwam. Een breed woordmerk als Barilla is bij dezelfde hoogte drie
   keer zo breed als een rond logo, dus de een zwom en de ander plakte
   tegen zijn buur. Nu krijgt elk merk een vak met een minimumbreedte en
   staat er een maximum op de breedte van het beeld zelf. Zo is de afstand
   tussen twee logo's altijd de afstand tussen twee vakken, en niet meer
   het toeval van de vorm van het bestand.

   Let op: dit blok staat bewust achteraan, want het overschrijft de
   opzetten hierboven. Pas je de hoogte aan, pas hem dan hier aan.
   ====================================================================== */
.band-spoor{gap:clamp(24px,3vw,52px);min-height:112px}
.band-merk{
  min-width:clamp(148px,13vw,208px);
  padding:0 clamp(14px,1.6vw,26px)}
.band-merk img{
  height:calc(clamp(56px,5vw,78px) * var(--logo, 1));
  max-width:clamp(124px,11vw,178px);
  width:auto;object-fit:contain}

@media (max-width:900px){
  .band-spoor{gap:26px;min-height:98px}
  .band-merk{min-width:136px;padding:0 12px}
  .band-merk img{height:calc(clamp(48px,8vw,62px) * var(--logo, 1));max-width:118px}
}
@media (max-width:560px){
  .band-spoor{gap:20px;min-height:88px}
  .band-merk{min-width:116px;padding:0 8px}
  .band-merk img{height:calc(50px * var(--logo, 1));max-width:100px}
}

/* ======================================================================
   De merkenlade onder de categorietegels

   Je kiest een rubriek en krijgt daar de merken bij die wij er echt in
   voeren, plus een knop naar de volledige rubriek. Dat scheelt een
   pagina laden voor wie weet welk merk hij wil, en het maakt van de
   startpagina een keuzeschap in plaats van een lange lijst.

   De lade is een eigen vlak en geen kaart zoals de tegels erboven, zodat
   je meteen ziet dat het bij elkaar hoort maar een niveau dieper ligt.
   ====================================================================== */
.cat-pijl{
  display:grid;place-items:center;width:22px;height:22px;margin-top:6px;
  border-radius:50%;color:var(--zwak);
  transition:transform .35s var(--veer),color .25s,background .25s}
.cat-pijl svg{width:14px;height:14px}
.cattegel:hover .cat-pijl{color:var(--marine);background:var(--blauw-lt)}
.cattegel.aan .cat-pijl{transform:rotate(180deg);color:#fff;background:var(--marine)}
.cattegel.aan{border-color:var(--marine);box-shadow:0 0 0 3px rgba(18,39,90,.10)}
.cattegel.aan::before{transform:scaleX(1)}

.catlade{
  margin-top:12px;padding:18px;border-radius:var(--r);
  background:linear-gradient(180deg,var(--blauw-zacht),var(--wit) 58%);
  border:1px solid #cfdcf1;box-shadow:var(--schaduw)}
/* Openschuiven in plaats van verschijnen. hidden wordt door JS weggehaald,
   daarna pakt deze animatie het over; zonder JS is er niets te animeren. */
.catlade.open{animation:ladeIn .34s var(--ease) both}
@keyframes ladeIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

.lade-kop{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid #d9e3f3;margin-bottom:14px}
.lade-ic{display:grid;place-items:center;width:44px;height:44px;flex:none;
  border-radius:13px;background:var(--wit);border:1px solid #cfdcf1;
  color:var(--marine);box-shadow:var(--schaduw)}
.lade-ic svg{width:24px;height:24px}
.lade-titelvak{display:flex;flex-direction:column;gap:1px;flex:1 1 180px;min-width:0}
.lade-titelvak b{font-size:1.06rem;letter-spacing:-.015em}
.lade-dicht{display:grid;place-items:center;width:34px;height:34px;flex:none;
  border:1px solid var(--lijn);border-radius:50%;background:var(--wit);
  color:var(--zwak);cursor:pointer;transition:color .2s,border-color .2s,transform .2s}
.lade-dicht svg{width:15px;height:15px}
.lade-dicht:hover{color:var(--accent);border-color:var(--accent);transform:rotate(90deg)}

.lade-groep + .lade-groep{margin-top:16px}
.lade-titel{display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--zwak);margin-bottom:9px}

.lade-chips{display:flex;flex-wrap:wrap;gap:8px}
.ladechip{display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;border-radius:999px;background:var(--wit);
  border:1px solid var(--lijn);font-size:.86rem;font-weight:600;
  transition:border-color .2s,background .2s,transform .2s var(--veer)}
.ladechip i{font-style:normal;font-size:.74rem;color:var(--zwak);
  font-variant-numeric:tabular-nums}
.ladechip:hover{border-color:var(--marine);background:var(--blauw-lt);
  transform:translateY(-2px)}
.ladechip:hover i{color:var(--marine)}

/* Vaste vakhoogte, net als bij de merktegels: anders rekt een hoog logo
   zijn rij op en staat de hele rand ongelijk. Zie hoofdstuk 9 punt 13. */
.lade-merken{display:grid;gap:9px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,132px),1fr))}
.lademerk{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:12px 10px 10px;background:var(--wit);
  border:1px solid var(--lijn);border-radius:var(--r-sm);
  position:relative;overflow:hidden;
  transition:border-color .2s,box-shadow .25s var(--ease),transform .25s var(--veer)}
.lademerk::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--merk,var(--marine));transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease)}
.lademerk:hover{border-color:var(--merk,var(--marine));transform:translateY(-3px);
  box-shadow:var(--schaduw-op)}
.lademerk:hover::before{transform:scaleX(1)}

.lm-vlak{display:grid;place-items:center;width:100%;height:44px;flex:none}
.lm-vlak img{max-width:calc(84% * var(--logo, 1));max-height:calc(88% * var(--logo, 1));
  width:auto;height:auto;object-fit:contain}
.lm-woord{font-size:.82rem;font-weight:800;color:var(--merk,var(--marine));
  text-align:center;line-height:1.15;overflow-wrap:anywhere}
.lm-naam{font-size:.78rem;font-weight:600;text-align:center;line-height:1.2;
  overflow-wrap:anywhere}
.lm-n{font-size:.7rem;color:var(--zwak);font-variant-numeric:tabular-nums}

.lade-leeg{margin:0;font-size:.86rem;color:var(--tekst-2)}

@media (max-width:560px){
  .catlade{padding:14px}
  .lade-kop{gap:10px}
  .lade-ic{width:38px;height:38px}
  .lade-merken{grid-template-columns:repeat(auto-fill,minmax(min(100%,104px),1fr));gap:8px}
  .lm-vlak{height:38px}
}
@media (prefers-reduced-motion:reduce){
  .catlade.open{animation:none}
  .cat-pijl,.ladechip,.lademerk,.lade-dicht{transition:none}
}

/* ======================================================================
   Bevestigingspagina en betaalmerken op de startpagina
   ====================================================================== */
.klaar-stand{margin:10px 0 0}

/* Een tabel met een totaalregel. Alleen op de bevestigingspagina en het
   klantportaal, dus bewust niet in de basisregels van .tabel gezet. */
.tabel tfoot th{
  text-transform:none;letter-spacing:0;font-size:.84rem;color:var(--tekst-2);
  padding:9px 16px;border-top:1px solid var(--lijn);background:transparent}
.tabel tfoot td{padding:9px 16px;border-top:1px solid var(--lijn);border-bottom:0;
  font-variant-numeric:tabular-nums}
.tabel tfoot tr.tot th,.tabel tfoot tr.tot td{
  font-size:1rem;color:var(--tekst);border-top:2px solid var(--lijn-2);
  padding-top:12px;padding-bottom:14px}
.tabel tfoot tr:hover{background:transparent}

.afh-merken{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}

/* ======================================================================
   Betaalmerken met de echte logo's

   Hiervoor stonden hier gekleurde blokjes met initialen in. Dat mocht
   niet blijven: een betaalmerk namaken is merkrechtelijk niet toegestaan
   en het oogt bovendien als een placeholder. Nu staan de officiele
   bestanden erin.

   In de markup zit onder elk plaatje de naam als tekst. Laadt het logo
   niet (ander domein, adblocker, cdn plat), dan haalt onerror het
   plaatje weg en blijft die naam over. Zo staat er nooit een leeg vak of
   een gebroken icoontje. Zie dc_betaalmerk() in orders.php.
   ====================================================================== */
.bm{
  display:inline-grid;place-items:center;height:28px;min-width:44px;padding:3px 7px;
  border:1px solid var(--lijn);border-radius:6px;background:var(--wit);
  transition:border-color .2s,transform .2s var(--veer)}
.bm:hover{border-color:var(--lijn-2);transform:translateY(-1px)}
.bm img{max-height:20px;max-width:44px;width:auto;height:auto;object-fit:contain}
/* De naam staat verborgen en komt alleen tevoorschijn wanneer het plaatje
   het niet haalt. Die klasse zet de onerror in dc_betaalmerk(). Bewust geen
   :has(): dit moet ook in een oudere browser kloppen. */
.bm i{display:none;font-style:normal;font-size:.62rem;font-weight:800;
  color:var(--tekst-2);letter-spacing:.02em;white-space:nowrap}
.bm.geen-logo i{display:inline}
.bm-cash{background:var(--groen-lt);border-color:#bfe6d2}
.bm-cash i{display:inline;color:#0b6b3d}

.bm-rij,.bk-logos,.bo-merken,.mt-merken,.koop-merken,.afh-merken{
  display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.bo-merken,.mt-merken,.koop-merken{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--lijn);
  justify-content:center}

/* ======================================================================
   Draaiende beeldband

   Dezelfde motor als de partnerband: main.js dupliceert het spoor en de
   CSS schuift precies -50%, zodat de sprong terug niet te zien is. Het
   verschil is de inhoud: hier staan hele beeldkaarten in plaats van
   losse logo's, dus ze hebben een vaste maat en een eigen glans nodig.
   ====================================================================== */
.beeldband{margin:34px 0 8px}
.beeldband-kop{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;margin-bottom:14px;flex-wrap:wrap}
.beeldband-kop h2{font-size:1.32rem;letter-spacing:-.02em}

.beeldband-venster{
  position:relative;overflow:hidden;border-radius:var(--r);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.beeldband-spoor{
  display:flex;gap:clamp(12px,1.6vw,20px);width:max-content;padding:4px 0;
  animation:bandloop 40s linear infinite}
.beeldband-venster:hover .beeldband-spoor,
.beeldband-venster:focus-within .beeldband-spoor{animation-play-state:paused}

.bbkaart{
  position:relative;flex:none;display:block;overflow:hidden;isolation:isolate;
  width:clamp(178px,17vw,238px);aspect-ratio:9/16;
  border-radius:var(--r);background:var(--wit);
  border:1px solid var(--lijn);box-shadow:var(--schaduw);
  transition:transform .35s var(--veer),box-shadow .3s var(--ease),border-color .2s}
.bbkaart img,.bbkaart video{width:100%;height:100%;object-fit:cover;display:block}
a.bbkaart:hover{transform:translateY(-6px);box-shadow:var(--schaduw-op);
  border-color:var(--lijn-2)}

/* De glans loopt bij zweven schuin over de kaart. Een pseudo-element zou
   ook kunnen, maar dit is een eigen laag zodat hij boven een video ligt. */
.bbkaart-glans{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);
  transform:translateX(-130%);transition:transform .8s var(--ease)}
a.bbkaart:hover .bbkaart-glans{transform:translateX(130%)}
/* Een vaste, heel lichte glans zodat de kaart ook stil niet plat oogt. */
.bbkaart::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.20),transparent 34%,
             rgba(10,24,56,.10));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}

@media (max-width:560px){
  .beeldband-spoor{gap:10px}
  .bbkaart{width:150px}
}
/* Zonder beweging dupliceert main.js het spoor niet. Dan is dit gewoon een
   rij die je opzij kunt vegen; nooit een halve rij die stilstaat. */
@media (prefers-reduced-motion:reduce){
  .beeldband-spoor{animation:none;width:auto;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
  .bbkaart{scroll-snap-align:start}
  .bbkaart,.bbkaart-glans{transition:none}
  .beeldband-venster{-webkit-mask-image:none;mask-image:none;overflow:visible}
}

/* ======================================================================
   Afrekenen, tweede opzet
   ====================================================================== */

/* Hier stond de landkeuze met een getekend vlaggetje ernaast. Dat is eruit:
   bij vier landen die je toch leest voegde het niets toe, en de klasse
   .vlag botste met het vlaggenblok op de productkaart (.vlag met de labels
   Promo, Nieuw en Populair). Die kreeg door deze regel display:block met
   een vaste 24 bij 12, waardoor de labels afgeknepen op de foto stonden.
   Zie valkuil 1: controleer altijd of een classnaam al bestaat. */

/* --- leverwijze met aanrader --------------------------------------- */
.leverwijze{position:relative}
.leverwijze.aanrader{border-color:#bfe6d2;background:linear-gradient(180deg,var(--groen-lt),var(--wit) 60%)}
.leverwijze.aanrader.aan{border-color:var(--groen);box-shadow:0 0 0 3px rgba(15,157,88,.14)}
.lw-lint{
  position:absolute;top:-9px;right:12px;z-index:2;
  padding:3px 10px;border-radius:999px;background:var(--groen);color:#fff;
  font-size:.66rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  box-shadow:0 3px 8px rgba(15,157,88,.32)}

/* --- betaalkeuze op slot ------------------------------------------- */
.betaalkeuze.op-slot{opacity:.62;cursor:not-allowed;background:var(--vlak-2)}
.betaalkeuze.op-slot input{cursor:not-allowed}
.bk-slot{display:inline-grid;place-items:center;width:15px;height:15px;
  margin-left:5px;vertical-align:-2px;color:var(--zwak)}
.bk-slot svg{width:13px;height:13px}
.bk-uitleg{
  display:flex;gap:10px;align-items:flex-start;margin:-4px 0 12px;
  padding:11px 13px;border-radius:var(--r-sm);
  background:var(--blauw-lt);border:1px solid #cfdcf1;
  font-size:.82rem;line-height:1.5;color:var(--tekst-2)}
.bk-uitleg b{display:block;color:var(--marine)}
.bk-uitleg a{color:var(--blauw);font-weight:600;text-decoration:underline}
.bk-uitleg-ic{display:grid;place-items:center;width:19px;height:19px;flex:none;
  color:var(--blauw);margin-top:1px}
.bk-uitleg-ic svg{width:17px;height:17px}

/* --- het overzicht rechts ------------------------------------------ */
.besteloverzicht h2{display:flex;align-items:center;gap:9px}
.bo-telling{display:grid;place-items:center;min-width:23px;height:23px;padding:0 6px;
  border-radius:999px;background:var(--marine);color:#fff;
  font-size:.72rem;font-weight:800;font-variant-numeric:tabular-nums}

/* Met foto per regel: een tray van 24 en een sixpack heten bijna
   hetzelfde en zonder beeld twijfelt de klant of hij goed zit. */
.bo-regels li{grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:11px}
.bo-foto{position:relative;display:block;width:46px;height:46px;flex:none;
  border-radius:9px;overflow:hidden;background:var(--vlak-2);
  border:1px solid var(--lijn)}
.bo-foto img{width:100%;height:100%;object-fit:contain;padding:3px}
.bo-foto .bo-n{
  position:absolute;right:-4px;top:-4px;display:grid;place-items:center;
  min-width:19px;height:19px;padding:0 4px;border-radius:999px;
  background:var(--marine);color:#fff;font-size:.66rem;font-weight:800;
  border:2px solid var(--wit)}
.bo-merk{display:block;font-style:normal;font-size:.7rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--zwak)}
.bo-noot{margin:12px 0 0;font-size:.78rem;line-height:1.5;color:var(--zwak)}

/* --- de mobiele samenvatting boven het formulier -------------------- */
/* Op mobiel staat het overzicht onder het formulier, zodat de knop
   Bestelling plaatsen niet boven de velden hangt die je eerst moet
   invullen. Deze balk houdt het bedrag toch in beeld. */
.afreken-mobielbalk{display:none}
.afreken-mobielbalk summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 15px;border-radius:var(--r);cursor:pointer;list-style:none;
  background:var(--wit);border:1px solid var(--lijn);box-shadow:var(--schaduw)}
.afreken-mobielbalk summary::-webkit-details-marker{display:none}
.amb-links{font-size:.86rem;color:var(--tekst-2)}
.amb-links b{color:var(--tekst)}
.amb-rechts{display:flex;align-items:center;gap:7px;font-size:1.05rem;
  font-variant-numeric:tabular-nums}
.amb-rechts svg{width:16px;height:16px;color:var(--zwak);transition:transform .25s}
.afreken-mobielbalk[open] .amb-rechts svg{transform:rotate(180deg)}
.amb-regels{list-style:none;margin:0;padding:12px 15px;
  background:var(--wit);border:1px solid var(--lijn);border-top:0;
  border-radius:0 0 var(--r) var(--r);display:grid;gap:8px}
.amb-regels li{display:flex;justify-content:space-between;gap:12px;
  font-size:.83rem;line-height:1.35}
.amb-regels b{font-variant-numeric:tabular-nums;white-space:nowrap}

@media (max-width:980px){
  /* Was order:-1, en daardoor stond de bestelknop op mobiel bovenaan de
     pagina, nog voor je je adres had ingevuld. Nu staat het overzicht
     waar het hoort: onder het formulier. */
  .afreken-zij{order:0}
  .afreken-mobielbalk{display:block;margin-bottom:16px}
}

/* ======================================================================
   Winkelwagen, knoppen onderaan het overzicht

   De knoppen stonden los onder elkaar met losse marges, waardoor er een
   gat viel tussen Afrekenen en de rest. Nu is het een blok met een eigen
   afstand.
   ====================================================================== */
.mt-knoppen{display:grid;gap:10px;margin-top:18px}
.mt-knoppen .btn{margin:0}
/* Afrekenen is de enige knop die vol gewicht mag hebben. De twee eronder
   zijn hulpknoppen; drie even zware blokken onder elkaar zag eruit als een
   muur en liet Aantallen bijwerken even belangrijk lijken als afrekenen. */
.mt-klein{display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap}
.mt-klein .btn{flex:0 1 auto}
.mt-legen{margin:0;color:var(--zwak);white-space:nowrap}
.mt-legen:hover{color:var(--accent)}

/* Zit in het formulier om Enter op te vangen, maar mag niet te zien zijn.
   Geen display:none: dan telt de browser hem niet meer als verzendknop. */
.verborgen-knop{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  border:0}
.mt-inloggen{margin:14px 0 0;text-align:center;font-size:.82rem;color:var(--zwak)}
.mt-inloggen a{color:var(--blauw);font-weight:600}
.mt-noot{margin:12px 0 0;font-size:.79rem;line-height:1.5;color:var(--zwak)}

/* ======================================================================
   Productpagina, koopblok tweede opzet

   Waar het om draait: bij het draaien aan het aantal zie je meteen de
   staffelprijs, wat je bespaart en hoeveel je er nog bij moet doen voor
   de volgende trede. Dat stond er eerst pas in de winkelwagen in, en dan
   is de beslissing al genomen.
   ====================================================================== */
.koop-optie.koop-beste{border-color:var(--groen);background:linear-gradient(180deg,var(--groen-lt),var(--wit) 62%)}
.koop-optie.koop-beste.aan{box-shadow:inset 0 0 0 1px var(--groen)}
.ko-lint{
  position:absolute;top:-1px;right:-1px;z-index:2;
  padding:3px 9px;border-radius:0 var(--r-sm) 0 var(--r-sm);
  background:var(--groen);color:#fff;
  font-size:.62rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.koop-optie{padding-top:16px}

.koop-prijsregel{
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--lijn)}
.kp-links{display:flex;flex-direction:column;gap:1px;min-width:0}
.kp-per{font-size:1.5rem;font-weight:800;letter-spacing:-.025em;
  color:var(--marine);font-variant-numeric:tabular-nums;line-height:1.1}
.kp-eenheid{font-size:.78rem;color:var(--zwak)}
.kp-rechts{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.kp-label{font-size:.72rem;color:var(--zwak);text-transform:uppercase;letter-spacing:.05em}
.kp-totaal{font-size:1.12rem;font-variant-numeric:tabular-nums}

.koop-winst{
  margin:12px 0 0;padding:10px 13px;border-radius:var(--r-sm);
  background:var(--groen-lt);border:1px solid #bfe6d2;color:#0b6b3d;
  font-size:.82rem;line-height:1.5}
.koop-winst[hidden]{display:none}

.koop-volgende{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;margin-top:9px;padding:10px 13px;border-radius:var(--r-sm);
  background:var(--blauw-lt);border:1px dashed #b9cdf0;color:var(--marine);
  font:inherit;font-size:.82rem;line-height:1.45;text-align:left;cursor:pointer;
  transition:background .2s,border-color .2s,transform .2s var(--veer)}
.koop-volgende:hover{background:#dfe9fb;border-color:var(--blauw);transform:translateY(-1px)}
/* Hier stond .koop-volgende span, gericht op elke span in de knop. Sinds
   de opmaak twee spans heeft (tekst en knoppil) kreeg ook de tekstspan die
   pil-opmaak mee, inclusief white-space:nowrap, en dat duwde de hele
   pagina breder dan het scherm. De opmaak zit nu op .kv-tekst en .kv-knop
   apart, verderop. Zet hier nooit meer een regel op de kale span. */
.koop-volgende[hidden]{display:none}

.koop-knoppen{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.koop-knoppen form{flex:1 1 auto;min-width:0}
.koop-knoppen .btn{width:100%}

/* --- de staffeltabel als naslag ------------------------------------ */
.staffelvak{margin-top:16px;padding:15px 16px;border-radius:var(--r);
  background:var(--vlak-2);border:1px solid var(--lijn)}
.staffel-kop{display:block;font-size:.86rem;margin-bottom:9px}
.staffelvak .staffel{margin:0;background:transparent}
.staffelvak .staffel tr{transition:background .2s}
.staffelvak .staffel tbody tr.aan{background:var(--blauw-lt)}
.staffelvak .staffel tbody tr.aan td{font-weight:700;color:var(--marine)}
.staffelvak .staffel tbody tr.aan td:first-child{
  box-shadow:inset 3px 0 0 var(--marine)}

/* --- marge voor de winkelier --------------------------------------- */
.margevak{display:flex;gap:12px;align-items:flex-start;margin-top:16px;
  padding:13px 15px;border-radius:var(--r);
  background:linear-gradient(140deg,var(--groen-lt),var(--wit) 70%);
  border:1px solid #bfe6d2;font-size:.84rem;line-height:1.5;color:var(--tekst-2)}
.margevak b{color:#0b6b3d}
.margevak b:first-child{display:block;color:var(--tekst)}
.mv-ic{display:grid;place-items:center;width:32px;height:32px;flex:none;
  border-radius:9px;background:var(--wit);border:1px solid #bfe6d2;color:var(--groen)}
.mv-ic svg{width:18px;height:18px}

/* --- de drie vragen voor het bestellen ------------------------------ */
.koop-zeker{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:11px}
.koop-zeker li{display:flex;gap:11px;align-items:flex-start;
  font-size:.84rem;line-height:1.5;color:var(--tekst-2)}
.koop-zeker b{color:var(--tekst)}
.kz-ic{display:grid;place-items:center;width:30px;height:30px;flex:none;
  border-radius:9px;background:var(--blauw-lt);color:var(--marine)}
.kz-ic svg{width:17px;height:17px}

.handelaarshint{display:flex;gap:11px;align-items:flex-start;margin-top:16px;
  padding:12px 14px;border-radius:var(--r);background:var(--blauw-zacht);
  border:1px solid #cfdcf1;font-size:.84rem;line-height:1.5;color:var(--tekst-2)}
.handelaarshint b{display:block;color:var(--marine)}
.handelaarshint a{color:var(--blauw);font-weight:600;text-decoration:underline}
.hh-ic{display:grid;place-items:center;width:30px;height:30px;flex:none;
  border-radius:9px;background:var(--wit);border:1px solid #cfdcf1;color:var(--marine)}
.hh-ic svg{width:17px;height:17px}

@media (max-width:560px){
  .koop-prijsregel{gap:8px}
  .kp-per{font-size:1.3rem}
  .koop-knoppen{flex-direction:column}
}

/* ======================================================================
   Merktegel in de categorielade: naam onder het logo houden

   De naam lag over het logo heen. Oorzaak: het logo werd geschaald met
   `max-width:calc(84% * var(--logo))`, en bij een merk met een schaal
   boven 100 procent werd dat meer dan 100% van het vak. Het beeld liep
   dan buiten zijn eigen hoogte en kwam over de tekst.

   Nu zit er een min() omheen zodat de schaal nooit boven het vak uit
   kan, en staat er overflow:hidden op als vangnet.
   ====================================================================== */
.lm-vlak{overflow:hidden}
.lm-vlak img{
  max-width:min(100%, calc(84% * var(--logo, 1)));
  max-height:min(100%, calc(88% * var(--logo, 1)))}

/* ======================================================================
   Categoriefoto's als menu-icoontje

   In plaats van een getekend blikje staat er nu het echte artikel, klein
   en rond. Je herkent een tray Coca-Cola meteen en een lijntekening niet.
   Heeft een rubriek nog geen foto, dan blijft het icoon staan; dat regelt
   dc_cat_menu_icoon() in PHP.
   ====================================================================== */
.mega-ic.met-foto,.mob-ic.met-foto{padding:0;overflow:hidden;background:var(--vlak-2)}
.mega-ic.met-foto img,.mob-ic.met-foto img{
  width:100%;height:100%;object-fit:cover;border-radius:inherit}
.mega-kolom:hover .mega-ic.met-foto{background:var(--vlak-2)}
.mob-in a:hover .mob-ic.met-foto{background:var(--vlak-2)}

/* ======================================================================
   Klantenportaal: prijslijst, krediet en mijn assortiment
   ====================================================================== */
.portaalvakken{display:grid;gap:12px;margin:16px 0 8px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.pv{display:flex;align-items:center;gap:13px;padding:15px 16px;
  background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);
  box-shadow:var(--schaduw)}
.pv-let{border-color:#f3c9a0;background:linear-gradient(180deg,var(--oranje-lt),var(--wit) 62%)}
.pv-ic{display:grid;place-items:center;width:38px;height:38px;flex:none;
  border-radius:11px;background:var(--blauw-lt);color:var(--marine)}
.pv-let .pv-ic{background:#fdeada;color:#9a5a06}
.pv-ic svg{width:20px;height:20px}
.pv-tekst{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.pv-tekst b{font-size:.92rem}
.pv-tekst span{font-size:.8rem;color:var(--tekst-2);line-height:1.45}
.pv .btn{flex:none}

/* Balkje dat laat zien hoeveel van de kredietlimiet op is. */
.pv-balk{display:block;height:6px;margin-top:6px;border-radius:99px;
  background:var(--vlak-2);overflow:hidden}
.pv-balk i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--marine),var(--blauw))}
.pv-let .pv-balk i{background:linear-gradient(90deg,var(--oranje),var(--accent))}

/* --- mijn assortiment ---------------------------------------------- */
.ma-foto{width:56px}
.ma-foto img{width:44px;height:44px;object-fit:contain;border-radius:8px;
  background:var(--vlak-2);border:1px solid var(--lijn);padding:3px}
.ma-aantal{width:76px;padding:8px 10px;text-align:right;
  border:1px solid var(--lijn-2);border-radius:var(--r-xs);
  font-variant-numeric:tabular-nums;background:var(--wit)}
.ma-aantal:focus{outline:0;border-color:var(--blauw);background:var(--blauw-zacht);
  box-shadow:0 0 0 3px rgba(23,51,122,.13)}
.ma-aantal:disabled{background:var(--vlak-2);color:var(--zwak);cursor:not-allowed}
.ma-voet{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-top:16px}
.ma-voet p{margin:0;max-width:46ch}
@media (max-width:640px){
  .ma-voet .btn{width:100%}
}

/* ======================================================================
   Bovenbalk, tweede opzet: een trage band met iconen

   De drie punten stonden naast elkaar met een bolletje ervoor. Op een
   telefoon paste dat niet en plakten ze aan elkaar tot een onleesbare
   zin, dus verborg de oude css er twee. Nu schuiven ze allemaal traag
   voorbij, elk met een eigen icoon, en zie je er op elk formaat een paar.

   Dezelfde motor als de partnerband: main.js dupliceert het spoor en de
   css schuift precies -50%. Vandaar ook data-band-spoor in de markup.
   ====================================================================== */
.lb-band{
  flex:1;min-width:0;overflow:hidden;height:34px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 92%,transparent)}
.lb-spoor{
  display:flex;align-items:center;gap:clamp(22px,3vw,44px);height:34px;
  width:max-content;animation:bandloop 58s linear infinite}
.lb-band:hover .lb-spoor{animation-play-state:paused}

/* De bolletjes uit de eerste opzet horen hier niet meer: elk punt heeft
   nu een eigen icoon. Zonder dit staat er een stip en een icoon. */
.lb-usp::before{display:none}
.lb-usp{gap:8px;color:#a9c0dc}
.lb-ic{display:grid;place-items:center;width:15px;height:15px;flex:none;color:var(--groen)}
.lb-ic svg{width:14px;height:14px}

.lb-rechts{gap:18px}
.lb-rechts a{display:inline-flex;align-items:center;gap:6px}
.lb-rechts svg{width:13px;height:13px;opacity:.75}

@media (max-width:900px){
  /* De oude regel verstopte punt 2 en 3. Nu draaien ze mee, dus weer aan. */
  .lb-usp:nth-child(2),.lb-usp:nth-child(3){display:inline-flex}
  .lb-mail{display:none}
}
@media (max-width:560px){
  .lb-spoor{gap:26px;animation-duration:44s}
  .lb-rechts{gap:0}
}
@media (prefers-reduced-motion:reduce){
  .lb-spoor{animation:none;width:auto;overflow-x:auto}
  .lb-band{-webkit-mask-image:none;mask-image:none}
}

/* ======================================================================
   Chatvenster rechtsonder

   Ziet eruit als een gesprek, geeft je bericht door aan WhatsApp. Dat is
   bewust: een chatvenster waar niemand antwoordt is erger dan geen
   chatvenster, en op WhatsApp zit de zaakvoerder toch al de hele dag.
   ====================================================================== */
.chat{position:fixed;right:clamp(14px,2.4vw,26px);bottom:clamp(14px,2.4vw,26px);
  z-index:90;display:flex;flex-direction:column;align-items:flex-end;gap:12px}

.chat-knop{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:12px 20px 12px 15px;border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(135deg,var(--marine),var(--blauw));color:#fff;
  font:inherit;font-size:.9rem;font-weight:700;
  box-shadow:0 8px 22px rgba(10,24,56,.30),0 2px 6px rgba(10,24,56,.20);
  transition:transform .28s var(--veer),box-shadow .28s var(--ease)}
.chat-knop:hover{transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(10,24,56,.36),0 3px 8px rgba(10,24,56,.24)}
.chat-knop-ic{display:grid;place-items:center;width:22px;height:22px;flex:none}
.chat-knop-ic svg{width:21px;height:21px}
.chat.open .chat-knop{transform:scale(.94);opacity:.55}

/* Groen stipje met een zachte pols: laat zien dat er iemand is zonder een
   getal te verzinnen dat niemand kan controleren. */
.chat-stip{position:absolute;top:9px;right:12px;width:9px;height:9px;border-radius:50%;
  background:#25d366;box-shadow:0 0 0 2px var(--marine)}
.chat-stip::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:#25d366;animation:chatpols 2.4s ease-out infinite}
@keyframes chatpols{
  0%{transform:scale(1);opacity:.7}
  70%,100%{transform:scale(2.6);opacity:0}
}

.chat-vak{
  width:min(92vw,346px);border-radius:18px;overflow:hidden;background:var(--wit);
  border:1px solid var(--lijn);box-shadow:0 20px 50px rgba(10,24,56,.24);
  animation:chatin .3s var(--ease) both}
.chat-vak[hidden]{display:none}
@keyframes chatin{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}

.chat-kop{display:flex;align-items:center;gap:11px;padding:13px 14px;
  background:linear-gradient(135deg,var(--marine),var(--blauw));color:#fff}
.chat-foto{position:relative;width:42px;height:42px;flex:none;border-radius:50%;
  overflow:hidden;background:#fff;display:grid;place-items:center}
.chat-foto img{width:100%;height:100%;object-fit:contain;padding:4px}
.chat-online{position:absolute;right:0;bottom:1px;width:11px;height:11px;border-radius:50%;
  background:#25d366;border:2px solid var(--marine)}
.chat-wie{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.chat-wie b{font-size:.9rem}
.chat-wie em{display:flex;align-items:center;gap:5px;font-style:normal;
  font-size:.74rem;color:#bcd2ee}
.chat-stip-klein{width:6px;height:6px;border-radius:50%;background:#25d366;flex:none}
.chat-dicht{display:grid;place-items:center;width:30px;height:30px;flex:none;
  border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;
  transition:background .2s,transform .2s}
.chat-dicht svg{width:15px;height:15px}
.chat-dicht:hover{background:rgba(255,255,255,.26);transform:rotate(90deg)}

.chat-lijf{padding:15px 14px;background:var(--pagina);max-height:46vh;overflow-y:auto}
.chat-bericht{display:flex;gap:9px;align-items:flex-end}
.chat-avatar{width:28px;height:28px;flex:none;border-radius:50%;overflow:hidden;
  background:var(--wit);border:1px solid var(--lijn);display:grid;place-items:center}
.chat-avatar img{width:100%;height:100%;object-fit:contain;padding:3px}
.chat-bel{background:var(--wit);border:1px solid var(--lijn);border-radius:16px 16px 16px 5px;
  padding:11px 13px;box-shadow:var(--schaduw);max-width:100%}
.chat-bel p{margin:0 0 7px;font-size:.85rem;line-height:1.5;color:var(--tekst-2)}
.chat-bel p:last-of-type{margin-bottom:4px}
.chat-bel a{color:var(--blauw);font-weight:600}
.chat-tijd{display:block;font-size:.68rem;color:var(--zwak)}

.chat-snel{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.chat-snel button{
  padding:7px 12px;border-radius:999px;border:1px solid #cfdcf1;background:var(--wit);
  color:var(--marine);font:inherit;font-size:.76rem;font-weight:600;cursor:pointer;
  transition:background .2s,border-color .2s,transform .2s var(--veer)}
.chat-snel button:hover{background:var(--blauw-lt);border-color:var(--blauw);
  transform:translateY(-1px)}

.chat-voet{display:flex;align-items:flex-end;gap:8px;padding:11px 12px;
  background:var(--wit);border-top:1px solid var(--lijn)}
.chat-voet textarea{
  flex:1;min-width:0;resize:none;height:40px;max-height:120px;padding:10px 13px;
  border:1px solid var(--lijn-2);border-radius:18px;font:inherit;font-size:.85rem;
  line-height:1.35;background:var(--pagina)}
.chat-voet textarea:focus{outline:0;border-color:var(--blauw);background:var(--wit);
  box-shadow:0 0 0 3px rgba(23,51,122,.12)}
.chat-voet.leeg textarea{border-color:var(--accent);animation:chatschud .4s}
@keyframes chatschud{
  0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)}
}
.chat-verstuur{display:grid;place-items:center;width:40px;height:40px;flex:none;
  border:0;border-radius:50%;background:#25d366;color:#fff;cursor:pointer;
  transition:transform .22s var(--veer),background .2s}
.chat-verstuur svg{width:18px;height:18px;margin-right:2px}
.chat-verstuur:hover{transform:scale(1.07);background:#1fb757}
.chat-noot{margin:0;padding:0 14px 12px;background:var(--wit);
  font-size:.7rem;color:var(--zwak);text-align:center}

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

/* Het mandje zweeft rechtsonder op mobiel niet in de weg van de chat. */
@media (max-width:560px){
  .chat{right:12px;bottom:12px}
  .chat-knop-tekst{display:none}
  .chat-knop{padding:14px;border-radius:50%}
  .chat-stip{top:6px;right:6px}
  .chat-lijf{max-height:38vh}
}
@media (prefers-reduced-motion:reduce){
  .chat-vak{animation:none}
  .chat-stip::after{animation:none}
  .chat-knop,.chat-verstuur,.chat-snel button,.chat-dicht{transition:none}
}

/* ======================================================================
   Snel samenstellen: de gevonden regels

   Was een tabel met alleen tekst. Het probleem daarmee is dat je bij
   "cola" niet ziet of wij de tray van 24 of de sixpack gevonden hebben,
   en dat merk je pas bij de levering. Nu een kaart per regel met de foto,
   de eenheidskeuze inclusief palet, en de prijs die live meerekent.
   ====================================================================== */
.snelvangst{display:grid;gap:10px;margin-bottom:18px}
.sv-regel{
  display:grid;gap:14px;align-items:center;
  grid-template-columns:auto 62px minmax(0,1fr) auto auto;
  padding:12px 15px;background:var(--wit);
  border:1px solid var(--lijn);border-radius:var(--r);
  transition:border-color .2s,box-shadow .25s var(--ease),opacity .2s}
.sv-regel:hover{border-color:var(--lijn-2);box-shadow:var(--schaduw)}
/* Uitgevinkt blijft leesbaar maar duidelijk buiten de bestelling. */
.sv-regel.uit{opacity:.5;background:var(--vlak-2)}

.sv-vink{position:relative;display:grid;place-items:center;width:24px;height:24px;flex:none}
.sv-vink input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.sv-vinkje{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;
  border:1.5px solid var(--lijn-2);background:var(--wit);color:transparent;
  transition:background .18s,border-color .18s,color .18s}
.sv-vinkje svg{width:13px;height:13px}
.sv-vink input:checked + .sv-vinkje{background:var(--blauw);border-color:var(--blauw);color:#fff}
.sv-vink input:focus-visible + .sv-vinkje{box-shadow:0 0 0 3px rgba(23,51,122,.22)}

.sv-foto{display:block;width:62px;height:62px;border-radius:9px;overflow:hidden;
  background:var(--vlak-2);border:1px solid var(--lijn)}
.sv-foto img{width:100%;height:100%;object-fit:contain;padding:4px}

.sv-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.sv-getikt{font-size:.72rem;color:var(--zwak)}
.sv-getikt em{font-style:normal;font-weight:600;color:var(--tekst-2)}
.sv-naam{font-weight:700;font-size:.94rem;line-height:1.3}
.sv-naam:hover{color:var(--blauw)}
.sv-meta{display:flex;flex-wrap:wrap;gap:5px 10px;font-size:.75rem;color:var(--zwak)}
.sv-merk{font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--marine)}

.sv-keuze{display:flex;align-items:center;gap:9px;flex:none}
.sv-keuze select{padding:8px 11px;border:1px solid var(--lijn-2);border-radius:var(--r-xs);
  font-size:.83rem;background:var(--wit);max-width:170px}
.sv-keuze select:focus{outline:0;border-color:var(--blauw);box-shadow:0 0 0 3px rgba(23,51,122,.13)}

.sv-prijs{display:flex;flex-direction:column;align-items:flex-end;gap:1px;
  min-width:104px;flex:none}
.sv-prijs b{font-size:1.02rem;font-variant-numeric:tabular-nums}
.sv-prijs small{font-size:.72rem;color:var(--zwak);white-space:nowrap}

.sv-voet{display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;padding:16px 18px;border-radius:var(--r);
  background:linear-gradient(140deg,var(--blauw-zacht),var(--wit) 62%);
  border:1px solid #cfdcf1}
.sv-totaal{display:flex;flex-direction:column;gap:1px}
.sv-totaal span{font-size:.78rem;color:var(--zwak);text-transform:uppercase;letter-spacing:.05em}
.sv-totaal b{font-size:1.7rem;letter-spacing:-.025em;color:var(--marine);
  font-variant-numeric:tabular-nums;line-height:1.1}
.sv-totaal small{font-size:.76rem;color:var(--tekst-2)}
.sv-knoppen{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.sv-knoppen .klein{text-align:right}

@media (max-width:900px){
  .sv-regel{grid-template-columns:auto 54px minmax(0,1fr);
    grid-template-areas:"vink foto info" ". keuze keuze" ". prijs prijs";
    row-gap:10px}
  .sv-vink{grid-area:vink}
  .sv-foto{grid-area:foto;width:54px;height:54px}
  .sv-info{grid-area:info}
  .sv-keuze{grid-area:keuze}
  .sv-prijs{grid-area:prijs;align-items:flex-start;min-width:0}
  .sv-voet{flex-direction:column;align-items:stretch}
  .sv-knoppen{align-items:stretch}
  .sv-knoppen .klein{text-align:center}
}
@media (max-width:560px){
  .sv-keuze{flex-wrap:wrap}
  .sv-keuze select{max-width:none;flex:1 1 130px}
}

/* ======================================================================
   Contactpagina, tweede opzet
   ====================================================================== */
.openstand{display:inline-flex;align-items:center;gap:8px;flex:none;
  padding:8px 15px;border-radius:999px;font-size:.83rem;font-weight:600}
.openstand i{width:8px;height:8px;border-radius:50%;flex:none;position:relative}
.openstand.aan{background:var(--groen-lt);color:#0b6b3d}
.openstand.aan i{background:var(--groen)}
.openstand.aan i::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--groen);animation:chatpols 2.6s ease-out infinite}
.openstand.uit{background:var(--vlak-2);color:var(--tekst-2)}
.openstand.uit i{background:var(--zwak)}

.kanalen{display:grid;gap:12px;margin:4px 0 22px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,214px),1fr))}
.kanaal{display:flex;flex-direction:column;gap:3px;padding:17px 18px;
  background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);
  position:relative;overflow:hidden;
  transition:transform .25s var(--veer),box-shadow .25s var(--ease),border-color .2s}
.kanaal::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--marine);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease)}
.kanaal:hover{transform:translateY(-4px);box-shadow:var(--schaduw-op);border-color:var(--lijn-2)}
.kanaal:hover::before{transform:scaleX(1)}
.kanaal-ic{display:grid;place-items:center;width:38px;height:38px;margin-bottom:7px;
  border-radius:11px;background:var(--blauw-lt);color:var(--marine)}
.kanaal-ic svg{width:20px;height:20px}
.kanaal b{font-size:.98rem}
.kanaal span{font-size:.85rem;color:var(--tekst-2);overflow-wrap:anywhere}
.kanaal em{font-style:normal;font-size:.75rem;color:var(--zwak);margin-top:3px}
.kanaal-wa::before{background:#25d366}
.kanaal-wa .kanaal-ic{background:#e4f9ec;color:#128c4a}
.kanaal-bel::before{background:var(--accent)}
.kanaal-bel .kanaal-ic{background:var(--rood-lt);color:var(--accent)}
.kanaal-mail::before{background:var(--blauw)}
.kanaal-weg::before{background:var(--marine)}
.kanaal-weg .kanaal-ic{background:var(--vlak-2);color:var(--marine)}

.urenkaart .uren{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:1px}
.uren li{display:flex;justify-content:space-between;gap:12px;padding:7px 9px;
  border-radius:var(--r-xs);font-size:.85rem;color:var(--tekst-2)}
.uren li.aan{background:var(--blauw-lt);color:var(--marine);font-weight:600}
.uren li em{font-style:normal;font-size:.7rem;color:var(--blauw);margin-left:5px}
.uren b{font-variant-numeric:tabular-nums;white-space:nowrap}

.minifaq{display:grid;gap:7px;margin-top:10px}
.minifaq details{border:1px solid var(--lijn);border-radius:var(--r-sm);background:var(--wit);
  overflow:hidden}
.minifaq summary{padding:10px 13px;cursor:pointer;font-size:.85rem;font-weight:600;
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;
  transition:background .18s}
.minifaq summary::-webkit-details-marker{display:none}
.minifaq summary::after{content:"+";font-size:1.1rem;font-weight:700;color:var(--zwak);flex:none}
.minifaq details[open] summary::after{content:"−"}
.minifaq summary:hover{background:var(--blauw-zacht)}
.minifaq p{margin:0;padding:0 13px 12px;font-size:.83rem;line-height:1.55;color:var(--tekst-2)}

/* ======================================================================
   Klantenportaal: status van de handelaarsaanvraag
   ====================================================================== */
.statusvak{display:flex;gap:14px;align-items:flex-start;margin:16px 0;
  padding:16px 18px;border-radius:var(--r);border:1px solid var(--lijn);
  background:var(--wit);box-shadow:var(--schaduw)}
.statusvak b{display:block;font-size:1rem;margin-bottom:4px}
.statusvak p{margin:0 0 6px;font-size:.86rem;line-height:1.55;color:var(--tekst-2)}
.statusvak p:last-child{margin-bottom:0}
/* :not(.btn) want een knop in dit vak heeft zijn eigen kleur; zonder deze
   uitzondering werd "Adres invullen" donkerblauw op donkerblauw. */
.statusvak a:not(.btn){color:var(--blauw);font-weight:600}
.sv-ic{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:12px}
.sv-ic svg{width:21px;height:21px}
.sv-pil{flex:none;align-self:center;padding:6px 13px;border-radius:999px;
  font-size:.76rem;font-weight:700;white-space:nowrap}

.statusvak.wacht{border-color:#f3d9ac;
  background:linear-gradient(140deg,var(--oranje-lt),var(--wit) 62%)}
.statusvak.wacht .sv-ic{background:#fdeada;color:#9a5a06}
.statusvak.wacht .sv-pil{background:#fdeada;color:#9a5a06}
.statusvak.ok{border-color:#bfe6d2;
  background:linear-gradient(140deg,var(--groen-lt),var(--wit) 62%)}
.statusvak.ok .sv-ic{background:#d8f2e4;color:#0b6b3d}
.statusvak.ok .sv-pil{background:#d8f2e4;color:#0b6b3d}
.statusvak.let{border-color:#f3c2c2;
  background:linear-gradient(140deg,var(--rood-lt),var(--wit) 62%)}
.statusvak.let .sv-ic{background:#fbdcdc;color:#a12222}

@media (max-width:640px){
  .statusvak{flex-wrap:wrap}
  .sv-pil{align-self:flex-start}
}

/* ======================================================================
   Minimumbedrag voor handelaars

   Werd pas bij het afrekenen gecontroleerd, en dan sta je met een volle
   wagen te horen dat het niet mag. Nu zie je het terwijl je vult.
   ====================================================================== */
.minbalk{margin-top:14px;padding:12px 14px;border-radius:var(--r-sm);
  background:var(--oranje-lt);border:1px solid #f3d9ac}
.minbalk.gehaald{background:var(--groen-lt);border-color:#bfe6d2}
.minbalk p{margin:8px 0 0;font-size:.8rem;line-height:1.5;color:#9a5a06}
.minbalk.gehaald p{color:#0b6b3d}
.mb-spoor{height:7px;border-radius:99px;background:rgba(255,255,255,.7);overflow:hidden}
.mb-spoor i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--oranje),var(--accent));
  transition:width .4s var(--ease)}
.minbalk.gehaald .mb-spoor i{background:linear-gradient(90deg,var(--groen),#3fbf7f)}

/* ======================================================================
   Bestelling: acties voor de klant
   ====================================================================== */
.bestelacties{display:flex;flex-wrap:wrap;gap:9px;align-items:flex-start;margin-bottom:16px}
.bestelacties .btn{display:inline-flex;align-items:center;gap:7px}
.annuleervak{border:1px solid var(--lijn);border-radius:999px;background:var(--wit);
  overflow:hidden;transition:border-radius .2s}
.annuleervak[open]{border-radius:var(--r);padding-bottom:13px;border-color:var(--lijn-2)}
.annuleervak summary{padding:9px 16px;cursor:pointer;font-size:.84rem;font-weight:600;
  color:var(--zwak);list-style:none}
.annuleervak summary::-webkit-details-marker{display:none}
.annuleervak summary:hover{color:var(--accent)}
.annuleervak form{padding:0 16px;display:grid;gap:9px;max-width:420px}
.annuleervak p{margin:0}
.annuleervak input[type="text"]{padding:9px 12px;border:1px solid var(--lijn-2);
  border-radius:var(--r-xs);font:inherit;font-size:.85rem}

/* ======================================================================
   Vaste lijsten
   ====================================================================== */
.lijstbalk{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;
  justify-content:space-between;margin:16px 0 18px}
.lb-tabs{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.lb-tab{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;
  border-radius:999px;background:var(--wit);border:1px solid var(--lijn);
  font-size:.86rem;font-weight:600;
  transition:border-color .2s,background .2s,transform .2s var(--veer)}
.lb-tab svg{width:15px;height:15px;color:var(--zwak)}
.lb-tab i{font-style:normal;font-size:.72rem;color:var(--zwak);
  font-variant-numeric:tabular-nums}
.lb-tab:hover{border-color:var(--blauw);transform:translateY(-1px)}
.lb-tab.aan{background:var(--marine);border-color:var(--marine);color:#fff}
.lb-tab.aan svg,.lb-tab.aan i{color:#a9c0dc}

.lb-acties{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.lb-nieuw{display:flex;gap:7px;align-items:center;margin:0}
.lb-nieuw input{padding:8px 13px;border:1px solid var(--lijn-2);border-radius:999px;
  font:inherit;font-size:.83rem;min-width:0;width:min(58vw,216px);background:var(--wit)}
.lb-nieuw input:focus{outline:0;border-color:var(--blauw);
  box-shadow:0 0 0 3px rgba(23,51,122,.13)}

.vl-regels{display:grid;gap:10px;margin-bottom:16px}
.vl-regel{display:grid;gap:14px;align-items:center;
  grid-template-columns:64px minmax(0,1fr) auto auto;
  padding:12px 15px;background:var(--wit);border:1px solid var(--lijn);
  border-radius:var(--r);transition:border-color .2s,box-shadow .25s var(--ease)}
.vl-regel:hover{border-color:var(--lijn-2);box-shadow:var(--schaduw)}
.vl-foto{display:block;width:64px;height:64px;border-radius:9px;overflow:hidden;
  background:var(--vlak-2);border:1px solid var(--lijn)}
.vl-foto img{width:100%;height:100%;object-fit:contain;padding:4px}
.vl-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.vl-merk{font-size:.7rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--zwak)}
.vl-naam{font-weight:700;font-size:.94rem;line-height:1.3}
.vl-naam:hover{color:var(--blauw)}
.vl-meta{display:flex;flex-wrap:wrap;gap:5px 10px;font-size:.75rem;color:var(--zwak)}
.vl-keuze{display:flex;align-items:center;gap:9px;flex:none}
.vl-keuze select{padding:8px 11px;border:1px solid var(--lijn-2);border-radius:var(--r-xs);
  font-size:.83rem;background:var(--wit);max-width:168px}
.vl-prijs{display:flex;flex-direction:column;align-items:flex-end;gap:1px;
  min-width:100px;flex:none}
.vl-prijs b{font-size:1.02rem;font-variant-numeric:tabular-nums}
.vl-prijs small{font-size:.72rem;color:var(--zwak);white-space:nowrap}

.vl-voet{display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;padding:15px 18px;border-radius:var(--r);
  background:var(--vlak-2);border:1px solid var(--lijn)}
.vl-totaal{display:flex;flex-direction:column;gap:1px}
.vl-totaal span{font-size:.76rem;color:var(--zwak);text-transform:uppercase;letter-spacing:.05em}
.vl-totaal b{font-size:1.5rem;letter-spacing:-.02em;color:var(--marine);
  font-variant-numeric:tabular-nums;line-height:1.15}
.vl-totaal small{font-size:.75rem;color:var(--tekst-2)}
.vl-knoppen{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.vl-wagen{margin-top:12px}
.vl-beheer{display:grid;gap:12px;margin-top:26px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.vl-beheer h2{font-size:1rem;margin-bottom:6px}

@media (max-width:900px){
  .vl-regel{grid-template-columns:56px minmax(0,1fr);
    grid-template-areas:"foto info" "keuze keuze" "prijs prijs";row-gap:10px}
  .vl-foto{grid-area:foto;width:56px;height:56px}
  .vl-info{grid-area:info}
  .vl-keuze{grid-area:keuze}
  .vl-prijs{grid-area:prijs;align-items:flex-start;min-width:0}
  .vl-voet{flex-direction:column;align-items:stretch}
  .vl-knoppen{align-items:stretch}
  .lb-nieuw input{flex:1}
}

/* ======================================================================
   Het logo in de kop

   Het merkteken was een donkerblauw tegeltje met witte letters erin. Zet
   je daar het echte logo op, zwarte letters op transparant, dan zie je
   niets meer. Vandaar hier een licht vlak, en de glans en de veeg eraf:
   die lagen over het beeld heen.
   ====================================================================== */
.kop-merkteken{
  width:42px;height:42px;padding:5px;border-radius:12px;
  background:var(--wit);
  border:1px solid var(--lijn);
  box-shadow:0 2px 8px rgba(16,35,59,.10);
  overflow:hidden}
.kop-merkteken::before,.kop-merkteken::after{content:none;display:none}
.kop-merkteken img{width:100%;height:100%;object-fit:contain;display:block}
.merk:hover .kop-merkteken{transform:rotate(-4deg) scale(1.05);
  border-color:var(--lijn-2);box-shadow:0 6px 16px rgba(16,35,59,.16)}
.vm-kop img{background:var(--wit);border-radius:11px;padding:5px}

@media (max-width:560px){
  .kop-merkteken{width:38px;height:38px;padding:4px}
}

/* ======================================================================
   De hero, derde opzet

   Was bijna beeldvullend op een breed scherm: je zag de banner en niets
   anders, en je moest scrollen voor je wist dat er een winkel achter zat.
   Nu een vaste, redelijke hoogte met een bovengrens in vh, zodat hij op
   elk scherm ongeveer even hoog oogt.
   ====================================================================== */
.diavak .dia{
  aspect-ratio:auto;
  height:clamp(300px,42vw,480px);
  max-height:64vh;min-height:0}

@media (max-width:900px){
  .diavak .dia{height:clamp(260px,58vw,340px);max-height:none}
}
@media (max-width:560px){
  /* Op een telefoon staat de tekst onder elkaar en liep de knop uit het
     vlak. Nu een vaste hoogte met de tekst netjes onderaan. */
  .diavak .dia{height:320px}
  .dia-tekst,.dia-rechts .dia-tekst,.dia-midden .dia-tekst{
    left:18px;right:18px;top:auto;bottom:26px;transform:none;
    max-width:none;align-items:flex-start;text-align:left}
  .dia-tekst strong{font-size:1.5rem;line-height:1.15}
  .dia-tekst em{font-size:.88rem}
  .dia-knop{margin-top:12px;padding:10px 18px;font-size:.86rem;align-self:flex-start}
  .dia-waas{background:linear-gradient(0deg,rgba(6,16,42,.78) 0%,
            rgba(6,16,42,.42) 46%,rgba(6,16,42,.16) 100%)}
  .dia-rechts .dia-waas{transform:none}
  .dia-bolletjes{bottom:8px}
}

/* ======================================================================
   Winkelwagen: de regel klopte niet

   Vier kinderen in een grid van drie kolommen. Het vierde viel op een
   eigen rij en plakte tegen de linkerrand; dat is het "wall hugging" dat
   je zag. Nu vier echte kolommen op breed en benoemde vlakken op smal.
   ====================================================================== */
.mregel{
  grid-template-columns:88px minmax(0,1fr) auto auto;
  gap:16px;align-items:center}
.mregel-aantal{
  display:flex;align-items:center;gap:8px;flex-wrap:nowrap;justify-content:flex-end}
.mregel-prijs{display:flex;flex-direction:column;align-items:flex-end;gap:1px;
  min-width:96px;text-align:right}

/* De prullenbak. Rood pas bij aanraken: een permanent rode knop naast elk
   artikel maakt van je winkelwagen een waarschuwingsbord. */
.mregel-weg{
  display:grid;place-items:center;width:36px;height:36px;flex:none;padding:0;
  border:1px solid var(--lijn);border-radius:50%;background:var(--wit);
  color:var(--zwak);cursor:pointer;
  transition:color .2s,border-color .2s,background .2s,transform .2s var(--veer)}
.mregel-weg svg{width:17px;height:17px}
.mregel-weg:hover{color:var(--accent);border-color:var(--accent);
  background:var(--rood-lt);transform:scale(1.06)}
.mregel-weg:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(224,26,43,.22)}

/* De mobiele opzet van .mregel staat verderop, bij "Winkelwagen op een
   telefoon, definitieve opzet". Hier stond eerst een eerdere poging met
   aantal en prijs op dezelfde rij; die is weggehaald in plaats van
   overschreven, want twee media queries voor hetzelfde raster is precies
   hoe je later niet meer weet welke regel wint. */

/* ======================================================================
   Megamenu, derde opzet: een prijslijst in plaats van een dropdown

   Het bleef aanvoelen als een softwaremenu: elf even zware kolommen met
   nulletjes erachter. Een groothandel bladert niet, die zoekt een rubriek
   en wil zien hoeveel er ligt. Daarom:

   - lege subrubrieken vallen visueel weg in plaats van "0" te roepen
   - de teller wordt een pil met een echt getal, en verdwijnt bij nul
   - de rubriekkop krijgt de categoriefoto, en die mag groter
   - een rubriek zonder artikelen wordt gedempt, niet verborgen: het
     beheer moet zien dat hij bestaat en er nog niets in hangt
   ====================================================================== */
.mega{padding:20px 20px 16px}
.mega-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,186px),1fr));
  gap:4px 10px}

.mega-kolom{padding:10px 11px 12px;border-radius:var(--r-sm);
  border:1px solid transparent}
.mega-kolom:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.10)}

.mega-kolom h4{margin:0 0 9px;padding-bottom:9px;
  border-bottom:1px solid rgba(255,255,255,.12)}
.mega-kolom h4 a{display:flex;align-items:center;gap:10px;font-size:.9rem;
  letter-spacing:-.01em}

/* De categoriefoto mag hier groter: dat is het enige beeld in dit menu en
   het is wat je herkent. */
.mega-ic{width:34px;height:34px;border-radius:10px}
.mega-ic.met-foto{background:rgba(255,255,255,.92);padding:2px}
.mega-ic svg,.mega-ic .cat-icoon{width:18px;height:18px}

/* Subrubrieken: een rustige rij, met de teller als pil. */
.mega-kolom > a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:6px 8px;border-radius:7px;font-size:.83rem;
  color:#c2d3ee;transition:background .18s,color .18s}
.mega-kolom > a:hover{background:rgba(255,255,255,.10);color:#fff}
.mega-kolom > a .n{
  flex:none;min-width:22px;padding:2px 7px;border-radius:99px;
  background:rgba(255,255,255,.12);color:#dbe7fb;
  font-size:.68rem;font-weight:700;text-align:center;
  font-variant-numeric:tabular-nums}
.mega-kolom > a:hover .n{background:rgba(255,255,255,.22);color:#fff}

/* Een rubriek waar niets in ligt hoeft geen aandacht te trekken. Wij
   kunnen in css niet zien of de teller nul is, dus dempen we hem via de
   klasse die PHP erop zet. */
.mega-kolom.leeg{opacity:.42}
.mega-kolom.leeg:hover{opacity:.7}
.mega-kolom > a.leeg{opacity:.45}
.mega-kolom > a.leeg .n{background:rgba(255,255,255,.07)}

.mega-voet{margin-top:14px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.12);gap:8px}
.mega-voet a{padding:9px 16px;border-radius:999px;font-size:.83rem;
  background:rgba(255,255,255,.09);color:#dbe7fb;
  border:1px solid rgba(255,255,255,.10);
  transition:background .2s,color .2s,transform .2s var(--veer)}
.mega-voet a:hover{background:#fff;color:var(--marine);transform:translateY(-2px)}

@media (max-width:1180px){
  .mega-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,168px),1fr))}
}

/* ======================================================================
   Sitemap in de voet

   Dichtgeklapt een enkele regel, opengeklapt alles. Zo staat de hele
   winkel vanaf elke pagina een klik ver, zonder dat de voet een muur van
   links wordt.
   ====================================================================== */
.sitemap{padding-bottom:6px}
.sitemap-vak{border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10)}
.sitemap-vak summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 2px;cursor:pointer;list-style:none;color:#c2d3ee;
  transition:color .2s}
.sitemap-vak summary::-webkit-details-marker{display:none}
.sitemap-vak summary:hover{color:#fff}
.sitemap-vak summary b{display:block;font-size:.95rem;color:#fff}
.sitemap-vak summary em{display:block;font-style:normal;font-size:.79rem;
  color:#8ea6c9;margin-top:2px}
.sitemap-vak summary svg{width:18px;height:18px;flex:none;transition:transform .25s}
.sitemap-vak[open] summary svg{transform:rotate(180deg)}

.sitemap-in{display:grid;gap:22px 26px;padding:4px 2px 22px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  animation:smopen .3s var(--ease) both}
@keyframes smopen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.sm-breed{grid-column:span 2}
.sm-kolom h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--accent);margin-bottom:11px}
.sm-kolom ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.sm-kolom a{font-size:.83rem;color:#a9c0dc;transition:color .18s}
.sm-kolom a:hover{color:#fff;text-decoration:underline}

.sm-boom{display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,158px),1fr))}
.sm-tak{min-width:0}
.sm-hoofd{display:inline-flex;align-items:center;gap:7px;font-weight:700;
  font-size:.85rem;color:#fff;margin-bottom:6px}
.sm-hoofd i{font-style:normal;font-size:.68rem;font-weight:700;
  padding:1px 7px;border-radius:99px;background:rgba(255,255,255,.12);color:#c2d3ee}
.sm-tak ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.sm-tak a{font-size:.8rem}

.sm-merken{display:flex;flex-wrap:wrap;gap:6px}
.sm-merken a{padding:5px 11px;border-radius:999px;font-size:.78rem;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);
  color:#a9c0dc;transition:background .18s,color .18s,border-color .18s}
.sm-merken a:hover{background:rgba(255,255,255,.16);color:#fff;
  border-color:rgba(255,255,255,.2);text-decoration:none}

@media (max-width:760px){
  .sm-breed{grid-column:span 1}
  .sitemap-in{gap:18px}
}
@media (prefers-reduced-motion:reduce){
  .sitemap-in{animation:none}
}

/* ======================================================================
   Winkelwagen op een telefoon, definitieve opzet

   De vorige poging zette aantal en prijs samen op een rij. Bij een
   paletprijs is dat "€ 1.220,80 incl. 6% btw" naast een stepper en een
   prullenbak, en op 355px past dat niet: alles werd platgedrukt.

   Nu staat de prullenbak in de rechterbovenhoek van de kaart, waar hij
   toch hoort, en heeft de onderste rij alleen nog de stepper links en het
   bedrag rechts. Dat past wel, ook bij zes cijfers.
   ====================================================================== */
@media (max-width:900px){
  .mregel{
    position:relative;
    grid-template-columns:72px minmax(0,1fr);
    grid-template-areas:"foto info" "aantal prijs";
    row-gap:14px;column-gap:13px;align-items:start;
    padding-right:56px}
  .mregel-foto{grid-area:foto;width:72px;height:72px}
  .mregel-info{grid-area:info;padding-right:0}
  .mregel-aantal{grid-area:aantal;justify-content:flex-start;gap:0}
  .mregel-prijs{grid-area:prijs;align-self:center;align-items:flex-end;min-width:0}
  .mregel-prijs b{font-size:1.05rem;white-space:nowrap}
  .mregel-prijs small{white-space:nowrap}

  /* Uit de rij gehaald: hij hoeft geen breedte af te snoepen van het
     bedrag, en rechtsboven is waar je hem verwacht. */
  .mregel-weg{position:absolute;top:12px;right:12px;width:34px;height:34px}
  .mregel-weg svg{width:16px;height:16px}
}
@media (max-width:420px){
  .mregel{grid-template-columns:58px minmax(0,1fr);column-gap:11px;padding-right:52px}
  .mregel-foto{width:58px;height:58px}
  .mregel-naam{font-size:.9rem}
  .mregel-prijs b{font-size:1rem}
}

/* ======================================================================
   Het overzicht in de winkelwagen, tweede opzet

   Het was een lijstje bedragen met drie knoppen eronder die elk een eigen
   gewicht hadden, waardoor Winkelwagen legen los in de ruimte zweefde.
   Nu: een kop met de telling, de bedragen als rij, het totaal in een eigen
   donker vlak, en daaronder een duidelijke hoofdknop met twee gelijke
   hulpknoppen ernaast.
   ====================================================================== */
.mandje-totaal{align-self:start}
.mt-kop{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:13px;margin-bottom:13px;border-bottom:1px solid var(--lijn)}
.mt-kop h2{margin:0;font-size:1.05rem}
.mt-telling{font-size:.78rem;color:var(--zwak);white-space:nowrap;
  font-variant-numeric:tabular-nums}

/* Het totaal krijgt een eigen vlak. In de lijst tussen Btw en Levering
   moest je hem zoeken, en dat is nu net het getal waar je op wacht. */
.mt-groot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:14px;padding:15px 17px;border-radius:var(--r);
  background:linear-gradient(135deg,var(--marine) 0%,var(--blauw) 100%);
  color:#fff;box-shadow:0 6px 18px rgba(10,24,56,.22)}
.mt-groot span{display:flex;flex-direction:column;gap:1px;font-size:.86rem}
.mt-groot small{font-size:.7rem;color:#a9c0dc;text-transform:uppercase;letter-spacing:.06em}
.mt-groot b{font-size:1.5rem;letter-spacing:-.025em;font-variant-numeric:tabular-nums;
  white-space:nowrap}

/* Wat de staffel oplevert. Alleen zichtbaar als er echt iets af gaat. */
.mt-winst{display:flex;gap:10px;align-items:flex-start;margin-top:11px;
  padding:11px 13px;border-radius:var(--r-sm);
  background:var(--groen-lt);border:1px solid #bfe6d2;
  font-size:.82rem;line-height:1.5;color:#0b6b3d}
.mw-ic{display:grid;place-items:center;width:20px;height:20px;flex:none;
  border-radius:50%;background:var(--groen);color:#fff}
.mw-ic svg{width:12px;height:12px}

.mt-afreken span{display:inline-flex;align-items:center;gap:9px}
.mt-afreken svg{width:16px;height:16px;opacity:.85}

/* Twee gelijke hulpknoppen. Ze stonden uit elkaar geduwd met
   space-between, waardoor Leegmaken los tegen de rand hing. */
.mt-klein{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:stretch}
.mt-hulp{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 12px;border:1px solid var(--lijn);border-radius:var(--r-sm);
  background:var(--wit);color:var(--tekst-2);cursor:pointer;
  font:inherit;font-size:.8rem;font-weight:600;text-align:center;
  transition:border-color .2s,color .2s,background .2s,transform .2s var(--veer)}
.mt-hulp svg{width:15px;height:15px;flex:none;opacity:.8}
.mt-hulp:hover{border-color:var(--blauw);color:var(--marine);
  background:var(--blauw-zacht);transform:translateY(-1px)}
.mt-legen:hover{border-color:var(--accent);color:var(--accent);background:var(--rood-lt)}

.mt-trust{list-style:none;margin:15px 0 0;padding:15px 0 0;
  border-top:1px solid var(--lijn);display:grid;gap:8px}
.mt-trust li{display:flex;gap:9px;align-items:flex-start;
  font-size:.79rem;line-height:1.45;color:var(--tekst-2)}
.mt-trust svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--groen)}

.mt-noot{margin:11px 0 0;font-size:.78rem;line-height:1.5;color:var(--zwak)}
.mt-inloggen{margin:13px 0 0;text-align:center;font-size:.8rem;color:var(--zwak)}
.mt-inloggen a{color:var(--blauw);font-weight:600}

@media (max-width:560px){
  .mt-groot{padding:13px 14px}
  .mt-groot b{font-size:1.3rem}
  .mt-klein{grid-template-columns:1fr}
}

/* ======================================================================
   Paletprijs achter een aanmelding, tweede opzet

   Eerst was dit een donkerblauw blok tussen de eenheidskeuze en de
   koopknop. Twee dingen mis: het trok meer aandacht dan de koopknop zelf,
   en het stond in de weg van wat je aan het doen was. Een afgeschermde
   prijs is een voetnoot bij een keuze, geen aankondiging.

   Nu een smalle strook die vastzit onder de paletregel waar hij bij hoort,
   in dezelfde breedte, met een subtiel glanzend slotje. De koopknop blijft
   het zwaarste element op de pagina.
   ====================================================================== */
.koop-optie.koop-verborgen{
  opacity:1;cursor:default;
  background:var(--vlak-2);border-color:var(--lijn);
  border-bottom-left-radius:0;border-bottom-right-radius:0;
  margin-bottom:0}
.koop-optie.koop-verborgen .ko-naam{color:var(--tekst-2)}
.ko-slot{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;
  font-weight:600;color:var(--zwak);white-space:nowrap}
.ko-slot-ic{display:grid;place-items:center;width:15px;height:15px}
.ko-slot-ic svg{width:13px;height:13px}

.paletnoot{
  display:flex;align-items:center;gap:10px;
  margin:-1px 0 0;padding:9px 14px;
  border:1px solid var(--lijn);border-top:0;
  border-radius:0 0 var(--r-sm) var(--r-sm);
  background:linear-gradient(180deg,var(--blauw-zacht),var(--wit));
  font-size:.79rem;line-height:1.45;color:var(--tekst-2);
  transition:background .2s,border-color .2s}
.paletnoot:hover{background:var(--blauw-lt);border-color:#cfdcf1}

.pn-ic{position:relative;display:grid;place-items:center;width:24px;height:24px;flex:none;
  border-radius:7px;background:var(--wit);border:1px solid #cfdcf1;color:var(--marine)}
.pn-ic svg{width:13px;height:13px}
/* Alleen het slotje ademt. Genoeg om te laten zien dat er iets achter zit,
   te weinig om af te leiden van de koopknop eronder. */
.pn-ic::after{content:"";position:absolute;inset:-3px;border-radius:9px;
  border:1.5px solid rgba(23,51,122,.30);
  animation:pnadem 3.2s ease-out infinite}
@keyframes pnadem{
  0%{transform:scale(.9);opacity:.55}
  70%,100%{transform:scale(1.18);opacity:0}
}

.pn-tekst{flex:1;min-width:0}
.pn-link{display:inline-flex;align-items:center;gap:5px;flex:none;
  font-size:.79rem;font-weight:700;color:var(--blauw);white-space:nowrap;
  transition:gap .2s var(--ease)}
.pn-link svg{width:13px;height:13px}
.paletnoot:hover .pn-link{gap:9px}

@media (max-width:560px){
  .paletnoot{flex-wrap:wrap;gap:8px}
  .pn-link{width:100%;justify-content:flex-end}
}
@media (prefers-reduced-motion:reduce){
  .pn-ic::after{animation:none;opacity:0}
  .paletnoot,.pn-link{transition:none}
}

/* ======================================================================
   Koopblok: lucht tussen de blokken

   De volgorde is nu: wat koop ik, wat kost het, wat lever ik erbij in,
   en dan pas de knop. Eerst stond de knop midden in die reeks en plakte
   het bovenliggende blok ertegenaan.
   ====================================================================== */
.koop-keuze{margin-bottom:18px}
.koop-prijsregel{margin-top:0;padding-top:0;border-top:0}
.koop-actie{margin-top:16px}
.koop-winst{margin-top:12px}
.koop-volgende{margin-top:10px}
.koop-knoppen{margin-top:16px;padding-top:16px;border-top:1px solid var(--lijn)}

/* De prijsregel is nu de kop van het koopblok en mag dus zwaarder wegen. */
.koop-prijsregel{
  align-items:flex-end;padding:14px 16px;border-radius:var(--r-sm);
  background:var(--vlak-2);border:1px solid var(--lijn)}
.kp-per{font-size:1.6rem}

/* ======================================================================
   Dia's: eigen kleuren en het hele beeld tonen

   De kleuren komen per dia als custom property uit PHP (zie dc_dia en
   dc_slide_kleuren). Zo hoeft de css niet te weten welke sjablonen er
   bestaan en kan het beheer ze vrij kiezen zonder dat hier iets wijzigt.
   ====================================================================== */
.dia-tekst strong{color:var(--dia-titel,#fff)}
.dia-tekst em{color:var(--dia-titel,#fff)}
.dia-knop{
  background:var(--dia-knop,var(--accent));
  color:var(--dia-knoptekst,#fff);
  box-shadow:0 6px 20px rgba(6,16,42,.28)}
a.dia:hover .dia-knop{
  background:var(--dia-knop,var(--accent));filter:brightness(.92);
  transform:translateY(-2px)}

/* Passend: het hele bestand blijft zichtbaar. Bedoeld voor beeld waar de
   tekst tot in de hoeken staat; bijsnijden haalt die anders weg. De
   overblijvende ruimte krijgt de kleur die het beheer koos. */
.dia-passend{background:var(--dia-achter,#0d1c3d)}
.dia-passend img,.dia-passend video{object-fit:contain}
/* Zonder waas over een passend beeld: de randen zijn toch al effen, en een
   verloop over het hele vlak maakt de kleur vuil. */
.dia-passend .dia-waas{
  background:linear-gradient(0deg,rgba(6,16,42,calc(var(--waas,.45) * .8)) 0%,
             rgba(6,16,42,0) 42%)}

/* ======================================================================
   Hero op een telefoon, tweede poging

   De eerste hield object-fit:cover aan, dus zag je nog steeds het midden
   van een liggende banner. Op een telefoon is een 16:9-banner sowieso
   onbruikbaar. Nu een staand vlak waarin het hele beeld past, met de
   tekst eronder op een effen strook in plaats van eroverheen: dat leest
   altijd, ongeacht wat er op de foto staat.
   ====================================================================== */
@media (max-width:700px){
  .diavak{background:var(--marine)}
  .diavak .dia{
    height:auto;min-height:0;max-height:none;
    display:grid;grid-template-rows:auto auto}

  .dia-media{position:relative;display:block;background:var(--dia-achter,#0d1c3d)}
  .dia-media img,.dia-media video{
    width:100%;height:auto;max-height:52vh;object-fit:contain;display:block}

  /* De waas hoort bij tekst op beeld. Staat de tekst eronder, dan heeft
     hij geen doel meer en maakt hij het beeld alleen maar grauw. */
  .dia-waas{display:none}

  .dia-tekst,.dia-rechts .dia-tekst,.dia-midden .dia-tekst{
    position:static;transform:none;max-width:none;
    align-items:flex-start;text-align:left;
    padding:16px 18px 20px;gap:8px;
    background:var(--marine);text-shadow:none}
  .dia-tekst strong{font-size:1.32rem;line-height:1.18}
  .dia-tekst em{font-size:.86rem;opacity:.9}
  .dia-knop{margin-top:6px;padding:11px 20px;font-size:.87rem}

  .dia-bolletjes{bottom:auto;top:calc(52vh - 34px)}
  .dia-pijl{display:none}
}

/* ======================================================================
   De duw naar de volgende staffeltrede

   Was een rij losse woorden met <b> ertussen. Op een smal scherm brak dat
   in een stapeltje fragmenten: "Nog", "4", "erbij en je betaalt". Nu twee
   vaste blokken: de tekst links, de knop rechts, en onder elkaar zodra het
   niet meer past.
   ====================================================================== */
.koop-volgende{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  text-align:left}
.kv-tekst{display:flex;flex-direction:column;gap:2px;min-width:0}
.kv-tekst b{font-size:.86rem;color:var(--marine)}
.kv-tekst span{font-size:.78rem;color:var(--tekst-2);line-height:1.4}
.kv-knop{
  flex:none;padding:8px 14px;border-radius:999px;
  background:var(--marine);color:#fff;font-size:.76rem;font-weight:700;
  white-space:nowrap;transition:background .2s}
.koop-volgende:hover .kv-knop{background:var(--blauw)}

@media (max-width:560px){
  .koop-volgende{flex-direction:column;align-items:stretch;gap:10px}
  .kv-knop{text-align:center}
}

/* ======================================================================
   Specificaties als raster in plaats van een tabel

   Het was een net tweekolommenlijstje, maar het las als een bijsluiter.
   Een inkoper scant deze feiten, dus staat de waarde nu voorop en het
   label eronder, elk met een pictogram. De kaartjes komen een voor een
   binnen bij het scrollen; genoeg om te leven, niet genoeg om te storen.
   ====================================================================== */
.specvak{margin-top:24px;padding-top:22px;border-top:1px solid var(--lijn)}
.spec-kop{font-size:1.02rem;margin-bottom:14px}
.specs{display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,148px),1fr))}
.spec{
  position:relative;display:flex;flex-direction:column;gap:2px;
  padding:14px 15px;border-radius:var(--r-sm);overflow:hidden;
  background:var(--wit);border:1px solid var(--lijn);
  transition:border-color .2s,box-shadow .25s var(--ease),transform .25s var(--veer)}
.spec:hover{border-color:var(--lijn-2);box-shadow:var(--schaduw);transform:translateY(-2px)}
/* Een dun streepje links dat bij zweven volloopt. Subtiel genoeg om niet
   op te vallen tot je er met de muis langsgaat. */
.spec::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--marine);transform:scaleY(0);transform-origin:top;
  transition:transform .35s var(--ease)}
.spec:hover::before{transform:scaleY(1)}

.spec-ic{display:grid;place-items:center;width:30px;height:30px;margin-bottom:6px;
  border-radius:9px;background:var(--blauw-lt);color:var(--marine);
  transition:background .25s,color .25s,transform .3s var(--veer)}
.spec-ic svg{width:16px;height:16px}
.spec:hover .spec-ic{background:var(--marine);color:#fff;transform:rotate(-6deg) scale(1.06)}

.spec-waarde{font-size:1rem;letter-spacing:-.01em;line-height:1.25;
  overflow-wrap:anywhere}
.spec-label{font-size:.74rem;color:var(--zwak);text-transform:uppercase;
  letter-spacing:.06em}

.js-onthul .spec{opacity:0;transform:translateY(10px);
  animation:specIn .45s var(--ease) forwards;
  animation-delay:calc(var(--s,0) * 45ms)}
@keyframes specIn{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .js-onthul .spec{opacity:1;transform:none;animation:none}
  .spec,.spec-ic,.spec::before{transition:none}
}

/* ======================================================================
   Megamenu: alles zichtbaar, geen scrollbalk

   Elf rubrieken in een raster gaf rijen zo hoog als de langste kolom, dus
   overal gaten en een paneel dat niet paste. Met kolommen in plaats van
   een raster pakken de blokken zich vanzelf op, en dan past het geheel
   wel. De scrollbalk kan daarmee weg.
   ====================================================================== */
.mega{max-height:none;overflow:visible}
.mega-grid{
  display:block;
  columns:5;column-gap:16px}
.mega-kolom{
  break-inside:avoid;-webkit-column-break-inside:avoid;
  display:inline-block;width:100%;margin:0 0 4px}

@media (max-width:1180px){
  .mega{max-height:min(72vh,600px);overflow-y:auto}
  .mega-grid{columns:4}
}
@media (max-width:980px){
  .mega-grid{columns:3}
}

/* ======================================================================
   Productpagina: niets mag breder worden dan zijn kolom

   De pagina liep horizontaal buiten beeld. Oorzaak was een white-space:
   nowrap op een lange zin in de staffelduw, maar de reden dat het meteen
   de hele pagina meetrok is dat een raster-item standaard min-width:auto
   heeft: het krimpt niet onder zijn eigen min-content breedte, en duwt
   dus zijn kolom open.

   Hieronder staat dat voor de hele koopkolom uit. Het is een vangnet, niet
   een pleister: er komt hier nog tekst bij en dan hoeft niemand dit
   opnieuw uit te zoeken.
   ====================================================================== */
.product-info{min-width:0}
.koopblok{min-width:0}
.koopblok > *{min-width:0;max-width:100%}

.koop-optie{min-width:0;flex-wrap:wrap}
.ko-naam{min-width:0;overflow-wrap:anywhere}
.ko-prijs{white-space:nowrap}

.koop-prijsregel{min-width:0}
.kp-links,.kp-rechts{min-width:0}
.kp-per,.kp-totaal{white-space:nowrap}

.koop-volgende{min-width:0}
.kv-tekst{min-width:0}
.kv-tekst b,.kv-tekst span{overflow-wrap:anywhere}

.paletnoot{min-width:0}
.pn-tekst{overflow-wrap:anywhere}

.staffelvak{min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.margevak,.koop-zeker,.handelaarshint{min-width:0}
.margevak span,.koop-zeker span,.handelaarshint span{overflow-wrap:anywhere}

.specs{min-width:0}
.spec{min-width:0}
.spec-waarde,.spec-label{overflow-wrap:anywhere}

/* Op een smal scherm mag de prijs onder de naam vallen in plaats van
   ernaast te blijven duwen. */
@media (max-width:520px){
  .koop-optie{gap:8px 10px}
  .ko-prijs{margin-left:auto}
  .kp-per{font-size:1.35rem}
}

/* ======================================================================
   Tabbalk van het klantenportaal, met pictogrammen

   Op een telefoon schuift deze balk opzij. Aan een half afgesneden woord
   zie je niet waar je heen gaat, aan een icoon wel.
   ====================================================================== */
.tabbalk-ic a{display:inline-flex;align-items:center;gap:8px}
.tabbalk-ic svg{width:16px;height:16px;flex:none;opacity:.75}
.tabbalk-ic a.aan svg{opacity:1}
@media (max-width:640px){
  .tabbalk-ic{overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;flex-wrap:nowrap}
  .tabbalk-ic::-webkit-scrollbar{display:none}
  .tabbalk-ic a{white-space:nowrap;flex:none}
}

/* ======================================================================
   Waar staat mijn bestelling?

   Twee sporen, afhalen of leveren, met dezelfde stappen als het beheer
   ziet en dezelfde tekst als in de mail. Zo leest de klant nergens iets
   anders dan wat hij eerder heeft gelezen.
   ====================================================================== */
.volgvak{margin:0 0 20px;padding:18px 20px;border-radius:var(--r);
  background:var(--wit);border:1px solid var(--lijn);box-shadow:var(--schaduw)}
.vv-kop{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}
.vv-kop b{display:block;font-size:1.05rem;margin-bottom:3px}
.vv-kop p{margin:0;font-size:.86rem;line-height:1.5;color:var(--tekst-2);max-width:56ch}
.vv-ic{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:12px}
.vv-ic svg{width:22px;height:22px}
.vv-ok{background:var(--groen-lt);color:#0b6b3d}
.vv-blauw{background:var(--blauw-lt);color:var(--marine)}
.vv-let{background:var(--oranje-lt);color:#9a5a06}
.vv-mis{background:var(--rood-lt);color:#a12222}
.vv-soort{flex:none;align-self:flex-start;padding:5px 12px;border-radius:999px;
  background:var(--vlak-2);color:var(--tekst-2);font-size:.74rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em}

/* Het spoor zelf. De lijn loopt achter de bolletjes door; hij zit op de
   li's en niet op het spoor, anders steekt hij links en rechts uit. */
.vv-spoor{list-style:none;margin:0;padding:0;display:flex}
.vv-spoor li{position:relative;flex:1;display:flex;flex-direction:column;
  align-items:center;gap:8px;text-align:center;min-width:0}
.vv-spoor li::before{content:"";position:absolute;top:11px;left:-50%;width:100%;height:2px;
  background:var(--lijn)}
.vv-spoor li:first-child::before{display:none}
.vv-spoor li.klaar::before,.vv-spoor li.bezig::before{background:var(--groen)}
.vv-bol{position:relative;z-index:1;display:grid;place-items:center;
  width:24px;height:24px;border-radius:50%;flex:none;
  background:var(--wit);border:2px solid var(--lijn);color:#fff}
.vv-bol svg{width:12px;height:12px}
.vv-spoor li.klaar .vv-bol{background:var(--groen);border-color:var(--groen)}
.vv-spoor li.bezig .vv-bol{background:var(--wit);border-color:var(--groen);
  box-shadow:0 0 0 4px rgba(15,157,88,.18)}
.vv-spoor li.bezig .vv-bol::after{content:"";width:9px;height:9px;border-radius:50%;
  background:var(--groen);animation:vvpols 2.2s ease-out infinite}
@keyframes vvpols{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.72);opacity:.6}}
.vv-naam{font-size:.74rem;line-height:1.3;color:var(--zwak);overflow-wrap:anywhere}
.vv-spoor li.klaar .vv-naam,.vv-spoor li.bezig .vv-naam{color:var(--tekst);font-weight:600}

.vv-afhaal{display:flex;gap:13px;align-items:center;flex-wrap:wrap;margin-top:18px;
  padding:14px 16px;border-radius:var(--r-sm);
  background:linear-gradient(140deg,var(--groen-lt),var(--wit) 66%);
  border:1px solid #bfe6d2}
.vv-afhaal b{display:block;margin-bottom:3px}
.vv-afhaal p{margin:0;font-size:.84rem;line-height:1.5;color:var(--tekst-2)}
.vv-afhaal a{color:var(--blauw);font-weight:600}
.vv-afhaal > div{flex:1;min-width:0}
.vv-afhaal-ic{display:grid;place-items:center;width:36px;height:36px;flex:none;
  border-radius:10px;background:var(--wit);border:1px solid #bfe6d2;color:var(--groen)}
.vv-afhaal-ic svg{width:19px;height:19px}

@media (max-width:640px){
  .volgvak{padding:15px 16px}
  .vv-kop{flex-wrap:wrap}
  /* Onder elkaar op een telefoon: vijf stappen naast elkaar wordt vijf
     afgekapte woorden. */
  .vv-spoor{flex-direction:column;gap:2px;align-items:flex-start}
  .vv-spoor li{flex-direction:row;align-items:center;gap:11px;text-align:left;
    width:100%;padding:5px 0}
  .vv-spoor li::before{top:-50%;left:11px;width:2px;height:100%}
  .vv-naam{font-size:.85rem}
}
@media (prefers-reduced-motion:reduce){
  .vv-spoor li.bezig .vv-bol::after{animation:none}
}

/* Foto bij een bestelregel in het portaal. */
.br-foto{width:56px}
.br-foto img{width:46px;height:46px;object-fit:contain;border-radius:8px;
  background:var(--vlak-2);border:1px solid var(--lijn);padding:3px}

/* Sterretje bij de lijst die nieuwe artikelen opvangt. */
.lb-ster{font-style:normal;color:var(--oranje);font-size:.85rem;line-height:1}
.lb-tab.aan .lb-ster{color:#ffcf6b}

/* ==========================================================================
   Retour, terugbetaling en herroeping
   Eigen vormtaal: het is geen winkelblok maar een dossier. Rustig, veel wit,
   en overal zichtbaar waar het nu staat. Niemand komt hier voor zijn plezier.
   ========================================================================== */

/* --- het spoor van een aanmelding ---------------------------------------- */
/* Vijf bolletjes met een lijn ertussen. De lijn hangt aan ::before van de
   li en niet aan een los element, want dan telt hij niet mee in de grid en
   kan hij nooit een kolom breed maken. */
.retspoor{list-style:none;display:flex;gap:0;margin:0 0 20px;padding:16px 18px;
  background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);
  box-shadow:var(--schaduw)}
.retstap{flex:1 1 0;min-width:0;position:relative;display:flex;flex-direction:column;
  align-items:center;gap:8px;text-align:center;padding:0 4px}
.retstap::before{content:"";position:absolute;top:15px;right:50%;width:100%;height:2px;
  background:var(--lijn);z-index:0}
.retstap:first-child::before{display:none}
.retstap.gedaan::before,.retstap.nu::before{background:var(--blauw)}
.rs-bol{position:relative;z-index:1;display:grid;place-items:center;width:31px;height:31px;
  flex:none;border-radius:999px;background:var(--vlak-2);border:2px solid var(--lijn);
  color:var(--zwak);font-size:.8rem;font-weight:700}
.rs-bol svg{width:15px;height:15px}
.retstap.gedaan .rs-bol{background:var(--blauw);border-color:var(--blauw);color:var(--wit)}
.retstap.nu .rs-bol{background:var(--wit);border-color:var(--blauw);color:var(--blauw);
  box-shadow:0 0 0 4px var(--blauw-lt)}
.rs-naam{font-size:.76rem;line-height:1.3;color:var(--zwak);overflow-wrap:anywhere}
.retstap.gedaan .rs-naam{color:var(--tekst-2)}
.retstap.nu .rs-naam{color:var(--blauw);font-weight:650}

.ret-vakken{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:16px;
  align-items:start}

/* --- berichten en kaders in een dossier ---------------------------------- */
.ret-bericht{margin-top:14px;padding:13px 15px;border-radius:var(--r-sm);
  background:var(--blauw-zacht);border:1px solid var(--blauw-lt);border-left:3px solid var(--blauw)}
.ret-bericht.licht{background:var(--vlak-2);border-color:var(--lijn);border-left-color:var(--lijn-2)}
.ret-bericht b{display:block;font-size:.79rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--zwak);margin-bottom:4px}
.ret-bericht p{margin:0;font-size:.88rem;line-height:1.55}

.ret-adres{margin-top:14px;padding:14px 16px;border-radius:var(--r-sm);
  background:var(--groen-lt);border:1px solid #bfe6d2}
.ret-adres b{display:block;margin-bottom:5px;font-size:.86rem}
.ret-adres p{margin:0 0 6px;font-size:.87rem;line-height:1.55}
.ret-adres p:last-child{margin:0}

.ret-terug{margin-top:14px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:14px 16px;border-radius:var(--r-sm);background:var(--groen-lt);
  border:1px solid #bfe6d2}
.rt-bedrag{font-size:1.4rem;font-weight:800;letter-spacing:-.02em;color:#0b6b3d}
.rt-tekst{font-size:.87rem;color:var(--tekst-2)}

.ret-intrek{margin-top:16px;padding-top:14px;border-top:1px solid var(--lijn)}

.ret-lijst{display:grid;gap:0;margin:16px 0 0;font-size:.87rem}
.ret-lijst > div{display:flex;justify-content:space-between;gap:16px;
  padding:9px 0;border-bottom:1px solid var(--lijn)}
.ret-lijst > div:last-child{border-bottom:0}
.ret-lijst dt{color:var(--zwak)}
.ret-lijst dd{margin:0;font-weight:650;text-align:right;overflow-wrap:anywhere}

/* --- de drie stappen boven het formulier --------------------------------- */
.ret-uitleg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
  margin-bottom:18px}
.ru-stap{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;
  background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);
  box-shadow:var(--schaduw)}
.ru-nr{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:999px;
  background:var(--blauw);color:var(--wit);font-size:.8rem;font-weight:700}
.ru-stap b{display:block;font-size:.88rem;margin-bottom:2px}
.ru-stap p{margin:0;font-size:.8rem;line-height:1.5;color:var(--zwak)}

/* --- de regels die je kunt aanvinken ------------------------------------- */
.retregels{display:grid;gap:9px;margin-top:14px}
.retregel{display:grid;grid-template-columns:auto 52px minmax(0,1fr) auto;gap:12px;
  align-items:center;padding:11px 14px;border:1px solid var(--lijn);border-radius:var(--r-sm);
  background:var(--wit);cursor:pointer;transition:border-color .16s var(--ease),
  background .16s var(--ease),box-shadow .16s var(--ease)}
.retregel:hover{border-color:var(--lijn-2)}
.retregel input[type="checkbox"]{position:absolute;opacity:0;width:0;height:0}
.rr-vink{display:grid;place-items:center;width:21px;height:21px;flex:none;border-radius:6px;
  border:2px solid var(--lijn-2);background:var(--wit);color:transparent;
  transition:all .16s var(--ease)}
.rr-vink svg{width:13px;height:13px}
.retregel:has(input:checked){border-color:var(--blauw);background:var(--blauw-zacht);
  box-shadow:0 0 0 1px var(--blauw)}
.retregel:has(input:checked) .rr-vink{background:var(--blauw);border-color:var(--blauw);
  color:var(--wit)}
.retregel input:focus-visible + .rr-vink{outline:2px solid var(--blauw);outline-offset:2px}
.rr-beeld{display:grid;place-items:center;width:52px;height:52px;flex:none;border-radius:8px;
  background:var(--vlak-2);border:1px solid var(--lijn);color:var(--zwak);overflow:hidden}
.rr-beeld img{width:100%;height:100%;object-fit:contain;padding:4px}
.rr-beeld svg{width:22px;height:22px}
.rr-tekst{min-width:0;display:grid;gap:1px}
.rr-tekst b{font-size:.9rem;overflow-wrap:anywhere}
.rr-gemeld{color:var(--oranje)}
.rr-aantal{display:flex;align-items:center;gap:8px;flex:none}
.rr-aantal input{width:66px;padding:8px 10px;text-align:center;font-weight:700;
  border:1px solid var(--lijn-2);border-radius:var(--r-xs);background:var(--wit)}
.rr-aantal input:focus{outline:0;border-color:var(--blauw);box-shadow:0 0 0 3px var(--blauw-lt)}
/* Een regel die al helemaal aangemeld is blijft staan, maar duidelijk uit.
   Weghalen zou de klant laten denken dat hij hem vergeten was. */
.retregel.op{opacity:.55;cursor:default;background:var(--vlak-2)}
.retregel.op .rr-vink{border-style:dashed}

/* --- keuzepillen voor reden en wens -------------------------------------- */
.retkeuzes{display:flex;flex-wrap:wrap;gap:8px}
.retkeuzes.breed{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.retkeuze{position:relative;display:block}
.retkeuze input{position:absolute;opacity:0;width:0;height:0}
.retkeuze span{display:block;padding:9px 15px;border-radius:999px;border:1px solid var(--lijn-2);
  background:var(--wit);font-size:.85rem;font-weight:600;color:var(--tekst-2);cursor:pointer;
  text-align:center;transition:all .16s var(--ease)}
.retkeuze span:hover{border-color:var(--blauw);color:var(--blauw)}
.retkeuze input:checked + span{background:var(--blauw);border-color:var(--blauw);color:var(--wit)}
.retkeuze input:focus-visible + span{outline:2px solid var(--blauw);outline-offset:2px}

/* --- het wettelijke kader ------------------------------------------------ */
.ret-wet,.herroep-wet{display:flex;gap:14px;align-items:flex-start;margin:16px 0;
  padding:15px 17px;border-radius:var(--r);background:var(--blauw-zacht);
  border:1px solid var(--blauw-lt)}
.herroep-wet{margin-bottom:20px}
.ret-wet b,.herroep-wet b{display:block;font-size:.92rem;margin-bottom:4px}
.ret-wet p,.herroep-wet p{margin:0 0 7px;font-size:.85rem;line-height:1.55;color:var(--tekst-2)}
.ret-wet p:last-child,.herroep-wet p:last-child{margin:0}
.ret-wet a,.herroep-wet a{color:var(--blauw);font-weight:600;text-decoration:underline}
.hw-ic{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:11px;
  background:var(--wit);border:1px solid var(--blauw-lt);color:var(--blauw)}
.hw-ic svg{width:20px;height:20px}
.herroep-wet > div{min-width:0}

.ret-form .vak + .vak,.herroep-form .vak + .vak{margin-top:14px}
.ret-versturen,.herroep-slot{display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  margin-top:16px;padding:16px 18px;background:var(--wit);border:1px solid var(--lijn);
  border-radius:var(--r);box-shadow:var(--schaduw)}
.herroep-slot{flex-direction:column;align-items:stretch}
.herroep-slot p{margin:0}
.herroep-slot .btn{justify-self:start}

/* --- de bestellingen waar je iets voor kunt aanmelden -------------------- */
.retkandidaten{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:10px;margin-top:12px}
.retkandidaat{display:grid;gap:2px;padding:13px 15px;border:1px solid var(--lijn);
  border-radius:var(--r-sm);background:var(--wit);transition:all .16s var(--ease)}
.retkandidaat:hover{border-color:var(--blauw);box-shadow:var(--schaduw-op);transform:translateY(-1px)}
.rk-nr{font-weight:700;font-size:.9rem}
.rk-datum,.rk-rest{font-size:.77rem;color:var(--zwak)}
.rk-bedrag{font-size:.86rem;font-weight:650;color:var(--blauw)}
.rk-rest{color:var(--oranje)}

/* --- het facturatieadres bij het afrekenen ------------------------------- */
.factuurkaart{display:flex;gap:13px;align-items:flex-start;margin-top:12px;
  padding:13px 15px;border-radius:var(--r-sm);background:var(--vlak-2);
  border:1px solid var(--lijn)}
.fk-ic{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:9px;
  background:var(--wit);border:1px solid var(--lijn);color:var(--blauw)}
.fk-ic svg{width:18px;height:18px}
.fk-tekst{min-width:0;font-size:.86rem;line-height:1.55}
.fk-tekst b{display:block;margin-bottom:2px}
.fk-tekst p{margin:0;color:var(--tekst-2)}

@media (max-width:900px){
  .ret-vakken{grid-template-columns:minmax(0,1fr)}
  .ret-uitleg{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  /* Vijf bolletjes naast elkaar op een telefoon wordt vijf afgekapte
     woorden. Onder elkaar met de lijn links leest wel. */
  .retspoor{flex-direction:column;gap:2px;padding:14px 16px}
  .retstap{flex-direction:row;align-items:center;gap:11px;text-align:left;width:100%;
    padding:5px 0}
  .retstap::before{top:-50%;left:15px;right:auto;width:2px;height:100%}
  .rs-naam{font-size:.85rem}

  /* Het beeld valt weg en het aantal zakt naar een eigen rij: anders is er
     voor de naam nog een kolom van dertig pixels over. */
  .retregel{grid-template-columns:auto minmax(0,1fr);gap:10px 11px;position:relative}
  .rr-beeld{display:none}
  .rr-aantal{grid-column:2;justify-content:flex-start}
  .retkeuzes.breed{grid-template-columns:minmax(0,1fr)}
  .ret-versturen .btn,.herroep-slot .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .retkandidaat:hover{transform:none}
}

/* Doorverwijzing van de tekstpagina naar het echte formulier. */
.herroep-online{display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  margin:16px 0 22px;padding:16px 18px;border-radius:var(--r);
  background:var(--blauw-zacht);border:1px solid var(--blauw-lt)}
.herroep-online > div{flex:1 1 260px;min-width:0}
.herroep-online b{display:block;font-size:.95rem;margin-bottom:3px}
.herroep-online p{margin:0;font-size:.86rem;line-height:1.55;color:var(--tekst-2)}

/* ==========================================================================
   De strook voor een handelaar die op goedkeuring wacht
   Warm oranje, want het is geen fout maar een tussenstand. Hij hangt onder
   de kop en schuift gewoon mee met de pagina: vastzetten zou betekenen dat
   hij op een telefoon een derde van het scherm inneemt.
   ========================================================================== */
.wachtstrook{background:linear-gradient(180deg,#fff6ea,#fdf1e3);
  border-bottom:1px solid #f6d9b4;overflow:hidden;
  transition:height .24s var(--ease),opacity .2s var(--ease)}
.wachtstrook.weg{height:0 !important;opacity:0}
.ws-in{display:flex;align-items:center;gap:13px;padding:11px 0}
.ws-ic{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:9px;
  background:var(--wit);border:1px solid #f0cfa4;color:#b56f0a}
.ws-ic svg{width:17px;height:17px}
.ws-tekst{flex:1;min-width:0;margin:0;font-size:.84rem;line-height:1.5;color:#7d4c05}
.ws-tekst b{color:#5f3903}
.ws-meer{flex:none;padding:7px 14px;border-radius:999px;background:var(--wit);
  border:1px solid #f0cfa4;color:#8a5504;font-size:.8rem;font-weight:650;white-space:nowrap;
  transition:all .16s var(--ease)}
.ws-meer:hover{background:#8a5504;border-color:#8a5504;color:var(--wit)}
.ws-weg{flex:none;display:grid;place-items:center;width:28px;height:28px;padding:0;
  border:0;border-radius:8px;background:transparent;color:#b08046;cursor:pointer;
  transition:all .16s var(--ease)}
.ws-weg svg{width:14px;height:14px}
.ws-weg:hover{background:rgba(176,128,70,.14);color:#7d4c05}

@media (max-width:760px){
  /* Op een telefoon past de knop er niet naast; de tekst is het punt. */
  .ws-in{align-items:flex-start;gap:10px;padding:10px 0;flex-wrap:wrap}
  .ws-ic{width:28px;height:28px}
  .ws-tekst{flex:1 1 100%;order:3;font-size:.8rem}
  .ws-meer{order:2;margin-left:auto;padding:6px 12px;font-size:.76rem}
}
@media (prefers-reduced-motion:reduce){
  .wachtstrook{transition:none}
}

/* Een blauwe variant van het statusvak: iets wat je moet invullen is geen
   fout. Rood zou de klant laten denken dat er iets misging met zijn account. */
.statusvak.info{border-color:#c5dafb;
  background:linear-gradient(140deg,var(--blauw-lt),var(--wit) 62%)}
.statusvak.info .sv-ic{background:#dbe6fb;color:var(--blauw)}
.statusvak.info .sv-pil{background:#dbe6fb;color:var(--blauw)}
.statusvak .btn{flex:none;align-self:center}

/* Het spoortje naast de wachtstand: waar staan we, en wat komt er nog.
   Drie regels zeggen meer dan de zin "in behandeling". */
.sv-zij{flex:none;display:grid;gap:10px;justify-items:flex-end;align-self:center}
.sv-spoor{list-style:none;margin:0;padding:0;display:grid;gap:5px;text-align:right}
.sv-spoor li{position:relative;padding-right:17px;font-size:.76rem;color:var(--zwak);
  line-height:1.35;white-space:nowrap}
.sv-spoor li::after{content:"";position:absolute;right:0;top:5px;width:8px;height:8px;
  border-radius:999px;background:var(--wit);border:2px solid var(--lijn-2)}
.sv-spoor li.gedaan{color:var(--tekst-2)}
.sv-spoor li.gedaan::after{background:#0b6b3d;border-color:#0b6b3d}
.sv-spoor li.nu{color:#9a5a06;font-weight:650}
.sv-spoor li.nu::after{background:var(--oranje);border-color:var(--oranje);
  box-shadow:0 0 0 3px #fdeada}

@media (max-width:640px){
  .sv-zij{justify-items:flex-start;width:100%}
  .sv-spoor{text-align:left}
  .sv-spoor li{padding:0 0 0 17px}
  .sv-spoor li::after{right:auto;left:0}
  .statusvak .btn{width:100%;justify-content:center}
}

/* ==========================================================================
   Een knop draagt altijd zijn eigen kleur
   --------------------------------------------------------------------------
   Dit staat helemaal onderaan en dat is met opzet. Er zijn in dit bestand
   tientallen blokken die de kleur zetten van elke a, span, b of p die erin
   staat: .info-hulp span, .statusvak a, .voet a, .b2b-band p, en zo verder.
   Zet je zo'n blok op een gekleurde achtergrond en leg je er een knop in,
   dan pakt die knop of de tekst erin die kleur over en krijg je wit op wit
   of donkerblauw op donkerblauw. Dat is drie keer gebeurd:

   - de belknop in .info-hulp op elke informatiepagina was een leeg wit vlak,
     want .info-hulp span verfde de tekst in de knop wit
   - "Adres invullen" in het klantenportaal was donkerblauw op donkerblauw,
     want .statusvak a verfde de knop zelf blauw

   Een knop is geen tekst in een blok maar een eigen ding met een eigen vlak.
   Dus: wat er binnen een .btn staat erft van de knop, nooit van de omgeving,
   en elke knopsoort zet zijn eigen tekstkleur hier nog een keer vast. Een
   blok dat een knop echt anders wil hebben, gebruikt twee klassen
   (.info-hulp .btn-blauw) en wint daarmee alsnog op specificiteit.
   ========================================================================== */
.btn span,.btn b,.btn svg{color:inherit}
.btn span,.btn b{font-size:inherit;font-weight:inherit}

/* Bewust zonder :visited. Dat leek veiliger maar telt mee voor de
   specificiteit, en dan wint deze regel van .info-hulp .btn-blauw en staat de
   belknop weer wit op wit. Een auteursregel wint sowieso van de :visited-stijl
   van de browser, dus hij is niet nodig. */
a.btn-blauw,button.btn-blauw{color:#fff}
a.btn-groen,button.btn-groen{color:#fff}
a.btn-licht,button.btn-licht{color:var(--tekst)}
a.btn-wit,button.btn-wit{color:var(--blauw-dk)}
a.btn-zacht,button.btn-zacht{color:var(--tekst-2)}
a.btn-link,button.btn-link{color:var(--blauw)}

/* De uitzonderingen die er al waren, opnieuw bevestigd nu de regels hierboven
   erlangs komen. Twee klassen, dus ze winnen op de enkele hierboven. */
.info-hulp .btn-blauw{color:var(--blauw-dk)}
.info-hulp .btn-licht{color:#fff}
.voet-strook .btn-wit{color:var(--marine-dp)}

/* ==========================================================================
   Groothandelsgereedschap
   Houdbaarheid, leverzones, nalevering en vaste bestellingen. Allemaal
   blokken die informatie geven bij een beslissing, dus ze zijn rustig van
   vorm: geen kaartjes die om aandacht vragen, wel duidelijk afgebakend van
   de tekst eromheen.
   ========================================================================== */

/* --- houdbaarheid -------------------------------------------------------- */
.thtvak{display:flex;gap:13px;align-items:flex-start;margin-top:12px;
  padding:13px 15px;border-radius:var(--r-sm);border:1px solid var(--lijn);
  background:var(--vlak-2)}
.thtvak.kort,.thtvak.vandaag{background:var(--oranje-lt);border-color:#f6d9b4}
.thtvak.over{background:var(--rood-lt);border-color:#f3c2c2}
.tv-ic{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:9px;
  background:var(--wit);border:1px solid var(--lijn);color:var(--tekst-2)}
.thtvak.kort .tv-ic,.thtvak.vandaag .tv-ic{color:#9a5a06;border-color:#f0cfa4}
.thtvak.over .tv-ic{color:#a12222;border-color:#f3c2c2}
.tv-ic svg{width:18px;height:18px}
.thtvak > div{min-width:0}
.thtvak b{display:block;font-size:.9rem;margin-bottom:3px}
.thtvak p{margin:0 0 4px;font-size:.82rem;line-height:1.5;color:var(--tekst-2)}
.thtvak p:last-child{margin:0}

/* --- leverzones bij het afrekenen ---------------------------------------- */
.zonevak{margin:16px 0;padding:15px 17px;border-radius:var(--r);
  background:var(--blauw-zacht);border:1px solid var(--blauw-lt)}
.zonevak.leeg{background:var(--vlak-2);border-color:var(--lijn)}
.zonevak.leeg p{margin:0;font-size:.86rem;line-height:1.55;color:var(--tekst-2)}
.zv-kop{display:flex;gap:13px;align-items:flex-start}
.zv-ic{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:10px;
  background:var(--wit);border:1px solid var(--blauw-lt);color:var(--blauw)}
.zv-ic svg{width:19px;height:19px}
.zv-kop > div{min-width:0}
.zv-kop b{display:block;font-size:.93rem;margin-bottom:2px}
.zv-kop p{margin:0;font-size:.83rem;line-height:1.5;color:var(--tekst-2)}
.zv-dagen{margin:14px 0 0;padding:0;border:0}
.zv-dagen legend{font-size:.8rem;font-weight:650;color:var(--tekst-2);padding:0 0 8px}
.zv-dag{position:relative;display:inline-block;margin:0 7px 7px 0}
.zv-dag input{position:absolute;opacity:0;width:0;height:0}
.zv-dag > span{display:grid;gap:1px;padding:9px 15px;border-radius:var(--r-sm);
  background:var(--wit);border:1px solid var(--lijn-2);cursor:pointer;text-align:left;
  transition:all .16s var(--ease)}
.zv-dag b{font-size:.86rem}
.zv-dag > span:hover{border-color:var(--blauw)}
.zv-dag input:checked + span{background:var(--blauw);border-color:var(--blauw);color:var(--wit)}
.zv-dag input:checked + span .zwak{color:rgba(255,255,255,.8)}
.zv-dag input:focus-visible + span{outline:2px solid var(--blauw);outline-offset:2px}

.bo-nalever{margin-top:12px;padding:12px 14px;border-radius:var(--r-sm);
  background:var(--oranje-lt);border:1px solid #f6d9b4}
.bo-nalever > b{display:block;font-size:.86rem;color:#7d4c05;margin-bottom:6px}
.bo-nalever ul{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:4px;font-size:.83rem}
.bo-nalever p{margin:0}

/* --- de outletpagina ----------------------------------------------------- */
.outlet-uitleg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
  margin-bottom:20px}
.ou-punt{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;background:var(--wit);
  border:1px solid var(--lijn);border-radius:var(--r);box-shadow:var(--schaduw)}
.ou-ic{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:9px;
  background:var(--oranje-lt);color:#9a5a06}
.ou-ic svg{width:17px;height:17px}
.ou-punt b{display:block;font-size:.88rem;margin-bottom:2px}
.ou-punt p{margin:0;font-size:.8rem;line-height:1.5;color:var(--zwak)}

.rooster{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.outletkaart{display:flex;flex-direction:column;background:var(--wit);border:1px solid var(--lijn);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--schaduw);
  transition:box-shadow .22s var(--ease),transform .22s var(--veer)}
.outletkaart:hover{box-shadow:var(--schaduw-op);transform:translateY(-3px)}
.ok-beeld{position:relative;display:grid;place-items:center;height:150px;
  background:radial-gradient(220px 110px at 50% 10%,#fff,var(--vlak-2) 85%)}
.ok-beeld img{max-width:78%;max-height:82%;object-fit:contain}
.ok-vlag{position:absolute;top:10px;left:10px;padding:5px 11px;border-radius:999px;
  background:var(--accent);color:#fff;font-size:.8rem;font-weight:800;
  box-shadow:0 2px 8px rgba(224,26,43,.32)}
.ok-tekst{display:grid;gap:7px;padding:13px 15px 15px;align-content:start;flex:1}
.ok-merk{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--zwak)}
.ok-tekst h2{font-size:.94rem;line-height:1.3}
.ok-tht{justify-self:start;font-size:.74rem}
.ok-prijs{margin:0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ok-prijs b{font-size:1.1rem;color:var(--marine)}
.ok-prijs s{color:var(--zwak);font-size:.85rem}
.ok-tekst .btn{margin-top:4px;justify-self:start}

/* --- vaste bestellingen -------------------------------------------------- */
.vast-kop{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:16px;padding:16px 18px;border-radius:var(--r);
  background:var(--wit);border:1px solid var(--lijn);box-shadow:var(--schaduw)}
.vk-tekst{min-width:0}
.vk-tekst h2{font-size:1.1rem;margin-bottom:3px}
.vk-tekst p{margin:0;font-size:.86rem;color:var(--tekst-2)}
.vastregels{display:grid;gap:9px;margin-top:12px}
.vastregel{display:grid;grid-template-columns:46px minmax(0,1fr) auto auto auto;gap:11px;
  align-items:center;padding:10px 12px;border:1px solid var(--lijn);border-radius:var(--r-sm)}
.vastregel.op{opacity:.55;background:var(--vlak-2)}
.vr-beeld{display:grid;place-items:center;width:46px;height:46px;border-radius:8px;
  background:var(--vlak-2);border:1px solid var(--lijn);overflow:hidden}
.vr-beeld img{width:100%;height:100%;object-fit:contain;padding:3px}
.vr-tekst{min-width:0;display:grid;gap:1px}
.vr-tekst b{font-size:.88rem;overflow-wrap:anywhere}
.vr-prijs{font-weight:700;font-size:.9rem;color:var(--marine);white-space:nowrap}
.vr-aantal{width:62px;padding:8px 9px;text-align:center;font-weight:700;
  border:1px solid var(--lijn-2);border-radius:var(--r-xs)}
.vr-weg{position:relative;display:grid;place-items:center;width:30px;height:30px;
  border-radius:8px;background:var(--vlak-2);color:var(--zwak);cursor:pointer;
  font-size:1.05rem;line-height:1}
.vr-weg input{position:absolute;opacity:0;width:0;height:0}
.vr-weg:has(input:checked){background:var(--rood-lt);color:#a12222;
  box-shadow:0 0 0 1px #f3c2c2 inset}
.vast-waarschuwing{margin-top:16px;padding:13px 15px;border-radius:var(--r-sm);
  background:var(--blauw-zacht);border:1px solid var(--blauw-lt)}
.vast-waarschuwing b{display:block;font-size:.87rem;margin-bottom:3px}
.vast-waarschuwing p{margin:0;font-size:.82rem;line-height:1.55;color:var(--tekst-2)}

/* Een pil in het hoofdmenu die om aandacht vraagt zonder te schreeuwen. */
.pilknop-actie{background:var(--oranje-lt);border-color:#f0cfa4;color:#8a5504}
.pilknop-actie:hover{background:#9a5a06;border-color:#9a5a06;color:#fff}

@media (max-width:900px){
  .outlet-uitleg{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  /* Het beeld weg en de regels in twee rijen: anders blijft er voor de naam
     dertig pixels over. Zelfde ingreep als bij de retourregels. */
  .vastregel{grid-template-columns:minmax(0,1fr) auto auto;gap:9px}
  .vr-beeld{display:none}
  .vr-prijs{grid-column:1;justify-self:start}
  .vast-kop .btn{width:100%;justify-content:center}
  .zv-dag,.zv-dag > span{display:block}
}
@media (prefers-reduced-motion:reduce){
  .outletkaart:hover{transform:none}
}

/* Vaste bestelling maken vanuit de winkelwagen, en de nalevermelding daar. */
.mt-vast{margin-top:12px;border-top:1px solid var(--lijn);padding-top:12px}
.mt-vast > summary{display:flex;gap:9px;align-items:center;cursor:pointer;list-style:none;
  font-size:.84rem;font-weight:650;color:var(--blauw)}
.mt-vast > summary::-webkit-details-marker{display:none}
.mt-vast > summary svg{width:16px;height:16px;flex:none}
.mt-vast > summary:hover{color:var(--blauw-dk)}
.mtv-body{margin-top:12px;display:grid;gap:11px}
.mtv-body p{margin:0}
.mt-nalever{margin-top:12px;padding:12px 14px;border-radius:var(--r-sm);
  background:var(--oranje-lt);border:1px solid #f6d9b4}
.mt-nalever > b{display:block;font-size:.85rem;color:#7d4c05;margin-bottom:6px}
.mt-nalever ul{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:4px;font-size:.82rem}
.mt-nalever p{margin:0}

/* De voortgangsbalk naar gratis levering. Geen animatie op de breedte: hij
   verandert alleen bij een herlading, en een balk die dan alsnog wegkruipt
   leest als een fout. */
.zonevak.gratis{background:var(--groen-lt);border-color:#bfe6d2}
.zonevak.gratis .zv-ic{border-color:#bfe6d2;color:#0b6b3d}
.zv-balk{height:7px;margin-top:12px;border-radius:999px;background:var(--wit);
  border:1px solid var(--lijn);overflow:hidden}
.zv-balk span{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--blauw),#3a86ff)}

.mt-gratis{margin-top:12px;padding:11px 13px;border-radius:var(--r-sm);
  background:var(--vlak-2);border:1px solid var(--lijn)}
.mt-gratis.klaar{background:var(--groen-lt);border-color:#bfe6d2;color:#0b6b3d}
.mt-gratis p{margin:0}
.mtg-balk{height:7px;margin-bottom:8px;border-radius:999px;background:var(--wit);
  border:1px solid var(--lijn);overflow:hidden}
.mtg-balk span{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--blauw),#3a86ff)}

/* ------------------------------------------------ meer dan een merk of rubriek
   Een artikel kan onder verschillende merken en categorieen hangen. Op de
   productpagina staan die op een rij; met een gewone flexrij blijven de
   bestaande .kaart-merk-pillen precies zoals ze zijn en breken ze netjes af
   op een smal scherm. */
.merkrij{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:6px}
.ookonder{display:block;margin:-2px 0 10px;font-size:.86rem;color:var(--tekst-2)}
.ookonder a{color:var(--blauw-dk);text-decoration:underline;text-underline-offset:2px}
.ookonder a:hover{color:var(--accent)}

/* =======================================================================
   Snelfilters boven het assortiment
   =======================================================================
   Een rij knoppen met de hoofdrubrieken, en daaronder de onderdelen van de
   rubriek die openstaat. Komt uit de categorieboom in de database, dus een
   nieuwe rubriek uit het beheer staat er vanzelf tussen.

   Op een smal scherm schuift de rij horizontaal in plaats van door te
   lopen over vier regels: dan blijft de eerste rij producten in beeld.
   ======================================================================= */
.snelfilters{margin:0 0 20px}
.sf-rij{display:flex;flex-wrap:wrap;gap:8px}
.sf-onder{margin-top:9px;padding-top:9px;border-top:1px dashed var(--lijn)}
.sf-knop{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:999px;
  background:var(--wit);border:1px solid var(--lijn-2);
  color:var(--tekst-2);font-size:.86rem;font-weight:600;line-height:1;
  text-decoration:none;white-space:nowrap;
  transition:border-color .18s,color .18s,background .18s,transform .18s var(--veer)}
.sf-knop:hover{border-color:var(--marine);color:var(--marine);transform:translateY(-1px)}
.sf-knop.aan{background:var(--marine);border-color:var(--marine);color:#fff}
.sf-knop.aan:hover{color:#fff}
.sf-sub{padding:7px 12px;font-size:.82rem;font-weight:500}
.sf-extra{border-style:dashed}
.sf-n{
  display:inline-block;min-width:19px;padding:1px 5px;border-radius:999px;
  background:var(--vlak-2);color:var(--zwak);
  font-size:.7rem;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}
.sf-knop.aan .sf-n{background:rgba(255,255,255,.2);color:#fff}

@media (max-width:720px){
  .sf-rij{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .sf-rij::-webkit-scrollbar{display:none}
}

/* De knoppen op een outlettegel: bestellen en bekijken naast elkaar. */
.ok-knoppen{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ok-knoppen .btn{flex:1 1 auto;justify-content:center}

/* ======================================================================
   De kop op een breed scherm, derde opzet

   Er stonden vijf dingen naast elkaar in een pil van hoogstens 1340 pixels,
   en maar een ervan mocht krimpen: de zoekbalk. Gevolg was een zoekveld van
   honderd pixels waar "Zoek een produ" nog net in paste, terwijl de
   knoppenrij ernaast onaangeroerd 628 pixels opeiste. Een groothandelsklant
   zoekt op naam; dat veld hoort het breedste te zijn.

   Nu krijgt de zoekbalk een echte basisbreedte en valt er van rechts naar
   links een knop weg zodra het krap wordt. Alles wat wegvalt staat ook in de
   lade onder Assortiment en in het mobiele menu, dus er verdwijnt niets.
   ====================================================================== */
/* De pil mag breder dan de inhoud eronder. Hij houdt vijf dingen naast
   elkaar en de inhoud houdt kolommen; die twee hebben niet dezelfde breedte
   nodig. Op 1340 pixels bleef er na het merk, de knoppen en de iconen zo
   weinig over dat de zoekbalk niet meer te gebruiken was. */
@media (min-width:1400px){
  .kop{width:min(100% - clamp(20px,4vw,64px),1480px)}
}
.zoek{flex:1 1 clamp(240px,24vw,440px);min-width:210px}

/* Deze twee blijven altijd staan: Producten is de weg naar het assortiment
   en Handelaars is waar de doelgroep van deze winkel op klikt. Ze hebben
   geen eigen opmaak nodig, maar wel een regel: elke classnaam in de markup
   hoort een css-regel te hebben, anders zie je bij de controle niet meer
   welke naam een marker is en welke een vergeten stijl. */
.pil-nav .pk-producten,.pil-nav .pk-handelaars{display:inline-flex}

@media (max-width:1460px){ .pil-nav .pk-snel{display:none} }
@media (max-width:1240px){ .pil-nav .pk-merken{display:none} }
@media (max-width:1150px){ .pil-nav .pk-outlet{display:none} }

/* Het woordmerk mag nooit afbreken: "D&C" op de ene regel en "Food" op de
   volgende leest als twee merken. */
.merk-woordmerk b,.merk-woordmerk em{white-space:nowrap}

/* ======================================================================
   Megamenu, derde opzet: een raster van vier in plaats van kolommen

   Met elf rubrieken werd het een css-kolommenlayout, want in een raster
   werd elke rij zo hoog als de langste kolom. Sinds er zeven rubrieken
   zijn keert dat argument zich om: kolommen laten de blokken op eigen
   hoogte beginnen, en dan staat Verpakking bovenaan terwijl Water
   halverwege begint. Dat zijn de gaten die je op het scherm ziet.

   Een echt raster van vier zet alle koppen van een rij op dezelfde lijn.
   Zeven rubrieken plus het contactblok is precies twee volle rijen.
   ====================================================================== */
.mega{width:min(94vw,1120px)}
.mega-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  align-items:start;
  columns:auto}                     /* de kolommenlayout hierboven uitzetten */
.mega-kolom{display:block;width:auto;margin:0;break-inside:auto;
  background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.08)}
.mega-kolom:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.16)}

/* Ruim genoeg dat twee volle rijen plus de voetknoppen erin passen zonder
   scrollbalk. Op 660 pixels was het net te krap en stond er op elk scherm
   een balkje in het menu; dat leest als "hier zit meer" terwijl alles er al
   staat. Is het scherm echt laag, dan scrollt hij alsnog liever zelf dan
   over de pagina eronder te vallen. */
.mega{max-height:min(84vh,780px);overflow-y:auto}

/* Het blok dat het gat rechtsonder vult. Geen rubriek, dus geen hoverkleur
   en geen lijstopmaak. */
.mega-extra{
  display:flex;flex-direction:column;gap:7px;
  padding:14px 15px 15px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12)}
.mega-extra:hover{background:rgba(255,255,255,.08)}
.mega-extra b{font-size:.9rem;color:#fff;letter-spacing:-.01em}
.mega-extra p{font-size:.8rem;color:#b9cbe6;line-height:1.5;margin:0}
.mega-extra .me-bel{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  margin-top:4px;padding:8px 14px;border-radius:999px;
  background:#fff;color:var(--marine);font-size:.86rem;font-weight:700;
  transition:transform .2s var(--veer),box-shadow .2s}
.mega-extra .me-bel:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.25)}
.mega-extra .me-link{font-size:.8rem;color:#c2d3ee;text-decoration:underline}
.mega-extra .me-link:hover{color:#fff}

@media (max-width:1180px){
  .mega-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:980px){
  .mega-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ==========================================================================
   Fotobanner op de productpagina
   Een artikel heeft vaak meer dan een foto: het blik van voren, de doos
   waarin geleverd wordt en het etiket. Het hoofdbeeld houdt exact de vorm
   die .product-foto altijd had, zodat de pagina er met een foto hetzelfde
   uitziet als vroeger; de strook komt er alleen bij als er meer is.
   ========================================================================== */
.product-galerij{display:flex;flex-direction:column;gap:12px;min-width:0}
.product-galerij .product-foto{margin:0}

/* Alle beelden liggen op elkaar in hetzelfde vak. Wisselen is dan een kwestie
   van zichtbaar maken en niets verspringt; met een img die vervangen wordt
   zag je bij elke klik het vak even leeg staan. */
.product-galerij .product-foto img{grid-area:1/1;width:100%;height:100%;object-fit:contain}
.product-galerij .product-foto img[hidden]{display:none}
.product-galerij .product-foto img.aan{animation:gal-in .28s ease}
@keyframes gal-in{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}

/* De pijlen liggen over het beeld en komen pas op als je in de buurt bent.
   Op een aanraakscherm blijven ze staan: daar bestaat hover niet. */
.gal-pijl{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:40px;height:40px;border-radius:999px;border:1px solid var(--lijn);
  background:rgba(255,255,255,.92);color:var(--marine);
  display:grid;place-items:center;cursor:pointer;
  box-shadow:0 4px 14px rgba(18,39,90,.14);
  opacity:0;transition:opacity .2s,transform .2s,background .2s}
.gal-pijl.vorige{left:10px}
.gal-pijl.volgende{right:10px}
.product-galerij:hover .gal-pijl,
.gal-pijl:focus-visible{opacity:1}
.gal-pijl:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.gal-pijl[disabled]{opacity:.35;cursor:default}
@media (hover:none){.gal-pijl{opacity:1}}

.gal-teller{position:absolute;right:12px;bottom:12px;z-index:2;
  padding:4px 10px;border-radius:999px;font-size:.76rem;font-weight:700;
  background:rgba(18,39,90,.82);color:#fff;letter-spacing:.02em}

/* De strook. Hij scrollt liever dan dat hij afbreekt: bij acht foto's op een
   smal scherm is een tweede rij miniaturen onrustiger dan een veeg. */
.gal-strook{display:flex;gap:10px;overflow-x:auto;padding:2px;
  scroll-snap-type:x proximity;scrollbar-width:thin}
.gal-strook::-webkit-scrollbar{height:6px}
.gal-strook::-webkit-scrollbar-thumb{background:var(--lijn);border-radius:999px}
.gal-mini{flex:0 0 auto;width:76px;height:76px;border-radius:9px;
  border:1px solid var(--lijn);background:var(--wit);
  display:grid;place-items:center;padding:6px;scroll-snap-align:start;
  transition:border-color .18s,box-shadow .18s,transform .18s}
.gal-mini img{width:100%;height:100%;object-fit:contain}
.gal-mini:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(18,39,90,.12)}
.gal-mini.aan{border-color:var(--marine);box-shadow:0 0 0 2px rgba(18,39,90,.18)}
.gal-mini:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .product-galerij .product-foto img.aan{animation:none}
  .gal-mini,.gal-pijl{transition:none}
}
@media (max-width:640px){
  .gal-mini{width:64px;height:64px}
  .gal-pijl{width:36px;height:36px}
}