.product-detail-template .product-detail-main {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  padding: clamp(8px, 1vw, 16px);
  overflow: hidden;
  background: #fff;
}

.product-detail-template .product-detail-main img,
.product-detail-template .product-detail-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #fff;
  filter: none;
  transform: none;
}

.product-detail-template .product-detail-main:hover img,
.product-detail-template .product-detail-thumbs button:hover img {
  transform: none;
}

.product-detail-template .product-detail-thumbs {
  gap: 12px;
}

.product-detail-template .product-detail-thumbs button {
  flex: 0 0 calc((100% - 36px) / 4);
  width: calc((100% - 36px) / 4);
  height: auto;
  aspect-ratio: 1;
  background: #fff;
}

@media (min-width: 981px) {
  .product-detail-template .product-detail-hero {
    padding-right: max(var(--gutter), calc((100vw - 1600px) / 2));
    padding-left: max(var(--gutter), calc((100vw - 1600px) / 2));
    grid-template-columns: minmax(0, 640px) minmax(360px, 1fr);
    gap: clamp(40px, 4.5vw, 72px);
  }

  .product-detail-template .product-detail-gallery {
    min-width: 0;
  }

  .product-detail-template .product-detail-summary {
    width: 100%;
    min-width: 0;
    max-width: none;
    justify-self: stretch;
  }
}

@media (min-width: 1181px) and (max-width: 1366px) {
  .product-detail-template .product-detail-hero {
    grid-template-columns: minmax(0, 560px) minmax(360px, 1fr);
    gap: clamp(42px, 4vw, 52px);
  }
}

@media (min-width: 981px) and (max-width: 1180px) {
  .product-detail-template .product-detail-hero {
    grid-template-columns: minmax(0, 500px) minmax(340px, 1fr);
    gap: 40px;
  }
}
@media (max-width: 760px) {
  .product-detail-template .product-detail-main {
    height: auto;
    padding: 8px;
  }

  .product-detail-template .product-detail-thumbs button {
    height: auto;
  }
}
.product-detail-template .product-gallery-lightbox figure img,
.product-detail-template .product-gallery-lightbox figure:hover img {
  transform: none;
  filter: none;
  opacity: 1;
  transition: none;
  animation: none;
  cursor: default;
}