/** Shopify CDN: Minification failed

Line 556:0 Expected "}" to go with "{"

**/
#nav-top { font-size: calc(0.9285714286 * var(--main_fz)); }

input.size-s, select.size-s, .bv_atual.size-s, .size-s input, .size-s select, .size-s .bv_atual { --input_h: calc(var(--btn_fz) * var(--main_lh_h) + var(--btn_pv) * 0.65 * 2) }
input.size-m, select.size-m, .bv_atual.size-m, .size-m input, .size-m select, .size-m .bv_atual { --input_h: calc(var(--btn_fz) * var(--main_lh_h) + var(--btn_pv) * 1.2 * 2) }
input.size-l, select.size-l, .bv_atual.size-l, .size-l input, .size-l select, .size-l .bv_atual { --input_h: calc(var(--btn_fz) * var(--main_lh_h) + var(--btn_pv) * 1.35 * 2) }

/*.f8sr .l4vw + p { margin-left: 22px; }
	.f8sr .l4vw + p:before { display: none; }
	[dir="rtl"] .f8sr .l4vw + p { margin-left: 0; margin-right: 22px; }*/
		
/*@media only screen and (max-width: 1356px) {
.l4ft li { --mih: 22vw; }
} */
.l4al img, .l4al svg, .l4al picture { max-height: 25px !important; }

.l4cl.small .swiper-button-next:before { content: "\e96b"; }
.l4cl.small .swiper-button-prev:before { content: "\e96a"; }
[dir="rtl"] .l4cl.small .swiper-button-next:before { content: "\e96a"; }
[dir="rtl"] .l4cl.small .swiper-button-prev:before { content: "\e96b"; }


/*! Responsive --------- */
@media only screen and (max-width: 1356px) {
  .l4ft.static li.w33, .l4ft.static.w33 li { --mih: 22vw; }
  .l4ft.static li.w12,
  .l4ft.static li.w15,
  .l4ft.static li.w16,
  .l4ft.static li.w20,
  .l4ft.static li.w25,
  .l4ft.static li.w33,
  .l4ft.static.w12 li,
  .l4ft.static.w14 li,
  .l4ft.static.w16 li,
  .l4ft.static.w20 li,
  .l4ft.static.w25 li,
  .l4ft.static.w33 li { --mih: 22vw; }
}
@media only screen and (max-width: 1000px) { /* 1000 */
#root .l4ft.mobile-compact li { --mih: 145px; }
}
@media only screen and (max-width: 760px) { /* 760 */
h1, .h1, .l4cl.category h1, #root .l4cl.category .size-50 { font-size: var(--mob_h1); }
	h1, .h1, .l4cl.category h1, #root .l4cl.category .size-50 { font-size: var(--mob_h1); }
    h2, .h2, .l4cl.category h2 { font-size: var(--mob_h2); }
    h3, .h3, .l4cl.category h3 { font-size: var(--mob_h3); }
    h4, .h4, .l4cl.category h4 { font-size: var(--mob_h4); }
    h5, .h5, .l4cl.category h5 { font-size: var(--mob_h5); }
    h6, .h6, .l4cl.category h6 { font-size: var(--mob_h6); }
    .lead { font-size: var(--mob_lead); }

.f8sr { --f8sr_dist: 20px; }
	.f8sr fieldset > *:not(h1, h2, h3, h4, h5, h6, :first-child:not(hr)):before { display: none; }
  .l4ft.static li.w12,
  .l4ft.static li.w15,
  .l4ft.static li.w16,
  .l4ft.static li.w20,
  .l4ft.static li.w25,
  .l4ft.static li.w33,
  .l4ft.static.w12 li,
  .l4ft.static.w14 li,
  .l4ft.static.w16 li,
  .l4ft.static.w20 li,
  .l4ft.static.w25 li,
  .l4ft.static.w33 li { --mih: 300px; }
  
.l4vw li.active:not(:first-child:last-child) { display: none; } 
}
/* Fix Flex Grid banners – hou layout altijd consistent */
.flexible-grid,
.flexible-grid .grid,
.flexible-grid .grid__item {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* 2 columns */
    gap: 20px !important;
}

