/**
* Theme Name: WoonderShop PT Child
* Theme URI: http://www.proteusthemes.com/wordpress-themes/woondershop
* Description: This is a child theme of WoonderShop PT theme.
* Author: ProteusThemes
* Template: woondershop-pt
* Version: 1.0
*/
/* ==========================================================================
   LOKALE POPPINS FONT-FACE DEFINITIES (GitHub WOFF2 Bestanden)
   ========================================================================== */

/* ==========================================================================
   1. LOKALE POPPINS FONT-FACE DEFINITIES (Inclusief 300 Light)
   ========================================================================== */

/* Poppins Light (300) - VOOR HET SUPERKEUKENS EFFECT */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/poppins-light-webfont.woff2') format('woff2'); /* Controleer je bestandsnaam */
}

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

/* Poppins SemiBold (600) */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/poppins-semibold-webfont.woff2') format('woff2');
}

/* Poppins Bold (700) */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/poppins-bold-webfont.woff2') format('woff2');
}

/* 1. Dwing Poppins af op alle Ecwid elementen, BEHALVE FontAwesome / iconen */
html#ecwid_html body#ecwid_body *:not(i):not(.fas):not(.far):not(.fab):not(.fa):not([class*="icon"]),
body .ecwid *:not(i):not(.fas):not(.far):not(.fab):not(.fa):not([class*="icon"]),
body .ec-store *:not(i):not(.fas):not(.far):not(.fab):not(.fa):not([class*="icon"]),
body div[id^="ecwid-store-"] *:not(i):not(.fas):not(.far):not(.fab):not(.fa):not([class*="icon"]) {
    font-family: 'Poppins', sans-serif !important;
}

.widget_ecwidlatestproducts h3.widget-title {margin-bottom:0px;display:none;}
/* Standaard / Solid iconen (zoals hamburgermenu fa-bars) */
.fas, .fa, i.fa-bars, [class*="icon-box__icon"] {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}

/* Merken / Brands (zoals social media icons) */
.fab {
    font-family: "Font Awesome 5 Brands" !important;
    font-weight: 400 !important;
}

/* Regular / Lichte iconen */
.far {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 400 !important;
}
/* ==========================================================================
   2. TYPOGRAFIE STYLING (SUPERKEUKENS EXACT MATCH)
   ========================================================================== */

