/* Viewport-sized product lightbox, using the unpadded uploaded image.
   Scoped to the image modal: no changes to covers, cart or other dialogs. */
#product-modal .modal-dialog {
  width: calc(100% - 24px);
  max-width: 1600px;
  height: calc(100vh - 24px);
  height: calc(100dvh - 24px);
  min-height: 0;
  margin: 12px auto;
}
#product-modal .modal-content {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
#product-modal .modal-header {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  padding: 0;
  border: 0;
}
#product-modal .btn-close {
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 10px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 1px 8px #0002;
  opacity: .85;
}
#product-modal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 8px;
}
#product-modal .product-images-modal__carousel,
#product-modal .carousel-inner,
#product-modal .carousel-item,
#product-modal picture {
  height: 100%;
}
#product-modal picture { display: block; }
#product-modal .carousel-item img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}
#product-modal .carousel-control-prev,
#product-modal .carousel-control-next {
  width: 48px;
}
#product-modal .carousel-control-prev-icon,
#product-modal .carousel-control-next-icon {
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 8px #0002;
}
@media (max-width: 575.98px) {
  #product-modal .modal-dialog {
    width: calc(100% - 8px);
    height: calc(100vh - 8px);
    height: calc(100dvh - 8px);
    margin: 4px auto;
  }
  #product-modal .modal-body { padding: 4px; }
  #product-modal .carousel-control-prev,
  #product-modal .carousel-control-next { width: 36px; }
}