*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --accent: #0e7490;        
  --accent-600: #155e75;    
  --yellow: var(--accent);
  --yellow-600: var(--accent-600);
  --hl: #a5f3fc;            
  --warm: #ffb703;          
  --ok: #059669;            
  --ink: #0f2230;           
  --dark: #0c2a3b;          
  --dark-2: #081d29;        
  --bg: #eef5f7;            
  --card: #ffffff;
  --line: #d5e3e8;
  --muted: #5b6a70;
  --muted-light: rgba(255, 255, 255, 0.62);
  --green: #059669;         
  --blue: #15394a;          
  --radius: 14px;
  --radius-sm: 10px;
  --maxw: 1240px;
  --shadow: 0 12px 36px rgba(8, 30, 40, 0.08);
  --shadow-sm: 0 4px 14px rgba(8, 30, 40, 0.06);
  font-family: "Inter", "Inter Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif; }
/* Inter (OFL), sinds 24 okt 2026 in plaats van Figtree, net als op
   koelaanhangerdirect.nl (keuze van Quincy): één variabel bestand, gewicht
   300–800, Nederlandse subset. De fallback is Arial op de breedte en hoogte
   van Inter: geen verspringing als het font binnenkomt. */
@font-face { font-family: "Inter";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/inter-nl-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131-0133, 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+2190-2193, U+2212, U+2215, U+2264, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Roboto");
  size-adjust: 105.18%; ascent-override: 92.1%; descent-override: 22.93%; line-gap-override: 0%; }
