.elementor-26 .elementor-element.elementor-element-5e61111{--display:flex;}:root{--page-title-display:none;}
/* Start custom CSS for html, class: .elementor-element-7bce03f */.acc-trust{
  list-style:none;
  margin:14px 0 0;
  padding:0;
  display:grid;
  gap:10px;
}

.acc-trust li{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  color:var(--muted-2);
  font-size:14px;
}

.acc-ico{
  width:26px;height:26px;
  border-radius:8px;
  display:grid;
  place-items:center;
  background:var(--accent-soft);
  color:var(--accent);
  flex:0 0 26px;
}

.acc-ico svg{
  width:16px;height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* vrachtwagen-icoon iets “voller” laten ogen */
.acc-ico.is-van svg{
  stroke-width:2.0;
}
.accessory-card{
  padding:18px;              /* was 14px */
}
.acc-cta{
  margin:18px 0 14px;        /* was 12px 0 10px */
}
.accessory-grid{
  gap:14px;                  /* was 10px */
}
@media (min-width:1025px){
  .accessory-card{
    padding:20px;
  }
}
/* EXTRA RUIMTE tussen proces (3/4) en populaire accessoires */
.process {
  margin-bottom: 28px; /* ruimte ONDER stap 3/4 */
}

/* Titel + kaart accessoires iets los van bovenkant */
.popular-accessories,
.accessories,
.acc-panel {
  margin-top: 18px;
}
/* Benefits onder webshop knop */
.benefits{
  display:grid;
  gap:10px;
  margin-top:14px;
}

.benefit-item{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  color:#1F2A37;
  font-size:14px;
}

/* Algemene icon stijl */
.benefit-icon{
  width:26px;
  height:26px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  flex-shrink:0;
}

/* Groene check (zoals foto 2) */
.benefit-icon.check{
  background:#E8F7EE;
  color:#1F9D55;
  box-shadow:0 4px 10px rgba(31,157,85,.25);
  font-weight:900;
}

/* Verzending icoon */
.benefit-icon.truck{
  background:#EAF2FF;
  color:#2563EB;
  box-shadow:0 4px 10px rgba(37,99,235,.25);
}
/* ===== Footer mobile alignment fix ===== */
@media (max-width: 680px){
  .footer-panel .wrap{ padding-left:16px; padding-right:16px; }

  /* Forceer 1 kolom i.p.v. 2 */
  .footer-panel .f-cols{
    display:grid;
    grid-template-columns: 1fr !important;
    gap:16px;
    align-items:stretch;
  }

  /* Kaarten altijd volle breedte */
  .footer-panel .f-box{
    width:100%;
    min-width:0;
  }

  /* CTA knoppen netjes onder elkaar / niet half */
  .footer-panel .footer-cta{
    display:grid;
    grid-template-columns: 1fr;
    gap:10px;
  }
  .footer-panel .footer-cta a{
    width:100%;
    text-align:center;
  }

  /* Openingstijden rijtjes breken niet */
  .footer-panel .hours div{
    display:flex;
    justify-content:space-between;
    gap:12px;
  }
}

/* (optioneel) voorkomt rare overflow op iOS */
.footer-panel, .footer-panel *{ box-sizing:border-box; }

}
.topbar{ z-index:2147483644; }

}

/* Menu knop altijd klikbaar/zichtbaar */
.menu-btn{
  position:relative;
  z-index:2147483647 !important;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}

/* Backdrop onder topbar, boven de pagina */
.backdrop{
  z-index:2147483645 !important;
}

/* Drawer boven alles */
nav.drawer{
  padding-top: 24px; /* of 16px */


}
.topbar{
  background:var(--surface) !important; /* i.p.v. rgba */
  backdrop-filter:none !important;      /* test: zet dit uit */
}

nav.drawer{
  top: 0;
}
#nav-toggle:checked ~ header.topbar{
  opacity: 0.35;
  pointer-events: none;
}

/* === FORCE MENU ABOVE EVERYTHING (Elementor-safe) === */
header.topbar{
  z-index: 2147483646 !important;
}

header.topbar .backdrop{
  z-index: 2147483646 !important;
}

header.topbar nav.drawer{
  z-index: 2147483647 !important;
  position: fixed !important; /* extra zekerheid */
}

/* Alles op de pagina lager zetten (incl. floating blocks) */
main, main *{
  z-index: auto;
}

/* USP/“Ophalen of opsturen”/cards altijd onder menu */
.usp, .usp-outer{
  position: relative !important;
  z-index: 0 !important;
}
/* FORCE: drawer-content hoger uitlijnen (override alles) */
header.topbar nav#primary-nav.drawer{
  padding-top: 0 !important;          /* haalt die grote top-ruimte weg */
}

header.topbar nav#primary-nav.drawer > .inner{
  padding-top: 12px !important;       /* nette ruimte boven eerste link */
}

