.product-image-trigger { cursor: zoom-in; }
.product-image-trigger:focus-visible { outline: 3px solid #3c61cc; outline-offset: 3px; }
html:has(.product-image-viewer[open]) { overflow: hidden; }

.product-image-viewer {
  width: min(94vw, 64rem);
  max-width: none;
  max-height: 94dvh;
  padding: 0;
  border: 1px solid #46536d;
  border-radius: 1rem;
  overflow: auto;
  color: #f6f7ff;
  background: #172235;
  box-shadow: 0 1.2rem 4rem #0006;
}
.product-image-viewer::backdrop { background: rgb(7 13 23 / 83%); }
.product-image-viewer__body { position: relative; padding: clamp(.6rem, 2vw, 1.25rem); }
.product-image-viewer__photo {
  display: block;
  width: 100%;
  height: min(73dvh, 54rem);
  object-fit: contain;
  background: #fff;
  border-radius: .65rem;
}
.product-image-viewer__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: .6rem;
}
.product-image-viewer button {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 .55rem;
  border: 1px solid #667694;
  border-radius: 99px;
  color: white;
  background: #263652;
  font: 700 1.25rem/1 system-ui, sans-serif;
  cursor: pointer;
}
.product-image-viewer button[hidden] { display: none; }
.product-image-viewer button:hover { background: #374b70; }
.product-image-viewer button:focus-visible { outline: 3px solid #9ebcff; outline-offset: 2px; }
.product-image-viewer .product-image-viewer__close {
  position: absolute;
  top: clamp(1rem, 3vw, 1.85rem);
  right: clamp(1rem, 3vw, 1.85rem);
  font-size: 1.6rem;
}
.product-image-viewer__caption {
  margin: 0;
  color: #f6f7ff;
  font: 650 .9rem/1.3 system-ui, sans-serif;
}