:root{--ink:#EDEBE8; --ink-soft:#B4BAB9; --ink-faint:#828E8B; --brand:#7CACA6; --brand-rich:#9AC4BD; --brand-light:#1E302E; --bg:#15201E; --surface:#1B2725; --border:#2B3735; --muted-bg:#1D2926; --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow-md: 0 12px 32px -12px rgba(0,0,0,.5); --shadow-lg: 0 24px 56px -20px rgba(0,0,0,.6); --overlay-dark: rgba(8,12,11,.68); --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-xl:24px; --font-display:'Archivo', 'Helvetica Neue', Arial, sans-serif; --font-body:'Work Sans', 'Segoe UI', Arial, sans-serif; --font-mono:'IBM Plex Mono', 'Courier New', monospace;}
body.varex-template *,body.varex-template *::before,body.varex-template *::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body.varex-template{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
body.varex-template img{max-width:100%;display:block;}
body.varex-template a{color:inherit;text-decoration:none;}
body.varex-template ul{margin:0;padding:0;list-style:none;}
body.varex-template button{font:inherit;}
body.varex-template h1,body.varex-template h2,body.varex-template h3,body.varex-template h4{font-family:var(--font-display);color:var(--ink);margin:0;text-wrap:balance;}
body.varex-template h1{font-size:56px;line-height:1.08;font-weight:700;letter-spacing:-.01em;}
body.varex-template h2{font-size:40px;line-height:1.15;font-weight:700;letter-spacing:-.008em;}
body.varex-template h3{font-size:26px;line-height:1.3;font-weight:600;}
body.varex-template h4{font-size:20px;line-height:1.4;font-weight:600;}
body.varex-template p{margin:0;}
body.varex-template .body-lg{font-size:19px;line-height:1.6;color:var(--ink-soft);}
body.varex-template .small{font-size:14px;line-height:1.5;font-weight:500;color:var(--ink-soft);}
body.varex-template .eyebrow{font-family:var(--font-mono); font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--brand); display:inline-flex; align-items:center; gap:8px;}
body.varex-template .eyebrow::before{content:""; width:18px;height:1.5px; background:var(--brand-rich); display:inline-block;}
body.varex-template .mono{font-family:var(--font-mono);}
@media (prefers-reduced-motion: reduce){body.varex-template *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}
@media (max-width:760px){body.varex-template h1{font-size:34px;line-height:1.15;}
body.varex-template h2{font-size:28px;}
body.varex-template h3{font-size:22px;}
body.varex-template{font-size:16px;}
}
body.varex-template .container{max-width:1240px; margin:0 auto; padding:0 32px;}
@media (max-width:760px){body.varex-template .container{padding:0 20px;}
}
body.varex-template .section{padding:128px 0;}
body.varex-template .section.bg-muted{background:var(--muted-bg);}
@media (max-width:760px){body.varex-template .section{padding:64px 0;}
}
body.varex-template .section-sm{padding:80px 0;}
body.varex-template .section-head{max-width:640px; margin:0 0 56px; display:flex; flex-direction:column; gap:16px;}
body.varex-template .section-head.center{margin-left:auto; margin-right:auto; text-align:center; align-items:center;}
body.varex-template .section-head-row{display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:56px;}
@media (max-width:760px){body.varex-template .section-head-row{flex-direction:column;align-items:flex-start;gap:20px;}
}
body.varex-template .btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--font-body); font-weight:600; font-size:16px; padding:16px 30px; border-radius:var(--radius-md); border:1.5px solid transparent; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease; white-space:nowrap;}
body.varex-template .btn-primary{background:var(--brand);color:#fff;}
body.varex-template .btn-primary:hover{background:var(--brand-rich);transform:translateY(-2px);box-shadow:var(--shadow-md);}
body.varex-template .btn-outline{background:transparent;border-color:currentColor;color:#fff;}
body.varex-template .btn-outline:hover{background:rgba(255,255,255,.12);transform:translateY(-2px);}
body.varex-template .btn-secondary{background:transparent;border-color:var(--brand);color:var(--brand);}
body.varex-template .btn-secondary:hover{background:var(--brand-light);transform:translateY(-2px);}
body.varex-template .link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--brand); text-underline-offset:4px;text-decoration:underline;text-decoration-color:transparent; transition:gap .18s ease, text-decoration-color .18s ease; background:none;border:none;padding:0;cursor:pointer;font-size:16px;font-family:var(--font-body);}
body.varex-template .link-arrow:hover{gap:12px;text-decoration-color:currentColor;}
body.varex-template .link-arrow svg{width:16px;height:16px;flex-shrink:0;}
body.varex-template a:focus-visible,body.varex-template button:focus-visible{outline:2px solid var(--brand);outline-offset:3px;}
@media (max-width:900px){}
body.varex-template .hero{position:relative;min-height:70vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;}
body.varex-template .hero-media{position:absolute;inset:0;background-size:cover;background-position:center;}
body.varex-template .hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(16,20,19,.25) 0%, rgba(14,18,17,.55) 55%, rgba(10,13,13,.86) 100%);}
body.varex-template .hero-content{position:relative;z-index:2;padding:96px 0 72px;display:flex;flex-direction:column;gap:28px;max-width:760px;}
body.varex-template .hero-content .eyebrow{color:#D9E4E2;}
body.varex-template .hero-content .eyebrow::before{background:#fff;}
body.varex-template .hero h1{color:#fff;}
body.varex-template .hero .body-lg{color:rgba(255,255,255,.86);max-width:600px;}
body.varex-template .hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;}
@media (max-width:760px){body.varex-template .hero{min-height:80vh;}
body.varex-template .hero-content{padding:64px 0 48px;}
}
body.varex-template .page-hero{position:relative;min-height:44vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;}
body.varex-template .page-hero-media{position:absolute;inset:0;}
body.varex-template .page-hero-media img{width:100%;height:100%;object-fit:cover;}
body.varex-template .page-hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(16,20,19,.15) 0%, rgba(12,16,15,.72) 100%);}
body.varex-template .page-hero-content{position:relative;z-index:2;padding:72px 0 48px;display:flex;flex-direction:column;gap:16px;max-width:760px;}
body.varex-template .page-hero .eyebrow{color:#D9E4E2;}
body.varex-template .page-hero .eyebrow::before{background:#fff;}
body.varex-template .page-hero h1{color:#fff;font-size:44px;}
body.varex-template .page-hero .body-lg{color:rgba(255,255,255,.86);}
body.varex-template .breadcrumb{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:13px;color:rgba(255,255,255,.75);}
body.varex-template .breadcrumb button{background:none;border:none;color:inherit;cursor:pointer;padding:0;font:inherit;}
body.varex-template .breadcrumb button:hover{color:#fff;text-decoration:underline;}
body.varex-template .diensten-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:20px 32px;}
@media (max-width:760px){body.varex-template .diensten-grid{grid-template-columns:1fr;}
}
body.varex-template .dienst-item{display:flex;gap:18px;padding:28px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:transform .2s ease, box-shadow .2s ease;}
body.varex-template .dienst-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
body.varex-template .dienst-num{font-family:var(--font-mono);font-size:14px;font-weight:600;color:var(--brand);flex-shrink:0;padding-top:2px;}
body.varex-template .dienst-item p{font-size:17px;color:var(--ink);font-weight:500;line-height:1.55;}
body.varex-template .split{display:grid;grid-template-columns:1.05fr 1fr;gap:80px;align-items:center;}
@media (max-width:900px){body.varex-template .split{grid-template-columns:1fr;gap:40px;}
}
body.varex-template .split-media{border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/5;}
body.varex-template .split-media img{width:100%;height:100%;object-fit:cover;}
body.varex-template .split-text{display:flex;flex-direction:column;gap:24px;}
body.varex-template .check-list{display:flex;flex-direction:column;gap:16px;margin-top:8px;}
body.varex-template .check-item{display:flex;gap:14px;align-items:flex-start;}
body.varex-template .check-icon{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--brand-light);color:var(--brand);display:flex;align-items:center;justify-content:center;margin-top:2px;}
body.varex-template .check-icon svg{width:12px;height:12px;}
body.varex-template .check-item p{font-size:16px;color:var(--ink-soft);line-height:1.6;}
body.varex-template .check-item strong{color:var(--ink);font-weight:600;}
body.varex-template .cta-block{position:relative;border-radius:var(--radius-xl);overflow:hidden;color:#fff;padding:96px 64px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:24px;}
body.varex-template .cta-media{position:absolute;inset:0;background-size:cover;background-position:center;}
body.varex-template .cta-media.brand-fill{background:linear-gradient(135deg, var(--brand) 0%, var(--brand-rich) 100%);}
body.varex-template .cta-media::after{content:"";position:absolute;inset:0;background:var(--overlay-dark);}
body.varex-template .cta-media.brand-fill::after{content:none;}
body.varex-template .cta-block > *{position:relative;z-index:2;}
body.varex-template .cta-block h2,body.varex-template .cta-block h3{color:#fff;max-width:620px;}
body.varex-template .cta-block .body-lg{color:rgba(255,255,255,.85);max-width:520px;}
@media (max-width:760px){body.varex-template .cta-block{padding:56px 28px;}
}
body.varex-template .card-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:32px;}
body.varex-template .card-grid.cols-2{grid-template-columns:repeat(2, 1fr);}
@media (max-width:1000px){body.varex-template .card-grid{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:700px){body.varex-template .card-grid,body.varex-template .card-grid.cols-2{grid-template-columns:1fr;gap:20px;}
}
body.varex-template .listing-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .25s ease, box-shadow .25s ease;display:flex;flex-direction:column;cursor:pointer;text-align:left;width:100%;}
body.varex-template .listing-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
body.varex-template .card-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--muted-bg);}
body.varex-template .card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
body.varex-template .listing-card:hover .card-media img{transform:scale(1.045);}
body.varex-template .card-badge{position:absolute;top:16px;left:16px;background:var(--surface);color:var(--brand);font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:6px 12px;border-radius:100px;box-shadow:var(--shadow-sm);}
body.varex-template .card-price{position:absolute;bottom:16px;right:16px;background:rgba(20,20,20,.72);backdrop-filter:blur(4px);color:#fff;font-family:var(--font-mono);font-size:13px;font-weight:500;padding:6px 12px;border-radius:100px;}
body.varex-template .card-body{padding:24px;display:flex;flex-direction:column;gap:12px;flex:1;}
body.varex-template .card-body h4{font-size:19px;}
body.varex-template .card-location{font-size:14px;color:var(--ink-faint);display:flex;align-items:center;gap:6px;}
body.varex-template .card-desc{font-size:15px;color:var(--ink-soft);line-height:1.6;flex:1;}
body.varex-template .card-specs{display:flex;gap:16px;padding-top:12px;border-top:1px solid var(--border);font-family:var(--font-mono);font-size:13px;color:var(--ink-soft);flex-wrap:wrap;}
body.varex-template .card-specs span{display:flex;align-items:center;gap:6px;}
body.varex-template .card-more{margin-top:4px;font-family:var(--font-mono);font-size:13px;color:var(--brand);font-weight:600;display:inline-flex;align-items:center;gap:6px;}
body.varex-template .showcase-wrap{display:flex;justify-content:center;padding:24px 0 8px;}
body.varex-template .showcase-card{max-width:420px;width:100%;}
body.varex-template .detail-header{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:32px;flex-wrap:wrap;}
body.varex-template .detail-hero{border-radius:var(--radius-xl);overflow:hidden;aspect-ratio:3/2;box-shadow:var(--shadow-lg);margin-bottom:56px;}
body.varex-template .detail-hero img{width:100%;height:100%;object-fit:cover;}
body.varex-template .detail-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:64px;}
@media (max-width:900px){body.varex-template .detail-grid{grid-template-columns:1fr;gap:40px;}
}
body.varex-template .detail-body{display:flex;flex-direction:column;gap:32px;}
body.varex-template .detail-body p{color:var(--ink-soft);font-size:17px;line-height:1.75;}
body.varex-template .detail-body .intro{font-size:19px;color:var(--ink);font-weight:500;line-height:1.6;}
body.varex-template .facts-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;height:fit-content;display:flex;flex-direction:column;gap:24px;box-shadow:var(--shadow-sm);}
body.varex-template .facts-price{font-family:var(--font-mono);font-size:24px;font-weight:600;color:var(--brand);}
body.varex-template .facts-list{display:flex;flex-direction:column;gap:0;}
body.varex-template .facts-list li{display:flex;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--border);font-size:15px;}
body.varex-template .facts-list li:last-child{border-bottom:none;}
body.varex-template .facts-list .label{color:var(--ink-faint);}
body.varex-template .facts-list .value{color:var(--ink);font-weight:600;font-family:var(--font-mono);font-size:14px;text-align:right;}
body.varex-template .troeven-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
@media (max-width:760px){body.varex-template .troeven-grid{grid-template-columns:1fr;}
}
body.varex-template .troef-item{display:flex;gap:12px;align-items:flex-start;padding:16px;background:var(--muted-bg);border-radius:var(--radius-md);}
body.varex-template .troef-item .check-icon{margin-top:0;}
body.varex-template .troef-item p{font-size:15px;color:var(--ink);font-weight:500;line-height:1.5;}
body.varex-template .units-table{width:100%;border-collapse:collapse;font-size:14px;}
body.varex-template .units-table th{text-align:left;font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);font-weight:600;padding:0 0 12px;border-bottom:1px solid var(--border);}
body.varex-template .units-table td{padding:14px 0;border-bottom:1px solid var(--border);color:var(--ink-soft);}
body.varex-template .units-table td:first-child{color:var(--ink);font-weight:600;}
body.varex-template .units-table td:last-child{text-align:right;font-family:var(--font-mono);color:var(--ink);}
body.varex-template .units-table tr:last-child td{border-bottom:none;}
@media (max-width:760px){body.varex-template .footer-top{grid-template-columns:1fr;gap:40px;}
}

