[data-gallery-main] { cursor: zoom-in; }
[data-gallery-main]:focus-visible { outline: 3px solid #f97316; outline-offset: 4px; }
.gallery-main { position: relative; }
.product-zoom-open { position: absolute; top: 12px; right: 12px; background: #fff; color: #28205a; border: 1px solid #ddd; border-radius: 8px; padding: 6px 10px; cursor: zoom-in; font: inherit; }
.product-image-viewer { position: fixed; inset: 0; margin: auto; width: min(1100px, 96vw); height: 92dvh; max-width: 96vw; max-height: 96dvh; padding: 0; border: 0; border-radius: 14px; background: #fff; color: #28205a; overflow: hidden; }
.product-image-viewer[open] { display: flex; flex-direction: column; }
.product-image-viewer::backdrop { background: rgb(0 0 0 / 80%); }
.product-zoom-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px; border-bottom: 1px solid #ddd; flex-shrink: 0; }
.product-zoom-toolbar button { min-width: 44px; min-height: 44px; border: 1px solid #ddd; border-radius: 8px; padding: 6px 12px; background: #f5f5f8; cursor: pointer; font: inherit; }
.product-zoom-toolbar button:disabled { opacity: .4; cursor: default; }
.product-zoom-toolbar button:focus-visible { outline: 3px solid #f97316; }
.product-zoom-stage { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; background: #f5f5f8; }
.product-zoom-canvas { min-width: 100%; min-height: 100%; display: grid; place-items: center; }
.product-zoom-canvas img { display: block; max-width: none; max-height: none; object-fit: contain; user-select: none; }
.product-zoom-stage.is-zoomed { cursor: grab; }
.product-zoom-stage.is-dragging { cursor: grabbing; }
.product-zoom-hint { margin: 0; padding: 8px 12px; text-align: center; font-size: 12px; flex-shrink: 0; }
html.product-zoom-active { overflow: hidden; }
@media (max-width: 600px) { .product-image-viewer { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; } .product-zoom-toolbar { gap: 5px; } .product-zoom-toolbar button { padding: 6px 9px; } }