/* Optioneel: iets compacter op mobiel */
@media (max-width:680px){
  header.topbar nav#primary-nav.drawer > .inner{
    padding-top: 8px !important;
  }
}
/* ===== Contact icon alignment – BrokenPhone ===== */

.contact-cards,
.contact-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}
@media (max-width:680px){
  .contact-cards,
  .contact-list{grid-template-columns:1fr}
}

.contact-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
}

.contact-icon{
  width:40px;
  height:40px;
  border-radius:12px;
  display:grid;
  place-items:center;
  flex:0 0 40px;
  background:var(--surface-2);
}

.contact-icon svg{
  width:22px;
  height:22px;
}

/* Brand kleuren */
.icon-wa{background:#E9F9F1}
.icon-wa svg{color:#25D366}

.icon-phone svg{color:var(--accent)}
.icon-mail svg{color:var(--accent)}
.icon-plan svg{color:var(--accent)}

.contact-text{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.contact-text strong{
  font-weight:900;
  color:var(--accent);
}

.contact-text span{
  font-size:14px;
  color:var(--muted);
}
/* =========================================================
   BrokenPhone – CONTACT ALIGNMENT FIX (Elementor-safe)
   Plak dit HELEMAAL onderaan je CSS
   ========================================================= */

/* ---------- 1) Contactgegevens: icon + tekst + arrow strak ---------- */
/* Werkt voor jouw .contactbox/.contact-row variant */
.contactbox .contact-list{ 
  display:grid !important;
  grid-template-columns:1fr !important;
}

.contactbox .contact-row{
  display:grid !important;
  grid-template-columns: 44px 1fr 24px !important; /* icon | tekst | pijl */
  align-items:center !important;
  gap:14px !important;
}

.contactbox .contact-row .contact-icon{
  width:40px !important;
  height:40px !important;
  border-radius:12px !important;
  display:grid !important;
  place-items:center !important;
  background:var(--surface-2) !important;
  margin:0 !important;
}

.contactbox .contact-row .contact-icon svg{
  width:22px !important;
  height:22px !important;
  display:block !important;
}

/* Tekstblok altijd links en netjes */
.contactbox .contact-row .contact-text{
  display:flex !important;
  flex-direction:column !important;
  gap:2px !important;
  min-width:0 !important;
}

.contactbox .contact-row .contact-text strong{
  font-weight:900 !important;
  color:var(--accent) !important;
  line-height:1.15 !important;
  margin:0 !important;
}

.contactbox .contact-row .contact-text span{
  font-weight:900 !important;
  color:var(--text) !important;
  line-height:1.25 !important;
  margin:0 !important;
}

.contactbox .contact-row .contact-text small{
  color:var(--muted) !important;
  line-height:1.35 !important;
  margin:0 !important;
}

/* Arrow rechts exact gecentreerd */
.contactbox .contact-row .arrow{
  justify-self:end !important;
  align-self:center !important;
  line-height:1 !important;
  font-size:18px !important;
  opacity:.65 !important;
  margin:0 !important;
}

.contactbox a.contact-row:hover .arrow{ opacity:1 !important; }

/* WhatsApp icon kleur consistent */
.contactbox .contact-row .icon-wa{ background:#E9F9F1 !important; }
.contactbox .contact-row .icon-wa svg{ color:#25D366 !important; }

/* ---------- 2) Openingstijden: 2 kolommen (label | tijd) ---------- */
.openingstijden{
  display:grid !important;
  grid-template-columns: 1fr auto !important;
  gap:10px 26px !important;
  max-width:520px !important;
}

.openingstijden .time{
  text-align:right !important;
  font-weight:900 !important;
  color:var(--accent) !important;
}

/* Als je openingstijden nog losse <p> of <div> zijn: vangt veel gevallen af */
.openingstijden > *{
  margin:0 !important;
}

/* ---------- 3) Social pills: gelijk hoogte + perfecte baseline ---------- */
.social-row{
  display:flex !important;
  gap:12px !important;
  flex-wrap:wrap !important;
  align-items:center !important;
}

.social-pill{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:10px 14px !important;
  min-height:44px !important;
  border-radius:12px !important;
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  box-shadow:var(--shadow) !important;
}

.social-pill svg,
.social-pill img{
  width:18px !important;
  height:18px !important;
  display:block !important;
}

/* ---------- 4) Bedrijfsgegevens: label | value netjes ---------- */
.bizdata{
  display:grid !important;
  grid-template-columns: 1fr auto !important;
  gap:10px 26px !important;
  max-width:620px !important;
}

.bizdata span{ 
  color:var(--muted) !important;
  font-weight:700 !important;
}

.bizdata code{
  justify-self:end !important;
  white-space:nowrap !important;
}/* End custom CSS */