@media (min-width: 1400px) {
    .flexible-grid,
    .flexible-grid .grid,
    .flexible-grid .grid__item {
        grid-template-columns: repeat(3, 1fr) !important; /* 3 columns op groot scherm */
    }
}

/* Zorg dat images niet ven uitrekken */
.flexible-grid .banner__media img {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
}

/* Voorkom rare rescaling op fullscreen */
.flexible-grid .banner {
    height: 350px !important; /* pas aan naar smaak */
}

@media (min-width: 1600px) {
    .flexible-grid .banner {
        height: 420px !important;
    }
}
/* --- LOCK FLEXIBLE GRID BANNERS EXACT LIKE DESKTOP --- */

/* Target alleen de Flexible Grid Section */
.section-flexible-grid .grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* PC layout = 2 blokken breed */
    gap: 20px !important;
    align-items: stretch !important;
}

/* Zorg dat banners dezelfde vorm houden */
.section-flexible-grid .banner {
    height: 360px !important;   /* zelfde hoogte als je PC layout */
    overflow: hidden !important;
    border-radius: 12px !important;
}

/* Foto’s correct vullen */
.section-flexible-grid .banner__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* XXL schermen → PC layout behouden, NIET verder uitschalen */
@media (min-width: 1600px) {
    .section-flexible-grid .grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .section-flexible-grid .banner {
        height: 380px !important; /* iets groter maar zelfde verhouding */
    }
}

/* Mobiel gewoon standaard responsive */
@media (max-width: 768px) {
    .section-flexible-grid .grid {
        grid-template-columns: 1fr !important;
    }

    .section-flexible-grid .banner {
        height: 260px !important;
    }
}
/* --- LOCK FLEXIBLE GRID BANNERS EXACT LIKE DESKTOP (XTRA THEME) --- */

.flexible-grid-banners {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
}

/* Elk item dezelfde verhouding */
.flexible-grid-banners__item .banner {
    height: 360px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* Afbeeldingen moeten perfect vullen */
.flexible-grid-banners__item .banner__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* XXL schermen → zelfde layout houden (niet verder schalen) */
@media (min-width: 1600px) {
    .flexible-grid-banners {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .flexible-grid-banners__item .banner {
        height: 380px !important;
    }
}

/* Mobiel automatisch 1 kolom */
@media (max-width: 768px) {
    .flexible-grid-banners {
        grid-template-columns: 1fr !important;
    }

    .flexible-grid-banners__item .banner {
        height: 260px !important;
    }
}
/* Vervang X door jouw echte ID uit de editor-URL */
#shopify-section-template--X__section_grid_X .grid,
#shopify-section-template--X__section_grid_X [class*="grid"] {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
#shopify-section-template--X__section_grid_X .banner,
#shopify-section-template--X__section_grid_X [class*="banner"] {
  height: 320px !important;
}
#shopify-section-template--X__section_grid_X .banner__media img,
#shopify-section-template--X__section_grid_X [class*="banner"] img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
/* === Forceer 2 kolommen op mobiel voor deze specifieke Flex Grid sectie === */

@media (max-width: 768px) {

  #shopify-section-template--26795974328666__section_grid_ebi6i7 .flexible-grid-banners {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  #shopify-section-template--26795974328666__section_grid_ebi6i7 .flexible-grid-banners__item {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
  }

  #shopify-section-template--26795974328666__section_grid_ebi6i7 .banner {
    height: 320px !important;
    overflow: hidden !important;
    border-radius: 12px !important;
  }

  #shopify-section-template--26795974328666__section_grid_ebi6i7 .banner__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}
/* ===== BRUTE FORCE FIX: 2 kolommen op mobiel voor deze specifieke sectie ===== */