/* Haarlijnscherpe rendering inschakelen */
html, body {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* Bodytekst: Slank, ruim en zacht antraciet */
body, p, li, input, textarea, select, button {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 300 ; /* Dwingt de 300 Light variant af */
  font-size: 16px ;
  line-height: 1.75 ;
  letter-spacing: 0;
  color: #333333 ;
}

/* Koppen / Headings: Groot, vet en compact gestapeld */
h1, h2, h3, h4, h5, h6, 
.entry-title, .widget-title {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important; /* Bold */
  color: #333 ;
  line-height: 1.15 ;
  letter-spacing: 0.03em ;
  margin-bottom: 24px ;
}

/* 1. Maak de rij een flex-container met een nette tussenruimte */
.gelijke-hoogte-kolommen {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 30px !important;
    align-items: stretch !important;
}

/* 2. Zorg dat de kolommen zelf ook meerekend worden als flex-items */
.gelijke-hoogte-kolommen > .panel-grid-cell {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-width: 280px !important;
}

/* 3. Laat het tekstvak de beschikbare ruimte opvullen en geef het wat onderruimte */
.gelijke-hoogte-kolommen .widget_sow-editor {
    flex-grow: 1 !important;
    margin-bottom: 20px !important;
}

/* 4. Duw de afbeelding in elke kolom geforceerd naar de bodem */
.gelijke-hoogte-kolommen .widget_sow-image {
    margin-top: auto !important;
}
.image-banner__text {
    font-size: .9rem !important;
}
addres
.oranjelicht { color: #ff4d12;  font-weight: 600 !important; /* Bold */ }
/* ==========================================================================
   OVERRIDE THEMA TYPOGRAFIE NAAR POPPINS
   ========================================================================== */

body, p, input, textarea, select, button, .navigation, .site-header {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .entry-title, .widget-title, .price, .btn {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}
.page-header__title
{color:#FF4000; font-size: 1.2rem;letter-spacing:1px;}

article a {color:#FF4000;}
body {font-size: 16px;}
h3.widget-title {color:#FF4000;text-transform: uppercase;font-weight: 800;font-size:24px;}
.fienosa {color:#FF4000;text-transform: uppercase;font-weight: 400; letter-spacing:1px;}


.top__container, .top__container span , .top__container p {
  
    color: #fff!important;
 
}


body.page-template-page-nomargin .header__container {
 
    margin-bottom: 1rem;
}

.main-navigation .menu-item {
    font-size: 19px!important;
  
}

@media (min-width: 992px) {

.main-navigation .menu-item.is-hover>a, .main-navigation .menu-item:focus>a, .main-navigation .menu-item:hover>a

 {
        color: #000;
    }
	
    .main-navigation>.menu-item:first-of-type {
        margin-left: 0rem;
    }
}

@media (max-width: 991.98px) {
.titelvet  {font-size: 40px!important;}
.bannertekst {font-size: 20px!important;}

    .page-header__title {
        font-size: 1.0rem;
    }
}

.sidebar .widget_categories>ul>li a {
  text-transform: uppercase;
}
.top .widget_nav_menu .menu a {
   
    padding: .75rem .4rem;
   
}
.middle__container {
        display:none;
		}
html#ecwid_html body#ecwid_body .ec-size.ec-size--l .ec-store .grid__categories--large-items 
{    text-transform: uppercase!important;
    font-weight: 300!important;letter-spacing:1px!important;}


.footer {

    background-color: #FF4000;
}
@media (min-width: 992px) {
    .page-header {
        min-height: 5rem;
    }
}


@media (max-width: 991.98px) {
    .page-header {
        padding-top: 1rem;
        padding-bottom: 1rem;
       
    }
	
	 .main-navigation .sub-menu a {
        background-color: #b1afaf !important;
    }
	
	.main-navigation .dropdown-toggle {
    position: absolute;
    background-color: #b1afaf !important;
	}
}
.so-widget-sow-image-grid-default-dea5335177eb-1529 .sow-image-grid-wrapper .sow-image-grid-image .image-title {
   color:#333;
    font-weight: 600;
   
}


 .voorpaginatekst {
    
  margin-left: auto;
  margin-right: auto;
	}

	
	
	
address+h1, address+h2, address+h3, address+h4, address+h5, address+h6, dl+h1, dl+h2, dl+h3, dl+h4, dl+h5, dl+h6, ol+h1, ol+h2, ol+h3, ol+h4, ol+h5, ol+h6, p+h1, p+h2, p+h3, p+h4, p+h5, p+h6, ul+h1, ul+h2, ul+h3, ul+h4, ul+h5, ul+h6 {
    margin-top: 0rem;
}
.breadcrumbs a

 {
   
    color: #333 !important;
}
h5.sow-carousel-item-title {font-size: 0.8rem;}
.image-title { text-transform: uppercase;}
.widget_ecwid_search, .widget_ecwidnsfminicart {margin-top:0rem !important;}

.widget_ecwid_search h2.widgettitle, .widget_ecwidnsfminicart h2.widgettitle {display:none!important;}


.voorpaginatekst {max-width:250px;height:auto;text-align:center;}

address, dl, ol, p, ul {
    margin-bottom: 0.5rem;
}
.voorpaginatekst h5 {margin-bottom:12px;}


@media (max-width: 1024px) {
.voorpaginatekst  h5 {
    font-size: 0.8rem;
}
  .pt-slick-carousel__content-description .btn {
    padding: .4rem 1.5rem;
    border-radius: 8px;
    font-size: .6rem;
    text-transform: uppercase;
    font-weight: 400;
}
}

@media (min-width: 992px) and (max-width: 1599.98px) {
    .pt-slick-carousel__content-description .btn

 {
        padding: .25rem 0.75rem !important;
    }
}


/* Stijlen voor mobiele apparaten (standaard) */
.voorpaginabanner {
  max-width: 100%; /* Zorgt ervoor dat de banner nooit breder is dan de viewport */
  width: 250px; /* Een kleinere breedte voor mobiel, kan aangepast worden */
  height: auto; /* Behoudt de aspect ratio van de afbeelding */
  display: block; /* Zorgt ervoor dat de afbeelding op een nieuwe lijn begint en geen witruimte heeft */
  margin: 0 auto; /* Centreert de afbeelding als de breedte kleiner is dan de container */
}

/* Media query voor grotere schermen (bijv. tablets in portrait) */
@media (min-width: 768px) {
  .voorpaginabanner {
    width: 170px; /* Iets breder voor tablets */
	margin-top:10px;
	height:auto;
  }
  .voorpaginatekst {
    max-width: 340px;
 
	}
	.voorpaginatekst h5 {
   
    font-size: 0.8rem;
	}
}

/* Media query voor desktop en grote schermen */
@media (min-width: 1025px) {
  .voorpaginabanner {
    width: 260px; /* De gewenste breedte voor desktops */
	height:auto;
  }
  .voorpaginatekst {
    max-width: 320px;
  
	}
	.voorpaginatekst h5 {
   
    font-size: 0.9rem;
	}
}

@media (min-width: 1330px) {
  .voorpaginabanner {
    width: 300px; /* De gewenste breedte voor desktops */
	height:auto;
  }
  .voorpaginatekst {
    max-width: 320px;
  
	}
	.voorpaginatekst h5 {
   
    font-size: 1rem;
	}
  
}

p.latest-news__author {display:none;
		}
p.latest-news__comments {display:none;
		}
		
		@keyframes slideInFromRight {
    /* Stap 1: De startpositie (buiten beeld, rechts) */
    0% {
        transform: translateX(100%); 
        opacity: 0;
    }

    /* Stap 2: De eindpositie (op de normale plek) */
    100% {
        transform: translateX(0); /* Terug naar de normale positie */
        opacity: 1;
    }
}

/* Pas deze selector aan naar het element dat u wilt animeren */
body.page-id-2154 h1.page-header__title {
    /* Of gebruik een class: .mijn-container { ... } */

    animation-name: slideInFromRight;
    animation-duration: 1s; /* De animatie duurt 1 seconde */
    animation-timing-function: ease-out; /* Maakt de beweging vloeiender (sneller start, zachtere stop) */
    animation-delay: 0.2s; /* Wacht 0.2 seconden voordat de animatie start */
    animation-fill-mode: backwards; /* Zorgt ervoor dat het element start op 0% (buiten beeld) */
}
		
		/* Ecwid CSS om 4 kolommen op desktops te forceren, gebaseerd op de 'middelgrote' afbeeldinginstelling. */

/* Media query zorgt ervoor dat dit alleen geldt voor brede schermen (desktops/laptops). */
@media screen and (min-width: 1024px) {
    
    .ec-size .ec-store .grid__categories .grid-category:nth-child(n+1) {
    width: 25% !important;
}
}
.footer-top .textwidget, .footer-top a {
   
    text-align: justify;
}

.latest-news__title-link {
    display: block;
    padding: 1.35rem 1.5rem .65rem;
}

.latest-news__categories {
    padding: 0 1.5rem .8rem;
}


/**
* Theme Name: interliving
* Theme URI: http://www.proteusthemes.com/wordpress-themes/woondershop
* Description: This is a child theme of WoonderShop PT theme.
* Author: ProteusThemes
* Template: woondershop-pt
* Version: 1.0
*/

	body.home .widget_ecwidlatestproducts .ecwid-productsList-name {
  white-space: nowrap;
  width:200px; 
  size:16px;
  overflow: hidden;
  text-overflow: ellipsis;
  display:block;

}
	body.home .ecwidlatestproducts  ul {
  display: flex;
  gap: 18px;
  padding: 16px;

  list-style: none;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}

body.home .widget_ecwidlatestproducts .show {
  flex-shrink: 0;
white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 230px;
  height: auto;

  background-color: #FFF;

  scroll-snap-align: center;
}

.content {
  display: flex;
  align-items: center;
  justify-content: center;
 

  font-family: sans-serif;
  font-size: 64px;
  font-weight: bold;
}
body.home .ecwidlatestproducts  ul {
  /* ... */
  
  /* Hide scrollbar in Firefox */
  scrollbar-width: none;

  /* Hide scrollbar in IE and Edge */
  -ms-overflow-style: none;
}

/* Hide scrollbar in webkit */
body.home .ecwidlatestproducts  ul::-webkit-scrollbar {
  display: none;
}

.list-wrapper {
  position: relative;
}

body.home .ecwidlatestproducts .button {
  position: absolute;
  top: 50%;

  width: 3rem;
  height: 3rem;

  transform: translateY(-50%);
}

.button--previous {
  left: 1.5rem;

  transform: rotate(180deg);
}

.button--next {
  right: 1.5rem;
}
body.home .ecwidlatestproducts  ul img { object-fit: cover!important;
  width: 230px !important; max-width: 230px !important;
  height: 230px!important;}
  body.home .ecwidlatestproducts  ul a {text-decoration:none; color:#333;font-size:16px;}

.widget_ecwid_search h2 {display:none;}
.pt-slick-carousel__content-description, .pt-slick-carousel__content-description p

 {
    color: #fff!important;
}




@media (max-width: 991.98px) {

.pt-slick-carousel__content-description, .pt-slick-carousel__content-description p {
    color: #333!important;
}


.pt-slick-carousel__content-description .btn-outline-light {
    border-color: #333;
    color: #333;
}
.pt-slick-carousel__content-title {
    color: #333;
}
    }
	
	/* ==========================================================================
   Container & Header Breedte Uitbreiding voor Grote Schermen
   ========================================================================== */

/* 1. Verhoog de containerbreedte op standaard desktops (vanaf 1200px) */
@media (min-width: 1200px) {
    .container, 
    .container-lg, 
    .container-md, 
    .container-sm, 
    .container-xl {
        max-width: 1380px !important; /* Verhoogt van 1140px naar 1380px voor meer ademruimte */
        width: 100% !important;
    }
}

/* 2. Extra brede weergave op echt grote monitors (Ultra-Wide / 1440px+) */
@media (min-width: 1440px) {
    .container, 
    .container-lg, 
    .container-md, 
    .container-sm, 
    .container-xl {
        max-width: 90% !important; /* Neemt 90% van de totale schermbreedte in */
    }
}

/* 3. Strip de zwarte achtergrond van de navigatiebalk en maak menulinks fris wit/grijs */
.navigation-bar__container,
.navigation-bar,
.main-navigation {
    background-color: transparent !important;
    background: none !important;
    box-shadow: none !important;
}

/* 4. Menulinks vergroten en donkergrijs maken op de witte achtergrond */
.main-navigation > ul > li > a {
    color: #333333 !important;
    font-size: 21px !important;
    font-weight: 600 !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

.main-navigation > ul > li > a:hover {
    color: #000000 !important;
}
	
	@media (max-width: 768px) {
   .main-navigation .smm-active .widget_nav_menu .widget-title {

    color: #fff;
	
    }
}
	
/* Specifieke styling voor de Ecwid productslider uitsluitend op de homepage */

/* ==========================================================================
   HOMEPAGE ECWID PRODUCT SLIDER & NAVIGATIE (SCHOON & ZONDER !IMPORTANT)
   ========================================================================== */

/* 1. Productkaarten op de homepage */
body.home .so-panel ul li[class*="ecwid-productsList-product"] {
    height: auto;
    min-height: 280px;
    margin-bottom: 10px;
    padding-bottom: 0;
}

body.home .so-panel ul li[class*="ecwid-productsList-product"] > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
}

/* 2. Afbeeldingen: vaste hoogte zonder croppen */
body.home .so-panel ul li[class*="ecwid-productsList-product"] div.ecwid-productsList-image {
    position: static;
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

body.home .so-panel ul li[class*="ecwid-productsList-product"] div.ecwid-productsList-image img {
    max-height: 180px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* 3. Titel & Prijs strak gestapeld */
body.home .so-panel ul li[class*="ecwid-productsList-product"] div.ecwid-productsList-name {
    position: static;
    display: block;
    width: 100%;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.35;
    color: #333333;
    text-align: center;
    margin-top: 4px;
    margin-bottom: 4px;
    white-space: normal;
    height: 36px;
    overflow: hidden;
}

body.home .so-panel ul li[class*="ecwid-productsList-product"] div.ecwid-productsList-price {
    position: static;
    display: block;
    width: 100%;
    font-family: inherit;
    font-size: 16px!important;
    font-weight: 700!important;
    color: #e35324;
    text-align: center;
    margin-top: 2px;
}

/* 4. Navigatiecontainer (Fix voor hoogte & Flexbox uitlijning) */
body.home div.slider-navigation-wrapper {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 16px;
    width: 100%;
    height: 50px;
    min-height: 50px;
    margin-top: 15px;
    margin-bottom: 25px;
    clear: both;
    float: none;
    box-sizing: border-box;
}

/* 5. Knoppen opmaak */
body.home div.slider-navigation-wrapper button.button--previous,
body.home div.slider-navigation-wrapper button.button--next {
    position: static;
    float: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    background-color: #ffffff;
    border: 1px solid #dcdcdc;
    color: #333333;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transform: none;
}

body.home div.slider-navigation-wrapper button.button--previous:hover,
body.home div.slider-navigation-wrapper button.button--next:hover {
    background-color: #e35324;
    border-color: #e35324;
    color: #ffffff;
}

/* 6. SVG Pijl icoon styling */
body.home div.slider-navigation-wrapper button svg {
    display: block;
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

/* 7. Linkerpijl spiegelen naar links */
body.home div.slider-navigation-wrapper button.button--previous svg {
    transform: rotate(180deg);
}

/* 8. Responsive mobiele instellingen */
@media screen and (max-width: 767px) {
    body.home div.slider-navigation-wrapper {
        height: 55px;
        min-height: 55px;
        margin-top: 10px;
        margin-bottom: 20px;
        gap: 20px;
    }

    body.home div.slider-navigation-wrapper button.button--previous,
    body.home div.slider-navigation-wrapper button.button--next {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }
}

/* ==========================================================================
   HEADER BRANDING (SCHONE FLEXBOX STRUCTUUR)
   ========================================================================== */

/* 1. Dwing logo en tekst op 1 horizontale regel naast elkaar */
.site-branding {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important; /* Ruimte tussen logo en tekst */
}

/* 2. Zorg dat het logo niet vervormt of wordt ingedrukt */
.site-branding img,
.site-branding .custom-logo {
    display: block !important;
    max-height: 55px;
    width: auto !important;
    height: auto !important;
    flex-shrink: 0 !important;
}

/* 3. Tekstblok basisopbouw */
.site-branding .brand-text-block {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 4. Titel op 1 regel met Poppins gewichten */
.site-branding .brand-title {
    font-family: 'Poppins', sans-serif !important;
    font-size: clamp(0.95rem, 1.2vw + 0.4rem, 1.25rem) !important;
    line-height: 1.15 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important; /* Voorkomt dat regels afbreken */
}

.site-branding .brand-title .title-main {
    font-weight: 300 !important; /* Poppins Light */
    color: #2b2b2b !important;
    margin-right: 4px !important;
}

.site-branding .brand-title .title-accent {
    font-weight: 300 !important; /* Poppins Bold */
 
    color: #e35324 !important; /* Accent oranje */
}

/* 5. Subtitel opbouw */
.site-branding .brand-subtitle {
    font-family: 'Poppins', sans-serif !important;
    font-size: clamp(0.68rem, 0.8vw + 0.3rem, 0.8rem) !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    color: #666666 !important;
    margin: 3px 0 0 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.site-branding .brand-subtitle .sub-italic {
    
    font-weight: 300 !important;
    color: #2b2b2b !important;
}

/* 6. Responsive: verberg het tekstblok op exact hetzelfde breekpunt als het menu (< 992px) */
@media screen and (max-width: 991px) {
    .site-branding .brand-text-block {
        display: none !important;
    }
}

/* ==========================================================================
   HEADER RESPONSIVE LAYOUT (LOGO LINKS, WIDGETS RECHTS OVERAL)
   ========================================================================== */

/* 1. Dwing de hoofd-header container om ALTIJD een flexbox te blijven */
.site-header,
header#masthead,
.site-header .inside-header,
header#masthead .header-main,
header#masthead .container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 2. Blijf de branding compact houden (logo + tekst) */
.site-branding {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    flex: 0 0 auto !important; /* Neemt alleen eigen breedte in */
    margin-right: auto !important; /* Duwt alles wat erachter komt naar rechts */
}

/* 3. Rechter widgets (zoekbalk & winkelmand) strak rechts fixeren */
.site-header .header-widgets,
.site-header .header-right,
header#masthead .widget-area,
header#masthead .site-header-widgets,
.header-widget {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    margin-left: auto !important; /* Extra borging voor de rechterkant */
}

/* 4. Verberg alleen het tekstblok op mobiel (< 992px) */
@media screen and (max-width: 991px) {
    .site-branding .brand-text-block {
        display: none !important;
    }
}

/* ==========================================================================
   ECWID ZOEKWIDGET BREEDTE & FLEXIBELE OPVULLING
   ========================================================================= */

/* 1. Geef de omsluitende widget-container toestemming om te groeien */
.widget_ecwid_search,
div[class*="widget_ecwid_search"] {
    flex: 1 1 auto !important; /* Neemt de beschikbare vrije ruimte in */
    max-width: 100% !important; /* Heft de thema-beperking op */
    margin-right: 15px !important; /* Ruimte tussen zoekbalk en winkelmandje */
	   margin-left: 30px !important; /* Ruimte tussen zoekbalk en winkelmandje */
}

/* 2. Breek de harde max-width van Ecwid af */
.widget_ecwid_search .ecwid-search-widget,
.widget_ecwid_search .ecwid-search-widget.ec-storefront-v3,
.widget_ecwid_search div[class*="ecwid-search-widget"] {
    width: 100% !important;
    max-width: 100% !important; /* Breek de 350px / 202px limiet af */
}

/* 3. Dwing het daadwerkelijke inputveld en het formulier naar 100% breedte */
.widget_ecwid_search form,
.widget_ecwid_search form.ecwid-search-widget__form,
.widget_ecwid_search input.ecwid-search-widget__input,
.widget_ecwid_search input[type="text"],
.widget_ecwid_search input[type="search"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 4. Zorg dat de header-widgets container als Flexbox de ruimte doorgeeft */
.site-header .header-widgets,
.site-header .header-right,
header#masthead .widget-area {
    flex: 1 1 auto !important; /* Laat de widgetgroep meegroeien in de header */
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    max-width: 600px; /* Optioneel: voorkomt dat het zoekveld op 4K-schermen absurd breed wordt */
}


/* ==========================================================================
   ISOLEERDE OPMAAK VOOR REVIEWS TRUST-BADGE
   ========================================================================== */

a.header-trust-badge,
.header-trust-badge {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 4px 10px !important;
    background-color: #f9f9f9 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 20px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    width: auto !important;
    height: auto !important;
    margin-left: 12px !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
}

a.header-trust-badge:hover {
    background-color: #ffffff !important;
    border-color: #ffb400 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

/* Forceer de sterren op 1 horizontale regel */
.header-trust-badge .trust-stars {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 2px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Forceer de afmetingen en de gouden kleur van de SVG sterren */
.header-trust-badge .trust-stars svg,
.header-trust-badge svg {
    width: 13px !important;
    max-width: 13px !important;
    min-width: 13px !important;
    height: 13px !important;
    max-height: 13px !important;
    min-height: 13px !important;
    fill: #ffb400 !important;
    display: inline-block !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

/* Tekstuele opmaak */
.header-trust-badge .trust-text {
    display: inline-block !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 11px !important;
    line-height: 1 !important;
    color: #444444 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.header-trust-badge .trust-text strong {
    font-weight: 700 !important;
    color: #2b2b2b !important;
}

.header-trust-badge .trust-text .trust-sources {
    color: #777777 !important;
    font-size: 10px !important;
}

/* Verberg optioneel "Google & FB" op hele smalle mobiele schermen */
@media screen and (max-width: 580px) {
    .header-trust-badge .trust-sources {
        display: none !important;
    }
}

/* ==========================================================================
   VOLG ONS SOCIAL MEDIA ICONEN GROOTTE & HOVER
   ========================================================================== */

.social-follow-icons i,
.social-follow-icons svg,
.social-follow-icons .fa,
.social-follow-icons .fab {
    font-size: 32px !important; /* Pas hier de gewenste grootte aan (bijv. 18px, 22px, 24px) */
    width: auto !important;
    height: auto !important;
    margin: 0 6px !important; /* Ruimte tussen de iconen */
    vertical-align: middle !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
}

/* Optioneel: subtiel vergroten als je er met de muis overheen gaat */
.social-follow-icons a:hover i,
.social-follow-icons a:hover svg {
    transform: scale(1.15) !important;
    color: #e35324 !important; /* Je oranje accentkleur bij hover */
}

/* Styling voor de standaard blockquote binnen zijbalk-widgets */
.widget blockquote {
  position: relative;
  background: #f9f8f6;
  border: none !important;
  border-left: 4px solid #d4a359 !important; /* Subtiele goud/accentstreep */
  border-radius: 6px;
  margin: 0 0 1.5rem 0 !important;
  padding: 1rem 1.25rem !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

/* De recensietekst zelf */
.widget blockquote p:first-child {
  font-style: italic;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #333333;
  margin-bottom: 0.75rem !important;
}

/* De auteur en datum regel (tweede p) */
.widget blockquote p:last-child {
  font-style: normal;
  font-size: 0.78rem;
  color: #777777;
  border-top: 1px solid #e8e4de;
  padding-top: 0.5rem;
  margin-bottom: 0 !important;
  line-height: 1.35;
}

/* Links in de auteur/datum regel */
.widget blockquote p:last-child a {
  color: #555555;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.widget blockquote p:last-child a:hover {
  color: #d4a359;
}

/* 1. Reset en container layout */
ul.xoxo.blogroll {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-wrap: wrap; /* Slaat automatisch om naar de volgende regel */
  gap: 8px 10px;   /* Ruimte tussen de tags (verticaal / horizontaal) */
}

/* 2. Lijstelementen */
ul.xoxo.blogroll li {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-block;
}

/* 3. Stijling van de tag-links */
ul.xoxo.blogroll li a {
  display: inline-block;
  padding: 6px 14px;
  font-size: 0.65rem;
  font-weight: 500;
  line-height: 1.2;
  color: #4a4a4a;                   /* Donkergrijze tekst voor goeie leesbaarheid */
  background-color: #f5f3ef;        /* Warme, zachte achtergrondkleur */
  border: 1px solid #e2ded7;        /* Subtiele rand */
  border-radius: 20px;              /* Afgeronde 'pill' vorm */
  text-decoration: none;
  transition: all 0.25s ease-in-out;
}

/* 4. Interactive Hover & Focus effect */
ul.xoxo.blogroll li a:hover,
ul.xoxo.blogroll li a:focus {
  color: #ffffff;                   /* Witte tekst bij hover */
  background-color: #8b6b4d;        /* Warme accentkleur (bijv. boho/hout/brons) */
  border-color: #8b6b4d;
  transform: translateY(-2px);      /* Subtiel zweef-effect */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* Base Widget Container */
  .newsletter-widget {
    font-family: inherit;
    color: inherit;
    line-height: 1.5;
  }

  .newsletter-widget .widget-intro {
    font-size: 0.95rem;
    margin-bottom: 15px;
    opacity: 0.9;
  }

  /* Promo Box Highlight */
  .newsletter-widget .promo-box {
    background: rgba(255, 255, 255, 0.07);
    border-left: 3px solid #d4a373; /* Accentkleur (pas eventueel aan) */
    padding: 12px 15px;
    border-radius: 4px;
    margin-bottom: 20px;
  }

  .newsletter-widget .promo-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 6px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .newsletter-widget .promo-text {
    font-size: 0.88rem;
    margin: 0;
    line-height: 1.4;
  }

  /* Form Inschrijven */
  #mc_embed_signup {
    background: transparent;
    width: 100%;
  }

  #mc_embed_signup .form-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 12px;
  }

  #mc_embed_signup .mc-field-group {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
  }

  #mc_embed_signup label {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  #mc_embed_signup input[type="email"] {
    width: 100%;
    padding: 12px 14px;
    font-size: 0.95rem;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    background-color: #ffffff;
    color: #333333;
    outline: none;
    box-sizing: border-box;
    transition: all 0.25s ease;
  }

  #mc_embed_signup input[type="email"]:focus {
    border-color: #111111;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
  }

  /* Submit Knop */
  #mc_embed_signup .button-subscribe {
    width: 100%;
    padding: 12px 20px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    background-color: #111111; /* Knopkleur */
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    transition: background-color 0.25s ease, transform 0.1s ease;
    box-sizing: border-box;
  }

  #mc_embed_signup .button-subscribe:hover {
    background-color: #333333;
  }

  #mc_embed_signup .button-subscribe:active {
    transform: scale(0.99);
  }

  /* Feedback Meldingen */
  #mc_embed_signup #mce-responses .response {
    font-size: 0.85rem;
    padding: 8px 10px;
    margin-top: 10px;
    border-radius: 4px;
  }

  #mc_embed_signup #mce-error-response {
    background-color: #f8d7da;
    color: #842029;
  }

  #mc_embed_signup #mce-success-response {
    background-color: #d1e7dd;
    color: #0f5132;
  }
  
  @media (min-width: 992px) {
    .main-navigation>.current-menu-item:focus>a, .main-navigation>.current-menu-item:hover>a, .main-navigation>.current-menu-item>a {
        color: #333 !important;
    }
}