/* ===== BRUG: template-klassen op Elementor-markup ===== */
body.varex-template .e-con{--padding-top:0px;--padding-right:0px;--padding-bottom:0px;--padding-left:0px;--margin-top:0px;--margin-right:0px;--margin-bottom:0px;--margin-left:0px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;--gap:0px;--row-gap:0px;--column-gap:0px;--widgets-spacing:0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}
body.varex-template .e-con>.e-con-inner{--padding-top:0px;--padding-right:0px;--padding-bottom:0px;--padding-left:0px;}
body.varex-template .elementor-widget:not(:last-child){margin-block-end:0;}
body.varex-template .elementor-widget-container{margin:0;padding:0;}

/* eyebrow als heading-widget */
body.varex-template .eyebrow .elementor-heading-title{
  font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;
  text-transform:inherit;color:inherit;line-height:inherit;}

/* body-lg / small als text-editor-widget */
body.varex-template .body-lg .elementor-widget-container,
body.varex-template .body-lg p{font-size:19px;line-height:1.6;color:var(--ink-soft);}
body.varex-template .small .elementor-widget-container,
body.varex-template .small p{font-size:14px;line-height:1.5;font-weight:500;color:var(--ink-soft);}

/* koppen binnen widgets erven de template-schaal */
body.varex-template .elementor-widget-heading h1.elementor-heading-title{font-size:56px;line-height:1.08;font-weight:700;letter-spacing:-.01em;font-family:var(--font-display);color:var(--ink);}
body.varex-template .elementor-widget-heading h2.elementor-heading-title{font-size:40px;line-height:1.15;font-weight:700;letter-spacing:-.008em;font-family:var(--font-display);color:var(--ink);}
body.varex-template .elementor-widget-heading h3.elementor-heading-title{font-size:26px;line-height:1.3;font-weight:600;font-family:var(--font-display);color:var(--ink);}
body.varex-template .elementor-widget-heading h4.elementor-heading-title{font-size:20px;line-height:1.4;font-weight:600;font-family:var(--font-display);color:var(--ink);}
@media (max-width:760px){
  body.varex-template .elementor-widget-heading h1.elementor-heading-title{font-size:34px;line-height:1.15;}
  body.varex-template .elementor-widget-heading h2.elementor-heading-title{font-size:28px;}
  body.varex-template .elementor-widget-heading h3.elementor-heading-title{font-size:22px;}
}