@media (max-width: 768px) {

  /* Pak ALLES binnen deze sectie dat grid kan zijn */
  #shopify-section-template--26795974328666__section_grid_ebi6i7 *[class*="grid"],
  #shopify-section-template--26795974328666__section_grid_ebi6i7 [class*="Grid"],
  #shopify-section-template--26795974328666__section_grid_ebi6i7 [class*="wrapper"],
  #shopify-section-template--26795974328666__section_grid_ebi6i7 [class*="banners"] {
      display: grid !important;
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 14px !important;
  }

  /* Alle items dwingen naar flexibel, ipv 100% */
  #shopify-section-template--26795974328666__section_grid_ebi6i7 *[class*="item"],
  #shopify-section-template--26795974328666__section_grid_ebi6i7 *[class*="card"] {
      width: auto !important;
      max-width: none !important;
      flex: none !important;
  }

  /* Banners zelf */
  #shopify-section-template--26795974328666__section_grid_ebi6i7 *[class*="banner"] {
      height: 320px !important;
      overflow: hidden !important;
      border-radius: 12px !important;
  }

  /* Afbeeldingen binnen banners */
  #shopify-section-template--26795974328666__section_grid_ebi6i7 *[class*="img"],
  #shopify-section-template--26795974328666__section_grid_ebi6i7 img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
  }
}
/* Forceer flexible grid banners naar 2 kolommen op mobiel */
@media (max-width: 768px) {
  
  /* De UL/LIST die de banners bevat */
  #shopify-section-template--26795974328666__section_grid_ebi6i7 ul,
  #shopify-section-template--26795974328666__section_grid_ebi6i7 .slideshow,
  #shopify-section-template--26795974328666__section_grid_ebi6i7 .slideshow__list {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 12px !important;
  }

  /* De LI’s = elke banner */
  #shopify-section-template--26795974328666__section_grid_ebi6i7 li,
  #shopify-section-template--26795974328666__section_grid_ebi6i7 .slideshow__item {
      width: calc(50% - 12px) !important;
      margin: 0 !important;
      padding: 0 !important;
  }

  /* Banner hoogte */
  #shopify-section-template--26795974328666__section_grid_ebi6i7 img {
      height: 230px !important;
      width: 100% !important;
      object-fit: cover !important;
      border-radius: 12px !important;
  }

/* === FORCE 2 COLUMNS FOR ALL FLEX GRID BANNERS (TOP + BOTTOM) === */
@media (max-width: 768px) {

  /* 1) Forceer de bovenste grid van Xtra naar 2 kolommen */
  #shopify-section-template--26795974328666__section_grid_ebi6i7 .grid {
      display: grid !important;
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 12px !important;
  }

  /* 2) Zorg dat elk grid item naast elkaar mag staan */
  #shopify-section-template--26795974328666__section_grid_ebi6i7 .grid__item {
      width: 100% !important;
      max-width: 100% !important;
  }

  /* 3) Hoogtes van banners gelijkmaken */
  #shopify-section-template--26795974328666__section_grid_ebi6i7 .image-banner,
  #shopify-section-template--26795974328666__section_grid_ebi6i7 .card-wrapper,
  #shopify-section-template--26795974328666__section_grid_ebi6i7 .card {
      height: 240px !important;
      overflow: hidden !important;
      border-radius: 12px !important;
  }

  #shopify-section-template--26795974328666__section_grid_ebi6i7 img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
  }
}
/* === Premium Scroll-to-Top Button Styling (Tuinlichten.nl) === */

.scroll-top,
.back-to-top,
.button--scroll,
.shopify-section .scroll-top {
    background: linear-gradient(145deg, #ffffff, #f2f2f2) !important;
    border-radius: 50% !important;
    width: 55px !important;
    height: 55px !important;

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

    position: fixed !important;
    bottom: 26px !important;
    right: 22px !important;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35) !important;
    border: 2px solid rgba(255, 165, 0, 0.25) !important;

    z-index: 9999 !important;
    transition: all 0.2s ease !important;
}

/* Amber glow when hovering */
.scroll-top:hover,
.back-to-top:hover,
.button--scroll:hover {
    transform: scale(1.07) !important;
    box-shadow: 0 10px 25px rgba(255, 170, 60, 0.55) !important;
    border-color: rgba(255, 180, 70, 0.55) !important;
}

