.product-detail-media.product-gallery {
  display:block;
  aspect-ratio:auto;
  background:transparent;
  border-radius:0;
  overflow:visible;
}

.product-gallery-stage {
  position:relative;
  width:min(calc(100% - 116px), 470px);
  aspect-ratio:1;
  margin-inline:auto;
  overflow:visible;
  background:#fff;
  border-radius:10px;
  box-shadow:0 24px 58px rgba(0, 0, 0, .22);
}

.product-gallery-open {
  width:100%;
  height:100%;
  padding:0;
  border:0;
  overflow:hidden;
  background:#fff;
  border-radius:10px;
  cursor:zoom-in;
}

.product-gallery-main {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:opacity .18s ease, transform .35s ease;
}

.product-gallery-open:hover .product-gallery-main {
  transform:scale(1.018);
}

.product-gallery-arrow,
.product-lightbox-arrow,
.product-lightbox-close {
  display:grid;
  place-items:center;
  border:1px solid rgba(255, 255, 255, .55);
  color:#fff;
  background:rgba(3, 34, 33, .82);
  cursor:pointer;
  backdrop-filter:blur(8px);
  transition:background .18s ease, transform .18s ease;
}

.product-gallery-arrow {
  position:absolute;
  top:50%;
  z-index:2;
  width:44px;
  height:44px;
  border-radius:50%;
  transform:translateY(-50%);
  font-size:20px;
}

.product-gallery-arrow span,
.product-lightbox-arrow span {
  display:block;
  width:11px;
  height:11px;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
}

.product-gallery-prev span,
.product-lightbox-prev span {
  margin-left:4px;
  transform:rotate(-135deg);
}

.product-gallery-next span,
.product-lightbox-next span {
  margin-right:4px;
  transform:rotate(45deg);
}

.product-gallery-prev { left:-58px; }
.product-gallery-next { right:-58px; }

.product-gallery-arrow:hover,
.product-lightbox-arrow:hover,
.product-lightbox-close:hover {
  background:#032221;
}

.product-gallery-arrow:hover { transform:translateY(-50%) scale(1.05); }

.product-gallery-thumbnails {
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:10px;
  width:min(calc(100% - 116px), 470px);
  margin:12px auto 0;
}

.product-gallery-thumbnail {
  position:relative;
  aspect-ratio:1;
  padding:0;
  overflow:hidden;
  border:2px solid transparent;
  border-radius:7px;
  background:#fff;
  cursor:pointer;
  opacity:.64;
  transition:border-color .18s ease, opacity .18s ease, transform .18s ease;
}

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

.product-gallery-thumbnail:hover {
  opacity:1;
  transform:translateY(-2px);
}

.product-gallery-thumbnail.is-active {
  border-color:var(--accent-text, var(--red));
  opacity:1;
}

.product-gallery-open:focus-visible,
.product-gallery-arrow:focus-visible,
.product-gallery-thumbnail:focus-visible,
.product-lightbox button:focus-visible {
  outline:3px solid #fff;
  outline-offset:3px;
}

.product-lightbox[hidden] { display:none; }

.product-lightbox {
  position:fixed;
  inset:0;
  z-index:10000;
  display:grid;
  place-items:center;
  padding:24px;
}

.product-lightbox-backdrop {
  position:absolute;
  inset:0;
  background:rgba(0, 15, 15, .94);
  backdrop-filter:blur(10px);
}

.product-lightbox-dialog {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  align-items:center;
  width:min(96vw, 1500px);
  height:min(92vh, 1100px);
  gap:20px;
}

.product-lightbox-dialog figure {
  min-width:0;
  height:100%;
  margin:0;
  display:grid;
  place-items:center;
}

.product-lightbox-image {
  max-width:100%;
  max-height:92vh;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:10px;
  box-shadow:0 30px 80px rgba(0, 0, 0, .45);
}

.product-lightbox-close {
  position:absolute;
  top:0;
  right:0;
  z-index:2;
  width:48px;
  height:48px;
  border-radius:50%;
  font-size:30px;
}

.product-lightbox-arrow {
  width:54px;
  height:54px;
  border-radius:50%;
  font-size:24px;
}

body.product-lightbox-open { overflow:hidden; }

@media (max-width:960px) {
  .product-gallery-stage,
  .product-gallery-thumbnails { width:min(calc(100% - 116px), 620px); }
}

@media (max-width:640px) {
  .product-detail-media.product-gallery { width:calc(100% + 28px); margin-left:-14px; }
  .product-gallery-stage,
  .product-gallery-thumbnails { width:calc(100% - 88px); }
  .product-gallery-stage { border-radius:7px; }
  .product-gallery-open { border-radius:7px; }
  .product-gallery-arrow { width:38px; height:38px; }
  .product-gallery-prev { left:-44px; }
  .product-gallery-next { right:-44px; }
  .product-gallery-thumbnails { gap:7px; margin-top:9px; }
  .product-gallery-thumbnail { border-radius:5px; }
  .product-lightbox { padding:14px; }
  .product-lightbox-dialog { grid-template-columns:1fr; width:100%; height:94vh; }
  .product-lightbox-arrow { position:absolute; top:50%; z-index:2; width:46px; height:46px; transform:translateY(-50%); }
  .product-lightbox-prev { left:8px; }
  .product-lightbox-next { right:8px; }
  .product-lightbox-close { top:8px; right:8px; }
  .product-lightbox-image { max-height:94vh; }
}

@media (prefers-reduced-motion:reduce) {
  .product-gallery-main,
  .product-gallery-arrow,
  .product-gallery-thumbnail,
  .product-lightbox-arrow,
  .product-lightbox-close { transition:none; }
}
