/* Isolated admin/product details viewport and image zoom. */
#detailsModal.show { overscroll-behavior: contain; overflow: hidden; padding: 12px; }
#detailsModal .modal { width: min(700px, 100%); max-height: min(92dvh, calc(100vh - 24px)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
#detailsModal .gallery-main { position: relative; overflow: hidden; touch-action: none; overscroll-behavior: contain; }
#detailsModal #galleryMainImage { transform-origin: center center; will-change: transform; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; cursor: zoom-in; }
#detailsModal #galleryMainImage.hl-detail-zoomed { cursor: grab; }
#detailsModal .hl-detail-zoom-tools { position: relative; z-index: 1; display: flex; justify-content: flex-end; align-items: center; gap: 5px; margin: 8px 0 4px; padding: 4px; background: transparent; color: inherit; border-radius: 9px; }
#detailsModal .hl-detail-zoom-tools button { appearance: none; border: 0; border-radius: 6px; min-width: 34px; height: 34px; background: #253148; color: #fff; font-size: 19px; cursor: pointer; }
#detailsModal .hl-detail-zoom-tools button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#detailsModal .hl-detail-zoom-tools output { font: 12px/1.3 sans-serif; min-width: 38px; text-align: center; }
@media (max-width: 600px) { #detailsModal { padding: 7px; } #detailsModal .modal { max-height: calc(100dvh - 14px); padding: 14px; } #detailsModal .gallery-main { height: min(44dvh, 350px); } }

/* Controls occupy their own row, never covering the picture or its navigation arrows. */
#detailsModal .product-gallery > .hl-detail-zoom-tools { box-sizing: border-box; width: 100%; }