:root {
	--black: #232323;
	--white: #FFFFFF;
  --grey: #edf6f9; 
  --lichtblauw: #8dd5ed; 
	--groen: #149a96; /*primair */
  --donkergroen: #0C6B6E;
  --geel: #ffd426; /*conversiekleur */ 
  --blauw:#21a0bd;/* secundair*/
  
}


/* 
Style sheet: EcomFast--
Versie 1.6 
*/
html {scroll-behavior: smooth;}
html, body {overflow-x: clip !important;}
main#primary.site-main {overflow: visible !important;} /* keep sticky working*/

/* Fonts set up */
h1, h2, h3,  h4, h5,  h6  {font-family: "Ubuntu", sans-serif;font-weight:400; margin: 0; color: var(--black); /*letter-spacing: -0.15px;*/}
h1.entry-title{text-align:left;font-size: 38px;}
.wp-block-heading.has-text-align-center {margin-bottom: 12px;} /*cental headings*/
.main header ul li a { font-weight:400;}
p, .main p {font-family: "Poppins", sans-serif; font-weight:400;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; 
  margin: 0.5em 0;}
span {font-family: "Poppins", sans-serif; font-weight:400;font-size: 15px;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
bdi span {font-family: "Ubuntu", sans-serif;}
h1, h2, h3 {font-size: clamp(22px, 2vw, 26px);}
h4, h5 {font-size: clamp(18px, 2vw, 22px);}
p {margin-bottom: 1em;}

    a.red, a.black, a.grey {font-family: "Poppins", sans-serif;}
    button a {font-family: "Ubuntu", sans-serif;;letter-spacing: 6%;}
    figcaption {font-family: "Poppins", sans-serif;}
    main a, .main strong, .main li, .main em, .main div{font-family: "Poppins", sans-serif;}
    ul.tabs.wc-tabs a {font-family: "Poppins", sans-serif;}

a {text-decoration: none;}
figcaption {font-weight: 500;font-size: 14px; -webkit-font-smoothing: antialiased;}
.category-blogs .entry-meta {font-size:12px;}
/* end fonts */

/* Algemeen */
.main a {text-decoration: none;color:inherit;}
.main a:visited{color:inherit;}
.main a:hover{color:inherit;}
.main ul{margin-left:0;}
.wp-block-quote {border-left: 0.25em solid var(--groen);}
.wp-block-video {margin: 32px 0;max-width: 640px;}
section.content {padding:0px 0;background: radial-gradient(50% 50% at 50% 60%, #E5F4F1 0%, #FFF 100%);}

.wp-block-group.bgsg {
  background: radial-gradient(50% 50% at 50% 60%, #E5F4F1 0%, #FFF 100%);
  margin: 16px calc(50% - 50vw);max-width:100vw;width:100vw;padding: 0 16px;
}
.wp-block-group__inner-container {max-width: 1400px;margin: auto;}
/* wides, margin en paddings */
.post.type-post {max-width: 1384px;margin: auto;}
body:not(.home) .Ecomfast-container {padding: 32px 0 44px;}
.page.type-page {max-width: 1400px;margin: 0 auto;padding: 0px;}
.post.type-post {max-width: 1384px;margin: auto;padding: 16px 8px;}
.post.type-post .entry-meta {display: none;}
body.error404 #primary {max-width: 1400px;padding: 4% 1%;}

/* de juiste manier van 100% wide */
.wp-block-columns.alignfull.wide, .wp-block-columns.alignfull, .wp-block-columns.wide {margin: 64px calc(50% - 50vw);max-width:100vw;width:100vw;}
.wp-block-columns.wide{}
.page .wp-block-columns{column-gap: 100px;}/* text pages*/

@media screen and (min-width: 771px)  {
  #primary{position: relative;overflow: hidden; margin: auto;padding: 0 8px;}
}
@media screen and (max-width: 770px)  {
  #primary{position: relative;overflow: hidden; margin: auto;padding: 0 0;}
}
#secondary-menu li a img { display: none; } /* NO IMAGES HERE*/


/* ================================================S
   HEADER.inhoud - top line
   ================================================

/* 1. ---- HEADER & topline  --------------- */
#top-menu.top-menu {background-color: var(--groen);position: relative;}
#top-menu .wrap.columns {display: flex;align-items: center;position: relative;}

/* Geheel links, buiten de wrap */
#top-menu span.rating  {color: #fff;}
.stars {margin: 4px;line-height: 2.4em;}
#top-menu .column.header-usps {
  flex: 0 0 auto !important;
  min-width: unset !important;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 25px;
  align-items: center;
  white-space: nowrap;
  color: #fff;
}
      .header-usps.usp-item{ font-size: 12px;font-weight: 500; display: flex;
        align-items: center;}
      .header-usps .usp-item::before {
        content: '';
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-right: 2px;
        background-image: url("../img/raphael_check.svg");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        vertical-align: middle;
        flex-shrink: 0;
      }

/* RECHTS — overschrijft frame.css */
#top-menu .column.top-navigation {
  flex: 0 0 auto ;
  min-width: unset ;
  margin-left: auto ;
  display: flex;
  align-items: center;
}
ul#menu-topmenu {margin: 2px;list-style: none; font-size: 15px;}
ul#menu-topmenu a {font-family: "Poppins", sans-serif; font-weight: 400; color: #fff;}
ul#menu-topmenu a:hover {color:var(--lichtblauw);}

/* ==========================================================================
   2. masthead elementem MAIN
========================================================================== */
/* Zorg dat de kolommen in de header netjes naast elkaar staan */
#masthead .columns {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 38px;
}
.site-header .columns {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
  height: 90px;
  width: 100%;
  box-sizing: border-box;
} 
#masthead {border-bottom: 0.5px solid #eee;background: #fff;}
#masthead .wrap .columns .column:not(.logo) {flex: 2;display: flex;}

/* 3e column which include menu, search, phone, cart*/
div.column.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
#secondary-menu {
  display: flex;        
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 24px;
}

