.elementor-7290 .elementor-element.elementor-element-00b9eeb{--display:flex;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-c28ac59 */.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; } }
/* =========================================================
   MOBILE FIX – HEADER & MENU BOVEN HERO (iOS / Android)
   ========================================================= */
@media (max-width: 680px){

  /* Header altijd boven hero */
  .topbar,
  header.topbar{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 2147483647 !important;
  }

  /* Menu drawer + overlay */
  nav.drawer,
  #primary-nav,
  .backdrop,
  label.backdrop{
    position: fixed !important;
    z-index: 2147483647 !important;
  }

  /* Hero mag NOOIT boven header komen */
  .hero,
  .hero-outer,
  .hero *,
  .hero video{
    position: relative !important;
    z-index: 0 !important;
  }

  /* Kill mobile Safari stacking bugs */
  .hero,
  .hero-outer{
    transform: none !important;
    filter: none !important;
    isolation: auto !important;
  }
}/* End custom CSS */



/* Start custom CSS *//* ================= POPULAIRE ACCESSOIRES SIDEBAR ================= */

.accessory-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  box-shadow:var(--shadow);
}

.accessory-card h4{
  margin:0 0 12px;
  font-size:16px;
  font-weight:900;
  color:var(--accent);
}

/* Grid precies passend in smalle kolom */
.accessory-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.acc-item{
  position:relative;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  text-align:center;
  transition:.2s ease;
}

.acc-item:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(17,24,39,.12);
}

.acc-item img{
  width:100%;
  max-height:80px;
  object-fit:contain;
  margin-bottom:6px;
}

.acc-item strong{
  display:block;
  font-size:13px;
  font-weight:900;
  margin-bottom:2px;
}

.acc-item .price{
  font-size:12px;
  color:var(--muted);
}

/* Kortingsbadge */
.badge-sale{
  position:absolute;
  top:8px;
  left:8px;
  background:var(--cta);
  color:var(--cta-text);
  font-size:11px;
  font-weight:900;
  padding:4px 6px;
  border-radius:6px;
}

/* CTA */
.acc-cta{
  width:100%;
  margin:12px 0 10px;
  text-align:center;
}

/* Trust bullets */
.acc-trust{
  list-style:none;
  margin:0;
  padding:0;
  font-size:13px;
  color:var(--muted-2);
}

.acc-trust li{
  margin:4px 0;
}

/* Sticky alleen desktop */
@media (min-width:1025px){
  .accessory-card{
    position:sticky;
    top:calc(var(--topbar-h-desktop) + 18px);
  }
}/* End custom CSS */