/*
Theme Name: Wijswatt
Description: Custom theme voor Wijswatt — vergelijkingsplatform voor energiezuinige apparaten.
Author: Wijswatt
Version: 1.1
*/

:root{
  --navy-950:#0A1730; --navy-900:#0F1F42; --navy-800:#14294F; --navy-700:#1D3766;
  --blue-600:#3A5FE0; --blue-500:#5578E8; --blue-400:#8AA3F2; --blue-100:#E7EDFC;
  --ice-50:#F5F7FD; --slate-800:#252B3B; --slate-600:#565E72; --slate-400:#8991A6;
  --green-600:#1F9D5C; --green-100:#E4F6EC; --amber-500:#E8A526; --line:#E4E8F3; --white:#FFFFFF;
  --radius-lg:20px; --radius-md:12px; --radius-sm:8px;
  --font-display:'Sora', sans-serif; --font-body:'Inter', sans-serif; --font-mono:'Space Mono', monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body); color:var(--slate-800); background:var(--white); line-height:1.5; -webkit-font-smoothing:antialiased;}
a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}
button,select{font-family:inherit; cursor:pointer;}
.wrap{max-width:1400px; margin:0 auto; padding:0 28px;}
h1,h2,h3{font-family:var(--font-display); letter-spacing:-0.01em;}

.grain{position:relative;}
.grain::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:0.05; mix-blend-mode:overlay; border-radius:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

