.product-image { background: #102338; }
.product-zoom { display: block; width: 100%; height: 100%; min-height: inherit; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.product-image .product-zoom img { width: 100%; height: 100%; object-fit: contain; transition: transform .25s ease; }
.product-zoom:hover img { transform: scale(1.025); }
#image-viewer { width: min(1100px, calc(100% - 2rem)); height: min(88vh, 850px); padding: 0; border: 0; background: #0e1d2f; overflow: hidden; }
#image-viewer::backdrop { background: rgba(7, 17, 14, .88); }
.image-viewer-toolbar { position: absolute; top: 1rem; right: 1rem; z-index: 2; display: flex; gap: .5rem; }
.image-viewer-toolbar button { width: 2.5rem; height: 2.5rem; border: 0; border-radius: 999px; background: #fff; color: #11201d; font-size: 1.2rem; cursor: pointer; }
#zoom-stage { width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; touch-action: none; cursor: grab; }
#zoom-stage:active { cursor: grabbing; }
#zoom-image { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center; user-select: none; -webkit-user-drag: none; }
@media (max-width: 680px) { #image-viewer { width: 100%; height: 100%; max-height: none; } }