:root{
  --hs-mm-z: 2147483645; /* popup ligt 1 hoger */
  --hs-mm-bg: rgba(0,0,0,.72);
  --hs-mm-panel: #fff;
}

/* Toggle button */
.hs-mobile__toggle{
  position: fixed; top:14px; right:14px;
  width:44px; height:44px; border-radius:10px;
  border:1px solid #e3e3e3; background:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:calc(var(--hs-mm-z) + 1);
}
.hs-mobile__icon--close{ display:none; }
.hs-mobile__toggle[aria-expanded="true"] .hs-mobile__icon--burger{ display:none; }
.hs-mobile__toggle[aria-expanded="true"] .hs-mobile__icon--close{ display:block; }

/* Panel + slide-in */
.hs-mobile__panel{ position:fixed; inset:0; background:var(--hs-mm-bg);
  opacity:0; pointer-events:none; transition:opacity .18s ease; z-index:var(--hs-mm-z); }
.hs-mobile__panel.is-open{ opacity:1; pointer-events:auto; }
.hs-mobile__inner{ position:absolute; top:0; right:0; bottom:0; width:min(86vw,380px);
  background:var(--hs-mm-panel); box-shadow:-20px 0 60px rgba(0,0,0,.25);
  transform:translateX(100%); transition:transform .2s ease; padding:24px 18px; }
.hs-mobile__panel.is-open .hs-mobile__inner{ transform:translateX(0); }

/* Links & socials */
.hs-mobile__links{ list-style:none; margin:50px 0 16px; padding:0; }
.hs-mobile__links a{ display:block; padding:12px 8px; text-decoration:none; color:#111; font-weight:700; font-size:18px; border-radius:10px; }
.hs-mobile__links a:hover{ background:#f4f5f4; }
.hs-mobile__socials{ display:flex; gap:14px; padding:8px 8px 0; }
.screen-reader-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); }