.art-witgoed{background:radial-gradient(circle at 30% 30%, #1D3766, #0A1730 70%);}
.art-zon{background:linear-gradient(160deg, #0F2A57, #0A1730 65%);}
.art-laden{background:linear-gradient(135deg, #14294F, #0A1730);}
.art-slimthuis{background:linear-gradient(160deg, #1D3766, #0A1730 70%);}
.art-verwarmen{background:linear-gradient(135deg, #0F2A57, #14294F);}

/* Witte placeholder-stijl + contain-weergave specifiek voor PRODUCTFOTO'S
   (bol.com-foto's zijn vaak staand/rechthoekig, dus we snijden nooit bij) */
.product-placeholder{
  background:var(--ice-50);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.product-placeholder svg{width:28%; max-width:64px; stroke:var(--blue-400); opacity:0.6;}
.product-placeholder.grain::before{display:none;}
.product-photo{
  background:var(--white); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.product-photo img{width:100%; height:100%; object-fit:contain; padding:6%;}

/* Utility + header */
.utility-bar{background:var(--navy-950); color:#B7C2E3; font-size:12.5px;}
.utility-inner{display:flex; justify-content:flex-end; gap:24px; padding:8px 28px;}
.utility-inner a:hover{color:var(--white);}
.utility-links-desktop{display:flex; gap:24px;}
.utility-email-mobile{display:none;}
header.site-header{border-bottom:1px solid var(--line); background:var(--white); position:sticky; top:0; z-index:50;}
.nav{display:flex; align-items:center; justify-content:space-between; padding:16px 0;}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; font-size:23px; max-height:40px;}
.brand-word span:first-child{color:var(--navy-950);}
.brand-word span:last-child{color:var(--blue-600);}
.brand img.custom-logo-img{
  height:36px !important;
  width:auto !important;
  max-width:200px;
  object-fit:contain;
  display:block;
}
.footer-brand .footer-logo-img{ filter:brightness(0) invert(1); } /* maakt het logo wit leesbaar op de donkere footer */
.nav-links{display:flex; gap:30px; font-size:14.5px; font-weight:600; color:var(--slate-600);}
.nav-links a:hover{color:var(--blue-600);}
.nav-icons{display:flex; align-items:center; gap:18px;}
.nav-stat{font-size:13px; font-weight:600; color:var(--slate-600); white-space:nowrap; padding-right:4px; border-right:1px solid var(--line); margin-right:2px;}
.nav-stat strong{color:var(--slate-800); font-family:var(--font-mono);}
.icon-btn{width:20px; height:20px; stroke:var(--slate-800);}

/* Hamburger-knop: standaard verborgen, alleen zichtbaar op mobiel (zie media query) */
.hamburger-btn{
  display:none; width:38px; height:38px; border-radius:var(--radius-sm); border:1.5px solid var(--line);
  background:var(--white); align-items:center; justify-content:center; flex-shrink:0; margin-right:4px;
}
.hamburger-btn svg{width:19px; height:19px; stroke:var(--slate-800);}

/* Overlay achter het uitklapmenu */
.mobile-menu-overlay{
  position:fixed; inset:0; background:rgba(10,23,48,0.5); z-index:90;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.mobile-menu-overlay.show{opacity:1; pointer-events:auto;}

/* Het uitklapmenu zelf: schuift van rechts in */
.mobile-menu{
  position:fixed; top:0; right:0; bottom:0; width:82%; max-width:340px;
  background:var(--white); z-index:95; padding:24px 22px; overflow-y:auto;
  transform:translateX(100%); transition:transform .3s ease;
  box-shadow:-10px 0 30px rgba(10,23,48,0.15);
}
.mobile-menu.show{transform:translateX(0);}
.mobile-menu-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; min-height:32px;}
.mobile-menu-head img.custom-logo-img{height:28px !important; width:auto !important;}
.mobile-menu-close{width:34px; height:34px; border-radius:50%; border:1.5px solid var(--line); background:var(--white); display:flex; align-items:center; justify-content:center; margin-left:auto;}
.mobile-menu-close svg{width:16px; height:16px; stroke:var(--slate-800);}
.mobile-menu-links{display:flex; flex-direction:column; gap:4px;}
.mobile-menu-links a{font-size:16px; font-weight:700; padding:12px 4px; color:var(--slate-800);}
.mobile-menu-links-secondary a{font-size:14.5px; font-weight:600; color:var(--slate-600);}
.mobile-menu-divider{height:1px; background:var(--line); margin:14px 0;}
.mobile-menu-categories{display:flex; flex-wrap:wrap; gap:8px;}
.mobile-menu-categories .cat-pill{background:var(--ice-50); font-size:13.5px;}

/* Uitklapbare categorieën-accordion in het mobiele menu */
.mobile-accordion-toggle{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  font-size:16px; font-weight:700; padding:12px 4px; color:var(--slate-800);
  background:none; border:none; text-align:left;
}
.mobile-accordion-toggle svg{width:16px; height:16px; stroke:var(--slate-600); transition:transform .2s ease;}
.mobile-accordion-toggle.open svg{transform:rotate(180deg);}
.mobile-accordion-panel{max-height:0; overflow:hidden; transition:max-height .25s ease; padding-left:8px;}
.mobile-accordion-panel.open{max-height:400px;}
.mobile-accordion-link{display:block; font-size:14.5px; font-weight:600; color:var(--slate-600); padding:9px 0;}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:700; font-size:14.5px; padding:12px 22px; border-radius:var(--radius-sm); border:none; transition:all .15s ease;}
.btn-primary{background:var(--navy-950); color:var(--white);}
.btn-primary:hover{background:var(--blue-600);}
.btn-outline{background:transparent; border:1.5px solid var(--line); color:var(--slate-800);}
.btn-outline:hover{border-color:var(--blue-600); color:var(--blue-600);}
.btn-sm{padding:9px 16px; font-size:13.5px;}
.btn-pill{border-radius:999px;}

/* Category bar */
.cat-bar{background:var(--ice-50); border-bottom:1px solid var(--line);}
.cat-bar-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0; flex-wrap:wrap; gap:10px;}
.cat-pills{display:flex; gap:8px; flex-wrap:wrap;}
.cat-pill{display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--slate-800); padding:9px 14px; border-radius:var(--radius-sm); transition:background .15s ease;}
.cat-pill:hover{background:var(--blue-100); color:var(--blue-600);}

/* ===== Trust row: links USP's met ruimte, rechts teller + contact ===== */
.trust-row{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; padding:20px 18px;}
.trust-list{display:flex; align-items:center; gap:52px; flex-wrap:wrap;}
.trust-item{display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--slate-800); white-space:nowrap;}
.check{width:16px; height:16px; stroke:var(--green-600); flex-shrink:0;}
.trust-roller{display:none;}
.trust-right{display:flex; align-items:center; gap:24px; flex-wrap:wrap;}
.trust-count{font-size:14px; font-weight:600; color:var(--slate-600); white-space:nowrap;}
.trust-count strong{font-family:var(--font-mono); color:var(--slate-800);}
.trust-email{display:flex; align-items:center; gap:7px; font-size:14px; font-weight:600; color:var(--slate-600); white-space:nowrap;}
.trust-email:hover{color:var(--blue-600);}
.trust-email svg{width:16px; height:16px; stroke:var(--blue-600); flex-shrink:0;}

/* Hero grid (front page) */
.hero-grid{display:flex; gap:18px; padding:8px 0 60px; align-items:stretch;}
.hero-card{border-radius:var(--radius-lg); overflow:hidden; position:relative; display:flex; flex-direction:column; justify-content:space-between; min-height:220px; padding:22px; cursor:pointer;}
.hero-card.tall{flex:1.15; min-height:610px;}
.hero-card .art{position:absolute; inset:0; transition:transform .5s ease;}
.hero-card:hover .art{transform:scale(1.06);}
.hero-card .art::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,23,48,0.35) 0%, rgba(10,23,48,0) 30%, rgba(10,23,48,0.15) 70%, rgba(10,23,48,0.55) 100%);}
.hero-card .cat-name{position:relative; z-index:2; color:var(--white); font-family:var(--font-display); font-weight:700; font-size:20px;}
.hero-card .cat-cta{
  position:relative; z-index:2; background:var(--white); color:var(--navy-950); font-weight:700; font-size:14.5px;
  padding:11px 20px; border-radius:999px; display:inline-flex; align-self:flex-start; align-items:center; gap:6px;
}
.hero-right{flex:0.85; display:flex; flex-direction:column; gap:18px;}
.hero-right .hero-card, .hero-right .cta-card{flex:1; min-height:0;}
.cta-card{background:linear-gradient(135deg, var(--blue-600), var(--navy-900)); border-radius:var(--radius-lg); padding:32px; color:var(--white); display:flex; flex-direction:column; justify-content:center; position:relative; overflow:visible;}
.cta-card h3{font-size:22px; margin-bottom:10px; max-width:220px; position:relative; z-index:2;}
.cta-card p{font-size:14px; color:#C9D5FA; margin-bottom:20px; max-width:220px; position:relative; z-index:2;}
.cta-card .btn-white{position:relative; z-index:2;}
.cta-card .meter-deco{position:absolute; right:-30px; bottom:-30px; width:200px; height:200px; opacity:0.9; z-index:1;}
.cta-card .cta-owl-icon{position:absolute; right:-24px; bottom:-30px; width:290px; height:290px; object-fit:contain; opacity:1; z-index:1; filter:drop-shadow(0 12px 20px rgba(10,23,48,0.35));}
.btn-white{background:var(--white); color:var(--navy-950); font-weight:700; font-size:14px; padding:12px 20px; border-radius:var(--radius-sm); display:inline-flex; align-self:flex-start; border:none;}

/* ===== Merken-logo-slider (tussen hero en categorieën) ===== */
.logo-marquee{width:100%; padding:26px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.logo-marquee-inner{
  max-width:1600px; margin:0 auto; overflow:hidden; padding:0 40px;
  -webkit-mask-image:linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%);
}
.logo-track{display:flex; align-items:center; gap:64px; width:max-content;}
.logo-track.is-animated{animation:logoScroll 28s linear infinite;}
.logo-marquee:hover .logo-track.is-animated{animation-play-state:paused;}
.logo-track.is-static{justify-content:center; width:100%; flex-wrap:wrap;}
.logo-track img{
  height:34px; width:auto; object-fit:contain; flex-shrink:0;
  filter:grayscale(100%); opacity:0.55; transition:filter .2s ease, opacity .2s ease;
}
.logo-track img:hover{filter:grayscale(0%); opacity:1;}
@keyframes logoScroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* Sections */
section{padding:76px 0;}
.logo-marquee + section{padding-top:44px;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:36px; gap:20px; flex-wrap:wrap;}
.section-head .kicker{font-size:12.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--blue-600); margin-bottom:8px; display:block;}
.section-head h2{font-size:clamp(24px,3vw,32px);}
.section-head p{color:var(--slate-600); font-size:15.5px; max-width:520px; margin-top:8px;}
.slider-controls{display:flex; gap:8px;}
.slider-btn{width:40px; height:40px; border-radius:50%; border:1.5px solid var(--line); background:var(--white); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.slider-btn:hover{border-color:var(--blue-600); color:var(--blue-600);}
.slider-btn svg{width:16px; height:16px;}

/* Category slider */
.cat-slider{display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:none;}
.cat-slider::-webkit-scrollbar{display:none;}
.cat-slide{flex:0 0 320px; scroll-snap-align:start; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); display:flex; flex-direction:column; cursor:pointer;}
.cat-slide-art{height:200px; position:relative; overflow:hidden; transition:transform .5s ease;}
.cat-slide:hover .cat-slide-art{transform:scale(1.06);}
.cat-slide-art .count-pill{position:absolute; top:16px; right:16px; background:rgba(10,23,48,0.55); color:var(--white); font-family:var(--font-mono); font-size:11.5px; font-weight:700; padding:5px 10px; border-radius:999px;}
.cat-slide-body{padding:20px 22px 24px; display:flex; flex-direction:column; flex:1;}
.cat-slide-body h3{font-size:17px; margin-bottom:8px;}
.cat-slide-body p{font-size:13.5px; color:var(--slate-600); margin-bottom:18px; flex:1;}
.cat-slide-body .link{font-size:13.5px; font-weight:700; color:var(--blue-600); display:flex; align-items:center; gap:6px;}

/* ===== Waarom Wijswatt / value section (nieuw op homepage) ===== */
.value-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.value-card{border:1px solid var(--line); border-radius:var(--radius-md); padding:28px;}
.value-card .icon-wrap{width:44px; height:44px; border-radius:11px; background:var(--navy-950); display:flex; align-items:center; justify-content:center; margin-bottom:18px;}
.value-card .icon-wrap svg{width:22px; height:22px; stroke:var(--white);}
.value-card h3{font-size:16.5px; margin-bottom:8px;}
.value-card p{font-size:14px; color:var(--slate-600); line-height:1.6;}

/* ===== Kennisbank-preview (nieuw op homepage) ===== */
.article-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.article-card{border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; transition:box-shadow .2s ease;}
.article-card:hover{box-shadow:0 14px 30px rgba(10,23,48,0.1);}
.article-thumb{height:150px; position:relative;}
.article-card .content{padding:20px;}
.article-card .tag{font-size:11.5px; font-weight:700; color:var(--blue-600); text-transform:uppercase; letter-spacing:0.04em;}
.article-card h3{font-size:16px; margin:10px 0 8px; line-height:1.3;}
.article-card p{font-size:13.5px; color:var(--slate-600);}

/* ===== Newsletter (nieuw op homepage) ===== */
.newsletter{background:var(--ice-50); border:1px solid var(--line); border-radius:var(--radius-lg); padding:48px; text-align:center;}
.newsletter h2{font-size:25px; margin-bottom:10px;}
.newsletter p{color:var(--slate-600); margin-bottom:24px;}
.newsletter-form{display:flex; gap:10px; max-width:420px; margin:0 auto; justify-content:center;}
.newsletter-form input{flex:1; padding:13px 16px; border-radius:var(--radius-sm); border:1.5px solid var(--line); font-size:14.5px; font-family:var(--font-body);}
.newsletter-form input:focus{outline:2px solid var(--blue-500); outline-offset:2px;}

/* Compare table (homepage) */
.compare-wrap{background:var(--navy-950); border-radius:var(--radius-lg); padding:40px; color:var(--white); position:relative; overflow:hidden;}
.compare-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:26px; flex-wrap:wrap; gap:14px; position:relative; z-index:1;}
.compare-head h2{color:var(--white); font-size:25px;}
.compare-head p{color:#9FADCF; font-size:14px; margin-top:6px;}
.compare-table{width:100%; border-collapse:collapse; position:relative; z-index:1;}
.compare-table th{text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:0.05em; color:#8291B8; font-weight:700; padding:0 14px 14px; border-bottom:1px solid rgba(255,255,255,0.12);}
.compare-table td{padding:18px 14px; border-bottom:1px solid rgba(255,255,255,0.08); vertical-align:middle;}
.prod-name{font-weight:700; font-size:14.5px;}
.prod-brand{font-size:12.5px; color:#8291B8;}
.label-chip{display:inline-block; font-family:var(--font-mono); font-size:11.5px; font-weight:700; padding:3px 8px; border-radius:5px;}
.lc-a{background:rgba(31,157,92,0.18); color:#4FD48A;}
.lc-b{background:rgba(85,120,232,0.2); color:#8AA3F2;}
.price{font-family:var(--font-mono); font-weight:700; font-size:15px;}
.row-cta{font-size:12.5px; font-weight:700; color:var(--navy-950); background:var(--white); padding:8px 14px; border-radius:var(--radius-sm); white-space:nowrap;}
.compare-foot{margin-top:22px; font-size:12.5px; color:#8291B8; position:relative; z-index:1;}

/* ===== Mini-donut score-indicator (gebruikt in productrijen én compare-table) ===== */
.mini-donut{position:relative; width:52px; height:52px; flex-shrink:0;}
.mini-donut svg{width:100%; height:100%; transform:rotate(-90deg);}
.mini-donut .track{fill:none; stroke:var(--line); stroke-width:6;}
.mini-donut.on-dark .track{stroke:rgba(255,255,255,0.15);}
.mini-donut .fill{fill:none; stroke-width:6; stroke-linecap:round; stroke:var(--green-600);}
.mini-donut.mid .fill{stroke:var(--blue-500);}
.mini-donut .num{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:700; font-size:13px; color:var(--slate-800);}
.mini-donut.on-dark .num{color:var(--white);}
.score-cell{display:flex; align-items:center; gap:10px;}
.score-cell .score-lbl{font-size:11px; color:var(--slate-400); text-transform:uppercase; letter-spacing:0.03em;}

/* ===== Category / archive page ===== */
.cat-hero{border-radius:var(--radius-lg); overflow:hidden; position:relative; margin:20px 0 40px; padding:44px; color:var(--white); display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap;}
.cat-hero .deco{position:absolute; inset:0; z-index:0;}
.cat-hero .deco::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(10,23,48,0.75), rgba(10,23,48,0.55));}
.cat-hero .content{position:relative; z-index:1; max-width:560px;}
.cat-hero .eyebrow{font-size:12.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--blue-400); margin-bottom:12px; display:block;}
.cat-hero h1{font-size:clamp(28px,3.6vw,38px); margin-bottom:14px;}
.cat-hero p{font-size:15.5px; color:#C9D5FA; max-width:480px;}
.cat-hero .stats{position:relative; z-index:1; display:flex; gap:30px; flex-wrap:wrap;}
.cat-hero .stat .num{font-family:var(--font-mono); font-size:24px; font-weight:700; color:var(--white);}
.cat-hero .stat .lbl{font-size:12px; color:#9FADCF; margin-top:2px;}

.breadcrumb{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--slate-400); padding:18px 0 0;}
.breadcrumb a:hover{color:var(--blue-600);}
.breadcrumb .current{color:var(--slate-800); font-weight:600;}

.result-bar{display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; flex-wrap:wrap; gap:12px;}
.result-bar .count{font-size:14.5px; color:var(--slate-600);}
.result-bar .count strong{color:var(--slate-800);}

/* Layout met filters-zijbalk */
.cat-layout{display:grid; grid-template-columns:260px 1fr; gap:32px; align-items:start;}
.filters{border:1px solid var(--line); border-radius:var(--radius-md); padding:22px; position:sticky; top:90px;}
.filters h3{font-size:13px; text-transform:uppercase; letter-spacing:0.05em; color:var(--slate-400); margin-bottom:16px;}
.filter-group{margin-bottom:24px;}
.filter-group:last-child{margin-bottom:0;}
.filter-group h4{font-size:14px; font-weight:700; margin-bottom:12px;}
.filter-option{display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--slate-600); margin-bottom:10px; cursor:pointer;}
.filter-option input{width:16px; height:16px; accent-color:var(--blue-600);}
.filter-option .n{margin-left:auto; font-family:var(--font-mono); font-size:11.5px; color:var(--slate-400);}
.filter-actions{display:flex; gap:8px; margin-top:20px;}
.filter-actions .btn{flex:1;}

.product-list{display:flex; flex-direction:column; gap:14px;}
.product-row{border:1px solid var(--line); border-radius:var(--radius-md); padding:20px; display:grid; grid-template-columns:24px 130px 1.5fr 1fr 90px 150px 130px; gap:18px; align-items:center; transition:box-shadow .15s ease, border-color .15s ease;}
.meta-group{display:contents;}
.product-row:hover{box-shadow:0 10px 28px rgba(10,23,48,0.08); border-color:var(--blue-400);}
.product-row.best{border-color:var(--blue-600); background:linear-gradient(0deg, var(--blue-100), var(--white) 40%);}
.best-badge{grid-column:1/-1; font-size:11.5px; font-weight:700; color:var(--blue-600); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:-4px;}
.compare-check-input{width:18px; height:18px; accent-color:var(--blue-600);}
.prod-thumb{width:130px; height:100px; border-radius:var(--radius-sm);}
.prod-info .name{font-weight:700; font-size:15px; margin-bottom:3px;}
.prod-info .name a:hover{color:var(--blue-600);}
.prod-info .brand{font-size:12.5px; color:var(--slate-400);}
.spec-block .lbl{font-size:11px; text-transform:uppercase; letter-spacing:0.04em; color:var(--slate-400); margin-bottom:4px;}
.spec-block .val{font-size:14px; font-weight:600;}
.price-cta{display:flex; flex-direction:column; align-items:flex-start; gap:8px;}
.price-cta .price{font-size:18px;}
.price-cta .btn{width:100%;}

/* Sticky vergelijk-balk */
.compare-bar{position:fixed; left:0; right:0; bottom:-100px; background:var(--navy-950); color:var(--white); padding:16px 28px; display:flex; justify-content:center; align-items:center; gap:24px; transition:bottom .25s ease; z-index:60;}
.compare-bar.show{bottom:0;}
.compare-bar .info{font-size:14px; font-weight:600;}
.compare-bar .info strong{color:var(--blue-400); font-family:var(--font-mono);}

/* ===== Single product page ===== */
.product-detail{
  display:grid; gap:48px; padding:32px 0 70px; align-items:start;
  grid-template-columns:1fr 380px;
  grid-template-areas:
    "image  buybox"
    "title  buybox"
    "specs  buybox"
    "content buybox";
}
.pd-image{grid-area:image;}
.pd-title{grid-area:title;}
.pd-specs{grid-area:specs;}
.pd-content{grid-area:content;}
.buy-box{grid-area:buybox;}
.product-hero-art{border-radius:var(--radius-lg); height:400px; margin-bottom:0;}
.product-gallery-note{font-size:12px; color:var(--slate-400); margin:10px 0 24px;}
.product-detail h1{font-size:28px; margin-bottom:6px;}
.product-detail .brand-line{color:var(--slate-600); font-size:14.5px; margin-bottom:22px;}
.spec-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:30px;}
.spec-card{border:1px solid var(--line); border-radius:var(--radius-md); padding:16px;}
.spec-card .lbl{font-size:11px; text-transform:uppercase; color:var(--slate-400); margin-bottom:6px;}
.spec-card .val{font-size:16px; font-weight:700;}
.trust-badges{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px;}
.trust-badge{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--slate-600); background:var(--ice-50); border:1px solid var(--line); border-radius:999px; padding:8px 14px;}
.trust-badge svg{width:15px; height:15px; stroke:var(--green-600); flex-shrink:0;}

.buy-box{border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px; position:sticky; top:100px; height:fit-content; box-shadow:0 20px 50px rgba(10,23,48,0.08);}
.buy-box .score-row{display:flex; align-items:center; gap:14px; margin-bottom:20px; padding-bottom:18px; border-bottom:1px solid var(--line);}
.buy-box .score-lbl{font-size:12.5px; font-weight:700; color:var(--slate-800);}
.buy-box .score-link{font-size:12px; color:var(--blue-600); font-weight:700;}
.buy-box .price-row{display:flex; align-items:baseline; gap:10px; margin-bottom:2px;}
.buy-box .price{font-size:30px;}
.buy-box .price-was{font-size:14px; color:var(--slate-400); text-decoration:line-through;}
.buy-box .price-sub{font-size:12.5px; color:var(--slate-400); margin-bottom:18px;}
.buy-box .btn-affiliate{width:100%; margin-bottom:10px; font-size:15.5px; padding:15px 22px; background:var(--amber-500); color:var(--navy-950);}
.buy-box .btn-affiliate:hover{background:#F2C25C;}
.buy-box .mini-trust{display:flex; flex-direction:column; gap:8px; margin-bottom:16px; font-size:12.5px; color:var(--slate-600);}
.buy-box .mini-trust .row{display:flex; align-items:center; gap:8px;}
.buy-box .mini-trust svg{width:14px; height:14px; stroke:var(--green-600); flex-shrink:0;}
.buy-box .disclosure-mini{font-size:11px; color:var(--slate-400); line-height:1.5;}
.product-content{max-width:640px; font-size:15px; color:var(--slate-800); line-height:1.7;}
.product-content p{margin-bottom:14px;}

/* ===== Methodology (homepage + losse pagina) ===== */
.method-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.donut-grid{display:grid; grid-template-columns:1fr 1fr; gap:32px 16px;}
.donut-item{display:flex; flex-direction:column; align-items:center; text-align:center; position:relative;}
.donut-svg{width:120px; height:120px; transform:rotate(-90deg);}
.donut-track{fill:none; stroke:var(--line); stroke-width:10;}
.donut-fill{
  fill:none; stroke-width:10; stroke-linecap:round;
  stroke-dasharray:326.7;
  stroke-dashoffset:326.7;
  transition:stroke-dashoffset 1.4s cubic-bezier(.25,.8,.25,1);
}
.donut-pct-overlay{position:absolute; top:0; width:120px; height:120px; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:22px; font-weight:700; color:var(--slate-800);}
.donut-name{margin-top:10px; font-size:12.5px; color:var(--slate-600);}
.method-card{background:var(--ice-50); border:1px solid var(--line); border-radius:var(--radius-lg); padding:32px;}
.source-list{display:flex; flex-direction:column; gap:10px;}
.source-list .src{display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 14px;}
.source-list .src .dot{width:7px; height:7px; border-radius:50%; background:var(--blue-500);}

/* ===== Footer ===== */
footer.site-footer{background:var(--navy-950); color:#9FADCF; padding:64px 0 28px; margin-top:20px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px;}
.footer-brand .brand span:first-child{color:var(--white);}
.footer-brand .brand span:last-child{color:var(--blue-400);}
.footer-brand p{font-size:13.5px; max-width:280px; line-height:1.6; margin-top:14px;}
.footer-col h4{color:var(--white); font-size:13.5px; margin-bottom:16px;}
.footer-col ul{list-style:none; display:flex; flex-direction:column; gap:10px;}
.footer-col a{font-size:13.5px; color:#9FADCF;}
.footer-col a:hover{color:var(--white);}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.1); padding-top:24px; display:flex; justify-content:space-between; font-size:12.5px; flex-wrap:wrap; gap:10px;}
.disclosure{font-size:12px; color:#6B7797; max-width:900px; margin-bottom:20px; line-height:1.6;}

/* ===== Generieke pagina's (Over ons, Contact, Hoe wij scoren, etc.) ===== */
.page-hero{
  background:linear-gradient(135deg, var(--navy-900), var(--navy-950));
  border-radius:var(--radius-lg); padding:56px 44px; margin:20px 0 50px; color:var(--white);
  position:relative; overflow:hidden;
}
.page-hero.has-image{padding:70px 44px;}
.page-hero .deco{position:absolute; inset:0; z-index:0;}
.page-hero .deco::after{content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(10,23,48,0.85) 30%, rgba(10,23,48,0.4) 100%);}
.page-hero .content{position:relative; z-index:1;}
.page-hero .eyebrow{font-size:12.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--blue-400); margin-bottom:12px; display:block;}
.page-hero h1{font-size:clamp(28px,3.6vw,40px); max-width:640px; margin-bottom:14px;}
.page-hero p{font-size:16px; color:#C9D5FA; max-width:560px;}

.prose{max-width:720px; font-size:16px; color:var(--slate-800); line-height:1.7;}
.prose h2{font-size:24px; margin:36px 0 14px;}
.prose h3{font-size:19px; margin:28px 0 10px;}
.prose p{margin-bottom:16px;}
.prose ul{margin:0 0 16px 22px;}
.prose li{margin-bottom:8px;}
.prose strong{color:var(--slate-800);}

.two-col{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; margin-bottom:70px;}
.img-block{border-radius:var(--radius-lg); overflow:hidden; background-size:cover; background-position:center;}
.two-col .img-block{min-height:340px;}

.value-grid-wrap{margin-bottom:70px;}

.owl-card{
  display:flex; align-items:center; gap:32px; background:linear-gradient(135deg, var(--blue-600), var(--navy-900));
  border-radius:var(--radius-lg); padding:40px; color:var(--white); margin-bottom:70px; position:relative; overflow:visible;
}
.owl-card img{width:150px; height:150px; object-fit:contain; flex-shrink:0; filter:drop-shadow(0 10px 18px rgba(10,23,48,0.35));}
.owl-card h3{font-size:21px; margin-bottom:10px;}
.owl-card p{font-size:14.5px; color:#C9D5FA; max-width:480px; line-height:1.6;}

.contact-card{border:1px solid var(--line); border-radius:var(--radius-lg); padding:40px; display:flex; flex-direction:column; gap:22px;}
.contact-row{display:flex; align-items:center; gap:16px;}
.contact-row .icon{width:44px; height:44px; border-radius:11px; background:var(--ice-50); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.contact-row .icon svg{width:20px; height:20px; stroke:var(--blue-600);}
.contact-row .label{font-size:12.5px; color:var(--slate-400); margin-bottom:2px;}
.contact-row .value{font-size:15px; font-weight:700;}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-bottom:70px; align-items:start;}

.faq-list{max-width:760px; margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line); padding:20px 0;}
.faq-q{display:flex; justify-content:space-between; align-items:center; font-weight:700; font-size:15.5px; cursor:pointer; gap:16px;}
.faq-q svg{width:18px; height:18px; stroke:var(--slate-600); transition:transform .2s ease; flex-shrink:0;}
.faq-item.open .faq-q svg{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.faq-item.open .faq-a{max-height:400px;}
.faq-a p{font-size:14.5px; color:var(--slate-600); padding-top:12px; line-height:1.6;}
.faq-category-label{text-align:center; font-size:12.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--blue-600); margin:44px 0 8px;}
.faq-category-label:first-of-type{margin-top:0;}

@media (max-width:1100px){
  .cat-layout{grid-template-columns:1fr;}
  .filters{position:static;}
}

@media (max-width:900px){
  /* Algemene ruimte-verkleining op mobiel — max 10px van de zijkant */
  .wrap{padding:0 10px;}

  .two-col{grid-template-columns:1fr;}
  .value-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .owl-card{flex-direction:column; text-align:center; padding:24px 18px;}
  .hero-grid{flex-direction:column; gap:10px; padding:8px 0 32px;}
  .hero-card.tall{min-height:280px; flex:none;}
  .hero-card{padding:16px;}
  .hero-right{flex-direction:row; gap:10px;}
  .hero-right .hero-card, .hero-right .cta-card{min-height:200px;}
  .cta-card{padding:18px; overflow:hidden;}
  .cta-card h3{font-size:18px; max-width:100%;}
  .cta-card p{font-size:13px; margin-bottom:16px;}
  .cta-card .cta-owl-icon{width:130px; height:130px; right:-6px; bottom:-10px;}
  .article-grid{grid-template-columns:1fr;}
  .method-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .nav-links{display:none;}
  .nav-stat{display:none;}
  .nav-newsletter-btn{display:none;}
  .hamburger-btn{display:flex; margin-right:8px;}
  .cat-bar{display:none;}

  /* Utility-bar toont op mobiel gewoon de drie links, iets compacter */
  .utility-inner{justify-content:center; gap:16px; padding:8px 10px; flex-wrap:wrap;}
  .utility-links-desktop{display:flex; gap:16px; font-size:12px;}
  .utility-email-mobile{display:none;}

  .page-hero, .page-hero.has-image{padding:32px 20px;}
  .cat-hero{padding:24px 18px;}
  .contact-card{padding:26px 22px;}
  .filters{padding:18px;}

  /* Productkaarten: volledig herontworpen voor mobiel, geen samengeperste grid meer */
  .product-list{gap:12px;}
  .product-row{
    display:grid;
    grid-template-columns: 72px 1fr;
    grid-template-areas:
      "thumb info"
      "meta  meta"
      "price price";
    gap:10px 14px;
    padding:14px;
    position:relative;
  }
  .best-badge{grid-column:1/-1; margin-bottom:2px;}
  .compare-check-input{position:absolute; top:14px; right:14px; z-index:2;}
  .prod-thumb{grid-area:thumb; width:72px; height:72px;}
  .prod-info{grid-area:info; padding-right:24px;}
  .prod-info .name{font-size:14px;}
  .meta-group{
    grid-area:meta; display:flex !important; align-items:center; justify-content:space-between;
    gap:10px; background:var(--ice-50); border-radius:var(--radius-sm); padding:10px 12px;
  }
  .meta-group .spec-block .lbl{font-size:10px;}
  .meta-group .spec-block .val{font-size:13px;}
  .mini-donut{width:40px; height:40px;}
  .mini-donut .num{font-size:11px;}
  .price-cta{
    grid-area:price; flex-direction:row; align-items:center; justify-content:space-between;
    padding-top:10px; border-top:1px solid var(--line);
  }
  .price-cta .price{font-size:19px;}
  .price-cta .btn{width:auto; padding:10px 18px;}

  /* "Deze week hoog gescoord"-tabel wordt op mobiel een stapel kaarten i.p.v. een tabel */
  .compare-wrap{padding:24px 16px;}
  .compare-table, .compare-table thead, .compare-table tbody, .compare-table th, .compare-table tr{display:block;}
  .compare-table thead{display:none;}
  .compare-table tr{
    background:rgba(255,255,255,0.04); border-radius:var(--radius-md); padding:16px;
    margin-bottom:12px; border:1px solid rgba(255,255,255,0.08);
  }
  .compare-table td{
    display:flex; justify-content:space-between; align-items:center;
    padding:8px 0; border-bottom:none;
  }
  .compare-table td[data-label]::before{
    content:attr(data-label); font-size:11px; text-transform:uppercase; letter-spacing:0.04em;
    color:#8291B8; font-weight:700;
  }
  .compare-table td[data-label=""]::before{display:none;}
  .compare-table td[data-label="Product"]{flex-direction:column; align-items:flex-start; gap:4px;}
  .compare-table td[data-label="Product"]::before{margin-bottom:2px;}
  .product-detail{
    grid-template-columns:1fr;
    grid-template-areas:
      "image"
      "buybox"
      "title"
      "specs"
      "content";
    gap:24px;
  }

  /* USP-roller: één USP links, rolt verticaal binnen vaste hoogte, e-mail blijft rechts staan */
  .trust-row{flex-direction:row; align-items:center; justify-content:space-between; padding:14px 0; gap:12px;}
  .trust-list{display:none;}
  .trust-count{display:none;}
  .trust-right{gap:0;}
  .trust-email{font-size:12.5px;}

  .trust-roller{
    display:block; position:relative; overflow:hidden;
    height:22px; flex:1; min-width:0;
  }
  .trust-roller-inner{
    display:flex; align-items:center; gap:7px; white-space:nowrap;
    transition:transform .4s ease, opacity .4s ease;
    transform:translateY(0); opacity:1;
  }
  .trust-roller-inner.roll-out{transform:translateY(16px); opacity:0;}
  .trust-roller-inner.roll-in-start{transform:translateY(-16px); opacity:0;}
  .trust-roller-inner.no-transition{transition:none;}
  .trust-roller-text{
    font-size:13px; font-weight:600; color:var(--slate-800);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
}

@media (max-width:600px){
  .hero-right{flex-direction:column;}
  header.site-header .nav{padding:14px 0;}
}