html { scroll-padding-top: 80px; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body { font-family: "Inter", "Inter Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
.container { width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 24px; }
h1, h2, h3 { font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; }
.section-title { font-size: clamp(2.1rem, 4.5vw, 3.3rem);
  margin-bottom: 8px; }
.hl { position: relative; white-space: nowrap; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hl-yellow { background: var(--hl);
  color: var(--ink);
  padding: 0 .18em; }
.btn { display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1;
  padding: 19px 34px;
  border: 0;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap; }
.btn:hover {  }
.btn-yellow { background: var(--yellow); color: #fff; }
.btn-yellow:hover { background: var(--yellow-600); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.18); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.arrow-link { display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: var(--fs-small);
  transition: gap .15s ease; }
.arrow-link:hover { gap: 12px; }
.arrow-link svg { width: 15px; height: 15px; }
.site-header { position: sticky;
  top: 0;
  z-index: 60;
  background: #fff;
  border-bottom: 1px solid var(--line); }
.site-header .container { display: flex;
  align-items: center;
  gap: 18px;
  height: 78px; }
.logo { display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.03em; }
.logo .logo-mark { width: 38px; height: 38px;
  display: grid; place-items: center;
  background: var(--ink);
  color: var(--yellow); }
.logo .logo-mark svg { width: 22px; height: 22px; }
.logo b { color: var(--ink); }
.logo span { color: var(--yellow-600); }
.main-nav { margin-left: 4px; }
.main-nav > ul { display: flex; gap: 2px; }
.main-nav > ul > li > a { display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 13px;
  font-weight: 500;
  font-size: .96rem;
  white-space: nowrap;
  border-radius: 8px;
  transition: background .15s ease; }
.main-nav > ul > li > a:hover { background: #f2f2f2; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.header-phone { display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: .95rem;
  white-space: nowrap; }
.header-phone svg { width: 16px; height: 16px; color: var(--yellow-600); flex: none; }
.header-actions .btn { padding: 14px 22px; white-space: nowrap; }
.nav-toggle { display: none;
  width: 44px; height: 44px; flex: none;
  background: var(--ink);
  border: 0; cursor: pointer;
  flex-direction: column; gap: 5px;
  align-items: center; justify-content: center; }
.nav-toggle span { width: 20px; height: 2px; background: #fff; transition: .2s; }
.hero { position: relative;
  background: linear-gradient(180deg, #0a1f2b 0%, #0e3446 100%);
  color: #fff;
  overflow: hidden; }
.hero::before { content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(165, 243, 252,.14), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 20h40M20 0v40' stroke='%23ffffff' stroke-opacity='.03' stroke-width='1'/%3E%3C/svg%3E");
  pointer-events: none; }
.hero-water { position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, rgba(11,17,25,.94) 0%, rgba(11,17,25,.72) 45%, rgba(11,17,25,.35) 100%),
    radial-gradient(140% 120% at 90% 60%, #135873 0%, #0c2a3b 45%, #06151f 80%); }
.hero .container { position: relative; z-index: 2; }
.hero-inner { min-height: 560px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 90px 0 130px;
  max-width: 760px; }
.hero .stars { color: var(--yellow); letter-spacing: 2px; }
.hero h1 { font-size: clamp(2.6rem, 6vw, 5rem);
  font-weight: 700;
  margin-bottom: 22px; }
.hero .lead { font-size: 1.18rem;
  color: rgba(255,255,255,.82);
  max-width: 560px;
  margin-bottom: 34px; }
.hero-video.is-playing { opacity: 1; }
.chip-row { display: flex; flex-wrap: wrap; gap: 12px; }
.chip { display: inline-flex; align-items: center; gap: 12px;
  background: #fff;
  color: var(--ink);
  padding: 14px 18px;
  font-weight: 600;
  font-size: .95rem;
  min-width: 190px;
  justify-content: space-between;
  transition: transform .15s ease, box-shadow .15s ease; }
.chip:hover { box-shadow: 0 10px 24px rgba(0,0,0,.12); }
.chip svg { width: 15px; height: 15px; opacity: .6; }
.chip.chip-dark { background: var(--ink); color: #fff; }
.chip.chip-dark svg { opacity: .8; }
.section { padding: 84px 0; }
.section-head { display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px; }
.section-head .arrow-link { flex: none; }
.product-card { background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease; }
.product-card:hover { box-shadow: var(--shadow); }
.product-media { position: relative;
  aspect-ratio: 4 / 3;
  background: #edf6f8;
  display: grid;
  place-items: center;
  overflow: hidden; }
.product-media img.tank-photo { width: 100%; height: 100%;
  object-fit: contain;
  padding: 18px;
  mix-blend-mode: multiply; }
.product-media a.media-link { display: block; width: 100%; height: 100%; }
.product-media a.media-link img { transition: transform .28s ease; }
.product-card:hover .product-media a.media-link img {  }
.product-body h3 a { transition: color .15s ease; }
.product-body h3 a:hover { color: var(--yellow-600); }
.product-badge { position: absolute;
  top: 12px; left: 12px;
  background: var(--ink);
  color: #fff;
  font-size: var(--fs-micro);
  font-weight: 600;
  padding: 7px 12px;
  display: inline-flex; align-items: center; gap: 6px; }
.product-body { padding: 22px 20px 24px; display: flex; flex-direction: column; flex: 1; }
.product-body h3 { font-size: 1.12rem; margin-bottom: 8px; }
.product-body .desc { font-size: var(--fs-small); color: var(--muted);
  margin-bottom: 18px; flex: 1; }
.dark-section { background: var(--dark); color: #fff; position: relative; overflow: hidden; }
.dark-section .accent-block { position: absolute; top: 0; left: 0;
  width: 120px; height: 120px; background: var(--yellow);
  clip-path: polygon(0 0, 100% 0, 0 100%); }
.dark-section .accent-block.br { top: auto; left: auto; right: 0; bottom: 0;
  clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.split { display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 70px;
  align-items: center; }
.split-media { position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  background:
    linear-gradient(160deg, rgba(165, 243, 252,.12), transparent 60%),
    radial-gradient(120% 120% at 30% 20%, #135873, #06151f);
  display: grid; place-items: center; }
.split-body h2 { font-size: clamp(2.1rem, 4vw, 3.2rem); margin-bottom: 22px; }
.split-body p { color: rgba(255,255,255,.72); margin-bottom: 16px; font-size: .98rem; }
.split-body p a, .split-body p b { color: #fff; }
.split-body p a { text-decoration: underline; }
.usp-list { display: flex; flex-direction: column; gap: 14px; margin: 26px 0 30px; }
.usp-list li { display: flex; align-items: center; gap: 14px; font-weight: 500; }
.usp-list .tick { width: 26px; height: 26px; flex: none;
  border-radius: 50%; background: var(--yellow); color: var(--ink);
  display: grid; place-items: center; }
.usp-list .tick svg { width: 13px; height: 13px; }
.sector-card { scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column; }
.sector-media { position: relative;
  aspect-ratio: 16 / 10;
  min-height: 0;            
  background: linear-gradient(135deg, #cdeef3, #a8d5df);
  display: grid; place-items: center;
  overflow: hidden; }
.sector-media svg { width: 54px; height: 54px; color: rgba(16,22,29,.35); }
.sector-body { padding: 22px 22px 26px; }
.sector-body h3 { font-size: 1.2rem; margin-bottom: 10px; }
.sector-body p { font-size: var(--fs-small); color: var(--muted); margin-bottom: 16px; }
.site-footer { background: var(--dark-2); color: rgba(255,255,255,.7); padding: 70px 0 0; }
.footer-brand .logo { color: #fff; margin-bottom: 20px; }
.footer-brand .logo b { color: #fff; }
.footer-brand p { font-size: .9rem; margin-bottom: 18px; max-width: 320px; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-legal a:hover { color: #fff; }
.page-hero { background: var(--dark);
  color: #fff;
  padding: 64px 0 60px;
  position: relative;
  overflow: hidden; }
.page-hero::after { content:""; position:absolute; inset:0;
  background: radial-gradient(120% 100% at 85% 0%, rgba(165, 243, 252,.10), transparent 55%); }
.page-hero .container { position: relative; z-index: 2; }
.page-hero .breadcrumb { font-size: var(--fs-small); color: rgba(255,255,255,.55); margin-bottom: 22px; }
.page-hero .breadcrumb a:hover { color: #fff; }
.page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: 18px; max-width: 720px; }
.page-hero p { color: rgba(255,255,255,.75); max-width: 640px; font-size: 1.05rem; }
.catalog { padding: 56px 0 84px; }
.catalog-layout { display: grid; grid-template-columns: 268px 1fr; gap: 34px; align-items: start; }
.catalog-empty { padding: 40px 4px; color: var(--muted); font-size: .98rem; }
.catalog-empty a { color: var(--yellow-600); font-weight: 600; text-decoration: underline; }
.catalog-empty[hidden] { display: none; }
.cat-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.cat-tabs a { display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; font-weight: 600; font-size: .9rem; color: var(--ink);
  transition: border-color .15s ease, background .15s ease, color .15s ease; }
.cat-tabs a:hover { border-color: var(--ink); }
.cat-tabs a.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.catalog-main .catalog-toolbar { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 22px; flex-wrap: wrap; gap: 14px; }
.catalog-toolbar .result-count { font-weight: 600; font-size: 1rem; letter-spacing: 0; line-height: 1.4; }
.catalog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pagination { display: flex; gap: 10px; justify-content: center; margin-top: 44px; }
.pagination a { width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid var(--line); background: #fff; font-weight: 600; border-radius: 8px;
  transition: .15s; }
.pagination a:hover { border-color: var(--ink); }
.pagination a.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.faq { max-width: 860px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 1.05rem; font-weight: 600; color: var(--ink);
  padding: 22px 44px 22px 0; position: relative; }
.faq-q::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--yellow-600); transition: transform .2s; }
.faq-item.open .faq-q::after { content: "−"; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .28s ease; }
.faq-a p { padding: 0 0 22px; color: var(--muted); font-size: .96rem; }
.bg-white { background: #fff; }
@media (max-width: 1200px) {
  .header-phone { width: 44px; height: 44px; flex: none;
    justify-content: center;
    gap: 0;
    background: var(--yellow);
    color: #fff; }
  .header-phone svg { width: 19px; height: 19px; color: #fff; }
  .header-phone-label { display: none; }
}
@media (max-width: 1080px) {
  .catalog-layout { grid-template-columns: 1fr; }
  .catalog-grid { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split-media { aspect-ratio: 16/9; }
}
@media (max-width: 980px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .main-nav.open { display: block; position: absolute; top: 78px; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line); padding: 12px 24px 24px; }
  .main-nav.open ul { flex-direction: column; gap: 0; }
  .main-nav.open > ul > li > a { display: flex; width: 100%; padding: 14px 8px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .main-nav.open .nav-cta { display: block; padding-top: 16px; }
  .main-nav.open > ul > li.nav-cta > a, .main-nav.open > ul > li.nav-cta > button { display: inline-flex; width: 100%; justify-content: center; padding: 15px 22px; border-bottom: 0; border-radius: 0; font-weight: 600; }
}
@media (max-width: 620px) {
  .catalog-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .section { padding: 60px 0; }
  .hero-inner { min-height: 460px; }
}
/* Inter is breder dan Figtree: woordmerk strakker, anders liep de header op
   een telefoon buiten beeld (zoals op koelaanhangerdirect.nl). */
.logo .logo-word { letter-spacing: -.035em; }
.product-badge.badge-new { background: var(--hl); color: var(--ink); }
.product-badge.badge-right { left: auto; right: 12px; }
.spec-line { font-size: .8rem; color: var(--muted); margin-bottom: 18px; }
.spec-line .amount { color: var(--ink); font-weight: 700; font-size: 1rem; }
.card-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.card-ctas .btn { flex: 1 1 96px; }
.btn-sm { padding: 12px 16px; font-size: .9rem; }
.sector-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
a.sector-card { color: inherit; transition: transform .18s ease, box-shadow .18s ease; }
a.sector-card:hover { box-shadow: var(--shadow); }
.sector-card .sector-body { display: flex; flex-direction: column; flex: 1; }
.sector-media svg { color: var(--yellow-600); opacity: .92; }
.sector-link { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: .9rem; color: var(--yellow-600); }
.sector-link svg { width: 15px; height: 15px; transition: transform .15s ease; }
a.sector-card:hover .sector-link svg {  }
.reading-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 52px; align-items: start; }
.reading-prose p { margin-bottom: 16px; color: #33434d; }
.reading-prose p strong { color: var(--ink); }
.why-box { background: var(--dark); color: #fff; border-radius: var(--radius); padding: 34px 32px; position: sticky; top: 100px; }
.why-box h3 { font-size: 1.2rem; margin-bottom: 20px; }
.why-box ul li { display: flex; gap: 13px; margin-bottom: 15px; font-size: var(--fs-small); color: rgba(255,255,255,.86); line-height: 1.5; }
.why-box ul li:last-child { margin-bottom: 0; }
.why-box .tick { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--yellow); color: #fff; display: grid; place-items: center; margin-top: 1px; }
.why-box .tick svg { width: 12px; height: 12px; }
.why-box b { color: #fff; }
.offer-grid { display: grid; grid-template-columns: 1.4fr .9fr; gap: 40px; align-items: start; }
.offer-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow-sm); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-small); font-weight: 600; }
.field label .req { color: #c0392b; }
.offer-form .btn { width: 100%; margin-top: 6px; }
.form-note { font-size: var(--fs-micro); color: var(--muted); margin-top: 12px; text-align: center; }
.form-error { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: #fdecec; border: 1px solid #f3c2c2; color: #9b1c1c; font-size: var(--fs-small); line-height: 1.5; }
.form-error[hidden] { display: none; }
.turnstile-slot { margin-top: 16px; }
.trust-box { background: var(--dark); color: #fff; border-radius: var(--radius); padding: 34px 30px; }
.trust-box h3 { font-size: 1.35rem; margin-bottom: 22px; }
.trust-box ul li { display: flex; gap: 12px; align-items: center; margin-bottom: 15px; font-weight: 500; }
.trust-box .tick { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--yellow); color: #fff; display: grid; place-items: center; }
.trust-box .tick svg { width: 12px; height: 12px; }
.trust-box .contact-block { margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); }
.trust-box .contact-block li { display: flex; gap: 11px; margin-bottom: 11px; font-size: .9rem; font-weight: 400; color: rgba(255,255,255,.82); }
.trust-box .contact-block svg { width: 15px; height: 15px; color: var(--hl); flex: none; margin-top: 3px; }
@media (max-width: 1080px) {
  .reading-grid { grid-template-columns: 1fr; gap: 34px; }
  .why-box { position: static; }
  .offer-grid { grid-template-columns: minmax(0, 1fr); }
  .sector-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .sector-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .offer-form { padding: 26px 22px; }
}
.contact-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 34px; }
.contact-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 28px; text-align: center;
  transition: transform .18s ease, box-shadow .18s ease; }
.contact-card:hover { box-shadow: var(--shadow); }
.contact-card .ci-ico { width: 54px; height: 54px; margin: 0 auto 16px;
  background: #dcf1f5; color: var(--yellow-600);
  display: grid; place-items: center; border-radius: 12px; }
.contact-card .ci-ico svg { width: 26px; height: 26px; }
.contact-card h3 { font-size: 1.1rem; margin-bottom: 6px; }
.contact-card p { color: var(--muted); font-size: .95rem; }
.map-embed { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); line-height: 0; }
.map-embed iframe { width: 100%; height: 380px; border: 0; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-card { display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease; }
a.blog-card:hover { box-shadow: var(--shadow); }
.blog-media { position: relative; aspect-ratio: 16 / 10; background: #edf6f8; overflow: hidden; }
.blog-media img { width: 100%; height: 100%; object-fit: contain; padding: 22px; mix-blend-mode: multiply; }
.blog-tag { position: absolute; top: 14px; left: 14px;
  background: var(--ink); color: #fff; font-size: var(--fs-micro); font-weight: 600;
  padding: 6px 12px; border-radius: 6px; }
.blog-body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.blog-meta { font-size: var(--fs-micro); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.blog-body h2, .blog-body h3 { font-size: 1.2rem; margin-bottom: 10px; line-height: 1.25; }
.blog-body p { font-size: .9rem; color: var(--muted); margin-bottom: 18px; flex: 1; }
.blog-card .arrow-link { color: var(--ink); }
.blog-card .muted-link { color: var(--muted); font-weight: 600; font-size: .9rem; }
.blog-card.is-soon { opacity: .92; }
.blog-card.is-soon .blog-tag { background: var(--yellow-600); }
.article { padding: 56px 0 80px; }
.article-head { max-width: 760px; margin: 0 auto 34px; }
.article-head .breadcrumb { font-size: var(--fs-small); color: var(--muted); margin-bottom: 20px; }
.article-head .breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.article-head h1 { font-size: clamp(2rem, 4.4vw, 3rem); }
.article-body { max-width: 760px; margin: 0 auto; }
.article-body .lead-p { font-size: 1.2rem; color: var(--ink); margin-bottom: 28px; line-height: 1.55; }
.article-body h2 { font-size: 1.5rem; margin: 34px 0 12px; }
.article-body p { color: #33434d; margin-bottom: 16px; line-height: 1.7; }
.article-body strong { color: var(--ink); }
.article-list { margin: 6px 0 24px; display: flex; flex-direction: column; gap: 10px; }
.article-list li { position: relative; padding-left: 26px; color: #33434d; line-height: 1.6; }
.article-list li::before { content: ""; position: absolute; left: 0; top: 9px;
  width: 10px; height: 10px; border-radius: 3px; background: var(--yellow); }
.callout { background: #dcf1f5; border-left: 0;
  border-radius: 10px; padding: 22px 24px; margin: 26px 0; color: #234;
  line-height: 1.6; }
.article-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px;
  flex-wrap: wrap; margin-top: 40px; padding: 30px 32px;
  background: var(--dark); color: #fff; border-radius: var(--radius); }
.article-cta > div { flex: 1 1 320px; min-width: 0; }
.article-cta .btn { flex: none; }
.article-cta h3 { font-size: 1.3rem; margin-bottom: 6px; }
.article-cta p { color: rgba(255,255,255,.75); }
@media (max-width: 1080px) {
  .contact-info-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .blog-grid { grid-template-columns: 1fr; }
  .article-cta { flex-direction: column; align-items: flex-start; }
  .article-cta > div { flex: 0 0 auto; }
}
@media (max-width: 980px) {
  .site-header .container { gap: 12px; }
  .header-actions .btn { padding: 13px 18px; font-size: var(--fs-small); min-height: 44px; }
}
@media (max-width: 620px) {
  .container { padding-inline: 18px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .hl { white-space: normal; }
  .header-actions .btn:not(.keep-on-mobile) { display: none; }
  .header-actions .btn.keep-on-mobile { white-space: normal; text-align: center; line-height: 1.15; padding-block: 6px; }
  .hero h1 { font-size: clamp(1.85rem, 8.5vw, 2.5rem); line-height: 1.18; }
  .hero .lead { font-size: 1.02rem; line-height: 1.7; }
  .page-hero h1 { font-size: clamp(1.7rem, 8vw, 2.3rem); }
  .section-title { font-size: clamp(1.75rem, 7vw, 2.4rem); }
  .btn { padding: 16px 22px; }
  .map-embed iframe { height: 300px; }
  .article-body .lead-p { font-size: 1.08rem; }
}
@media (max-width: 400px) {
  .logo { font-size: 1.15rem; }
  .logo .logo-mark { width: 34px; height: 34px; }
  .hero-inner { padding: 70px 0 90px; }
  .header-actions .btn.keep-on-mobile { padding: 6px 12px; font-size: var(--fs-small); }
  .split-body .btn { white-space: normal; text-align: center; line-height: 1.25; padding: 14px 12px; }
  .site-header .container { gap: 8px; }
  .site-header .logo { gap: 8px; font-size: clamp(.875rem, 10vw - 1.125rem, 1.15rem); }
  .site-header .logo .logo-mark { width: 32px; height: 32px; flex: none; }
  .site-header .logo .logo-mark svg { width: 20px; height: 20px; }
}
.pdp { padding: 40px 0 30px; }
.pdp .breadcrumb { font-size: var(--fs-small); color: var(--muted); margin-bottom: 26px; }
.pdp .breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.pdp-top { display: grid; grid-template-columns: 1.02fr 1fr; gap: 50px; align-items: start; }
.pdp-gallery { position: sticky; top: 96px; }
.pdp-stage { position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  overflow: hidden; }
.pdp-stage img { width: 100%; height: 100%; object-fit: contain; padding: 34px; mix-blend-mode: multiply; }
.pdp-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; }
.pdp-thumb { border: 1px solid var(--line); border-radius: 10px; background: #fff;
  aspect-ratio: 1 / 1; overflow: hidden; cursor: pointer; padding: 0;
  display: grid; place-items: center; position: relative;
  transition: border-color .15s ease; }
.pdp-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 10px; mix-blend-mode: multiply; }
.pdp-stage.is-photo img, .pdp-thumb.is-photo img { object-fit: cover; padding: 0; mix-blend-mode: normal; }
.pdp-thumb:hover { border-color: #a8d5df; }
.pdp-thumb.active { border-color: var(--yellow-600); box-shadow: 0 0 0 2px rgba(14, 116, 144,.18); }
.pdp-gallery-links { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 18px; }
.pdp-gallery-links a { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: .9rem; color: var(--ink); }
.pdp-gallery-links a:hover { color: var(--yellow-600); }
.pdp-gallery-links svg { width: 17px; height: 17px; color: var(--yellow-600); flex: none; }
.pdp-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: var(--fs-micro); color: var(--yellow-600); margin-bottom: 16px; }
.pdp-trust { display: block; font-size: .9rem; color: var(--muted); margin-bottom: 22px; line-height: 1.6; }
.pdp-trust b { color: var(--ink); font-weight: 700; }
.pdp-lead { font-size: 1.05rem; color: #33434d; margin-bottom: 22px; }
.pdp-key { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
.pdp-key li { display: flex; gap: 12px; font-size: .96rem; color: #33434d; line-height: 1.5; }
.pdp-key .tick { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--yellow); color: #fff; display: grid; place-items: center; margin-top: 1px; }
.pdp-key .tick svg { width: 13px; height: 13px; }
.pdp-key b { color: var(--ink); }
.pdp-buy { border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; box-shadow: var(--shadow-sm);
  padding: 26px 26px 28px; margin-bottom: 22px; }
.pdp-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.pdp-price .from { font-size: var(--fs-micro); color: var(--muted); }
.pdp-price .amount { font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.pdp-price .unit { font-size: .95rem; color: var(--muted); font-weight: 600; }
.pdp-price-note { font-size: var(--fs-micro); color: var(--muted); margin-bottom: 20px; }
.pdp-term { display: flex; align-items: center; gap: 10px; font-size: var(--fs-small); color: var(--muted); margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.pdp-term svg { width: 16px; height: 16px; color: var(--yellow-600); flex: none; }
.pdp-mini-usps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.pdp-mini-usps li { display: flex; align-items: center; gap: 10px; font-size: var(--fs-small); font-weight: 500; color: var(--ink); }
.pdp-mini-usps svg { width: 17px; height: 17px; color: var(--yellow-600); flex: none; }
.pdp-detail-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 52px; align-items: start; }
.pdp-prose h2 { font-size: 1.5rem; margin-bottom: 14px; }
.pdp-prose p { color: #33434d; margin-bottom: 15px; line-height: 1.7; }
.spec-table { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: #fff; position: sticky; top: 96px; }
.spec-table dl { margin: 0; }
.spec-table .spec-row { display: flex; justify-content: space-between; gap: 18px; padding: 13px 24px; border-top: 1px solid var(--line); font-size: var(--fs-small); }
.spec-table .spec-row dt { color: var(--muted); flex: none; }
.spec-table .spec-row dd { font-weight: 600; color: var(--ink); text-align: right; }
.included-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 40px; }
.included-grid li { display: flex; gap: 14px; align-items: flex-start; font-size: .98rem; color: #33434d; line-height: 1.5; }
.included-grid .tick { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--yellow); color: #fff; display: grid; place-items: center; margin-top: 1px; }
.included-grid .tick svg { width: 13px; height: 13px; }
.included-grid b { color: var(--ink); }
.acc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.acc-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; transition: transform .18s ease, box-shadow .18s ease; }
.acc-card:hover { box-shadow: var(--shadow); }
.acc-card .acc-ico { width: 50px; height: 50px; border-radius: 12px; background: #dcf1f5; color: var(--yellow-600); display: grid; place-items: center; margin-bottom: 16px; }
.acc-card .acc-ico svg { width: 25px; height: 25px; }
.acc-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.acc-card p { font-size: var(--fs-small); color: var(--muted); line-height: 1.5; }
@media (max-width: 1080px) {
  .pdp-top { grid-template-columns: 1fr; gap: 34px; }
  .pdp-gallery { position: static; }
  .pdp-detail-grid { grid-template-columns: 1fr; gap: 34px; }
  .spec-table { position: static; }
  .acc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .included-grid { grid-template-columns: 1fr; }
  .acc-grid { grid-template-columns: 1fr; }
  .pdp-mini-usps { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .pdp-buy { padding-inline: 18px; }
}
.modal-overlay { position: fixed; inset: 0; z-index: 200;
  background: rgba(6, 20, 28, .62);
  display: none; align-items: flex-start; justify-content: center;
  padding: 44px 20px; overflow-y: auto; }
.modal-overlay.open { display: flex; }
.modal { position: relative; width: 100%; max-width: 620px; margin: auto;
  background: #fff; border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  padding: 34px;
  animation: modalIn .22s ease; }
@keyframes modalIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.modal-close { position: absolute; top: 16px; right: 16px;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: #edf6f8; color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: background .15s ease; }
.modal-close:hover { background: #d6eef2; }
.modal-head { margin-bottom: 20px; padding-right: 44px; }
.modal-head .section-eyebrow { margin-bottom: 8px; }
.modal-head h2 { font-size: 1.5rem; margin-bottom: 8px; }
.modal-head p { color: var(--muted); font-size: .95rem; }
.modal-product { display: flex; align-items: center; gap: 12px;
  background: #eef5f7; border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 20px; font-weight: 600; font-size: .95rem; color: var(--ink); }
.modal-product .product-badge { position: static; border-radius: 5px; }
.modal .offer-form { border: 0; padding: 0; box-shadow: none; }
@media (max-width: 620px) {
  .modal-overlay { padding: 16px; }
  .modal { padding: 24px 22px; }
}
.about-intro { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 50px; align-items: start; }
.about-intro .intro-copy p { color: #33434d; margin-bottom: 14px; line-height: 1.7; }
.about-intro .intro-copy p:last-child { margin-bottom: 0; font-weight: 600; color: var(--ink); }
.about-feature { display: grid; grid-template-columns: minmax(280px, 440px) 1fr; gap: 32px; margin-top: 44px; align-items: center; }
.about-photo img { width: 100%; height: auto; display: block; border-radius: var(--radius); box-shadow: var(--shadow); }
.about-feature-side { display: flex; flex-direction: column; gap: 22px; }
.about-feature-side .stat-tile { border-radius: var(--radius); }
.about-note { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 30px; }
.about-note h2 { font-size: 1.2rem; margin-bottom: 10px; }
.about-note p { color: #33434d; line-height: 1.65; }
.about-note p b { color: var(--ink); }
@media (max-width: 900px) {
  .about-feature { grid-template-columns: 1fr; }
  .about-photo { max-width: 420px; }
}
.stat-tile { background: linear-gradient(150deg, #0e7490, #155e75);
  color: #fff; padding: 24px; display: flex; flex-direction: column; justify-content: center; }
.stat-tile .big { font-size: 2.6rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.stat-tile .lbl { margin-top: 8px; font-weight: 600; opacity: .95; }
.values-head { text-align: center; margin-bottom: 40px; }
.values-head h2 { font-size: clamp(1.9rem, 3.8vw, 2.8rem); }
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.value-col { border-top: 2px solid var(--yellow); padding-top: 18px; }
.value-col h3 { font-size: 1.12rem; margin-bottom: 10px; }
.value-col p { color: var(--muted); font-size: var(--fs-small); line-height: 1.55; }
.team-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 44px; align-items: center; }
.team-layout .team-block { max-width: none; }
.team-photo { margin: 0; }
.team-photo img { width: 100%; height: auto; display: block; border-radius: var(--radius); box-shadow: var(--shadow); }
@media (max-width: 900px) {
  .team-layout { grid-template-columns: 1fr; gap: 30px; }
}
.team-block { max-width: 720px; }
.team-block p { color: #33434d; margin-bottom: 16px; line-height: 1.7; }
@media (max-width: 900px) {
  .about-intro { grid-template-columns: 1fr; gap: 24px; }
  .values-grid { grid-template-columns: repeat(2, 1fr); gap: 26px; }
}
@media (max-width: 520px) {
  .values-grid { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .values-head h2 { font-size: 1.75rem; }
}
.wa-float { position: fixed; right: 22px; bottom: 22px; z-index: 90; 
  display: inline-flex; align-items: center; gap: 10px;
  background: #25d366; color: #fff;
  font-weight: 600; font-size: .95rem; line-height: 1;
  padding: 15px 22px; border-radius: 999px;
  box-shadow: 0 10px 28px rgba(8, 30, 40, .3);
  transition: transform .15s ease, background .15s ease; }
.wa-float:hover { background: #1da851; }
.wa-float svg { width: 22px; height: 22px; flex: none; }
@media (max-width: 767px) {
  .wa-float { right: 16px; bottom: 16px; width: 56px; height: 56px; padding: 0; justify-content: center; }
  .wa-float span { display: none; }
  .wa-float svg { width: 28px; height: 28px; }
}
.logo .logo-tld { font-style: normal; font-weight: 600; font-size: .68em; color: var(--muted); margin-left: 1px; letter-spacing: 0; }
.footer-brand .logo .logo-tld { color: rgba(255,255,255,.55); }
.product-badge.badge-koelen { background: var(--accent); }
.product-badge.badge-koelcel { background: var(--dark); }
.cap-line { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-micro); color: var(--muted); margin: -8px 0 14px; }
.cap-line span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cap-line svg { width: 15px; height: 15px; color: var(--yellow-600); flex: none; }
.keuzehulp .kh-kop { font-size: 1.15rem; line-height: 1.2; margin-bottom: 6px; }
.kh-row { display: flex; flex-wrap: wrap; gap: 10px; }
.kh-row + .kh-row { margin-top: 10px; }
.kh-label { width: 100%; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 6px 0 -2px; }
.kh-btn { display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 16px; border: 1.5px solid var(--line); border-radius: 999px;
  background: #fff; font-weight: 600; font-size: var(--fs-small); color: var(--ink);
  transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease; }
.kh-btn:hover, .kh-btn.active { border-color: var(--yellow-600); color: var(--yellow-600); background: #dcf1f5; }
.kh-btn svg { width: 16px; height: 16px; color: var(--yellow-600); flex: none; }
.hero-kh .kh-btn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.28); color: #fff; }
.hero-kh .kh-btn svg { color: var(--hl); }
.hero-kh .kh-btn:hover { background: #fff; color: var(--ink); border-color: #fff; }
.hero-kh .kh-btn:hover svg { color: var(--yellow-600); }
.compare-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; -webkit-overflow-scrolling: touch; }
.compare { width: 100%; border-collapse: collapse; min-width: 900px; font-size: .9rem; }
.compare th, .compare td { padding: 13px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare thead th { background: var(--dark); color: #fff; font-weight: 700; font-size: var(--fs-small); white-space: nowrap; position: sticky; top: 0; }
.compare thead th a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); }
.compare thead th a:hover { text-decoration-color: #fff; }
.compare tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; background: #f5fafb; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare .ok { color: var(--yellow-600); font-weight: 700; }
.compare .no { color: #9b1c1c; font-weight: 700; }
.compare .hi { background: #dcf1f5; }
.compare thead th.hi { background: var(--yellow-600); color: #fff; }
.compare thead th.hi a { color: #fff; }
.compare-hint { display: flex; align-items: center; gap: 8px; font-size: var(--fs-micro); color: var(--muted); margin-top: 10px; }
.proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 4px 0 30px; }
.proscons > div { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.proscons h3 { font-size: 1rem; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.proscons h3 .pc-ico { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 1rem; line-height: 1; font-weight: 700; }
.proscons .pros h3 .pc-ico { background: var(--yellow); }
.proscons .cons h3 .pc-ico { background: #b45309; }
.proscons li { display: flex; gap: 10px; font-size: var(--fs-small); color: #33434d; margin-bottom: 9px; line-height: 1.5; }
.proscons li:last-child { margin-bottom: 0; }
.proscons li svg { width: 16px; height: 16px; flex: none; margin-top: 3px; }
.proscons .pros li svg { color: var(--yellow-600); }
.proscons .cons li svg { color: #b45309; }
.checklist { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.check-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.check-card .ci { width: 46px; height: 46px; border-radius: 11px; background: #dcf1f5; color: var(--yellow-600); display: grid; place-items: center; margin-bottom: 14px; }
.check-card .ci svg { width: 23px; height: 23px; }
.check-card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.check-card p { font-size: .9rem; color: var(--muted); line-height: 1.5; }
.included-grid.is-optional .tick { background: var(--line); color: var(--muted); }
.pdp-gallery-links button { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: .9rem; color: var(--ink); }
.pdp-gallery-links button:hover { color: var(--yellow-600); }
.pdp-gallery-links button svg { width: 17px; height: 17px; color: var(--yellow-600); flex: none; }
.header-actions button.btn { min-height: 44px; }
.review-badge { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px 8px 10px; font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.review-badge .stars { color: #f5b301; letter-spacing: 1px; font-size: .95rem; }
.review-badge .g { width: 22px; height: 22px; border-radius: 50%; background: #fff; display: grid; place-items: center; border: 1px solid var(--line); font-weight: 700; font-size: .8rem; color: #4285f4; }
.review-badge span.muted { color: var(--muted); font-weight: 500; }
.hero .review-badge { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #fff; margin-bottom: 22px; }
.hero .review-badge span.muted { color: rgba(255,255,255,.7); }
.pdp-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; 
  display: none; align-items: center; gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(8, 30, 40, .12); }
.pdp-sticky.is-visible { display: flex; }
.pdp-sticky .sticky-price { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.pdp-sticky .sticky-price b { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.pdp-sticky .sticky-price span { font-size: var(--fs-micro); color: var(--muted); white-space: nowrap; }
.pdp-sticky .btn { flex: 1; padding: 14px 12px; font-size: var(--fs-small); }
.pdp-sticky .btn-ghost { flex: 0 0 auto; padding: 14px 16px; }
@media (min-width: 1081px) {
  .pdp-sticky { display: none !important; }
}
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.how-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px; }
.how-card .hn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--yellow); color: #fff; font-weight: 700; margin-bottom: 14px; }
.how-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.how-card p { font-size: var(--fs-small); color: var(--muted); line-height: 1.55; }
@media (max-width: 1080px) {
  .checklist { grid-template-columns: repeat(2, 1fr); }
  .how-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .proscons { grid-template-columns: 1fr; }
  .checklist { grid-template-columns: 1fr; }
  .kh-btn { padding: 11px 14px; font-size: var(--fs-small); }
  .compare { min-width: 760px; font-size: var(--fs-micro); }
  .compare th, .compare td { padding: 11px 12px; }
}
.hero h1 { font-size: clamp(2.15rem, 4.4vw, 3.7rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin-bottom: 24px; }
.hero .lead { font-size: 1.1rem;
  line-height: 1.72;
  color: rgba(255, 255, 255, .84);
  max-width: 54ch;
  margin-bottom: 32px; }
.hero-kh .kh-row { gap: 10px; }
.page-hero h1 { font-size: clamp(1.95rem, 4.2vw, 3.15rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin-bottom: 20px; }
.page-hero p { line-height: 1.7; max-width: 58ch; }
.split-media.has-photo { aspect-ratio: 4 / 3; overflow: hidden; background: #06151f; }
.split-media.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 620px) {
  .pdp-thumbs { grid-template-columns: repeat(5, 1fr) !important; gap: 8px; }
}
.product-card.is-rich .desc { flex: none; }
.compare th:first-child, .compare td:first-child { position: sticky; left: 0; z-index: 1; }
.compare thead th:first-child { z-index: 2; }
.compare.is-wide { font-size: var(--fs-small); }
.compare.is-wide th, .compare.is-wide td { padding: 12px 10px; }
.compare.is-wide tbody th { white-space: normal; }
.compare.is-wide tfoot td { padding: 12px 10px; }
.compare.is-wide tfoot .btn { padding: 10px 8px; font-size: var(--fs-micro); }
@media (max-width: 620px) {
  .compare.is-wide { min-width: 760px; }
}
/* Sticky balk bestaat alleen tot 1080 px (daarboven verborgen): alleen dan
   ruimte onder de footer en wijkt de WhatsApp-knop. Een element dat focus
   krijgt, scrolt boven de balk uit in plaats van erachter (WCAG 2.4.11). */
@media (max-width: 1080px) {
  body.has-sticky-cta .site-footer { padding-bottom: 72px; }
  body.has-sticky-cta .wa-float { bottom: 86px; opacity: 0; pointer-events: none; visibility: hidden; transform: translateY(8px); }
  html:has(body.has-sticky-cta) { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}
.hero--fill .hero-inner { min-height: calc(100vh - 79px); min-height: calc(100svh - 79px); }
.team-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.team-card { flex: 0 0 calc((100% - 4 * 22px) / 5);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; }
.team-card img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: #0a1f2b; }
.team-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 2px; }
.team-body b { font-size: 1rem; color: var(--ink); }
.team-body span { font-size: var(--fs-small); color: var(--muted); line-height: 1.4; }
@media (max-width: 1080px) {
  .team-card { flex-basis: calc((100% - 3 * 22px) / 4); }
}
@media (max-width: 800px) {
  .team-card { flex-basis: calc((100% - 2 * 22px) / 3); }
}
@media (max-width: 560px) {
  .team-grid { gap: 14px; }
  .team-card { flex-basis: calc((100% - 14px) / 2); }
  .team-body { padding: 12px 12px 14px; }
}
.pdp-review-badge { margin-bottom: 14px; transition: border-color .15s ease; }
.pdp-review-badge:hover { border-color: var(--ink); }
.pdp-review-badge b { font-size: .95rem; }
.reviews-band { background: var(--dark); color: #fff; padding: 56px 0; }
.reviews-num { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.reviews-num b { font-size: 3.2rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.reviews-num .stars { color: #f5b301; font-size: 1.35rem; letter-spacing: 2px; }
@media (max-width: 800px) {
  .reviews-band { padding: 48px 0; }
}
.compare.is-stack { min-width: 0; }
@media (max-width: 620px) {
  .is-stack-wrap, .compare-wrap:has(.is-stack) { overflow: visible; }
  .compare.is-stack { font-size: var(--fs-small); display: block; }
  .compare.is-stack thead { display: none; }
  .compare.is-stack tbody, .compare.is-stack tfoot, .compare.is-stack tr { display: block; }
  .compare.is-stack tbody th { display: block; position: static; white-space: normal;
    padding: 9px 14px; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--muted); background: #f5fafb; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .compare.is-stack tbody tr:first-child th { border-top: 0; }
  .compare.is-stack td { display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: start;
    padding: 9px 14px; border-bottom: 0; position: static; }
  .compare.is-stack td + td { border-top: 1px solid #edf6f8; }
  .compare.is-stack td::before { content: attr(data-p); font-weight: 600; color: var(--ink); font-size: var(--fs-micro); line-height: 1.45; }
  .compare.is-stack td.hi { background: #dcf1f5; }
  .compare.is-stack tbody tr:last-child td { border-bottom: 0; }
  .compare.is-stack tfoot tr { border-top: 1px solid var(--line); }
  .compare.is-stack tfoot td:first-child { display: none; }
  .compare.is-stack tfoot td { grid-template-columns: 96px max-content max-content; gap: 8px 10px; align-items: center; padding: 10px 14px; }
  .compare.is-stack tfoot td > * { width: auto; }
  .compare.is-stack tfoot .btn { padding: 10px 14px; font-size: var(--fs-micro); }
  .compare-hint { display: block; line-height: 1.5; }
  .compare-wrap:has(.is-wide) + .compare-hint .ch-scroll { display: inline-flex; vertical-align: middle; margin-right: 4px; }
  .compare.is-wide { min-width: 0; font-size: .8rem; }
  .compare.is-wide th, .compare.is-wide td { padding: 10px 10px; min-width: 120px; }
  .compare.is-wide thead th { white-space: normal; }
  .compare.is-wide thead th small { white-space: normal; }
  .compare.is-wide tbody th { white-space: normal; min-width: 104px; max-width: 112px; font-size: var(--fs-micro); box-shadow: 1px 0 0 var(--line); }
  .compare.is-wide thead th:first-child { box-shadow: 1px 0 0 rgba(255,255,255,.15); }
  .compare.is-wide tfoot td { padding: 10px 8px; }
  .compare.is-wide tfoot .btn { padding: 9px 8px; font-size: .8rem; }
}
@media (max-width: 1080px) {
  .dark-section .accent-block { width: 72px; height: 72px; }
}
@media (max-width: 620px) {
  .dark-section .accent-block { width: 56px; height: 56px; }
}
.catalog-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) {
  .catalog-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .catalog-grid.cols-4 { grid-template-columns: 1fr; }
}
.nowrap { white-space: nowrap; }
h1, h2, .section-title { text-wrap: balance; }
@media (max-width: 1080px) {
  .filter-panel.is-open .filter-toggle svg { transform: rotate(-90deg); }
  .filter-panel.is-open { padding: 8px 22px 24px; }
  .filter-panel.is-open .filter-head { margin-bottom: 12px; }
  .filter-panel.is-open .filter-body { display: block; }
}
@media (max-width: 620px) {
  .catalog { padding-bottom: 60px; }
  .spec-table .spec-row { flex-direction: column; gap: 3px; padding: 12px 18px; }
  .spec-table .spec-row dd { text-align: left; }
  .pdp-gallery-links a, .pdp-gallery-links button { min-height: 40px; }
  .product-media { aspect-ratio: 3 / 2; }
}
.main-nav .nav-cta { display: none; }
.skip-link { position: absolute; left: -9999px; top: 12px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 16px; font-weight: 600; border-radius: 8px; }
.skip-link:focus { left: 12px; }
.hero-side .hero-kh-kop { font-size: 1.05rem; font-weight: 700; color: #fff; margin-bottom: 14px; }
.hero-side .kh-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hero-side .kh-btn { width: 100%; justify-content: flex-start; padding: 12px 14px; border-radius: 10px; }
.hero-side .kh-btn:hover {  }
.hero-side .kh-btn:nth-child(5), .hero-side .kh-btn:nth-child(6) { grid-column: 1 / -1; }
@media (max-width: 620px) {
  .hero-side .kh-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hero-side .kh-btn { padding: 11px 12px; font-size: var(--fs-small); }
}
@media (max-width: 980px) {
  #cc-consent-banner.cc-modal-backdrop { align-items: flex-end !important; }
  #cc-consent-banner .cc-container { align-items: flex-end !important; min-height: 0 !important; padding: 0 !important; }
  #cc-consent-banner .cc-b { border-radius: 16px 16px 0 0 !important; max-width: 100% !important; height: auto !important;
    max-height: 35vh !important; max-height: 35dvh !important; }
  #cc-consent-banner .cc-tab-contents { min-height: 0 !important; overflow-y: auto !important; }
  #cc-consent-banner .cc-tab-content.cc-active { max-height: none !important; }
  #cc-consent-banner .cc-banner-header, #cc-consent-banner .cc-banner-footer, #cc-consent-banner .cc-responsive-padding { padding: 12px 16px !important; }
  #cc-consent-banner .cc-footer-content { flex-direction: row !important; align-items: stretch !important; gap: 8px !important; }
  #cc-consent-banner .cc-button { flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-height: 44px !important; padding: 10px 12px !important; }
  #cc-consent-banner[data-tab-opened="tab2"] .cc-b { max-height: 70vh !important; max-height: 70dvh !important; }
}
:root { --r-control: var(--radius-sm);   
  --r-control-sm: 8px;             
  --r-badge: 6px; }
.btn { border-radius: var(--r-control); }
.btn-sm { border-radius: var(--r-control-sm); }
.header-phone, .nav-toggle, .main-nav > ul > li > a, .pagination a { border-radius: var(--r-control); }
.nav-toggle span { border-radius: 1px; }
.product-badge, .modal-product .product-badge, .blog-tag { border-radius: var(--r-badge); }
.faq-q { border-radius: 4px; }
@media (max-width: 980px) {
  .main-nav.open > ul > li.nav-cta > a, .main-nav.open > ul > li.nav-cta > button { border-radius: var(--r-control); }
}
:root { --yellow-soft: #dcf1f5;   
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-1: .16s;
  --dur-2: .28s;
  --shadow-raise: 0 2px 6px -2px rgba(15, 20, 30, .06), 0 18px 40px -16px rgba(15, 20, 30, .2); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.nav-mega-knop, .main-nav .nav-cats, .main-nav .nav-cat-aantal, .main-nav .nav-subs, .main-nav .nav-hulp, .main-nav .nav-alles-aantal, .main-nav .nav-chev { display: none; }
.main-nav .nav-cat-beeld { display: grid; place-items: center; flex: none; overflow: hidden;
  border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.main-nav .nav-cat-beeld img { width: 100%; height: 100%; object-fit: cover; }
.main-nav .nav-cat-naam { flex: 1; min-width: 0; }
@media (min-width: 981px) {
  .site-header .container { position: relative; }
  .nav-mega-knop { display: inline-flex; align-items: center; gap: 6px;
    padding: 11px 13px; border: 0; border-radius: var(--r-control); background: none;
    font: inherit; font-size: .96rem; font-weight: 500; color: inherit; white-space: nowrap;
    cursor: pointer; transition: background-color var(--dur-1) var(--ease-out); }
  .nav-mega-knop:hover, .nav-mega-knop[aria-expanded="true"] { background: #f2f2f2; }
  .nav-mega-knop:focus-visible { outline: 2px solid var(--yellow-600); outline-offset: 2px; }
  .nav-mega-pijl { width: 14px; height: 14px; opacity: .6; transform: rotate(90deg); transition: transform var(--dur-2) var(--ease-out); }
  .nav-mega-knop[aria-expanded="true"] .nav-mega-pijl { transform: rotate(-90deg); }
  .main-nav .nav-mega.is-open .nav-cats { display: block;
    position: absolute; top: calc(100% + 1px); left: 24px; right: 24px; z-index: 5;
    padding: 22px 24px 0;
    background: #fff; border: 1px solid var(--line); border-top: 0;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow-raise);
    max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain;
    animation: megaIn var(--dur-2) var(--ease-out); }
  .main-nav .nav-kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 40px; }
  .main-nav .nav-groep { margin: 0 0 8px; padding: 0 10px;
    font-size: var(--fs-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .main-nav .nav-kolom ul { display: grid; gap: 2px; }
  .main-nav .nav-kolom li > a { display: flex; align-items: center; gap: 14px;
    min-height: 52px; padding: 6px 10px; border-radius: var(--r-control);
    font-size: .98rem; font-weight: 600; line-height: 1.3; color: var(--ink);
    transition: background-color var(--dur-1) var(--ease-out); }
  .main-nav .nav-kolom li > a:focus-visible { outline: 2px solid var(--yellow-600); outline-offset: -2px; }
  .main-nav .nav-kolom li > a[aria-current] { color: var(--yellow-600); background: var(--yellow-soft); box-shadow: inset 3px 0 0 var(--yellow-600); }
  .main-nav .nav-cat-beeld { width: 48px; height: 36px; }
  .main-nav .nav-cat-aantal { display: inline-block; min-width: 28px; padding: 2px 8px; border-radius: 999px;
    background: var(--bg); color: var(--muted); font-size: .8rem; font-weight: 650; text-align: center; }
  .main-nav .nav-subs { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px 8px 72px; }
  .main-nav .nav-subs a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px;
    border: 1px solid var(--line); border-radius: 999px;
    font-size: var(--fs-small); font-weight: 550; color: var(--muted);
    transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
  .main-nav .nav-subs a:focus-visible { outline: 2px solid var(--yellow-600); outline-offset: 2px; }
  .main-nav .nav-subs a[aria-current] { color: var(--yellow-600); border-color: var(--yellow-600); background: var(--yellow-soft); }
  .main-nav .nav-voet { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin: 18px -24px 0; padding: 14px 24px 16px;
    border-top: 1px solid var(--line); background: var(--bg); }
  .main-nav .nav-alles { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; margin-left: -10px;
    border-radius: var(--r-control); font-weight: 700; color: var(--ink); }
  .main-nav .nav-alles:focus-visible { outline: 2px solid var(--yellow-600); outline-offset: 2px; }
  .main-nav .nav-alles[aria-current] { color: var(--yellow-600); }
  .main-nav .nav-alles .nav-chev { display: block; width: 16px; height: 16px; color: var(--yellow-600); }
  .main-nav .nav-alles-aantal { display: inline; font-weight: 600; color: var(--muted); }
  .main-nav .nav-hulp { display: block; margin: 0; font-size: var(--fs-small); color: var(--muted); }
  .main-nav .nav-hulp a, .main-nav .nav-hulp button { padding: 0; border: 0; background: none; font: inherit; font-weight: 650; color: var(--ink);
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .main-nav .nav-hulp a:focus-visible, .main-nav .nav-hulp button:focus-visible { outline: 2px solid var(--yellow-600); outline-offset: 2px; }
}
@media (min-width: 981px) {
  .main-nav > ul > li > a, .nav-mega-knop { padding-inline: 10px; }
}
@media (min-width: 981px) and (max-width: 1260px) {
  .site-header .container { gap: 12px; }
  .logo { font-size: 1.15rem; }
  .logo .logo-mark { width: 34px; height: 34px; }
  .main-nav > ul > li > a, .nav-mega-knop { padding-inline: 8px; font-size: var(--fs-small); }
  .header-actions { gap: 8px; }
  .header-actions .btn { padding-inline: 14px; }
}
@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
  .main-nav .nav-kolom li > a:hover { background: var(--bg); }
  .main-nav .nav-kolom li > a[aria-current]:hover { background: var(--yellow-soft); }
  .main-nav .nav-subs a:hover { color: var(--ink); border-color: var(--muted); }
  .main-nav .nav-alles:hover { background: #fff; }
  .main-nav .nav-hulp a:hover, .main-nav .nav-hulp button:hover { text-decoration-thickness: 2px; }
}
@keyframes megaIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 980px) {
  .main-nav.open { max-height: calc(100vh - 78px); max-height: calc(100dvh - 78px);
    overflow-y: auto; overscroll-behavior: contain; }
  .main-nav.open .nav-cats { display: block; }
  .main-nav.open .nav-groep { margin: 0; padding: 12px 8px 4px; font-size: var(--fs-micro); font-weight: 650; line-height: 1.4; color: var(--muted); }
  .main-nav.open .nav-cats ul { padding-bottom: 6px; }
  .main-nav.open .nav-cats ul a { display: flex; align-items: center; gap: 12px;
    min-height: 48px; padding: 4px 8px; border-radius: var(--r-control);
    font-weight: 600; line-height: 1.3; color: var(--ink);
    -webkit-tap-highlight-color: transparent; }
  .main-nav.open .nav-cat-beeld { width: 40px; height: 30px; }
  .main-nav.open .nav-cats ul a:active { background: var(--bg); }
  .main-nav.open .nav-cats ul a:focus-visible { outline: 2px solid var(--yellow-600); outline-offset: -2px; }
  .main-nav.open .nav-cats ul a[aria-current] { color: var(--yellow-600); background: var(--yellow-soft); box-shadow: inset 3px 0 0 var(--yellow-600); }
  .main-nav.open .nav-alles { display: flex; align-items: center; width: 100%; padding: 14px 8px;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  .main-nav .nav-mega.is-open .nav-cats { animation: none; }
  .nav-mega-pijl, .nav-mega-knop, .main-nav .nav-kolom li > a { transition: none; }
}
@media (forced-colors: active) {
  .main-nav .nav-mega.is-open .nav-cats { border: 1px solid CanvasText; }
  .main-nav a[aria-current] .nav-cat-naam { text-decoration: underline; }
}
@media (max-width: 980px) {
  .main-nav.open { margin-left: 0; }
  body.nav-open .wa-float, body.nav-open .pdp-sticky.is-visible, body.nav-open #site-consent-ui button[aria-controls="site-cookievoorkeuren"] { display: none; }
}
@media (min-width: 981px) {
  .main-nav .nav-subs .nav-uitleg { gap: 2px; padding-right: 8px; border-color: transparent; color: var(--yellow-600); font-weight: 650; }
  .main-nav .nav-uitleg .nav-chev { display: block; width: 14px; height: 14px; }
}
@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
  .main-nav .nav-subs .nav-uitleg:hover { color: var(--ink); border-color: var(--line); }
}
@media (max-width: 980px) {
  .main-nav.open .nav-subs { display: block; padding-bottom: 2px; }
  .main-nav.open .nav-subs a:not(.nav-uitleg) { display: none; }
  .main-nav.open .nav-subs .nav-uitleg { display: flex; align-items: center; gap: 4px;
    min-height: 40px; margin-top: -4px; padding: 0 8px 0 60px;
    font-size: var(--fs-small); font-weight: 600; color: var(--yellow-600); }
  .main-nav.open .nav-uitleg .nav-chev { display: block; width: 14px; height: 14px; }
}
.section { padding: 88px 0; }
@media (max-width: 620px) {
  .section { padding: 64px 0; }
}
.compare, .pdp-price, .spec-table, .prijs-amount { font-variant-numeric: tabular-nums; }
.hero--vries { overflow: visible; }
.hero--vries .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 36px; align-items: center; position: relative; z-index: 2; }
.hero--vries .hero-inner { max-width: none; min-height: 0; padding: 64px 0 112px; }
.hero--vries h1 { font-size: clamp(2.2rem, 4.6vw, 3.9rem); line-height: 1.06; letter-spacing: -.022em; }
.hero--vries .lead { max-width: 56ch; }
.hero-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 22px; font-size: var(--fs-small); color: rgba(255, 255, 255, .78); }
.hero-proof .review-badge { margin: 0; }
.hero-visual { position: relative; align-self: center; padding: 20px 0 40px; }
.hero-visual img { width: 100%; height: auto; display: block; filter: drop-shadow(0 34px 44px rgba(0, 0, 0, .45)); }
.hero-chip { position: absolute; display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--ink); font-weight: 700; font-size: var(--fs-small);
  padding: 10px 14px; border-radius: 999px; box-shadow: var(--shadow);
  animation: chipIn .6s var(--ease-out) both; }
.hero-chip svg { width: 16px; height: 16px; color: var(--accent-600); }
.hero-chip-1 { left: 0; top: 6%; animation-delay: .15s; }
.hero-chip-2 { right: 0; top: 30%; animation-delay: .3s; }
.hero-chip-3 { left: 8%; bottom: 10%; animation-delay: .45s; }
@keyframes chipIn { from { transform: translateY(8px); } to { transform: none; } }
.hero-check-wrap { position: relative; z-index: 3; margin-bottom: -58px; }
.hc-field label { font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.hero-check .btn { height: 48px; padding: 0 22px; white-space: nowrap; }
.hc-note { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: var(--fs-micro); color: var(--muted); margin: 2px 0 0; }
.page-hero-check { margin-top: 26px; }
.page-hero-check .hero-check { box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
@media (max-width: 1080px) {
  .hero-check { grid-template-columns: 1fr 1fr; }
  .hero-check .btn { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .hero--vries .hero-grid { grid-template-columns: 1fr; gap: 8px; }
  .hero--vries .hero-inner { padding: 52px 0 0; }
  .hero-visual { max-width: 520px; margin: 0 auto; padding: 10px 0 70px; }
  .hero-chip { font-size: .8rem; padding: 8px 12px; }
}
@media (max-width: 620px) {
  .hero-check { grid-template-columns: 1fr; padding: 16px 16px 12px; }
  .hero-check-wrap { margin-bottom: -40px; }
  .hero-visual { padding-bottom: 56px; }
  .hero-chip-3 { display: none; }
}
.card-route { display: flex; align-items: center; gap: 8px; font-size: var(--fs-micro); color: var(--muted); margin: -6px 0 12px; }
.card-route svg { width: 15px; height: 15px; color: var(--accent-600); flex: none; }
.card-tow { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; font-weight: 700; font-size: var(--fs-micro); color: var(--ink); }
.product-media img.tank-photo { padding: 10px; }
.form-step + .form-step { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.form-kop, .form-progress { display: flex; align-items: center; gap: 10px; font-weight: 700; margin-bottom: 14px; }
.form-progress-num { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: var(--fs-small); }
.form-progress-van { margin-left: auto; font-size: .8rem; color: var(--muted); font-weight: 600; }
.route-keuze { border: 0; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 0; }
.route-keuze legend { font-size: var(--fs-small); font-weight: 600; margin-bottom: 8px; }
.route-optie { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-control); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.route-optie input { margin-top: 3px; accent-color: var(--accent); flex: none; }
.route-optie b { display: block; font-size: var(--fs-small); }
.route-optie small { display: block; font-size: var(--fs-micro); color: var(--muted); line-height: 1.35; margin-top: 2px; text-wrap: pretty; }
.route-optie:has(input:checked) { border-color: var(--accent); background: #dcf1f5; }
/* Zelf ophalen kan niet bij de koelcel: main.js zet de radio uit, de kaart oogt dan ook zo. */
.route-optie:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.form-vinkjes { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.vinkje { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); cursor: pointer; }
.vinkje input { accent-color: var(--accent); width: 16px; height: 16px; }
.vinkje-groep { display: inline-flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.vinkje-label { font-size: var(--fs-micro); font-weight: 700; color: var(--muted); }
.optioneel { font-weight: 400; color: var(--muted); font-size: .8rem; }
.field.is-uit { display: none; }
.form-next { width: 100%; margin-top: 6px; }
.form-next svg { width: 16px; height: 16px; }
.form-back { background: none; border: 0; font: inherit; font-size: var(--fs-small); font-weight: 600; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 0; }
.form-back svg { width: 16px; height: 16px; }
.form-samenvatting { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-control); padding: 10px 14px; font-size: var(--fs-small); margin-bottom: 14px; }
.form-samenvatting[hidden] { display: none; }
.form-wijzig { background: none; border: 0; padding: 0; font: inherit; font-size: var(--fs-small); font-weight: 600; color: var(--accent-600); text-decoration: underline; cursor: pointer; }
.form-trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin-top: 10px; font-size: var(--fs-micro); color: var(--muted); }
.review-badge.form-review { padding: 5px 10px 5px 6px; font-size: .8rem; }
.modal .form-step[hidden] { display: none; }
@media (max-width: 620px) {
  .route-keuze { grid-template-columns: 1fr; }
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal { border-radius: 16px 16px 0 0; max-height: 92vh; max-height: 92dvh; overflow-y: auto; padding: 22px 18px 28px; animation: sheetIn .25s ease; }
  @keyframes sheetIn { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
}
.tow-check { margin-top: 16px; padding: 14px 16px; border: 1px dashed var(--line); border-radius: var(--r-control); background: #f5fafb; }
.tow-kop { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--fs-small); margin-bottom: 10px; }
.tow-kop svg { width: 18px; height: 18px; color: var(--accent-600); }
.tow-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tow-row label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-micro); font-weight: 600; color: var(--muted); min-width: 0; }
.tow-uitkomst { margin-top: 10px; font-size: var(--fs-small); color: var(--muted); line-height: 1.5; }
.tow-check.is-ok { border-color: var(--ok); background: #ecfdf5; }
.tow-check.is-ok .tow-uitkomst { color: #065f46; font-weight: 600; }
.tow-check.is-nee .tow-uitkomst { color: var(--ink); font-weight: 600; }
.tow-check.is-let-op { border-color: #f59e0b; background: #fffbeb; }
.tow-check.is-let-op .tow-uitkomst { color: #92400e; font-weight: 600; }
@media (max-width: 400px) {
  .tow-row { grid-template-columns: 1fr; }
}
.open-status { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--fs-small); }
.open-status i { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }
.open-status.is-open i { background: var(--ok); box-shadow: 0 0 0 4px rgba(5, 150, 105, .22); }
.open-status.is-closed i { background: #f59e0b; }
.help-head .open-status { display: flex; margin-top: 8px; color: #fff; }
.direct-box .open-status { color: #fff; }
.callback-form { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--radius); padding: 16px 18px; color: #fff; }
.cb-kop { font-weight: 700; margin-bottom: 10px; }
.cb-kop:focus { outline: none; }
.cb-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; }
.cb-row .btn { height: 46px; white-space: nowrap; }
.cb-note { font-size: .8rem; opacity: .82; margin-top: 8px; }
.callback-form .form-error { margin-top: 10px; }
/* Foutmelding over de volle breedte onder velden en knop, niet als extra kolom. */
.cb-row > .form-error { grid-column: 1 / -1; }
.callback-form.is-verzonden { background: rgba(255, 255, 255, .16); }
.team-block .cb-note { color: var(--muted); opacity: 1; }
@media (max-width: 620px) {
  .cb-row { grid-template-columns: 1fr; }
  .cb-row .btn { width: 100%; }
}
.prijs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.prijs-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; display: flex; flex-direction: column; gap: 8px; }
.prijs-card .product-badge { position: static; align-self: flex-start; }
.prijs-card h3 { font-size: 1.25rem; }
.prijs-amount .from { font-size: var(--fs-small); color: var(--muted); }
.prijs-amount b { font-size: 2rem; letter-spacing: -.02em; }
.prijs-sub { font-size: var(--fs-small); color: var(--muted); }
.prijs-card ul { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 16px; flex: 1; }
.prijs-card li { display: flex; gap: 10px; font-size: .9rem; align-items: center; }
.prijs-card .tick { width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; }
.prijs-card .tick svg { width: 11px; height: 11px; }
@media (max-width: 980px) {
  .prijs-grid { grid-template-columns: 1fr; }
}
.transparant-slot { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-weight: 600; font-size: var(--fs-small); }
.transparant-slot svg { width: 18px; height: 18px; color: var(--ok); flex: none; }
.pdp-foto-note { font-size: var(--fs-micro); color: var(--muted); margin-top: 8px; }
.compare.is-compact { font-size: var(--fs-small); }
.main-nav .nav-cat-naam small { display: block; font-size: var(--fs-micro); font-weight: 500; color: var(--muted); }
.hero--fill .hero-inner { min-height: 0; padding: 80px 0 90px; }
.page-hero .hero-check .hc-note { color: var(--muted); max-width: none; font-size: var(--fs-micro); }
.about-h1 { font-size: clamp(1.7rem, 4vw, 3rem); overflow-wrap: anywhere; }
@media (max-width: 400px) {
  .about-h1 { font-size: 1.55rem; }
  .values-head h2 { font-size: 1.45rem; overflow-wrap: anywhere; }
}
.form-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.field { min-width: 0; }
@media (max-width: 620px) {
  .form-row { grid-template-columns: minmax(0, 1fr); }
}
.compare .ok { color: #047857; }
@media (max-width: 620px) {
  .compare.is-stack td { display: block; position: relative; padding: 9px 14px 9px 124px; min-height: 40px; }
  .compare.is-stack td::before { position: absolute; left: 14px; top: 9px; width: 100px; }
  .compare.is-stack tfoot td { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding-left: 14px; }
  .compare.is-stack tfoot td::before { position: static; width: 100px; }
}
.hl-yellow { background: linear-gradient(transparent 8%, var(--hl) 8%, var(--hl) 92%, transparent 92%); }
.hero--vries h1 { line-height: 1.12; font-size: clamp(2.2rem, 4.2vw, 3.5rem); }
@media (min-width: 981px) {
  .hero--vries .hero-inner { padding: 44px 0 96px; }
}
@media (max-width: 980px) {
  .hero--vries .hero-inner { padding: 44px 0 0; }
}
.hero-visual { padding: 10px 0 30px; }
.hero-chip-1 { left: 2%; top: 4%; }
.hero-chip-2 { right: 0; top: 36%; }
.hero-chip-3 { left: 6%; bottom: 6%; }
/* Verborgen knop ook uit de tabvolgorde (visibility); de overgang houdt hem
   zichtbaar tot het vervagen klaar is. */
body.cta-in-view .wa-float { opacity: 0; pointer-events: none; visibility: hidden; transform: translateY(8px); }
.wa-float { transition: transform .2s ease, background .15s ease, opacity .2s ease, visibility .2s; }
.pdp-sticky .btn-ghost + .btn-ghost { margin-left: -4px; }
@media (max-width: 620px) {
  .modal { padding-top: 0; }
  .modal-head { position: sticky; top: 0; z-index: 2; background: #fff; padding-top: 22px; padding-bottom: 12px; margin-bottom: 10px; }
  .modal-close { top: 14px; }
  .hero-visual { display: none; }
  .hc-field:first-child, .hc-field:nth-child(4), .hero-check .btn, .hc-note { grid-column: 1 / -1; }
}
.cb-btn { background: var(--accent); color: #fff; }
.cb-btn:hover { background: var(--accent-600); }
.help-band .cb-btn { background: #fff; color: var(--ink); }
.help-band .cb-btn:hover { background: #dcf1f5; }
.tow-check.is-nee { border-style: solid; border-color: var(--accent); background: #dcf1f5; }
.prijs-amount b.is-tekst, .pdp-price .amount.is-tekst { font-size: 1.25rem; font-weight: 700; }
.spec-table h2 { font-size: 1.1rem; padding: 20px 24px; background: var(--dark); color: #fff; letter-spacing: 0; }
.spec-table .spec-row { display: grid; grid-template-columns: 42% 1fr; gap: 14px; }
.spec-table .spec-row dd { text-align: left; }
@media (max-width: 620px) {
  .spec-table h2 { padding: 16px 18px; }
  .spec-table .spec-row { grid-template-columns: 1fr; gap: 3px; }
}
.map-embed { position: relative; background: #dcf1f5; min-height: 120px; }
.map-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; color: var(--ink); z-index: 0; }
.map-fallback svg { width: 16px; height: 16px; }
.map-embed iframe { position: relative; z-index: 1; }
nav.breadcrumb { display: block; }
.bronnen { font-size: var(--fs-micro); color: var(--muted); margin-top: 6px; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--yellow-600); font-weight: 600; text-decoration: underline; cursor: pointer; }
@media (min-width: 981px) {
  .hero--vries .hero-grid { grid-template-columns: 1.2fr .8fr; gap: 40px; }
  .hero-visual { max-width: 470px; width: 100%; margin-left: auto; }
}
@media (min-width: 621px) {
  .modal-head { position: relative; }
}
.modal-head .modal-close { top: 0; right: 0; }
@media (max-width: 620px) {
  .modal-head { position: sticky; }
  .modal-head .modal-close { top: 18px; }
}
:root { --font-sans: "Inter", "Inter Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-head: var(--font-sans);
  --fs-h1: clamp(1.9rem, 1.2rem + 3.6vw, 3.25rem);
  --fs-h2: clamp(1.5rem, 1.05rem + 2.3vw, 2.4rem);
  --fs-h3: clamp(1.15rem, 1.05rem + 0.6vw, 1.35rem);
  --fs-lead: clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.8125rem;
  --dark: #0c2a3b;          
  --dark-2: #0c2a3b;
  --muted: #55636a;         
  --ok: #047857;
  --photo-bg: #edf5f7;      
  --radius: 12px;
  --radius-sm: 8px;
  --r-control: 8px;
  --shadow: 0 10px 30px rgba(8, 30, 40, .10);
  --shadow-sm: 0 2px 8px rgba(8, 30, 40, .06); }
body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.55; -webkit-font-smoothing: auto; }
@media (min-width: 981px) {
  body { font-size: 1.0625rem; }
}
h1, h2 { font-family: var(--font-head); font-weight: 700; line-height: 1.1; letter-spacing: -0.022em; text-wrap: balance; }
h3 { font-weight: 600; line-height: 1.25; letter-spacing: -0.014em; }
.hero h1, .page-hero h1, .about-h1 { font-size: var(--fs-h1); }
.section-title, .cta-inner h2, .who h2 { font-size: var(--fs-h2); margin-bottom: 10px; }
h3 { font-size: var(--fs-h3); }
.hero .lead, .section-intro { font-size: var(--fs-lead); line-height: 1.5; }
.section-intro { color: var(--muted); max-width: 58ch; margin-top: 10px; }
.section-head { max-width: 64ch; margin-bottom: 28px; }
.compare, .pdp-price, .spec-table, .prijs-amount, .proof-row b, .sticky-price { font-variant-numeric: tabular-nums; }
.hl, .hl-yellow { background: none; padding: 0; white-space: normal; color: inherit; }
.btn { min-height: 48px; padding: 0 22px; border-radius: var(--r-control); font-size: 1rem; line-height: 1.2; white-space: normal; text-align: center; transition: background .12s ease, border-color .12s ease, color .12s ease; }
.btn:hover { transform: none; }
.btn:active { transform: scale(.985); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn-primary, .btn-yellow { background: var(--accent); color: #fff; }
.btn-primary:hover, .btn-yellow:hover { background: var(--accent-600); }
.btn-secondary, .btn-ghost { background: #fff; color: var(--ink); border: 1px solid var(--ink); box-shadow: none; }
.btn-secondary:hover, .btn-ghost:hover { background: #f1f7f8; box-shadow: none; }
.hero .btn-secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.btn-icon { width: 48px; min-width: 48px; padding: 0; }
.btn-icon svg { width: 20px; height: 20px; }
.btn-sm { min-height: 44px; padding: 0 16px; font-size: var(--fs-small); }
.link-tel { font-weight: 600; text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; color: inherit; }
.arrow-link { min-height: 44px; display: inline-flex; align-items: center; padding: 10px 0; margin: -10px 0; font-size: var(--fs-small); }
.arrow-link:hover { gap: 7px; }
input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; accent-color: var(--accent); }
.field label, .hc-field label { font-size: var(--fs-small); font-weight: 600; text-transform: none; letter-spacing: 0; }
.turnstile-slot { min-height: 65px; }
.product-card, .sector-card, .contact-card, .blog-card, .acc-card, .how-card, .prijs-card { box-shadow: none; border: 1px solid var(--line); }
.product-media, .pdp-stage, .pdp-thumbs button { background: var(--photo-bg); }
.tick { background: none; border-radius: 0; width: auto; height: auto; box-shadow: none; }
.tick svg { width: 20px; height: 20px; color: var(--ok); }
@media (hover: none) {
  .btn:hover, .chip:hover, .kh-btn:hover, .wa-float:hover, .product-card:hover .product-media a.media-link img, a.sector-card:hover .sector-link svg { transform: none; }
  .product-card:hover, a.sector-card:hover, .contact-card:hover, a.blog-card:hover, .acc-card:hover, .chip:hover, .kh-btn:hover { transform: none; box-shadow: none; }
  .btn:active, .pdp-thumb:active, .kh-btn:active, .faq-q:active { transform: scale(.985); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (max-width: 620px) {
  .container { padding-inline: 16px; }
  :root { --shadow: 0 4px 14px rgba(8, 30, 40, .08); }
}
.hero--vries, .hero { background: var(--dark); }
.hero::before, .hero--vries::before, .hero::after { content: none; display: none; }
.hero--vries .hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; grid-template-areas: "inner visual" "check check" "proof proof"; gap: 12px 48px; align-items: center; }
.hero--vries .hero-inner { grid-area: inner; padding: 56px 0 8px; max-width: none; min-height: 0; }
.hero--vries .hero-visual { grid-area: visual; position: relative; align-self: end; padding: 32px 0 0; max-width: 520px; width: 100%; margin-left: auto; }
.hero--vries .hero-visual img { filter: none; }
.hero-check-wrap { grid-area: check; margin: 20px 0 0; padding: 0; }
.hero--vries .hero-proof { grid-area: proof; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 14px 0 0; padding-bottom: 56px; color: rgba(255, 255, 255, .88); font-size: var(--fs-small); }
.hero--vries .hero-proof .link-tel { color: #fff; font-size: 1rem; }
.hero--vries .lead { color: rgba(255, 255, 255, .88); max-width: 54ch; }
.hero--vries h1 { font-size: var(--fs-h1); line-height: 1.08; margin-bottom: 14px; }
.hero-chip { display: none !important; }
.hero-check { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr auto; gap: 12px; align-items: end; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.hero-check .hc-field { min-width: 0; }
.hero-check .hc-field label { display: block; margin-bottom: 6px; color: var(--ink); }
.hero-check .btn { white-space: nowrap; min-height: 48px; }
.hero-check .hc-note { grid-column: 1 / -1; margin: 0; font-size: var(--fs-small); color: var(--muted); }
.open-status i { display: none; }
.open-status { font-size: var(--fs-small); }
.open-status.is-open span::before { content: "● "; color: #4ade80; }
.open-status.is-closed span::before { content: "● "; color: rgba(255, 255, 255, .5); }
.who .open-status.is-closed span::before { color: var(--muted); }
@media (max-width: 980px) {
  .hero--vries .hero-grid { grid-template-columns: 1fr; grid-template-areas: "inner" "visual" "check" "proof"; gap: 0; }
  .hero--vries .hero-inner { padding: 28px 0 0; }
  .hero--vries h1 { margin-bottom: 10px; }
  .hero--vries .lead { font-size: 1rem; margin-bottom: 0; }
  .hero--vries .hero-visual { display: block; max-width: 200px; margin: 10px 0 14px; padding: 0; align-self: start; }
  .hero--vries .hero-visual::after { display: none; }
  .hero-check-wrap { margin: 0; }
  /* Van/Tot naast elkaar zolang elk veld minstens 140 px heeft, anders onder
     elkaar (anders knipt de datum af in Chromium op 320 px). */
  .hero-check { grid-template-columns: repeat(auto-fit, minmax(max(140px, 40%), 1fr)); gap: 10px; padding: 14px; }
  .hero-check .hc-unit, .hero-check .hc-postcode, .hero-check .btn, .hero-check .hc-note { grid-column: 1 / -1; }
  .hero--vries .hero-proof { padding: 16px 0 28px; margin: 0; }
}
/* Cijferbalk: zwevende witte kaart die half over de donkere hero valt; per
   item een icoon in een ijsblauw vlak, een korte kop en een uitleg (zoals op
   koelaanhangerdirect.nl). */
.proof-row-wrap { position: relative; z-index: 2; padding-bottom: 4px; background: linear-gradient(to bottom, var(--dark) 0 44px, transparent 44px); }
.proof-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 1px 2px rgba(8, 30, 40, .06), 0 18px 40px -24px rgba(8, 30, 40, .4); }
.proof-row li { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 18px 20px; border-left: 1px solid var(--line); }
.proof-row li:first-child { border-left: 0; }
.proof-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--yellow-soft); color: var(--accent); }
.proof-ic svg { width: 22px; height: 22px; }
.proof-txt { display: grid; gap: 2px; min-width: 0; }
.proof-row b { font-size: 1.125rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--ink); }
.proof-row .proof-txt > span { font-size: var(--fs-small); line-height: 1.4; color: var(--muted); }
@media (max-width: 980px) {
  .proof-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-row li:nth-child(3) { border-left: 0; }
  .proof-row li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 620px) {
  .proof-row-wrap { background: linear-gradient(to bottom, var(--dark) 0 28px, transparent 28px); }
  .proof-row { grid-template-columns: minmax(0, 1fr); padding: 4px 14px; border-radius: 14px; }
  .proof-row li, .proof-row li:nth-child(3) { gap: 12px; padding: 12px 12px 12px 0; border-left: 0; }
  .proof-row li + li { border-top: 1px solid var(--line); }
  .proof-ic { width: 36px; height: 36px; border-radius: 10px; }
  .proof-ic svg { width: 19px; height: 19px; }
  .proof-row b { font-size: 1rem; }
}
.section { padding-block: var(--sp, 72px); }
.section--tight { --sp: 48px; }
@media (max-width: 620px) {
  .section { --sp: 56px; }
  .section--tight { --sp: 40px; }
}
.duo { display: grid; grid-template-columns: 3fr 2fr; gap: 32px; align-items: end; margin-top: 8px; }
.duo-media { display: grid; place-items: center; background: var(--photo-bg); aspect-ratio: 4 / 3; padding: 8%; border-radius: var(--radius); overflow: hidden; }
.duo-media img { max-height: 100%; width: auto; object-fit: contain; transition: transform .25s ease; }
@media (hover: hover) and (pointer: fine) {
  .duo-media:hover img { transform: scale(1.02); }
}
.duo h3 { font-size: 1.5rem; margin-top: 18px; }
.duo h3 a:hover { text-decoration: underline; }
.duo .spec-line { color: var(--muted); font-size: var(--fs-small); margin-top: 6px; }
.duo .price { font-size: 1.15rem; margin: 10px 0 14px; }
.duo .btn { width: auto; }
@media (max-width: 700px) {
  .duo { grid-template-columns: 1fr; gap: 36px; }
  .duo .btn { width: 100%; }
}
.compare-blok { margin-top: 48px; }
.compare-blok h3 { margin-bottom: 14px; }
.compare-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 20px; }
.compare-wrap { overflow: visible; }
.compare, .compare.is-stack, .compare.is-compact { width: 100%; border-collapse: collapse; font-size: .95rem; display: table; table-layout: fixed; }
.compare thead, .compare tbody, .compare tr { display: revert; }
.compare thead th { background: none; color: var(--ink); font-weight: 600; text-align: left; padding: 12px; border-bottom: 2px solid var(--ink); position: static; }
.compare thead th a { color: inherit; }
.compare td, .compare tbody th { display: table-cell; padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; position: static; min-height: 0; }
.compare td::before { content: none; }
.compare tbody th { color: var(--muted); font-weight: 500; }
.compare .hi { background: var(--photo-bg); }
.compare .ok { color: var(--ok); font-weight: 600; }
.compare .ok::before { content: "✓ "; }
.compare .no { color: var(--muted); font-weight: 500; }
.compare-hint { font-size: var(--fs-small); color: var(--muted); margin-top: 10px; }
@media (max-width: 620px) {
  .compare { font-size: var(--fs-small); }
  .compare th:first-child, .compare td:first-child { width: 30%; }
  .compare td, .compare tbody th, .compare thead th { padding: 10px 8px; }
  .compare td:first-child, .compare tbody th { padding-left: 0; }
}
.stappen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; counter-reset: stap; }
.stappen li { border-top: 2px solid var(--ink); padding-top: 16px; }
.stappen .num { display: block; font-size: 2rem; font-weight: 700; line-height: 1; color: var(--accent); margin-bottom: 10px; }
.stappen h3 { margin-bottom: 6px; }
.stappen p { color: var(--muted); font-size: var(--fs-small); }
@media (max-width: 700px) {
  .stappen { grid-template-columns: 1fr; gap: 22px; }
}
.sector-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
a.sector-card, .sector-card { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius); border: 0; box-shadow: none; background: var(--dark); }
.sector-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.sector-card::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(to top, rgba(15, 34, 48, .82), transparent); }
.sector-card h3 { position: absolute; left: 16px; right: 16px; bottom: 14px; color: #fff; font-size: 1.15rem; z-index: 2; margin: 0; }
.sector-card .sector-media, .sector-card .sector-body, .sector-card p, .sector-card .sector-link { display: none; }
@media (hover: hover) and (pointer: fine) {
  a.sector-card:hover img { transform: scale(1.03); }
}
@media (max-width: 1080px) {
  .sector-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .sector-grid { gap: 12px; }
  .sector-card h3 { font-size: 1rem; left: 12px; right: 12px; bottom: 10px; }
}
.who { background: #fff; }
.who-grid { display: grid; grid-template-columns: 2fr 3fr; gap: 48px; align-items: center; }
.who-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); display: block; }
.who-body h2 { margin-bottom: 12px; }
.who-body > p { color: var(--muted); max-width: 54ch; }
.who-tel { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; color: var(--ink) !important; }
.who-tel .link-tel { font-size: 1.6rem; font-weight: 700; text-decoration: none; }
.who-tel .open-status { color: var(--muted); }
.who-uren { margin-top: 6px; font-size: var(--fs-small); color: var(--muted) !important; }
.who-uren a { text-decoration: underline; text-underline-offset: .15em; }
.who .callback-form { margin-top: 24px; padding: 18px; background: var(--bg); border-radius: var(--radius); }
.who .cb-kop { font-weight: 600; margin-bottom: 10px; }
.who .cb-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; }
.who .cb-note { margin-top: 8px; font-size: var(--fs-small); color: var(--muted); }
@media (max-width: 700px) {
  .who-grid { grid-template-columns: 1fr; gap: 24px; }
  .who-foto img { aspect-ratio: 3 / 2; }
  .who .cb-row { grid-template-columns: 1fr; }
}
.reviews-band { background: var(--dark); color: #fff; padding: 64px 0; }
.reviews-head { max-width: 64ch; margin-bottom: 28px; }
.reviews-num { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 1.15rem; }
.reviews-num .stars { --ster-gap: 2px; color: #ffb703; }
.reviews-num b { font-size: 1.5rem; }
.reviews-num a { text-decoration: underline; text-underline-offset: .15em; }
.reviews-sub { margin-top: 8px; color: rgba(255, 255, 255, .7); font-size: var(--fs-small); }
.reviews-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.reviews-list blockquote { margin: 0; border-left: 2px solid rgba(255, 255, 255, .3); padding-left: 18px; }
.reviews-list blockquote p { font-size: 1.15rem; line-height: 1.45; }
.reviews-list footer { margin-top: 12px; font-size: var(--fs-small); color: rgba(255, 255, 255, .7); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.reviews-list footer b { color: #fff; }
.review-badge .stars { color: #ffb703; }
@media (max-width: 760px) {
  .reviews-list { grid-template-columns: 1fr; gap: 22px; }
  .reviews-band { padding: 48px 0; }
}
.faq-more > summary { list-style: none; cursor: pointer; padding: 18px 0; font-weight: 600; color: var(--accent); min-height: 44px; display: flex; align-items: center; gap: 8px; }
.faq-more > summary::-webkit-details-marker { display: none; }
.faq-more > summary::after { content: "+"; font-size: 1.3rem; }
.faq-more[open] > summary::after { content: "−"; }
.faq-more[open] > summary { border-bottom: 1px solid var(--line); }
#faq .section-head { text-align: left; margin-bottom: 24px; max-width: none; }
.faq-a p { font-size: 1rem; max-width: 65ch; }
img { height: auto; }
.duo-media { position: relative; }
.duo-media img { position: absolute; inset: 8%; width: 84%; height: 84%; max-height: none; object-fit: contain; }
.who-foto { display: block; }
.who-foto img { height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 700px) {
  .who-foto img { aspect-ratio: 3 / 2; }
}
.stappen { list-style: none; padding-left: 0; margin: 0; }
.pdp { padding: 20px 0 48px; }
.pdp-top { display: grid; grid-template-columns: 1.05fr .95fr; grid-template-areas: "gallery kop" "gallery buy" "gallery detail"; gap: 18px 48px; align-items: start; }
.pdp-kop { grid-area: kop; }
.pdp-buy { grid-area: buy; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; background: #fff; box-shadow: none; margin: 0; }
.pdp-gallery { grid-area: gallery; position: sticky; top: 96px; }
.pdp-detail { grid-area: detail; }
.pdp-eyebrow { display: block; font-size: var(--fs-small); font-weight: 600; color: var(--muted); margin: 0 0 8px; text-transform: none; letter-spacing: 0; }
.pdp-kop h1 { font-size: var(--fs-h1); margin-bottom: 12px; }
.pdp-trust { font-size: var(--fs-small); color: var(--muted); margin: 12px 0 0; }
.pdp-buy .btn-primary { width: 100%; }
.pdp-safety { font-size: var(--fs-small); color: var(--muted); margin: 8px 0 0; }
.pdp-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 16px; font-size: var(--fs-small); }
.pdp-contact .link-tel { font-size: 1.05rem; }
.pdp-wa { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; min-height: 44px; font-size: var(--fs-small); font-weight: 600; text-decoration: underline; text-underline-offset: .15em; }
.pdp-wa svg { width: 18px; height: 18px; color: #075e54; }
.pdp-price-note { font-size: var(--fs-small); color: var(--muted); margin: 6px 0 16px; }
.pdp-stage { background: var(--photo-bg); border-radius: var(--radius); border: 0; box-shadow: none; }
.pdp-stage img { mix-blend-mode: normal; padding: 24px; }
.pdp-thumbs { grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 10px; }
.pdp-thumbs button { min-width: 44px; min-height: 44px; aspect-ratio: 1; border-radius: var(--r-control); border: 1px solid var(--line); background: var(--photo-bg); overflow: hidden; }
.pdp-thumbs button.active { border-color: var(--ink); box-shadow: none; }
.pdp-detail .pdp-lead { margin: 4px 0 16px; color: var(--ink); }
.pdp-key .tick { background: none; width: auto; height: auto; }
.pdp-key .tick svg { width: 18px; height: 18px; color: var(--ok); }
.pdp-key li { font-size: 1rem; }
.pdp-mini-usps svg { color: var(--accent); }
.pdp-gallery-links { margin-top: 18px; }
.pdp-gallery-links a, .pdp-gallery-links button { min-height: 44px; }
.pdp-foto-note { font-size: var(--fs-micro); color: var(--muted); margin-top: 8px; }
.tow-check { margin-top: 18px; }
.lees-verder > summary { cursor: pointer; font-weight: 600; color: var(--accent); min-height: 44px; display: flex; align-items: center; list-style: none; }
.lees-verder > summary::-webkit-details-marker { display: none; }
.lees-verder > summary::after { content: "+"; margin-left: 8px; font-size: 1.2rem; }
.lees-verder[open] > summary::after { content: "−"; }
.spec-table .spec-row { display: grid; grid-template-columns: 42% 1fr; gap: 14px; }
.spec-table .spec-row dd { text-align: left; }
.zuster-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; margin-top: 20px; }
.zuster-list li a { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 12px 0; border-top: 1px solid var(--line); }
.zuster-list svg { width: 22px; height: 22px; color: var(--accent); flex: none; }
.zuster-list b { display: block; }
.zuster-list span span { font-size: var(--fs-small); color: var(--muted); }
.acc-card .acc-ico { background: none; width: auto; height: auto; }
.acc-card .acc-ico svg { color: var(--accent); width: 24px; height: 24px; }
@media (max-width: 980px) {
  .pdp-top { display: flex; flex-direction: column; gap: 16px; }
  .pdp-gallery { position: static; }
  .pdp-stage img { padding: 14px; }
  .pdp-kop h1 { margin-bottom: 10px; }
  .pdp-buy { padding: 16px; }
}
@media (max-width: 700px) {
  .zuster-list { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .spec-table .spec-row { grid-template-columns: 42% 1fr; gap: 10px; }
  .spec-table .spec-row dd { text-align: left; overflow-wrap: anywhere; }
  /* Lange labels ("Temperatuurbereik") afbreken in plaats van over de waarde
     heen; alleen woorden van 10+ letters, zodat "binnen" en "remmen" heel blijven. */
  .spec-table .spec-row dt { overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 6 5; -webkit-hyphenate-limit-before: 6; -webkit-hyphenate-limit-after: 5; }
}
.pdp { padding-top: 10px; }
.pdp .breadcrumb { margin-bottom: 14px; font-size: var(--fs-micro); }
@media (max-width: 980px) {
  .pdp { padding-top: 6px; }
  .pdp .breadcrumb { margin-bottom: 8px; }
}
.unit-keuze { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border: 0; padding: 0; margin: 0 0 16px; }
.unit-keuze legend, .route-keuze legend { font-size: var(--fs-small); font-weight: 600; margin-bottom: 8px; padding: 0; }
.unit-optie { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: var(--r-control); cursor: pointer; }
.unit-optie input { flex: none; margin: 0; }
.unit-optie img { width: 48px; height: 36px; object-fit: cover; border-radius: 4px; flex: none; }
.unit-optie .unit-ico { width: 48px; height: 36px; display: grid; place-items: center; border-radius: 4px; background: var(--bg); color: var(--muted); font-weight: 700; flex: none; }
.unit-optie b { display: block; font-size: var(--fs-small); line-height: 1.25; }
.unit-optie small { display: block; font-size: var(--fs-micro); color: var(--muted); line-height: 1.3; }
.unit-optie:has(input:checked) { border-color: var(--accent); background: #dcf1f5; }
.route-keuze { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border: 0; padding: 0; margin: 0 0 16px; }
.route-optie { min-height: 56px; align-items: center; }
.form-progress-num { background: none; color: var(--accent); width: auto; height: auto; font-weight: 700; }
.form-progress { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 6px; }
.form-progress-van { font-size: var(--fs-small); }
.form-progress-bar { display: block; height: 4px; background: var(--line); border-radius: 2px; margin-bottom: 18px; overflow: hidden; }
.form-progress-bar i { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(.5); transition: transform .25s ease; }
.form-extra { border-top: 1px solid var(--line); margin: 4px 0 14px; }
.form-extra > summary { list-style: none; cursor: pointer; min-height: 48px; display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--accent); padding: 8px 0; }
.form-extra > summary::-webkit-details-marker { display: none; }
.form-extra > summary small { font-weight: 400; color: var(--muted); font-size: var(--fs-small); }
.form-extra > summary::after { content: "+"; margin-left: auto; font-size: 1.3rem; }
.form-extra[open] > summary::after { content: "−"; }
.form-extra > .form-row:first-of-type { margin-top: 6px; }
.modal-foot { margin-top: 8px; }
.modal-foot .btn { width: 100%; margin: 0; }
.modal-foot .form-note { margin-top: 10px; font-size: var(--fs-small); text-align: left; }
.modal .modal-foot { position: sticky; bottom: 0; background: #fff; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); z-index: 1; }
.form-samenvatting { font-size: var(--fs-small); color: var(--muted); background: var(--bg); border-radius: var(--r-control); padding: 10px 12px; margin-bottom: 14px; }
.form-wijzig { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--accent); text-decoration: underline; cursor: pointer; min-height: 24px; }
.form-trust { margin-top: 12px; font-size: var(--fs-small); color: var(--muted); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.form-back { background: none; border: 0; padding: 10px 0; min-height: 44px; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.form-back svg { width: 16px; height: 16px; }
.field-error { font-size: var(--fs-small); color: #b42318; margin-top: 4px; }
.form-error { font-size: var(--fs-small); }
.modal-close { width: 44px; height: 44px; }
.modal-head { padding-right: 52px; margin-bottom: 14px; }
.modal-head h2 { font-size: 1.35rem; }
.modal-head h2:focus { outline: none; }
.modal-product { font-size: var(--fs-small); color: var(--muted); background: none; border: 0; padding: 0; margin: 0; font-weight: 400; }
.modal-overlay { overscroll-behavior: contain; }
body.modal-open { position: fixed; width: 100%; overflow: hidden; }
@media (max-width: 620px) {
  .unit-keuze, .route-keuze { grid-template-columns: 1fr; gap: 8px; }
  .form-row { grid-template-columns: 1fr; gap: 12px; }
  .form-row.form-datums { grid-template-columns: repeat(auto-fit, minmax(max(140px, 40%), 1fr)); }
  /* Sheet op de onderrand (een auto-marge rondom centreerde hem); geen
     onderpadding, zodat de sticky voet op de rand eindigt en er niets onder
     doorschijnt. De lege regel houdt "Terug naar stap 1" van de rand. */
  .modal { margin: auto 0 0; padding: 0 18px 0; }
  .modal .form-step[data-step="2"]::after { content: ""; display: block; height: 16px; }
  .modal-head { padding-top: 18px; }
}
.page-hero { background: var(--dark); color: #fff; padding: 36px 0 44px; }
.page-hero::before, .page-hero::after { content: none; }
.page-hero h1 { font-size: var(--fs-h1); margin: 8px 0 12px; }
.page-hero > .container > p { color: rgba(255, 255, 255, .88); max-width: 54ch; font-size: var(--fs-lead); }
.page-hero .breadcrumb { font-size: var(--fs-micro); color: rgba(255, 255, 255, .7); }
.page-hero .breadcrumb a { color: inherit; }
.page-hero-check { margin-top: 24px; color: var(--ink); }
.page-hero-check .hero-check { box-shadow: var(--shadow); }
.page-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.page-status { margin-top: 12px; font-size: var(--fs-small); color: rgba(255, 255, 255, .85); }
.catalog { padding: 48px 0 24px; }
.catalog-layout { display: block; }
.catalog-main { width: 100%; }
.catalog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 900px; }
.catalog-note { margin-top: 18px; font-size: var(--fs-small); color: var(--muted); max-width: 64ch; }
.product-card .product-badge, .product-card .card-ctas .btn-ghost, .product-card .card-route .chip, .cat-tabs.catalog-tabs { display: none; }
.product-card { background: #fff; }
.product-card .product-media { background: var(--photo-bg); aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 6%; }
.product-card .product-media img { max-height: 100%; width: auto; height: auto; object-fit: contain; }
.product-card .card-ctas .btn-yellow { width: 100%; }
.proof-row--dark { border: 0; margin-top: 28px; }
.proof-row--dark li { border-color: rgba(255, 255, 255, .2); }
.proof-row--dark b { color: #fff; }
.proof-row--dark span { color: rgba(255, 255, 255, .72); }
@media (max-width: 620px) {
  .catalog-grid { grid-template-columns: 1fr; gap: 16px; }
  .page-hero { padding: 24px 0 28px; }
  .page-ctas .btn { width: 100%; }
  .proof-row--dark li:nth-child(n+3) { border-top-color: rgba(255, 255, 255, .2); }
}
.dark-section, .cta-band, .split, .about-feature { clip-path: none; }
.accent-block { display: none; }
.how-card .hn { background: none; color: var(--accent); width: auto; height: auto; font-size: 1.6rem; font-weight: 700; box-shadow: none; border-radius: 0; }
.how-card { box-shadow: none; border: 1px solid var(--line); }
.stat-tile { background: var(--dark); border-radius: var(--radius); box-shadow: none; }
.values-head h2 { font-size: var(--fs-h2); }
.team-card { box-shadow: none; }
.site-header .btn-yellow { min-height: 44px; }
.compare, .compare.is-compact, .compare-wrap table { min-width: 0; }
.compare-wrap { overflow-x: visible; }
.compare th, .compare td { overflow-wrap: anywhere; }
.logo-tld, i.logo-tld { font-size: var(--fs-micro); }
.review-badge .g { font-size: var(--fs-micro); }
.review-badge { min-height: 44px; align-items: center; }
.review-badge .muted, .pdp-price .unit, span.optioneel, .form-trust .muted { font-size: var(--fs-micro); }
.product-card .spec-line, .duo .spec-line { font-size: var(--fs-small); }
.site-header .logo, .site-footer .logo { min-height: 48px; display: inline-flex; align-items: center; }
.site-header .header-phone, .site-header .nav-toggle { width: 48px; height: 48px; min-width: 48px; min-height: 48px; }
.site-header .keep-on-mobile, .site-header .btn { min-height: 48px; }
.footer-links { gap: 0 12px; }
.footer-links a { min-width: 48px; padding: 10px 4px; justify-content: center; }
.duo h3 a, .product-card h3 a, .catalog-grid h3 a { display: inline-flex; align-items: center; min-height: 44px; }
.contact-block a, .pdp-contact a, li > a[href^="tel:"], li > a[href^="mailto:"], .footer-adres a, .footer-uren a, .who-uren a, .article-body a[href^="tel:"], .article-body a[href^="mailto:"] { display: inline-block; padding: 10px 0; }
.who .callback-form, .who .callback-form label, .who .cb-kop, .who .cb-note, .who .callback-form .field label { color: var(--ink); }
.who .cb-note { color: var(--muted); opacity: 1; }
/* Scroll-lock alleen waar het hamburgermenu bestaat: een achtergebleven
   nav-open (venster verbreed met het menu open) zet de desktoppagina niet vast. */
@media (max-width: 980px) {
  body.nav-open { position: fixed !important; width: 100%; overflow: hidden; }
}
@media (min-width: 400px) and (max-width: 980px) {
  .site-header .header-phone { width: auto; min-width: 48px; }
}
.logo .logo-tld, .logo-word .logo-tld, .logo-tld { font-size: 13px; }
@media (max-width: 980px) {
  .main-nav.open > ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
  .main-nav.open > ul > li.nav-cta, .main-nav.open > ul > li.nav-mega { grid-column: 1 / -1; }
  .main-nav.open > ul > li > a { min-height: 44px; padding: 10px 6px; font-size: var(--fs-small); }
  .main-nav.open .nav-cta { padding-bottom: 10px; margin-bottom: 2px; }
  .main-nav.open .nav-cats ul a { min-height: 44px; padding: 2px 6px; font-size: var(--fs-small); }
  .main-nav.open .nav-kolom:nth-child(2) ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }
  .main-nav.open .nav-groep { padding: 8px 6px 2px; }
  .main-nav.open .nav-subs .nav-uitleg { min-height: 44px; padding: 10px 6px; font-size: var(--fs-small); }
  .main-nav.open .nav-cat-beeld { width: 36px; height: 27px; }
  /* Offerte- en belknop los van elkaar; de omlijnde belknop houdt zijn onderrand. */
  .main-nav.open > ul > li.nav-cta { display: grid; gap: 10px; }
  .main-nav.open > ul > li.nav-cta > a.btn-secondary { border-bottom: 1px solid var(--ink); }
}
h3 > a, .prijs-card h3 a, .prijs-grid h3 a { display: inline-flex; align-items: center; min-height: 44px; }
.contact-block a, .pdp-contact a, li > a[href^="tel:"], li > a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: 44px; padding: 11px 0; }
.article-body li a:not(.btn) { display: inline-block; padding-block: 12px; margin-block: -12px; }
.review-badge b { font-size: var(--fs-small); }
.review-badge .muted, .breadcrumb, .page-hero .breadcrumb, .pdp .breadcrumb, .pdp-price .from, .pdp-price .unit, .tow-row label, .footer-legal, .footer-legal a, span.optioneel, .form-trust .muted { font-size: var(--fs-small); }
.hc-note, .page-hero-check .hc-note, .cap-line, .cap-line span, .card-route, .card-route span, .product-card .cap-line { font-size: var(--fs-small); }
.article-body a:not(.btn), .article a:not(.btn) { display: inline-block; padding-block: 12px; margin-block: -12px; }

/* ---- V2: reviewronde 2 ---- */
/* 1. desktop: nummer naast de knop zichtbaar */
/* Nummer voluit pas vanaf 1081 px: daaronder past het naast het menu met
   "Huren" en de knop niet, en blijft het een belknopje (zoals op
   koelaanhangerdirect.nl, waar het met Inter tot 1057 px buiten beeld liep). */
@media (min-width: 1081px) {
  .site-header .header-phone { width: auto; min-width: 48px; padding-inline: 10px 14px; gap: 8px; }
  .site-header .header-phone-label { display: inline; }
}
/* 2. sticky balk: één regel, knop breekt niet, label met ellipsis */
.pdp-sticky { min-height: 60px; }
.pdp-sticky .sticky-price { flex: 1 1 0; min-width: 0; }
.pdp-sticky .sticky-price b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: none; }
.pdp-sticky .sticky-price span { font-size: var(--fs-small); }
.pdp-sticky .btn-primary { flex: 0 0 auto; white-space: nowrap; padding-inline: 16px; }
.pdp-sticky .btn-icon { flex: 0 0 48px; width: 48px; height: 48px; padding: 0; }
/* 3. vergelijktabel: rijkoppen mogen afbreken */
.compare tbody th, .compare thead th { white-space: normal; hyphens: auto; }
@media (max-width: 620px) { .compare th:first-child, .compare td:first-child { width: 34%; } .compare tbody th { padding-right: 8px; } }
/* 4. over-ons */
.about-h1 { overflow-wrap: normal; }
.values-head, .why-head { text-align: left; }
/* 5. pop-up stap 1 compacter; stap 2 zonder loze ruimte */
@media (max-width: 620px) {
  .unit-keuze { grid-template-columns: 1fr 1fr; gap: 8px; }
  .unit-optie { min-height: 56px; padding: 6px 10px; }
  .unit-optie img, .unit-optie .unit-ico { width: 40px; height: 30px; }
  .route-keuze { grid-template-columns: 1fr 1fr; gap: 8px; }
  .route-optie { min-height: 56px; padding: 8px 10px; }
  .modal-foot { padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); }
}
.modal .form-step[data-step="2"] { margin-top: 0; padding-top: 0; border-top: 0; }
.modal-product { display: block; }
/* 11. vinkjes en kleine tekst */
.vinkje { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 1rem; }
.vinkje-groep { display: grid; gap: 4px; }
.vinkje-label, .unit-optie small, .sticky-price span { font-size: var(--fs-small); }
@media (max-width: 620px) { .form-vinkjes { flex-direction: column; align-items: stretch; } }
/* 19. geen cirkels, tegels of oranje; geen bolletje bij de bereikbaarheid */
.why-box .tick, .trust-box .tick, .prijs-card .tick, .included-grid .tick, .usp-list .tick, .pdp-key .tick, .included-strip .tick, .hc-note .tick,
.check-card .ci, .contact-card .ci, .contact-card .ci-ico, .proscons .pc-ico { width: auto; height: auto; min-width: 0; background: none; border-radius: 0; box-shadow: none; color: var(--ok); display: inline-flex; }
.tick svg, .ci svg, .ci-ico svg, .pc-ico svg { width: 20px; height: 20px; }
.check-card .ci svg, .contact-card .ci svg, .contact-card .ci-ico svg { width: 22px; height: 22px; color: var(--ink); }
.proscons .pc-ico { color: var(--ink); font-weight: 700; }
.proscons .cons .pc-ico, .proscons .cons .pc-ico svg { color: var(--muted); }
.why-box .tick, .trust-box .tick, .on-dark .tick { color: #fff; }
.open-status span::before, .open-status.is-open span::before, .open-status.is-closed span::before { content: none; }
.open-status { display: inline-block; min-height: 1.4em; }
/* 21/22. kaarten: één primaire knop, geen chips of badges; prijskaarten in twee kolommen */
.card-tow, .product-card .card-route, .prijs-card .product-badge { display: none; }
.product-card { position: relative; }
.product-card h3 a::after { content: ""; position: absolute; inset: 0; }
.product-card .card-ctas { position: relative; z-index: 1; }
.product-card .cap-line { font-size: var(--fs-small); color: var(--muted); }
@media (min-width: 700px) { .prijs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; } }
/* 23/24/25. duo-vlak zichtbaar, FAQ uitgelijnd, links in lopende tekst herkenbaar */
.duo-media { background: #fff; border: 1px solid var(--line); }
#faq .faq { margin-inline: 0; max-width: 760px; }
.faq-a a, .reading-prose a, .catalog-note a, .pdp-prose a, .article-body p a, .lead a, .section-intro a, .pdp-lead a, .how-card a, .pdp-term a { color: var(--accent-600); text-decoration: underline; text-underline-offset: .15em; }
.why-box a, .on-dark a:not(.btn), .hero a:not(.btn):not(.review-badge), .cta-band a:not(.btn) { color: #fff; }
/* 31. footer-adres op één of twee regels */
.site-footer .footer-brand p { max-width: none; }
.footer-uren a { white-space: nowrap; }
/* 33. focus zichtbaar op donkere vlakken en op radiokaarten */
.help-band .btn:focus-visible, .page-hero .btn:focus-visible, .hero .btn:focus-visible, .reviews-band .btn:focus-visible, .site-footer .btn:focus-visible, .dark-section .btn:focus-visible, .article-cta .btn:focus-visible { outline-color: #fff; box-shadow: 0 0 0 5px var(--dark); }
.unit-optie:has(input:focus-visible), .route-optie:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 34. WhatsApp-float met contrast */
.wa-float { background: #075e54; }
.wa-float:hover { background: #054c44; }
/* 29. breadcrumb- en tabelkoplinks met tikvlak */
.breadcrumb a, .compare thead th a { display: inline-block; padding: 10px 0; margin: -10px 0; }
/* Pop-up stap 1 op een kleine telefoon: kop en voet compacter, zodat periode en postcode boven de voet staan. */
@media (max-width: 620px) {
  .modal-head p.modal-product { display: none; }
  .modal-head { margin-bottom: 8px; }
  .modal-head h2 { font-size: 1.2rem; }
  .modal .form-progress { margin-bottom: 4px; }
  .modal .form-progress-bar { margin-bottom: 12px; }
  .modal .form-row { margin-bottom: 10px; }
  .modal .unit-keuze, .modal .route-keuze { margin-bottom: 10px; }
  .modal .unit-keuze legend, .modal .route-keuze legend { margin-bottom: 6px; }
  .modal .form-step[data-step="1"] .modal-foot .form-note { display: none; }
  .modal .form-step[data-step="1"] .modal-foot { padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); }
}
/* Unitkaarten in de pop-up op een telefoon: één kolom met lage rijen (twee kolommen liepen over de rand). */
@media (max-width: 620px) {
  .unit-keuze { grid-template-columns: 1fr; gap: 6px; }
  .unit-optie { min-height: 48px; padding: 4px 10px; min-width: 0; overflow: hidden; }
  .unit-optie > span { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
  .unit-optie b { display: inline; }
  .unit-optie small { display: inline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .unit-optie img, .unit-optie .unit-ico { width: 36px; height: 27px; }
  .route-optie { min-width: 0; }
  .route-optie span { min-width: 0; }
}
/* Inline formulier op /contact, heel smal: routekaarten onder elkaar, anders
   loopt "koelaanhanger," over de rand. De pop-up houdt zijn twee kolommen. */
@media (max-width: 360px) {
  #offerteForm .route-keuze { grid-template-columns: 1fr; }
}

/* ---- V2: prestatieronde ---- */
/* Sterren als één element: vijf sterren als masker naast elkaar (was vijf
   svg's met <use>, elf DOM-elementen per rij). Grootte en tussenruimte per plek
   via --ster en --ster-gap, minder dan vijf via --n (build.js sterren()). */
.stars { --ster: 16px; --ster-gap: 1px; --ster-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 6.1 6.7.8-5 4.6 1.3 6.7L12 17.6 6.1 20.8l1.3-6.7-5-4.6 6.7-.8z'/%3E%3C/svg%3E");
  display: inline-block; flex: none; width: calc(var(--n, 5) * var(--ster) + (var(--n, 5) - 1) * var(--ster-gap)); height: var(--ster);
  background: currentColor; -webkit-mask: var(--ster-img) 0 50% / var(--ster) var(--ster) space no-repeat; mask: var(--ster-img) 0 50% / var(--ster) var(--ster) space no-repeat; }
@media (forced-colors: active) { .stars { forced-color-adjust: none; background: CanvasText; } }
.review-badge .stars, .reviews-num .stars { --ster-gap: 1px; color: #ffb703; }
/* Productpagina korter: één lijst zonder iconen, opties en checklist als regels */
.pdp-h2 { margin-top: 8px; }
.included-list { margin-top: 14px; columns: 2; column-gap: 32px; }
.included-list li { break-inside: avoid; display: flex; gap: 10px; padding: 6px 0; font-size: 1rem; }
.included-list li .tick { flex: none; }
.included-list .included-kop { display: block; column-span: all; font-weight: 600; color: var(--muted); padding: 14px 0 4px; }
.opties-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.opties-list li { border-top: 1px solid var(--line); padding: 14px 0; }
.opties-list h3 { font-size: 1.05rem; margin-bottom: 4px; }
.opties-list p { color: var(--muted); font-size: var(--fs-small); margin: 0; }
.check-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin: 0; }
.check-row { border-top: 1px solid var(--line); padding: 14px 0; }
.check-row dt { font-weight: 600; margin-bottom: 4px; }
.check-row dd { margin: 0; color: var(--muted); font-size: var(--fs-small); }
@media (max-width: 620px) { .included-list { columns: 1; } .opties-list, .check-rows { grid-template-columns: 1fr; } }
/* Keuzepagina: stappenstijl in plaats van kaarten, en de navy kaders licht */
.how-grid .how-card { border: 0; border-top: 2px solid var(--ink); border-radius: 0; padding: 16px 0 0; background: none; box-shadow: none; }
.how-card .hn { font-size: 2rem; margin-bottom: 8px; display: block; }
.why-box { background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; box-shadow: none; }
.why-box h3, .why-box b, .why-box li { color: var(--ink); }
.why-box .tick { color: var(--ok); }
.why-box a { color: var(--accent-600); }

/* ---- Kortere pagina's op een telefoon ---- */
.proscons > div { border: 0; border-radius: 0; padding: 0; background: none; }
.proscons { gap: 8px 32px; margin: 4px 0 24px; }
.proscons h3 { margin-bottom: 8px; }
.proscons li { margin-bottom: 6px; }
@media (max-width: 620px) {
  .section { --sp: 44px; }
  .section--tight { --sp: 32px; }
  .proscons { grid-template-columns: 1fr; gap: 18px; }
  .included-list li { padding: 3px 0; font-size: var(--fs-small); }
  .included-list .included-kop { padding: 10px 0 2px; }
  .opties-list li, .check-row { padding: 10px 0; }
  .reviews-list li:nth-child(n+3) { display: none; }
  .reviews-band { padding: 40px 0; }
  .pdp-detail .pdp-key li { font-size: var(--fs-small); }
  .pdp-mini-usps { gap: 8px 14px; }
  .pdp-gallery-links { margin-top: 10px; }
}

/* Productpagina op een telefoon: geen dubbele USP-regels, compact Duco-blok */
@media (max-width: 620px) {
  .pdp-mini-usps { display: none; }
  .who.section--tight .who-grid { grid-template-columns: 112px 1fr; gap: 16px; align-items: start; }
  .who.section--tight .who-foto img { aspect-ratio: 4 / 5; border-radius: var(--r-control); }
  .who.section--tight h2 { font-size: 1.25rem; }
  .who.section--tight .who-body > p:first-of-type { font-size: var(--fs-small); }
  .who.section--tight .who-tel .link-tel { font-size: 1.3rem; }
}
/* Licht kader: tekst in inkt (de oude navy-regel .why-box ul li was specifieker) */
.why-box ul li, .why-box ul li span { color: var(--ink); }
.why-box ul li { font-size: var(--fs-small); }
/* Plus- en minpunten: tekens zonder gekleurde rondjes */
.proscons .pros h3 .pc-ico, .proscons .cons h3 .pc-ico { width: auto; height: auto; background: none; border-radius: 0; color: var(--ink); font-weight: 700; }
.proscons .cons h3 .pc-ico { color: var(--muted); }
.proscons .cons li svg { color: var(--muted); }
/* "Komt erbij of is optioneel": geen groen vinkje bij kosten */
.included-list .included-kop ~ li .tick svg { color: var(--muted); }


/* ==========================================================================
   Ronde 3 (24 okt): gelijke formuliervelden, hulpblok met Raaf, footer in
   vier kolommen (naar watertankie.nl), browseroppervlakken.
   ========================================================================== */

/* Velden: één maat, één rand, één binnenmarge, op elk formulier. De
   basisregel weegt (0,3,1); de regels voor select, textarea en datum hieronder
   wegen even zwaar (via :not) zodat ze, later in het bestand, winnen.
   appearance: none haalt de eigen iOS/Safari-vormgeving weg (afgeronde
   select met dubbele pijl, ingesprongen datum), zodat tekst in elk veld op
   dezelfde lijn begint. */
:is(.field, .hc-field, .tow-row) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; min-width: 0; margin: 0;
  height: 48px; min-height: 48px; padding: 0 14px;
  border: 1px solid #b2c6cc; border-radius: var(--r-control);
  background-color: #fff; color: var(--ink);
  font: inherit; font-size: 1rem; font-weight: 400; line-height: 1.3; text-align: left;
  box-shadow: 0 1px 2px rgba(15, 34, 48, .05);
  caret-color: var(--accent);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
:is(.field, .hc-field, .tow-row) textarea:not([hidden]):not([readonly]) { height: auto; min-height: 104px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
:is(.field, .hc-field, .tow-row) select:not([multiple]):not([size]) {
  padding-right: 42px; cursor: pointer; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23142238' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px 18px;
}
:is(.field, .hc-field, .tow-row) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):hover { border-color: #8aa2a9; }
:is(.field, .hc-field, .tow-row) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(14, 116, 144, .2);
}
:is(.field, .hc-field, .tow-row) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea)[aria-invalid="true"] { border-color: #b42318; box-shadow: 0 0 0 3px rgba(180, 35, 24, .15); }
:is(.field, .hc-field, .tow-row) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea)[aria-invalid="true"]:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
:is(.field, .hc-field, .tow-row) ::placeholder { color: #6b7682; opacity: 1; }
/* Datum: tekst links en verticaal gecentreerd, ook in Safari op iOS. */
:is(.field, .hc-field) input[type="date"]:not([hidden]) { line-height: 46px; }
:is(.field, .hc-field) input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
:is(.field, .hc-field) input[type="date"]::-webkit-datetime-edit,
:is(.field, .hc-field) input[type="date"]::-webkit-datetime-edit-fields-wrapper { padding: 0; }
:is(.field, .hc-field) input[type="date"]::-webkit-calendar-picker-indicator { margin: 0 0 0 6px; padding: 0; opacity: .6; cursor: pointer; }
/* Smalle telefoon: kalendericoon dichter op de rand, zodat "dd-mm-jjjj" in
   Chromium ook in een veld van 140-150 px past (Van/Tot naast elkaar op 360 px). */
@media (max-width: 380px) {
  :is(.field, .hc-field) input[type="date"]:not([hidden]) { padding-right: 8px; }
  :is(.field, .hc-field) input[type="date"]::-webkit-calendar-picker-indicator { margin-left: 4px; }
}
/* Getal zonder pijltjes (trekgewicht, aantal). */
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Labels: overal dezelfde afstand tot het veld. */
.field:not(fieldset), .hc-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .hero-check .hc-field > label, .cb-row .field > label { margin: 0; line-height: 1.35; }
/* Rijbewijscheck: velden op één lijn, ook als een label afbreekt. */
.tow-row { align-items: end; gap: 12px; }
.tow-row label { gap: 6px; font-size: var(--fs-small); color: var(--ink); line-height: 1.35; }
/* "Nog iets toevoegen?": kop en uitleg onder elkaar, pijl rechts. */
.form-extra > summary { gap: 12px; padding: 10px 0; }
.form-extra .fe-kop { display: grid; gap: 2px; min-width: 0; }
.form-extra .fe-kop b { font-weight: 600; color: var(--accent); }
.form-extra .fe-kop small { font-weight: 400; color: var(--muted); font-size: var(--fs-small); line-height: 1.4; }
.form-extra > summary::after, .form-extra[open] > summary::after {
  content: ""; flex: none; width: 20px; height: 20px; margin-left: auto; font-size: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 20px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 20px no-repeat;
  transition: transform var(--dur-2) var(--ease-out);
}
.form-extra[open] > summary::after { transform: rotate(180deg); }

/* Hulpblok boven de footer: Raaf en vier routes. */
.help-band { padding: 64px 0; color: #fff; background: linear-gradient(125deg, #0f7f9c 0%, #0d6077 42%, #0c2a3b 100%); }
.help-head { max-width: 62ch; margin-bottom: 32px; }
.help-head h2 { font-size: var(--fs-h2); color: #fff; margin: 0 0 8px; }
.help-head p { margin: 0; color: rgba(255, 255, 255, .92); }
.help-inner { display: grid; grid-template-columns: 184px minmax(0, 1fr); gap: 40px; align-items: center; }
.help-person { margin: 0; display: grid; justify-items: center; gap: 14px; text-align: center; }
.help-photo { display: block; width: 136px; height: 136px; padding: 4px; border-radius: 50%; background: rgba(255, 255, 255, .24); box-shadow: 0 14px 30px -12px rgba(4, 18, 26, .6); }
.help-photo img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.help-person figcaption { display: grid; gap: 2px; }
.help-person figcaption b { color: #fff; font-weight: 700; }
.help-person figcaption span { font-size: var(--fs-small); color: rgba(255, 255, 255, .92); }
.help-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.help-card {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; margin: 0;
  padding: 14px 16px 14px 14px; border: 0; border-radius: var(--radius);
  background: #fff; color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 2px rgba(4, 18, 26, .14), 0 12px 26px -16px rgba(4, 18, 26, .55);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
@media (hover: hover) {
  .help-card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(4, 18, 26, .14), 0 20px 36px -18px rgba(4, 18, 26, .65); }
  .help-card:hover .help-arrow { transform: translateX(3px); color: var(--accent); }
}
.help-card:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.help-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--yellow-soft); color: var(--accent); }
.help-ic svg { width: 22px; height: 22px; }
.help-card.is-primary .help-ic { background: var(--accent); color: #fff; }
.help-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.help-txt b { font-weight: 700; font-size: 1rem; line-height: 1.3; color: var(--ink); }
.help-txt span { font-size: var(--fs-small); line-height: 1.4; color: var(--muted); }
.help-arrow { flex: none; display: grid; color: #86a0a7; transition: transform var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.help-arrow svg { width: 18px; height: 18px; }
.help-terugbel { margin: 24px 0 0 224px; }
.help-terugbel .callback-form { margin: 0; }
.help-terugbel .cb-note { font-size: var(--fs-small); opacity: 1; color: rgba(255, 255, 255, .92); }
.help-terugbel .cb-row .field > label { color: #fff; }
.help-terugbel .cb-row .field input:focus { outline: 2px solid #fff; outline-offset: 2px; box-shadow: none; }
/* Foutmelding op het blauw: dezelfde chip als .form-error, anders onleesbaar rood op blauw. */
.help-band .field-error { width: fit-content; margin-top: 0; padding: 4px 8px; border-radius: 6px; background: #fdecec; color: #9b1c1c; }
/* Terugbelrij met drie kolommen: label, veld en foutmelding delen elk een rij
   (subgrid), zodat een foutmelding onder één veld de velden en de knop niet
   uit lijn duwt. Op een telefoon is het één kolom en speelt dit niet. */
@media (min-width: 621px) {
  .help-terugbel .cb-row { align-items: start; grid-template-rows: auto auto auto; row-gap: 0; }
  .help-terugbel .cb-row > .field > label { margin-bottom: 6px; }
  .help-terugbel .cb-row > .field > .field-error { margin-top: 6px; }
  .help-terugbel .cb-row > .field { grid-row: span 3; display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .help-terugbel .cb-row > .btn { grid-area: 2 / 3; }
}
@media (min-width: 701px) {
  .who .cb-row { align-items: start; grid-template-rows: auto auto auto; row-gap: 0; }
  .who .cb-row > .field > label { margin-bottom: 6px; }
  .who .cb-row > .field > .field-error { margin-top: 6px; }
  .who .cb-row > .field { grid-row: span 3; display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .who .cb-row > .btn { grid-area: 2 / 3; }
}
/* Tablet: in de smalle kolom naast de foto zijn drie kolommen te krap (velden
   van 82-124 px knippen de tekst af). Velden naast elkaar, knop eronder. */
@media (min-width: 701px) and (max-width: 960px) {
  .who .cb-row { grid-template-columns: 1fr 1fr; }
  .who .cb-row > .btn { grid-area: 4 / 1 / 5 / -1; margin-top: 10px; }
}
/* Formulierrijen met twee velden: zelfde subgrid, zodat een label dat afbreekt
   ("Telefoon * voor als we een vraag hebben") het veld ernaast niet verschuift. */
@media (min-width: 621px) {
  .form-row:has(> .field + .field) { grid-template-rows: auto auto auto; row-gap: 0; align-items: start; }
  .form-row:has(> .field + .field) > .field { grid-row: span 3; display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: 0; align-content: start; }
  .form-row:has(> .field + .field) > .field > label { align-self: end; margin-bottom: 6px; }
  .form-row:has(> .field + .field) > .field > .field-error { margin-top: 6px; }
}
@media (max-width: 860px) {
  .help-band { padding: 40px 0; }
  .help-head { margin-bottom: 18px; }
  .help-inner { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .help-person { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; text-align: left; }
  .help-photo { width: 64px; height: 64px; padding: 3px; }
  .help-cards { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .help-card { min-height: 64px; padding: 10px 14px 10px 10px; gap: 12px; }
  .help-terugbel { margin: 18px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .help-card, .help-arrow, .form-extra > summary::after { transition: none; }
  .help-card:hover, .help-card:hover .help-arrow { transform: none; }
}

/* Footer in vier kolommen (merk en contact, drie linkkolommen). */
.site-footer { background: #091c27; color: rgba(255, 255, 255, .74); padding: 64px 0 28px; font-size: var(--fs-small); }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.55fr) repeat(3, minmax(0, 1fr)); gap: 40px 48px; }
.site-footer .footer-brand { display: block; margin: 0; grid-column: auto; }
.site-footer .logo { color: #fff; margin: 0; }
.site-footer .logo b, .site-footer .logo span, .site-footer .logo .logo-word { color: #fff; }
.site-footer .logo .logo-mark { background: #fff; color: #091c27; }
.footer-intro { margin: 18px 0 0; max-width: 38ch; line-height: 1.6; color: rgba(255, 255, 255, .74); font-size: var(--fs-small); }
.footer-contact { list-style: none; margin: 16px 0 0; padding: 0; display: grid; }
.footer-contact li { display: flex; align-items: center; gap: 12px; min-height: 40px; line-height: 1.45; }
@media (min-width: 641px) { .site-footer .footer-contact a { display: inline; min-height: 0; padding: 0; } }
.footer-contact svg { flex: none; width: 18px; height: 18px; color: #7fe6f7; }
.footer-contact a { color: #fff; text-decoration: none; }
.footer-contact a:hover { text-decoration: underline; text-underline-offset: .2em; }
.footer-kop { margin: 4px 0 12px; font-size: .9375rem; font-weight: 700; line-height: 1.3; letter-spacing: 0; color: #fff; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col a { display: inline-flex; align-items: center; min-height: 36px; color: rgba(255, 255, 255, .78); text-decoration: none; transition: color var(--dur-1) var(--ease-out); }
.footer-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: .2em; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; margin-top: 48px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .12); }
.site-footer .footer-legal { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0; font-size: var(--fs-small); color: rgba(255, 255, 255, .6); }
.site-footer .footer-legal a { display: inline-block; padding: 10px 0; font-size: inherit; color: rgba(255, 255, 255, .8); }
.site-footer .footer-legal span { padding: 10px 0; }
.footer-copy { margin: 0; padding: 10px 0; font-size: var(--fs-small); color: rgba(255, 255, 255, .6); }
.footer-col details > summary { display: block; list-style: none; }
.footer-col details > summary::-webkit-details-marker { display: none; }
@media (min-width: 641px) { .footer-col details > summary { pointer-events: none; cursor: default; } }
.site-footer :focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 2px; }
@media (max-width: 980px) {
  .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 24px; }
  .site-footer .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .site-footer { padding: 40px 0 16px; }
  .footer-top { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .site-footer .footer-brand { margin-bottom: 20px; }
  .footer-contact li { min-height: 32px; }
  .footer-contact li:has(a) { min-height: 44px; }
  .footer-col a, .footer-contact a { display: flex; align-items: center; min-height: 44px; }
  .footer-col { border-top: 1px solid rgba(255, 255, 255, .12); }
  .footer-col:last-child { border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .footer-col details > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; cursor: pointer; }
  .footer-col details > summary::after {
    content: ""; flex: none; width: 20px; height: 20px; background: rgba(255, 255, 255, .7);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 20px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 20px no-repeat;
    transition: transform var(--dur-2) var(--ease-out);
  }
  .footer-col details[open] > summary::after { transform: rotate(180deg); }
  .footer-col .footer-kop { margin: 0; }
  .footer-col ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; padding-bottom: 10px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 0; margin-top: 12px; padding-top: 4px; border-top: 0; }
  .footer-copy { padding: 4px 0 0; }
  .site-footer .footer-legal a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) { .footer-col details > summary::after { transition: none; } }

/* Browseroppervlakken uit het palet. */
/* Ondoorzichtig ijsblauw met inkt: leesbaar op lichte én donkere vlakken. */
::selection { background: #c8eef4; color: #0f2230; }
:where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Op donkere en blauwe vlakken een witte ring (zelfde nul-specificiteit, later, dus wint alleen van de regel hierboven). */
:where(.hero, .page-hero, .reviews-band, .help-band, .trust-box, .article-cta, .dark-section, .compare thead th.hi) :where(a, button, summary, [tabindex]):focus-visible { outline-color: #fff; }
.compare thead th.hi a:focus-visible { outline-offset: -3px; }
textarea, input { caret-color: var(--accent); }

/* Hero: 360°-draai als geanimeerde AVIF, zoals op koelaanhangerdirect.nl. Het
   vak houdt de maat vast (geen verschuiving). Het stilstaande beeld (eerste
   frame, LCP) ligt onder; main.js legt de animatie erover zodra die
   gedecodeerd is en verbergt dan het beeld in dezelfde frame, zonder
   overvloeier (geen dip). De animatie is 1 px kleiner dan het beeld, zodat hij
   nooit als groter LCP-element telt. Het vak is breder dan de kolom, want in
   het zijaanzicht is de aanhanger met dissel veel langer dan schuin van voren. */
.hero--vries .hero-vak { position: relative; z-index: 1; display: block; width: calc(100% + 56px); margin-left: -40px; aspect-ratio: 1192 / 666; }
.hero--vries .hero-vak > img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: contain; }
.hero--vries .hero-vak > .hero-anim { inset: 1px; width: calc(100% - 2px); height: calc(100% - 2px); }
.hero--vries .hero-vak.is-draait > .hero-still { visibility: hidden; }
/* Telefoon en tablet: gecentreerd, 160 px hoog. */
@media (max-width: 980px) {
  .hero--vries .hero-visual { justify-self: center; width: auto; max-width: none; margin: 10px auto 14px; }
  .hero--vries .hero-vak { width: auto; height: 160px; margin: 0 auto; }
}

/* Hero-decor (home): ijzig studiolicht achter de aanhanger en rijp-stippen die
   naar buiten uitvloeien. Zwevende sneeuwvlokken en het draaiplateau zijn
   eruit, zoals op koelaanhangerdirect.nl (24 okt 2026). */
.hero--vries .hero-decor { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; color: #fff;
  background: radial-gradient(36% 58% at 74% 42%, rgba(103, 232, 249, .3), rgba(103, 232, 249, 0) 70%), radial-gradient(30% 46% at 4% 8%, rgba(14, 116, 144, .32), rgba(14, 116, 144, 0) 70%); }
.hero--vries .hero-decor::before { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(255, 255, 255, .11) 1px, transparent 1.6px) 0 0 / 22px 22px;
  -webkit-mask-image: radial-gradient(34% 56% at 74% 42%, #000, transparent 78%); mask-image: radial-gradient(34% 56% at 74% 42%, #000, transparent 78%); }
@media (max-width: 980px) {
  .hero--vries .hero-decor { background: radial-gradient(70% 30% at 50% 36%, rgba(103, 232, 249, .3), rgba(103, 232, 249, 0) 70%); }
  .hero--vries .hero-decor::before { -webkit-mask-image: radial-gradient(60% 24% at 50% 36%, #000, transparent 80%); mask-image: radial-gradient(60% 24% at 50% 36%, #000, transparent 80%); }
}

/* Google-reviews (zoals koelaanhangerdirect.nl, in Google-vorm): score links,
   witte kaarten met initiaal, naam, sterren en tekst in een rail. Telefoon:
   vegen, met de volgende kaart half in beeld. Desktop: pijlen rechtsboven. */
.reviews-band .greviews { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 48px; align-items: center; }
.greviews-merk { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 1rem; font-weight: 600; letter-spacing: 0; color: #fff; }
/* Google-"G" als achtergrond: één element in plaats van een svg met vier paden. */
.g-logo { display: inline-block; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.6 20.5H42V20H24v8h11.3C33.7 32.7 29.2 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.3-.1-2.4-.4-3.5z'/%3E%3Cpath fill='%23FF3D00' d='m6.3 14.7 6.6 4.8C14.7 15.1 19 12 24 12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.2 35.1 26.7 36 24 36c-5.2 0-9.6-3.3-11.3-7.9l-6.5 5C9.5 39.6 16.2 44 24 44z'/%3E%3Cpath fill='%231976D2' d='M43.6 20.5H42V20H24v8h11.3c-.8 2.2-2.2 4.2-4.1 5.6l6.2 5.2C37 39.2 44 34 44 24c0-1.3-.1-2.4-.4-3.5z'/%3E%3C/svg%3E") 50% / contain no-repeat content-box border-box; }
.greviews-merk .g-logo { width: 28px; height: 28px; padding: 4px; background-color: #fff; border-radius: 50%; box-sizing: content-box; }
.greviews-num { display: flex; align-items: center; gap: 12px; margin: 0; }
.greviews-num b { font-size: 3.4rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.greviews-num .stars, .greview .stars { --ster-gap: 2px; color: #fbbc04; }
.greviews-num .stars { --ster: 22px; }
.greviews-sub { margin: 12px 0 0; font-size: var(--fs-small); line-height: 1.55; color: rgba(255, 255, 255, .8); }
.greviews-sub b { color: #fff; }
.greviews-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 6px; color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.greviews-link svg { width: 16px; height: 16px; }
.greviews-rail-wrap { position: relative; display: flex; flex-direction: column; min-width: 0; }
.greviews-rail { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; border-radius: var(--radius); }
.greviews-rail::-webkit-scrollbar { display: none; }
.greviews-rail:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.greviews-list { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3); gap: 16px; margin: 0; padding: 0; list-style: none; }
.greview { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 20px; border-radius: var(--radius); background: #fff; color: #202124; scroll-snap-align: start; box-shadow: 0 1px 2px rgba(4, 18, 26, .2), 0 10px 24px -16px rgba(4, 18, 26, .6); }
.greview-kop { display: flex; align-items: center; gap: 12px; }
.greview-avatar { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--c); color: #fff; font-weight: 600; font-size: 1.05rem; }
.greview-wie { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.greview-wie b { font-weight: 600; color: #202124; }
.greview-wie span { font-size: var(--fs-small); color: #5f6368; }
.greview .g-logo { flex: none; width: 20px; height: 20px; }
.greview .stars { --ster: 18px; }
.greview p { margin: 0; font-size: .9375rem; line-height: 1.55; color: #3c4043; }
/* Pijlen boven de kaarten: onderaan viel de zwevende WhatsApp-knop eroverheen. */
.greviews-pijlen { order: -1; display: flex; justify-content: flex-end; gap: 8px; margin: 0 0 14px; }
.greviews-pijl { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; background: none; color: #fff; cursor: pointer; transition: background var(--dur-1) var(--ease-out), opacity var(--dur-1) var(--ease-out); }
.greviews-pijl svg { width: 18px; height: 18px; }
.greviews-pijl:disabled { opacity: .35; cursor: default; }
@media (hover: hover) { .greviews-pijl:not(:disabled):hover { background: rgba(255, 255, 255, .12); } }
@media (max-width: 980px) {
  .reviews-band .greviews { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .greviews-list { grid-auto-columns: minmax(260px, 46%); }
}
@media (max-width: 620px) {
  .greviews-num b { font-size: 2.8rem; }
  .greviews-list { grid-auto-columns: 84%; gap: 12px; }
  .greview { padding: 18px; }
  .greviews-pijlen { display: none; }
}

/* De combinatie in de unitkeuze: vries- en koelaanhanger schuin over elkaar,
   zodat ook deze optie een beeld heeft (zelfde vak als de andere opties). */
.unit-optie .unit-duo { position: relative; flex: none; width: 48px; height: 36px; }
.unit-optie .unit-duo img { position: absolute; width: 66%; height: 72%; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 2px #fff, 0 2px 4px rgba(8, 30, 40, .2); }
.unit-optie .unit-duo img:first-child { left: 0; top: 0; }
.unit-optie .unit-duo img:last-child { right: 0; bottom: 0; }
@media (max-width: 620px) { .unit-optie .unit-duo { width: 36px; height: 27px; } }

/* Koopblok: persoonlijk blok met Raaf onder de knop (zoals een 'vragen over
   dit product?'-kaart). Foto met een bolletje dat groen is zolang De-Lo
   bereikbaar is; eronder alleen de offerte als actie (het telefoonnummer
   staat al in het menu). */
.pdp-raaf { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; align-items: start; margin-top: 18px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, #f3fafb, #fff); }
.pdp-raaf-foto { position: relative; display: block; width: 60px; height: 60px; }
.pdp-raaf-foto img { display: block; width: 60px; height: 60px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 4px 12px -4px rgba(8, 30, 40, .35); }
.pdp-raaf-foto::after { content: ""; position: absolute; right: 1px; bottom: 2px; width: 14px; height: 14px; border-radius: 50%; background: #9aa5b1; box-shadow: 0 0 0 3px #fff; }
.pdp-raaf:has(.open-status.is-open) .pdp-raaf-foto::after { background: var(--ok); }
.pdp-raaf-tekst { min-width: 0; }
.pdp-raaf-kop { margin: 0; font-weight: 700; font-size: 1.0625rem; line-height: 1.3; color: var(--ink); }
.pdp-raaf-sub { margin: 4px 0 0; font-size: var(--fs-small); line-height: 1.45; color: var(--muted); }
.pdp-raaf-status { margin: 6px 0 0; }
.pdp-raaf-status .open-status { font-size: var(--fs-small); }
.pdp-raaf-acties { grid-column: 1 / -1; }
.pdp-raaf-acties button { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid var(--accent); border-radius: var(--r-control); background: #fff; color: var(--accent-600); font: inherit; font-size: var(--fs-small); font-weight: 650; cursor: pointer; transition: background var(--dur-1) var(--ease-out); }
.pdp-raaf-acties svg { flex: none; width: 16px; height: 16px; transition: transform var(--dur-1) var(--ease-out); }
@media (hover: hover) {
  .pdp-raaf-acties button:hover { background: #f1f9fa; }
  .pdp-raaf-acties button:hover svg { transform: translateX(2px); }
}
@media (prefers-reduced-motion: reduce) { .pdp-raaf-acties button, .pdp-raaf-acties svg { transition: none; } }
@media (max-width: 560px) {
  .pdp-raaf { gap: 10px 12px; padding: 14px; }
  .pdp-raaf-foto, .pdp-raaf-foto img { width: 52px; height: 52px; }
  .pdp-raaf-kop { font-size: 1rem; }
}

/* Eén unit op een toepassingspagina: de kaart over de breedte van het raster,
   foto links en tekst rechts, in plaats van één smalle kaart met lege ruimte. */
.catalog-grid.is-een { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 761px) {
  .catalog-grid.is-een .product-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .catalog-grid.is-een .product-media { aspect-ratio: auto; height: 100%; min-height: 300px; }
  .catalog-grid.is-een .product-body { justify-content: center; padding: 28px 30px; }
}

/* Meer units (build.js unitsSectie): bij twee units één paneel met twee
   gelijke helften en "of" op de scheidslijn, zoals op koelaanhangerdirect.nl.
   Titel, specs, prijs en knop staan in een subgrid. Telefoon: onder elkaar. */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) 0 minmax(0, 1fr); gap: 0; align-items: stretch; margin-top: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.duo-item { display: grid; grid-template-rows: subgrid; grid-row: span 5; align-content: start; min-width: 0; padding-bottom: 28px; }
.duo-item:first-child { grid-column: 1; }
.duo-item:last-child { grid-column: 3; border-left: 1px solid var(--line); }
.duo-item > :not(.duo-media) { margin-inline: 28px; }
.duo-media { position: relative; display: block; aspect-ratio: 3 / 2; padding: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: var(--photo-bg); }
.duo-media img { position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain; }
.duo-item[data-type="cel"] .duo-media img { inset: 12%; width: 76%; height: 76%; }
.duo h3 { margin-top: 18px; font-size: 1.5rem; line-height: 1.2; }
.duo .spec-line { margin-top: 4px; }
.duo .price { align-self: end; margin-block: 14px 16px; }
.duo .btn { justify-self: start; }
.duo-of { grid-column: 2; grid-row: 1; position: relative; z-index: 1; }
.duo-of > span { position: absolute; top: 50%; left: 0; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); font-size: .9375rem; font-weight: 650; line-height: 1; transform: translate(-50%, -50%); box-shadow: 0 6px 16px -10px rgba(8, 30, 40, .35); }
@media (max-width: 700px) {
  .duo { grid-template-columns: minmax(0, 1fr); }
  .duo-item { display: block; grid-row: auto; padding-bottom: 22px; }
  .duo-item:first-child, .duo-item:last-child { grid-column: 1; }
  .duo-item:last-child { border-left: 0; border-top: 1px solid var(--line); }
  .duo-item > :not(.duo-media) { margin-inline: 18px; }
  .duo h3 { margin-top: 12px; font-size: 1.375rem; }
  .duo .price { margin-block: 10px 14px; }
  .duo .btn { display: flex; justify-self: stretch; width: auto; }
  .duo-of { grid-column: 1; grid-row: auto; height: 0; }
  .duo-of > span { top: 0; left: 50%; }
}

/* ==========================================================================
   Vriesboxie.nl: wat alleen deze site heeft (24 okt 2026). De landingspagina
   draagt het koopblok (een <h2>, de <h1> staat in de hero), de vergelijking
   met vriescel en vriescontainer en de koeltip.
   ========================================================================== */

/* Koopblok op de home: gewone sectieruimte (geen kruimelpad erboven). */
#aanhanger.pdp { padding: 56px 0 48px; }
.pdp-kop h2 { font-size: var(--fs-h2); margin-bottom: 12px; }
@media (max-width: 980px) {
  #aanhanger.pdp { padding: 36px 0 32px; }
  .pdp-kop h2 { margin-bottom: 10px; }
}

/* Prijsregel boven het transparantieblok (anker #prijs uit het menu). */
.prijs-regel { margin: 0 0 14px; color: #33434d; line-height: 1.6; }
.prijs-regel b { color: var(--ink); }

/* Vriesaanhanger, vriescel of vriescontainer: de eerste kolom is wat wij
   verhuren en krijgt de lijn en het cijfer in de accentkleur. */
.how-grid .how-card.is-ons { border-top: 3px solid var(--accent); padding-top: 15px; }
.how-card.is-ons .hn { color: var(--accent); }
.vergelijk-noot { margin-top: 18px; font-size: var(--fs-small); color: var(--muted); }

/* Koeltip: de koelaanhanger van De-Lo voor wie ijs én koude dranken nodig heeft. */
.koel-tip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px 20px; align-items: center; margin-top: 26px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.koel-tip-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--yellow-soft); color: var(--accent-600); }
.koel-tip-ic svg { width: 22px; height: 22px; }
.koel-tip h3 { font-size: 1.05rem; margin-bottom: 4px; }
.koel-tip p { font-size: var(--fs-small); color: var(--muted); line-height: 1.55; }
.koel-tip .arrow-link { color: var(--accent-600); white-space: nowrap; min-height: 44px; }
@media (max-width: 700px) {
  .koel-tip { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .koel-tip .arrow-link { grid-column: 1 / -1; }
}

/* Header van 621 tot 680 px: logo, belknop, "Check prijs & beschikbaarheid" en
   menuknop passen niet naast elkaar; de knop staat in de hero en de sticky
   balk al (zoals op koelaanhangerdirect.nl). */
@media (max-width: 680px) { .header-actions .btn:not(.keep-on-mobile) { display: none; } }

/* Footer met de kaart van het levergebied (build.js levergebied()), naar het
   voorbeeld van rentwereld.nl: een platte kaart als illustratie die van de
   pagina af loopt. Vanaf 1200 px staat hij rechtsonder in de hoek, achter de
   inhoud; die houdt links ruimte vrij, zodat er geen tekst op het land valt.
   Smaller staat de kaart onder de inhoud, tot de rand van het scherm en de
   pagina. Het merk staat boven de drie linkkolommen. */
.site-footer { overflow: hidden; }
.footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 32px; }
.site-footer .footer-brand { grid-column: 1 / -1; }
@media (max-width: 640px) { .footer-top { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* Levergebied: de ondergrond (img, assets/img/levergebied.svg) en daarover
   pijlen, pinnen en namen (svg), allebei in hetzelfde kaartvak. De maat van
   namen, lijnen en de grote pin hangt af van hoe breed de kaart getekend wordt,
   dus per breakpoint. De namen tellen niet mee in de lettermaat-eis (§5.2 sluit
   svg uit); het onderschrift wel en staat op 14 px. Telefoon: de kaart is iets
   breder dan het scherm en loopt onder de rand door, ook onderaan (de -16 px
   heft de padding van de footer op). */
.footer-kaart { width: 112vw; margin: 32px 0 -16px calc(50% - 56vw); }
.kaart-uitleg { max-width: 34ch; margin-left: calc(6vw + 16px); }
.kaart-kop { margin: 0 0 2px; font-size: .9375rem; font-weight: 700; line-height: 1.3; letter-spacing: 0; color: #fff; }
.kaart-uitleg p { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: rgba(255, 255, 255, .62); }
.kaart { --naam: 28px; --lijn: 1.3; --basis: 1.2; position: relative; aspect-ratio: 1000 / 1092; margin-top: 8px; }
.kaart > img, .kaart > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.kaart text { font-size: var(--naam); font-weight: 650; fill: #0c2a3b; }
.kaart tspan { font-size: .82em; font-weight: 500; fill: #36515f; }
.kaart-pijl { fill: none; stroke: var(--accent); stroke-width: calc(3.4px * var(--lijn)); stroke-linecap: round; stroke-linejoin: round; }
.kaart-pin { fill: #0c2a3b; fill-rule: evenodd; }
.kaart-basis { transform: translate(var(--x), var(--y)) scale(var(--basis)); }
.kaart-basispin { fill: #0c2a3b; }
.kaart-ijs { fill: none; stroke: #67e8f9; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.kaart-basis text { font-size: 27px; font-weight: 750; }
@media (min-width: 621px) { .kaart-uitleg { margin-left: calc(6vw + 24px); } }
/* Tablet en kleine laptop: onderschrift links, de kaart rechts tot de rand. */
@media (min-width: 641px) and (max-width: 1199px) {
  .footer-kaart { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; width: auto; margin: 40px calc(50% - 50vw) -28px 0; }
  .kaart-uitleg { flex: 1; max-width: 30ch; margin: 0; padding-top: 8%; }
  .kaart { flex: none; width: min(82vw, 640px); margin: 0; --naam: 24px; --lijn: 1.1; --basis: 1.05; }
}
/* Desktop: los in de hoek, achter de inhoud. De inhoud wordt zo breed als de
   ruimte links van de kaart (100vw - 100% is de marge naast de container). */
@media (min-width: 1200px) {
  .site-footer { --kaart-b: clamp(560px, 44vw, 720px); position: relative; isolation: isolate; min-height: calc(var(--kaart-b) * 1.092); }
  .footer-top, .footer-bottom { max-width: calc(100% - var(--kaart-b) + (100vw - 100%) / 2 - 48px); }
  .footer-bottom { justify-content: flex-start; }
  .footer-kaart { position: absolute; right: 0; bottom: 0; z-index: -1; width: var(--kaart-b); margin: 0; }
  .kaart-uitleg { position: absolute; top: 6%; left: 4%; z-index: 1; max-width: 28%; margin: 0; }
  .kaart { --naam: 23px; --lijn: 1; --basis: 1; margin: 0; }
}

/* Typografie na de overstap op Inter (zoals koelaanhangerdirect.nl): Inter loopt
   ~9 % breder dan Figtree. Getal+eenheid, € en De-Lo houdt build.js typografie()
   bij elkaar. */
p, li, figcaption { text-wrap: pretty; }
.hero .lead, h3, .faq-q { text-wrap: balance; }
.help-txt b, .help-txt > span { text-wrap: pretty; }
.field label .optioneel { white-space: nowrap; }
@media (max-width: 620px) {
  .unit-optie small { white-space: normal; text-overflow: clip; text-wrap: pretty; }
  .help-ic { width: 40px; height: 40px; }
  .help-card { gap: 10px; }
}
@media (max-width: 430px) {
  .compare thead th, .compare tbody th { font-size: .8125rem; }
  .compare thead th { padding-inline: 6px; }
  #offerteForm .route-keuze { grid-template-columns: 1fr; }
  .cat-tabs { gap: 8px; }
  .cat-tabs a { padding-inline: 16px; }
  .form-trust .review-badge { gap: 6px; padding-inline: 10px 12px; }
  .form-trust .review-badge .stars { --ster: 13px; }
}
/* Heel smalle telefoons: lange woorden in de h1 passen tot 360 px door mee te
   schalen; reviewbadge en prijscheckknop compacter. */
@media (max-width: 360px) {
  :root { --fs-h1: 8.6vw; }
  .hero-proof .review-badge { gap: 6px; padding-inline: 8px 10px; }
  .hero-proof .review-badge .stars { --ster: 13px; }
  .hero-check .btn { height: auto; padding: 10px 14px; white-space: normal; line-height: 1.25; text-wrap: balance; }
}
@media (max-width: 340px) { .site-header .container { gap: 6px; } .header-actions { gap: 6px; } }

/* Goedgekeurd logo A: compacte woordmarkering, lichte variant in footer. */
.logo .logo-image { display: block; width: 100%; height: auto; max-width: 100%; }
.site-header .logo { width: 220px; min-width: 0; gap: 0; flex: 0 1 auto; }
.site-footer .logo { width: 240px; max-width: 100%; gap: 0; }
@media (max-width: 620px) {
  .site-header .logo { width: 160px; gap: 0; }
  .site-footer .logo { width: 200px; }
}