/** Shopify CDN: Minification failed

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

**/
/* Layout */
.qm-product-gallery{
  display:grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
}
.qm-main{ position: relative; }

/* Desktop thumbs (links) */
.qm-thumbs--desktop{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height: 80vh;
  overflow:auto;
  padding-right: 6px; /* beetje ruimte voor scrollbar */
}

/* Thumb knop */
.qm-thumb{
  border:0;
  background:transparent;
  padding:0;
  width:80px;
  height:80px;
  border-radius:10px;
  overflow:hidden;
  cursor:pointer;
  opacity:.7;
}
.qm-thumb.is-active{ outline:2px solid var(--color-foreground, #111); opacity:1; }
.qm-thumb__img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Main container met soepele hoogte-animatie */
.qm-main{ position: relative; overflow: hidden; transition: height .35s ease; }

/* Slides stapelen en zacht in-/uitfaden */
.qm-main__slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.qm-main__slide.is-active{
  opacity: 1;
  pointer-events: auto;
}

/* Media binnen de slide */
.qm-main__img,
.qm-main__video,
.qm-main__model{ width:100%; height:auto; border-radius:14px; }


/* Mobiel thumbs (onder) */
.qm-thumbs--mobile{ display:none; margin-top:12px; position:relative; }
.qm-thumbs__track{
  display:flex;
  gap:10px;
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0 36px; /* ruimte voor de pijlen */
}
.qm-thumbs__track .qm-thumb{ flex:0 0 64px; height:64px; scroll-snap-align: start; }

/* Pijlen op mobiel */
.qm-thumbs__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border-radius:999px; border:0;
  background:rgba(0,0,0,.06); backdrop-filter:saturate(180%) blur(6px);
  cursor:pointer;
}
.qm-thumbs__nav--prev{ left:4px; }
.qm-thumbs__nav--next{ right:4px; }

/* Responsive gedrag */
@media (max-width: 1023px){
  .qm-product-gallery{
    grid-template-columns: 1fr;
  }
  .qm-thumbs--desktop{ display:none; }
  .qm-thumbs--mobile{ display:block; }
}

/* --- MOBIEL: dots onder de afbeelding --- */

/* zorg dat mobiel-blok zichtbaar is en onder de main komt */
@media (max-width: 1023px){
  .qm-product-gallery{ grid-template-columns: 1fr; }
  .qm-thumbs--desktop{ display: none; }
  .qm-thumbs--mobile{ display: flex; align-items: center; gap: 8px; margin-top: 12px; position: relative; }
}

/* de track met dots */
.qm-thumbs__track{
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0 36px; /* ruimte voor de pijlen */
}

/* DOT-STIJL (kleine vierkantjes) alleen op mobiel */
@media (max-width: 1023px){
  .qm-thumbs--mobile .qm-thumb{
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    border-radius: 3px;         /* vierkant met lichte afronding (zet op 0 voor “hard” vierkant) */
    background: rgba(0,0,0,.18);
    border: 0;
    padding: 0;
    opacity: 1;                 /* override van eerdere .qm-thumb */
    cursor: pointer;
  }
  .qm-thumbs--mobile .qm-thumb.is-active{
    background: rgba(0,0,0,.75);
  }
  /* verberg eventuele thumb-afbeeldingen mocht je ze nog in de markup hebben */
  .qm-thumbs--mobile .qm-thumb__img{ display: none; }
}

/* pijlen op mobiel */
.qm-thumbs__nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 999px; border: 0;
  background: rgba(0,0,0,.06); backdrop-filter: saturate(180%) blur(6px);
  cursor: pointer;
}
.qm-thumbs__nav--prev{ left: 4px; }
.qm-thumbs__nav--next{ right: 4px; }

/* Mobile dots under the main image — centered */
@media (max-width:1023px){
  .qm-thumbs--mobile{
    display:flex;
    align-items:center;
    justify-content:center;        /* center the row */
    position:relative;
    margin-top:12px;
  }

  /* the track holds the dots; keep some side padding so arrows don't overlap dots */
  .qm-thumbs__track{
    display:flex;
    gap:10px;
    overflow:visible;              /* no scroll needed for a few dots */
    padding:0 40px;                /* space for arrows */
  }

  /* Mobiele dots onder de foto */
.qm-thumbs--mobile .qm-thumb {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;               /* rond maken */
  background: rgba(0,0,0,.2);       /* lichtgrijs */
  border: 0;
  padding: 0;
  cursor: pointer;
}

.qm-thumbs--mobile .qm-thumb.is-active {
  background: #000;                 /* zwart voor actieve foto */
}


/* Mobile arrows: vertically centered to the dots row, not covering them */
.qm-thumbs__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border-radius:999px; border:0;
  background:rgba(0,0,0,.06); backdrop-filter:saturate(180%) blur(6px);
  cursor:pointer; z-index:2;
}
.qm-thumbs__nav--prev{ left:4px; }
.qm-thumbs__nav--next{ right:4px; }

/* Mobiele dots-container */
.qm-thumbs--mobile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  margin-bottom: 20px;   /* <-- extra ruimte naar de titel */
}