/*
 Theme Name:   kookwebshop
 Description:  Custom child theme voor kookwebshop.com
 Author:       SVM Solutions
 Template:     hello-elementor
 Version:      1.0.0
*/
/* ===========================
   KW USP tiles (grid + compact)
   =========================== */

/* Container */
.kw-tiles{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 16px 0;
  width: 100%;
}

/* Tablet + Desktop: 2 kolommen + max breedte */
@media (min-width: 768px){
  .single-product .kw-tiles{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 520px;
  }

  /* laatste tile over 2 kolommen als oneven aantal */
  .single-product .kw-tiles .kw-tile:last-child:nth-child(odd){
    grid-column: span 2;
  }
}

/* Mobiel: compacter */
@media (max-width: 767px){
  .kw-tiles{
    gap: 10px;
    margin: 12px 0;
  }
}

/* Tile */
.kw-tile{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 6px;

  background-color: #dfead8;
  color: #1f6b3a;
  border: 1px solid rgba(31,107,58,.15);

  font-size: 15px;
  font-weight: 600;

  width: 100%;
  box-sizing: border-box;
  transition: all .15s ease;
}

/* Mobiel: tile compacter */
@media (max-width: 767px){
  .kw-tile{
    padding: 10px 12px;
    gap: 10px;
    font-size: 14px;
  }
}

/* Hover alleen op devices met hover */
@media (hover:hover){
  .kw-tile:hover{
    background-color: #d6e6cd;
    border-color: rgba(31, 107, 58, 0.25);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
  }
}