/*ZOEKBALK */
.search-wrapper {position: relative;display: flex;align-items: center;}
#live-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    display: none;
    z-index: 999;
}
    .search-wrapper input[type="text"] {
        /* width: 100%; */
        padding: 8px 90px 8px 16px; /* ruimte rechts voor icoon */
        border-radius: 8px;
        border: 1px solid #5AA69A;
        font-size: 15px;
    }
    .search-wrapper .search-submit {
        position: absolute;
        right: 12px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        display: flex;
        align-items: center;
    }
    .search-wrapper .search-submit svg {
        width: 18px;
        height: 18px;
    }
        .live-search-item {
            display: flex;
            gap: 12px;
            padding: 12px;
            align-items: center;
            text-decoration: none;
            border-bottom: 1px solid #f1f1f1;
        }
        .live-search-item img {width: 50px;height: 50px;object-fit: cover;}
        .ls-content {display: flex;flex-direction: column;}
        .ls-title {font-size: 14px;color: #222;}
        .ls-price {font-size: 13px;font-weight: 600;}

/* phone sectie */
.phone-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #111;
  font-family: sans-serif;
}
.phone-cta:hover .phone-number {text-decoration: underline;}
.phone-text {display: flex;flex-direction: column;line-height: 1.3;}
.phone-label {font-size: 12px;color: #555;}
.phone-number {font-size: 16px;font-weight: 700;color: #161616;}

/* end 3e column */
/* =============================================
   responsive points
============================================= */

@media (max-width: 1100px) {
  section.phone a.phone-cta {display: none;}
}

@media (max-width: 1030px) {
  section.keurmerk {display: none;}
}

@media (max-width: 920px) {
  div.column.nav nav {display: none;}
}

@media (min-width: 771px) {
  .site-branding .small-logo {display: none;}
    #site-navigation.toggled #primary-menu {display: block;width: 300px;}
    /*logo*/
    .site-branding{ min-width: 150px;max-width: 250px;}
    /*keurmerk*/
    .keurmerk { min-width: 96px;max-width: 96px;}
    .mobile-usps, .keurmerk-mob{display: none;}
    section.account-mob {display: none;}
    .search-toggle-btn{display: none;}
}

@media (max-width: 770px) {
  #masthead .columns {gap:10px;}
  #top-menu .wrap.columns {height: 32px;}
  .site-branding {min-width: 90px;}
  div.column.nav {min-width: 138px;flex: 0!important;}
 
  .site-header .wrap {padding: 0 16px;}
  .site-header .columns {height: 64px;gap: 10px;}
    /* Groot logo verbergen, klein logo tonen */
  .site-branding .logo {display: none!important;}
  .site-branding .small-logo {display: block;}
  .column.top-navigation {display: none!important;}
  .keurmerk-mob a.but {position: absolute;right: 8px; top:0;display: none;}
  .keurmerk-mob {display: block;}
  .keurmerk-mob a.mob {position: absolute;right: 8px; top:0;}
  .keurmerk-mob a.mob figure {margin: 0;}
  #top-menu .column.header-usps {display: none;}
  .mobile-usps {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 8px 16px;
      padding: 10px 16px;
      border-radius: 6px;
      background-color: var(--grey);
      justify-content: center;
    }
    .column.header-usps.mobile-usps .usp-item:nth-child(3) {display: none;}
    .usp-item{ font-size: 10px;}
    section.search {
          position: relative;
          top:-4px;
          right: 0px;
          left: 0px;
          width: 44px;
          /* transform: translateY(-100%);  */
          transition: transform 0.3s ease;
          z-index: 100;
    }
    section.search button.search-toggle-btn {background: #fff;border:none; transition: transform 0.3s ease;}
    .search-toggle-btn.rotated {transform: rotate(45deg);}
    .search-wrapper{display: none;}
      .search-wrapper.active {
          transform: translateY(0);
          justify-content: flex-end;
          display: flex;
          position: absolute;
        top:41px;
        right: -52px;
        z-index: 98;
      }
      div.menu-secondary-menu-container{display: none;} 
      #secondary-menu li a {
        font-size: 13px;
        padding: 5px 8px;
      }
      section.account-mob {display: flex; width: 40px;height:40px; position: absolute;;right: 56px;align-items:center;}
      /* Cart teller wat kleiner */
      .cart-icon-w a.cart img {
        width: 38px;
        height: 38px;
      }

    

}
/* prevend kruis hamburger*/
.hamburger--collapse .hamburger-inner {
  top: 50% !important;
  bottom: auto !important;
  margin-top: -2px !important;
  transform: none !important;
  background-color: #000 !important;
  transition: none !important;
}

.hamburger--collapse .hamburger-inner::before {
  top: -10px !important;
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
}

.hamburger--collapse .hamburger-inner::after {
  bottom: -10px !important;
  top: auto !important;
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
}



/* =====================================
   Multi LEVEL MENU  (3 koloms)
===================================== */

#site-navigation{ 
  flex: 0 0 auto;
  min-width: auto;
  width: auto;}
/* Verberg de tekstuele lijst van het hoofdmenu standaard */
#site-navigation #primary-menu {
    display: none;
    position: absolute;
    top: 100%; /* Direct onder de header */
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 999;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
#site-navigation.toggled #primary-menu {display: block;width: 100%;}
    /* Basis styling voor de menu items in de hamburger-uitklap */
    #primary-menu li {display: block;width: 100%;border-bottom: 1px solid #f0f0f0;}
    #primary-menu li:not(#menu-item-14278):hover {background-color: #f0f0f0;}
    #primary-menu li a {padding: 12px 20px;display: flex; font-weight: 600;}

/* primary kolom1 */

.menu-title a {padding: 8px 20px;}
.menu-item > a{display:flex;align-items:center;gap:10px;}
.menu-cat-image{width:40px;height:32px;object-fit:cover;flex:0 0 40px;border-radius:4px;display:block;border: 0.5px solid #ddd;}
.menu-item-has-children:hover > ul { display: none !important; }
button.close.close{    
    font-size: 20px;
    margin-left: auto;
    font-weight: 900;
    height: 32px;
    background: none;
    border: none;
    display: flex;
    align-self: center;
    justify-content: center;
    padding: 5px 0;
  }
button.back{    
    font-size: 26px;
    margin-left: 0;
     font-weight: 700;
    height: 32px;
    background: none;
    border: none;
    display: flex;
    align-self: center;
    justify-content: center;
    padding: 5px 16px 5px 0;}


.menu-item-has-children > a::after {content: '›';margin-left: auto;font-size: 18px;line-height: 18px;}

.main-navigation li.menu-item-has-children:hover > ul {display: none !important;}
.main-navigation li.menu-item-has-children.focus > ul {display: none !important;}
/*level 2*/
 .mega-menu .menu-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:8px 20px;
    border-bottom: 1px solid #f0f0f0;
    background-color: #fff;
  }
.menu-header .title { font-weight:500; font-size:16px; }
.menu-content .sub-menu li a {
  padding: 19px 20px; 
  font-weight: 400;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  align-items:center;
  justify-content:space-between;
  line-height:1.2;
  }
    .menu-content .sub-menu li{border-bottom: 1px solid #f0f0f0;}
     .menu-content .sub-menu li:hover {background-color:  #f0f0f0;}


@media (min-width: 771px) {/* desktop*/
   
   .mega-menu {
    position: absolute;
    top: 91px;
    left: 8px;
    width: 100vw;
    display: flex;
    align-items: flex-start;
    z-index: 99;
    height: 4px; /* fix tegeb overlay*/
  }
  .mega-menu > div {
    flex: 0 0 300px;
    width: 300px;
  }
  .level-1,
  .level-2,
  .level-3 {
    position: relative;
    top: 0;
    left: 0;
  }
  .level-2,
  .level-3 {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-100%);
    transition: transform .25s ease, opacity .2s ease;
  }
  .level-2.active,
  .level-3.active {
    opacity: 1;
    pointer-events: auto;
    background:#fff; 
    height: 562px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transform: translateX(0);

  }
  button.back {display: none;}
  #menu-item-14442  {pointer-events: none;}
}

/*------------------------------------------------*/

@media (max-width: 770px) { /*mobiel*/
  /* het specifieke item als close gebruiken */
  #menu-item-14442 a {display:flex;align-items:center;}
   #menu-item-14442 a::after {content:'✕';font-size:20px;margin-left:auto;font-weight: 900;height: 26px;}
  #site-navigation #primary-menu {position: relative;}
    .mega-menu {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    align-items: flex-start;
    z-index: 999;
    overflow: hidden;
    display: none;
  }
  #site-navigation.toggled .mega-menu {
    display: block!important;
  }
  .menu-hoofdmenu-container, div.level-1 {width: 100%;}
  .mega-menu > div {width: 100%;}
  .level-1,
  .level-2,
  .level-3 {
    position: relative;
    top: 0;
    left: 0;
  }
   .level-1 {
    transform: translateX(0);
    transition: transform .3s ease;
  }

  .level-1.shift {transform: translateX(-100%);}
  .level-2.shift {transform: translateX(-100%)!important;opacity: 0;pointer-events: none;}
  .level-2,
  .level-3 {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-100%);
    transition: transform .25s ease, opacity .2s ease;
  }
 

  .level-1 { transform:translateX(0); height: 100vh; background: #fff; }
  .level-2,.level-3 { transform:translateX(100%); transition:transform .3s ease; }

  .level-2.active,
  .level-3.active { transform:translateX(0);  opacity: 1;
      pointer-events: auto;
      background:#fff; 
      height: 100vh; 
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      position:absolute;
  }

   
    
  

}
/* =========================
   End menu 
   ========================= */  



/*Buttons*/
/* Filled button */
.wp-block-button.btn-primary .wp-block-button__link {
    background-color: var(--geel);
    color: #232323;
    border-color: var(--geel);outline: 2px solid var(--geel);outline-offset: -2px;
    border-radius: 8px;
    padding: 6px 24px;
    transition: background 0.2s ease;
    font-family: "Ubuntu", sans-serif;
    font-size: 18px;
    font-weight: 500;
}

.wp-block-button.btn-primary .wp-block-button__link:hover {
    background-color: #edf6f9;
    border-color: var(--geel);
    color: var(--black);
}

/* Outline button */
.wp-block-button.btn-outline .wp-block-button__link {
    background: linear-gradient(90deg, #3CA196 0.48%, #20A0BD 100%);
    color: #fff;
    border-radius: 8px;
    padding: 6px 24px;
    font-size: 15px;
    transition: all 0.2s ease;
    font-family: "Ubuntu", sans-serif;
     font-size: 18px;
    font-weight: 500;
}

.wp-block-button.btn-outline .wp-block-button__link:hover {
    background: linear-gradient(90deg, #20A0BD 0%, #3CA196 99.52%);
    color: #edf6f9;
}



/* HOME page*/
.home .entry-title {display: none;}
/* sectie1 hero --------------------------------------------------------------------*/
/* ── Two-column hero layout ── */
@media (min-width: 771px) {
  .content.Hero-home .wrap.columns {
    display: flex;
    flex-direction: row;
    gap: 16px;
    max-width: 1384px;
    margin: 0 auto;
    align-items: flex-start;
  }
}
@media (max-width: 770px) {
  .column.actiebanner {order:3;}
  .content.Hero-home .wrap.columns {
    display: flex;
    flex-direction: column;
    gap: 0px;
    max-width: 1384px;
    margin: 0 auto;
    align-items: flex-start;
  }
   .content.Hero-home .wrap.columns {flex-direction: column;overflow: hidden; width: 100%;}
   .column.homebanner,.column.actiebanner {width: 100%;max-width: 100%;overflow: hidden;}
   .afbeelding.home-top-blokken.hero-mobiel {width: 100%;max-width: 100%;overflow: hidden;}
   .afbeelding.home-top-blokken.hero-mobiel img {width: 100%;height: auto;object-fit: cover;}
   .column.homebanner .container.homebanner {
    height: unset !important;
    aspect-ratio: 480 / 400; /* exacte verhouding van je afbeelding */
    width: 100%;
  }

    
}


.column.homebanner .container.homebanner,
.column.actiebanner .swiper {
  height: clamp(260px, 32vw, 450px)!important;
}
.content.Hero-home figure {margin: 0;}
.column.homebanner {flex: 0 0 calc(60% - 8px); max-width: 820px;}
.column.homebanner .container.homebanner {
  width: 100%;
  /* height: 450px; */
  overflow: hidden;
  position: relative;
  border-radius: 8px;
}
.column.homebanner .container.homebanner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.content.Hero-home .link a {text-decoration: none;display: inline-block;}
.content.Hero-home .link a h5 {
   background-color: var(--geel);
    color: #ffffff;
    border-radius: 8px;
    transition: background 0.2s ease;
    font-family: "Ubuntu", sans-serif;
     text-transform: uppercase;
    padding: 6px 24px;
    font-size: 17px;
    font-weight: 700;
}
/* Knop 1 – gevuld blauw (Keuzehulp) */
.content.Hero-home .link a:first-child h5 {background-color: var(--geel);color: #232323;border-color: var(--geel);outline: 2px solid var(--geel);outline-offset: -2px;}
  .content.Hero-home .link a:first-child:hover h5 {background-color: #E5F4F1;color: var(--black);border-color: var(--geel);}
/* Knop 2 – wit/transparant (Shop) */
.content.Hero-home .link a:last-child h5 {background: linear-gradient(90deg, #3CA196 0.48%, #20A0BD 100%);color:#fff;}
  .content.Hero-home .link a:last-child:hover h5 {background: linear-gradient(90deg, #20A0BD 0%, #3CA196 99.52%);}

/* Column 2 — 40% / 547px slider */
.column.actiebanner {flex: 0 0 calc(40% - 8px); max-width: 547px;}
.column.actiebanner .container.actiebanner {width: 100%;
}

/* ─── Responsive ─── */

@media (max-width: 480px) {
  .afbeelding.home-top-blokken.hero {display: none;}
  .container.populair h3 {margin-bottom: 6px;margin-top: 12px;text-align: center;}
  /* ─── Tekst-artikelen boven de afbeelding ─── */
  .column.homebanner .container article h2 {
    font-size: clamp(1.7rem, 4vw, 2.4rem);
    font-weight: 700;
    color: var(--black);
    margin: 0 0 0.5rem;
    line-height: 1;
    letter-spacing: -0.65px;
    position:absolute; top: 11%; left: 16px; right: 0;
    text-align: left;
    display: block;
  }
  .content.Hero-home article h3 {
    font-size: clamp(15px, 2vw, 18px);
    color: var(--black);
    margin: 1.5rem 0 1.5rem;
    line-height: 1.4;
    position:absolute; top: 25%; left: 16px; right: 0;
    justify-content: flex-start;
    display: flex;
    font-family: "Poppins", sans-serif; font-weight:500;
  }
  /* ─── Knoppen naast elkaar ─── */
  .content.Hero-home .link {
    position: absolute;
    top:66%; 
    z-index: 1;
    right: 0;
    left: 16px;
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 0.5rem;
  }
  .content.Hero-home .link a h5 {padding: 6px 16px;font-size: 15px;font-weight: 700;}

}
@media (min-width: 481px) {
    .afbeelding.home-top-blokken.hero-mobiel {display: none;}
    .afbeelding.home-top-blokken.hero {object-position: right center;} 
    .container.populair h3 {margin-bottom: 12px;margin-top: 0px;text-align: center;}
    /* ─── Tekst-artikelen boven de afbeelding ─── */
    .column.homebanner .container article h2 {
      font-size: clamp(1.7rem, 4vw, 2.4rem);
      font-weight: 700;
      color: var(--black);
      margin: 0 0 0.5rem;
      line-height: 1;
      letter-spacing: -0.65px;
      position:absolute; top: 28%; left: 16px; right: 0;
      text-align: left;
      display: block;
    }
    .content.Hero-home article h3 {
      font-size: clamp(15px, 2vw, 18px);
      color: var(--black);
      margin: 1.5rem 0 1.5rem;
      line-height: 1.4;
      position:absolute; top: 44%; left: 16px; right: 0;
      justify-content: flex-start;
      display: flex;
      font-family: "Poppins", sans-serif; font-weight:400;
    }
    /* ─── Knoppen naast elkaar ─── */
    .content.Hero-home .link {
      position: absolute;
      top:66%; 
      z-index: 1;
      right: 0;
      left: 16px;
      display: flex;
      flex-direction: row;
      gap: 0.75rem;
      justify-content: flex-start;
      flex-wrap: wrap;
      margin-top: 0.5rem;
    }
}


/* Column populair    Swiper silder-----------------------------------------------------------*/
#populair {margin-top: 8px;}
.swiper-slide li.product {max-width: 234px;margin: 0 auto;}
.column.populair {
    width: 100%;
    flex: 0 0 100%;
    padding-left: 0;
    padding-right: 0;
}

.swiper-slide li.product img {
  display: block;
  transition: .3s;
  border: 1px solid var(--grey);
  border-radius: 4px;
  background: #fff;
  width: 100%;
  max-width: 234px;
  height: auto;
  object-fit: contain;
}
.swiper-slide li.product .button {
    display: block;
    background-color: var(--geel);
    border-radius: 3px;
    padding: 5px 4px 0px;
    position: absolute;
    right: 8px;
    top: 8px;
    z-index: 99; 
} 
  .swiper-slide li.product .button:hover {background-color: var(--grey);}

.column.actiebanner .swiper {
  width: 100%;
  height: 450px; /* zelfde hoogte als kolom 1 */
  overflow: hidden;
  border-radius: 8px;
}
/* ─── Slides vullen de container ─── */
.column.actiebanner .swiper-slide {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.column.actiebanner .swiper-slide figure,
.column.actiebanner .swiper-slide picture,
.column.actiebanner .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ─── Tekst overlay onderaan de slide ─── */

.column.actiebanner .fig-content {
  text-align: left;        /* was impliciet, nu expliciet */
  align-items: flex-start;
  position: absolute;
  height: 50%;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem;
  min-height: 164px;
}

.column.actiebanner .fig-content h2 {color: #ffffff;margin: 0 0 0.25rem;}
.column.actiebanner .fig-content p {color: #ffffff;margin: 0 0 0.75rem;}
.column.actiebanner button { all:unset}
.column.actiebanner button a { background-color: var(--geel);;
    color: #ffffff;
    border: 2px solid var(--geel);;
    border-radius: 8px;
    padding: 6px 28px;
    font-size: 15px;
    transition: background 0.2s ease;
    font-family: "Ubuntu", sans-serif;
    font-size: 18px;
    font-weight: 500;}

/* Column usp */
.column.mobiel-usp {width: 100%;}

/* Wrapper relatief zodat knoppen zich hierop positioneren */
.products-slider-wrap {position: relative; margin: auto;}

/* Knoppen rechtsboven — alleen desktop */
@media (min-width: 771px) {
  .products-slider-wrap {position: relative;}

  .products-slider-wrap .swiper-button-prev,
  .products-slider-wrap .swiper-button-next {
    position: absolute;
    top: 0;
    width: 32px;
    height: 32px;
    background: #fff;
    border-radius: 50%;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .products-slider-wrap .swiper-button-prev { left: -50px; top:25%; transform: rotate(180deg);}
  .products-slider-wrap .swiper-button-next { right: -50px;top:25%; }
  .products-slider-wrap .swiper-button-prev::after,
  .products-slider-wrap .swiper-button-next::after {font-size: 12px; color: #161616;}
}
/* Verberg op mobiel */
@media (max-width: 770px) {
  .products-slider-wrap .swiper-button-prev,
  .products-slider-wrap .swiper-button-next {
    display: none;
  }
}

/* sectie 3  hoofdcategorieen ---------------------------------------------------*/
/* Hoofdcategorieen */
#hoofdcategorieen {
    max-width: 1116px;
    margin: 24px auto;
    padding:0px;
}
@media (max-width: 770px) {
  #hoofdcategorieen {
    margin: 24px auto 0;
    padding:4px;}
  }

#hoofdcategorieen .wp-block-columns {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: stretch;
}

/* Linker kolom: 50% */
#hoofdcategorieen .wp-block-column:first-child {
    flex: 0 0 50%;
}

/* Rechter kolom: 50% */
#hoofdcategorieen .wp-block-column:last-child {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}


#hoofdcategorieen .wp-block-column:last-child .wp-block-group__inner-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
}

#hoofdcategorieen .wp-block-column:last-child .wp-block-cover {
    flex: 1;
}

/* Cover blokken algemeen */
#hoofdcategorieen .wp-block-cover {
    border-radius: 8px;
    overflow: hidden;
    min-height: 200px;
}

/* Linker cover even hoog als de twee rechter samen */
#hoofdcategorieen .wp-block-column:first-child .wp-block-cover {
    height: 100%;
    min-height: 416px;
}

/* Tekst in covers */
#hoofdcategorieen .wp-block-cover__inner-container {
    padding: 20px;
}

#hoofdcategorieen .wp-block-cover__inner-container h2 {
    color: #fff;
    font-size: 22px;
    margin-bottom: 12px;
}

/* Mobiel */
@media screen and (max-width: 480px) {
    #hoofdcategorieen .wp-block-columns {
        flex-direction: column;
    }

    #hoofdcategorieen .wp-block-column:first-child {
        flex: 0 0 100%;
    }

    #hoofdcategorieen .wp-block-column:first-child .wp-block-cover {
        min-height: 260px;
    }
}

/* sectie 3 Merken ------------------------------------------------------------------- */
.merken-grid {max-width: 1116px; margin: auto; border: 1px solid var(--groen);background:#fff;padding: 16px; border-radius: 10px;margin-bottom: 2%;}
.merken-inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.merk {
  display: block;
  text-align: left;
  text-decoration: none;
  transition: all .2s ease;
  padding: 1%;
  margin-left: 24px;

}
.merk:hover {transform: translateY(-3px);}

@media (max-width: 1099px) {
  .merken-inner { grid-template-columns: repeat(3, 1fr); }
  .merk {margin-left: 0;}
}

@media (max-width: 375px) {
  .merken-inner { grid-template-columns: repeat(2, 1fr); }
  .merk {margin-left: 0;}
}

/* Sectie 4  Nieuw   */
@media (max-width: 770px) {
  div#nieuw {display: block; width: 100%;flex: 0 0 100%;padding: 0px 8px 44px;
  background: radial-gradient(50% 50% at 50% 60%, #E5F4F1 0%, #FFF 100%);}
  }
  @media (min-width: 771px) {
  div#nieuw {display: block; width: 100%;flex: 0 0 100%;padding: 0px 0px 64px;
  background: radial-gradient(50% 50% at 50% 60%, #E5F4F1 0%, #FFF 100%);}
  }


  /* sectie 2  Hulpvragen -keuzehulp */
.wp-block-group.sectie2 {padding: 24px 8px;}
.hulpsectie .columns {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:20px;
}

.hulpsectie .column {
	width:calc(20% - 16px);
	flex:0 0 calc(20% - 16px);
	max-width:calc(20% - 16px);
  min-width: 1px;
}

.hulpsectie figure {margin:0;width:100%;text-align:center;}

.hulpsectie picture {display:block;margin:0 auto;}

.hulpsectie img {
	display:block;
	width:180px;
	height:180px;
	margin:0 auto;
	transition:transform .3s ease;
}

.hulpsectie figure:hover img {transform:scale(1.03);}

.hulpsectie figcaption {
	margin-top:16px;
	font-size:17px;
	font-weight:500;
	line-height:1.3;
	text-align:center;
}

@media (max-width:767px) {

	.hulpsectie .columns {
		display:grid !important;
		grid-template-columns:repeat(3,1fr);
		gap:15px;
    
	}

	.hulpsectie .column {
		width:auto !important;
		max-width:none !important;
		flex:none !important;
    min-width: 10px!important;
	}

	.hulpsectie img {width:70px;height:70px;}

	.hulpsectie figcaption {
		margin-top:8px;
		font-size:14px;
		line-height:1.2;
		text-align:center;
	}
}

/* END HOME  ----------------------------------------------*/



/*project berichten / pages*/
.post.type-post .wp-block-heading {letter-spacing: -1px; line-height: 28px;}
article.category-projecten {padding: 64px 0;}


/* reviews*/

    


.single-post .category-blogs {max-width: 1000px;padding: 64px 0;}
.blogs section.afbeelding, .blogs article .wp-video{text-align: center;margin: auto;}
.single-post aside#secondary {display: none;}
#comments {display: none;}
.wp-block-latest-posts.is-grid {margin: 0;}

.wp-block-latest-posts.columns-3 li { width: calc(31.33333% - 0.83333em);-webkit-box-shadow: 5px 5px 16px 0px rgb(0 0 0 / 35%);
    box-shadow: 5px 5px 16px 0px rgb(0 0 0 / 35%);}

.wp-block-latest-posts__post-excerpt { padding: 8px 16px;font-size: 14px;}
.wp-block-latest-posts li a:nth-child(2) {padding: 8px 16px 0;color: var(--donkergroen); font-weight: 700;display: block;}
    .wp-block-latest-posts li a:hover:nth-child(2) {color: var(--black);}


.category-blogs .wp-block-image {margin: 32px 0;text-align: center;}
.category-blogs a{font-weight: 600;}




/*contact page*/
 .wp-container-3.wp-block-columns.scan {column-gap: 4px!important;padding-top: 32px;row-gap: 0px; margin-left: -4px;}
 .wp-container-3.wp-block-columns.scan .wp-block-column {min-width: auto;} 
 .wp-container-3.wp-block-columns.scan .wp-container-1.wp-block-column {min-width: 200px;}
 .wp-container-3.wp-block-columns.scan .wp-container-2.wp-block-column {padding-right: 32px;}


 /* Dowloads velden in ACF*/
#tab-downloads_tab .product-downloads {list-style:none;padding:0;margin:0;}
#tab-downloads_tab .product-downloads a {
    display:flex;
    justify-content:flex-start;
    gap:10px;
    font-size: 15px;
    font-weight: 400;
    z-index: 9999;
    pointer-events:auto !important;
}

#tab-downloads_tab .product-downloads li a:hover{font-weight: 700;}
#tab-downloads_tab .product-downloads li a::before {
    content:"";
    width:24px;
    height:24px;
    flex-shrink:0;
    background:url('/wp-content/themes/Ecomfast/assets/img/pdf.svg') center/contain no-repeat;
}
#tab-downloads_tab .product-downloads li a::after {display: none!important; pointer-events:none !important;}



/* --FOOTER-- */
footer {background: #ffffff;color: #333;}
    .footer-payments-inner,
footer .site-info,.site-bottom {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}
.footer-payments-bar { padding: 26px 8px 20px; }
.footer-payments-inner { display: flex; justify-content: space-between; align-items: center; }
.footer-payments-left { display: flex; align-items: center; gap: 16px; }

.payments-label { font-weight: 600; font-size: 14px; color: #333; }

.payment-icons { display: flex; gap: 10px; align-items: center; }

.language-switcher { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #333; cursor: pointer; }

.footer-divider { border: none; border-top: 1px solid #e0e0e0;  }


/* Kolommen */
footer .site-info {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    padding: 2% 0%;
}

footer.entry-footer {display: none;}

@media screen and (min-width: 771px) {
    #footer-1 { width: 24%; min-width: 200px; margin-left: 0%; margin-right: 3%; }
    #footer-2 { width: 24%; min-width: 200px; margin-left: 3%; margin-right: 1%; }
    #footer-3 { width: 24%; min-width: 80px; margin-left: 2%; margin-right: 3%; font-size: 15px; }
    #footer-4 { width: 20%; margin-left: 2%; }
}

@media screen and (max-width: 770px) {
    #footer-1 { min-width: 200px; margin-left: 0%; }
    #footer-2 { margin-right: 4%; }
    #footer-3 { margin-left: 4%; font-size: 15px; }
    #footer-3 ul { margin-left: -19px; }
    #footer-4 { margin-left: 0; }
    footer section .column { padding: 32px 0 16px 0; }

    .footer-payments-bar { padding: 0; }
    .footer-divider { margin: 16px; }
}
@media (max-width:480px) {
    .footer-payments-inner {flex-direction:column; align-items:center; gap:12px;}
    .footer-payments-left {flex-direction:column;width:100%;align-items:center;}
    .payment-icons {justify-content:center;flex-wrap:wrap;width: 100%;}
    .footer-payments-right {width:auto;}
    .payments-label,.language-switcher {font-size:12px;padding-top: 24px;}
    .payment-icon {max-height:18px;width:auto;}
}

.payment-icons img {max-height: 21px;}
/* Koppen */
.site-footer h4,
.site-footer .wp-block-heading {
    font-weight: 500;
    font-style: normal;
    color: #111;
    font-size: 20px;
    text-transform: none;
    margin-bottom: 14px;
}
.site-footer a { color: #333; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

.site-footer .menu { list-style: none; padding: 0; margin: 0; }
.site-footer .menu li { margin-bottom: 8px; }
.site-footer .menu li a { font-size: 14px; color: #444; }

.site-footer p { font-size: 14px; color: #555; line-height: 1.7; }

.site-bottom {display:flex;justify-content:center;align-items:center;padding-bottom:16px;color:#555;}
.site-bottom span {font-size:13px;}
.mobile-break {display:inline;}

@media (max-width:480px) {
    .mobile-break {display:block;height:0;overflow:hidden;}
    .site-bottom {text-align:center;}
}
.mobile-break {display:inline;}

@media (max-width:480px) {
    .mobile-break {display:block;font-size:0;}
        .site-bottom {text-align:center;}
}

.footer-credit { color: #555; text-decoration: none; }
.footer-credit:hover { text-decoration: underline; }

/*  Jasper css gemaakt*/
.sg-footer{font-size:15px;color:#0C6C6E}.sg-footer-title{font-size:20px;font-weight:700;color:#073735;margin:0 0 24px;position:relative;padding-bottom:14px;line-height:1.2}.sg-footer-title:after{content:"";position:absolute;left:0;bottom:0;width:42px;height:3px;background:#149A96;border-radius:20px}.sg-footer-links{margin:0;padding:0;list-style:none}.sg-footer-links li{margin-bottom:13px}.sg-footer-links li:last-child{margin-bottom:0}.sg-footer-links a{color:#0C6C6E;text-decoration:none;display:inline-flex;align-items:center;transition:all .25s ease;line-height:1.5;font-size:15px}.sg-footer-links a:before{content:"›";color:#149A96;font-size:16px;margin-right:8px;opacity:.6;transition:.25s}.sg-footer-links a:hover{color:#149A96;transform:translateX(6px)}.sg-footer-links a:hover:before{opacity:1}.sg-footer-contact{margin-bottom:25px}.sg-footer-contact summary{cursor:pointer;list-style:none;font-weight:600;color:#073735;padding:6px 0;transition:.25s}.sg-footer-contact summary:hover{color:#149A96}.sg-footer-contact summary::-webkit-details-marker{display:none}.sg-footer-contact summary:after{content:"+";float:right;color:#149A96;font-size:22px;font-weight:300}.sg-footer-contact[open] summary:after{content:"−"}.sg-contact-content{margin-top:18px;padding-left:2px;line-height:1.8;color:#0C6C6E;font-size:14px}.sg-contact-content strong{color:#073735;font-weight:600}.sg-contact-content a{color:#149A96;text-decoration:none}.sg-contact-content a:hover{text-decoration:underline}@media(max-width:991px){.sg-footer{margin-bottom:35px}}@media(max-width:767px){.sg-footer-title{font-size:18px;margin-bottom:18px}.sg-footer-links li{margin-bottom:10px}}.site-footer,.footer-area,.footer-wrapper,footer{background:#EDF6F9!important}.footer-bottom,.footer-copyright{background:#FAFCFD!important}.sg-footer-links{list-style:none;margin:0;padding:0}.sg-footer-links li{margin-bottom:12px}.sg-footer-links li:last-child{margin-bottom:0}.site-footer .sg-footer-links a,.footer-area .sg-footer-links a,.sg-footer .sg-footer-links a{color:#0C6C6E!important;text-decoration:none;font-size:15px;transition:all .25s ease}.site-footer .sg-footer-links a:hover,.footer-area .sg-footer-links a:hover,.sg-footer .sg-footer-links a:hover{color:#149A96!important;padding-left:6px}.sg-contact-highlight{background:#fff;border:1px solid #DCECEF;border-radius:12px;padding:14px;margin-bottom:10px}.sg-contact-highlight strong{display:block;color:#073735;font-size:13px;margin-bottom:6px}.sg-phone,.sg-mail{display:block;color:#149A96!important;text-decoration:none;font-size:18px;font-weight:600;margin-bottom:10px}.sg-mail{margin-bottom:0}.sg-phone:hover,.sg-mail:hover{text-decoration:underline}.sg-contact-mini{color:#5F7C82;font-size:14px;line-height:1.7;margin-bottom:22px}.sg-footer-subtitle{margin:30px 0 18px;font-size:15px;font-weight:700;color:#073735;text-transform:uppercase;letter-spacing:.05em}.entry-title{display:none!important}





/* ----   Fonts -------- */

/* ubuntu-regular - latin */
@font-face {
  font-display: swap; 
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/ubuntu-v21-latin-regular.woff2') format('woff2'); 
}
/* ubuntu-500 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/ubuntu-v21-latin-500.woff2') format('woff2'); 
}

/* ubuntu-700 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/ubuntu-v21-latin-700.woff2') format('woff2'); 
}


/* poppins-regular - latin */
@font-face {
  font-display: swap; 
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/poppins-v24-latin-regular.woff2') format('woff2'); 
}
/* poppins-500 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/poppins-v24-latin-500.woff2') format('woff2'); 
}
/* poppins-600  */
@font-face {
  font-display: swap; 
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/poppins-v24-latin-600.woff2') format('woff2');
}