/* ISDE-checker. One system font, three brand colours (brand/BRAND.md). Mobile first.
   Kentekengeel is only for meldcode plates, the search button and focus rings. */
:root{
  --ink:#0F3D2E;--green:#146B4A;--plate:#FFCC00;--plate-dark:#F2BA00;
  --paper:#FFFFFF;--mist:#F1F5F2;--line:#D5E0DA;--muted:#4A5D55;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --wrap:68rem;--measure:42rem;--pad:clamp(1rem,4vw,2.5rem);--r:.6rem;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:1.0625rem/1.6 var(--font);overflow-wrap:break-word}
img{max-width:100%;height:auto}
a{color:var(--green);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--ink);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 2px var(--plate)}
#main:focus{outline:none;box-shadow:none}
:target{scroll-margin-top:1rem}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;top:.5rem;left:var(--pad);z-index:9;padding:.7rem 1rem;border:2px solid var(--ink);border-radius:var(--r);background:var(--plate);color:var(--ink);font-weight:700;transform:translateY(-250%)}
.skip:focus{transform:none}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

/* type */
h1,h2,h3{margin:0 0 .5em;font-weight:800;line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(1.875rem,1.3rem + 2.4vw,2.875rem);overflow-wrap:anywhere}
h2{margin-top:2.25em;font-size:clamp(1.375rem,1.15rem + .9vw,1.75rem)}
p,ul,ol,dl,table{margin:0 0 1rem}
.lead{max-width:var(--measure);font-size:clamp(1.125rem,1.03rem + .4vw,1.3125rem);line-height:1.5}
.note{max-width:var(--measure);color:var(--muted);font-size:.9375rem}
.prose>p,.prose>ul,.prose>ol,.prose>dl{max-width:var(--measure)}
.dots{padding-left:1.25rem}
.dots li{margin-bottom:.35rem}
.dots li::marker{color:var(--green)}

/* header and footer */
.site-head{border-top:6px solid var(--ink);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;column-gap:2rem;padding-block:.375rem}
.brand{display:inline-flex;align-items:center;gap:.6rem;min-height:48px;color:var(--ink);font-size:1.25rem;font-weight:800;letter-spacing:-.015em;text-decoration:none}
.brand:hover{color:var(--ink)}
.brand img{width:2.25rem;height:2.25rem}
.site-nav ul{display:flex;margin:0;padding:0;list-style:none}
.site-nav a{display:flex;align-items:center;min-height:44px;padding:0 .8rem;border-radius:var(--r);color:var(--ink);font-weight:600;text-decoration:none}
.site-nav a:hover{background:var(--mist);color:var(--ink)}
.site-nav a[aria-current="page"]{text-decoration:underline 3px var(--green);text-underline-offset:.5em}
/* language switch: "EN" on Dutch pages, "NL" on English pages; same page in the other language */
.site-nav{margin-left:auto}
.lang{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 .7rem;border:2px solid var(--ink);border-radius:var(--r);color:var(--ink);font-size:.9375rem;font-weight:800;letter-spacing:.04em;text-decoration:none}
.lang:hover{background:var(--mist);color:var(--ink)}
main{display:block;padding-top:clamp(1.25rem,3vw,2.25rem)}
.home main{padding-top:0}
.site-foot{margin-top:clamp(3rem,8vw,5rem);border-top:1px solid var(--line);background:var(--mist);font-size:.9375rem}
.site-foot .wrap{padding-block:2rem 2.25rem}
.site-foot p{max-width:46rem;margin:0 0 .75rem}
.foot-nav{display:flex;flex-wrap:wrap;column-gap:1.5rem;margin:.25rem 0 0;padding:0;list-style:none}
.foot-nav a{display:inline-flex;align-items:center;min-height:44px}