/* Icon */
.kw-tile__icon svg{
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* Mobiel: icon kleiner */
@media (max-width: 767px){
  .kw-tile__icon svg{
    width: 18px;
    height: 18px;
  }
}


/* ===========================
   KW FAQ (SVM stijl)
   =========================== */

.kw-faq-container{
  margin: 18px 0 0;
  border-top: 2px solid #e4e4e4;
}

.kw-faq-item{
  border-bottom: 1px solid #e4e4e4;
  padding: 8px 0;
}

.kw-faq-title{
  margin: 0;
}

/* De button MOET full-width zijn, anders blijft + naast de tekst */
.kw-faq-question{
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  /* Cruciaal: block-level zodat hij niet “shrink to content” doet */
  box-sizing: border-box;
  max-width: 100%;
  white-space: normal;

  font-size: 14px;
  font-weight: 600;
  text-transform: none !important;
  cursor: pointer;

  padding: 4px 2px;
  margin: 0;

  border: none !important;
  background: transparent !important;

  text-align: left !important;
  color: #000 !important;
}

/* Tekst krijgt de ruimte, zodat icon naar rechts kan */
.kw-faq-text{
  flex: 1 1 auto;
  min-width: 0;
}

/* Plus altijd rechts */
.kw-faq-icon{
  flex: 0 0 auto;
  margin-left: 12px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 16px;
  line-height: 1;
  color: rgba(17,17,17,.7);

  transition: transform .25s ease;
}

/* Answer */
.kw-faq-answer{
  margin-top: 4px;
}

.kw-faq-answer p{
  margin: 4px 0 0;
  line-height: 1.55;
  color: rgba(17,17,17,.85);
}

/* Active state: draai + naar x */
.kw-faq-item.active .kw-faq-icon{
  transform: rotate(45deg);
}

/* Mobiel */
@media (max-width: 768px){
  .kw-faq-question{
    font-size: 15px;
    line-height: 1.3;
  }
  .kw-faq-answer p{
    font-size: 14.5px;
    line-height: 1.45;
  }
}
/* ===========================
   KW Full-width product info section
   =========================== */

/* Full width achtergrond */
.kw-product-section{
  background: #f5f5ef;   /* subtiel warm, matcht footer */
  padding: 60px 0;
  margin-top: 50px;
}

/* Zorg dat content netjes gecentreerd blijft */
.kw-product-section .elementor-container{
  max-width: 1200px;
  margin: 0 auto;
}

/* Kolommen spacing */
.kw-product-section .elementor-column{
  padding: 0 30px;
}

/* Vertical divider tussen kolommen (desktop) */
@media (min-width: 1024px){

  .kw-product-section .elementor-column:first-child{
    border-right: 1px solid rgba(0,0,0,.08);
  }

}

/* Titels */
.kw-product-section h2,
.kw-product-section h3{
  font-size: 22px;
  margin-bottom: 14px;
}

/* Productinformatie tekst */
.kw-product-section p{
  color: rgba(0,0,0,.85);
}

.kw-product-section ul{
  margin: 10px 0 0 18px;
}

.kw-product-section li{
  margin: 6px 0;
}

/* Specificaties tabel */
.kw-product-section table.shop_attributes{
  width: 100%;
  border: none !important;
  margin-top: 8px;
}

.kw-product-section table.shop_attributes th,
.kw-product-section table.shop_attributes td{
  border: none !important;
  padding: 12px 0 !important;
}

.kw-product-section table.shop_attributes tr{
  border-bottom: 1px solid rgba(0,0,0,.1);
}

.kw-product-section table.shop_attributes tr:last-child{
  border-bottom: none;
}

/* FAQ integratie */
.kw-product-section .kw-faq-container{
  margin-top: 24px;
}

/* Mobile */
@media (max-width: 1023px){

  .kw-product-section{
    padding: 40px 0;
  }

  .kw-product-section .elementor-column{
    padding: 0;
  }

  .kw-product-section .elementor-column:first-child{
    border-right: none;
  }

}

/* ===========================
   KW Product contact card
   =========================== */

.kw-contact-card{
  margin-top: 22px;
  padding: 18px 18px;
  border-radius: 10px;
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(0,0,0,.08);
}

.kw-contact-card__title{
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 4px;
}

.kw-contact-card__subtitle{
  font-size: 14px;
  color: rgba(0,0,0,.75);
  margin: 0 0 12px;
}

.kw-contact-card__list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.kw-contact-card__item{
  display: flex;
  align-items: center;
  gap: 10px;
}

.kw-contact-card__icon{
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(31,107,58,.10);   /* matcht je groene accent */
  color: #1f6b3a;
  flex: 0 0 auto;
}

.kw-contact-card__icon svg{
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.kw-contact-card__link{
  font-weight: 600;
  color: #111;
  text-decoration: none;
}

.kw-contact-card__link:hover{
  text-decoration: underline;
}

/* ===========================
   KW USP Card 
   =========================== */

.kw-usps-card{
  margin-top: 16px;
  padding: 18px 18px;
  border-radius: 10px;
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(0,0,0,.08);
}

.kw-usps-card__title{
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 14px;
}

/* lijst */
.kw-usps-card__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

/* item layout FIX */
.kw-usps-card__item{
  display: flex;
  align-items: center;   /* dit centreert perfect */
  gap: 12px;
  font-size: 15px;       /* +1px groter */
  line-height: 1.45;
}

/* icon container */
.kw-usps-card__icon{
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(200,155,60,.15);
  color: #c89b3c;
  flex: 0 0 34px;
}

/* svg exact centreren */
.kw-usps-card__icon svg{
  width: 18px;
  height: 18px;
  display: block;
  fill: currentColor;
}

/* link styling */
.kw-usps-card a{
  color: inherit;
  text-decoration: underline;
}

.kw-usps-card a:hover{
  text-decoration-thickness: 2px;
}

/* ===========================
   KW Sticky Add-to-Cart bar (Elementor Containers)
   Mobile only
   =========================== */
@media (max-width: 767px){

  /* ruimte onderaan zodat content niet achter de bar valt */
  body.single-product{
    padding-bottom: 92px !important;
  }

  /* jouw grijze container met class kw-mobile-stickybar */
  .kw-mobile-stickybar{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 999999 !important;

    width: 100% !important;
    max-width: 100% !important;

    background: #fff !important;
    border-top: 1px solid rgba(0,0,0,.10) !important;
    box-shadow: 0 -8px 20px rgba(0,0,0,.10) !important;

    padding: 10px 12px !important;
    margin: 0 !important;
  }

  /* Elementor containers zetten soms width/max-width constraints */
  .kw-mobile-stickybar.elementor-element{
    width: 100% !important;
  }

  /* verberg state */
  .kw-mobile-stickybar.is-hidden{
    transform: translateY(110%) !important;
    transition: transform .2s ease;
  }
  .kw-mobile-stickybar{
    transform: translateY(0) !important;
    transition: transform .2s ease;
  }

  /* Extra: fix voor themes die fixed breken door transforms */
  html, body{
    transform: none !important;
  }
}

@media (max-width: 767px){

  /* Sticky bar layout: prijs boven, knop eronder */
  .kw-mobile-stickybar{
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
  }

  /* Prijs styling */
  .kw-sticky-price{
    font-weight: 800;
    font-size: 18px;
    line-height: 1.1;
    color: #111;
  }

  /* Als Woo price spans gebruikt */
  .kw-sticky-price del{
    opacity: .55;
    margin-right: 8px;
    font-weight: 600;
  }
  .kw-sticky-price ins{
    text-decoration: none;
  }

  /* Add to cart form full width */
  .kw-sticky-atc form.cart{
    display: flex !important;
    align-items: center !important;
    gap: 10px;
    margin: 0 !important;
    width: 100% !important;
  }

/* Qty even hoog als button */
  .kw-sticky-atc .quantity{
    flex: 0 0 70px;
    margin: 0 !important;
  }
  .kw-sticky-atc .quantity input.qty{
    height: 48px !important;      /* match button hoogte */
    line-height: 48px !important;
    padding: 0 10px !important;
    border-radius: 0 !important;  /* zelfde “hoek” als content */
  }

  /* button full width */
  .kw-sticky-atc .single_add_to_cart_button,
  .kw-sticky-atc button.single_add_to_cart_button{
    flex: 1 1 auto !important;
    width: 100% !important;
    margin: 0 !important;

    padding: 14px 14px !important;
    border-radius: 4px !important;
    font-weight: 800 !important;
    font-size: 16px !important;
  }
}
/* Verberg Woo voorraadtekst alleen in de sticky bar */
.kw-mobile-stickybar p.stock,
.kw-mobile-stickybar .stock{
  display: none !important;
}
/* Productpagina (hele pagina) */
.single-product .elementor-widget-woocommerce-product-add-to-cart p.stock,
.single-product .elementor-widget-woocommerce-product-add-to-cart .stock{
  display: none !important;
}

/* Fallback voor themes / andere Woo layouts */
.single-product form.cart p.stock,
.single-product .summary p.stock{
  display: none !important;
}

/* ========================================
   Elementor Mobile Menu Toggle
   Hamburger → X (Kookwebshop.com)
   ======================================== */

/* Basis toggle knop */
.elementor-menu-toggle {
    position: relative;
    width: 40px;
    height: 40px;

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

    color: #1f6b3a; /* standaard groen */
    transition: color .2s ease;
}

/* SVG hamburger */
.elementor-menu-toggle svg {
    fill: currentColor !important;
    transition: transform .25s ease, opacity .2s ease;
}


/* ========================================
   Hover state (GOUD)
   ======================================== */

.elementor-menu-toggle:hover {
    color: #DAA520 !important;
}


/* ========================================
   Active state → verberg hamburger
   ======================================== */

.elementor-menu-toggle.elementor-active svg {
    opacity: 0;
    transform: scale(0.6);
}


/* ========================================
   X icoon (ZWART en kleiner)
   ======================================== */

.elementor-menu-toggle.elementor-active::before,
.elementor-menu-toggle.elementor-active::after {
    content: "";
    position: absolute;

    width: 18px;     /* kleiner dan voorheen */
    height: 2px;

    background-color: #000; /* zwart kruisje */

    border-radius: 2px;

    left: 50%;
    top: 50%;

    transform-origin: center;

    transition: transform .25s ease, opacity .2s ease;
}

/* lijn 1 */
.elementor-menu-toggle.elementor-active::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

/* lijn 2 */
.elementor-menu-toggle.elementor-active::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}


/* ========================================
   Hover terwijl actief (optioneel goud hover effect)
   ======================================== */

.elementor-menu-toggle.elementor-active:hover::before,
.elementor-menu-toggle.elementor-active:hover::after {
    background-color: #DAA520;
}

/* =====================================================
   KW: product grid actions (2 knoppen) – softer + netjes onder prijs
   (GEEN absolute positioning, dus geen overlap met prijs)
   ===================================================== */

/* Wrapper onderin de card, met nette ruimte */
.woocommerce ul.products li.product .kw-loop-actions{
  display: flex;
  gap: 10px;
  margin-top: 12px;
  padding: 0 12px 12px;              /* zorgt dat het niet tegen de randen staat */
  box-sizing: border-box;
}

/* Bekijken button full width als cart ontbreekt */
.woocommerce ul.products li.product .kw-loop-actions .kw-loop-btn{
  height: 44px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  box-sizing: border-box;
}

/* Bekijken (subtieler) */
.woocommerce ul.products li.product .kw-loop-btn--view{
  flex: 1;
  background: transparent !important;
  color: rgba(17,17,17,.68) !important;              /* lichter */
  border: 1px solid rgba(17,17,17,.35) !important;   /* dunner */
  font-weight: 600 !important;                        /* minder hard */
  padding: 0 14px !important;
}

.woocommerce ul.products li.product .kw-loop-btn--view:hover{
  color: rgba(17,17,17,.85) !important;
  border-color: rgba(17,17,17,.55) !important;
  background: rgba(0,0,0,.03) !important;
}

/* Rechts: cart icoon knop (groen, zoals productpagina) */
.woocommerce ul.products li.product .kw-loop-btn--cart{
  width: 54px;
  flex: 0 0 54px;
  padding: 0 !important;
  background: #31C648 !important;
  border: 1px solid #31C648 !important;
}

.woocommerce ul.products li.product .kw-loop-btn--cart:hover{
  background: #1A6F27 !important;
  border-color: #1A6F27 !important;
}

/* Cart icon (wit) */
.woocommerce ul.products li.product .kw-loop-cart-icon{
  width: 18px;
  height: 18px;
  display: inline-block;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2S15.9 22 17 22s2-.9 2-2-.9-2-2-2zM7.2 14h9.9c.9 0 1.7-.5 2-1.3l3-7.1c.2-.5-.1-1.1-.7-1.1H6.2L5.7 2H2v2h2l3.6 7.6-1.3 2.4C5.6 15.2 6.3 16 7.2 16h12v-2H7.2z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2S15.9 22 17 22s2-.9 2-2-.9-2-2-2zM7.2 14h9.9c.9 0 1.7-.5 2-1.3l3-7.1c.2-.5-.1-1.1-.7-1.1H6.2L5.7 2H2v2h2l3.6 7.6-1.3 2.4C5.6 15.2 6.3 16 7.2 16h12v-2H7.2z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Woo "Bekijk winkelwagen" link onder knop verbergen */
.woocommerce ul.products li.product a.added_to_cart.wc-forward{
  display: none !important;
}

/* Mobiel compacter */
@media (max-width: 767px){
  .woocommerce ul.products li.product .kw-loop-actions{
    gap: 8px;
    padding: 0 10px 10px;
  }
  .woocommerce ul.products li.product .kw-loop-actions .kw-loop-btn{
    height: 42px;
  }
  .woocommerce ul.products li.product .kw-loop-btn--cart{
    width: 50px;
    flex-basis: 50px;
  }
}

/* =====================================================
   KW – WooCommerce notices (success + error) in KW-stijl
   ===================================================== */

/* Container reset/spacing */
.woocommerce-notices-wrapper{
  margin: 0 0 18px;
}

/* Basis notice */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info{
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 14px 14px 14px 44px;
  border-radius: 8px;

  border: 1px solid rgba(0,0,0,.10);
  background: #f7f7f7;

  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  margin: 0 0 12px;
  font-weight: 600;
}

/* Tekst in notice */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info{
  color: rgba(17,17,17,.88);
}

/* Linkjes in notice */
.woocommerce-notices-wrapper .woocommerce-message a,
.woocommerce-notices-wrapper .woocommerce-error a,
.woocommerce-notices-wrapper .woocommerce-info a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Woo zet standaard een ::before icoon via theme/woo – neutraliseren */
.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-error::before,
.woocommerce-notices-wrapper .woocommerce-info::before{
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .95;
}

/* SUCCESS: groene accent + vinkje */
.woocommerce-notices-wrapper .woocommerce-message{
  border-color: rgba(26,111,39,.25);
  background: rgba(26,111,39,.06);
}

.woocommerce-notices-wrapper .woocommerce-message::before{
  /* check icon */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231A6F27' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
}

/* ERROR: rood accent + alert icon */
.woocommerce-notices-wrapper .woocommerce-error{
  border-color: rgba(176,0,32,.28);
  background: rgba(176,0,32,.06);
}

.woocommerce-notices-wrapper .woocommerce-error::before{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23B00020' d='M12 2 1 21h22L12 2zm1 15h-2v-2h2v2zm0-4h-2V9h2v4z'/%3E%3C/svg%3E");
}

/* INFO (optioneel): neutrale accent */
.woocommerce-notices-wrapper .woocommerce-info{
  border-color: rgba(0,0,0,.12);
  background: rgba(0,0,0,.03);
}

/* Woo "Bekijk winkelwagen" knop (wc-forward) in KW kleuren */
.woocommerce-notices-wrapper a.button.wc-forward{
  margin-left: auto;               /* rechts uitlijnen */
  border: 0 !important;
  background: #DAA520 !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  padding: 10px 14px !important;
  line-height: 1 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  white-space: nowrap;
}

.woocommerce-notices-wrapper a.button.wc-forward:hover{
  background: #1E2510 !important;
  color: #DAA520 !important;
}

/* Op mobiel: knop onder de tekst (netter) */
@media (max-width: 767px){
  .woocommerce-notices-wrapper .woocommerce-message,
  .woocommerce-notices-wrapper .woocommerce-error,
  .woocommerce-notices-wrapper .woocommerce-info{
    flex-wrap: wrap;
    padding: 12px 12px 12px 42px;
    gap: 10px;
  }

  .woocommerce-notices-wrapper a.button.wc-forward{
    margin-left: 0;
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* Error lijst-items (Woo error kan UL zijn) netjes maken */
.woocommerce-notices-wrapper .woocommerce-error{
  list-style: none;
}
woocommerce-notices-wrapper .woocommerce-error li{
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Zorg dat de tekst netjes ruimte krijgt */
.woocommerce-notices-wrapper .woocommerce-error li .wc-forward{
  margin-left: auto !important;
}

/* Mobiel: knop onder tekst (consistent met success) */
@media (max-width: 767px){
  .woocommerce-notices-wrapper .woocommerce-error li{
    flex-wrap: wrap;
  }
  .woocommerce-notices-wrapper .woocommerce-error li .wc-forward{
    width: 100%;
    justify-content: center;
    margin-left: 0 !important;
  }
}

.kw-stock{
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.kw-stock__sub{
  margin-top: 4px;
  font-weight: 600;
  opacity: .9;
}

.kw-stock__link{
  text-decoration: underline;
  font-weight: 700;
}

.kw-stock--out{ color: #b00020; }      /* rood */
.kw-stock--low{ color: #DAA520; }      /* oranje/goud */
.kw-stock--mid{ color: #DAA520; }      /* voor “op bestelling” (zelfde accent) */
.kw-stock--in{  color: #1A6F27; }      /* groen */

.kw-stock--out .kw-stock__sub em{
  font-style: italic;
}

/* Desktop: verberg de knop altijd (failsafe) */
@media (min-width: 768px){
  .kw-mobile-filterbar{ display:none !important; }
}

/* Mobile */
@media (max-width: 767px){

  .kw-mobile-filterbar{
    margin: 12px 0 14px;
  }

  /* Rij: knop + sortering */
  .kw-mobile-filterbar__row{
    display: flex;
    gap: 10px;
    align-items: center;
  }

  /* =========================
     FILTER BUTTON
     ========================= */

  .kw-filter-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;

    height: 44px;
    padding: 0 12px;

    min-width: 140px;

    border: 0;
    border-radius: 8px;

    background: #1E2510;
    color: #ffffff;

    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;

    /* voorkom rare breaks */
    overflow: hidden;
  }

  .kw-filter-toggle:hover{
    color: #DAA520;
  }

  /* 3 kolommen: icoon | tekst | chevron */
  .kw-filter-toggle__left{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  .kw-filter-icon{
    width: 18px;
    height: 18px;
    display: block;
    fill: currentColor;
    flex: 0 0 18px;
  }

  .kw-filter-toggle__text{
    line-height: 1;
  }

  /* Chevron = zelfde “blokje” als icoon, naast tekst */
  .kw-filter-toggle__chevron{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;
    flex: 0 0 18px;

    margin-left: 10px; /* zelfde gevoel als gap links */

    color: #ffffff;
  }

  .kw-filter-toggle:hover .kw-filter-toggle__chevron{
    color: #DAA520;
  }

  /* Down arrow (default) */
  .kw-filter-toggle__chevron::before{
    content: "";
    width: 0;
    height: 0;

    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid currentColor;

    /* micro-align in het 18px vakje */
    transform: translateY(1px);
  }

  /* Up arrow (open) */
  .kw-filter-toggle[aria-expanded="true"] .kw-filter-toggle__chevron::before{
    border-top: none;
    border-bottom: 7px solid currentColor;
    transform: translateY(-1px);
  }

  /* =========================
     SORTING DROPDOWN
     ========================= */

  .kw-mobile-sort{
    flex: 1 1 auto;
    min-width: 0;
  }

  .kw-mobile-sort .woocommerce-ordering{
    margin: 0 !important;
    width: 100%;
  }

  .kw-mobile-sort .woocommerce-ordering select{
    width: 100%;
    height: 44px;
    padding: 0 14px;

    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.2);
    background-position: right 12px center;
  }

  /* =========================
     PANEL
     ========================= */

  .kw-filter-panel{
    margin-top: 12px;
    padding: 12px;

    background: #fff;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
  }

  .kw-filter-panel[hidden]{ display:none !important; }
  .kw-filter-panel.is-open{ display:block !important; }

  /* originele plek waar filters eerst stonden */
  .kw-berocket-original-hidden{ display:none !important; }
}

/* Elementor Menu Cart – footer buttons styling */
.elementor-menu-cart__footer-buttons .elementor-button {
  box-shadow: none !important;
  text-decoration: none !important;
  border-radius: 0 !important; /* zet op bijv. 4px als je afgerond wil */
}

/* Bekijk winkelwagen = transparant met subtiele border (zoals 'Bekijken') */
.elementor-menu-cart__footer-buttons a.elementor-button--view-cart {
  background: transparent !important;
  color: rgba(17, 17, 17, 0.8) !important;
  border: 1px solid rgba(17, 17, 17, 0.35) !important;
}

.elementor-menu-cart__footer-buttons a.elementor-button--view-cart:hover {
  background: rgba(17, 17, 17, 0.04) !important;
  border-color: rgba(17, 17, 17, 0.5) !important;
}

/* Afrekenen = groen (#31C648) + hover (#1A6F27) */
.elementor-menu-cart__footer-buttons a.elementor-button--checkout {
  background: #31C648 !important;
  border: 1px solid #31C648 !important;
  color: #fff !important;
}

.elementor-menu-cart__footer-buttons a.elementor-button--checkout:hover {
  background: #1A6F27 !important;
  border-color: #1A6F27 !important;
  color: #fff !important;
}

/* Sidebar cart overlay boven alles */
.elementor-menu-cart__container {
  z-index: 999999 !important;
}

/* Overlay backdrop */
.dialog-lightbox-widget,
.dialog-overlay {
  z-index: 999998 !important;
}

/* Product gallery zoom lager */
.woocommerce-product-gallery__trigger {
  z-index: 1 !important;
}

/* Cart (Woo Blocks) – verberg korte beschrijving/description onder productnaam */
.wc-block-cart-item__product .wc-block-components-product-metadata__description,
.wc-block-cart-item__product .wc-block-components-product-details__description,
.wc-block-cart-item__product .wc-block-components-product-metadata__description p {
  display: none !important;
}

/* Cart (Woo Blocks) – Checkout button groen */
.wc-block-cart__submit-container .wc-block-components-button,
.wc-block-cart__submit-container .wc-block-components-button.wp-element-button {
  background: #31C648 !important;
  border-color: #31C648 !important;
  color: #fff !important;
  box-shadow: none !important;
	text-decoration:none !important;
}

/* Hover */
.wc-block-cart__submit-container .wc-block-components-button:hover,
.wc-block-cart__submit-container .wc-block-components-button.wp-element-button:hover {
  background: #1A6F27 !important;
  border-color: #1A6F27 !important;
  color: #fff !important;
}
/* Cart (Woo Blocks) – mobiel: voorkom links wegvallen door negatieve margins/translate */
@media (max-width: 767px) {

  /* 1) reset rare offsets op de hoofd-wrappers */
  .wp-block-woocommerce-cart,
  .wc-block-cart,
  .wc-block-cart__main,
  .wc-block-cart__sidebar,
  .wp-block-woocommerce-cart-totals-block {
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  /* 2) forceer nette "page gutters" voor ALLES in de cart (ook totals) */
  .wp-block-woocommerce-cart,
  .wc-block-cart {
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
  }

  /* 3) zeker weten dat sidebar/totals 100% breed is */
  .wc-block-cart__sidebar,
  .wp-block-woocommerce-cart-totals-block {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Checkout (Woo Blocks) – geen Title Case; normale zinnen */
body.woocommerce-checkout .wc-block-checkout,
body.woocommerce-checkout .wc-block-checkout * {
  text-transform: none !important;
}
/* Checkout (Woo Blocks) – Plaats bestelling button groen */
body.woocommerce-checkout .wc-block-checkout__actions .wc-block-components-button,
body.woocommerce-checkout .wc-block-checkout__actions .wc-block-components-button.wp-element-button {
  background: #31C648 !important;
  border-color: #31C648 !important;
  color: #fff !important;
  box-shadow: none !important;
}

body.woocommerce-checkout .wc-block-checkout__actions .wc-block-components-button:hover,
body.woocommerce-checkout .wc-block-checkout__actions .wc-block-components-button.wp-element-button:hover {
  background: #1A6F27 !important;
  border-color: #1A6F27 !important;
  color: #fff !important;
}
/* Checkout – Besteloverzicht: producttitels kleiner (jouw markup: h3.wc-block-components-product-name) */
body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-product-name,
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-name {
  font-size: 16px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  margin: 0 0 4px 0 !important;
  text-transform: none !important; /* voor de zekerheid */
}

/* Mobiel iets compacter */
@media (max-width: 767px) {
  body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-product-name,
  body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-name {
    font-size: 15px !important;
    line-height: 1.2 !important;
  }
}
/* Checkout – verberg ALLEEN korte beschrijving en metadata, NIET titel en prijs */
body.woocommerce-checkout 
.wc-block-components-order-summary 
.wc-block-components-product-metadata {
  display: none !important;
}

/* fallback voor andere Woo Blocks varianten */
body.woocommerce-checkout 
.wc-block-components-order-summary 
.wc-block-components-product-metadata__description {
  display: none !important;
}