/** Shopify CDN: Minification failed

Line 312:2 Expected "}" to go with "{"

**/
/*-----------------------------------------------------------------------------/
/ Custom Theme CSS
/-----------------------------------------------------------------------------*/
/*---------------- Global Custom CSS -------------------*/.t4s-tabs-inline .t4s-tabs-head {    align-items: flex-end;}
input#CustomerPassword {
    display: none;
}/*---------------- Custom CSS for only desktop -------------------*/
@media (min-width: 1025px) {}

/*---------------- Custom CSS for tablet, mobile -------------------*/
@media (max-width:1024px) {}

/*---------------- Custom CSS for only tablet -------------------*/
@media (min-width: 768px) and (max-width:1024px) {}

/*---------------- Custom CSS for only mobile -------------------*/
@media (max-width:767px){}

/*================= JOUW MAATWERK (CLEAN) =================*/

/* 0) Kleine, veilige fixes (alle devices) */
.t4s-desc-collection a{
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

.t4s-product .t4s-product-inner:before{
  display:none;
}

@media (max-width:680px){
  .t4s_box_pr_grid.t4s-products .t4s-col-item{
    margin-top: 35px;
  }
}

/* ❗BELANGRIJK: prijs NIET verbergen (dit brak je prijzen)
.t4s-price-from{ display:none !important; }
*/

/* Collectie-header z-index fix op mobiel (ok, maar beperkt tot lock-scroll scenario) */
@media (max-width:767px){
  .t4s-lock-scroll .t4s-collection-header{ z-index:999; }
}

/* 1) Geen globale smooth scroll */
html, body { scroll-behavior: auto !important; }

/* 2) Reveal animaties UIT op mobiel/tablet */
@media (max-width: 1024px) {
  .hdt-reveal-in-view [hdt-reveal],
  .hdt-reveal-in-view [hdt-reveal="fade-in"],
  .hdt-reveal-in-view [hdt-reveal="slide-in"]{
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* =========================================================
   DESKTOP-ONLY (1025px+)
   Alleen desktop tweaken om CLS te verminderen.
   Mobiel/tablet niet aantasten.
   ========================================================= */
@media (min-width: 1025px){

  /* =========================================================
     A) COLLECTION: respecteer theme ratio (NIET forceren naar vierkant)
     + stabiliseer alleen effecten zodat eerste rij netjes blijft.
     ========================================================= */

  .template-collection .t4s-product-img{
    overflow: hidden; /* ok */
  }

  .template-collection .t4s-product-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .35s ease !important;
    transform: none !important;
  }

  /* Hover alleen opacity (geen layout-impact) */
  .template-collection .t4s-product-hover-img{ opacity: 0; }
  .template-collection .t4s-product-inner:hover .t4s-product-hover-img,
  .template-collection .t4s-product-inner.is-hover .t4s-product-hover-img,
  .template-collection .t4s-product-inner:focus-within .t4s-product-hover-img{
    opacity: 1;
  }

  /* Extra effecten uit die soms shifts/paint-jank geven */
  .template-collection .pr_img_effect_2 .t4s-product-hover-img,
  .template-collection .pr_img_effect_2 .t4s-product-main-img,
  .template-collection .pr_img_effect_3 .t4s-product-hover-img,
  .template-collection .pr_img_effect_3 .t4s-product-main-img,
  .template-collection .pr_img_effect_4 .t4s-product-hover-img,
  .template-collection .pr_img_effect_4 .t4s-product-img,
  .template-collection .pr_img_effect_5 .t4s-product-hover-img,
  .template-collection .pr_img_effect_5 .t4s-product-main-img{
    transform: none !important;
  }

  /* =========================================================
     A2) COLLECTION DESKTOP CLS: header/toolbar/facets stabiliseren
     (alleen minimale reserves; geen visuele schade)
     ========================================================= */
  .template-collection .t4s-collection-header,
  .template-collection .t4s-collection-head,
  .template-collection .collection-header{
    min-height: 80px;
  }

  .template-collection .t4s-topbar,
  .template-collection .t4s-toolbar,
  .template-collection .t4s-collection-toolbar,
  .template-collection .t4s-prd-toolbar,
  .template-collection .t4s-facets__top,
  .template-collection .t4s-filter,
  .template-collection .collection-toolbar{
    min-height: 52px;
  }

  /* =========================================================
     ✅ DESKTOP-ONLY COLLECTION FIX: main & hover image overlay
     Doel: geen reflow/height change bij lazyload/hover => CLS omlaag
     - Respecteert theme ratio (wrapper bepaalt hoogte)
     - Alleen desktop (mobiel blijft met rust)
     ========================================================= */
  .template-collection .t4s-product-img{
    position: relative !important;
  }

  .template-collection .t4s-product-img .t4s-product-main-img,
  .template-collection .t4s-product-img .t4s-product-hover-img{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
  }

  /* loader mag niet layout beïnvloeden */
  .template-collection .t4s-product-img .lazyloadt4s-loader{
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
  }

  /* z-index default: main boven */
  .template-collection .t4s-product-main-img{ z-index: 2; }
  .template-collection .t4s-product-hover-img{ z-index: 1; }

  /* bij hover: hover boven */
  .template-collection .t4s-product-inner:hover .t4s-product-hover-img,
  .template-collection .t4s-product-inner.is-hover .t4s-product-hover-img,
  .template-collection .t4s-product-inner:focus-within .t4s-product-hover-img{
    z-index: 3;
  }
  @media (min-width: 1025px){
  .template-collection .t4s-product-img img,
  .template-collection .t4s-product-main-img,
  .template-collection .t4s-product-hover-img{
    pointer-events: none !important;
  }

  /* =========================================================
     PRODUCT: met rust laten (goed nu)
     Alleen je huidige levertijd compact houden (desktop)
     ========================================================= */

  .template-product .t4s-pr_delivery_wrap{
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    text-align: left !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
  }

  .template-product .t4s-pr_delivery_label{
    font-weight: 700 !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }

  .template-product .t4s-pr_delivery_wrap a,
  .template-product .t4s-pr_delivery_wrap span,
  .template-product .t4s-pr_delivery_wrap p{
    margin: 0 !important;
    text-align: left !important;
    white-space: normal !important;
  }

  .template-product .t4s-pr_delivery_wrap svg,
  .template-product .t4s-pr_delivery_wrap img{
    align-self: center !important;
  }
}

/* =========================================================
   iOS Safari product flits: (alleen small devices)
   ========================================================= */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 820px) {
    .template-product .t4s-product__info-container--sticky{
      position: static !important;
      top: auto !important;
      z-index: auto !important;
    }

    .template-product .t4s-lz--fadeIn,
    .template-product .t4s-product__media-wrapper img,
    .template-product .t4s-product__media-wrapper picture{
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
      will-change: auto !important;
    }

    .template-product .t4s-product__media-wrapper .lazyloadt4s-loader{
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
    }
  /* =========================================================
   COLLECTION CLS FIX: FILTER/SORTING TOOLBAR STABILISEREN
   - raakt alleen collection toolbar/topbar
   - geen product wijzigingen
   ========================================================= */

/* 1) Desktop: vaste hoogte, geen wrap, contain om reflow cascade te beperken */
@media (min-width: 1025px){
  .template-collection .t4s-topbar,
  .template-collection .t4s-toolbar,
  .template-collection .t4s-collection-toolbar,
  .template-collection .t4s-prd-toolbar,
  .template-collection .t4s-facets__top,
  .template-collection .collection-toolbar{
    min-height: 64px !important;   /* iets hoger dan 52 om “icon row” + sort dropdown op te vangen */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;  /* wrap veroorzaakt CLS */
    contain: layout paint !important;
  }

  /* Waar “Filter” knop links en sort rechts staan: voorkom dat ze naar nieuwe regel vallen */
  .template-collection .t4s-topbar > *,
  .template-collection .t4s-toolbar > *,
  .template-collection .t4s-collection-toolbar > *,
  .template-collection .t4s-prd-toolbar > *,
  .template-collection .t4s-facets__top > *,
  .template-collection .collection-toolbar > *{
    flex: 0 0 auto !important;
  }

  /* Sort dropdown niet laten “springen” door font-load/JS width */
  .template-collection select,
  .template-collection .t4s-sorting,
  .template-collection .t4s-sortby,
  .template-collection .t4s-select,
  .template-collection .t4s-select__btn{
    min-width: 180px;
  }
}

/* 2) Mobiel/tablet: ook stabiliseren (jij ziet nu ook CLS mobiel door deze bar) */
@media (max-width: 1024px){
  .template-collection .t4s-topbar,
  .template-collection .t4s-toolbar,
  .template-collection .t4s-collection-toolbar,
  .template-collection .t4s-prd-toolbar,
  .template-collection .t4s-facets__top,
  .template-collection .collection-toolbar{
    min-height: 58px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    contain: layout paint !important;
  }

  /* Kleinere sort breedte op mobiel zodat hij niet wrapt */
  .template-collection .t4s-sorting,
  .template-collection .t4s-sortby,
  .template-collection .t4s-select,
  .template-collection .t4s-select__btn{
    min-width: 140px;
  }
}

/* 3) Als theme een "loading state" heeft die eerst verborgen is:
      zorg dat het niet van display:none -> flex springt */
.template-collection .t4s-topbar[hidden],
.template-collection .t4s-toolbar[hidden],
.template-collection .t4s-collection-toolbar[hidden],
.template-collection .t4s-prd-toolbar[hidden],
.template-collection .t4s-facets__top[hidden],
.template-collection .collection-toolbar[hidden]{
  display: flex !important;
  visibility: hidden !important;
}
  }