:root {
  --bg:#f3f6f0;--bg2:#e6ede0;--surface:#fff;
  --pri:#1c3d22;--pri2:#2d6335;--acc:#5faa2e;
  --txt:#0e1e10;--muted:#4a5e46;--border:#c8dab8;
  --shadow:rgba(28,61,34,.13);
  --heroBg:linear-gradient(140deg,#0a200e 0%,#1c4a22 45%,#3a7a30 80%,#68b038 100%);
  --tr:.55s cubic-bezier(.4,0,.2,1);
}
.R{--bg:#eef6fc;--bg2:#d8edf8;--surface:#fff;--pri:#094868;--pri2:#0c6d9e;--acc:#22b4e0;--txt:#061828;--muted:#2e5f7a;--border:#9ecfe8;--shadow:rgba(9,72,104,.13);--heroBg:linear-gradient(140deg,#021428 0%,#073d60 45%,#0a6890 80%,#18b0d8 100%);}
/* Schilderen: levendige kleurenmix — paars/roze hero zoals voordien */
.S{--bg:#faf8f5;--bg2:#f0ebf8;--surface:#fff;--pri:#3a006a;--pri2:#6a00c0;--acc:#e0207a;--txt:#1a0030;--muted:#6a3080;--border:#d0a0e0;--shadow:rgba(58,0,106,.13);--heroBg:linear-gradient(140deg,#1a0060 0%,#6a00c0 25%,#e0207a 55%,#f0a020 100%);}
.B{--bg:#f2ede4;--bg2:#e6dcc8;--surface:#fff;--pri:#3a2408;--pri2:#68400e;--acc:#c09040;--txt:#221408;--muted:#6a5038;--border:#ccb080;--shadow:rgba(58,36,8,.13);--heroBg:linear-gradient(140deg,#160a02 0%,#3e1c06 35%,#6e3e10 65%,#b08030 100%);}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--bg);color:var(--txt);transition:background var(--tr),color var(--tr);overflow-x:hidden;}

/* NAV */
#nav{position:fixed;top:0;left:0;right:0;z-index:300;height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 4%;gap:8px;background:rgba(243,246,240,.95);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);transition:background var(--tr),border-color var(--tr);overflow:visible;}
.S #nav{background:rgba(250,248,245,.96);}
.nav-logo{display:flex;align-items:center;gap:11px;cursor:pointer;flex-shrink:0;padding-left:96px;}
.logo-mark{position:absolute;top:4px;left:4%;width:86px;height:86px;z-index:500;filter:drop-shadow(0 8px 24px rgba(0,0,0,.28)) drop-shadow(0 2px 6px rgba(0,0,0,.15));}
.logo-mark svg{width:100%;height:100%;}
.logo-name{font-size:1.15rem;font-weight:800;letter-spacing:-.5px;color:#111;line-height:1.1;white-space:nowrap;}
.logo-sub{font-size:.6rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#777;}
.nav-cats{display:flex;gap:3px;flex:1;justify-content:center;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.nav-cats::-webkit-scrollbar{display:none;}
.ncat{border:none;background:none;padding:6px 10px;border-radius:50px;font-family:'Plus Jakarta Sans',sans-serif;font-size:.74rem;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;transition:all .22s;}
.ncat:hover,.ncat.on{background:var(--pri);color:#fff;}
.ncat.on{font-weight:700;}
.nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}

/* ── MOBIEL NAV: 2 rijen zodat categorieën goed zichtbaar zijn ── */
@media(max-width:640px){
  #nav{
    height:auto;
    flex-wrap:wrap;
    padding:0;
    gap:0;
  }
  .nav-logo{padding:10px 14px;flex:1;order:1;}
  .nav-right{padding:10px 14px;order:2;flex-shrink:0;}
  .nav-cats{
    order:3;
    width:100%;
    flex:none;
    padding:6px 14px 10px;
    justify-content:flex-start;
    gap:6px;
    border-top:1px solid var(--border);
    background:rgba(243,246,240,.98);
  }
  .logo-mark{top:3px;left:14px;width:56px;height:56px;}
  .nav-logo{padding-left:72px;min-height:62px;}
  .logo-name{font-size:.95rem;}
  .logo-sub{display:none;}
  /* flex-shrink:0 = knoppen krimpen NIET → overflow-x scroll werkt */
  .ncat{font-size:.76rem;padding:7px 13px;background:var(--bg2);color:var(--pri);flex-shrink:0;}
  .ncat.on{background:var(--pri);color:#fff;}
  .nav-offerte{padding:8px 13px;font-size:.75rem;}
  .nav-cart-btn{padding:7px 11px;font-size:.73rem;}
  /* Extra ruimte rechts zodat laatste knop niet aan de rand kleeft */
  .nav-cats::after{content:'';display:block;width:14px;flex-shrink:0;}
}
/* Zeer kleine schermen: knoppen kleiner zodat alle 4 zichtbaar zijn */
@media(max-width:430px){
  .ncat{font-size:.69rem;padding:5px 8px;}
}
/* Pagina's en breadcrumb meeschuiven met hogere nav op mobiel */
@media(max-width:640px){
  .pg.show{padding-top:112px;}
  #bc{top:112px;padding-left:80px;}
}
.nav-cart-btn{position:relative;border:2px solid var(--border);background:var(--surface);color:var(--pri);padding:7px 15px;border-radius:50px;font-family:'Plus Jakarta Sans',sans-serif;font-size:.78rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:all .22s;display:none;align-items:center;gap:6px;}
.nav-cart-btn:hover{border-color:var(--pri);background:var(--bg2);}
.nav-cart-btn.visible{display:flex;}
.cart-badge{background:var(--acc);color:#fff;border-radius:50%;min-width:18px;height:18px;font-size:.65rem;display:inline-flex;align-items:center;justify-content:center;font-weight:800;padding:0 3px;}
.nav-offerte{border:none;background:var(--pri);color:#fff;padding:9px 18px;border-radius:50px;font-family:'Plus Jakarta Sans',sans-serif;font-size:.8rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:background var(--tr),filter .2s,transform .2s;}
.nav-offerte:hover{filter:brightness(1.15);transform:translateY(-1px);}

/* Breadcrumb */
#bc{display:none;position:fixed;top:62px;left:0;right:0;z-index:299;height:34px;align-items:center;gap:6px;padding:0 4% 0 calc(4% + 100px);background:var(--bg2);border-bottom:1px solid var(--border);font-size:.76rem;color:var(--muted);transition:background var(--tr),border-color var(--tr);}
#bc.on{display:flex;}
#bc button{background:none;border:none;color:var(--acc);font-weight:700;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;font-size:.76rem;}
#bc .sep{opacity:.4;}

/* PAGE SYSTEM */
.pg{position:absolute;top:0;left:0;right:0;height:0;overflow:hidden;visibility:hidden;opacity:0;pointer-events:none;background:var(--bg);transition:background var(--tr),opacity .35s ease;}
.pg.show{position:relative;height:auto;overflow:visible;min-height:100vh;padding-top:62px;visibility:visible;opacity:1;pointer-events:auto;animation:pgIn .4s ease both;}
@keyframes pgIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* HOME */
.home-hero{min-height:calc(100vh - 62px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 5% 50px;position:relative;overflow:hidden;}
.home-hero-bg{position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse 55% 55% at 15% 65%,rgba(95,170,46,.09),transparent),radial-gradient(ellipse 40% 50% at 85% 25%,rgba(28,61,34,.07),transparent);}
.home-pin{position:relative;z-index:1;display:inline-flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border);border-radius:50px;padding:7px 18px;font-size:.8rem;font-weight:700;letter-spacing:.5px;color:#1a1a1a;margin-bottom:24px;box-shadow:0 2px 10px var(--shadow);}
.home-title{position:relative;z-index:1;font-size:clamp(2.2rem,5.5vw,4.8rem);font-weight:800;line-height:1.1;letter-spacing:-1.5px;color:var(--pri);margin-bottom:16px;}
.home-title .w-tuin{color:#2d7a2d;}
.home-title .w-reinig{color:#0a82c8;}
.home-title .w-meer{
  color:#111;
  font-family:'Georgia','Times New Roman',serif;
  font-style:italic;
  font-weight:900;
  display:inline-block;
  animation:meerPop 2.8s ease-in-out infinite;
  letter-spacing:-2px;
  transform-origin:center bottom;
  position:relative;
}
@keyframes meerPop{
  0%   {transform:scale(1) rotate(-1deg);text-shadow:none;}
  15%  {transform:scale(1.18) rotate(2deg);text-shadow:4px 4px 0 rgba(95,170,46,.3),-2px -2px 0 rgba(10,130,200,.2);}
  30%  {transform:scale(0.96) rotate(-1.5deg);text-shadow:none;}
  45%  {transform:scale(1.12) rotate(1.5deg);text-shadow:3px 3px 0 rgba(200,80,20,.25);}
  60%  {transform:scale(1) rotate(0deg);text-shadow:none;}
  75%  {transform:scale(1.06) rotate(-1deg) skewX(-3deg);text-shadow:-3px 2px 0 rgba(95,170,46,.2);}
  100% {transform:scale(1) rotate(-1deg);text-shadow:none;}
}
.home-sub{position:relative;z-index:1;font-size:1rem;font-weight:400;color:var(--muted);max-width:440px;line-height:1.65;margin-bottom:48px;}
.hcats{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:940px;width:100%;}
@media(max-width:760px){.hcats{grid-template-columns:1fr 1fr;}}
@media(max-width:420px){.hcats{grid-template-columns:1fr 1fr;}}
.hcat{border-radius:18px;overflow:hidden;cursor:pointer;aspect-ratio:.75;position:relative;box-shadow:0 8px 28px rgba(0,0,0,.14);transition:transform .3s,box-shadow .3s;}
.hcat:hover{transform:translateY(-7px) scale(1.025);box-shadow:0 20px 44px rgba(0,0,0,.2);}
.hcat-bg{position:absolute;inset:0;transition:transform .5s;}
.hcat:hover .hcat-bg{transform:scale(1.07);}
.tuin-bg{background:linear-gradient(160deg,#0c2a10 0%,#1e5c20 40%,#3a8c30 70%,#68b83e 100%);}
.reinig-bg{background:linear-gradient(160deg,#041a30 0%,#0a5278 40%,#0d88b8 70%,#28c4e8 100%);}
.schild-bg{background:linear-gradient(160deg,#1a0060 0%,#6a00c0 25%,#e0207a 55%,#f0a020 100%);}
.binnen-bg{background:linear-gradient(160deg,#200a02 0%,#4a2010 35%,#8a5020 65%,#c8a060 100%);}
.hcat-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.72) 0%,transparent 60%);}
.hcat-body{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:20px 18px;}
.hcat-name{font-size:1.25rem;font-weight:800;color:#fff;margin-bottom:3px;letter-spacing:-.3px;}
.hcat-desc{font-size:.72rem;color:rgba(255,255,255,.75);line-height:1.4;}

/* Logo gecentreerd in de kaart */
.hcat-center-logo{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  z-index:1;pointer-events:none;
  padding-bottom:60px; /* ruimte voor tekst onderaan */
}
.hcat-logo-img{
  width:clamp(96px,27%,135px);
  height:clamp(96px,27%,135px);
  object-fit:contain;
  filter:drop-shadow(0 4px 18px rgba(0,0,0,.5));
  transition:transform .4s ease;
}
.hcat:hover .hcat-logo-img{transform:scale(1.08);}
.hcat-tag{position:absolute;top:12px;right:12px;background:rgba(255,255,255,.15);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.25);border-radius:50px;padding:3px 10px;font-size:.67rem;font-weight:700;color:#fff;}
.hcat-arr{position:absolute;bottom:18px;right:16px;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:.82rem;transition:background .2s,transform .2s;}
.hcat:hover .hcat-arr{background:rgba(255,255,255,.3);transform:translateX(3px);}

/* werkgebied */
#werkgebied{padding:88px 5%;background:var(--bg2);transition:background var(--tr);}
.wg-inner{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
@media(max-width:720px){.wg-inner{grid-template-columns:1fr;}}
.wg-label{font-size:.7rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--acc);margin-bottom:10px;}
.wg-title{font-size:clamp(1.7rem,3.2vw,2.6rem);font-weight:800;color:var(--pri);line-height:1.15;margin-bottom:14px;letter-spacing:-.5px;}
.wg-text{font-size:.92rem;color:var(--muted);line-height:1.7;margin-bottom:24px;}
.wg-stats{display:flex;gap:26px;}
.wg-stat-n{font-size:1.9rem;font-weight:800;color:var(--pri);letter-spacing:-.5px;line-height:1;}
.wg-stat-l{font-size:.72rem;color:var(--muted);font-weight:500;}
#map{height:340px;border-radius:18px;overflow:hidden;box-shadow:0 14px 40px var(--shadow);border:2px solid var(--border);}

/* CONTACT STRIP */
.contact-strip{background:var(--pri);padding:14px 5%;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;transition:background var(--tr);}
.contact-strip-txt{color:rgba(255,255,255,.9);font-size:.95rem;font-weight:600;}
.contact-strip-txt span{color:var(--acc);}
.contact-strip-links{display:flex;gap:10px;flex-wrap:wrap;}
.cs-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:50px;font-family:'Plus Jakarta Sans',sans-serif;font-size:.82rem;font-weight:700;cursor:pointer;text-decoration:none;transition:all .2s;border:none;}
.cs-call{background:#fff;color:var(--pri);}
.cs-call:hover{background:var(--bg2);}
.cs-wa{background:#25D366;color:#fff;}
.cs-wa:hover{filter:brightness(1.1);}
.cs-sms{background:rgba(255,255,255,.15);color:#fff;border:1.5px solid rgba(255,255,255,.3);}
.cs-sms:hover{background:rgba(255,255,255,.25);}

/* CATEGORY PAGE */
.cat-hero{min-height:46vh;display:flex;align-items:center;justify-content:center;padding:58px 5% 46px;position:relative;overflow:hidden;text-align:center;}
.cat-hero-bg{position:absolute;inset:0;background:var(--heroBg);transition:background var(--tr);}
.cat-hero-dim{position:absolute;inset:0;background:rgba(0,0,0,.38);}
.cat-hero-body{position:relative;z-index:2;max-width:660px;text-align:center;}
.che-sub{margin-left:auto;margin-right:auto;}
.che-label{font-size:.7rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--acc);margin-bottom:12px;}
.che-title{font-size:clamp(2rem,5vw,4rem);font-weight:800;color:#fff;line-height:1.06;margin-bottom:12px;letter-spacing:-1px;}
.che-title em{font-style:italic;opacity:.85;}
.che-sub{font-size:.96rem;color:rgba(255,255,255,.8);line-height:1.6;max-width:480px;}
.svc-section{padding:68px 5%;background:var(--bg);transition:background var(--tr);}
.sec-label{font-size:.7rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--acc);margin-bottom:8px;}
.sec-title{font-size:clamp(1.5rem,2.8vw,2.3rem);font-weight:800;color:var(--pri);letter-spacing:-.5px;margin-bottom:36px;transition:color var(--tr);}
.svc-section .sec-label,.svc-section .sec-title{text-align:center;}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;max-width:1040px;margin:0 auto;}
.svc-card{background:var(--surface);border:1.5px solid var(--border);border-radius:16px;padding:24px;cursor:pointer;position:relative;overflow:hidden;transition:transform .28s,box-shadow .28s,background var(--tr),border-color var(--tr);box-shadow:0 2px 10px var(--shadow);}
.svc-card::after{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acc);transform:scaleY(0);transform-origin:bottom;transition:transform .28s;}
.svc-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px var(--shadow);}
.svc-card:hover::after{transform:scaleY(1);}
/* Schilder cards: kleurrijke linker balk per card via data attr */
.S .svc-card:nth-child(1)::after{background:#e83070;}
.S .svc-card:nth-child(2)::after{background:#3070e8;}
.S .svc-card:nth-child(3)::after{background:#30c860;}
.S .svc-card:nth-child(4)::after{background:#e8a020;}
.S .svc-card:nth-child(5)::after{background:#c020e8;}
.S .svc-card:nth-child(6)::after{background:#20c8e8;}
/* Schilder card price tag kleur */
.S .svc-price{background:#f5eeff;color:#3a006a;border-color:#d0a0e0;}
.svc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.svc-ico{font-size:1.8rem;}
.svc-price{background:var(--bg2);color:var(--pri);border:1px solid var(--border);padding:3px 11px;border-radius:50px;font-size:.74rem;font-weight:700;transition:all var(--tr);}
.svc-card h3{font-size:.95rem;font-weight:700;color:var(--txt);margin-bottom:6px;transition:color var(--tr);}
.svc-card p{font-size:.83rem;color:var(--muted);line-height:1.55;transition:color var(--tr);}
.svc-cta{display:flex;align-items:center;gap:5px;margin-top:12px;font-size:.78rem;font-weight:700;color:var(--pri2);}
.svc-cta::after{content:"→";transition:transform .2s;}
.svc-card:hover .svc-cta::after{transform:translateX(4px);}

.price-section{padding:68px 5%;background:var(--bg2);transition:background var(--tr);}
.ptable{max-width:700px;background:var(--surface);border-radius:16px;overflow:hidden;border:1.5px solid var(--border);box-shadow:0 6px 28px var(--shadow);}
.pr{display:flex;align-items:center;gap:14px;padding:17px 24px;border-bottom:1px solid var(--border);transition:background .18s;}
.pr:last-child{border-bottom:none;}
.pr:hover{background:var(--bg2);}
.pr-ico{font-size:1.5rem;flex-shrink:0;}
.pr-info{flex:1;}
.pr-info strong{display:block;font-weight:600;font-size:.9rem;color:var(--txt);transition:color var(--tr);}
.pr-info span{font-size:.76rem;color:var(--muted);transition:color var(--tr);}
.pr-val{font-size:1.1rem;font-weight:800;color:var(--pri);white-space:nowrap;transition:color var(--tr);}

/* DETAIL PAGE */
.det-hero{padding:62px 5% 54px;background:var(--bg2);border-bottom:1.5px solid var(--border);transition:background var(--tr),border-color var(--tr);}
.det-inner{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;}
@media(max-width:720px){.det-inner{grid-template-columns:1fr;}}
.det-ico{font-size:4rem;margin-bottom:14px;}
.det-label{font-size:.7rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--acc);margin-bottom:8px;}
.det-title{font-size:clamp(1.8rem,4vw,3rem);font-weight:800;color:var(--pri);line-height:1.1;margin-bottom:12px;letter-spacing:-.5px;transition:color var(--tr);}
.det-desc{font-size:.92rem;color:var(--muted);line-height:1.7;margin-bottom:20px;transition:color var(--tr);}
.det-bens{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:26px;}
.det-bens li{display:flex;align-items:center;gap:9px;font-size:.86rem;color:var(--txt);transition:color var(--tr);}
.det-bens li::before{content:"✓";width:19px;height:19px;flex-shrink:0;background:var(--acc);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.62rem;font-weight:900;}
.det-btns{display:flex;gap:10px;flex-wrap:wrap;}
.det-visual{border-radius:18px;aspect-ratio:4/3;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:7rem;position:relative;box-shadow:0 16px 44px var(--shadow);}
.det-vis-bg{position:absolute;inset:0;}
.det-vis-em{position:relative;z-index:1;}

/* QUOTE */
#quote-section{padding:68px 5%;background:var(--bg);transition:background var(--tr);}
.q-wrap{max-width:760px;margin:0 auto;}
#quote-section .sec-label,#quote-section .sec-title{text-align:center;}
.q-progress{display:flex;align-items:center;gap:0;margin-bottom:32px;position:relative;}
.q-progress::before{content:'';position:absolute;top:14px;left:14px;right:14px;height:2px;background:var(--border);z-index:0;}
.q-step{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1;position:relative;z-index:1;cursor:pointer;}
.q-step-dot{width:28px;height:28px;border-radius:50%;border:2px solid var(--border);background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;color:var(--muted);transition:all .3s;}
.q-step.active .q-step-dot{border-color:var(--pri);background:var(--pri);color:#fff;}
.q-step.done .q-step-dot{border-color:var(--acc);background:var(--acc);color:#fff;}
.q-step-lbl{font-size:.65rem;font-weight:600;color:var(--muted);text-align:center;transition:color var(--tr);}
.q-step.active .q-step-lbl{color:var(--pri);font-weight:700;}
.q-step.done .q-step-lbl{color:var(--acc);}
.q-panel{display:none;animation:qIn .3s ease both;}
.q-panel.on{display:block;}
@keyframes qIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.q-q{font-size:1.05rem;font-weight:700;color:var(--txt);margin-bottom:6px;text-align:center;transition:color var(--tr);}
.q-hint{font-size:.8rem;color:var(--muted);margin-bottom:18px;text-align:center;transition:color var(--tr);}
.q-opts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:22px;}
.q-opts.wide .q-opt{flex:0 1 180px;}
.q-opt{flex:0 1 138px;border:2px solid var(--border);background:var(--surface);border-radius:12px;padding:14px 12px;text-align:center;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;transition:all .2s;position:relative;}
.q-opt:hover{border-color:var(--acc);}
.q-opt.sel{border-color:var(--pri);background:var(--bg2);}
.q-opt.sel::after{content:'✓';position:absolute;top:6px;right:8px;font-size:.65rem;font-weight:900;color:var(--pri);}
.q-opt-i{font-size:1.6rem;margin-bottom:6px;}
.q-opt-l{font-size:.8rem;font-weight:700;color:var(--txt);transition:color var(--tr);}
.q-opt-s{font-size:.7rem;color:var(--muted);margin-top:2px;transition:color var(--tr);}
/* Free text area in quote */
.q-textarea-wrap{margin-bottom:22px;}
.q-textarea-wrap textarea{width:100%;font-family:'Plus Jakarta Sans',sans-serif;font-size:.9rem;padding:12px 14px;border:2px solid var(--border);border-radius:10px;background:var(--surface);color:var(--txt);outline:none;resize:vertical;min-height:80px;transition:border-color .2s,background var(--tr),color var(--tr);}
.q-textarea-wrap textarea:focus{border-color:var(--pri);}
.q-skip-hint{font-size:.76rem;color:var(--muted);margin-top:6px;transition:color var(--tr);}
.q-nav{display:flex;gap:10px;justify-content:flex-end;margin-top:8px;flex-wrap:wrap;}
.btn-back{background:none;border:2px solid var(--border);padding:10px 22px;border-radius:50px;font-family:'Plus Jakarta Sans',sans-serif;font-size:.86rem;font-weight:600;color:var(--muted);cursor:pointer;transition:all .2s;}
.btn-back:hover{border-color:var(--pri);color:var(--pri);}
.btn-next{background:var(--pri);border:none;padding:10px 26px;border-radius:50px;font-family:'Plus Jakarta Sans',sans-serif;font-size:.86rem;font-weight:700;color:#fff;cursor:pointer;transition:all .22s;}
.btn-next:hover{filter:brightness(1.12);transform:translateY(-1px);}
.btn-acc{background:var(--acc);border:none;padding:10px 26px;border-radius:50px;font-family:'Plus Jakarta Sans',sans-serif;font-size:.86rem;font-weight:700;color:#fff;cursor:pointer;transition:all .22s;}
.btn-acc:hover{filter:brightness(1.1);transform:translateY(-1px);}

/* CART BAR */
#cart-bar{position:fixed;bottom:0;left:0;right:0;z-index:400;background:var(--surface);border-top:2px solid var(--border);padding:14px 5%;display:none;align-items:center;gap:14px;box-shadow:0 -8px 32px var(--shadow);transition:background var(--tr),border-color var(--tr);}
#cart-bar.on{display:flex;}
body.cart-visible .pg.show{padding-bottom:72px;}
.cart-bar-items,#cart-bar-items{flex:1;display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.cart-chip{background:var(--bg2);border:1.5px solid var(--border);border-radius:50px;padding:5px 12px;font-size:.76rem;font-weight:600;color:var(--txt);display:flex;align-items:center;gap:6px;transition:all var(--tr);}
.cart-chip .rm{cursor:pointer;opacity:.5;font-size:.8rem;}
.cart-chip .rm:hover{opacity:1;color:red;}
.cart-bar-lbl{font-size:.78rem;font-weight:600;color:var(--muted);white-space:nowrap;}
.cart-bar-btns{display:flex;gap:8px;flex-shrink:0;}
.btn-more{background:none;border:2px solid var(--pri);color:var(--pri);padding:8px 16px;border-radius:50px;font-family:'Plus Jakarta Sans',sans-serif;font-size:.78rem;font-weight:700;cursor:pointer;transition:all .2s;}
.btn-more:hover{background:var(--bg2);}
.btn-submit-all{background:var(--pri);border:none;color:#fff;padding:8px 20px;border-radius:50px;font-family:'Plus Jakarta Sans',sans-serif;font-size:.78rem;font-weight:700;cursor:pointer;transition:all .2s;}
.btn-submit-all:hover{filter:brightness(1.1);}

/* CART PAGE */
#pg-cart{background:var(--bg);}
.cart-page-inner{max-width:860px;margin:0 auto;padding:68px 5%;}
.cart-page-inner h2{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;color:var(--pri);letter-spacing:-.5px;margin-bottom:6px;transition:color var(--tr);}
.cart-page-inner .cart-sub{font-size:.9rem;color:var(--muted);margin-bottom:36px;transition:color var(--tr);}
.cart-items-list{display:flex;flex-direction:column;gap:14px;margin-bottom:36px;}
.cart-item-card{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;padding:18px 20px;transition:border-color var(--tr),background var(--tr);}
.ci-header{display:flex;align-items:flex-start;gap:14px;margin-bottom:10px;}
.ci-ico{font-size:2rem;flex-shrink:0;}
.ci-info{flex:1;}
.ci-name{font-weight:700;font-size:.95rem;color:var(--txt);margin-bottom:4px;transition:color var(--tr);}
.ci-detail{font-size:.78rem;color:var(--muted);line-height:1.55;transition:color var(--tr);}
.ci-rm{background:none;border:1.5px solid var(--border);color:var(--muted);border-radius:50%;width:28px;height:28px;cursor:pointer;font-size:.85rem;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;}
.ci-rm:hover{border-color:red;color:red;}
.ci-extra{width:100%;font-family:'Plus Jakarta Sans',sans-serif;font-size:.85rem;padding:9px 12px;border:1.5px solid var(--border);border-radius:8px;background:var(--bg2);color:var(--txt);outline:none;resize:vertical;min-height:64px;margin-top:4px;transition:border-color .2s,background var(--tr),color var(--tr);}
.ci-extra:focus{border-color:var(--pri);background:var(--surface);}
.ci-extra-lbl{font-size:.75rem;color:var(--muted);margin-bottom:4px;font-weight:600;transition:color var(--tr);}
.cart-summary-note{background:var(--bg2);border:1.5px solid var(--border);border-radius:12px;padding:14px 18px;font-size:.82rem;color:var(--muted);margin-bottom:22px;line-height:1.55;transition:all var(--tr);}
.contact-form{background:var(--surface);border:1.5px solid var(--border);border-radius:18px;padding:28px;transition:all var(--tr);}
.contact-form h3{font-size:1.1rem;font-weight:700;color:var(--txt);margin-bottom:20px;transition:color var(--tr);}
.q-fields{display:flex;flex-direction:column;gap:11px;margin-bottom:22px;}
.q-field{display:flex;flex-direction:column;gap:5px;}
.q-field label{font-size:.8rem;font-weight:600;color:var(--txt);transition:color var(--tr);}
.q-field input,.q-field textarea{font-family:'Plus Jakarta Sans',sans-serif;font-size:.9rem;padding:10px 13px;border:2px solid var(--border);border-radius:9px;background:var(--surface);color:var(--txt);outline:none;transition:border-color .2s,background var(--tr),color var(--tr);}
.q-field input:focus,.q-field textarea:focus{border-color:var(--pri);}
.q-field textarea{min-height:88px;resize:vertical;}
.q-row2{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
/* Contact links in form */
.form-contact-btns{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;padding:14px;background:var(--bg2);border-radius:10px;border:1px solid var(--border);}
.form-contact-note{font-size:.76rem;color:var(--muted);width:100%;margin-bottom:6px;}
.q-success{text-align:center;padding:52px 20px;}
.q-success-ico{font-size:3.2rem;margin-bottom:14px;}
.q-success h3{font-size:1.7rem;font-weight:800;color:var(--pri);margin-bottom:10px;transition:color var(--tr);}
.q-success p{color:var(--muted);font-size:.92rem;line-height:1.6;transition:color var(--tr);}

/* OFFERTE WIZARD OVERLAY */
#offerte-overlay{display:none;position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:20px;}
#offerte-overlay.on{display:flex;}
.ow-box{background:var(--surface);border-radius:20px;padding:36px 32px;max-width:600px;width:100%;max-height:85vh;overflow-y:auto;position:relative;box-shadow:0 24px 64px rgba(0,0,0,.3);transition:background var(--tr);}
.ow-close{position:absolute;top:16px;right:16px;background:var(--bg2);border:none;border-radius:50%;width:32px;height:32px;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:all .2s;}
.ow-close:hover{background:var(--border);}
.ow-title{font-size:1.3rem;font-weight:800;color:var(--pri);margin-bottom:6px;letter-spacing:-.3px;transition:color var(--tr);}
.ow-sub{font-size:.82rem;color:var(--muted);margin-bottom:24px;transition:color var(--tr);}
.ow-cats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px;}
.ow-cat{border:2px solid var(--border);background:var(--surface);border-radius:14px;padding:16px 14px;cursor:pointer;text-align:center;transition:all .2s;}
.ow-cat:hover{border-color:var(--acc);}
.ow-cat.sel{border-color:var(--pri);background:var(--bg2);}
.ow-cat-i{font-size:2rem;margin-bottom:6px;}
.ow-cat-l{font-size:.9rem;font-weight:700;color:var(--txt);transition:color var(--tr);}
.ow-svcs{display:grid;grid-template-columns:1fr;gap:8px;}
.ow-svc{border:1.5px solid var(--border);background:var(--surface);border-radius:10px;padding:12px 16px;cursor:pointer;display:flex;align-items:center;gap:12px;transition:all .2s;}
.ow-svc:hover{border-color:var(--pri);background:var(--bg2);}
.ow-svc-ico{font-size:1.4rem;}
.ow-svc-name{font-size:.88rem;font-weight:700;color:var(--txt);transition:color var(--tr);}
.ow-svc-desc{font-size:.73rem;color:var(--muted);transition:color var(--tr);}
.ow-back{background:none;border:none;color:var(--acc);font-weight:700;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;font-size:.8rem;margin-bottom:14px;display:flex;align-items:center;gap:4px;}

/* BUTTONS */
.btn-pri{display:inline-flex;align-items:center;gap:7px;background:var(--pri);color:#fff;border:none;padding:12px 26px;border-radius:50px;font-family:'Plus Jakarta Sans',sans-serif;font-size:.86rem;font-weight:700;cursor:pointer;box-shadow:0 4px 16px var(--shadow);transition:all .22s,background var(--tr);}
.btn-pri:hover{filter:brightness(1.1);transform:translateY(-2px);}
.btn-out{display:inline-flex;align-items:center;gap:7px;background:transparent;color:var(--pri);border:2px solid var(--pri);padding:10px 24px;border-radius:50px;font-family:'Plus Jakarta Sans',sans-serif;font-size:.86rem;font-weight:700;cursor:pointer;transition:all .22s,color var(--tr),border-color var(--tr);}
.btn-out:hover{background:var(--pri);color:#fff;}

/* Footer */
footer{background:var(--pri);color:rgba(255,255,255,.7);padding:20px 5%;display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;transition:background var(--tr);}
@media(max-width:580px){footer{grid-template-columns:1fr;}}
.ft-brand{font-size:1.2rem;font-weight:800;color:#fff;margin-bottom:4px;letter-spacing:-.3px;}
.ft-sub{font-size:.72rem;opacity:.5;}
.ft-btw{font-size:.68rem;opacity:.4;margin-top:4px;}
.ft-col h4{font-size:.68rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--acc);margin-bottom:10px;}
.ft-col p,.ft-col a{font-size:.83rem;line-height:1.85;color:rgba(255,255,255,.6);text-decoration:none;display:block;}
.ft-col a:hover{color:#fff;}

.rv{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease;}
.rv.in{opacity:1;transform:none;}

#toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--pri);color:#fff;padding:10px 22px;border-radius:50px;font-size:.82rem;font-weight:700;z-index:500;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;white-space:nowrap;}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* OVER ONS SECTIE */
.over-ons-section{padding:90px 5%;background:var(--bg);transition:background var(--tr);}
.over-ons-inner{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:1fr 1.5fr;gap:64px;align-items:center;}
@media(max-width:760px){
  .over-ons-inner{grid-template-columns:1fr;}
  .over-foto{max-width:320px;margin:0 auto;}
  .over-content{text-align:center;}
  .over-chips{justify-content:center;}
  .over-btns{justify-content:center;}
}
.over-foto{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:3/4;box-shadow:0 20px 60px rgba(0,0,0,.18);}
.over-foto img{width:100%;height:100%;object-fit:cover;object-position:top center;}
.over-foto-badge{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);background:#fff;border-radius:50px;padding:9px 20px;font-size:.8rem;font-weight:700;color:#1a1a1a;box-shadow:0 4px 16px rgba(0,0,0,.18);white-space:nowrap;display:flex;align-items:center;gap:8px;}
.over-content{}
.over-eyebrow{font-size:.68rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--acc);margin-bottom:10px;transition:color var(--tr);}
.over-title{font-size:clamp(2rem,4vw,3.2rem);font-weight:800;color:var(--pri);line-height:1.08;letter-spacing:-1px;margin-bottom:18px;transition:color var(--tr);}
.over-title em{font-style:italic;font-family:'Georgia',serif;}
.over-text{font-size:.93rem;color:var(--muted);line-height:1.78;margin-bottom:14px;transition:color var(--tr);}
.over-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px;}
.over-chip{background:var(--bg2);border:1.5px solid var(--border);border-radius:50px;padding:5px 14px;font-size:.78rem;font-weight:600;color:var(--pri);transition:all var(--tr);}
.over-btns{display:flex;gap:10px;flex-wrap:wrap;}

/* ──────────────────────────────────────────────────────────
   LOGO ANIMATIE
────────────────────────────────────────────────────────── */
@keyframes logoPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.04);}}

/* ──────────────────────────────────────────────────────────
   OVER ONS – HOME SECTIE
────────────────────────────────────────────────────────── */
.over-ons-section{padding:90px 5%;background:var(--bg);transition:background var(--tr);}
.over-ons-section .over-ons-inner{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:1fr 1.6fr;gap:60px;align-items:start;}
@media(max-width:720px){.over-ons-section .over-ons-inner{grid-template-columns:1fr;}}
.over-eyebrow{font-size:.7rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--acc);margin-bottom:10px;}

/* ──────────────────────────────────────────────────────────
   HOME – OVER ONS TEASER
────────────────────────────────────────────────────────── */
.home-over{padding:80px 5%;background:var(--bg2);transition:background var(--tr);}
.ho-inner{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:300px 1fr;gap:64px;align-items:center;}
@media(max-width:820px){.ho-inner{grid-template-columns:1fr;gap:36px;}}
.ho-foto{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/5;box-shadow:0 16px 48px rgba(0,0,0,.16);}
.ho-foto img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .6s;}
.ho-foto:hover img{transform:scale(1.04);}
.ho-body{}
.ho-eyebrow{font-size:.68rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--acc);margin-bottom:10px;transition:color var(--tr);}
.ho-naam{font-size:clamp(1.7rem,3vw,2.6rem);font-weight:800;color:var(--pri);line-height:1.08;letter-spacing:-1px;margin-bottom:6px;transition:color var(--tr);}
.ho-func{font-size:.82rem;color:var(--muted);margin-bottom:20px;}
.ho-txt{font-size:.93rem;color:var(--muted);line-height:1.75;margin-bottom:22px;transition:color var(--tr);}
.ho-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px;}
.ho-chip{background:var(--bg);border:1.5px solid var(--border);border-radius:50px;padding:5px 14px;font-size:.76rem;font-weight:600;color:var(--pri);transition:all var(--tr);}
@media(max-width:820px){
  .ho-foto{aspect-ratio:3/4;max-height:420px;}
  .ho-foto img{object-position:top center;}
  .home-over{padding:40px 5%;}
  .ho-body{text-align:center;}
  .ho-chips{justify-content:center;}
}
.over-title{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;color:var(--pri);line-height:1.1;margin-bottom:20px;letter-spacing:-.5px;}

/* ══════════════════════════════════════════════════════════
   FOTO GALERIJ  –  paarcarousel (1+2, 3+4 …)
   ══════════════════════════════════════════════════════════ */
.gallery-section{padding:60px 5% 80px;background:var(--bg);transition:background var(--tr);}
.gallery-inner{max-width:1100px;margin:0 auto;}
.gallery-section .sec-label,.gallery-section .sec-title{text-align:center;}
.voor-na-section .sec-label,.voor-na-section .sec-title{text-align:center;}
#cat-gallery{} /* wordt gevuld via JS */

/* Buitenste carousel-wrapper */
.gal-car-outer{
  border-radius:22px;
  overflow:hidden;
  position:relative;
  box-shadow:0 12px 50px var(--shadow);
  background:var(--surface);
  border:1.5px solid var(--border);
}

/* Slide-track: alle paren naast elkaar, verschuiven met transform */
.gal-car-track{
  display:flex;
  transition:transform .55s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.gal-car-slide{flex:0 0 100%;width:100%;}

/* Fotopaar: altijd 2 naast elkaar, volledige breedte */
.gal-car-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
}
@media(max-width:540px){
  .gal-car-pair{grid-template-columns:1fr;}
}

.gal-car-photo{
  position:relative;overflow:hidden;cursor:pointer;
}
.gal-car-photo img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
  transition:transform .5s ease;
}
.gal-car-photo:hover img{transform:scale(1.05);}

/* Hover overlay */
.gal-car-photo::after{
  content:"🔍";
  position:absolute;inset:0;
  background:rgba(0,0,0,.3);
  display:flex;align-items:center;justify-content:center;
  font-size:2.8rem;
  opacity:0;
  transition:opacity .3s;
}
.gal-car-photo:hover::after{opacity:1;}

/* Lege helft als oneven foto */
.gal-car-empty{background:var(--bg2);}

/* ── Overlaid pijlen & teller (gedeeld door gal + vn carousel) ── */
.car-over-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:10;
  background:rgba(255,255,255,.88);backdrop-filter:blur(6px);
  border:none;color:var(--pri);
  width:44px;height:44px;border-radius:50%;
  font-size:1.7rem;line-height:1;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 14px rgba(0,0,0,.22);
  transition:background .18s,transform .18s;
}
.car-over-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.1);}
.car-over-prev{left:12px;}
.car-over-next{right:12px;}
.car-over-count{
  position:absolute;bottom:12px;left:14px;z-index:10;
  background:rgba(0,0,0,.52);backdrop-filter:blur(4px);
  color:#fff;font-size:.76rem;font-weight:700;
  padding:4px 12px;border-radius:50px;
  pointer-events:none;
}

/* Circulaire timer-ring rechtsonder */
.car-timer-ring{
  position:absolute;bottom:12px;right:12px;left:auto;z-index:10;
  width:38px;height:38px;
  transform:rotate(-90deg);
  filter:drop-shadow(0 1px 5px rgba(0,0,0,.45));
  pointer-events:none;
}
.car-timer-bg{fill:none;stroke:rgba(255,255,255,.22);stroke-width:3.5;}
.car-timer-fg{
  fill:none;stroke:#fff;stroke-width:3.5;
  stroke-dasharray:100;stroke-dashoffset:0;
  stroke-linecap:round;
}
@keyframes timerDrain{from{stroke-dashoffset:0}to{stroke-dashoffset:100}}
.car-timer-fg.draining{animation:timerDrain 5s linear forwards;}

/* ══════════════════════════════════════════════════════════
   LIGHTBOX  –  echt volledig scherm
   ══════════════════════════════════════════════════════════ */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes lbImgIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}

#lightbox{
  position:fixed;
  inset:0;
  z-index:9999;          /* boven alles */
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  animation:fadeIn .2s ease;
}
#lightbox img{
  width:100vw;
  height:100vh;
  object-fit:contain;
  display:block;
  animation:lbImgIn .25s ease both;
  user-select:none;
}

/* Sluit-knop */
.lightbox-close{
  position:fixed;top:16px;right:16px;
  z-index:10001;
  background:rgba(255,255,255,.15);backdrop-filter:blur(8px);
  border:1.5px solid rgba(255,255,255,.25);
  color:#fff;font-size:1.4rem;
  width:48px;height:48px;border-radius:50%;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.lightbox-close:hover{background:rgba(255,255,255,.3);}

/* Pijlen */
.lightbox-arrow{
  position:fixed;top:50%;
  z-index:10001;
  transform:translateY(-50%);
  background:rgba(255,255,255,.15);backdrop-filter:blur(8px);
  border:1.5px solid rgba(255,255,255,.25);
  color:#fff;font-size:2.2rem;
  width:60px;height:60px;border-radius:50%;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s,transform .2s;
  line-height:1;
}
.lightbox-arrow:hover{background:rgba(255,255,255,.3);transform:translateY(-50%) scale(1.08);}
.lightbox-prev{left:16px;}
.lightbox-next{right:16px;}

/* Teller */
.lightbox-counter{
  position:fixed;bottom:20px;left:50%;
  z-index:10001;
  transform:translateX(-50%);
  background:rgba(255,255,255,.15);backdrop-filter:blur(8px);
  border:1.5px solid rgba(255,255,255,.2);
  color:#fff;font-size:.85rem;font-weight:700;
  padding:7px 22px;border-radius:50px;
  white-space:nowrap;
}
/* Vloeiende image swap in lightbox (geen flicker) */
.lb-main-img{transition:opacity .18s ease;}
.lb-main-img.lb-fading{opacity:0;}

@media(max-width:500px){
  .lightbox-arrow{width:46px;height:46px;font-size:1.8rem;}
  .lightbox-prev{left:8px;}
  .lightbox-next{right:8px;}
}

/* ══════════════════════════════════════════════════════════
   VIDEO SECTIE
   ══════════════════════════════════════════════════════════ */
.video-section{padding:60px 5% 80px;background:var(--bg1);transition:background var(--tr);}
.video-section .sec-label,.video-section .sec-title{text-align:center;}
.video-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;}
.video-wrap{border-radius:20px;overflow:hidden;box-shadow:0 8px 40px var(--shadow);background:#000;aspect-ratio:9/16;position:relative;}
.cat-video{width:100%;height:100%;object-fit:cover;display:block;}
@media(max-width:600px){.video-grid{grid-template-columns:1fr;max-width:480px;}}

/* ══════════════════════════════════════════════════════════
   VOOR / NA CAROUSEL  –  1 paar tegelijk, 5s auto-switch
   ══════════════════════════════════════════════════════════ */
.voor-na-section{padding:60px 5% 80px;background:var(--bg2);transition:background var(--tr);}
.voor-na-grid{max-width:1100px;margin:0 auto;}

/* Buitenste container */
.vn-car-outer{
  border-radius:22px;overflow:hidden;
  position:relative;
  box-shadow:0 12px 50px var(--shadow);
  background:var(--surface);
  border:1.5px solid var(--border);
  transition:box-shadow .3s,transform .3s;
}
.vn-car-outer:hover{transform:translateY(-4px);box-shadow:0 24px 64px var(--shadow);}

/* Slide-track: alle paren naast elkaar, verschuiven met transform */
.vn-car-track{
  display:flex;
  transition:transform .55s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.vn-car-slide{flex:0 0 100%;width:100%;cursor:pointer;}

/* Fotopaar (2 foto's naast elkaar, volledige breedte) */
.vn-car-pair{
  display:grid;
  grid-template-columns:1fr 5px 1fr;
}
.vn-car-photo{position:relative;overflow:hidden;}
.vn-car-photo img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  display:block;
  transition:transform .6s ease;
}
.vn-car-outer:hover .vn-car-photo img{transform:scale(1.04);}
.vn-car-divider{background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:.9rem;color:var(--muted);font-weight:700;}

/* Tags: "VOOR" / "NA" — hoekbadges, groot en duidelijk */
.vn-tag{
  position:absolute;top:0;left:0;
  background:rgba(0,0,0,.72);
  color:#fff;font-size:.8rem;font-weight:800;
  padding:7px 16px;
  border-radius:0 0 14px 0;
  letter-spacing:1px;text-transform:uppercase;
  pointer-events:none;
}
.vn-tag.na{
  left:auto;right:0;
  background:var(--acc);
  border-radius:0 0 0 14px;
}

/* Minimale voettekst: alleen label als die er is */
.vn-car-footer{background:var(--surface);border-top:1px solid var(--border);}
.vn-car-label-txt{
  padding:11px 18px;
  font-size:.88rem;font-weight:600;color:var(--txt);
  text-align:center;
}

/* (progress bar verwijderd op verzoek) */
@keyframes vnFill{from{width:0%}to{width:100%}}

/* Mobiel: foto's onder elkaar */
@media(max-width:540px){
  .vn-car-pair{grid-template-columns:1fr;grid-template-rows:1fr 5px 1fr;}
  .vn-car-divider{height:5px;width:100%;}
  .vn-car-photo img{aspect-ratio:4/3;}
}

/* ──────────────────────────────────────────────────────────
   CART PAGINA (offerte overzicht)
────────────────────────────────────────────────────────── */
.cart-item{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;padding:18px 20px;margin-bottom:14px;transition:background var(--tr),border-color var(--tr);}
.cart-item-head{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.cart-item-ico{font-size:1.8rem;}
.cart-item-name{font-size:1rem;font-weight:700;color:var(--txt);}
.cart-item-cat{font-size:.75rem;color:var(--muted);margin-top:2px;}
.cart-item-rm{margin-left:auto;background:none;border:1.5px solid var(--border);border-radius:50%;width:28px;height:28px;cursor:pointer;color:var(--muted);font-size:.8rem;display:flex;align-items:center;justify-content:center;transition:all .2s;}
.cart-item-rm:hover{background:var(--bg2);color:var(--txt);}
.cart-item-answers{display:flex;flex-direction:column;gap:5px;}
.cart-answer{font-size:.78rem;color:var(--muted);line-height:1.5;}
.cart-ak{font-weight:600;color:var(--txt);text-transform:capitalize;}

::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}

.before-after {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 naast elkaar */
  gap: 12px;
  max-width: 600px; /* maakt het kleiner */
  margin: 0 auto; /* centreert */
}

.before-after img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 12px;
}


/* ── VOOR/NA LIGHTBOX ── */
#vn-lightbox{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.95);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:14px;padding:60px 20px 30px;
  animation:fadeIn .2s ease;
}
.vn-lb{}
.vn-lb-inner{
  display:grid;
  grid-template-columns:1fr 40px 1fr;
  gap:0;
  width:min(96vw,1400px);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.7);
  animation:fadeIn .25s ease both;
}
@media(max-width:680px){
  .vn-lb-inner{grid-template-columns:1fr;grid-template-rows:1fr auto 1fr;}
}
.vn-lb-slide{position:relative;overflow:hidden;}
.vn-lb-slide img{width:100%;height:100%;max-height:80vh;object-fit:cover;display:block;}
.vn-lb-tag{position:absolute;top:14px;left:14px;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);color:#fff;font-size:.78rem;font-weight:700;padding:6px 14px;border-radius:50px;text-transform:uppercase;letter-spacing:.6px;}
.vn-lb-tag.na{background:var(--acc);}
.vn-lb-divider{background:var(--pri);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.2rem;font-weight:900;}
@media(max-width:680px){.vn-lb-divider{height:40px;font-size:1.4rem;}}
.vn-lb-label{color:rgba(255,255,255,.95);font-size:1rem;font-weight:700;text-align:center;letter-spacing:.2px;}
.vn-lb-counter{color:rgba(255,255,255,.5);font-size:.82rem;text-align:center;}

/* ──────────────────────────────────────────────────────────
   WINKELMANDJE PAGINA LAYOUT
────────────────────────────────────────────────────────── */
.cart-page-section{padding:72px 5% 80px;}
.cart-page-inner{
  max-width:1100px;margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:start;
}
@media(max-width:820px){.cart-page-inner{grid-template-columns:1fr;}}

.cart-left{position:sticky;top:80px;max-height:calc(100vh - 100px);overflow-y:auto;}
.cart-right{}
@media(max-width:820px){.cart-left{position:static;max-height:none;overflow-y:visible;}}

/* Cart items naast elkaar */
.cart-items-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
  gap:14px;
}

/* Extra info textarea per item */
.cart-item-extra{margin-top:12px;border-top:1px solid var(--border);padding-top:12px;}
.cart-extra-label{font-size:.75rem;font-weight:600;color:var(--muted);display:block;margin-bottom:6px;}
.cart-extra-txt{width:100%;border:1.5px solid var(--border);border-radius:10px;padding:10px 12px;font-family:'Plus Jakarta Sans',sans-serif;font-size:.82rem;color:var(--txt);background:var(--bg);resize:vertical;transition:border-color .2s;}
.cart-extra-txt:focus{outline:none;border-color:var(--acc);}


/* Contactformulier */
.cart-form-title{font-size:1.5rem;font-weight:800;color:var(--pri);margin-bottom:6px;letter-spacing:-.4px;}
.cart-form-sub{font-size:.85rem;color:var(--muted);margin-bottom:24px;line-height:1.6;}
.cart-form{display:flex;flex-direction:column;gap:16px;}
.cf-row{display:flex;flex-direction:column;gap:6px;}
.cf-label{font-size:.78rem;font-weight:700;color:var(--txt);}
.cf-input{border:1.5px solid var(--border);border-radius:10px;padding:11px 14px;font-family:'Plus Jakarta Sans',sans-serif;font-size:.88rem;color:var(--txt);background:var(--bg);transition:border-color .2s,box-shadow .2s;}
.cf-input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(95,170,46,.12);}
.cf-input.cf-invalid{border-color:#e53e3e;box-shadow:0 0 0 3px rgba(229,62,62,.12);}
.cf-error{font-size:.75rem;color:#e53e3e;font-weight:600;display:block;min-height:.9em;}
.cf-textarea{resize:vertical;min-height:80px;}
.cf-actions{margin-top:8px;display:flex;flex-direction:column;gap:10px;}
.cf-submit{width:100%;padding:14px;font-size:1rem;justify-content:center;}
.cf-note{font-size:.72rem;color:var(--muted);margin-top:2px;text-align:center;}

/* Done screen na indienen offerte */
.q-done{text-align:center;padding:40px 20px;}
.q-done-icon{font-size:3rem;margin-bottom:16px;}
.q-done-title{font-size:1.4rem;font-weight:800;color:var(--pri);margin-bottom:8px;}
.q-done-sub{font-size:.9rem;color:var(--muted);margin-bottom:28px;}
.q-done-btns{display:flex;flex-direction:column;gap:12px;max-width:320px;margin:0 auto;}
.q-done-btns .btn-pri,.q-done-btns .btn-out{width:100%;justify-content:center;}

/* ──────────────────────────────────────────────────────────
   FOOTER – netter
────────────────────────────────────────────────────────── */
footer{background:var(--pri);padding:20px 5%;display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;transition:background var(--tr);}
@media(max-width:600px){footer{grid-template-columns:1fr;gap:16px;}}
.ft-brand{font-size:1.4rem;font-weight:800;color:#fff;letter-spacing:-.3px;}
.ft-sub{font-size:.72rem;color:rgba(255,255,255,.5);font-weight:500;letter-spacing:1px;text-transform:uppercase;margin-top:3px;}
.ft-col h4{font-size:.7rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:12px;}
.ft-col a{display:block;color:rgba(255,255,255,.8);text-decoration:none;font-size:.85rem;margin-bottom:8px;transition:color .2s;}
.ft-col a:hover{color:#fff;}