/* Fonts zelf gehost (assets/fonts, SIL OFL 1.1), latin-subset van Google Fonts. Geen verzoek naar Google. */
@font-face{font-family:Inter;font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/poppins-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{--groen:#173F2C;--groen2:#245A40;--mos:#8EB78B;--mint:#E6F0E2;--licht:#F4F7F3;--oranje:#F07A1A;--oranje2:#DC6A0E;
--tekst:#1D2B24;--grijs:#5D6B64;--lijn:#E2E7E2;--rood:#C8323A;--r:14px;--sch:0 1px 2px rgba(0,0,0,.05),0 6px 20px -8px rgba(23,63,44,.18);--sch2:0 2px 6px rgba(0,0,0,.06),0 20px 40px -16px rgba(23,63,44,.28)}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden}
body{font-family:Inter,system-ui,sans-serif;color:var(--tekst);background:#fff;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3{font-family:Poppins,Inter,sans-serif;line-height:1.2;letter-spacing:-.01em;color:var(--groen)}
.wrap{max-width:1220px;margin:0 auto;padding:0 24px}
.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:10px;font-weight:600;transition:.2s;white-space:nowrap}
.knop-o{background:var(--oranje);color:#fff}.knop-o:hover{background:var(--oranje2)}
.knop-r{border:1.5px solid var(--lijn);background:#fff}.knop-r:hover{border-color:var(--groen)}
.link{color:var(--groen2);font-weight:600;display:inline-flex;gap:6px;align-items:center}.link:hover{text-decoration:underline}
.sec{padding:80px 0}.sec-grijs{background:var(--licht)}
.kop2{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:30px}
.kop2 h2{font-size:clamp(26px,3vw,34px)}.kop2 p{color:var(--grijs);margin-top:6px;max-width:620px}
.kop2>.link{flex:none;white-space:nowrap}

/* usp-balk + header */
.usp{background:var(--groen);color:#fff;font-size:13.5px;height:38px;overflow:hidden;display:flex;align-items:center}
.usp-baan{display:flex;width:max-content;animation:usp-loop 38s linear infinite}.usp:hover .usp-baan,.usp:focus-within .usp-baan{animation-play-state:paused}
.usp-set{display:flex;list-style:none;margin:0;padding:0}
.usp-set li{display:inline-flex;gap:7px;align-items:center;white-space:nowrap;padding:0 28px}.usp svg{color:var(--mos)}
.usp a{color:#fff;font-weight:600;display:inline-flex;gap:6px;align-items:center}.usp a:hover{text-decoration:underline}
@keyframes usp-loop{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.usp-baan{animation:none}.usp-set[aria-hidden]{display:none}.usp{justify-content:center}}
.hdr{background:#fff;border-bottom:1px solid var(--lijn);position:sticky;top:0;z-index:40}
.hdr .wrap{display:flex;align-items:center;gap:28px;height:76px}
.hdr .logo img{height:34px;width:auto}
.hzoek{flex:1;max-width:460px;display:flex;align-items:center;gap:10px;height:46px;border:1.5px solid var(--lijn);border-radius:10px;padding:0 6px 0 14px;background:var(--licht)}
.hzoek input{flex:1;border:0;background:none;outline:0;font:inherit;font-size:15px;min-width:0}.hzoek svg{color:var(--grijs)}
.nav{display:flex;gap:4px;margin-left:auto}.nav>li{list-style:none;position:relative}
.nav-k{display:flex;gap:5px;align-items:center;padding:10px 12px;border-radius:8px;font-weight:500;font-size:15px}.nav-k:hover,.nav>li.open .nav-k{background:var(--licht)}
.mega{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--lijn);border-radius:var(--r);box-shadow:var(--sch2);padding:10px;width:560px;display:grid;grid-template-columns:1fr 1fr;gap:4px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s}
.nav>li.open .mega{opacity:1;visibility:visible;transform:none}
.mi{display:flex;gap:12px;align-items:center;padding:8px;border-radius:10px}.mi:hover{background:var(--licht)}
.mi img{width:52px;height:52px;border-radius:8px;object-fit:cover}.mi strong{display:block;font-size:14.5px}.mi span{font-size:13px;color:var(--grijs)}
.mega-w{width:480px;grid-template-columns:1fr 1fr}.mega-w .mi img{object-fit:contain;background:#fff;border:1px solid var(--lijn);padding:6px}
.hamb{display:none}

/* hero */
.hero{background:linear-gradient(180deg,var(--mint),#fff);padding:56px 0 64px}
.hgrid{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(34px,4.4vw,52px);margin-bottom:16px}
.hero .lead{font-size:18px;color:var(--grijs);max-width:540px}
.bzoek{display:flex;gap:8px;margin-top:26px;background:#fff;border:1.5px solid var(--lijn);border-radius:12px;padding:6px 6px 6px 16px;align-items:center;max-width:560px;box-shadow:var(--sch)}
.bzoek input{flex:1;border:0;outline:0;font:inherit;font-size:16.5px;min-width:0}.bzoek svg{color:var(--grijs)}
.pop{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;font-size:14px;color:var(--grijs);align-items:center}
.pop a{background:#fff;border:1px solid var(--lijn);padding:5px 12px;border-radius:999px;color:var(--tekst)}.pop a:hover{border-color:var(--groen)}
.vinken{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;margin-top:26px;font-size:15px;max-width:520px}
.vinken span{display:flex;gap:8px;align-items:center}.vinken svg{color:var(--groen2);flex:none}
.hfoto{position:relative;border-radius:20px;overflow:hidden;min-height:470px;box-shadow:var(--sch2)}
.hfoto>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pkaart{position:absolute;right:18px;bottom:18px;width:min(380px,calc(100% - 36px));background:#fff;border-radius:14px;box-shadow:var(--sch2);overflow:hidden}
.pk-kop{display:flex;gap:12px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--lijn)}
.pk-kop img{width:48px;height:48px;object-fit:contain}.pk-kop small{display:block;color:var(--grijs);font-size:12.5px}.pk-kop strong{font-size:15.5px}
.pk-r{display:grid;grid-template-columns:110px 1fr auto;gap:12px;align-items:center;padding:9px 16px;border-bottom:1px solid var(--lijn);font-size:14px}
.pk-r:last-of-type{border-bottom:0}.pk-r b{font-size:16px}.pk-r small{color:var(--grijs);font-size:12.5px}
.wlogo{height:26px;display:flex;align-items:center}.wlogo img{max-height:24px;max-width:78px;object-fit:contain}
.wlogo span{font-weight:700;font-size:13px}
.best{background:#F3F8EF}.tag-best{display:inline-block;font-size:11px;font-weight:700;background:var(--groen);color:#fff;padding:2px 7px;border-radius:5px;margin-left:6px}
.pk-voet{display:flex;justify-content:space-between;padding:11px 16px;background:var(--licht);font-size:13.5px}
.fotolabel{position:absolute;left:18px;top:18px;background:rgba(255,255,255,.95);border-radius:10px;padding:8px 12px;font-size:13.5px;font-weight:600;display:flex;gap:8px;align-items:center;box-shadow:var(--sch)}
.fotolabel svg{color:var(--groen2)}

.vaffiliate{font-size:12.5px;color:var(--mos);margin-top:10px;max-width:46ch;line-height:1.5}.vaffiliate a{color:#fff;text-decoration:underline}
/* cijferband: wat we vergelijken en hoe vers */
.cijferband{background:var(--mint);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);padding:12px 0}
.cijferband ul{display:flex;flex-wrap:wrap;gap:8px 28px;list-style:none;margin:0;padding:0;font-size:14px;align-items:center}
.cijferband li{display:inline-flex;gap:6px;align-items:center}.cijferband b{font-weight:700}
.cijferband li:not(.vers) b{font-size:18px;color:var(--groen)}
.cijferband .vers{margin-left:auto}.cijferband .vers svg{color:var(--groen)}
@media (max-width:700px){.cijferband .vers{margin-left:0;flex-basis:100%}}
/* logoband */
.logoband{border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);padding:22px 0;background:#fff}
.logoband .wrap{display:flex;align-items:center;gap:32px}
.logoband p{font-size:13.5px;color:var(--grijs);white-space:nowrap;font-weight:600}
.logos{display:flex;align-items:center;justify-content:space-between;gap:28px;flex:1;overflow:hidden}
.logos img{height:28px;width:auto;max-width:110px;object-fit:contain;filter:grayscale(1);opacity:.65;transition:.2s}
.logos img:hover{filter:none;opacity:1}

/* insecttegels met foto */
.itegels{display:grid;grid-template-columns:repeat(7,1fr);gap:14px}
.it{border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden;background:#fff;transition:.2s;text-align:left;display:flex;flex-direction:column}
.it:hover{box-shadow:var(--sch2);transform:translateY(-3px)}
.it img{height:120px;width:100%;object-fit:cover}
.it div{padding:12px 14px 14px}.it strong{display:block;font-size:15px;color:var(--groen)}.it small{font-size:13px;color:var(--grijs)}
.it.aan{border-color:var(--groen);box-shadow:0 0 0 2px var(--groen)}

/* vergelijker */
.vgrid{display:grid;grid-template-columns:260px 1fr;gap:26px;align-items:start}
.flt{position:sticky;top:92px;border:1px solid var(--lijn);border-radius:var(--r);padding:4px 18px 14px;background:#fff}
.fg{padding:14px 0;border-bottom:1px solid var(--lijn)}.fg:last-child{border-bottom:0}
.fg h3{font-size:14.5px;margin-bottom:8px;color:var(--groen)}
.opt{display:flex;gap:10px;align-items:center;padding:5px 0;font-size:15px;cursor:pointer}
.opt input{width:18px;height:18px;accent-color:var(--groen);flex:none}.opt .tel{margin-left:auto;font-size:13px;color:var(--grijs)}
.bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.bar .n{color:var(--grijs)}.bar .n b{color:var(--tekst)}
.chipjes{display:flex;gap:6px;flex-wrap:wrap}.chipjes button{font-size:13px;background:var(--mint);color:var(--groen);font-weight:600;padding:5px 10px;border-radius:999px}
.srt{margin-left:auto;font-size:14px;color:var(--grijs);display:flex;gap:8px;align-items:center}
.srt select{font:inherit;font-size:14.5px;border:1px solid var(--lijn);border-radius:8px;padding:8px 10px;background:#fff;color:var(--tekst)}
.lijst{border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden;background:#fff}
.rij{border-bottom:1px solid var(--lijn)}.rij:last-child{border-bottom:0}
.rij-in{display:grid;grid-template-columns:84px 1fr auto 176px;gap:20px;align-items:center;padding:14px 18px}
.rij:hover{background:#FBFCFA}.rij.open{background:#FBFCFA}
.rb{width:84px;height:84px;display:grid;place-items:center}.rb img{max-height:84px;object-fit:contain}
.merk{font-size:12.5px;color:var(--grijs);font-weight:600}
.rij h3{font-family:Inter,sans-serif;font-size:16.5px;font-weight:600;color:var(--tekst);margin:1px 0 7px}
.lbs{display:flex;gap:6px;flex-wrap:wrap}
.lb{display:inline-flex;gap:5px;align-items:center;font-size:12.5px;font-weight:500;padding:3px 8px;border-radius:6px;background:var(--licht);color:var(--tekst)}
.lb-ok{background:var(--mint);color:var(--groen);font-weight:600}.lb-let{background:#FCEDEE;color:var(--rood);font-weight:600}
.rp{text-align:right}.rp small{display:block;font-size:12.5px;color:var(--grijs)}.rp b{font-size:26px;font-family:Poppins,sans-serif;color:var(--tekst)}.rp .p1{font-size:12.5px;color:var(--grijs)}
.ra{display:flex;flex-direction:column;gap:5px;text-align:center}.ra .knop{height:44px;font-size:15px}.ra small{font-size:12.5px;color:var(--grijs)}
.rij.open [data-open]{background:var(--groen);color:#fff;border-color:var(--groen)}
.ru{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s}.rij.open .ru{grid-template-rows:1fr}.ru>div{overflow:hidden}
.wtab{margin:0 18px 16px 122px;border:1px solid var(--lijn);border-radius:12px;overflow:hidden;background:#fff}
.wt{display:grid;grid-template-columns:90px 1fr 1fr 1fr 130px;gap:12px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--lijn);font-size:14.5px}
.wt:last-child{border-bottom:0}.wt.th{font-size:12.5px;color:var(--grijs);font-weight:600;background:var(--licht);padding-top:8px;padding-bottom:8px}
.wt b{font-size:16px}.wt .knop{height:36px;font-size:14px;padding:0 14px}
.meer{text-align:center;margin-top:18px}
.flt-knop{display:none}

/* waarom */
.waarom{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.wa{display:flex;gap:14px}.wa .ic{width:46px;height:46px;border-radius:12px;background:var(--mint);color:var(--groen);display:grid;place-items:center;flex:none}
.wa strong{display:block;color:var(--groen);margin-bottom:2px}.wa span{font-size:14.5px;color:var(--grijs)}

/* veilig + gids: foto-splits */
.split{display:grid;grid-template-columns:1fr 1fr;border-radius:20px;overflow:hidden;background:#fff;border:1px solid var(--lijn)}
.split>img{width:100%;height:100%;object-fit:cover;min-height:420px}
.split-t{padding:48px}
.split-t h2{font-size:clamp(26px,2.8vw,34px);margin-bottom:12px}.split-t p{color:var(--grijs);margin-bottom:18px}
.vl{list-style:none;display:grid;gap:10px;margin-bottom:24px}.vl li{display:flex;gap:10px}.vl svg{color:var(--groen2);flex:none;margin-top:3px}
.stappen{list-style:none;display:grid;gap:12px;margin-bottom:26px}
.stappen li{display:flex;gap:12px;align-items:flex-start}.stappen b{width:28px;height:28px;border-radius:8px;background:var(--groen);color:#fff;display:grid;place-items:center;font-size:14px;flex:none}
.gmeer{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.gm{display:flex;gap:12px;align-items:center;border:1px solid var(--lijn);border-radius:12px;padding:10px;background:#fff}
.gm img{width:64px;height:64px;border-radius:8px;object-fit:cover}.gm strong{display:block;font-size:15px}.gm small{color:var(--grijs)}
.bk{margin-left:auto;font-size:12px;font-weight:600;background:var(--licht);padding:3px 8px;border-radius:6px;color:var(--grijs)}

/* winkels + merken */
.wgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.wk{border:1px solid var(--lijn);border-radius:var(--r);padding:20px;background:#fff;transition:.2s}.wk:hover{box-shadow:var(--sch)}
.wk .wl{height:44px;display:flex;align-items:center;margin-bottom:16px}.wk .wl img{max-height:40px;max-width:150px;object-fit:contain}
.wk dl{display:flex;gap:24px;padding:12px 0;border-top:1px solid var(--lijn);margin-bottom:10px}.wk dt{font-size:13px;color:var(--grijs)}.wk dd{font-weight:700;font-size:18px}
.merken{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.mk{border:1px solid var(--lijn);border-radius:12px;height:112px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#fff;padding:12px;transition:.2s}.mk small{font-size:12.5px;color:var(--grijs)}
.mk:hover{box-shadow:var(--sch)}.mk img{max-height:50px;max-width:120px;object-fit:contain}

/* faq + footer */
.faq>*{max-width:820px}
details{border-bottom:1px solid var(--lijn)}summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:18px 0;font-weight:600;font-size:17px;color:var(--groen)}
summary::-webkit-details-marker{display:none}summary::after{content:"+";font-size:22px;line-height:1;color:var(--grijs)}details[open] summary::after{content:"–"}
details p{padding:0 0 18px;color:var(--grijs)}

.voet{background:var(--groen);color:rgba(255,255,255,.74);padding:64px 0 0;font-size:15px}
.vtop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);gap:56px}
.vmerk .logo img{height:32px;width:auto}.vmerk>p{margin-top:16px;max-width:300px;line-height:1.55}
.vetiket{display:flex;gap:10px;align-items:flex-start;margin-top:22px;padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font-size:14px;line-height:1.5;max-width:320px}
.vetiket svg{color:var(--mos);flex:none;margin-top:2px}.vetiket b{color:#fff;font-weight:600}
.vkol{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(0,1.1fr);gap:40px}
.voet h3{color:var(--mos);font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}.voet h3.vh2{margin-top:28px}
.voet ul{list-style:none;display:grid;gap:9px}.voet li{line-height:1.4}.voet ul a:hover,.voet .onder a:hover{color:#fff;text-decoration:underline}
.vcopy span+span::before{content:' · '}.voet .onder{display:flex;justify-content:space-between;gap:16px;border-top:1px solid rgba(255,255,255,.12);margin-top:56px;padding:22px 0 26px;font-size:13.5px;color:rgba(255,255,255,.6)}
@media (max-width:1080px){

  .nav,.hzoek{display:none}.hamb{display:grid;margin-left:auto;width:44px;height:44px;place-items:center;border:1px solid var(--lijn);border-radius:10px}
  .hgrid,.split{grid-template-columns:1fr}.hfoto{min-height:420px}
  .itegels{grid-template-columns:repeat(7,160px);overflow-x:auto;margin:0 -24px;padding:0 24px 8px}
  .vgrid{grid-template-columns:1fr}.flt{position:static;display:none}.flt.open{display:block;margin-bottom:12px}.flt-knop{display:flex;width:100%;justify-content:space-between;margin-bottom:12px}
  .waarom{grid-template-columns:1fr 1fr}.wgrid{grid-template-columns:1fr 1fr}.merken{grid-template-columns:repeat(3,1fr)}.gmeer{grid-template-columns:1fr}
  .vtop{grid-template-columns:1fr;gap:40px}.vmerk{display:grid;grid-template-columns:auto 1fr;gap:4px 32px;align-items:start}.vmerk .logo{grid-row:span 2}.vmerk>p{margin-top:0;max-width:none}.vetiket{margin-top:6px;max-width:none}.logos{overflow-x:auto;justify-content:flex-start}.logoband .wrap{flex-direction:column;align-items:flex-start;gap:12px}
}
@media (max-width:640px){
  .wrap{padding:0 16px}.sec{padding:56px 0}.hero{padding:32px 0 40px}
  .hgrid>*,.vgrid>*{min-width:0}
  .bzoek .knop{padding:0 14px;font-size:0;gap:0}.bzoek .knop::after{content:'Zoek';font-size:15px}
  .pk-r{grid-template-columns:86px 1fr auto;gap:8px;padding:9px 12px}.hero h1{font-size:31px}
  .vinken{grid-template-columns:1fr}.hfoto{min-height:520px}.pkaart{right:10px;left:10px;width:auto;bottom:10px}
  .itegels{grid-template-columns:repeat(7,140px);margin:0 -16px;padding:0 16px 8px}
  .rij-in{grid-template-columns:70px 1fr auto;grid-template-areas:"b i i" "p p a";gap:10px 12px;padding:12px}
  .rb{grid-area:b;width:70px;height:70px}.rb img{max-height:70px}.rij-in>div:nth-child(2){grid-area:i}
  .rp{grid-area:p;text-align:left;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}.rp b{font-size:21px}
  .ra{grid-area:a}.ra small{display:none}.ra .knop{height:40px;padding:0 14px;font-size:14px}
  .wtab{margin:0 12px 12px}.wt{grid-template-columns:70px 1fr auto}.wt .vz,.wt .lt,.wt.th{display:none}
  .split-t{padding:26px 20px}.split>img{min-height:240px}
  .waarom,.wgrid{grid-template-columns:1fr}.merken{grid-template-columns:repeat(2,1fr)}
  .srt{margin-left:0;width:100%}.srt select{flex:1}
  .voet{padding-top:44px}.vmerk{display:block}.vmerk>p{margin-top:14px}.vetiket{margin-top:18px}.vkol{grid-template-columns:1fr 1fr;gap:28px 20px}.vkol>div:nth-child(2){grid-column:2;grid-row:1 / span 2}.voet ul{gap:10px}.voet .onder{flex-direction:column;gap:6px;margin-top:40px}.vcopy{display:grid;gap:2px}.vcopy span+span::before{content:none}
}

/* ---- extra (hub, product, keuze, paginering) ---- */
/* ===== gedeeld: kruimelpad, kop-hero, tabellen ===== */
.kruimel{font-size:14px;color:var(--grijs);padding:18px 0 0}.kruimel a{color:var(--groen2)}.kruimel a:hover{text-decoration:underline}
.hhero{background:linear-gradient(180deg,var(--mint),#fff);padding:10px 0 48px}
.hh-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;margin-top:18px}
.hhero h1{font-size:clamp(30px,3.8vw,44px);margin-bottom:12px}
.hhero .lead{font-size:17.5px;color:var(--grijs);max-width:600px}
.kerngetal{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:24px;max-width:620px}
.kg{background:#fff;border:1px solid var(--lijn);border-radius:12px;padding:12px 14px}
.kg b{display:block;font-family:Poppins,sans-serif;font-size:21px;color:var(--groen)}.kg span{font-size:13px;color:var(--grijs)}
.hfoto2{position:relative;border-radius:18px;overflow:hidden;height:330px;box-shadow:var(--sch2)}
.hfoto2>img{width:100%;height:100%;object-fit:cover}
.gidskaart{position:absolute;left:14px;right:14px;bottom:14px;background:#fff;border-radius:12px;padding:12px 14px;display:flex;gap:12px;align-items:center;box-shadow:var(--sch2)}
.gidskaart .ic{width:40px;height:40px;border-radius:10px;background:var(--mint);color:var(--groen);display:grid;place-items:center;flex:none}
.gidskaart strong{display:block;font-size:15px;color:var(--groen)}.gidskaart small{color:var(--grijs);font-size:13px}
.gidskaart .knop{margin-left:auto;height:40px;font-size:14px;padding:0 14px}
.hubnav{display:flex;gap:8px;overflow-x:auto;padding:4px 0 6px}
.hn{display:flex;align-items:center;gap:10px;border:1px solid var(--lijn);border-radius:999px;padding:5px 14px 5px 5px;background:#fff;white-space:nowrap;font-size:14.5px;font-weight:500}
.hn img{width:30px;height:30px;border-radius:50%;object-fit:cover}.hn:hover{border-color:var(--groen)}.hn.aan{background:var(--groen);color:#fff;border-color:var(--groen)}
.tabel{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden;background:#fff;font-size:15px}
.tabel th{background:var(--licht);text-align:left;font-size:13px;color:var(--grijs);font-weight:600;padding:11px 16px}
.tabel td{padding:13px 16px;border-top:1px solid var(--lijn);vertical-align:middle}
.tabel .n{font-weight:700}.bron{font-size:13px;color:var(--grijs);margin-top:10px}
.twee{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.tekst p{color:var(--grijs);margin-bottom:12px}.tekst h3{font-size:19px;margin:18px 0 6px}

/* ===== hub: keuzekaarten ===== */
.keuze{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kz{border:1px solid var(--lijn);border-radius:var(--r);background:#fff;overflow:hidden;display:flex;flex-direction:column;transition:.2s;text-align:left}
.kz:hover{box-shadow:var(--sch2);transform:translateY(-2px)}
.kz img{height:120px;width:100%;object-fit:cover}
.kz-t{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
.kz h3{font-size:17px;margin-bottom:6px}.kz p{font-size:14px;color:var(--grijs);margin-bottom:12px}
.kz ul{list-style:none;display:grid;gap:6px;margin-bottom:12px;font-size:14px}.kz li{display:flex;gap:8px;align-items:center}.kz li img{width:28px;height:28px;object-fit:contain}
.kz .link{margin-top:auto;font-size:14.5px}
.winnaar{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.wn{border:1px solid var(--lijn);border-radius:var(--r);background:#fff;padding:18px;display:flex;gap:14px;align-items:center}
.wn img{width:72px;height:72px;object-fit:contain;flex:none}
.wn small{display:block;font-size:12.5px;font-weight:700;color:var(--groen2);text-transform:uppercase;letter-spacing:.04em}
.wn strong{display:block;font-size:15.5px;margin:2px 0}.wn span{font-size:13.5px;color:var(--grijs)}

/* ===== product ===== */
.ptop{display:grid;grid-template-columns:1fr 1fr;gap:36px;padding:22px 0 40px}
.galerij{background:linear-gradient(180deg,#EEF4EF,#FAFCFA);border:1px solid var(--lijn);border-radius:20px;min-height:380px;display:grid;place-items:center;position:relative}
.galerij img{max-height:310px;object-fit:contain;mix-blend-mode:multiply}
.galerij .lb{position:absolute;left:16px;top:16px;font-size:13px;padding:5px 10px}
.pinfo .merklogo{height:36px;margin-bottom:8px}.pinfo .merklogo img{height:36px;width:auto}
.pinfo h1{font-size:clamp(26px,3vw,34px);margin-bottom:6px}
.pinfo .sub{color:var(--grijs);font-size:15px;margin-bottom:12px}
.pchips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.pchips .lb-ok{text-decoration:none}
.pkern{font-size:14px;color:var(--grijs);margin:0 0 18px}
.prijsblok{border:1.5px solid var(--lijn);border-radius:16px;padding:16px;background:#fff;box-shadow:var(--sch)}
.pb-top{display:flex;align-items:center;gap:14px;margin-bottom:4px}
.pb-top .wlogo img{max-height:30px;max-width:110px}
.pb-prijs{font-family:Poppins,sans-serif;font-size:38px;font-weight:700;color:var(--tekst);line-height:1}
.pb-sub{font-size:14px;color:var(--grijs);margin:6px 0 14px}
.pb-knoppen{display:flex;gap:10px}.pb-knoppen .knop{flex:1;height:52px}
.pb-voet{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;font-size:13.5px;color:var(--grijs)}.pb-voet span{display:flex;gap:6px;align-items:center}.pb-voet svg{color:var(--groen2)}
.subnav{position:sticky;top:76px;z-index:30;background:#fff;border-bottom:1px solid var(--lijn)}
.subnav .wrap{display:flex;gap:4px;overflow-x:auto}
.subnav a{padding:14px 14px;font-weight:600;font-size:15px;color:var(--grijs);border-bottom:2.5px solid transparent;white-space:nowrap}
.subnav a:hover,.subnav a.aan{color:var(--groen);border-color:var(--groen)}
.ptab td:first-child{width:160px}.ptab .wlogo img{max-height:26px;max-width:110px}
.ptab tr.best td{background:#F3F8EF}.ptab .pr{font-family:Poppins,sans-serif;font-weight:700;font-size:17px}
.ptab .knop{height:38px;font-size:14px;padding:0 14px}.ptab tr.verborgen{display:none}.ptab.alles tr.verborgen{display:table-row}
.gebruik{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.gb{border:1px solid var(--lijn);border-radius:var(--r);background:#fff;padding:20px}
.gb h3{font-size:18px;margin-bottom:12px;display:flex;gap:10px;align-items:center}
.gb h3 .ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center}
.gb.goed h3 .ic{background:var(--mint);color:var(--groen)}.gb.let h3 .ic{background:#FCEDEE;color:var(--rood)}
.gb ul{list-style:none;display:grid;gap:10px}.gb li{display:flex;gap:10px;font-size:15px}.gb li svg{flex:none;margin-top:3px}
.gb.goed li svg{color:var(--groen2)}.gb.let li svg{color:var(--rood)}
.gevaar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.sw{background:var(--rood);color:#fff;font-weight:800;letter-spacing:.08em;font-size:13px;padding:6px 12px;border-radius:8px}
.ghs{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--lijn);border-radius:10px;padding:6px 12px 6px 6px;font-size:14px;font-weight:500;background:#fff}
.ghs i{width:30px;height:30px;display:grid;place-items:center;background:#fff;border:2px solid var(--rood);transform:rotate(45deg);border-radius:3px}
.ghs i svg{transform:rotate(-45deg);color:var(--tekst)}
.acc{border:1px solid var(--lijn);border-radius:12px;background:#fff;margin-top:10px}
.acc summary{padding:14px 18px;font-size:16px}.acc>div{padding:0 18px 16px;color:var(--grijs);font-size:15px}
.acc li{margin:0 0 6px 18px}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.specs div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--lijn);font-size:15px}
.specs dt{color:var(--grijs)}.specs dd{font-weight:600;text-align:right}
.kaarten{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.kt{border:1px solid var(--lijn);border-radius:var(--r);background:#fff;padding:12px;display:flex;flex-direction:column;transition:.2s}
.kt:hover{box-shadow:var(--sch)}.kt .b{height:120px;display:grid;place-items:center;margin-bottom:8px}.kt .b img{max-height:120px;object-fit:contain}
.kt small{font-size:12px;color:var(--grijs);font-weight:600}.kt strong{font-size:14px;line-height:1.3;margin:2px 0 8px}
.kt .p{margin-top:auto;font-family:Poppins,sans-serif;font-weight:700}.kt .p span{font-family:Inter;font-weight:400;font-size:12.5px;color:var(--grijs);display:block}
.plakbalk{display:none}

@media (max-width:1080px){
 .hh-grid,.ptop,.twee{grid-template-columns:1fr}.keuze{grid-template-columns:1fr 1fr}.winnaar{grid-template-columns:1fr}
 .kaarten{grid-template-columns:repeat(3,1fr)}.subnav{top:76px}
}
@media (max-width:640px){
 .kerngetal{grid-template-columns:1fr 1fr}.keuze{grid-template-columns:1fr}.gebruik,.specs{grid-template-columns:1fr}
 .galerij{height:340px}.galerij img{max-height:290px}.kaarten{grid-template-columns:1fr 1fr}
 .tabel{font-size:14px}.tabel th,.tabel td{padding:10px}.ptab td:first-child{width:auto}.ptab .vz,.ptab .lt{display:none}
 .gidskaart .knop{display:none}.hfoto2{height:260px}
 .plakbalk{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff;border-top:1px solid var(--lijn);padding:10px 16px;gap:12px;align-items:center;box-shadow:0 -6px 20px -10px rgba(0,0,0,.2)}
 .plakbalk b{font-family:Poppins,sans-serif;font-size:20px}.plakbalk small{display:block;font-size:12px;color:var(--grijs)}.plakbalk .knop{margin-left:auto}
 body.product{padding-bottom:74px}
}
.kz li span{white-space:nowrap}.hubnav{flex-wrap:wrap}@media(max-width:640px){.hubnav{flex-wrap:nowrap}}
.ptop>*,.twee>*{min-width:0}
@media (max-width:640px){
 .ptab .tt{display:none}.ptab .knop{padding:0 10px;font-size:13px}.ptab .tag-best{display:block;width:max-content;margin:4px 0 0}
 .pb-knoppen{flex-direction:column}.kop2{flex-wrap:wrap}.pb-top .wlogo img{max-width:90px}
}
@media (max-width:640px){.pb-knoppen .knop{flex:none;width:100%}}

/* keuzelabels */
.klbs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.kl{display:inline-flex;gap:5px;align-items:center;font-size:12px;font-weight:700;padding:3px 9px;border-radius:6px;background:#FFF3E6;color:#B45309}
.kl-keuze{background:var(--groen);color:#fff}
.kl-dier{background:#E8F1FB;color:#1D4E89}.kl-nawerking{background:#F1ECFB;color:#5B3FA0}.kl-overal{background:var(--licht);color:var(--tekst)}
/* onze keuze */
.beste{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;align-items:stretch}
.ok{border:2px solid var(--groen);border-radius:18px;background:#fff;overflow:hidden;box-shadow:var(--sch2)}
.ok-lint{background:var(--groen);color:#fff;font-weight:700;font-size:14px;padding:9px 18px;display:flex;gap:8px;align-items:center}
.ok-in{display:grid;grid-template-columns:200px 1fr;gap:22px;padding:22px}
.ok-b{background:linear-gradient(180deg,#EEF4EF,#FAFCFA);border-radius:14px;display:grid;place-items:center;padding:12px;min-height:240px}.ok-b img{max-height:230px;object-fit:contain;mix-blend-mode:multiply}
.ok h3{font-family:Poppins,sans-serif;font-size:22px;margin:2px 0 10px}.ok h3 a:hover{text-decoration:underline}
.ok-r{list-style:none;display:grid;gap:8px;margin-bottom:16px;font-size:15px}.ok-r li{display:flex;gap:9px}.ok-r svg{flex:none;margin-top:3px}
.ok-r li.r-ok svg{color:var(--groen2)}.ok-r li.r-let svg{color:var(--rood)}
.ok-p{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--lijn)}
.ok-p small{display:block;font-size:12.5px;color:var(--grijs)}.ok-p b{font-family:Poppins,sans-serif;font-size:26px}.ok-p .knop{margin-left:auto}
.lk{display:grid;gap:10px;align-content:start}
.lkk{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;border:1px solid var(--lijn);border-radius:14px;background:#fff;padding:12px 16px;transition:.2s}
.lkk:hover{box-shadow:var(--sch)}.lkk img{width:64px;height:64px;object-fit:contain}
.lkk strong{display:block;font-size:15px;line-height:1.3}.lkk span:not(.kl){font-size:13.5px;color:var(--grijs)}.lkk>b{font-family:Poppins,sans-serif;font-size:18px}
.kpis{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.kpi{border:1px solid var(--lijn);border-radius:12px;background:#fff;overflow:hidden;display:flex;flex-direction:column;transition:.2s;color:var(--tekst)}.kpi:hover{box-shadow:var(--sch2);border-color:var(--mos)}
.kpi-f{display:block;height:64px}.kpi-f img{width:100%;height:100%;object-fit:cover}
.kpi-t{padding:9px 10px 10px;display:flex;flex-direction:column;gap:7px;flex:1}
.kpi-h{font-family:Poppins,sans-serif;font-size:13.5px;color:var(--groen);line-height:1.2}
.kpi-p{display:flex;gap:7px;align-items:center;font-size:12.5px;line-height:1.3}.kpi-p img{width:30px;height:38px;object-fit:contain;flex:none}
.kpi-p span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kpi-v{display:flex;justify-content:space-between;align-items:baseline;margin-top:auto;padding-top:7px;border-top:1px solid var(--lijn)}
.kpi-v b{font-family:Poppins,sans-serif;font-size:15.5px}.kpi-v small{font-size:12px;color:var(--groen2);font-weight:600;display:inline-flex;gap:3px;align-items:center}
.vmk th{background:#fff;vertical-align:bottom}.vmk-k{display:flex;flex-direction:column;gap:4px;font-size:14.5px;color:var(--tekst);font-weight:600}
.vmk-k img{width:70px;height:70px;object-fit:contain}.vmk-k small{font-weight:500;color:var(--grijs);font-size:12.5px}.vmk-k .kl{align-self:flex-start}
.vmk td:first-child{color:var(--grijs);width:24%}.vmk td.wint{font-weight:700;color:var(--groen)}.vmk td.wint::after{content:" ✓"}
.vmk-zin{margin-top:14px;font-size:16px}
@media (max-width:1080px){.beste{grid-template-columns:1fr}}
@media (max-width:1080px){.kpis{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}.kpi{flex:0 0 156px;scroll-snap-align:start}}
@media (max-width:640px){.ok-in{grid-template-columns:1fr}.ok-b{min-height:180px}.ok-p .knop{margin-left:0;width:100%}.lkk{grid-template-columns:52px 1fr}.lkk>b{grid-column:2}.vmk-k img{width:48px;height:48px}.vmk{font-size:13.5px}}
.vmk-k small.kl{color:#fff;font-weight:700}

/* paginering */
.pgw{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:20px}
.pg-info{font-size:14px;color:var(--grijs)}
.pg{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center}
.pg button{min-width:42px;height:42px;padding:0 12px;border:1.5px solid var(--lijn);border-radius:10px;background:#fff;font-weight:600;display:inline-flex;gap:6px;align-items:center;justify-content:center}
.pg button:hover:not([disabled]){border-color:var(--groen)}.pg button.aan{background:var(--groen);border-color:var(--groen);color:#fff}
.pg button[disabled]{opacity:.4;cursor:default}.pg span{color:var(--grijs);padding:0 4px}
/* rijen klikbaar */
.rij h3 a:hover{text-decoration:underline}.rb{cursor:pointer}.rl{color:var(--groen2);font-weight:600}.rl:hover{text-decoration:underline}
/* contextbalk productpagina */
/* Productpagina: contextbalk. Eén regel: kruimelpad links (laatste item afgekapt), navigator rechts. */
.ctx{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px 0;border-bottom:1px solid var(--lijn)}
.ctx .kruimel{padding:0;min-width:0;flex:1}
.ctx .kruimel ol{flex-wrap:nowrap;min-width:0}
.ctx .kruimel li{flex:none;white-space:nowrap}
.ctx .kruimel li:last-child{flex:1 1 auto;min-width:0}
.ctx .kruimel li:last-child span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ctx-nav{display:flex;align-items:center;gap:6px;flex:none}
.ctx-plek{font-size:14px;color:var(--grijs);padding:0 8px;white-space:nowrap}.ctx-plek b{color:var(--groen)}.ctx-plek:hover{color:var(--groen);text-decoration:underline}
.ctx-k{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--lijn);border-radius:10px;background:#fff;color:var(--groen);transition:.2s}
.ctx-k:hover{border-color:var(--groen)}.ctx-k.is-uit{color:var(--lijn);background:transparent}
@media (max-width:640px){.ctx{flex-direction:column;align-items:stretch;gap:8px}.ctx-nav{justify-content:space-between}.ctx-plek{padding:0}}

/* ---- thema: aanvullingen voor echte links en het mobiele menu (24-09-2026) ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
/* WP-core/pluginconventie (bv. Complianz): wij strippen block-library-CSS op de meeste
   paginatypen, dus deze standaardklasse ontbrak en rende zichtbaar i.p.v. alleen-schermlezer. */
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.pg a,.pg span.aan,.pg span.uit{min-width:42px;height:42px;padding:0 12px;border:1.5px solid var(--lijn);border-radius:10px;background:#fff;font-weight:600;display:inline-flex;gap:6px;align-items:center;justify-content:center;color:var(--tekst)}
.pg a:hover{border-color:var(--groen)}
.pg span.aan{background:var(--groen);border-color:var(--groen);color:#fff}
.pg span.uit{opacity:.4}
.pg a svg[aria-hidden]{flex:none}
.chipjes a{font-size:13px;background:var(--mint);color:var(--groen);font-weight:600;padding:5px 10px;border-radius:999px}
.mk strong{font-family:Poppins,Inter,sans-serif;color:var(--groen);font-size:18px}
.mega .mi div strong{white-space:normal}
@media (max-width:1080px){
 .hdr.menu-open .nav{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--lijn);padding:10px 24px 18px;margin:0;box-shadow:var(--sch2)}
 .hdr.menu-open .nav .mega{position:static;width:auto;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:4px 0;display:none;grid-template-columns:1fr}
 .hdr.menu-open .nav>li.open .mega{display:grid}
}
@media (max-width:640px){.pg a,.pg span.aan,.pg span.uit{min-width:38px;height:38px;padding:0 10px}}

/* ---- gids (24-09-2026) ---- */
.ghero .hh-grid{align-items:center}
.kort-antwoord p{margin:0}
.kort-antwoord a{color:var(--groen2);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.gmeta{display:flex;gap:8px;align-items:center;color:var(--grijs);font-size:14px;margin-top:18px}
.gids-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;align-items:start}
.gtekst{max-width:760px;font-size:17px;line-height:1.75}
.gtekst h2{font-size:clamp(24px,2.6vw,30px);margin:48px 0 14px;scroll-margin-top:100px}
.gtekst h2:first-child{margin-top:0}
.gtekst h3{font-size:19px;margin:26px 0 8px}
.gtekst p{margin:0 0 14px}
.gtekst ul{margin:0 0 16px 20px}.gtekst li{margin-bottom:8px}
.gtekst a{color:var(--groen2);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.gtekst .tabel{margin:8px 0 18px;font-size:15px;line-height:1.5}
.gtekst-pagina{max-width:none}
.gtekst-pagina>p,.gtekst-pagina>ul,.gtekst-pagina>h2,.gtekst-pagina>h3{max-width:760px}
.gtekst-pagina .tabel{max-width:900px}
.gzij{position:sticky;top:96px;display:grid;gap:16px}
.gtoc{border:1px solid var(--lijn);border-radius:var(--r);padding:18px 20px;background:#fff}
.gtoc strong{font-family:Poppins,Inter,sans-serif;color:var(--groen);display:block;margin-bottom:8px}
.gtoc ol{margin:0 0 0 18px;display:grid;gap:6px;font-size:14.5px}
.gtoc a:hover{color:var(--groen2);text-decoration:underline}
.gzij-hub{background:var(--mint);border-radius:var(--r);padding:20px;display:grid;gap:10px}
.gzij-hub strong{font-family:Poppins,Inter,sans-serif;color:var(--groen);font-size:18px}
.gzij-hub p{font-size:14.5px;color:var(--grijs);margin:0}
.gzij-k{display:flex;gap:12px;align-items:center;background:#fff;border-radius:12px;padding:10px}
.gzij-k img{width:48px;height:56px;object-fit:contain;flex:none}
.gzij-k span{display:grid;gap:4px;font-size:14px}
.gblok{border:1.5px solid var(--mos);border-radius:var(--r);background:#FBFCFA;padding:16px 18px;margin:18px 0 26px;display:grid;gap:8px;font-size:15px;line-height:1.45}
.gblok-kop{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.gblok-kop strong{font-family:Poppins,Inter,sans-serif;color:var(--groen)}
.gblok-kop span{font-size:13px;color:var(--grijs)}
.gtekst .gblok a{text-decoration:none}
.gblok-r{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--lijn);border-radius:12px;padding:10px 12px;color:var(--tekst)!important;font-weight:400!important}
.gblok-r:hover{border-color:var(--groen)}
.gblok-r img{width:44px;height:52px;object-fit:contain;flex:none}
.gblok-t{display:grid;gap:3px;flex:1;min-width:0}
.gblok-t b{font-weight:600}
.gblok-t small{color:var(--grijs);font-size:13px}
.gblok-t .klbs{margin:0}
.gblok-p{font-family:Poppins,sans-serif;font-weight:700;white-space:nowrap}
.gblok-alle{justify-self:start;margin-top:4px}
.gbron ul{margin:0 0 12px 20px;display:grid;gap:6px;font-size:15px}
@media (max-width:1080px){.gids-grid{grid-template-columns:1fr;gap:32px}.gzij{position:static}.gtoc{display:none}}
.gzij-k .kl{justify-self:start;display:inline-flex;gap:4px;align-items:center}
.gmeta svg{flex:none;width:14px;height:14px}
@media (max-width:640px){.ghero .hfoto2 img{max-height:180px;object-fit:cover;width:100%}}

/* ---- strakker (24-09-2026): minder witruimte, nette productkaarten ---- */
.sec{padding:48px 0}

.hhero{padding:8px 0 28px}
.hh-grid{gap:32px}
.kop2{margin-bottom:18px}
.kop2 h2{font-size:clamp(24px,2.6vw,30px)}
.split>img{min-height:300px;max-height:380px}
.split-t{padding:32px 36px}
.split-t h2{font-size:clamp(22px,2.4vw,28px)}
.gtekst h2{margin-top:36px}
.faq details{padding:2px 0}.faq details p a{color:var(--groen2);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.ptop{padding-top:16px}
#keuze,#beste{padding-top:40px;padding-bottom:40px}

/* productkaart: vaste beeldhoogte, label over het beeld, naam max 3 regels, prijs onderaan */
.kt{position:relative;padding:12px 12px 14px;min-width:0}
.kt .klbs{position:absolute;top:10px;left:10px;right:10px;z-index:1;margin:0}
.kt .b{height:132px;margin:14px 0 10px;background:#fff}
.kt .b img{max-height:124px;max-width:100%;mix-blend-mode:multiply}
.kt strong{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(1.3em * 3);word-break:normal;hyphens:manual}
.kt .p{padding-top:6px;border-top:1px solid var(--lijn)}
.lkk,.gblok-r,.rij-in{min-width:0}
.lkk img,.rb img,.ok-b img,.gblok-r img,.kz li img,.gzij-k img{mix-blend-mode:multiply}
.lkk strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kz li a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1;min-width:0}
.kz li span{flex:none}
.it strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mk{height:96px}
@media (max-width:640px){
 .sec{padding:32px 0}
 .hhero{padding:4px 0 20px}
 .kop2{margin-bottom:14px}
 .split-t{padding:22px 18px}
 .split>img{min-height:180px;max-height:220px}
 .kt .b{height:110px}.kt .b img{max-height:104px}
 #keuze,#beste{padding-top:28px;padding-bottom:28px}
}
.split{align-items:center}
.split>img{min-height:0;height:300px;max-height:none}
@media (max-width:640px){.split>img{height:190px}}

/* ---- 24-09-2026 (2): afbakening, kop, top 3, trustbalk, kruimelpad ---- */
main>section.sec,main>.top3w,main>.logoband{border-top:1px solid var(--lijn)}
main>.pkop+section,main>.pkop+.top3w{border-top:0}
.sec-grijs{background:#F3F6F2}
.kop2 h2{position:relative;padding-left:14px}
.kop2 h2::before{content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:4px;border-radius:4px;background:var(--mos)}
.kruimel{padding:14px 0 6px;font-size:14px}
.kruimel ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.kruimel li{display:flex;gap:6px;align-items:center;color:var(--grijs)}
.kruimel li+li::before{content:"›";color:var(--grijs)}
.kruimel a{color:var(--groen2);font-weight:500}
.kruimel a:hover{text-decoration:underline}
.pkop{background:linear-gradient(180deg,var(--mint),#fff);padding:0 0 20px}
.pkop h1{font-size:clamp(28px,3.4vw,40px);margin:6px 0 8px}
.pkop .lead{font-size:17px;color:var(--grijs);max-width:720px;margin:0}
.pkop-in{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.pkop .merklogo{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--lijn);border-radius:10px;padding:8px 16px;margin-bottom:8px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.pkop .merklogo img{max-height:36px;width:auto;display:block}
.kg-rij{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.kg-rij li{background:#fff;border:1px solid var(--lijn);border-radius:999px;padding:6px 14px;font-size:14px;color:var(--grijs)}
.pkop-rijk{padding-bottom:32px}
.pkaart2{margin-top:-20px;margin-bottom:28px;position:relative;z-index:1;background:#fff;border:1px solid var(--lijn);border-radius:var(--r);box-shadow:var(--sch2);padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.pkaart2-chips{display:flex;flex-wrap:wrap;gap:28px}
.pkaart2-c{display:flex;gap:10px;align-items:center}
.pkaart2-c svg{color:var(--groen2);flex:none}
.pkaart2-c small{display:block;font-size:12.5px;color:var(--grijs)}
.pkaart2-c b{font-family:Poppins,sans-serif;font-size:19px}
@media (max-width:640px){
 .pkaart2{flex-direction:column;align-items:stretch;margin-top:-20px;padding:16px}
 .pkaart2-chips{display:grid;grid-template-columns:1fr 1fr;gap:14px}
 .pkaart2 .knop{width:100%}
}
.kg-rij b{color:var(--groen)}
.kg-rij .link{font-size:14px}
.top3w{padding:32px 0;background:#fff}
.top3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.t3{position:relative;border:1px solid var(--lijn);border-radius:var(--r);background:#fff;padding:16px 18px 18px;display:flex;flex-direction:column;box-shadow:var(--sch);min-width:0}
.t3-1{border:2px solid var(--groen)}
.t3-nr{position:absolute;top:14px;right:16px;font-family:Poppins,sans-serif;font-weight:700;font-size:28px;color:var(--mint);line-height:1}
.t3-1 .t3-nr{color:var(--mos)}
.t3 .klbs{min-height:26px;padding-right:36px}
.t3-b{height:150px;display:grid;place-items:center;margin:8px 0 10px}
.t3-b img{max-height:150px;max-width:100%;object-fit:contain;mix-blend-mode:multiply}
.t3 .merk{font-size:12.5px;color:var(--grijs);font-weight:600}
.t3 h3{font-size:18px;line-height:1.3;margin:2px 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.t3-r{list-style:none;display:grid;gap:5px;margin:0 0 14px;padding:0;font-size:14px}
.t3-r li{display:flex;gap:7px;align-items:flex-start}
.t3-r svg{flex:none;margin-top:3px;color:var(--groen2)}
.t3-r .r-let svg{color:var(--rood)}
.t3-p{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--lijn);padding-top:12px}
.t3-p small{display:block;font-size:12px;color:var(--grijs)}
.t3-p b{font-family:Poppins,sans-serif;font-size:22px}
.t3-p .knop{height:42px;padding:0 14px;font-size:14.5px}
.hkop{padding-bottom:28px}
.hkop h1{font-size:clamp(30px,3.8vw,46px);margin-top:18px}
.hkop-in{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.hkop .bzoek{margin-top:18px}
.hinsect{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hi{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--lijn);border-radius:12px;padding:8px;transition:.2s}
.hi:hover{border-color:var(--groen);box-shadow:var(--sch)}
.hi img{width:56px;height:56px;border-radius:9px;object-fit:cover;flex:none}
.hi strong{display:block;color:var(--groen);font-size:15.5px}
.hi small{font-size:13px;color:var(--grijs)}
.gtoc{display:block}
details.gtoc{border:1px solid var(--lijn);border-radius:12px;background:#fff;padding:0;margin:0 0 26px}
details.gtoc summary{padding:12px 16px;font-weight:600;color:var(--groen);cursor:pointer}
details.gtoc ol{padding:0 18px 14px 36px;margin:0}
.gzij-top{border:1px solid var(--lijn);border-radius:var(--r);background:#fff;padding:16px;display:grid;gap:10px;box-shadow:var(--sch)}
.gzij-top>strong{font-family:Poppins,Inter,sans-serif;color:var(--groen);font-size:17px}
.gzt{display:flex;gap:10px;align-items:center;border:1px solid var(--lijn);border-radius:12px;padding:8px 10px;transition:.2s;min-width:0}
.gzt:hover{border-color:var(--groen)}
.gzt-nr{font-family:Poppins,sans-serif;font-weight:700;color:var(--mos);font-size:18px;width:16px;flex:none}
.gzt img{width:40px;height:48px;object-fit:contain;flex:none;mix-blend-mode:multiply}
.gzt-t{display:grid;gap:2px;min-width:0}
.gzt-t b{font-size:14px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gzt-t small{font-size:12.5px;color:var(--grijs)}
.gzt-t .klbs{margin:0}
.gzij-top .knop{width:100%}
.chiprij{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--lijn);border-radius:999px;padding:8px 14px;background:#fff;font-weight:500}
.mdiepte{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.mdiep{border:1px solid var(--lijn);border-radius:var(--r);background:#fff;padding:18px 20px}
.mdiep h3{font-size:16.5px;margin:0 0 4px}
.mdiep-n{margin:0 0 10px;color:var(--grijs);font-size:13.5px}
.mdiep .lb{text-decoration:none}
.mhubs{display:flex;flex-direction:column;gap:22px}
.mhub h3{font-size:17px;margin:0 0 10px}
.mhub h3 a{color:inherit}
.msub{font-size:15px;color:var(--grijs);margin:28px 0 12px;font-weight:600}
.msub:first-of-type{margin-top:0}
.chip:hover{border-color:var(--groen)}
.chip small{color:var(--grijs);margin-left:4px}
.wtab2-s{display:flex;gap:10px;align-items:center}
.wtab2-s img{width:40px;height:44px;object-fit:contain;mix-blend-mode:multiply;flex:none}
.wtab2-s span{display:grid}
.wtab2-s small,.wtab2 td small{color:var(--grijs);font-size:12.5px}
.wtab2-eld{display:flex;align-items:center;justify-content:space-between;gap:10px}
.wtab2 .knop{height:38px;font-size:14px;padding:0 14px}
.wtab2-knop{text-align:right}
.wk-beste{max-width:380px}
@media (max-width:1080px){.top3{grid-template-columns:1fr 1fr}.hkop-in{grid-template-columns:1fr}}
@media (max-width:640px){
 .top3{grid-template-columns:1fr;gap:10px}
 .t3{padding:12px 14px 14px}
 .t3-b{height:110px}.t3-b img{max-height:110px}
 .top3w{padding:20px 0}
 .hinsect{grid-template-columns:1fr}
 .pkop-in{align-items:flex-start}
}

.hkop{padding-top:8px}
.hkop-in{padding-top:8px}
@media (max-width:640px){.pkop .kg-rij{display:none}.pkop .lead{font-size:16px}}

/* Rangnummer in de vergelijker (Rowan, 25-09-2026): volgt sortering, filter en pagina. */
.rb{position:relative}
.rnr{position:absolute;top:-6px;left:-6px;z-index:1;min-width:30px;height:30px;padding:0 7px;border-radius:15px;background:var(--groen);color:#fff;font:700 14px/30px Poppins,sans-serif;text-align:center;box-shadow:0 0 0 3px #fff}
@media (max-width:640px){.logos{overflow-x:auto;justify-content:flex-start;padding-bottom:4px}.logos img{flex:none}}
.hi-ic{width:56px;height:56px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--groen);color:var(--mos)}
#gidsen{scroll-margin-top:90px}

/* ---- 25-09-2026: hubkop en top 3 volledig boven de vouw (Rowan). Doel: onderkant kaarten <= ~650px op desktop. ---- */
.pkop-hub{padding-bottom:14px}
.pkop-hub .kruimel{padding:10px 0 2px}
.pkop-hub h1{font-size:clamp(26px,2.6vw,34px);margin:2px 0 4px}
.pkop-hub .lead{font-size:15.5px;max-width:760px}
.pkop-hub .pkop-in{gap:12px}
.pkop-hub .kg-rij li{padding:4px 12px;font-size:13.5px}
.top3w{padding:24px 0}
.top3{gap:14px}
.t3{padding:12px 16px 14px}
.t3-nr{top:10px;font-size:24px}
.t3-b{height:108px;margin:4px 0 6px}.t3-b img{max-height:108px}
.t3 h3{font-size:16.5px;margin:0 0 6px}
.t3-r{gap:3px;margin:0 0 10px;font-size:13.5px}
.t3-p{padding-top:10px}.t3-p b{font-size:21px}
@media (max-width:1080px){.top3{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.top3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
 .top3{grid-template-columns:1fr;gap:8px}
 .t3{display:grid;grid-template-columns:64px 1fr;grid-template-areas:"b l" "b h" "p p";column-gap:12px;row-gap:2px;padding:10px 12px}
 .t3 .klbs{grid-area:l;min-height:0;padding-right:28px}
 .t3-b{grid-area:b;height:72px;margin:0}.t3-b img{max-height:72px}
 .t3 h3{grid-area:h;font-size:15px;min-height:0;margin:0}
 .t3 .merk,.t3-r{display:none}
 .t3-p{grid-area:p;margin-top:6px;padding-top:8px}.t3-p b{font-size:19px}.t3-p .knop{height:38px}
 .t3-nr{top:8px;right:12px;font-size:20px}
}
.pkop-hub .kruimel{padding:8px 0 0}
.pkop-hub .lead{max-width:none}
.pkop-hub .pkop-in{gap:10px}
.t3-b{height:88px}.t3-b img{max-height:88px}
@media (max-width:640px){.t3-b{height:72px}.t3-b img{max-height:72px}}
@media (max-width:640px){
 .t3{grid-template-areas:"b l" "b h" "b p";align-items:start}
 .t3-p{margin-top:4px;padding-top:6px}
 .t3-b{align-self:center}
}
@media (max-width:640px){
 .t3 .klbs .kl+.kl{display:none}
 .t3-p small{display:inline;margin-right:4px}
 .t3-p>div{display:flex;align-items:baseline}
 .pkop-hub .lead{font-size:14.5px;line-height:1.45}
 .pkop-hub h1{margin:0 0 2px}
}
.t3-p b{white-space:nowrap}
@media (max-width:640px){.t3-p{gap:8px}.t3-p .knop{padding:0 12px;font-size:14px}}
.t3 .klbs{flex-wrap:nowrap;overflow:hidden}
.t3 .kl{white-space:nowrap}.t3 .kl+.kl{min-width:0;overflow:hidden;text-overflow:ellipsis;display:inline-block}
.t3-r{font-size:13px}
.t3 .klbs{padding-right:26px;gap:5px}
.t3 .kl{font-size:11.5px;padding-left:7px;padding-right:7px}

/* mobiel: niets breder dan het scherm (25-09-2026) */
@media (max-width:1080px){.gids-grid{grid-template-columns:minmax(0,1fr)}.split>*{min-width:0}body.product{padding-bottom:0}body.product .voet .onder{padding-bottom:100px}}
@media (max-width:640px){
 .split-t .knop,.gidskaart .knop{white-space:normal;height:auto;min-height:48px;padding:12px 18px;text-align:center;line-height:1.3}
 .gtekst .tabel{font-size:13.5px;table-layout:fixed}.gtekst .tabel th,.gtekst .tabel td{padding:8px;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
 .stapel,.stapel tbody,.stapel tr,.stapel td{display:block;width:100%}
 .stapel tr:first-child{display:none}
 .stapel tr{border-top:1px solid var(--lijn);padding:14px 16px}.stapel tr:nth-child(2){border-top:0}
 .stapel td{border:0;padding:3px 0 3px 42%;position:relative;text-align:right;line-height:1.45}
 .stapel td[data-l]::before{content:attr(data-l);position:absolute;left:0;top:4px;max-width:40%;color:var(--grijs);font-size:13px;font-weight:400;text-align:left}
 .stapel td:empty{display:none}.stapel td .kl{margin-left:4px}
 .stapel .wtab2-knop{padding:8px 0 0;text-align:left}.stapel .wtab2-knop .knop{width:100%}
 .stapel td:first-child{display:block;text-align:left;padding:0 0 8px}
 .stapel td:first-child .wlogo img{max-width:110px}
}

/* ---- 25-09-2026 (2): mobiel uitlijnen en witruimte (Rowan: "veel witruimte, lijnt niet mooi uit") ---- */
.gm img{flex:none}
.gbron .link{display:inline}
@media (max-width:1080px){.logoband .logos{align-self:stretch;width:100%}}
@media (max-width:640px){
 /* vergelijkerrij: prijs en knop in dezelfde kolom als titel en labels, net als de top 3 */
 .rij-in{grid-template-columns:64px minmax(0,1fr) auto;grid-template-areas:"b i i" ". p a";gap:10px 12px}
 .rb{width:64px;height:64px}.rb img{max-height:64px}
 .rp{align-self:center;align-items:baseline;column-gap:5px;row-gap:0}.rp b{font-size:19px;white-space:nowrap}.rp .p1{flex-basis:100%}
 .ra{align-self:center}.ra .knop{padding:0 12px}
 .wtab{margin:0 12px 12px}
 /* top 3: niet breder dan de kaart op 360 */
 .t3{grid-template-columns:64px minmax(0,1fr)}.t3-p{flex-wrap:wrap;row-gap:6px}
 /* winkelkaarten op home: logo en cijfers naast elkaar in plaats van onder elkaar */
 .wgrid{gap:10px}
 .wk{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l d" "k k";gap:10px 12px;align-items:center;padding:14px 16px}
 .wk .wl{grid-area:l;height:36px;margin:0}.wk .wl img{max-height:32px;max-width:120px}
 .wk dl{grid-area:d;gap:16px;padding:0;margin:0;border:0}.wk dd{font-size:16px}
 .wk .link{grid-area:k;padding-top:10px;border-top:1px solid var(--lijn)}
 /* merktegels: meegroeien met de tekst in plaats van een vaste hoogte */
 .mk{height:auto;min-height:96px}.mk small{text-align:center;line-height:1.35}
 /* productpagina: minder lucht rond de foto, vergelijktabel past in de breedte */
 .ptop{gap:20px}.galerij{height:280px}.galerij img{max-height:236px}
 .twee{gap:20px}
 .vmk{table-layout:fixed;font-size:13.5px}.vmk th:first-child,.vmk td:first-child{width:28%}
 .vmk th,.vmk td{padding:8px;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
 .vmk .knop{white-space:normal;height:auto;min-height:40px;width:100%;padding:8px;font-size:13.5px;line-height:1.25;text-align:center}
 .ptab .wlogo img{max-width:84px}
 /* gestapelde tabellen: waarden in één kolom links uitgelijnd, lange namen lezen niet meer rafelig */
 .stapel td{text-align:left}
 /* sprayblok in de gids: minder geneste binnenruimte, meer plek voor de naam */
 .gblok{padding:12px;margin:14px 0 22px}.gblok-r{padding:10px;gap:10px}.gblok-r img{width:36px;height:44px}
 /* paginering op één regel: Vorige en Volgende niet meer los eronder */
 .pg{gap:4px}.pg a,.pg span.aan,.pg span.uit,.pg button{min-width:36px;padding:0 9px}
}
@media (max-width:380px){.ra .knop{padding:0 10px;font-size:13px}.rp .p1{white-space:nowrap}}