/* home: question and search */
.hero{border-bottom:1px solid var(--line);background:var(--mist)}
.hero .wrap{padding-block:clamp(2rem,6vw,4.25rem) clamp(1.75rem,4vw,2.75rem)}
.hero h1{max-width:12.5em;margin-bottom:.35em;font-size:clamp(2.375rem,1.25rem + 4.8vw,4.5rem);line-height:1.02;letter-spacing:-.035em;overflow-wrap:normal}
.search{max-width:44rem;margin-top:1.75rem;scroll-margin-top:.75rem}
.search label{display:block;margin-bottom:.45rem;font-weight:700}
.field{display:flex;gap:.5rem}
.field input{flex:1 1 auto;min-width:0;min-height:3.5rem;padding:.5rem 1rem;border:2px solid var(--ink);border-radius:var(--r);background:var(--paper);color:var(--ink);font:inherit;font-size:1.1875rem;-webkit-appearance:none;appearance:none}
.field input::placeholder{color:#5A6C64;opacity:1}
.field button{flex:none;min-height:3.5rem;padding:0 1.35rem;border:2px solid var(--ink);border-radius:var(--r);background:var(--plate);color:var(--ink);font:inherit;font-weight:800;cursor:pointer}
.field button:hover{background:var(--plate-dark)}
.search-mini{margin:3rem 0 1.25rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.search-mini .field input,.search-mini .field button{min-height:3rem}
.try{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:1rem 0 0;color:var(--muted);font-size:.9375rem}
.try a,.jump a{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:0 .85rem;border:1px solid var(--line);border-radius:2rem;background:var(--paper);color:var(--ink);font-weight:600;text-decoration:none}
.try a:hover,.jump a:hover{border-color:var(--ink);color:var(--ink)}
.stamp{margin:1.25rem 0 0;color:var(--muted);font-size:.9375rem}
.results{padding-top:1.5rem}
.count{margin:0 0 .75rem;font-weight:700}
.count:empty{margin:0}
.nohit{max-width:var(--measure);margin-bottom:1rem;padding:1.25rem 1.5rem .25rem;border-radius:var(--r);background:var(--mist)}
.nohit ul{padding-left:1.25rem}
.more a,.nohit li a{display:inline-flex;align-items:center;min-height:44px}
.info{display:grid;column-gap:3rem}
.info h2{margin-top:1.25em}
.top .brands{columns:13rem auto}

/* the meldcode plate */
.plate{display:inline-block;padding:.12em .45em;border:2px solid var(--ink);border-radius:.35em;background:var(--plate);color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.06em;line-height:1.3;white-space:nowrap}
.plate-xl{display:inline-flex;align-items:stretch;overflow:hidden;padding:0 .42em 0 0;border-width:3px;border-radius:.2em;font-size:clamp(2rem,1.45rem + 2.4vw,2.75rem);line-height:1.3}
.plate-xl .band{display:flex;align-items:center;justify-content:center;width:1.05em;margin-right:.38em;background:var(--green);color:var(--paper)}
.plate-xl .band svg{width:.6em;height:.6em}

/* lists of models */
.list{width:100%;max-width:50rem;border-collapse:collapse}
.list th{padding:.55rem .75rem .55rem 0;border-bottom:2px solid var(--ink);color:var(--muted);font-size:.875rem;font-weight:700;text-align:left;white-space:nowrap}
.list td{padding:0 .75rem 0 0;border-bottom:1px solid var(--line);vertical-align:middle}
.list th:last-child,.list td:last-child{padding-right:0;text-align:right}
.list .m{width:100%}
.list .m a{display:block;min-height:44px;padding:.65rem 0;color:var(--ink);text-decoration:none}
.list .b{display:block;color:var(--muted);font-size:.875rem;font-weight:600;line-height:1.35}
.list .n{display:block;color:var(--green);font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.list .m a:hover .n{text-decoration:underline}
.list .x{display:block;margin-top:.1rem;color:var(--muted);font-size:.875rem;line-height:1.35}
.list .c,.list .s{white-space:nowrap}
.list .plate{font-size:.9375rem}
.list .s{font-weight:800;font-variant-numeric:tabular-nums}
.group h2{margin-top:2rem}
.count-h,h2 .count{margin-left:.3em;color:var(--muted);font-size:.6em;font-weight:600;letter-spacing:0}
.jump ul,.az ul{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1rem;padding:0;list-style:none}
.num{color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums}
.search-filter{margin:1.5rem 0 .75rem}
.jump-brands summary{padding:.65rem 0;color:var(--green);font-weight:700;line-height:1.5;cursor:pointer}
.jump-brands .brands{margin-top:.5rem}

/* product page */
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;margin:0 0 .25rem;padding:0;list-style:none;font-size:.9375rem}
.crumbs li{display:flex;align-items:center}
.crumbs li+li::before{content:"";width:.42em;height:.42em;margin:0 .7em 0 .4em;border:solid var(--muted);border-width:2px 2px 0 0;transform:rotate(45deg)}
.crumbs a{display:inline-flex;align-items:center;min-width:44px;min-height:44px}
.verdict{display:flex;align-items:center;gap:.55rem;margin:0 0 1.5rem;color:var(--green);font-weight:700}
.verdict .i{flex:none;width:1.6rem;height:1.6rem}
.answer{display:flex;flex-wrap:wrap;gap:1.5rem 4rem;margin:0 0 1.75rem;padding:1.5rem 0 1.75rem;border-top:2px solid var(--ink);border-bottom:1px solid var(--line)}
.answer dt{margin-bottom:.5rem;color:var(--muted);font-size:.9375rem;font-weight:700}
.answer dd{margin:0}
.a-code dd{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem}
.amount{font-size:clamp(2.25rem,1.55rem + 2.9vw,3.25rem);font-weight:800;line-height:1.15;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.btn-copy{display:inline-flex;align-items:center;min-height:44px;padding:0 1rem;border:2px solid var(--green);border-radius:var(--r);background:var(--paper);color:var(--green);font:inherit;font-size:1rem;font-weight:700;cursor:pointer}
.btn-copy:hover{border-color:var(--ink);color:var(--ink)}
.spec{max-width:var(--measure)}
.spec div{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--line)}
.spec dt{color:var(--muted);font-weight:600}
.spec dd{margin:0;font-weight:700}
.updated{margin:0 0 1.25rem}
.about{max-width:var(--measure)}
.related h2{margin-top:2rem}

/* brands and explanation */
.brands{margin:0 0 1rem;padding:0;list-style:none;columns:14rem auto;column-gap:2.5rem}
.brands li{break-inside:avoid}
.brands a{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:44px;border-bottom:1px solid var(--line);color:var(--ink);font-weight:600;text-decoration:none}
.brands a:hover{color:var(--green)}
.az a{display:grid;place-items:center;min-width:44px;min-height:44px;border:1px solid var(--line);border-radius:var(--r);color:var(--ink);font-weight:700;text-decoration:none}
.az a:hover{border-color:var(--ink);color:var(--ink)}
.letter h2{margin:1.75rem 0 .25rem;padding-bottom:.2rem;border-bottom:2px solid var(--ink);font-size:1.5rem}
.letter h2 a{color:inherit}
.az a[aria-current="page"]{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.pager{margin:0 0 1rem}
.pager .az ul{margin-bottom:.25rem}
.pager-pn{display:flex;flex-wrap:wrap;gap:0 1.5rem;margin:0}
.pager-pn a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.pager-pn a[rel="next"]{margin-left:auto}
.sum{width:100%;max-width:var(--measure);border-collapse:collapse}
.sum th,.sum td{padding:.7rem .75rem .7rem 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.sum thead th{border-bottom:2px solid var(--ink);color:var(--muted);font-size:.875rem}
.sum .x{display:block;color:var(--muted);font-size:.875rem;font-weight:400}
.sum td{padding-right:0;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.sum thead th:last-child{padding-right:0;text-align:right}
.terms dt{margin-top:1rem;font-weight:800}
.terms dd{margin:0}
.steps{padding:0;list-style:none;counter-reset:step}
.steps li{position:relative;min-height:2.25rem;padding:.15rem 0 .9rem 3rem;counter-increment:step}
.steps li::before{content:counter(step);position:absolute;top:0;left:0;display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--ink);color:var(--paper);font-size:.9375rem;font-weight:800}

/* guides */
.guides{max-width:var(--measure);margin:1.5rem 0 1rem;padding:0;list-style:none;border-top:2px solid var(--ink)}
.guides li{padding:1rem 0 .25rem;border-bottom:1px solid var(--line)}
.guides h2{margin:0 0 .25rem;font-size:1.375rem}
.guides h2 a{display:inline-flex;align-items:center;min-height:44px}
.md>h2,.md>h3,.md>h4,.md>h5,.md>h6,.md>blockquote,.md>pre,.md>hr{max-width:var(--measure)}
.md h3{margin-top:1.75em;font-size:1.25rem}
.md h4,.md h5,.md h6{margin:1.5em 0 .5em;font-size:1.0625rem}
.md>ul,.md>ol{padding-left:1.5rem}
.md li{margin-bottom:.35rem}
.md li>ul,.md li>ol{margin:.35rem 0 0;padding-left:1.5rem}
.md li::marker{color:var(--green)}
.md blockquote{margin:0 0 1rem;padding:.25rem 0 .25rem 1.25rem;border-left:4px solid var(--green);color:var(--muted)}
.md blockquote>:last-child{margin-bottom:0}
.md code{padding:.1em .3em;border-radius:.3em;background:var(--mist);font:.9em/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.md pre{margin:0 0 1rem;padding:1rem;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--mist)}
.md pre code{padding:0;background:none;white-space:pre}
.md hr{margin:2rem 0;border:0;border-top:1px solid var(--line)}

/* bol.com affiliate box (model pages and guides) */
.aff{max-width:var(--measure);margin:2.5rem 0 1rem;padding:1.25rem 1.5rem .5rem;border-radius:var(--r);background:var(--mist)}
.aff h2{margin:0 0 .25rem;font-size:1.25rem}
.aff p{margin:0 0 .5rem}
.aff ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:0 1.5rem;margin:0 0 .5rem;padding:0;list-style:none}
.aff li{margin:0}
.aff li a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.aff .aff-note{color:var(--muted);font-size:.875rem}
.aff .aff-note a{display:inline-flex;align-items:center;min-height:44px;color:inherit}

@media (max-width:39.99em){
  .site-nav{width:100%}
  .site-nav ul{justify-content:space-between}
  .site-nav a{padding:0 .5rem}
  .site-nav li:first-child a{padding-left:0}
  .site-nav li:last-child a{padding-right:0}
  .spec div{grid-template-columns:minmax(0,9rem) minmax(0,1fr)}
}
/* Header: below 48em the language switch sits next to the logo and the menu gets its own row.
   From 48em to 55em logo, menu and switch fit on one row with tighter menu padding. */
@media (max-width:47.99em){
  .site-nav{order:2;width:100%}
  .lang{order:1;margin-left:auto}
}
@media (min-width:48em) and (max-width:54.99em){
  .site-head .wrap{column-gap:1rem}
  .site-nav a{padding:0 .5rem}
}
@media (max-width:27.49em){
  .site-nav ul{display:grid;grid-template-columns:repeat(3,1fr)}
  .site-nav a,.site-nav li:first-child a,.site-nav li:last-child a{justify-content:center;min-width:44px;padding:0 .25rem;font-size:1rem}
}
@media (min-width:52em){
  .info{grid-template-columns:1fr 1fr}
}
@media print{
  .skip,.site-nav,.lang,.search,.try,.btn-copy,.az,.jump,.jump-brands,.pager,.foot-nav,.aff{display:none!important}
  .hero,.site-foot{background:none}
  a{color:inherit;text-decoration:none}
  .plate,.plate-xl .band,.steps li::before{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}