/* Arrow icon amber */
.scroll-top svg path,
.back-to-top svg path,
.button--scroll svg path {
    fill: #FFBE3A !important;
    stroke: #FFBE3A !important;
    stroke-width: 2px !important;
}
/* === PREMIUM SCROLL TO TOP BUTTON — TUINLICHTEN.NL === */

#totop {
    position: fixed !important;
    bottom: 26px !important;
    right: 22px !important;
    z-index: 9999 !important;
}

#totop a {
    background: #ffffff !important;
    width: 55px !important;
    height: 55px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;
    border: 2px solid rgba(255, 180, 60, 0.45) !important;

    box-shadow: 0 8px 20px rgba(0,0,0,0.35) !important;
    transition: all .2s ease !important;
}

/* Hover glow */
#totop a:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 10px 30px rgba(255, 180, 60, 0.55) !important;
    border-color: rgba(255, 200, 80, 0.75) !important;
}

/* Arrow kleur */
#totop a svg path {
    fill: #FFBE3A !important;
    stroke: #FFBE3A !important;
    stroke-width: 2px !important;
}
/* ---- Fix EcomStar witte blokken ---- */

/* Hele product-card container onzichtbaar maken behalve de thumbnail & checkbox */
.ES-product-card-FBT,
.ES-product-card-FBT * {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* De interne container die wit is */
.ES-container-FBT,
.ES-container-FBT * {
    background: transparent !important;
    border: none !important;
}

/* Witte text/div velden volledig verbergen */
.ES-title-FBT,
.ES-description-FBT,
.ES-price-FBT,
.ES-comparePrice-FBT,
.ES-separator-FBT {
    display: none !important;
}

/* Verberg de input wrappers als ze wit zijn */
.ES-info-FBT,
.ES-input-FBT {
    background: transparent !important;
    border: none !important;
}

/* Hou productfoto en checkbox zichtbaar */
.ES-image-FBT {
    background: transparent !important;
    border-radius: 6px !important;
}
/* --- VERWIJDER ALLE WITTE INFO BLOKKEN VAN ECOMSTAR UPSALL --- */

/* info-container = het witte vlak */
.ES-product-info-FBT {
    display: none !important;
}

/* binnenste info-elementen — ook verstoppen */
.ES-title-FBT,
.ES-description-FBT,
.ES-price-FBT,
.ES-comparePrice-FBT,
.ES-quantity-FBT,
.ES-options-FBT {
    display: none !important;
}

/* volledige wrapper die ruimte hield */
.ES-container-FBT {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* product-card zelf */
.ES-product-card-FBT {
    background: transparent !important;
    border: none !important;
}

/* alleen foto en checkbox laten staan */
.ES-image-FBT {
    border-radius: 6px !important;
    background: transparent !important;
}
/* === Fix Shopify scroll button: hide text, keep arrow only === */

/* Verberg de tekst compleet */
.scroll-top span,
.back-to-top span,
.button--scroll span {
    display: none !important;
}

/* Forceer ronde premium button */
.scroll-top,
.back-to-top,
.button--scroll {
    width: 55px !important;
    height: 55px !important;

    padding: 0 !important;
    border-radius: 50% !important;
    overflow: hidden !important;

    background: #ffffff !important;
    border: 2px solid #FFBE3A !important;
    box-shadow: 0 6px 15px rgba(255, 190, 58, 0.4) !important;

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

    position: fixed !important;
    right: 18px !important;
    bottom: 26px !important;

    z-index: 9999 !important;
    transition: 0.2s ease !important;
}

/* Arrow icon goud */
.scroll-top svg path,
.back-to-top svg path,
.button--scroll svg path {
    stroke: #FFBE3A !important;
    stroke-width: 3px !important;
    fill: none !important;
}

/* Hover effect */
.scroll-top:hover,
.back-to-top:hover,
.button--scroll:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 10px 20px rgba(255, 190, 58, 0.55) !important;
}
@media only screen and (max-width: 768px) {
  #scroll-to-top,
  .scroll-to-top {
    display: none !important;
  }
}
#scroll-to-top,
.scroll-to-top,
.back-to-top,
.scrollTop {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}