/* hero-tekst wit binnen .hero */
body.varex-template .hero .elementor-heading-title{color:#fff;}
body.varex-template .hero .elementor-widget-container p{color:rgba(255,255,255,.86);}
body.varex-template .cta-block .elementor-heading-title{color:#fff;}
body.varex-template .cta-block .elementor-widget-container p{color:rgba(255,255,255,.85);}

/* knoppen: template-look op Elementor/ElementsKit buttons */
body.varex-template .btn .elementor-button,
body.varex-template .btn .ekit-btn-wraper a{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--font-body);font-weight:600;font-size:16px;
  padding:16px 30px;border-radius:var(--radius-md);border:1.5px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;}
body.varex-template .btn-primary .elementor-button,
body.varex-template .btn-primary .ekit-btn-wraper a{background:var(--brand);color:#fff;}
body.varex-template .btn-primary .elementor-button:hover,
body.varex-template .btn-primary .ekit-btn-wraper a:hover{background:var(--brand-rich);transform:translateY(-2px);box-shadow:var(--shadow-md);}
body.varex-template .btn-outline .elementor-button,
body.varex-template .btn-outline .ekit-btn-wraper a{background:transparent;border-color:currentColor;color:#fff;}
body.varex-template .btn-outline .elementor-button:hover,
body.varex-template .btn-outline .ekit-btn-wraper a:hover{background:rgba(255,255,255,.12);transform:translateY(-2px);}

/* afbeelding-widget vult zijn kader */
body.varex-template .split-media .elementor-widget-container,
body.varex-template .split-media img{width:100%;height:100%;object-fit:cover;display:block;}

/* FIX 1: .btn op een Elementor-widgetwrapper mag de knopstijl niet krijgen -- die hoort op de <a> */
body.varex-template .elementor-widget-button.btn,
body.varex-template .elementor-widget-button.btn:hover{display:inline-flex;width:auto;max-width:none;padding:0;border:0;background:none;box-shadow:none;border-radius:0;transform:none;white-space:normal;}
body.varex-template .hero-actions>.elementor-widget{width:auto;flex:0 0 auto;}

/* FIX 2: witte koppen in hero/cta moeten de algemene kopregel overtreffen */
body.varex-template .hero .elementor-widget-heading .elementor-heading-title,
body.varex-template .cta-block .elementor-widget-heading .elementor-heading-title,
body.varex-template .page-hero .elementor-widget-heading .elementor-heading-title{color:#fff;}

/* FIX 3: Elementor zet containers standaard op column; template-rijen expliciet op row */
body.varex-template .hero,
body.varex-template .page-hero,
body.varex-template .hero-actions,
body.varex-template .dienst-item,
body.varex-template .check-item,
body.varex-template .troef-item,
body.varex-template .detail-header,
body.varex-template .card-specs,
body.varex-template .breadcrumb{flex-direction:row;}

/* FIX 4: Elementor's .elementor-button heeft line-height:1; template erft 1.7 */
body.varex-template .btn .elementor-button,
body.varex-template .btn .ekit-btn-wraper a{line-height:1.7;}

/* FIX 5: label-klassen op heading-widgets erven hun eigen stijl */
body.varex-template .dienst-num .elementor-heading-title,
body.varex-template .card-badge .elementor-heading-title,
body.varex-template .card-location .elementor-heading-title{font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;line-height:inherit;}
body.varex-template .dienst-item>.elementor-widget-heading.dienst-num{width:auto;flex:0 0 auto;}
body.varex-template .diensten-grid>.e-con{width:auto;}

/* FIX 6: check-icon als Elementor icon-widget, split-media als image-widget */
body.varex-template .check-item>.elementor-widget-icon.check-icon{width:22px;height:22px;flex:0 0 auto;padding:0;}
body.varex-template .check-icon .elementor-icon-wrapper,body.varex-template .check-icon .elementor-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--brand);font-size:12px;}
body.varex-template .check-icon svg{width:12px;height:12px;fill:currentColor;}
body.varex-template .split-media>.elementor-widget-image{width:100%;height:100%;}
body.varex-template .split-media .elementor-widget-image img{width:100%;height:100%;object-fit:cover;}
body.varex-template .check-list>.e-con{width:100%;}

/* FIX 7: .cta-block > * overschreef position:absolute van .cta-media (bug in referentie) */
body.varex-template .cta-block > .cta-media{position:absolute;z-index:0;}
body.varex-template .cta-block > .elementor-widget > .elementor-widget-container{display:flex;flex-direction:column;align-items:center;}
body.varex-template .cta-block .eyebrow{color:#D9E4E2;}


/* De kaart-vertaallaag is vervallen: property-card.php en project-card.php
   renderen nu zelf de referentiemarkup (.listing-card). */
body.varex-template .cards-2 .card-grid{grid-template-columns:repeat(2,1fr);}


/* Header en footer blijven de bestaande Elementor-opbouw; alleen de globale reset mag daar niet ingrijpen. */
body.varex-template [data-elementor-type="header"] ul,
body.varex-template [data-elementor-type="footer"] ul{margin:0;padding:0;list-style:none;}
body.varex-template [data-elementor-type="header"] h1,
body.varex-template [data-elementor-type="header"] h2,
body.varex-template [data-elementor-type="header"] h3,
body.varex-template [data-elementor-type="header"] h4,
body.varex-template [data-elementor-type="footer"] h1,
body.varex-template [data-elementor-type="footer"] h2,
body.varex-template [data-elementor-type="footer"] h3,
body.varex-template [data-elementor-type="footer"] h4{font-family:revert;font-size:revert;line-height:revert;font-weight:revert;letter-spacing:revert;color:revert;}
body.varex-template [data-elementor-type="header"] .elementor-widget-heading .elementor-heading-title,
body.varex-template [data-elementor-type="footer"] .elementor-widget-heading .elementor-heading-title{font-family:revert;font-size:revert;line-height:revert;font-weight:revert;letter-spacing:revert;}

body.varex-template .detail-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media (max-width:760px){body.varex-template .detail-gallery{grid-template-columns:repeat(2,1fr);}}
body.varex-template .detail-gallery-item{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius-md);background:var(--muted-bg);}
body.varex-template .detail-gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease;}
body.varex-template .detail-gallery-item:hover img{transform:scale(1.04);}
body.varex-template .facts-list a.value{color:var(--brand);text-decoration:underline;text-underline-offset:3px;}

body.varex-template .contact-form{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow-sm);}

/* ============================================================
   RESPONSIVE SLUITSTUK - na alle FIX-blokken, breed naar smal.
   ============================================================ */
