/* Configurator G&P - adapted from offerte2026GP23561 (Pinky 2026-06-28) */
  :root{
    --staal-900:#10151c;--staal-800:#1b2530;--staal-700:#28333f;--staal-600:#3a4754;
    --lijn:#dfe3e8;--papier:#f4f5f3;--wit:#ffffff;--inkt:#1b2530;
    --grijs:#5b6672;--grijs-licht:#8a94a0;
    --blauw:#1f5fa6;--oranje:#e87a1e;--oranje-diep:#c8631a;--groen:#2e7d52;
    --schaduw:0 1px 2px rgba(16,21,28,.06),0 8px 24px rgba(16,21,28,.06);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:"Inter","Helvetica Neue",Arial,sans-serif;background:var(--papier);color:var(--inkt);line-height:1.5;-webkit-font-smoothing:antialiased;padding-bottom:130px}
  .wrap{max-width:1080px;margin:0 auto;padding:0 20px}

  /* Slot / login */
  #slot{position:fixed;inset:0;z-index:200;background:linear-gradient(160deg,var(--staal-900),var(--staal-700));display:flex;align-items:center;justify-content:center;padding:20px}
  .slot-kaart{background:var(--wit);border-radius:16px;padding:36px 32px;max-width:380px;width:100%;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.4)}
  .slot-kaart .eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--oranje);font-weight:700}
  .slot-kaart h2{font-size:24px;margin:8px 0 4px;letter-spacing:-.01em}
  .slot-kaart p{color:var(--grijs);font-size:13.5px;margin-bottom:22px}
  .slot-kaart input{width:100%;padding:13px 14px;border:1px solid var(--lijn);border-radius:9px;font-size:15px;font-family:inherit;text-align:center;letter-spacing:.05em}
  .slot-kaart input:focus{outline:3px solid rgba(232,122,30,.3);border-color:var(--oranje)}
  .slot-kaart button{width:100%;margin-top:12px;padding:13px;border:none;border-radius:9px;background:var(--oranje);color:#fff;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit}
  .slot-kaart button:hover{background:var(--oranje-diep)}
  .slot-fout{color:#c0392b;font-size:13px;margin-top:12px;min-height:18px}

  /* Kop */
  .offerte-kop{background:linear-gradient(160deg,var(--staal-900),var(--staal-700));color:#fff;position:relative;overflow:hidden}
  .kop-grid{max-width:1080px;margin:0 auto;padding:34px 20px 0;position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}
  .kop-merk{display:flex;flex-direction:column;gap:6px}
  .kop-eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--oranje);font-weight:700}
  .kop-titel{font-size:clamp(34px,6vw,58px);font-weight:800;letter-spacing:-.02em;line-height:.98}
  .kop-sub{color:#aeb8c4;font-size:14px;margin-top:4px}
  .kop-meta{text-align:right;font-size:13px;color:#c4ccd6;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:14px 18px;min-width:210px}
  .kop-meta b{color:#fff;font-weight:600}
  .kop-meta .rij{display:flex;justify-content:space-between;gap:18px;padding:3px 0}
  .held-foto{width:100%;max-width:1080px;margin:18px auto -1px;display:block;position:relative;z-index:2}
  .held-foto img{width:100%;display:block}

  /* Archief */
  #archief{display:none;background:#fff;border:1px solid var(--lijn);border-left:4px solid var(--blauw);border-radius:12px;padding:16px 18px;margin:24px 0 0;box-shadow:var(--schaduw)}
  #archief h3{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--staal-700);margin-bottom:12px}
  .arch-rij{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--lijn);font-size:14px;flex-wrap:wrap}
  .arch-rij:first-of-type{border-top:none}
  .arch-rij .a-datum{color:var(--grijs);font-size:12.5px}
  .arch-rij .a-bedrag{font-weight:700;font-variant-numeric:tabular-nums}
  .arch-rij .a-status{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:20px}
  .a-status.acc{background:#e6f4ec;color:var(--groen)}
  .a-status.overleg{background:#e7f0fa;color:var(--blauw)}
  .arch-rij button{margin-left:auto;background:none;border:1px solid var(--lijn);border-radius:8px;padding:7px 13px;font-size:13px;color:var(--blauw);cursor:pointer;font-family:inherit;font-weight:600}
  .arch-rij button:hover{border-color:var(--blauw)}

  .intro{padding:30px 0 6px}
  .intro p{color:var(--grijs);max-width:680px;font-size:15px}
  .korting-banner{display:flex;align-items:center;gap:14px;margin:16px 0 4px;background:#e9f7ef;border:1px solid #b9e2cb;border-left:4px solid var(--groen);border-radius:12px;padding:14px 18px}
  .korting-badge{flex:0 0 auto;background:var(--groen);color:#fff;font-weight:800;font-size:15px;letter-spacing:.02em;padding:6px 12px;border-radius:8px}
  .korting-tekst{color:#1d6b43;font-size:14.5px}
  .korting-tekst b{color:#155534}

  .cat-titel{margin:34px 0 14px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--staal-700);display:flex;align-items:center;gap:12px}
  .cat-titel::after{content:"";flex:1;height:1px;background:var(--lijn)}

  .kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:14px;box-shadow:var(--schaduw);margin-bottom:16px;overflow:hidden;transition:border-color .2s,box-shadow .2s}
  .kaart.actief{border-color:var(--oranje);box-shadow:0 0 0 1px var(--oranje),0 10px 30px rgba(232,122,30,.12)}
  .kaart-kop{display:flex;align-items:flex-start;gap:16px;padding:18px 20px;cursor:pointer}
  .kaart-thumb{width:84px;height:64px;flex:0 0 84px;border-radius:8px;background:var(--papier);object-fit:contain;border:1px solid var(--lijn)}
  .kaart-check{appearance:none;-webkit-appearance:none;width:24px;height:24px;flex:0 0 24px;margin-top:2px;border:2px solid var(--grijs-licht);border-radius:6px;background:var(--wit);cursor:pointer;position:relative;transition:.15s}
  .kaart-check:checked{background:var(--oranje);border-color:var(--oranje)}
  .kaart-check:checked::after{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
  .kaart-check:focus-visible{outline:3px solid rgba(31,95,166,.4);outline-offset:2px}
  .kaart-hoofd{flex:1;min-width:0}
  .kaart-naam{font-size:18px;font-weight:700;letter-spacing:-.01em}
  .kaart-vanaf{font-size:13px;color:var(--grijs);margin-top:2px}
  .kaart-vanaf b{color:var(--staal-800);font-weight:700}
  .kaart-toggle{background:none;border:none;color:var(--blauw);font-size:13px;font-weight:600;cursor:pointer;padding:6px 2px;margin-top:6px;display:inline-flex;align-items:center;gap:5px}
  .kaart-toggle .pijl{transition:transform .2s}
  .kaart.open .kaart-toggle .pijl{transform:rotate(90deg)}
  .kaart-body{display:none;padding:0 20px 20px 60px;border-top:1px solid var(--lijn)}
  .kaart.open .kaart-body{display:block;padding-top:16px}
  .body-foto{width:100%;max-width:300px;border-radius:10px;border:1px solid var(--lijn);background:#fff;margin-bottom:16px;display:block}
  .specs{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:4px 22px;margin-bottom:18px}
  .specs li{font-size:13.5px;color:var(--grijs);padding-left:16px;position:relative}
  .specs li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;background:var(--oranje);border-radius:1px}

  .opties{display:flex;flex-direction:column;gap:14px}
  .optie-blok{background:var(--papier);border:1px solid var(--lijn);border-radius:10px;padding:14px 16px}
  .optie-label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grijs);font-weight:700;margin-bottom:10px}
  .radio-rij{display:flex;align-items:center;gap:10px;padding:7px 0;cursor:pointer;font-size:14px}
  .radio-rij input{accent-color:var(--oranje);width:18px;height:18px;cursor:pointer}
  .radio-rij .prijs{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums;color:var(--staal-800)}

  /* Maten-lijst (schep) */
  .maat-lijst{display:flex;flex-direction:column;gap:8px}
  .maat-item{display:flex;align-items:center;gap:12px;background:var(--wit);border:1px solid var(--lijn);border-radius:9px;padding:10px 12px;transition:.15s}
  .maat-item.gekozen{border-color:var(--oranje);background:#fff8f1}
  .maat-check{appearance:none;-webkit-appearance:none;width:21px;height:21px;flex:0 0 21px;border:2px solid var(--grijs-licht);border-radius:5px;cursor:pointer;position:relative;transition:.15s}
  .maat-check:checked{background:var(--oranje);border-color:var(--oranje)}
  .maat-check:checked::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
  .maat-tekst{flex:1;min-width:0}
  .maat-naam{font-size:14px;font-weight:600}
  .maat-detail{font-size:12px;color:var(--grijs-licht)}
  .maat-prijs{font-weight:700;font-variant-numeric:tabular-nums;font-size:14px;white-space:nowrap}
  .maat-stepper{display:flex;align-items:center;border:1px solid var(--lijn);border-radius:8px;overflow:hidden;opacity:.4;pointer-events:none;transition:opacity .15s}
  .maat-item.gekozen .maat-stepper{opacity:1;pointer-events:auto}
  .maat-stepper button{width:32px;height:32px;border:none;background:var(--wit);font-size:18px;color:var(--staal-700);cursor:pointer}
  .maat-stepper button:hover{background:var(--papier)}
  .maat-stepper input{width:38px;height:32px;border:none;border-left:1px solid var(--lijn);border-right:1px solid var(--lijn);text-align:center;font-size:14px;font-weight:600;font-family:inherit}

  .aantal-rij{display:flex;align-items:center;gap:14px;margin-top:4px}
  .aantal-rij label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grijs);font-weight:700}
  .stepper{display:flex;align-items:center;border:1px solid var(--lijn);border-radius:8px;overflow:hidden}
  .stepper button{width:38px;height:38px;border:none;background:var(--wit);font-size:20px;color:var(--staal-700);cursor:pointer}
  .stepper button:hover{background:var(--papier)}
  .stepper input{width:46px;height:38px;border:none;border-left:1px solid var(--lijn);border-right:1px solid var(--lijn);text-align:center;font-size:15px;font-weight:600;font-family:inherit}
  .regel-subtotaal{margin-left:auto;font-size:14px;color:var(--grijs)}
  .regel-subtotaal b{color:var(--staal-900);font-size:16px;font-variant-numeric:tabular-nums}

  /* Andere aansluiting naam */
  .aansl-naam{margin-top:10px;display:none}
  .aansl-naam.open{display:block}
  .aansl-naam label{display:block;font-size:12px;font-weight:700;color:var(--grijs);margin-bottom:5px}
  .aansl-naam input{width:100%;max-width:340px;padding:10px 12px;border:1.5px solid var(--lijn);border-radius:8px;font:inherit;font-size:14px;transition:border-color .15s}
  .aansl-naam input::placeholder{color:#b8bfc7;opacity:1}
  .aansl-naam input:focus{outline:none;border-color:var(--oranje)}
  .aansl-naam input.fout{border-color:#d33;background:#fff5f5}
  .aansl-naam .hint{font-size:11.5px;color:var(--grijs-licht);margin-top:4px}

  /* Voeg toe knop */
  .voegtoe-rij{margin-top:14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .btn-voegtoe{display:inline-flex;align-items:center;gap:8px;background:var(--oranje);color:#fff;border:none;padding:12px 22px;border-radius:9px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s}
  .btn-voegtoe:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(232,122,30,.3)}
  .btn-voegtoe.klaar{background:#1d8a4e}
  .voegtoe-hint{font-size:12px;color:var(--grijs-licht)}

  /* Mand (geselecteerde artikelen) */
  .mand-sectie{margin:34px 0 10px;background:var(--wit);border:1.5px solid var(--oranje);border-radius:14px;padding:20px 22px;box-shadow:0 8px 28px rgba(16,21,28,.07)}
  .mand-sectie h2{margin:0 0 4px;font-size:18px}
  .mand-sub{font-size:12.5px;color:var(--grijs);margin:0 0 14px}
  .mand-rij{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--lijn);font-size:14px}
  .mand-rij:last-child{border-bottom:none}
  .mand-naam{flex:1;min-width:0}
  .mand-naam b{display:block}
  .mand-naam small{color:var(--grijs);font-size:12px}
  .mand-prijs{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
  .mand-x{width:30px;height:30px;border:1px solid var(--lijn);background:var(--wit);border-radius:7px;color:#c0392b;font-size:15px;font-weight:700;cursor:pointer;flex:0 0 30px;line-height:1}
  .mand-x:hover{background:#fff5f5;border-color:#c0392b}
  @media(max-width:640px){.aansl-naam input{max-width:100%}.btn-voegtoe{width:100%;justify-content:center}}

  /* Balk */
  .balk{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--staal-900);color:#fff;box-shadow:0 -4px 30px rgba(16,21,28,.25);transform:translateY(100%);transition:transform .3s cubic-bezier(.16,1,.3,1)}
  .balk.zichtbaar{transform:translateY(0)}
  .balk-grid{max-width:1080px;margin:0 auto;padding:16px 20px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
  .balk-info{flex:1;min-width:200px}
  .balk-items{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#9aa6b3}
  .balk-bedrag{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
  .balk-bedrag .ster{color:var(--oranje);font-size:15px;vertical-align:super;font-weight:600}
  .balk-btw-regel{font-size:12.5px;color:#9aa6b3;margin-top:2px}
  .balk-btw-regel b{color:#fff}
  .balk-korting{font-size:12px;color:#6fd49a;font-weight:600;margin-top:3px}
  .btw-toggle{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:10px 16px}
  .btw-toggle input{accent-color:var(--oranje);width:20px;height:20px;cursor:pointer}
  .btw-toggle .tk{font-size:13px}
  .btw-toggle .tk b{display:block;font-size:14px}
  .btw-toggle .tk span{color:#9aa6b3;font-size:11.5px}
  .btn-print{background:var(--oranje);color:#fff;border:none;border-radius:10px;padding:13px 22px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap}
  .btn-print:hover{background:var(--oranje-diep)}

  .voet-noot{padding:26px 0 10px;font-size:12px;color:var(--grijs-licht);max-width:680px}
  footer.studio{border-top:1px solid var(--lijn);margin-top:40px;padding:26px 0;text-align:center;color:var(--grijs-licht);font-size:12px}
  footer.studio a{color:var(--grijs);text-decoration:none}
  footer.studio a:hover{color:var(--oranje)}

  /* Modal */
  .modal-overlay{position:fixed;inset:0;z-index:150;background:rgba(16,21,28,.6);display:none;align-items:flex-start;justify-content:center;padding:30px 16px;overflow-y:auto}
  .modal-overlay.open{display:flex}
  .modal{background:#fff;border-radius:16px;max-width:600px;width:100%;box-shadow:0 30px 80px rgba(0,0,0,.4);overflow:hidden;margin:auto}
  .modal-kop{background:linear-gradient(160deg,var(--staal-900),var(--staal-700));color:#fff;padding:20px 24px;display:flex;justify-content:space-between;align-items:center}
  .modal-kop h2{font-size:20px}
  .modal-kop .ref{font-size:12px;color:#9aa6b3;margin-top:2px}
  .modal-sluit{background:rgba(255,255,255,.1);border:none;color:#fff;width:34px;height:34px;border-radius:8px;font-size:20px;cursor:pointer}
  .modal-body{padding:22px 24px;max-height:50vh;overflow-y:auto}
  .sum-rij{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--lijn);font-size:14px}
  .sum-rij .l{color:var(--inkt)}
  .sum-rij .l small{display:block;color:var(--grijs-licht);font-size:12px}
  .sum-rij .r{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
  .sum-totaal{display:flex;justify-content:space-between;padding:14px 0 4px;font-size:18px;font-weight:800}
  .sum-btw{display:flex;justify-content:space-between;padding:4px 0;font-size:13px;color:var(--grijs)}
  .modal-voet{padding:18px 24px 24px;border-top:1px solid var(--lijn);background:var(--papier)}
  .accept-rij{display:flex;align-items:flex-start;gap:11px;cursor:pointer;font-size:14px;margin-bottom:16px;color:var(--inkt)}
  .accept-rij input{accent-color:var(--oranje);width:20px;height:20px;margin-top:1px;flex:0 0 20px}
  .modal-knoppen{display:flex;gap:10px;flex-wrap:wrap}
  .modal-knoppen button{flex:1;min-width:150px;padding:13px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;border:none}
  .knop-pdf{background:var(--staal-800);color:#fff}
  .knop-pdf:hover{background:var(--staal-900)}
  .knop-accept{background:var(--groen);color:#fff;opacity:.45;pointer-events:none;transition:.15s}
  .knop-accept.aan{opacity:1;pointer-events:auto}
  .knop-accept:hover{filter:brightness(1.08)}
  .overleg-blok{border-top:1px dashed var(--lijn);padding-top:12px;margin-bottom:16px}
  .overleg-rij{margin-bottom:0}
  .overleg-veld{display:none;margin-top:10px}
  .overleg-veld.open{display:block}
  .overleg-veld textarea{width:100%;border:1px solid var(--lijn);border-radius:9px;padding:11px 12px;font-size:14px;font-family:inherit;resize:vertical;color:var(--inkt)}
  .overleg-veld textarea:focus{outline:3px solid rgba(31,95,166,.3);border-color:var(--blauw)}
  .knop-overleg{background:var(--blauw);color:#fff;opacity:.45;pointer-events:none;transition:.15s}
  .knop-overleg.aan{opacity:1;pointer-events:auto}
  .knop-overleg:hover{filter:brightness(1.08)}

  @media(max-width:680px){
    .specs{grid-template-columns:1fr}
    .kop-meta{text-align:left;width:100%}
    .kaart-body{padding-left:20px}
    .kaart-thumb{display:none}
    .balk-bedrag{font-size:22px}
    .btn-print{width:100%}
    .balk-info{order:1}.btw-toggle{order:2;flex:1}.btn-print{order:3}
  }
  @media print{
    body{padding-bottom:0;background:#fff}
    .balk,.kaart-toggle,.btw-toggle input,#slot,.modal-overlay,#archief{display:none!important}
    .kaart-body{display:block!important}
  }
  .oud-prijs{text-decoration:line-through;color:var(--grijs-licht);font-weight:500;font-size:.88em;margin-right:7px}
  .kaart-vanaf .oud-prijs{font-size:.95em}

/* mobile-safe */
html,body{overflow-x:hidden!important;max-width:100vw;width:100%;touch-action:pan-y;overscroll-behavior-x:none;-webkit-overflow-scrolling:touch}
img,video,svg,canvas,iframe{max-width:100%;height:auto}
@media(max-width:640px){
  *{min-width:0}
  body{width:100%!important;max-width:100vw!important;overflow-x:hidden!important}
  h1,h2,h3,.kaart-naam,.maat-naam,p,li{overflow-wrap:anywhere;word-break:break-word}
  table,pre,code{overflow-x:auto;max-width:100%}
  .kaart,.kaart-kop,.kaart-body,.opties,.optie-blok,.maat-item,.maat-lijst,.balk,.balk-grid,.modal,.modal-body{max-width:100%}
}

/* ---- top strip (site bar) ---- */
.cfg-bar{background:var(--staal-900);border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;z-index:120}
.cfg-bar-in{max-width:1080px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:16px}
.cfg-bar a.cfg-back{color:#c4ccd6;text-decoration:none;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.cfg-bar a.cfg-back:hover{color:#fff}
.cfg-bar .cfg-brand{margin-left:auto;display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;letter-spacing:.02em;font-size:15px;text-decoration:none}
.cfg-bar .cfg-brand img{height:30px;width:auto;display:block}
.cfg-lang{display:flex;gap:4px;margin-left:14px}
.cfg-lang a{font-size:12px;font-weight:700;color:#9aa6b3;text-decoration:none;padding:4px 8px;border-radius:6px;text-transform:uppercase;letter-spacing:.04em}
.cfg-lang a.on{background:var(--oranje);color:#fff}
.cfg-lang a:hover{color:#fff}

/* korting box becomes info/negotiation box - keep green styling */
.korting-badge{background:var(--blauw)}
@media(max-width:560px){.cfg-bar-in{flex-wrap:wrap}.cfg-lang{margin-left:auto}}

/* contact CTA + modal contact form */
.cfg-cta-rij{margin:10px 0 4px}
.cfg-cta-company{display:inline-flex;align-items:center;gap:8px;background:var(--oranje);color:#fff;text-decoration:none;font-weight:700;font-size:14.5px;padding:12px 22px;border-radius:10px;box-shadow:0 6px 18px rgba(232,122,30,.28);transition:transform .15s,box-shadow .15s}
.cfg-cta-company:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(232,122,30,.36)}
.cfg-form{margin-bottom:16px}
.cfg-form-h{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--grijs);margin:0 0 10px;font-weight:700}
.cfg-form-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.cfg-form input,.cfg-form textarea{flex:1;min-width:160px;width:100%;padding:11px 13px;border:1.5px solid var(--lijn);border-radius:9px;font:inherit;font-size:14px;color:var(--inkt);background:#fff}
.cfg-form textarea{margin-top:10px;resize:vertical}
.cfg-form input:focus,.cfg-form textarea:focus{outline:none;border-color:var(--oranje)}
.cfg-form-err{color:#c0392b;font-size:13px;margin-top:8px;min-height:16px;font-weight:600}