:root{
  --navy:#054066; --navy-deep:#022B45; --navy-80:#1B5375; --navy-60:#4A7591;
  --navy-40:#8AA5B8; --navy-15:#D3E0E9; --navy-08:#E8F0F5; --blue-wash:#F2F7FA;
  --gold:#E7B726; --gold-deep:#C9990D; --gold-tint:#FEF9EC; --cream:#F7F5F1; --shot:#EFEFEF;
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:30px; --r-pill:999px;
  --sh-xs:0 1px 2px rgba(5,64,102,.06); --sh-sm:0 2px 12px rgba(5,64,102,.07);
  --sh-md:0 14px 36px -14px rgba(5,64,102,.22); --sh-lg:0 34px 74px -30px rgba(5,64,102,.36);
  --maxw:1280px; --nav-h:64px; --hdr-h:110px; --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,-apple-system,system-ui,"Segoe UI",sans-serif;color:var(--navy-deep);background:#fff;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-weight:500;letter-spacing:-.042em;line-height:1.1}
h1{font-size:4.05rem}h2{font-size:2.85rem}h3{font-size:1.38rem;font-weight:600;letter-spacing:-.03em}
.eyebrow{font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:10px;margin-bottom:16px}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--gold);flex:0 0 auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 26px;border-radius:var(--r-pill);border:1px solid transparent;font-size:.885rem;font-weight:600;cursor:pointer;transition:all .26s var(--ease);white-space:nowrap;font-family:inherit}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:#000;box-shadow:var(--sh-md);transform:translateY(-1px)}
.btn-gold{background:var(--gold);color:var(--navy)}
.btn-gold:hover{background:var(--gold-deep);box-shadow:var(--sh-md);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--navy-15)}
.btn-ghost:hover{border-color:var(--navy);background:var(--navy-08)}
.btn-sm{padding:10px 18px;font-size:.8rem}
.btn-lg{padding:17px 30px;font-size:.95rem}