@media (max-width:1000px){
  body.varex-template .card-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:900px){
  body.varex-template .split{grid-template-columns:1fr;gap:40px;}
  body.varex-template .detail-grid{grid-template-columns:1fr;gap:40px;}
}
@media (max-width:760px){
  body.varex-template .section-head-row{flex-direction:column;align-items:flex-start;gap:20px;}
  body.varex-template .diensten-grid{grid-template-columns:1fr;}
  body.varex-template .troeven-grid{grid-template-columns:1fr;}
  body.varex-template .section{padding:64px 0;}
  body.varex-template .container{padding:0 20px;}
  body.varex-template .cta-block{padding:56px 28px;}
  body.varex-template .hero{min-height:80vh;}
  body.varex-template .hero-content{padding:64px 0 48px;}
  body.varex-template .detail-gallery{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:700px){
  body.varex-template .card-grid,
  body.varex-template .cards-2 .card-grid{grid-template-columns:1fr;gap:20px;}
}


/* ============================================================
   QA-CORRECTIES
   ============================================================ */

/* 9. .section en .container zijn in de referentie block-elementen. Elementor
      maakte er flex-rijen van, waardoor sectiekoppen NAAST hun content stonden. */
body.varex-template .section,
body.varex-template .container{display:block;}
body.varex-template .container.split{display:grid;}
body.varex-template .container.hero-content,
body.varex-template .container.page-hero-content{display:flex;flex-direction:column;}

/* 10. Koppen in widgets waren #1E1E1E op groen (contrast ~1.5:1). De
       widget-regel had hogere specificiteit dan de groene kleurregel. */
body.varex-template .elementor-widget-heading h1.elementor-heading-title,
body.varex-template .elementor-widget-heading h2.elementor-heading-title,
body.varex-template .elementor-widget-heading h3.elementor-heading-title,
body.varex-template .elementor-widget-heading h4.elementor-heading-title{color:var(--ink);}
body.varex-template .facts-panel .elementor-widget-heading h1.elementor-heading-title,
body.varex-template .facts-panel .elementor-widget-heading h2.elementor-heading-title,
body.varex-template .facts-panel .elementor-widget-heading h3.elementor-heading-title,
body.varex-template .facts-panel .elementor-widget-heading h4.elementor-heading-title,
body.varex-template .contact-form .elementor-widget-heading .elementor-heading-title{color:var(--ink);}

/* 11. Hero-overlay was neutraal zwart en liep hard over in het groen eronder. */
body.varex-template .hero-media::after{background:linear-gradient(180deg, rgba(10,15,14,.62) 0%, rgba(10,15,14,.80) 55%, rgba(8,12,11,.95) 100%);}
body.varex-template .page-hero-media::after{background:linear-gradient(180deg, rgba(10,15,14,.62) 0%, rgba(10,15,14,.80) 55%, rgba(8,12,11,.95) 100%);}

/* 12. Eén vlakke kleur liet 256px tussen secties als een gat lezen. Beide
       tinten komen uit de template-tokens. */
body.varex-template .section.bg-muted{background:var(--muted-bg);}
body.varex-template .cta-media::after{background:var(--overlay-dark);}

/* 13. Kaarten zonder omschrijving hielden een gat onderin. */
body.varex-template .card-more{margin-top:auto;padding-top:4px;}

/* 14. Bij een lange tekstkolom zweefde het beeld gecentreerd met gaten. */
body.varex-template .split{align-items:start;}

/* 15. .hero-content overschreef de horizontale padding van .container met 0.
       Onder 760px plakte de tekst tegen de schermrand. De max-width groeit
       mee zodat het tekstblok op desktop exact 760px breed blijft. */
body.varex-template .container.hero-content{max-width:824px;padding:96px 32px 72px;}
body.varex-template .container.page-hero-content{max-width:824px;padding:72px 32px 48px;}
@media (max-width:760px){
body.varex-template .container.hero-content{padding:64px 20px 48px;}
body.varex-template .container.page-hero-content{padding:56px 20px 40px;}
}

/* 16. .facts-panel erfde de witte paginatekstkleur op een wit paneel. */
body.varex-template .facts-panel{color:var(--ink-soft);}
body.varex-template .breadcrumb .value,
body.varex-template .breadcrumb span:last-child{color:#fff;}

/* 17. De page-hero H1 rendeerde op 56px in plaats van de 44px uit de
       referentie, waardoor listingpagina's dezelfde kopgrootte kregen als de
       homepage en het onderscheid tussen hoofd- en subpagina wegviel. */
body.varex-template .page-hero .elementor-widget-heading h1.elementor-heading-title{font-size:44px;line-height:1.12;}
@media (max-width:760px){
body.varex-template .page-hero .elementor-widget-heading h1.elementor-heading-title{font-size:30px;line-height:1.18;}
}

/* 18. Detailpagina's gebruiken een inline font-size op de H1; die haalde het
       van de responsive regel en bleef op mobiel 44px. */
@media (max-width:760px){
body.varex-template .detail-header h1[style]{font-size:30px !important;line-height:1.18;}
}


/* ============================================================
   AANPASSINGEN 27-08-2026 - donkere modus, uitlijning, kaarten
   ============================================================ */

/* A. Paginagrond en sectiegronden komen uit de donkere tokens. */
body.varex-template{background:var(--bg);color:var(--ink-soft);}
body.varex-template .section{background:var(--bg);}
body.varex-template .section.bg-muted{background:var(--muted-bg);}

/* B. FIX 8 hersteld: .section-head-row is een rij, geen kolom. Deze regel was
      weggevallen bij een eerdere opschoning, waardoor "Te koop" en "Lopende
      projecten" hun knop onder de titel zetten in plaats van ernaast. */
body.varex-template .section-head-row{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:56px;}
body.varex-template .section-head-row > .section-head{margin-bottom:0;flex:1 1 auto;}
body.varex-template .section-head-row > .elementor-widget,
body.varex-template .section-head-row > .elementor-widget-button{width:auto;flex:0 0 auto;}

/* C. Hero's: verticaal gecentreerd, tekst links uitgelijnd op het logo
      (containerbreedte 1240 + 32px padding = dezelfde x als de header). */
body.varex-template .hero,
body.varex-template .page-hero{align-items:center;}
body.varex-template .container.hero-content,
body.varex-template .container.page-hero-content{max-width:1240px;margin:0 auto;align-items:flex-start;text-align:left;}
body.varex-template .container.hero-content > *,
body.varex-template .container.page-hero-content > *{max-width:760px;width:100%;}
body.varex-template .container.hero-content > .hero-actions{width:auto;max-width:none;}

/* D. Badges donker met lichtgroene tekst. */
body.varex-template .card-badge{background:var(--surface);color:var(--brand);border:1px solid var(--border);}
body.varex-template .card-price{background:rgba(8,12,11,.78);color:#fff;}

/* E. Kaarten, panelen en vlakken op de donkere tokens. */
body.varex-template .listing-card,
body.varex-template .dienst-item,
body.varex-template .facts-panel,
body.varex-template .contact-form{background:var(--surface);border-color:var(--border);color:var(--ink-soft);}
body.varex-template .card-media,
body.varex-template .troef-item,
body.varex-template .detail-gallery-item{background:var(--muted-bg);}
body.varex-template .check-icon{background:var(--brand-light);color:var(--brand);}
body.varex-template .check-icon .elementor-icon-wrapper,
body.varex-template .check-icon .elementor-icon{color:var(--brand);}
body.varex-template .eyebrow{color:var(--brand);}
body.varex-template .eyebrow::before{background:var(--brand-rich);}
body.varex-template .link-arrow,
body.varex-template .card-more,
body.varex-template .dienst-num,
body.varex-template .facts-price{color:var(--brand);}
body.varex-template .btn-secondary .elementor-button,
body.varex-template a.btn-secondary{background:transparent;border-color:var(--brand);color:var(--brand);}
body.varex-template .btn-secondary .elementor-button:hover,
body.varex-template a.btn-secondary:hover{background:var(--brand-light);border-color:var(--brand);color:var(--brand-rich);}
body.varex-template .btn-primary .elementor-button,
body.varex-template a.btn-primary{background:var(--brand);color:#10201D;}
body.varex-template .btn-primary .elementor-button:hover,
body.varex-template a.btn-primary:hover{background:var(--brand-rich);color:#10201D;}

/* F. Contactformulier (MetForm) in dezelfde donkere tinten als de kaarten. */
body.varex-template .contact-form,
body.varex-template .metform-form-main-wrapper{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);}
body.varex-template :is(.contact-form, .metform-form-main-wrapper) :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], select, textarea){
  background:var(--muted-bg);border:1px solid var(--border);color:var(--ink);
  border-radius:var(--radius-md);box-shadow:none;}
body.varex-template :is(.contact-form, .metform-form-main-wrapper) :is(input, select, textarea)::placeholder{color:var(--ink-faint);opacity:1;}
body.varex-template :is(.contact-form, .metform-form-main-wrapper) :is(input, select, textarea):focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px rgba(124,172,166,.18);}
body.varex-template :is(.contact-form, .metform-form-main-wrapper) label,
body.varex-template :is(.contact-form, .metform-form-main-wrapper) .mf-input-label{color:var(--ink-soft);}
body.varex-template :is(.contact-form, .metform-form-main-wrapper) :is(h1,h2,h3,h4),
body.varex-template :is(.contact-form, .metform-form-main-wrapper) .elementor-heading-title{color:var(--ink);}
body.varex-template :is(.contact-form, .metform-form-main-wrapper) :is(button[type="submit"], .metform-btn, input[type="submit"]){
  background:var(--brand);color:#10201D;border:none;border-radius:var(--radius-md);font-weight:600;}
body.varex-template :is(.contact-form, .metform-form-main-wrapper) :is(button[type="submit"], .metform-btn, input[type="submit"]):hover{background:var(--brand-rich);}

/* G. Header en footer in de donkere versie van het prototype. */
body.varex-template [data-elementor-type="header"] ul,
body.varex-template [data-elementor-type="footer"] ul{margin:0;padding:0;list-style:none;}
body.varex-template [data-elementor-type="header"] li::marker,
body.varex-template [data-elementor-type="footer"] li::marker{content:none;}

@media (max-width:900px){
  body.varex-template .section-head-row{flex-direction:column;align-items:flex-start;gap:20px;}
  body.varex-template .section-head-row > .elementor-widget,
  body.varex-template .section-head-row > .elementor-widget-button{width:auto;}
}

/* H. Over ons: "Ons verhaal" volgt de opbouw uit het Over-ons-prototype. */
body.varex-template .verhaal-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:72px;align-items:start;}
body.varex-template .verhaal-aside{display:flex;flex-direction:column;gap:16px;position:sticky;top:130px;}
body.varex-template .verhaal-text{display:flex;flex-direction:column;gap:24px;}
body.varex-template .verhaal-text p{font-size:17px;line-height:1.75;color:var(--ink-soft);}
body.varex-template .verhaal-text .lead p{font-size:19px;color:var(--ink);font-weight:500;line-height:1.65;}
body.varex-template .verhaal-text b,
body.varex-template .verhaal-text strong{color:var(--ink);font-weight:600;}
body.varex-template .verhaal-goal{padding:24px 28px;background:var(--brand-light);border-radius:var(--radius-lg);}
body.varex-template .verhaal-goal p,
body.varex-template .verhaal-goal b,
body.varex-template .verhaal-goal strong{font-size:17px;color:var(--brand-rich);font-weight:600;line-height:1.6;}
@media (max-width:900px){
  body.varex-template .verhaal-grid{grid-template-columns:1fr;gap:28px;}
  body.varex-template .verhaal-aside{position:static;}
}

/* I. Contactformulier: Elementor Pro Form-widget (geen MetForm). De widget
      genereert eigen per-element regels met hogere specificiteit, vandaar
      de gerichte overrides hieronder. */
body.varex-template .contact-form{padding:32px;}
body.varex-template .elementor-form .elementor-field-group .elementor-field,
body.varex-template .elementor-form .elementor-field-group .elementor-field-textual,
body.varex-template .elementor-form .elementor-field-group select,
body.varex-template .elementor-form .elementor-field-group textarea{
  background-color:var(--muted-bg)!important;
  border:1px solid var(--border)!important;
  color:var(--ink)!important;
  border-radius:var(--radius-md)!important;
  box-shadow:none!important;}
body.varex-template .elementor-form .elementor-field-group > label,
body.varex-template .elementor-form .elementor-field-label{color:var(--ink-soft)!important;}
body.varex-template .elementor-form .elementor-field::placeholder,
body.varex-template .elementor-form .elementor-field-textual::placeholder{color:var(--ink-faint)!important;opacity:1;}
body.varex-template .elementor-form .elementor-field:focus{border-color:var(--brand)!important;outline:none;box-shadow:0 0 0 3px rgba(124,172,166,.18)!important;}
body.varex-template .elementor-form .elementor-button[type="submit"],
body.varex-template .elementor-form button[type="submit"]{
  background-color:var(--brand)!important;color:#10201D!important;
  border:none!important;border-radius:var(--radius-md)!important;font-weight:600;}
body.varex-template .elementor-form .elementor-button[type="submit"]:hover,
body.varex-template .elementor-form button[type="submit"]:hover{background-color:var(--brand-rich)!important;}
body.varex-template .elementor-form .elementor-message{color:var(--ink-soft);}

/* J. Header in de donkere versie: menu, submenu en CTA-knop.
      ElementsKit genereert per-element regels met hoge specificiteit,
      daarom staan de kleuren hier hard. */
body.varex-template [data-elementor-type="header"] > .e-con{border-bottom:1px solid var(--border);}
body.varex-template [data-elementor-type="header"] .ekit-menu-nav-link{color:var(--ink-soft)!important;font-weight:500;font-size:17px!important;}
body.varex-template [data-elementor-type="header"] .ekit-menu-nav-link:hover{color:var(--brand)!important;}
body.varex-template [data-elementor-type="header"] .current-menu-item > .ekit-menu-nav-link,
body.varex-template [data-elementor-type="header"] .menu-item-home.current-menu-item > .ekit-menu-nav-link{color:var(--ink)!important;font-weight:600;}
body.varex-template [data-elementor-type="header"] .elementskit-submenu-panel{background:var(--surface)!important;border:1px solid var(--border)!important;border-radius:var(--radius-md);}
body.varex-template [data-elementor-type="header"] .elementskit-submenu-panel .ekit-menu-nav-link{color:var(--ink-soft)!important;}
body.varex-template [data-elementor-type="header"] .elementskit-menu-hamburger-icon,
body.varex-template [data-elementor-type="header"] .elementskit-menu-close{color:var(--ink)!important;background:transparent!important;}
body.varex-template [data-elementor-type="header"] .elementskit-menu-hamburger .elementskit-menu-hamburger-icon{background-color:var(--ink)!important;}
body.varex-template [data-elementor-type="header"] .ekit-btn-wraper a,
body.varex-template [data-elementor-type="header"] .elementskit-btn{
  background-color:transparent!important;background-image:none!important;
  color:var(--ink)!important;padding:0!important;border:none!important;
  box-shadow:none!important;border-radius:0!important;font-weight:500;font-size:17px!important;
  transition:color .18s ease;}
body.varex-template [data-elementor-type="header"] .ekit-btn-wraper a:hover,
body.varex-template [data-elementor-type="header"] .elementskit-btn:hover{background-color:transparent!important;color:var(--brand)!important;}
body.varex-template [data-elementor-type="header"] .ekit-btn-wraper a .icon,
body.varex-template [data-elementor-type="header"] .elementskit-btn i{color:inherit!important;}

/* K. Footer in de donkere versie. */
body.varex-template [data-elementor-type="footer"]{color:var(--ink-soft);}
body.varex-template [data-elementor-type="footer"] a{color:var(--ink-soft);}
body.varex-template [data-elementor-type="footer"] a:hover{color:var(--brand);}

/* L. Samengevoegde sectie op de homepagina: verhaal + aanpak in een blok.
      De .hinge is het scharnier tussen beide helften. */
body.varex-template .hinge{margin:72px 0 56px;padding-top:56px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:16px;max-width:720px;}
body.varex-template .split-media.sticky-media{position:sticky;top:40px;align-self:start;}
body.varex-template .dienst-item p strong{display:block;color:var(--ink);font-family:var(--font-display);font-size:18px;font-weight:600;margin-bottom:6px;line-height:1.35;}
body.varex-template .dienst-item p strong + br{display:none;}
body.varex-template .dienst-item p{font-size:16px;color:var(--ink-soft);line-height:1.55;}
@media (max-width:900px){
  body.varex-template .hinge{margin:48px 0 36px;padding-top:36px;}
  body.varex-template .split-media.sticky-media{position:static;aspect-ratio:16/10;}
}

/* M. Galerij op de detailpagina's: grote foto links, miniaturen rechts. */
body.varex-template .detail-media{display:grid;grid-template-columns:1fr 220px;gap:16px;margin-bottom:56px;}
body.varex-template .detail-media.is-single{grid-template-columns:1fr;}
body.varex-template .gallery-main{position:relative;border-radius:var(--radius-xl);overflow:hidden;aspect-ratio:3/2;background:var(--muted-bg);box-shadow:var(--shadow-lg);}
body.varex-template .gallery-main img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in;}
body.varex-template .gallery-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:rgba(8,12,11,.72);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .18s ease,color .18s ease;}
body.varex-template .gallery-nav:hover{background:var(--brand);color:#10201D;border-color:var(--brand);}
body.varex-template .gallery-nav svg{width:18px;height:18px;}
body.varex-template .gallery-prev{left:16px;}
body.varex-template .gallery-next{right:16px;}
body.varex-template .gallery-counter{position:absolute;bottom:16px;right:16px;background:rgba(8,12,11,.78);color:#fff;font-family:var(--font-mono);font-size:13px;padding:6px 12px;border-radius:100px;}
body.varex-template .gallery-thumbs{display:grid;grid-template-rows:repeat(4,minmax(0,1fr));gap:16px;}
body.varex-template .gallery-thumb{position:relative;padding:0;border:1px solid var(--border);background:var(--muted-bg);border-radius:var(--radius-md);overflow:hidden;cursor:pointer;min-height:0;transition:border-color .18s ease;}
body.varex-template .gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
body.varex-template .gallery-thumb:hover{border-color:var(--brand);}
body.varex-template .gallery-thumb.is-active{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-light);}
body.varex-template .gallery-thumb:nth-child(n+5){display:none;}
body.varex-template .gallery-more{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(8,12,11,.72);color:#fff;font-family:var(--font-mono);font-weight:600;font-size:16px;}

/* Lightbox */
body.varex-template.varex-lb-open{overflow:hidden;}
body.varex-template .varex-lightbox{position:fixed;inset:0;z-index:99999;background:rgba(6,10,9,.95);display:none;align-items:center;justify-content:center;padding:56px 72px;}
body.varex-template .varex-lightbox.is-open{display:flex;}
body.varex-template .lb-stage{margin:0;max-width:100%;max-height:100%;display:flex;align-items:center;justify-content:center;}
body.varex-template .varex-lightbox img{max-width:100%;max-height:calc(100vh - 112px);width:auto;height:auto;object-fit:contain;border-radius:var(--radius-md);display:block;}
body.varex-template .lb-btn{position:absolute;width:48px;height:48px;border-radius:50%;border:1px solid var(--border);background:rgba(20,28,26,.9);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .18s ease,color .18s ease;}
body.varex-template .lb-btn:hover{background:var(--brand);color:#10201D;border-color:var(--brand);}
body.varex-template .lb-btn svg{width:20px;height:20px;}
body.varex-template .lb-close{top:20px;right:20px;}
body.varex-template .lb-prev{left:20px;top:50%;transform:translateY(-50%);}
body.varex-template .lb-next{right:20px;top:50%;transform:translateY(-50%);}
body.varex-template .lb-counter{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);font-family:var(--font-mono);font-size:13px;color:var(--ink-soft);}

/* N. Detailpagina's: koppen en troeven over de volle breedte. */
body.varex-template .section-head.full-width,
body.varex-template .detail-header .section-head.full-width{max-width:none;}
body.varex-template .detail-header .section-head.full-width + .link-arrow{align-self:flex-end;}
body.varex-template .troeven-grid{grid-template-columns:1fr;}

/* O. Split waarin het beeld even hoog moet zijn als de tekstkolom. */
body.varex-template .split.align-stretch{align-items:stretch;}
body.varex-template .split-media.media-fill{aspect-ratio:auto;height:100%;}
body.varex-template .split-media.media-fill > .elementor-widget-image,
body.varex-template .split-media.media-fill .elementor-widget-container,
body.varex-template .split-media.media-fill img{height:100%;}

@media (max-width:900px){
  body.varex-template .detail-media{grid-template-columns:1fr;gap:12px;margin-bottom:40px;}
  body.varex-template .gallery-main{aspect-ratio:4/3;}
  body.varex-template .gallery-nav{width:38px;height:38px;}
  body.varex-template .gallery-thumbs{display:flex;overflow-x:auto;gap:10px;padding-bottom:6px;}
  body.varex-template .gallery-thumb{flex:0 0 104px;height:78px;}
  body.varex-template .gallery-thumb:nth-child(n+5){display:block;}
  body.varex-template .gallery-more{display:none;}
  body.varex-template .varex-lightbox{padding:16px;}
  body.varex-template .varex-lightbox img{max-height:calc(100vh - 32px);}
  body.varex-template .lb-prev{left:8px;}
  body.varex-template .lb-next{right:8px;}
  body.varex-template .split.align-stretch{align-items:start;}
  body.varex-template .split-media.media-fill{aspect-ratio:16/10;height:auto;}
}

/* P. Correctie 27-08-2026: de miniaturenkolom liep door onder de hoofdfoto.
      Oorzaak: de rijhoogte van .detail-media was onbepaald, waardoor de
      1fr-rijen in .gallery-thumbs op de natuurlijke hoogte van de foto's
      uitkwamen in plaats van op de hoogte van de hoofdfoto. De track staat nu
      absoluut in een lege cel, zodat de kolom exact even hoog is als de foto:
      gelijk aan de bovenkant, gelijk aan de onderkant. Drie miniaturen van
      ongeveer 4:3 (254px kolom bij 1176px content = 190px hoog). */
body.varex-template .detail-media{grid-template-columns:1fr 254px;}
body.varex-template .gallery-thumbs{position:relative;min-height:0;display:block;}
body.varex-template .gallery-thumbs-track{position:absolute;inset:0;display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:16px;}
body.varex-template .gallery-thumb:nth-child(n+4){display:none;}

@media (max-width:900px){
  body.varex-template .detail-media{grid-template-columns:1fr;}
  body.varex-template .gallery-thumbs{position:static;}
  body.varex-template .gallery-thumbs-track{position:static;display:flex;overflow-x:auto;gap:10px;padding-bottom:6px;}
  body.varex-template .gallery-thumb:nth-child(n+4){display:block;}
}

/* Q. Eenhedentabel: stond zonder cel-padding en zonder omkadering, waardoor de
      twee kolommen tegen de randen plakten. Nu een paneel in dezelfde stijl als
      de feiten-kolom ernaast. */
body.varex-template .units-table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;}
body.varex-template .units-table th{text-align:left;font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);font-weight:600;padding:14px 24px;background:var(--muted-bg);border-bottom:1px solid var(--border);}
body.varex-template .units-table th:first-child{border-top-left-radius:var(--radius-lg);}
body.varex-template .units-table th:last-child{border-top-right-radius:var(--radius-lg);text-align:right;}
body.varex-template .units-table td{padding:16px 24px;border-bottom:1px solid var(--border);color:var(--ink-soft);vertical-align:middle;}
body.varex-template .units-table td:first-child{color:var(--ink);font-weight:600;}
body.varex-template .units-table td:last-child{text-align:right;font-family:var(--font-mono);color:var(--ink-soft);}
body.varex-template .units-table tbody tr:last-child td{border-bottom:none;}
body.varex-template .units-table tbody tr:last-child td:first-child{border-bottom-left-radius:var(--radius-lg);}
body.varex-template .units-table tbody tr:last-child td:last-child{border-bottom-right-radius:var(--radius-lg);}
body.varex-template .units-table tbody tr:hover td{background:rgba(124,172,166,.05);}

