.image-detail{
  margin:40px auto 0;
  text-align:center;
}
.image-detail .field-item{
  display:none;
}
/*.image-detail .field-item.item-0{
  display:block;
}*/
.image-detail .field-item img{
  margin:0 auto;
  max-height:300px;
  width:auto;
  max-width:450px;
  cursor:pointer;
}
.image-detail .icon{
  opacity: 0;
  position:absolute;
}
.image-detail:hover .icon-resize-full{
  opacity: 1;
  transition: opacity 0.75s ease;
  font-size:7rem;
  top:-16px;
  left:-39px;
  color:var(--tuerkis-slight);
  cursor:pointer;
}
.image-detail.big:hover .icon-resize-full{
  display:none;
}
.image-detail.big .field-item.big-image{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:100%;
  min-width: 50%;
  max-width: max-content;
  z-index:999;
  height:80vh;
  max-height: max-content;
  background: linear-gradient(180deg, #f4fbfb 0%, #fffdf7 100%);
  display:flex !important;
  flex-direction:column;
  justify-content:center;
  cursor:pointer;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
  border-radius: 24px;
}
.image-detail.big .icon-cancel{
  opacity: 1;
  font-size:2rem;
  top:15px;
  right:15px;
  color:var(--tuerkis-mlight);
  cursor:pointer;
  background-color: #F4FBFB;
}
.image-detail.big .field-item.field-item.big-image img{
  max-height:75vh;
  max-width: inherit;
  height:auto;
  padding:15px;
}
.image-detail.big .field-item.field-item.big-image .image-title{
  font-weight:600;
  color:#000;
}
.image-thumbs{
  display:flex;
  flex-wrap:wrap;
  padding:0;
  margin:40px 0;
  width:100%;
  justify-content:center;
}
.image-thumbs .image-thumb{
  border:1px solid var(--grey-slight);
  width:90px;
  height:90px;
  padding:5px;
  margin:0 10px 10px 0;
  cursor:pointer;
}
.image-thumbs .image-thumb:empty{
	display:none;
}
.image-thumbs .image-thumb.active{
	border-color:var(--tuerkis);
}
.image-thumbs .img-responsive{
  max-height:100%;
  width:auto;
}
.image-thumbs img{
  margin: 0 auto;
  object-fit: contain;
  aspect-ratio: 1;
}


.js-product-gallery .field-item {
  display: none;
}

.js-product-gallery .field-item.is-active {
  display: block;
}

.js-product-gallery-thumbs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.js-product-gallery-thumbs .image-thumb {
  border: 1px solid #ddd;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.js-product-gallery-thumbs .image-thumb.active,
.js-product-gallery-thumbs .image-thumb:hover {
  border-color: var(--tuerkis);
}

.js-product-gallery-thumbs .image-thumb img {
  display: block;
  width: 70px;
  height: auto;
}