.product-detail__gallery {
  width: 100%;
  min-width: 0;
  max-width: 560px;
  margin-inline: auto;
}

.product-detail__gallery-stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1/1;
  background: var(--primary-pale);
}

.product-detail__gallery-slide {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.product-detail__gallery-slide.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
}

.product-detail__gallery-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-detail__gallery-thumbs {
  --gallery-thumb-width: 78px;
  --gallery-thumb-gap: 10px;
  --gallery-visible-thumbs: 4;
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.product-detail__gallery-thumbs-viewport {
  width: 100%;
  max-width: calc(var(--gallery-visible-thumbs) * var(--gallery-thumb-width) + (var(--gallery-visible-thumbs) - 1) * var(--gallery-thumb-gap));
  overflow: hidden;
}

.product-detail__gallery-thumbs-track {
  display: flex;
  width: max-content;
  gap: var(--gallery-thumb-gap);
  will-change: transform;
}

.product-detail__gallery-thumbs-track.is-animating {
  transition: transform 0.38s ease;
}

.is-static .product-detail__gallery-thumbs-track {
  margin-inline: auto;
  transform: none !important;
}

.product-detail__gallery-thumb {
  width: var(--gallery-thumb-width);
  flex: 0 0 var(--gallery-thumb-width);
  aspect-ratio: 1/1;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--primary-pale);
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.product-detail__gallery-thumb.is-active,
.product-detail__gallery-thumb:hover,
.product-detail__gallery-thumb:focus-visible {
  border-color: var(--accent);
}

.product-detail__gallery-thumb:focus-visible {
  outline: 2px solid rgba(34, 146, 255, 0.28);
  outline-offset: 3px;
}

.product-detail__gallery-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 560px) {
  .product-detail__gallery-thumbs {
    --gallery-thumb-width: 68px;
    --gallery-visible-thumbs: 3;
  }
}

@media (prefers-reduced-motion: reduce) {

  .product-detail__gallery-slide,
  .product-detail__gallery-thumbs-track {
    transition: none;
  }
}