@media (max-width:760px){
  body.varex-template .units-table th,
  body.varex-template .units-table td{padding:12px 16px;}
  body.varex-template .units-table td:last-child{font-size:13px;}
}

/* R. Footer, variant 02: verkoopvraag bovenaan, daaronder drie kolommen,
      onderbalk met copyright. Inhoud is ongewijzigd gebleven. */
body.varex-template .varex-footer{background:#0E1615;color:var(--ink-soft);font-size:15px;}
body.varex-template .varex-footer a{color:var(--ink-soft);transition:color .18s ease;}
body.varex-template .varex-footer a:hover{color:var(--brand);}

body.varex-template .ft-cta{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;padding:44px 32px;border-bottom:1px solid rgba(255,255,255,.08);}
body.varex-template .ft-cta-text{display:flex;flex-direction:column;gap:10px;max-width:640px;}
body.varex-template .varex-footer .ft-cta .elementor-widget-heading .elementor-heading-title{font-family:var(--font-display);font-size:26px;line-height:1.25;font-weight:600;color:var(--ink);}
body.varex-template .ft-cta-p p{font-size:15px;line-height:1.6;color:var(--ink-faint);}
body.varex-template .ft-cta > .elementor-widget-button{width:auto;flex:0 0 auto;}

body.varex-template .ft-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:56px;padding:56px 32px 44px;}
body.varex-template .ft-col{display:flex;flex-direction:column;}
body.varex-template .varex-footer .col-title{margin-bottom:18px;}
body.varex-template .varex-footer .col-title .elementor-heading-title{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);}
body.varex-template .ft-col-logo{justify-content:center;}
body.varex-template .ft-col-logo img{max-width:200px;width:100%;height:auto;}

