/** Shopify CDN: Minification failed

Line 122:0 Unexpected "}"

**/

.product-image-container.product-image-container--thumbnails .product-thumbnail-container .product-thumbnail:after {
  transition: all 0.25s cubic-bezier(0.104, 0.204, 0.492, 1); }


.product-image-container.product-image-container--thumbnails {
  position: relative;
  margin: 0 0 30px;
  width: 100%; }
  @media only screen and (min-width: 768px) {
    .product-image-container.product-image-container--thumbnails {
      padding-left: 90px; }
      [dir="rtl"] .product-image-container.product-image-container--thumbnails {
        padding: 0 90px 0 0; } }
  @media only screen and (min-width: 1068px) {
    .product-image-container.product-image-container--thumbnails {
      margin-bottom: 0; } }
  .product-image-container.product-image-container--thumbnails scroll-shadow {
    margin: 2px 0 0;
    width: 100%; }
    @media only screen and (min-width: 768px) {
      .product-image-container.product-image-container--thumbnails scroll-shadow {
        margin: 0;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 80px;
        height: 100%; } }
    [dir="rtl"] .product-image-container.product-image-container--thumbnails scroll-shadow {
      left: auto;
      right: 0; }
  .product-image-container.product-image-container--thumbnails .product-thumbnail-container {
    display: grid;
    gap: 2px;
    z-index: 20;
    align-content: start;
    overflow-y: hidden;
    overflow-x: scroll;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    grid-auto-rows: max-content;
    align-items: start;
    scrollbar-width: none; }
    @media only screen and (min-width: 768px) {
      .product-image-container.product-image-container--thumbnails .product-thumbnail-container {
        gap: 10px;
        grid-auto-flow: row;
        overflow-y: scroll;
        overflow-x: hidden;
        height: 100%; } }
    .product-image-container.product-image-container--thumbnails .product-thumbnail-container::-webkit-scrollbar {
      display: none; }
    .product-image-container.product-image-container--thumbnails .product-thumbnail-container .product-thumbnail {
      position: relative;
      overflow: hidden;
      cursor: pointer;
      width: 80px;
      height: auto; }
      .product-image-container.product-image-container--thumbnails .product-thumbnail-container .product-thumbnail img {
        object-fit: contain; }
      .product-image-container.product-image-container--thumbnails .product-thumbnail-container .product-thumbnail:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        box-shadow: inset 0 0 0 1px transparent; }
      .product-image-container.product-image-container--thumbnails .product-thumbnail-container .product-thumbnail-icon {
        width: 21px;
        height: 21px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg-body, #fff);
        position: absolute;
        top: 7px;
        right: 7px;
        border-radius: 50%;
        pointer-events: none; }
        .product-image-container.product-image-container--thumbnails .product-thumbnail-container .product-thumbnail-icon svg {
          opacity: 0.6;
          width: 8px; }
      .product-image-container.product-image-container--thumbnails .product-thumbnail-container .product-thumbnail:hover svg {
        opacity: 1; }
      .product-image-container.product-image-container--thumbnails .product-thumbnail-container .product-thumbnail.is-initial-selected:after {
        box-shadow: inset 0 0 0 1px var(--color-body), inset 0 0 0 3px var(--bg-body, #fff); }
    .product-image-container.product-image-container--thumbnails .product-thumbnail-container[data-hide-variants="true"] .product-thumbnail {
      display: none; }
      .product-image-container.product-image-container--thumbnails .product-thumbnail-container[data-hide-variants="true"] .product-thumbnail.is-active, .product-image-container.product-image-container--thumbnails .product-thumbnail-container[data-hide-variants="true"] .product-thumbnail.is-initial-selected {
        display: block; }
/* Fix voor gelijke thumbnail groottes op mobiel */
.product-image-container.product-image-container--thumbnails .product-thumbnail-container .product-thumbnail {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  width: 80px;
  height: 80px; /* Vaste hoogte toevoegen voor vierkante thumbnails */
}

/* Zorgen dat afbeeldingen correct schalen binnen de container */
.product-image-container.product-image-container--thumbnails .product-thumbnail-container .product-thumbnail img {
  object-fit: cover; /* Veranderd van 'contain' naar 'cover' voor betere vulling */
  width: 100%;
  height: 100%;
}

/* Optioneel: Als je liever de afbeelding volledig zichtbaar houdt met padding */
/*
.product-image-container.product-image-container--thumbnails .product-thumbnail-container .product-thumbnail img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  background-color: #f5f5f5; /* Achtergrondkleur voor lege ruimte */
}
*/
/* MOBIEL: Fix voor gelijke thumbnail groottes */
@media only screen and (max-width: 767px) {
  .product-image-container.product-image-container--thumbnails .product-thumbnail-container .product-thumbnail {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    width: 80px;
    height: 80px; /* Vaste hoogte voor vierkante thumbnails op mobiel */
  }

  .product-image-container.product-image-container--thumbnails .product-thumbnail-container .product-thumbnail img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}
/* MOBIEL: Fix voor gelijke thumbnail groottes */
@media only screen and (max-width: 767px) {
  .product-image-container.product-image-container--thumbnails .product-thumbnail-container .product-thumbnail {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    width: 80px;
    height: 80px; /* Vaste hoogte voor vierkante thumbnails op mobiel */
  }

  .product-image-container.product-image-container--thumbnails .product-thumbnail-container .product-thumbnail img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}

/* DESKTOP: Afgeronde hoeken en thumbnails onder product */
@media only screen and (min-width: 768px) {
  /* Hoofdproduct images afgeronde hoeken geven */
  .product-images__slide--image .product-single__media-image {
    border-radius: 20px; /* Afgeronde hoeken zoals in het voorbeeld */
    overflow: hidden;
  }
  
  /* Container aanpassen voor thumbnails onder product */
  .product-image-container.product-image-container--thumbnails {
    padding-left: 0;
    display: flex;
    flex-direction: column;
  }
  
  [dir="rtl"] .product-image-container.product-image-container--thumbnails {
    padding: 0;
  }
  
  /* Scroll shadow verplaatsen naar onder */
  .product-image-container.product-image-container--thumbnails scroll-shadow {
    position: relative;
    width: 100%;
    height: auto;
    top: auto;
    left: auto;
    margin-top: 20px;
  }
  
  /* Thumbnail container horizontaal maken */
  .product-image-container.product-image-container--thumbnails .product-thumbnail-container {
    grid-auto-flow: column;
    overflow-x: auto;
    overflow-y: hidden;
    height: auto;
    width: 100%;
    justify-content: center;
    padding: 10px 0;
  }
  
  /* Thumbnails afgeronde hoeken geven op desktop */
  .product-image-container.product-image-container--thumbnails .product-thumbnail-container .product-thumbnail {
    width: 80px;
    height: 80px;
    border-radius: 12px; /* Afgeronde hoeken voor thumbnails */
    overflow: hidden;
  }
  
  .product-image-container.product-image-container--thumbnails .product-thumbnail-container .product-thumbnail img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  
  /* Afgeronde border voor geselecteerde thumbnail */
  .product-image-container.product-image-container--thumbnails .product-thumbnail-container .product-thumbnail.is-initial-selected:after {
    border-radius: 12px; /* Match met thumbnail border-radius */
  }
}