.topbar{background:var(--navy-deep);color:var(--navy-15);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;font-weight:500}
.topbar .wrap{display:flex;gap:34px;justify-content:center;padding:9px 32px;flex-wrap:wrap}
.topbar span{display:flex;align-items:center;gap:8px}
.topbar span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--gold)}
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--navy-08)}
header .wrap{display:flex;align-items:center;gap:22px}
.hdr-top{height:var(--nav-h);justify-content:space-between}
.hdr-nav{height:46px;border-top:1px solid var(--navy-08);gap:0}
.hdr-nav nav.main{flex:1;gap:26px}
.mark{flex:0 0 auto}
.mark{font-size:1.42rem;font-weight:600;letter-spacing:-.05em;color:var(--navy);cursor:pointer}
.mark em{font-style:normal;color:var(--gold)}
.mark small{display:block;font-size:.53rem;letter-spacing:.34em;text-transform:uppercase;color:var(--navy-40);font-weight:600;margin-top:-2px}
nav.main{display:flex;gap:26px;font-size:.86rem;font-weight:500;white-space:nowrap}
nav.main a{white-space:nowrap}
nav.main a{color:var(--navy-80)}
nav.main a.on{color:var(--navy);position:relative}
nav.main a.on::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--gold);border-radius:2px}
.hdr-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.hero{background:linear-gradient(160deg,var(--navy-deep) 0%,var(--navy) 58%,var(--navy-80) 100%);color:#fff;padding:78px 0 92px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-180px;top:-140px;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(231,183,38,.17),transparent 66%)}
.hero .wrap{position:relative;z-index:2;max-width:820px}
.hero h1{color:#fff;margin-bottom:20px}
.hero p{font-size:1.14rem;color:var(--navy-15);max-width:600px;margin-bottom:32px}
/* mand- en offerteknoppen */
.mand{position:relative;display:inline-flex;align-items:center;gap:9px;padding:10px 17px;border-radius:var(--r-pill);border:1px solid var(--navy-15);background:transparent;color:var(--navy);font-family:inherit;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .24s var(--ease)}
.mand:hover{border-color:var(--navy);background:var(--navy-08);transform:translateY(-1px)}
.mand.primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.mand.primary:hover{background:#000;box-shadow:var(--sh-md)}
.mand .cnt{min-width:19px;height:19px;padding:0 5px;border-radius:var(--r-pill);background:var(--gold);color:var(--navy);font-size:.68rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.mand.primary .cnt{background:var(--gold);color:var(--navy)}
.mand .cnt.zero{background:var(--navy-15);color:var(--navy-60)}
.mand.primary .cnt.zero{background:rgba(255,255,255,.22);color:#fff}
.bump{animation:bump .45s var(--ease)}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}

/* zijpaneel */
.bagov{position:fixed;inset:0;background:rgba(2,43,69,.5);backdrop-filter:blur(4px);z-index:120;opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.bagov.open{opacity:1;pointer-events:auto}
.bag{position:fixed;top:0;right:0;height:100%;width:min(440px,100%);background:#fff;z-index:121;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .38s var(--ease);box-shadow:var(--sh-lg)}
.bag.open{transform:none}
.bag header{padding:22px 24px;border-bottom:1px solid var(--navy-08);display:flex;align-items:center;justify-content:space-between;position:static;background:#fff}
.bag h3{font-size:1.15rem}
.bagtabs{display:flex;gap:6px;padding:14px 24px 0}
.bagtab{flex:1;padding:9px;border:1px solid var(--navy-15);border-radius:var(--r-sm);background:#fff;font-family:inherit;font-size:.8rem;font-weight:600;color:var(--navy-60);cursor:pointer;transition:all .2s var(--ease)}
.bagtab.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.bagbody{flex:1;overflow-y:auto;padding:18px 24px}
.bagrow{display:flex;gap:13px;padding:14px 0;border-bottom:1px solid var(--navy-08)}
.bagrow img{width:62px;height:62px;object-fit:contain;background:var(--shot);border-radius:var(--r-sm);flex:0 0 auto}
.bagrow .info{flex:1;min-width:0}
.bagrow h4{font-size:.86rem;font-weight:600;line-height:1.35;margin-bottom:4px}
.bagrow .sub{font-size:.74rem;color:var(--navy-40);line-height:1.5}
.bagrow .pr{font-size:.86rem;font-weight:600;color:var(--navy);margin-top:5px}
.bagrow .del{background:none;border:0;color:var(--navy-40);font-size:.72rem;cursor:pointer;padding:2px 0;text-decoration:underline;font-family:inherit}
.bagrow .del:hover{color:#C8102E}
.bagempty{text-align:center;color:var(--navy-40);font-size:.9rem;padding:44px 10px}
.bagfoot{border-top:1px solid var(--navy-08);padding:20px 24px 24px;background:var(--blue-wash)}
.bagfoot .tot{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:15px;border:0;padding:0}
.bagx{width:32px;height:32px;border-radius:50%;border:1px solid var(--navy-08);background:#fff;cursor:pointer;color:var(--navy-60);font-size:1rem}
.addrow{display:flex;gap:9px;margin-top:18px}
.addrow .btn{flex:1}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--navy-deep);color:#fff;padding:13px 22px;border-radius:var(--r-pill);font-size:.86rem;font-weight:500;z-index:130;opacity:0;pointer-events:none;transition:all .35s var(--ease);box-shadow:var(--sh-md)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast b{color:var(--gold)}

.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;max-width:var(--maxw)!important}
.hero-i{width:100%;display:flex;justify-content:center}
.hero-i img{max-height:380px;width:auto}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr}.hero-i{width:100%;display:flex}}

/* blog */
.post{background:#fff;border:1px solid var(--navy-08);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:all .3s var(--ease)}
.post:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--navy-15)}
.post .ph{aspect-ratio:16/10;overflow:hidden;background:var(--cream)}
.post .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.post:hover .ph img{transform:scale(1.06)}
.post .pb{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.post .meta{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:9px}
.post h3{font-size:1.08rem;line-height:1.32;margin-bottom:8px}
.post p{font-size:.88rem;color:var(--navy-60);margin-bottom:15px}
.post .go{margin-top:auto;font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--navy)}
.article{max-width:760px;margin:0 auto}
.article .lead{font-size:1.14rem;color:var(--navy-80);margin-bottom:26px}
.article img{width:100%;border-radius:var(--r-lg);margin:26px 0}
.catbar{border-bottom:1px solid var(--navy-08);background:#fff;position:sticky;top:var(--hdr-h);z-index:50}
.catbar .wrap{display:flex;gap:8px;overflow-x:auto;padding:14px 32px;scrollbar-width:none}
.catbar .wrap::-webkit-scrollbar{display:none}
.cat{padding:8px 17px;border-radius:var(--r-pill);font-size:.83rem;font-weight:500;color:var(--navy-60);border:1px solid var(--navy-08);white-space:nowrap;cursor:pointer;background:#fff}
.cat.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.subbar{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;margin:-14px 0 32px;padding-bottom:2px}
.subbar::-webkit-scrollbar{display:none}
.subbar.hide{display:none}
.sub{padding:7px 15px;border-radius:var(--r-pill);font-size:.8rem;font-weight:500;color:var(--navy-60);background:var(--navy-04,#f4f5f7);border:1px solid transparent;white-space:nowrap;cursor:pointer}
.sub:hover{color:var(--navy)}
.sub.on{background:#fff;color:var(--navy);border-color:var(--navy);font-weight:600}
.sub .n{color:var(--navy-40);font-weight:400;margin-left:5px}
.tsubs{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 2px}
.tsubs a{font-size:.73rem;color:var(--navy-60);background:var(--navy-04,#f4f5f7);padding:4px 9px;border-radius:var(--r-pill);cursor:pointer}
.tsubs a:hover{background:var(--navy);color:#fff}
main{padding:52px 0 90px}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:34px;flex-wrap:wrap}

.head p{color:var(--navy-60);max-width:540px;margin-top:8px;font-size:.97rem}
.layout{display:grid;grid-template-columns:224px 1fr;gap:44px;align-items:start}
.filters{position:sticky;top:150px}
.fgroup{margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--navy-08)}
.fgroup:last-child{border:0}
.fgroup h4{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--navy-40);font-weight:600;margin-bottom:13px}
.fopt{display:flex;align-items:center;gap:9px;font-size:.875rem;color:var(--navy-80);padding:5px 0;cursor:pointer}
.fopt input{accent-color:var(--navy);width:15px;height:15px;cursor:pointer}
.fopt span.n{margin-left:auto;font-size:.75rem;color:var(--navy-40)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:26px}

.frame{position:relative;aspect-ratio:1;background:var(--shot);overflow:hidden}
.frame img.base{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none}
.mount{position:absolute;z-index:3;display:flex;align-items:center;justify-content:center;pointer-events:none}
.mount img{width:100%;height:100%;object-fit:contain;display:block}
.fill{width:100%;height:100%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.ph{font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.85);background:rgba(2,43,69,.42);border:1px dashed rgba(255,255,255,.55);border-radius:4px;padding:5px 10px;white-space:nowrap}
.cp{position:absolute;left:11px;bottom:11px;width:46px;height:46px;border-radius:50%;background:var(--navy-deep);display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;color:var(--gold);box-shadow:var(--sh-sm);z-index:4}
.tag{position:absolute;top:12px;left:12px;background:var(--navy-deep);color:var(--gold);font-size:.62rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;padding:5px 11px;border-radius:var(--r-pill);z-index:4}
.card{background:#fff;border:1px solid var(--navy-08);border-radius:var(--r-lg);overflow:hidden;cursor:pointer;transition:all .3s var(--ease);display:flex;flex-direction:column}
.card:hover{border-color:var(--navy-15);box-shadow:var(--sh-md);transform:translateY(-3px)}
.card .frame img.base{transition:transform .45s var(--ease)}
.card:hover .frame img.base{transform:scale(1.045)}
.cbody{padding:17px 18px 19px;display:flex;flex-direction:column;flex:1}
.cbody h3{font-size:.985rem;font-weight:600;line-height:1.34;letter-spacing:-.018em;margin-bottom:7px}
.spec{font-size:.775rem;color:var(--navy-40);margin-bottom:10px;line-height:1.5}
.dots{display:flex;gap:5px;margin-bottom:13px}
.dot{width:13px;height:13px;border-radius:50%;box-shadow:0 0 0 1px var(--navy-15)}
.price{margin-top:auto;display:flex;align-items:baseline;gap:7px}
.price b{font-size:1.16rem;font-weight:600;letter-spacing:-.03em;color:var(--navy)}
.price small{font-size:.72rem;color:var(--navy-40)}
.vanaf{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--navy-40);font-weight:600;display:block;margin-bottom:1px}

.crumb{font-size:.8rem;color:var(--navy-40);margin-bottom:22px}
.crumb a{color:var(--navy-60);cursor:pointer}
.pdp{display:grid;grid-template-columns:1.08fr 1fr;gap:54px;align-items:start}
.gal .frame{border-radius:var(--r-lg);border:1px solid var(--navy-08)}
.thumbs{display:flex;gap:9px;margin-top:12px}
.th{width:62px;height:62px;border-radius:var(--r-sm);border:1px solid var(--navy-08);background:var(--shot);cursor:pointer;overflow:hidden;flex:0 0 auto;transition:border-color .2s}
.th img{width:100%;height:100%;object-fit:contain}
.th.on{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy)}
.cfgbar{margin-top:18px;background:linear-gradient(135deg,var(--gold-tint),#fff);border:1px solid var(--gold);border-radius:var(--r-md);padding:16px 18px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cfgbar .txt{flex:1;min-width:170px}
.cfgbar b{display:block;font-size:.92rem;color:var(--navy);font-weight:600}
.cfgbar span{font-size:.78rem;color:var(--navy-60)}
.pdp .kop-pdp{font-size:2.05rem;font-weight:500;letter-spacing:-.04em;line-height:1.16;margin-bottom:8px}
.artnr{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-40);font-weight:600;margin-bottom:16px}
.desc{font-size:.95rem;color:var(--navy-80);margin-bottom:20px}
.props{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:26px}
.prop{font-size:.73rem;background:var(--blue-wash);color:var(--navy-80);padding:5px 11px;border-radius:var(--r-pill);border:1px solid var(--navy-08)}
.blk{margin-bottom:22px}
.blk h4{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--navy-40);font-weight:600;margin-bottom:11px}
.opts{display:flex;flex-wrap:wrap;gap:7px}
.opt{padding:9px 15px;border:1px solid var(--navy-15);border-radius:var(--r-sm);font-size:.8rem;cursor:pointer;transition:all .2s var(--ease);background:#fff;font-family:inherit;color:var(--navy-80);text-align:left}
.opt:hover{border-color:var(--navy-40)}
.opt.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.opt small{display:block;font-size:.63rem;opacity:.72;margin-top:1px}
.swrow{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.sw{width:30px;height:30px;border-radius:50%;border:2px solid transparent;box-shadow:0 0 0 1px var(--navy-15);cursor:pointer}
.sw.on{border-color:#fff;box-shadow:0 0 0 2px var(--navy)}
.blank{position:absolute;left:3.5%;bottom:3.5%;width:18%;height:15%;background:var(--shot);z-index:2;pointer-events:none}
.swname{font-size:.8rem;color:var(--navy-60);margin-left:4px}
.mz{display:flex;flex-wrap:wrap;gap:6px}
.mz button{min-width:42px;padding:7px 9px;border:1px solid var(--navy-15);border-radius:var(--r-sm);background:#fff;font-family:inherit;font-size:.78rem;font-weight:500;color:var(--navy-80);cursor:pointer}
.mz button.on{border-color:var(--navy);background:var(--navy);color:#fff}
.pms{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ink{width:23px;height:23px;border-radius:50%;cursor:pointer;box-shadow:0 0 0 1px var(--navy-15);border:2px solid transparent}
.inkmeer{font-size:.74rem;color:var(--navy-60);background:var(--navy-04,#f4f5f7);border:1px solid var(--navy-08);border-radius:var(--r-pill);padding:4px 11px;cursor:pointer;margin-left:6px;vertical-align:6px}
.inkmeer:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.inknaam{font-size:.76rem;color:var(--navy-60);margin-top:8px}
.pmsbox{display:none;margin-top:10px;border:1px solid var(--navy-08);border-radius:12px;padding:12px;max-height:290px;overflow:auto;background:#fff}
.pmsbox.open{display:block}
.pmsbox input{width:100%;padding:7px 10px;font:inherit;font-size:.82rem;border:1px solid var(--navy-15);border-radius:8px;margin-bottom:10px}
.pmsgroep h5{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--navy-40);margin:10px 0 6px;font-weight:600}
.pmsgroep:first-of-type h5{margin-top:0}
.pmsrij{display:flex;flex-wrap:wrap;gap:5px}
.pmschip{width:26px;height:26px;border-radius:6px;cursor:pointer;box-shadow:0 0 0 1px var(--navy-15) inset;border:2px solid transparent}
.pmschip.on{border-color:var(--navy);box-shadow:0 0 0 1px #fff inset}
.ink.on{border-color:#fff;box-shadow:0 0 0 2px var(--navy)}
.drop{border:1.5px dashed var(--navy-15);border-radius:var(--r-md);padding:16px;text-align:center;font-size:.83rem;color:var(--navy-60);cursor:pointer;transition:all .2s;background:var(--blue-wash);display:block}
.drop:hover{border-color:var(--gold);background:var(--gold-tint)}
.drop b{color:var(--navy);font-weight:600}
.drop input{display:none}
.drop.has{border-style:solid;border-color:var(--navy-15);background:#fff;display:flex;align-items:center;gap:12px;text-align:left}
.drop.has img{width:44px;height:44px;object-fit:contain;background:var(--shot);border-radius:6px;flex:0 0 auto}
.proof{font-size:.78rem;color:var(--navy-60);background:var(--blue-wash);border-left:2px solid var(--gold);padding:10px 14px;border-radius:0 var(--r-sm) var(--r-sm) 0;margin-top:12px}
.proof-lg{font-size:.82rem;line-height:1.55;background:var(--gold-tint);border-left-width:3px;color:var(--navy-80);padding:13px 16px;margin-top:2px}
.proof-lg b{color:var(--navy);font-weight:600}
.calc{background:var(--blue-wash);border:1px solid var(--navy-08);border-radius:var(--r-md);padding:18px 20px;margin-top:8px}
.qrow{display:flex;gap:6px;margin-bottom:15px;flex-wrap:wrap}
.qnote{flex-basis:100%;font-size:.72rem;color:var(--navy-40);padding-top:4px}
.q{flex:1;min-width:46px;padding:8px 4px;text-align:center;border:1px solid var(--navy-15);border-radius:var(--r-sm);font-size:.79rem;font-weight:500;cursor:pointer;background:#fff;font-family:inherit;color:var(--navy-80)}
.q.on{background:var(--navy);color:#fff;border-color:var(--navy)}

.tot{display:flex;justify-content:space-between;align-items:flex-end;padding-top:13px;border-top:1px solid var(--navy-15)}
.tot .lbl{font-size:.76rem;color:var(--navy-60)}
.tot .big{font-size:1.85rem;font-weight:600;letter-spacing:-.04em;color:var(--navy);line-height:1}
.note{font-size:.7rem;color:var(--navy-40);line-height:1.5}
.macts{display:flex;gap:9px;margin-top:18px}

.ov{position:fixed;inset:0;background:rgba(2,43,69,.55);backdrop-filter:blur(5px);z-index:100;display:none;align-items:flex-start;justify-content:center;padding:38px 20px;overflow-y:auto}
.ov.open{display:flex}
.modal{background:#fff;border-radius:var(--r-xl);max-width:1000px;width:100%;overflow:hidden;box-shadow:var(--sh-lg);position:relative;animation:pop .34s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.mgrid{display:grid;grid-template-columns:1.1fr .78fr}
.stage{background:var(--cream);padding:30px;display:flex;flex-direction:column;gap:13px}
.stage .frame{border-radius:var(--r-md);box-shadow:var(--sh-xs)}
.drag{position:absolute;cursor:grab;user-select:none;display:flex;align-items:center;justify-content:center;touch-action:none;transform-origin:center;z-index:5}
.drag:active{cursor:grabbing}
.drag img{width:100%;height:100%;object-fit:contain;pointer-events:none;display:block}
.drag::before{content:"";position:absolute;inset:-9px;border:1.5px solid var(--gold);border-radius:3px;opacity:0;transition:opacity .2s}
.drag:hover::before,.drag.act::before{opacity:1}
.hRot,.hScale{position:absolute;opacity:0;transition:opacity .2s;z-index:6}
.drag:hover .hRot,.drag.act .hRot,.drag:hover .hScale,.drag.act .hScale{opacity:1}
.hRot{left:50%;top:-32px;transform:translateX(-50%);width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid var(--gold);cursor:grab;display:flex;align-items:center;justify-content:center}
.hRot::before{content:"";width:9px;height:9px;border:1.6px solid var(--gold);border-radius:50%;border-right-color:transparent;border-bottom-color:transparent;transform:rotate(35deg)}
.hRot::after{content:"";position:absolute;top:100%;left:50%;width:1.5px;height:11px;background:var(--gold);transform:translateX(-50%)}
.hScale{right:-13px;bottom:-13px;width:17px;height:17px;border-radius:4px;background:var(--navy);border:2px solid #fff;box-shadow:var(--sh-sm);cursor:nwse-resize}
.mpane{padding:30px 32px 32px;display:flex;flex-direction:column;overflow-y:auto;max-height:82vh}
.x{position:absolute;top:18px;right:20px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);border:1px solid var(--navy-08);cursor:pointer;font-size:1.05rem;color:var(--navy-60);display:flex;align-items:center;justify-content:center;z-index:9}
footer{background:var(--navy-deep);color:var(--navy-40);padding:56px 0 30px;font-size:.85rem}
footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:26px 48px;margin-bottom:40px;align-items:start}
footer h5{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:12px}
footer .cols > div{min-width:0}
footer a{display:block;padding:5px 0;color:var(--navy-15);line-height:1.5}
footer .mark{color:#fff;margin-bottom:12px}
footer .bot{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;font-size:.76rem;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
/* ---------- algemene pagina-opbouw ---------- */
.sect{padding:78px 0}
.sect.tight{padding:52px 0}
.sect.wash{background:var(--blue-wash)}
.sect.cream{background:var(--cream)}
.sect.dark{background:var(--navy-deep);color:#fff}
.sect.dark h2,.sect.dark h3{color:#fff}
.sect.dark p{color:var(--navy-15)}
.shead{max-width:660px;margin-bottom:42px}
.shead.mid{margin-left:auto;margin-right:auto;text-align:center}
.shead.mid .eyebrow{justify-content:center}
.shead p{color:var(--navy-60);font-size:1.02rem;margin-top:12px}
.lead{font-size:1.12rem;line-height:1.7;color:var(--navy-80)}

.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.cols4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}

.step{position:relative;padding-top:20px}
.step .no{font-size:.7rem;font-weight:700;letter-spacing:.2em;color:var(--gold);margin-bottom:10px}
.step h3{font-size:1.14rem;margin-bottom:9px}
.step p{font-size:.92rem;color:var(--navy-60)}
.step::before{content:"";position:absolute;top:0;left:0;width:34px;height:2px;background:var(--gold);border-radius:2px}

.tile{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--cream);border:1px solid var(--navy-08);cursor:pointer;transition:all .3s var(--ease);display:flex;flex-direction:column;min-height:150px}
.tile:hover{border-color:var(--navy-15);box-shadow:var(--sh-md);transform:translateY(-3px)}
.tile .tbody{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1 1 auto}
.tile h3{font-size:1.04rem;margin-bottom:6px}
.tile p{font-size:.82rem;color:var(--navy-60);margin-bottom:14px}
.tile .go{margin-top:auto;font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--navy)}
.tile.soon{opacity:.72;cursor:default}
.tile.soon:hover{transform:none;box-shadow:none;border-color:var(--navy-08)}
.tile .tthumb{position:relative;flex:0 0 auto;aspect-ratio:16/10;background:linear-gradient(160deg,var(--blue-wash),#fff);display:flex;align-items:center;justify-content:center;overflow:hidden;border-bottom:1px solid var(--navy-08)}
.tile .tthumb img{max-width:56%;max-height:78%;object-fit:contain;transition:transform .5s var(--ease);filter:drop-shadow(0 12px 20px rgba(5,64,102,.16))}
.tile:hover .tthumb img{transform:scale(1.07) translateY(-3px)}
.tile{background:#fff}
.tile .pill{position:absolute;top:14px;right:14px;font-size:.6rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r-pill);background:var(--navy-08);color:var(--navy-60)}
.tile .pill.live{background:var(--gold);color:var(--navy)}

.usp{display:flex;gap:14px;align-items:flex-start}
.usp .ic{width:38px;height:38px;border-radius:50%;background:var(--gold-tint);border:1px solid var(--gold-soft,#F5E3AE);flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:.95rem}
.usp h3{font-size:1rem;margin-bottom:5px}
.usp p{font-size:.88rem;color:var(--navy-60)}

/* foto's zonder kader: alleen het beeld zelf */
.shot-img{border-radius:var(--r-lg);overflow:hidden;position:relative}
.shot-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--ease)}
.shot-img:hover img{transform:scale(1.045)}
/* transparante uitsneden: vrij op de pagina, geen vlak eromheen */
.float{display:block;width:100%;height:auto;filter:drop-shadow(0 34px 44px rgba(2,43,69,.28));transition:transform .7s var(--ease),filter .7s var(--ease)}
.float:hover{transform:translateY(-8px) scale(1.015);filter:drop-shadow(0 44px 56px rgba(2,43,69,.34))}
.float.dark{filter:drop-shadow(0 34px 48px rgba(0,0,0,.55))}
.floatwrap{display:flex;align-items:center;justify-content:center;padding:10px}

/* ---------- interactie ---------- */
a,button,.cat,.card,.tile,.th,.sw,.ink,.q,.opt,summary,.fopt{cursor:pointer}
a,button{transition:color .22s var(--ease),background .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
nav.main a{position:relative;padding-bottom:3px}
nav.main a::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--gold);border-radius:2px;transition:width .3s var(--ease)}
nav.main a:hover::after{width:100%}
nav.main a.on::after{width:100%}
footer a{position:relative;display:block;width:fit-content;transition:color .22s var(--ease),transform .22s var(--ease)}
footer a:hover{color:#fff;transform:translateX(3px)}
header.scrolled{box-shadow:0 6px 22px -12px rgba(5,64,102,.28)}
.card:active,.tile:active{transform:translateY(-1px) scale(.995)}
.cat{transition:all .24s var(--ease)}
.cat:hover{border-color:var(--navy-40);color:var(--navy);transform:translateY(-1px)}
.fopt{transition:color .2s var(--ease)}
.fopt:hover{color:var(--navy)}
.fopt:hover span.n{color:var(--navy-60)}
.th{transition:border-color .22s var(--ease),transform .22s var(--ease)}
.th:hover{transform:translateY(-2px);border-color:var(--navy-40)}
.sw,.ink{transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.sw:hover,.ink:hover{transform:scale(1.12)}
.q,.opt{transition:all .2s var(--ease)}
.q:hover:not(.on){border-color:var(--navy-40);transform:translateY(-1px)}
.opt:hover:not(.on){transform:translateY(-1px)}
.techcard{transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.techcard:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--navy-15)}
.step{transition:transform .3s var(--ease)}
.step:hover{transform:translateY(-3px)}
.step::before{transition:width .3s var(--ease)}
.step:hover::before{width:56px}
.usp{transition:transform .3s var(--ease)}
.usp:hover{transform:translateX(4px)}
.usp .ic{transition:transform .3s var(--ease),background .3s var(--ease)}
.usp:hover .ic{transform:rotate(-8deg) scale(1.08);background:var(--gold)}
.logos img{transition:filter .35s var(--ease),opacity .35s var(--ease),transform .35s var(--ease)}
.logos img:hover{filter:none;transform:scale(1.06)}
.faq summary{transition:color .2s var(--ease)}
.faq summary:hover{color:var(--gold-deep)}
.field input,.field textarea,.field select{transition:border-color .22s var(--ease),box-shadow .22s var(--ease)}
.field input:focus,.field textarea:focus,.field select:focus{box-shadow:0 0 0 3px rgba(231,183,38,.18)}
.drop{transition:all .24s var(--ease)}
.drop:hover{transform:translateY(-1px)}
/* zachte binnenkomst bij scrollen */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}
.logos{display:flex;gap:44px;align-items:center;justify-content:center;flex-wrap:wrap;opacity:.55}
.logos img{height:34px;max-width:150px;object-fit:contain;filter:grayscale(1)}

.techcard{background:#fff;border:1px solid var(--navy-08);border-radius:var(--r-lg);padding:26px 24px;display:flex;flex-direction:column}
.techcard h3{font-size:1.1rem;margin-bottom:4px}
.techcard .sub{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:13px}
.techcard p{font-size:.9rem;color:var(--navy-60);margin-bottom:16px}
.techcard dl{font-size:.82rem;border-top:1px solid var(--navy-08);padding-top:13px;margin-top:auto}
.techcard dl div{display:flex;justify-content:space-between;gap:12px;padding:4px 0}
.techcard dt{color:var(--navy-40)}
.techcard dd{color:var(--navy-80);font-weight:500;text-align:right}

.faq{border-top:1px solid var(--navy-08)}
.faq details{border-bottom:1px solid var(--navy-08);padding:18px 0}
.faq summary{font-weight:600;font-size:.98rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-weight:400;font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:11px;font-size:.92rem;color:var(--navy-60);max-width:720px}

.band{background:linear-gradient(160deg,var(--navy-deep),var(--navy) 70%);color:#fff;border-radius:var(--r-xl);padding:52px 48px;display:flex;gap:34px;align-items:center;justify-content:space-between;flex-wrap:wrap;position:relative;overflow:hidden}
.band::after{content:"";position:absolute;right:-90px;bottom:-120px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(231,183,38,.2),transparent 65%)}
.band .t{position:relative;z-index:2;max-width:520px}
.band h2{font-size:2rem;color:#fff;margin-bottom:10px}
.band p{color:var(--navy-15)}
.band .a{position:relative;z-index:2;display:flex;gap:10px;flex-wrap:wrap}

.form{display:grid;gap:14px}
.field label{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--navy-40);font-weight:600;margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;padding:12px 14px;border:1px solid var(--navy-15);border-radius:var(--r-sm);font-family:inherit;font-size:.92rem;color:var(--navy-deep);background:#fff}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold)}
.field textarea{min-height:120px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cinfo{background:var(--blue-wash);border-radius:var(--r-lg);padding:28px}
.cinfo h3{font-size:1rem;margin-bottom:14px}
.cinfo dl div{padding:9px 0;border-bottom:1px solid var(--navy-08)}
.cinfo dt{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--navy-40);font-weight:600;margin-bottom:2px}
.cinfo dd{font-size:.93rem;color:var(--navy-80)}
.prose p{margin-bottom:15px;color:var(--navy-80);font-size:.98rem;line-height:1.72}
.prose h3{margin:30px 0 11px;font-size:1.18rem}
.prose ul{margin:0 0 15px 20px;color:var(--navy-80);font-size:.96rem}
.prose li{margin-bottom:7px}

/* --- terugknop --- */
.terug{display:inline-flex;align-items:center;gap:7px;font-size:.83rem;color:var(--navy-60);background:#fff;border:1px solid var(--navy-15);border-radius:var(--r-pill);padding:7px 15px;cursor:pointer;margin-bottom:16px}
.terug:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.terug b{font-size:1rem;line-height:1}
/* --- sorteerbalk --- */
.sortbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--navy-08);border-bottom:1px solid var(--navy-08);padding:11px 0;margin:0 0 26px}
.sortbar .tel{font-size:.83rem;color:var(--navy-60)}
.sortbar .tel b{color:var(--navy)}
.sorts{display:flex;gap:6px;flex-wrap:wrap}
.sorts button{font-size:.79rem;padding:6px 13px;border-radius:var(--r-pill);border:1px solid var(--navy-08);background:#fff;color:var(--navy-60);cursor:pointer;white-space:nowrap}
.sorts button:hover{color:var(--navy)}
.sorts button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
/* --- USP-strip --- */
.uspbar{display:flex;gap:26px;flex-wrap:wrap;padding:13px 0 0;margin-bottom:8px;font-size:.8rem;color:var(--navy-60)}
.uspbar span{display:inline-flex;align-items:center;gap:7px}
.uspbar i{width:16px;height:16px;border-radius:50%;background:var(--gold,#C9A227);display:inline-block;position:relative;flex:0 0 16px}
.uspbar i::after{content:"";position:absolute;left:5px;top:3px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
/* --- vaste actiebalk op de productpagina --- */
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:200;background:#fff;border-top:1px solid var(--navy-15);
  box-shadow:0 -6px 24px rgba(16,24,40,.10);padding:11px 22px;display:none;align-items:center;gap:16px}
.stickybar.on{display:flex}
.stickybar .sp{flex:1;min-width:0}
.stickybar .sn{font-size:.83rem;font-weight:600;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stickybar .sq{font-size:.74rem;color:var(--navy-40)}
.stickybar .spr{font-size:1.15rem;font-weight:600;color:var(--navy);letter-spacing:-.03em;white-space:nowrap}
.stickybar .btn{padding:10px 18px}
@media(max-width:720px){.stickybar .sq{display:none}.stickybar{padding:9px 14px;gap:10px}}
/* --- snelle offerte --- */
.snelbox{border:1px solid var(--navy-08);border-radius:14px;padding:18px;margin-top:16px;background:var(--navy-04,#f7f8fa)}
.snelbox h4{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--navy-40);font-weight:600;margin-bottom:4px}
.snelbox p{font-size:.83rem;color:var(--navy-60);margin-bottom:12px}
.snelrij{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.snelbox input{width:100%;padding:9px 12px;font:inherit;font-size:.86rem;border:1px solid var(--navy-15);border-radius:9px;background:#fff}
.snelbox input:focus{outline:none;border-color:var(--navy)}
.bagklant{margin-bottom:12px}
.bagklant input{width:100%;padding:9px 12px;font:inherit;font-size:.85rem;border:1px solid var(--navy-15);border-radius:9px;background:#fff;margin-bottom:8px}
.bagklant input:focus{outline:none;border-color:var(--navy)}
.bagklant .snelrij{margin-bottom:0}
.bagklant .snelrij input{margin-bottom:8px}
.qrow .q{display:inline-flex;flex-direction:column;align-items:center;gap:2px;line-height:1.15}
.qrow .q i{font-style:normal;font-size:.68rem;opacity:.62}
.besp{font-size:.82rem;color:var(--navy-80);background:var(--gold-08,#faf4e4);border:1px solid rgba(201,162,39,.28);border-radius:9px;padding:9px 12px}
.besp a{color:var(--navy);font-weight:600;text-decoration:underline;cursor:pointer;margin-left:4px}
.zoekwrap{position:relative;flex:1 1 240px;max-width:420px;min-width:0;margin:0}
.zoekwrap input{width:100%;padding:8px 13px 8px 34px;font:inherit;font-size:.84rem;border:1px solid var(--navy-15);border-radius:var(--r-pill);background:#fff}
.zoekwrap input:focus{outline:none;border-color:var(--navy)}
.zoekwrap::before{content:"";position:absolute;left:13px;top:50%;width:11px;height:11px;margin-top:-7px;border:1.8px solid var(--navy-40);border-radius:50%}
.zoekwrap::after{content:"";position:absolute;left:22px;top:50%;width:6px;height:1.8px;background:var(--navy-40);transform:rotate(45deg);margin-top:2px}
.zoekres{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--navy-08);border-radius:12px;box-shadow:0 14px 40px rgba(16,24,40,.14);max-height:340px;overflow:auto;z-index:300;display:none}
.zoekres.open{display:block}
.zoekres a{display:flex;gap:10px;align-items:center;padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--navy-04,#f2f3f5)}
.zoekres a:hover{background:var(--navy-04,#f5f6f8)}
.zoekres img{width:38px;height:38px;object-fit:contain;border-radius:6px;background:#EFEFEF;flex:0 0 38px}
.zoekres .zn{font-size:.82rem;color:var(--navy);font-weight:500;line-height:1.3}
.zoekres .zp{font-size:.74rem;color:var(--navy-40)}
.zoekleeg{padding:14px;font-size:.82rem;color:var(--navy-40)}
.hdr-tel{font-size:.8rem;color:var(--navy-60);white-space:nowrap;margin-right:4px}
.hdr-tel a{color:var(--navy);font-weight:600}
@media(max-width:520px){.snelrij{grid-template-columns:1fr}}

/* ======== HOMEPAGE ======== */
.hero{padding:66px 0 78px}
.hero-grid{display:grid;grid-template-columns:1fr 1.04fr;gap:40px;align-items:center}
.hero .kop-hero{font-size:3.45rem;line-height:1.04;letter-spacing:-.045em;margin-bottom:18px}
.hero .lead2{font-size:1.06rem;color:rgba(255,255,255,.78);max-width:520px;margin-bottom:26px;line-height:1.62}
.herocheck{display:grid;gap:10px;margin:26px 0 30px}
.herocheck li{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;color:rgba(255,255,255,.9);list-style:none}
.herocheck i{flex:0 0 18px;width:18px;height:18px;border-radius:50%;background:var(--gold);position:relative;margin-top:2px}
.herocheck i::after{content:"";position:absolute;left:6px;top:4px;width:4px;height:8px;border:solid var(--navy-deep);border-width:0 2px 2px 0;transform:rotate(45deg)}
.hero-rating{display:flex;align-items:center;gap:12px;margin-top:26px;font-size:.83rem;color:rgba(255,255,255,.72)}
.sterren{color:var(--gold);letter-spacing:2px;font-size:.95rem}
/* zwevende productcollage */
.collage{position:relative;width:100%;height:430px}
.hero-i .collage img.heroshot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:106%;max-width:none;height:auto;object-fit:contain;filter:drop-shadow(0 26px 40px rgba(0,0,0,.42))}
.collage .blob{position:absolute;inset:10% 4%;border-radius:50%;background:radial-gradient(closest-side,rgba(231,183,38,.22),transparent 72%);filter:blur(12px);z-index:1}
/* uitgelicht */
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.fcard{background:#fff;border:1px solid var(--navy-08);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.fcard:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--navy-15)}
.fcard .fim{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--blue-wash)}
.fcard .fim img{max-width:82%;max-height:82%;object-fit:contain;mix-blend-mode:multiply}
.fcard .badge{position:absolute;left:12px;top:12px;background:var(--navy);color:#fff;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:4px 9px;border-radius:var(--r-pill)}
.fcard .fb{padding:15px 16px 17px;display:flex;flex-direction:column;flex:1}
.fcard h3{font-size:.95rem;font-weight:600;line-height:1.32;margin-bottom:4px;letter-spacing:-.015em}
.fcard .fs{font-size:.76rem;color:var(--navy-40);margin-bottom:10px}
.fcard .fp{margin-top:auto;display:flex;align-items:baseline;gap:6px}
.fcard .fp b{font-size:1.12rem;font-weight:600;color:var(--navy);letter-spacing:-.03em}
.fcard .fp span{font-size:.72rem;color:var(--navy-40)}
/* pakketten */
/* vertrouwensband */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:30px 0;border-top:1px solid var(--navy-08);border-bottom:1px solid var(--navy-08)}
.trust div{text-align:center}
.trust b{display:block;font-size:1.62rem;font-weight:600;color:var(--navy);letter-spacing:-.04em;line-height:1.2}
.trust span{font-size:.79rem;color:var(--navy-60)}
@media(max-width:940px){
  .hero-grid{grid-template-columns:1fr}.hero-i{order:-1}.collage{height:300px}
  .fgrid{grid-template-columns:1fr 1fr}
  .trust{grid-template-columns:1fr 1fr;gap:22px}
  .hero .kop-hero{font-size:2.5rem}
}
@media(max-width:560px){.fgrid{grid-template-columns:1fr}}

/* ---- specificatietabel onder de productpagina ---- */
.specs{margin-top:40px;border-top:1px solid var(--navy-08);padding-top:30px}
.specs h3{font-size:1.05rem;margin-bottom:4px;letter-spacing:-.02em}
.specs .subt{font-size:.82rem;color:var(--navy-40);margin-bottom:18px;max-width:620px}
.spectab{width:100%;border-collapse:collapse;font-size:.87rem}
.spectab tr{border-bottom:1px solid var(--navy-08)}
.spectab tr:last-child{border-bottom:0}
.spectab th{text-align:left;font-weight:500;color:var(--navy-60);padding:11px 16px 11px 0;width:34%;vertical-align:top}
.spectab td{padding:11px 0;color:var(--navy-deep);vertical-align:top}
.matpil{display:inline-flex;align-items:center;gap:7px;background:var(--blue-wash);border:1px solid var(--navy-08);border-radius:var(--r-pill);padding:4px 12px;font-size:.8rem;margin:0 6px 6px 0}
.matpil.eco{background:#EEF7EF;border-color:#CFE6D3;color:#1F6B36}
.matpil i{width:7px;height:7px;border-radius:50%;background:var(--navy-40);flex:0 0 7px}
.matpil.eco i{background:#2E9B51}
@media(max-width:620px){.spectab th{width:46%;font-size:.82rem}.spectab td{font-size:.84rem}}

/* ---- vergrootglas: productfoto's groot bekijken en inzoomen ---- */
.lb{position:fixed;inset:0;z-index:200;background:rgba(2,43,69,.94);display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .22s var(--ease)}
.lb.open{display:flex;opacity:1}
.lbwrap{position:relative;width:min(92vw,1100px);height:min(84vh,900px);overflow:hidden;cursor:zoom-in;touch-action:none}
.lbwrap.in{cursor:grab}.lbwrap.in.sleep{cursor:grabbing}
.lbwrap img{position:absolute;left:50%;top:50%;max-width:100%;max-height:100%;transform-origin:center center;transform:translate(-50%,-50%);user-select:none;-webkit-user-drag:none;transition:transform .16s ease-out}
.lbwrap.sleep img{transition:none}
.lbx{position:absolute;top:18px;right:20px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;z-index:3}
.lbx:hover{background:rgba(255,255,255,.18)}
.lbnav{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font-size:1.7rem;line-height:1;cursor:pointer;z-index:3}
.lbnav:hover{background:rgba(255,255,255,.18)}
.lbnav.prev{left:22px}.lbnav.next{right:22px}
.lbbar{position:absolute;left:0;right:0;bottom:20px;display:flex;gap:18px;align-items:center;justify-content:center;color:rgba(255,255,255,.72);font-size:.78rem;z-index:3;flex-wrap:wrap;padding:0 18px;text-align:center}
.lbzoom{display:flex;gap:8px}
.lbzoom button{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font-size:1rem;cursor:pointer}
.lbzoom button:hover{background:rgba(255,255,255,.18)}
.gal .frame{cursor:zoom-in}
.vergroot{display:inline-flex;align-items:center;gap:6px;position:absolute;right:12px;bottom:12px;z-index:4;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.92);border:1px solid var(--navy-08);border-radius:var(--r-pill);padding:6px 12px;font-size:.74rem;font-weight:600;color:var(--navy);pointer-events:none}
@media(max-width:620px){.lbnav{width:40px;height:40px;font-size:1.3rem}.lbnav.prev{left:8px}.lbnav.next{right:8px}.lbwrap{width:96vw;height:70vh}}

.wissel{display:inline-flex;border:1px solid var(--navy-15);border-radius:var(--r-pill);overflow:hidden;background:#fff}
.wissel button{border:0;background:transparent;font:inherit;font-size:.76rem;font-weight:600;color:var(--navy-60);padding:7px 14px;cursor:pointer;transition:all .2s var(--ease)}
.wissel button.on{background:var(--navy);color:#fff}
.wissel button:not(.on):hover{background:var(--navy-08)}

/* ---- offertepaneel ---- */
.bag header{align-items:flex-start}
.bagsub{font-size:.74rem;color:var(--navy-40);margin-top:3px}
.bagrow{display:flex;gap:13px;padding:16px 0;border-bottom:1px solid var(--navy-08);position:relative}
.bagrow .rij2{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.bagrow .qty{display:inline-flex;align-items:center;border:1px solid var(--navy-15);border-radius:var(--r-pill);overflow:hidden;background:#fff}
.bagrow .qty button{width:26px;height:26px;border:0;background:transparent;font:inherit;font-size:.95rem;line-height:1;color:var(--navy);cursor:pointer}
.bagrow .qty button:hover:not(:disabled){background:var(--navy-08)}
.bagrow .qty button:disabled{opacity:.3;cursor:default}
.bagrow .qty span{min-width:42px;text-align:center;font-size:.79rem;font-weight:600;color:var(--navy)}
.bagrow .lijn{margin-left:auto;text-align:right}
.bagrow .lijn b{display:block;font-size:.92rem;font-weight:600;color:var(--navy);letter-spacing:-.02em}
.bagrow .lijn small{font-size:.7rem;color:var(--navy-40)}
.bagrow .kop{display:flex;gap:8px;align-items:flex-start}
.bagrow .art{font-size:.68rem;color:var(--navy-40);letter-spacing:.05em;text-transform:uppercase;margin-bottom:2px}
.bagrow .merk{display:inline-flex;align-items:center;gap:5px;font-size:.68rem;font-weight:600;color:#1F6B36;background:#EEF7EF;border:1px solid #CFE6D3;border-radius:var(--r-pill);padding:2px 8px;margin-top:6px}
.baginfo{background:var(--gold-tint);border:1px solid #F0E2B4;border-radius:var(--r-sm);padding:11px 13px;font-size:.76rem;color:#7A5C00;line-height:1.55;margin:14px 0 2px}
.bagklaar{text-align:center;padding:34px 18px}
.bagklaar .vink{width:58px;height:58px;border-radius:50%;background:#EEF7EF;border:1px solid #CFE6D3;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.bagklaar .vink::after{content:"";width:13px;height:24px;border:solid #2E9B51;border-width:0 3px 3px 0;transform:rotate(45deg);margin-top:-6px}
.bagklaar h4{font-size:1.1rem;margin-bottom:8px;letter-spacing:-.02em}
.bagklaar p{font-size:.87rem;color:var(--navy-60);line-height:1.6;max-width:300px;margin:0 auto 18px}

/* ---- eigen model: keuzeblok ---- */
.eigrij{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
@media(max-width:620px){.eigrij{grid-template-columns:1fr}}
.eigveld label{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--navy-40);font-weight:600;margin-bottom:6px}
.eigveld select{width:100%;padding:9px 11px;font:inherit;font-size:.84rem;border:1px solid var(--navy-15);border-radius:var(--r-sm);background:#fff;color:var(--navy-deep)}
.eigveld select:focus{outline:none;border-color:var(--navy)}
.eigmon{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:.74rem;color:var(--navy-60)}
.eigmon i{width:20px;height:20px;border-radius:5px;border:1px solid var(--navy-15);flex:0 0 20px}
.leertabs{display:inline-flex;border:1px solid var(--navy-15);border-radius:var(--r-pill);overflow:hidden;background:#fff;margin-bottom:9px}
.leertabs button{border:0;background:transparent;font:inherit;font-size:.74rem;font-weight:600;color:var(--navy-60);padding:7px 15px;cursor:pointer}
.leertabs button.on{background:var(--navy);color:#fff}
.leergrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:7px}
.leersw{aspect-ratio:1;border-radius:8px;border:2px solid var(--navy-08);cursor:pointer;padding:0;box-shadow:inset 0 -6px 10px rgba(0,0,0,.18)}
.leersw:hover{border-color:var(--navy-40)}
.leersw.on{border-color:var(--navy);box-shadow:0 0 0 3px rgba(5,64,102,.14),inset 0 -6px 10px rgba(0,0,0,.18)}
.eiglogo{display:grid;gap:10px;margin-top:12px}
.eiglogo .mlogo{margin-top:0}
.mlogo{margin-top:12px;padding:12px 13px;border:1px solid var(--navy-15);border-radius:var(--r-sm);background:#fff}
.mlogo small{display:block;margin-top:7px;font-size:.73rem;color:var(--navy-60);line-height:1.5}
.mlogorij{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mlogorij input[type=file]{font:inherit;font-size:.78rem;color:var(--navy-60);max-width:100%}
.mlogovb{width:38px;height:38px;border:1px solid var(--navy-15);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;background:#fff}
.mlogovb img{max-width:30px;max-height:30px}
.mlogowis{border:0;background:transparent;font:inherit;font-size:.74rem;color:var(--navy-60);text-decoration:underline;cursor:pointer;padding:0}
.metrij{display:flex;gap:7px;flex-wrap:wrap}
.metsw{width:42px;height:42px;border-radius:9px;border:2px solid var(--navy-08);cursor:pointer;padding:0;position:relative;overflow:hidden}
.metsw.on{border-color:var(--navy);box-shadow:0 0 0 3px rgba(5,64,102,.12)}
.metsw span{position:absolute;inset:0}
.stikrij{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.stikrij input[type=color]{width:46px;height:38px;padding:0;border:1px solid var(--navy-15);border-radius:var(--r-sm);background:#fff;cursor:pointer}
.stikrij input[type=text]{width:106px;padding:9px 10px;font:inherit;font-size:.82rem;border:1px solid var(--navy-15);border-radius:var(--r-sm);text-transform:uppercase}
.stiksnel{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.stiksnel button{width:26px;height:26px;border-radius:50%;border:2px solid var(--navy-08);cursor:pointer;padding:0}
.stiksnel button.on{border-color:var(--navy)}
.opties{display:grid;gap:9px}
.opt2{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border:1px solid var(--navy-15);border-radius:var(--r-sm);cursor:pointer;background:#fff;transition:all .2s var(--ease)}
.opt2:hover{border-color:var(--navy-40)}
.opt2.on{border-color:var(--navy);background:var(--blue-wash)}
.opt2 input{margin-top:2px;accent-color:var(--navy);width:16px;height:16px;flex:0 0 16px}
.opt2 b{display:block;font-size:.85rem;font-weight:600;color:var(--navy-deep)}
.opt2 small{display:block;font-size:.74rem;color:var(--navy-60);line-height:1.45}
.eigtip{font-size:.75rem;color:var(--navy-60);background:var(--blue-wash);border:1px solid var(--navy-08);border-radius:var(--r-sm);padding:10px 12px;line-height:1.55;margin-top:12px}
.zijknop{display:inline-flex;border:1px solid var(--navy-15);border-radius:var(--r-pill);overflow:hidden;background:#fff;margin-top:10px}
.zijknop button{border:0;background:transparent;font:inherit;font-size:.76rem;font-weight:600;color:var(--navy-60);padding:7px 15px;cursor:pointer}
.zijknop button.on{background:var(--navy);color:#fff}
/* --- kaart-CTA --- */
.card .cta{margin-top:11px;font-size:.78rem;color:var(--navy);font-weight:600;opacity:0;transition:opacity .18s}
.card:hover .cta{opacity:1}
.hide{display:none!important}
@media(max-width:940px){
  .cols3,.cols4,.cols2,.row2{grid-template-columns:1fr;gap:26px}
  .sect{padding:52px 0}.band{padding:34px 26px}
}
@media(max-width:1180px){ .hdr-tel{display:none} }
@media(max-width:1024px){ nav.main{gap:19px;font-size:.82rem} }
@media(max-width:940px){
  .layout,.pdp{grid-template-columns:1fr}.filters{display:none}
  .mgrid{grid-template-columns:1fr}h1{font-size:2.7rem}h2{font-size:2rem}
  header .wrap.hdr-nav{overflow-x:auto;scrollbar-width:none;height:44px;padding-left:18px;padding-right:18px}
  header .wrap.hdr-nav::-webkit-scrollbar{display:none}
  nav.main{gap:20px;font-size:.85rem}
  :root{--hdr-h:108px}
  .wrap{padding:0 18px}
  .zoekwrap{display:block;flex:1 1 auto;max-width:none}
  footer .cols{grid-template-columns:1fr 1fr;gap:30px}
}
@media(max-width:620px){
  footer .cols{grid-template-columns:1fr;gap:26px}
  .hdr-actions .mand{padding:9px 12px;font-size:.75rem}
  .mark{font-size:1.2rem}
  .topbar .wrap{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;gap:20px;scrollbar-width:none;padding:8px 18px}
  .topbar .wrap::-webkit-scrollbar{display:none}
  .topbar span{white-space:nowrap;flex:0 0 auto}
  header .wrap.hdr-top{flex-wrap:wrap;height:auto;padding-top:11px;padding-bottom:11px;gap:12px}
  .zoekwrap{order:3;flex:1 0 100%;max-width:none}
  .hdr-actions{gap:8px}
  :root{--hdr-h:152px}
  .hero{padding:40px 0 52px}
  .hero .kop-hero{font-size:2.15rem}
  .trust{grid-template-columns:1fr 1fr;gap:18px}
  .trust b{font-size:1.4rem}
}

/* ---- blok dat in de HTML staat voor zoekmachines zonder javascript ---- */
.vooraf{max-width:1180px;margin:0 auto;padding:40px 24px;color:var(--navy-deep)}

.vooraf img{max-width:420px;width:100%;height:auto;display:block;margin:18px 0}
.vooraf table{border-collapse:collapse;margin:14px 0;font-size:.9rem}
.vooraf th,.vooraf td{border:1px solid var(--navy-15);padding:6px 12px;text-align:left}
.vooraf caption{text-align:left;font-weight:600;padding-bottom:6px}
.vooraf ul{margin:14px 0 0 18px;line-height:1.7}
.vooraf .crumb{margin-bottom:18px;font-size:.85rem;color:var(--navy-60)}


/* ---- paginakoppen: opmaak hangt aan de klasse, niet aan h1 of h2, zodat
       elke pagina precies één h1 in de code heeft ---- */
.kop-cat{font-size:2.85rem;font-weight:500;letter-spacing:-.042em;line-height:1.1}
.kop-sub{font-size:2.1rem;font-weight:500;letter-spacing:-.042em;line-height:1.1;margin-bottom:16px}
.kop-post{font-size:2.3rem;font-weight:500;letter-spacing:-.042em;line-height:1.1;margin-bottom:16px}
@media(max-width:820px){.kop-cat{font-size:2rem}.kop-sub,.kop-post{font-size:1.8rem}}

/* ==========================================================================
   OFFERTEPAGINA en BEDANKPAGINA
   ========================================================================== */
.offlay{display:grid;grid-template-columns:1fr 340px;gap:44px;align-items:start}
@media(max-width:900px){.offlay{grid-template-columns:1fr;gap:28px}}

.offform{background:#fff;border:1px solid var(--navy-08);border-radius:var(--r-lg);padding:28px}
.vrij{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:620px){.vrij{grid-template-columns:1fr}}
.vveld{margin-bottom:16px}
.vveld label{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--navy-40);font-weight:600;margin-bottom:6px}
.vveld label i{color:var(--gold);font-style:normal}
.vveld input[type=text],.vveld input[type=email],.vveld input[type=tel],
.vveld input[type=date],.vveld textarea{width:100%;padding:11px 13px;font:inherit;font-size:.92rem;
  border:1px solid var(--navy-15);border-radius:var(--r-sm);background:#fff;color:var(--navy-deep)}
.vveld input:focus,.vveld textarea:focus{outline:none;border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(5,64,102,.10)}
.vveld textarea{resize:vertical;line-height:1.5}
.vveld input[type=file]{font:inherit;font-size:.86rem;color:var(--navy-60);width:100%}
.vveld small{display:block;margin-top:6px;font-size:.76rem;color:var(--navy-60);line-height:1.5}
.vveld.mis input,.vveld.mis textarea{border-color:#c0392b;background:#fffafa}
.vfout{display:block;margin-top:6px;font-size:.78rem;color:#c0392b;font-weight:500}
.vmelding{background:#fff6f5;border:1px solid #f0c4be;border-left:3px solid #c0392b;
  border-radius:var(--r-sm);padding:13px 16px;margin-bottom:20px;font-size:.9rem;line-height:1.55}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.offmand{background:var(--blue-wash);border:1px solid var(--navy-08);border-radius:var(--r-md);
  padding:18px 20px;margin-bottom:24px}
.offmand h4{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--navy-40);
  font-weight:600;margin-bottom:12px}
.offmand-r{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
  border-bottom:1px solid var(--navy-08);font-size:.88rem}
.offmand-r:last-of-type{border-bottom:0}
.offmand-r span{color:var(--navy-60);font-size:.8rem;display:block}
.offmand-tot{display:flex;align-items:baseline;gap:8px;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--navy-15);font-size:.88rem}
.offmand-tot b{font-size:1.05rem;color:var(--navy)}
.offmand-tot small{color:var(--navy-40);font-size:.75rem}

.offzij{display:grid;gap:18px;position:sticky;top:150px}
@media(max-width:900px){.offzij{position:static}}
.offkaart{background:#fff;border:1px solid var(--navy-08);border-radius:var(--r-lg);padding:22px 24px}
.offkaart h4{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--navy-40);
  font-weight:600;margin-bottom:14px}
.offkaart p{font-size:.88rem;color:var(--navy-60);line-height:1.6}
.offlijst{list-style:none;display:grid;gap:14px}
.offlijst li b{display:block;font-size:.9rem;color:var(--navy-deep);font-weight:600;margin-bottom:2px}
.offlijst li span{font-size:.82rem;color:var(--navy-60);line-height:1.5}

.bedankt{max-width:660px;margin:0 auto;text-align:center;padding:30px 0 20px}
.bedankt-vink{width:64px;height:64px;border-radius:50%;background:var(--blue-wash);color:var(--navy);
  display:flex;align-items:center;justify-content:center;margin:0 auto 22px}
.bedankt-lead{font-size:1.05rem;color:var(--navy-60);line-height:1.65;margin:14px auto 30px;max-width:540px}
.bedankt-stappen{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:left;margin-bottom:26px}
@media(max-width:700px){.bedankt-stappen{grid-template-columns:1fr}}
.bedankt-stappen div{background:#fff;border:1px solid var(--navy-08);border-radius:var(--r-md);padding:18px}
.bedankt-stappen b{display:block;font-size:.88rem;margin-bottom:5px;color:var(--navy-deep)}
.bedankt-stappen span{font-size:.82rem;color:var(--navy-60);line-height:1.55}
.bedankt-knoppen{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px}

/* ==========================================================================
   Landingspagina's (/aflevergeschenken/ en /bedrijfsmerchandise/)
   ========================================================================== */
.lphero{display:grid;grid-template-columns:1fr .9fr;gap:52px;align-items:start}
.lphero .lead{margin-top:14px;max-width:46ch}
.lpbewijs{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:16px}
.lpbewijs li{display:grid;gap:2px;padding-left:26px;position:relative}
.lpbewijs li:before{content:"";position:absolute;left:0;top:7px;width:12px;height:12px;border-radius:50%;
  background:var(--gold)}
.lpbewijs b{font-weight:600;letter-spacing:-.02em}
.lpbewijs span{color:var(--navy-60)}
.lpform-kaart{background:#fff;border:1px solid var(--navy-08);border-radius:var(--r-lg);padding:28px;box-shadow:var(--sh-md)}
.lpform-kaart h2{font-size:1.32rem;letter-spacing:-.03em;margin-bottom:4px}
.lpform-kaart.breed{max-width:780px;margin:0 auto}
.lpform .vrij{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lpform .vveld{margin-bottom:14px}
.lpform button{width:100%;justify-content:center}
.lpgrid{grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.lpgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.lpgrid{grid-template-columns:1fr}}
.lpvragen{display:grid;gap:12px;max-width:820px}
.lpvragen details{border:1px solid var(--navy-08);border-radius:var(--r-md);background:#fff}
.lpvragen summary{cursor:pointer;padding:18px 22px;font-weight:600;letter-spacing:-.02em;list-style:none}
.lpvragen summary::-webkit-details-marker{display:none}
.lpvragen summary:after{content:"+";float:right;color:var(--navy-40);font-weight:400}
.lpvragen details[open] summary:after{content:"–"}
.lpvragen details p{padding:0 22px 20px;color:var(--navy-60);max-width:70ch}
.lpreview{margin:0;padding:24px;border-radius:var(--r-md);background:#fff;border:1px solid var(--navy-08)}
.lpreview p{font-size:1.02rem}
.lpreview cite{display:block;margin-top:14px;font-style:normal;color:var(--navy-60);font-size:.92rem}
.lplogos{display:flex;flex-wrap:wrap;gap:38px;align-items:center;justify-content:center;opacity:.75}
.lplogos img{height:34px;width:auto;filter:grayscale(1)}
@media(max-width:900px){
  .lphero{grid-template-columns:1fr;gap:34px}
  .lpform .vrij{grid-template-columns:1fr}
}