body.varex-template .varex-footer .elementor-icon-list-items{display:flex;flex-direction:column;gap:11px;margin:0;padding:0;list-style:none;}
body.varex-template .varex-footer .elementor-icon-list-item{margin:0;}
body.varex-template .varex-footer .elementor-icon-list-item a,
body.varex-template .varex-footer .elementor-icon-list-text{color:var(--ink-soft);font-size:15px;}
body.varex-template .varex-footer .elementor-icon-list-icon svg,
body.varex-template .varex-footer .elementor-icon-list-icon i{color:var(--brand);fill:var(--brand);}

body.varex-template .ft-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.08);padding:22px 32px;background:none;}
body.varex-template .ft-bottom p,
body.varex-template .ft-bottom .elementor-widget-container{font-family:var(--font-mono);font-size:12px;letter-spacing:.03em;color:var(--ink-faint);}

@media (max-width:900px){
  body.varex-template .ft-grid{grid-template-columns:1fr;gap:36px;padding:44px 32px 36px;}
  body.varex-template .ft-col-logo{justify-content:flex-start;}
  body.varex-template .ft-cta{flex-direction:column;align-items:flex-start;gap:22px;}
}
@media (max-width:760px){
  body.varex-template .ft-cta{padding:36px 20px;}
  body.varex-template .ft-grid{padding:36px 20px 28px;}
  body.varex-template .ft-bottom{padding:20px;flex-direction:column;align-items:flex-start;gap:12px;}
  body.varex-template .varex-footer .ft-cta .elementor-widget-heading .elementor-heading-title{font-size:22px;}
}

/* S. Mobiel menu (ElementsKit offcanvas): donkere achtergrond, wit logo,
      lichte menu-items met lichtgroene hover, wit hamburgerpictogram.
      Staat bewust in een media query: .elementskit-menu-container is op
      desktop de gewone menubalk, en die kreeg anders ook een donkere doos. */