/* Verberg boven 981px */
@media (min-width:981px){
  #hs-mobile-toggle, #hs-mobile-menu { display:none !important; }
}
/* Plaats toggle in jouw mobiele header-section (niet sticky) */
.hs-mobile-header { position: relative; }
.hs-mobile-header .hs-mobile__toggle{
  position: absolute;          /* ipv fixed */
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  box-shadow: none;
  z-index: 5;
}
.hs-mobile-header .hs-mobile__toggle svg{ color:#fff; } /* witte "strepen" */

/* Verberg Divi's eigen hamburger als die er nog is */
@media (max-width:980px){
  .et_mobile_nav_menu,
  .et_pb_menu__menu-toggle { display:none !important; }
}
/* ==== HS mobile menu – dark variant (#1A1A1A) + bigger white icon ==== */

/* Paneel zelf */
:root{
  --hs-mm-panel: #1A1A1A;             /* donker paneel */
  --hs-mm-bg: rgba(0,0,0,.60);         /* iets donkerdere overlay */
}

.hs-mobile__panel.is-open .hs-mobile__inner{
  background: var(--hs-mm-panel);
}

/* Menu links: wit en groter */
.hs-mobile__links{ margin: 40px 0 24px; }
.hs-mobile__links a{
  color: #fff;
  font-size: 34px;                     /* groter, zoals voorbeeld */
  font-weight: 700;
  letter-spacing: .5px;
  padding: 16px 8px;
}
.hs-mobile__links a:hover{
  background: #222;                    /* subtiele hover in dark */
}

/* Socials onderin: wit */
.hs-mobile__socials{ color:#fff; }
.hs-mobile__socials a{ color:#fff; opacity:.9; }
.hs-mobile__socials a:hover{ opacity:1; }

/* Toggle binnen jouw mobiele header-section: niet sticky, groot, wit */
.hs-mobile-header { position: relative; }
.hs-mobile-header .hs-mobile__toggle{
  position: absolute;                  /* niet meer fixed/sticky */
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;                         /* groter knopje */
  height: 56px;
  border: 0;
  background: transparent;             /* transparant, geen rand */
  box-shadow: none;
  z-index: 5;
}

/* Hamburger/close icon wit en groter */
.hs-mobile-header .hs-mobile__toggle svg{
  color: #fff;
  width: 36px;
  height: 36px;
}

/* Wanneer paneel open is, mag de body niet scrollen: al in JS geregeld */

/* Verberg eventuele Divi-hamburger als die nog in DOM staat */
@media (max-width:980px){
  .et_mobile_nav_menu,
  .et_pb_menu__menu-toggle { display:none !important; }
}
/* ==== HS mobile menu – dark variant (#1A1A1A) + bigger white icon ==== */

/* Paneel zelf */
:root{
  --hs-mm-panel: #1A1A1A;             /* donker paneel */
  --hs-mm-bg: rgba(0,0,0,.60);         /* iets donkerdere overlay */
}

.hs-mobile__panel.is-open .hs-mobile__inner{
  background: var(--hs-mm-panel);
}

/* Menu links: wit en groter */
.hs-mobile__links{ margin: 40px 0 24px; }
.hs-mobile__links a{
  color: #fff;
  font-size: 34px;                     /* groter, zoals voorbeeld */
  font-weight: 700;
  letter-spacing: .5px;
  padding: 16px 8px;
}
.hs-mobile__links a:hover{
  background: #222;                    /* subtiele hover in dark */
}

/* Socials onderin: wit */
.hs-mobile__socials{ color:#fff; }
.hs-mobile__socials a{ color:#fff; opacity:.9; }
.hs-mobile__socials a:hover{ opacity:1; }

/* Toggle binnen jouw mobiele header-section: niet sticky, groot, wit */
.hs-mobile-header { position: relative; }
.hs-mobile-header .hs-mobile__toggle{
  position: absolute;                  /* niet meer fixed/sticky */
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;                         /* groter knopje */
  height: 56px;
  border: 0;
  background: transparent;             /* transparant, geen rand */
  box-shadow: none;
  z-index: 5;
}

/* Hamburger/close icon wit en groter */
.hs-mobile-header .hs-mobile__toggle svg{
  color: #fff;
  width: 36px;
  height: 36px;
}

/* Wanneer paneel open is, mag de body niet scrollen: al in JS geregeld */

/* Verberg eventuele Divi-hamburger als die nog in DOM staat */
@media (max-width:980px){
  .et_mobile_nav_menu,
  .et_pb_menu__menu-toggle { display:none !important; }
}
/* ===== FORCE OVERRIDES (mobile) ===== */
@media (max-width:980px){

  /* 1) Slide-in altijd boven ALLES */
  #hs-mobile-menu{
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999999 !important;       /* hoger dan Divi */
  }
  #hs-mobile-menu .hs-mobile__inner{
    position: absolute !important;
    right: 0; top: 0; bottom: 0;
    width: min(86vw, 420px);
    background: #1A1A1A !important;
  }

  /* 2) Hamburger/X altijd erbóven (zodat je kunt sluiten) */
  #hs-mobile-toggle{
    z-index: 100000000 !important;
  }

  /* 3) Knop NIET sticky: echt in je section laten meescrollen */
  /*  - gebruik bij voorkeur een class op je mobiele header-section: hs-mobile-header */
  .hs-mobile-header{ position: relative !important; overflow: visible !important; }
  .hs-mobile-header #hs-mobile-toggle{
    position: absolute !important;      /* niet fixed */
    right: 16px; top: 50%;
    transform: translateY(-50%);
    width: 56px; height: 56px;
    border: 0; background: transparent; box-shadow: none;
  }
  .hs-mobile-header #hs-mobile-toggle svg{ color:#fff; width:36px; height:36px; }

  /* 4) Als je mobiele header/sectie door Divi sticky/fixed wordt gemaakt: uitzetten */
  .hs-mobile-header.et_pb_sticky,
  .hs-mobile-header.et-fixed-header,
  .hs-mobile-header[class*="sticky"],
  .hs-mobile-header[class*="fixed"]{
    position: static !important;
    top: auto !important;
  }

  /* 5) Eventuele Divi-hamburger verbergen */
  .et_mobile_nav_menu,
  .et_pb_menu__menu-toggle{ display:none !important; }
}

/* ==== Forceer slide-in boven sticky header ==== */
@media (max-width:980px){
  /* Paneel full-screen, hoogste z-index */
  #hs-mobile-menu{
    position: fixed !important;
    inset: 0 !important;                 /* top/right/bottom/left = 0 */
    width: 100vw !important;
    height: 100vh !important;
    z-index: 2147483645 !important;      /* hoger dan Divi sticky */
  }
  #hs-mobile-menu .hs-mobile__inner{
    position: absolute !important;
    right: 0; top: 0; bottom: 0;
    z-index: 1 !important;               /* binnen het paneel */
  }

  /* Toggle (hamburger/X) nog hoger, zodat je altijd kunt sluiten */
  #hs-mobile-toggle{
    z-index: 2147483646 !important;
  }

  /* (optioneel) Als je sticky header extreem hoog staat, demp ‘m iets */
  .et-fixed-header,
  .et_pb_sticky{ z-index: 1000 !important; }
}

/* === FINAL OVERRIDES: zet slide-in boven sticky header + maak toggle niet-sticky === */
@media (max-width:980px){

  /* 1) Paneel boven ALLES */
  #hs-mobile-menu{
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 2147483646 !important;            /* max-32bit-veilig */
    background: var(--hs-mm-bg, rgba(0,0,0,.60)) !important;
  }
  #hs-mobile-menu .hs-mobile__inner{
    position: absolute !important;
    top: 0; right: 0; bottom: 0;
    width: min(86vw, 420px) !important;
    background: var(--hs-mm-panel, #1A1A1A) !important;
    z-index: 2147483647 !important;            /* binnen paneel boven overlay */
  }

  /* 2) Toggle mag NOOIT fixed zijn (anders blijft hij sticky) */
  #hs-mobile-toggle{
    position: absolute !important;             /* expliciet niet fixed */
    right: 16px !important;
    top: 16px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    z-index: 2147483647 !important;            /* boven paneel zodat je kunt sluiten */
  }
  #hs-mobile-toggle svg{
    color:#fff !important;
    width:36px !important;
    height:36px !important;
  }

  /* 3) Demp eventuele bizarre z-index van de sticky header van Divi */
  .et-fixed-header,
  .et_pb_sticky,
  .et_pb_sticky--active {
    z-index: 9999 !important;
  }
}

/* === HS: force non-sticky toggle and top-most stacking === */
@media (max-width:980px){
  #hs-mobile-toggle{
    position: absolute !important;   /* niet fixed */
    right: 16px !important;
    top: 16px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: 2147483647 !important;  /* boven het panel (sluiten werkt altijd) */
  }
  #hs-mobile-toggle svg{ color:#fff !important; width:36px !important; height:36px !important; }
}