/* =========================
   Gallery: thumbnails UNDER main on ALL devices
   ========================= */

.mySlides{ display:none; }
.cursor{ cursor:pointer; }

.product-gallery{
  display:flex;
  flex-direction: column;     /* thumbs below */
  align-items: stretch;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* MAIN */
.product-gallery .main-right{
  width: 100%;
  /* desktop size */
  max-width: 400px;
  aspect-ratio: 1 / 1;
  height: auto;
  margin: 0;
}

.product-gallery .main-right img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  max-width: none;
}

/* THUMBS */
.product-gallery .thumbs-left{
  width: 100%;
  max-width: 400px;
  display:flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 0;
  overflow: hidden;
}

.product-gallery .thumb-item{
  flex: 0 0 calc((100% - 18px) / 4);
  max-width: calc((100% - 18px) / 4);
  margin: 0;
  padding: 0;
}

.product-gallery .demo{
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  display: block;
  opacity: .6;
}

.product-gallery .demo:hover,
.product-gallery .demo.active{
  opacity: 1;
  outline: 2px solid #149dcc;
  outline-offset: 2px;
}

/* Mobile side padding */
@media (max-width: 576px){
  .product-gallery{
    padding-left: 6px;
    padding-right: 6px;
  }
}