@media (max-width:1024px){
  body.varex-template .elementskit-menu-hamburger{background:transparent!important;border:none!important;padding:8px!important;}
  body.varex-template .elementskit-menu-hamburger .elementskit-menu-hamburger-icon{background-color:var(--ink)!important;height:2px!important;border-radius:2px;}
  body.varex-template .elementskit-menu-hamburger:hover .elementskit-menu-hamburger-icon{background-color:var(--brand)!important;}

  body.varex-template .elementskit-menu-offcanvas-elements,
  body.varex-template .elementskit-menu-offcanvas-elements .elementskit-nav-identity-panel{background-color:#0E1615!important;}
  body.varex-template .elementskit-menu-offcanvas-elements{border-right:1px solid var(--border)!important;}
  body.varex-template .elementskit-menu-offcanvas-elements .elementskit-nav-identity-panel{border-bottom:1px solid var(--border)!important;padding:18px 20px!important;}
  body.varex-template .elementskit-menu-offcanvas-elements .elementskit-nav-logo img{max-width:150px;height:auto;}

  body.varex-template .elementskit-menu-offcanvas-elements .elementskit-navbar-nav > li > a,
  body.varex-template .elementskit-menu-offcanvas-elements .ekit-menu-nav-link{
    color:var(--ink)!important;font-size:18px!important;font-weight:500;
    padding:14px 20px!important;border-bottom:1px solid rgba(255,255,255,.07);}
  body.varex-template .elementskit-menu-offcanvas-elements .ekit-menu-nav-link:hover,
  body.varex-template .elementskit-menu-offcanvas-elements .current-menu-item > .ekit-menu-nav-link{color:var(--brand)!important;}
  body.varex-template .elementskit-menu-offcanvas-elements .elementskit-submenu-panel .ekit-menu-nav-link{color:var(--ink-soft)!important;font-size:16px!important;}

  body.varex-template .elementskit-menu-close{
    background:transparent!important;border:1px solid var(--border)!important;
    color:var(--ink)!important;border-radius:50%!important;width:36px;height:36px;
    display:flex;align-items:center;justify-content:center;}
  body.varex-template .elementskit-menu-close:hover{color:var(--brand)!important;border-color:var(--brand)!important;}
  body.varex-template .elementskit-menu-overlay{background:rgba(6,10,9,.7)!important;}
}

/* ============================================================
   T. TWEE THEMA'S - licht is de standaard, donker is de optie.
   De hele site draait al op tokens, dus dit blok herdefinieert
   alleen die tokens en de plekken waar een kleur hard vastlag.
   Schakelaar zet data-theme="dark" op het <html>-element.
   ============================================================ */

/* --- 1. Lichte basis (standaard) --- */
:root{
  --ink:#1E1E1E; --ink-soft:#606060; --ink-faint:#8F8F8F;
  --brand:#264E51; --brand-rich:#1B3A3D; --brand-light:#E7EDEC;
  --bg:#FFFFFF; --surface:#FFFFFF; --border:#E0E0E0; --muted-bg:#F6F6F5;
  --shadow-sm:0 1px 2px rgba(20,20,20,.05);
  --shadow-md:0 12px 32px -12px rgba(20,20,20,.16);
  --shadow-lg:0 24px 56px -20px rgba(20,20,20,.24);
  --on-brand:#FFFFFF;
  --header-bg:#FFFFFF; --header-ink:#1E1E1E; --header-ink-soft:#4A4A4A; --header-line:#E0E0E0;
}

/* --- 2. Donkere variant --- */
:root[data-theme="dark"]{
  --ink:#EDEBE8; --ink-soft:#B4BAB9; --ink-faint:#828E8B;
  --brand:#7CACA6; --brand-rich:#9AC4BD; --brand-light:#1E302E;
  --bg:#15201E; --surface:#1B2725; --border:#2B3735; --muted-bg:#1D2926;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 12px 32px -12px rgba(0,0,0,.5);
  --shadow-lg:0 24px 56px -20px rgba(0,0,0,.6);
  --on-brand:#10201D;
  --header-bg:#15201E; --header-ink:#EDEBE8; --header-ink-soft:#B4BAB9; --header-line:#2B3735;
}

/* --- 3. Vast donker in beide thema's ---
   De footer, het mobiele paneel, de lightbox en alles wat op een foto ligt
   blijven donker. Dat is een ontwerpkeuze: witte tekst op een beeld werkt in
   beide thema's, en een donkere footer sluit een lichte pagina netjes af. */
:root{
  --footer-bg:#0E1615; --footer-ink:#EDEBE8; --footer-ink-soft:#B4BAB9;
  --footer-ink-faint:#828E8B; --footer-line:rgba(255,255,255,.08);
  --footer-border:#2B3735; --footer-brand:#7CACA6; --on-footer-brand:#10201D;
  --overlay-dark:rgba(8,12,11,.68);
}

/* --- 4. Zachte overgang bij het wisselen --- */
body.varex-template,
body.varex-template .section,
body.varex-template .listing-card,
body.varex-template .dienst-item,
body.varex-template .facts-panel,
body.varex-template .contact-form,
body.varex-template .units-table,
body.varex-template [data-elementor-type="header"] > .e-con{
  transition:background-color .25s ease, color .25s ease, border-color .25s ease;}
@media (prefers-reduced-motion:reduce){
  body.varex-template *{transition:none!important;}
}

/* --- 5. Knoptekst volgt het thema --- */
body.varex-template .btn-primary .elementor-button,
body.varex-template a.btn-primary,
body.varex-template .btn-primary .elementor-button:hover,
body.varex-template a.btn-primary:hover{color:var(--on-brand);}
body.varex-template :is(.contact-form, .metform-form-main-wrapper) :is(button[type="submit"], .metform-btn, input[type="submit"]){color:var(--on-brand)!important;}
body.varex-template .elementor-form .elementor-button[type="submit"],
body.varex-template .elementor-form button[type="submit"]{color:var(--on-brand)!important;}
body.varex-template .gallery-nav:hover,
body.varex-template .lb-btn:hover{color:#10201D;}

/* --- 6. Header --- */
body.varex-template [data-elementor-type="header"] > .e-con{
  background-color:var(--header-bg)!important;border-bottom:1px solid var(--header-line);}
body.varex-template [data-elementor-type="header"] .ekit-menu-nav-link{color:var(--header-ink-soft)!important;}
body.varex-template [data-elementor-type="header"] .current-menu-item > .ekit-menu-nav-link{color:var(--header-ink)!important;}
body.varex-template [data-elementor-type="header"] .ekit-btn-wraper a,
body.varex-template [data-elementor-type="header"] .elementskit-btn{color:var(--header-ink)!important;}
body.varex-template .logo-dark{display:none;}
:root[data-theme="dark"] body.varex-template .logo-dark{display:block;}
:root[data-theme="dark"] body.varex-template .logo-light{display:none;}

/* --- 7. Footer blijft donker in beide thema's --- */
body.varex-template .varex-footer{background:var(--footer-bg);color:var(--footer-ink-soft);}
body.varex-template .varex-footer a{color:var(--footer-ink-soft);}
body.varex-template .varex-footer a:hover{color:var(--footer-brand);}
body.varex-template .varex-footer .ft-cta .elementor-widget-heading .elementor-heading-title{color:var(--footer-ink);}
body.varex-template .ft-cta-p p{color:var(--footer-ink-faint);}
body.varex-template .ft-cta{border-bottom-color:var(--footer-line);}
body.varex-template .ft-bottom{border-top-color:var(--footer-line);}
body.varex-template .ft-bottom p,
body.varex-template .ft-bottom .elementor-widget-container{color:var(--footer-ink-faint);}
body.varex-template .varex-footer .col-title .elementor-heading-title{color:var(--footer-ink-faint);}
body.varex-template .varex-footer .elementor-icon-list-item a,
body.varex-template .varex-footer .elementor-icon-list-text{color:var(--footer-ink-soft);}
body.varex-template .varex-footer .elementor-icon-list-icon svg,
body.varex-template .varex-footer .elementor-icon-list-icon i{color:var(--footer-brand);fill:var(--footer-brand);}
body.varex-template .varex-footer .btn-primary .elementor-button,
body.varex-template .varex-footer a.btn-primary{background:var(--footer-brand)!important;color:var(--on-footer-brand)!important;}
body.varex-template .varex-footer .btn-primary .elementor-button:hover,
body.varex-template .varex-footer a.btn-primary:hover{background:#9AC4BD!important;color:var(--on-footer-brand)!important;}

/* --- 8. Lightbox en knoppen op foto's blijven donker --- */
body.varex-template .gallery-nav{border-color:rgba(255,255,255,.18);color:#EDEBE8;background:rgba(8,12,11,.72);}
body.varex-template .gallery-nav:hover{background:#7CACA6;border-color:#7CACA6;color:#10201D;}
body.varex-template .lb-btn{border-color:#2B3735;background:rgba(20,28,26,.9);color:#EDEBE8;}
body.varex-template .lb-btn:hover{background:#7CACA6;border-color:#7CACA6;color:#10201D;}
body.varex-template .lb-counter{color:#B4BAB9;}

/* --- 9. Mobiel paneel volgt de footerkleuren --- */
@media (max-width:1024px){
  body.varex-template .elementskit-menu-offcanvas-elements,
  body.varex-template .elementskit-menu-offcanvas-elements .elementskit-nav-identity-panel{background-color:var(--footer-bg)!important;}
  body.varex-template .elementskit-menu-offcanvas-elements{border-right-color:var(--footer-border)!important;}
  body.varex-template .elementskit-menu-offcanvas-elements .elementskit-nav-identity-panel{border-bottom-color:var(--footer-border)!important;}
  body.varex-template .elementskit-menu-offcanvas-elements .ekit-menu-nav-link{color:var(--footer-ink)!important;}
  body.varex-template .elementskit-menu-offcanvas-elements .ekit-menu-nav-link:hover,
  body.varex-template .elementskit-menu-offcanvas-elements .current-menu-item > .ekit-menu-nav-link{color:var(--footer-brand)!important;}
  body.varex-template .elementskit-menu-close{border-color:var(--footer-border)!important;color:var(--footer-ink)!important;}
  body.varex-template .elementskit-menu-close:hover{color:var(--footer-brand)!important;border-color:var(--footer-brand)!important;}
  body.varex-template .elementskit-menu-hamburger .elementskit-menu-hamburger-icon{background-color:var(--header-ink)!important;}
  body.varex-template .elementskit-menu-hamburger:hover .elementskit-menu-hamburger-icon{background-color:var(--brand)!important;}
}

/* --- 10. Zwevende schakelaar rechtsonder --- */
body.varex-template .vx-theme-toggle{
  position:fixed;right:20px;bottom:20px;z-index:9998;
  display:inline-flex;align-items:center;gap:9px;padding:11px 17px 11px 14px;
  background:var(--surface);color:var(--ink);border:1px solid var(--border);
  border-radius:100px;box-shadow:var(--shadow-md);cursor:pointer;
  font-family:var(--font-body);font-size:14px;font-weight:600;line-height:1;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;}
body.varex-template .vx-theme-toggle:hover{transform:translateY(-2px);border-color:var(--brand);color:var(--brand);}
body.varex-template .vx-theme-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:3px;}
body.varex-template .vx-theme-toggle svg{width:17px;height:17px;flex:0 0 17px;}
body.varex-template .vx-theme-toggle .vx-sun,
body.varex-template .vx-theme-toggle .vx-label-light{display:none;}
:root[data-theme="dark"] body.varex-template .vx-theme-toggle .vx-moon,
:root[data-theme="dark"] body.varex-template .vx-theme-toggle .vx-label-dark{display:none;}
:root[data-theme="dark"] body.varex-template .vx-theme-toggle .vx-sun{display:block;}
:root[data-theme="dark"] body.varex-template .vx-theme-toggle .vx-label-light{display:inline;}
body.varex-template.varex-lb-open .vx-theme-toggle{display:none;}
@media (max-width:760px){
  body.varex-template .vx-theme-toggle{right:14px;bottom:14px;padding:10px 15px 10px 12px;font-size:13px;}
}

/* --- 11. Sluitstuk: ElementsKit-knop volgt ook de themakleur --- */
body.varex-template .btn-primary .ekit-btn-wraper a{color:var(--on-brand);}
body.varex-template .gallery-thumb.is-active{box-shadow:0 0 0 2px var(--brand);}

/* --- 12. Hero-inleiding op de homepagina iets lichter (was 86% wit) --- */
body.varex-template .hero .body-lg,
body.varex-template .hero .body-lg p,
body.varex-template .hero .elementor-widget-container p{color:rgba(255,255,255,.94);}

/* --- 13. CTA-inleiding lichter: in de sectie (was 85% wit) en in de footer
       (stond op --footer-ink-faint, nu een tint lichter). --- */
body.varex-template .cta-block .body-lg,
body.varex-template .cta-block .body-lg p,
body.varex-template .cta-block .elementor-widget-container p{color:rgba(255,255,255,.94);}
body.varex-template .ft-cta-p p{color:var(--footer-ink-soft);}

/* --- 14. Hero-overlays per thema. In de lichte versie ongeveer 18 procent
       lichter; in de donkere versie blijven ze zoals ze stonden. --- */
:root{ --hero-o1:.47; --hero-o2:.64; --hero-o3:.78; --overlay-dark:rgba(8,12,11,.55); }
:root[data-theme="dark"]{ --hero-o1:.62; --hero-o2:.80; --hero-o3:.95; --overlay-dark:rgba(8,12,11,.68); }
body.varex-template .hero-media::after,
body.varex-template .page-hero-media::after{background:linear-gradient(180deg, rgba(10,15,14,var(--hero-o1)) 0%, rgba(10,15,14,var(--hero-o2)) 55%, rgba(8,12,11,var(--hero-o3)) 100%);}

/* --- 15. Inleiding in de page-hero. Er was alleen een regel voor .hero en
       .cta-block, dus op Projecten, Te koop, Te huur en Contact viel de
       alinea terug op --ink-soft: donkergrijs op een foto. --- */
body.varex-template .page-hero .body-lg,
body.varex-template .page-hero .body-lg p,
body.varex-template .page-hero .elementor-widget-container p,
body.varex-template .page-hero .elementor-widget-text-editor p{color:rgba(255,255,255,.94);}

/* --- 16. Meer groen als accentkleur. Alles loopt via --brand, dus dit werkt
       in beide thema's: donkergroen in de lichte versie, lichtgroen in de
       donkere. --- */

/* Menu: actief item in de accentkleur met een streepje eronder */
body.varex-template [data-elementor-type="header"] .current-menu-item > .ekit-menu-nav-link,
body.varex-template [data-elementor-type="header"] .current-menu-ancestor > .ekit-menu-nav-link,
body.varex-template [data-elementor-type="header"] .current_page_item > .ekit-menu-nav-link{
  color:var(--brand)!important;font-weight:600;
  }
body.varex-template [data-elementor-type="header"] .ekit-menu-nav-link{
  transition:color .18s ease;}
body.varex-template [data-elementor-type="header"] .ekit-menu-nav-link:hover{
  color:var(--brand)!important;}
body.varex-template [data-elementor-type="header"] .ekit-btn-wraper a:hover,
body.varex-template [data-elementor-type="header"] .elementskit-btn:hover{color:var(--brand)!important;}

/* Kaarten en panelen krijgen een groene rand bij hover */
body.varex-template .listing-card:hover,
body.varex-template .dienst-item:hover,
body.varex-template .troef-item:hover{border-color:var(--brand);}
body.varex-template .detail-gallery-item:hover{outline:2px solid var(--brand);outline-offset:-2px;}

/* Tekstlinks in lopende tekst */
body.varex-template .detail-body p a,
body.varex-template .verhaal-text p a,
body.varex-template .split-text p a,
body.varex-template .ft-cta-p p a{color:var(--brand);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
body.varex-template .detail-body p a:hover,
body.varex-template .verhaal-text p a:hover,
body.varex-template .split-text p a:hover{color:var(--brand-rich);}

/* Selectie en accentlijnen */
body.varex-template ::selection{background:var(--brand);color:var(--on-brand);}
body.varex-template .section-head-row > .section-head .eyebrow,
body.varex-template .section-head .eyebrow{color:var(--brand);}
body.varex-template .facts-panel .facts-price{color:var(--brand);}
body.varex-template .units-table th{color:var(--brand);}
body.varex-template .gallery-counter{background:rgba(8,12,11,.78);}

/* --- 17. Lichte versie: geen hard wit meer. Drie niveaus in plaats van twee:
       pagina heel licht grijs, gedempte secties een tint donkerder, en
       kaarten wit zodat die er duidelijk bovenop liggen. --- */
:root{ --bg:#FAFAF9; --surface:#FFFFFF; --muted-bg:#F1F1EF; --border:#E3E3E0; --header-bg:#FFFFFF; --header-line:#E3E3E0; }

/* --- 18. Header in de lichte versie een tint donkerder dan de pagina, met
       een zachte schaduw eronder zodat de balk van de inhoud loskomt.
       z-index is nodig omdat de hero er anders overheen schildert. --- */
:root{ --header-bg:#F4F3F1; --header-shadow:0 2px 10px -2px rgba(20,20,20,.10); }
:root[data-theme="dark"]{ --header-bg:#15201E; --header-shadow:0 2px 12px -2px rgba(0,0,0,.45); }
body.varex-template [data-elementor-type="header"] > .e-con{
  position:relative;z-index:5;box-shadow:var(--header-shadow);}

/* --- 19. Hamburger. Het pictogram is geen span met een achtergrondkleur maar
       een icoonfont (.ekit-menu-icon); mijn eerdere regel greep dus mis. De
       kleur stond op #264E51 uit de widget: onzichtbaar op een donkere
       header. Volgt nu --header-ink, dus wit in het donker en donker in
       het licht. --- */
@media (max-width:1024px){
  body.varex-template [data-elementor-type="header"] button.elementskit-menu-hamburger > .ekit-menu-icon,
  body.varex-template [data-elementor-type="header"] .elementskit-menu-hamburger .ekit-menu-icon{color:var(--header-ink)!important;}
  body.varex-template [data-elementor-type="header"] button.elementskit-menu-hamburger:hover > .ekit-menu-icon{color:var(--brand)!important;}
  body.varex-template button.elementskit-menu-close > .ekit-menu-icon,
  body.varex-template .elementskit-menu-close .ekit-menu-icon{color:var(--footer-ink)!important;}
  body.varex-template button.elementskit-menu-close:hover > .ekit-menu-icon{color:var(--footer-brand)!important;}
}

/* --- 20. Troeven op de projectpagina.
       Het vinkje is een gestreepte SVG (fill="none" stroke="currentColor"),
       maar FIX 6 zette fill:currentColor op elke .check-icon svg voor de
       Elementor-icoonwidgets. Een CSS-fill overrulet het fill-attribuut in de
       markup, dus het vinkje werd een gevulde vlek in plaats van een haakje.
       Hier alleen voor de troeven teruggezet, zodat de icoonwidgets elders
       ongemoeid blijven. Daarnaast strakker gezet: minder ruimte tussen de
       troeven en minder padding op mobiel. --- */
body.varex-template .troef-item .check-icon svg{fill:none;stroke:currentColor;stroke-width:3;width:13px;height:13px;}
body.varex-template .troef-item .check-icon{width:24px;height:24px;margin-top:1px;flex:0 0 24px;}

body.varex-template .troeven-grid{gap:8px;}
body.varex-template .troef-item{gap:14px;padding:14px 16px;align-items:flex-start;border:1px solid transparent;transition:border-color .18s ease, background .18s ease;}
body.varex-template .troef-item:hover{border-color:var(--border);background:var(--surface);}
body.varex-template .troef-item p{font-size:15px;line-height:1.5;margin:0;}

@media (max-width:760px){
  body.varex-template .troeven-grid{gap:6px;}
  body.varex-template .troef-item{padding:12px 14px;gap:11px;}
  body.varex-template .troef-item .check-icon{width:21px;height:21px;flex:0 0 21px;margin-top:2px;}
  body.varex-template .troef-item .check-icon svg{width:11px;height:11px;}
}

/* --- 21. Mobiel menu volgt nu het thema in plaats van vast donker te zijn.
       Het logo staat als achtergrondafbeelding op de link; de <img> blijft
       staan voor de afmetingen maar wordt onzichtbaar gemaakt. Zo kan het
       per thema wisselen zonder de widget-instelling aan te passen. --- */
@media (max-width:1024px){
  body.varex-template .elementskit-menu-offcanvas-elements,
  body.varex-template .elementskit-menu-offcanvas-elements .elementskit-nav-identity-panel{background-color:var(--header-bg)!important;}
  body.varex-template .elementskit-menu-offcanvas-elements{border-right-color:var(--border)!important;}
  body.varex-template .elementskit-menu-offcanvas-elements .elementskit-nav-identity-panel{border-bottom-color:var(--border)!important;}
  body.varex-template .elementskit-menu-offcanvas-elements .ekit-menu-nav-link{color:var(--header-ink)!important;border-bottom-color:var(--border);}
  body.varex-template .elementskit-menu-offcanvas-elements .ekit-menu-nav-link:hover,
  body.varex-template .elementskit-menu-offcanvas-elements .current-menu-item > .ekit-menu-nav-link{color:var(--brand)!important;}
  body.varex-template .elementskit-menu-offcanvas-elements .elementskit-submenu-panel .ekit-menu-nav-link{color:var(--ink-soft)!important;}
  body.varex-template .elementskit-menu-close{background:transparent!important;border-color:var(--border)!important;color:var(--header-ink)!important;}
  body.varex-template .elementskit-menu-close:hover{color:var(--brand)!important;border-color:var(--brand)!important;}
  body.varex-template .elementskit-menu-overlay{background:rgba(20,20,20,.45)!important;}
  body.varex-template .elementskit-nav-logo{display:inline-block;background-image:url("https://varex-group.be/wp-content/uploads/2025/09/website-logo-scaled.png");background-size:contain;background-repeat:no-repeat;background-position:left center;}
  body.varex-template .elementskit-nav-logo img{opacity:0;}
}
:root[data-theme="dark"] body.varex-template .elementskit-nav-logo{background-image:url("https://varex-group.be/wp-content/uploads/2026/08/VG-wit-liggend.png");}
:root[data-theme="dark"] body.varex-template .elementskit-menu-overlay{background:rgba(6,10,9,.7)!important;}