/* A compact horizontal gallery and a full-screen, keyboard-accessible image viewer. */
.product-gallery { min-width: 0; }
.product-gallery .gallery-stage { position: relative; isolation: isolate; background: #f3f0f4; border-radius: 14px; touch-action: pan-y; }
.product-gallery .gallery-enlarge { aspect-ratio: 1; }
.product-gallery .gallery-enlarge .product-photo { height: 100%; aspect-ratio: 1; }
.gallery-stage .gallery-detail .product-photo { transform: scale(1.65); }
.gallery-preview-badge,.gallery-counter { position: absolute; top: 14px; z-index: 2; border-radius: 20px; padding: 5px 10px; font-size: 10px; background: #fffffff0; color: #343039; pointer-events: none; }
.gallery-preview-badge { inset-inline-start: 14px; }
.gallery-counter { inset-inline-end: 14px; font-variant-numeric: tabular-nums; }
.gallery-view-label { position: absolute; bottom: 16px; inset-inline-start: 16px; max-width: 55%; z-index: 2; padding: 5px 9px; border-radius: 5px; background: #fffffff0; font-size: 11px; line-height: 1.4; pointer-events: none; }
.gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; border: 1px solid #e7e1ea; border-radius: 50%; background: #fffffff0; display: grid; place-items: center; box-shadow: 0 2px 10px #00000008; }
.gallery-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.gallery-arrow-previous { inset-inline-start: 12px; }.gallery-arrow-next { inset-inline-end: 12px; }
[dir=rtl] .gallery-arrow svg { transform: rotate(180deg); }
.product-gallery .product-thumbs { padding: 10px 2px 3px; gap: 8px; scrollbar-width: thin; flex-wrap: nowrap; }
.product-gallery .gallery-thumb { flex: 0 0 62px; height: 62px; padding: 3px; border-radius: 8px; overflow: hidden; }
.product-gallery .gallery-thumb .product-photo { height: 54px; aspect-ratio: 1; border-radius: 4px; }
.product-gallery .gallery-thumb span.visually-hidden { position: absolute; margin: -1px; padding: 0; }
.product-gallery .gallery-caption { font-size: 10px; line-height: 1.55; color: #726976; margin-top: 7px; }
.gallery-image-error { position: absolute; inset: 0; margin: 0; padding: 40px 55px; background: #f3f0f4; display: grid; align-content: center; text-align: center; font-size: 13px; color: #5d5265; }
.gallery-image-error[hidden] { display: none; }.gallery-panel { position: relative; }
.has-image-error .gallery-zoom-label { display: none; }
.gallery-arrow:focus-visible,.gallery-zoom-controls button:focus-visible { outline: 3px solid #9273bc; outline-offset: 2px; }
dialog#modal.product-gallery-dialog { inset: 0; width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; margin: 0; padding: 0; border: 0; border-radius: 0; background: #f5f3f5; z-index: 150; overflow: hidden; }
dialog#modal.product-gallery-dialog[open] { display: flex; flex-direction: column; }
.product-gallery-dialog .modal-head { flex: 0 0 auto; padding: max(12px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) 12px max(24px,env(safe-area-inset-left)); background: #fff; }
.product-gallery-dialog .modal-head h3 { font-size: 16px; font-weight: 600; max-width: calc(100% - 60px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-gallery-dialog .modal-head .iconbtn { width: 44px; height: 44px; }
.product-gallery-dialog .modal-body { min-height: 0; flex: 1; padding: 0; display: flex; flex-direction: column; }
.product-gallery-dialog .gallery-lightbox { min-height: 0; flex: 1; position: relative; border-radius: 0; overflow: hidden; }
.gallery-viewer-viewport { position: absolute; inset: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; touch-action: pan-y; outline-offset: -4px; }
.gallery-viewer-viewport.is-zoomed { touch-action: none; cursor: grab; }.gallery-viewer-viewport.is-zoomed:active { cursor: grabbing; }
.gallery-viewer-art { width: min(1000px,calc(100vw - 160px),calc(100dvh - 230px)); aspect-ratio: 1; flex: 0 0 auto; transform-origin: center; user-select: none; will-change: transform; overflow: hidden; }
.product-gallery-dialog .gallery-viewer-art .product-photo { margin: 0; width: 100%; height: 100%; border-radius: 0; aspect-ratio: 1; pointer-events: none; }
.product-gallery-dialog .gallery-viewer-art .product-photo img { pointer-events: none; user-select: none; }
.gallery-viewer-art.gallery-detail .product-photo { transform: scale(1.65); }
.gallery-viewer-toolbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 30px 5px; background: white; border-top: 1px solid #e5dfe8; }
.gallery-viewer-toolbar > div:first-child { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gallery-viewer-label { font-size: 13px; }.gallery-viewer-counter { font-size: 11px; color: #706775; }
.gallery-zoom-controls { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.gallery-zoom-controls button { min-height: 44px; min-width: 44px; border-radius: 6px; background: #f0ebf4; font-size: 21px; }
.gallery-zoom-controls button:disabled { opacity: .4; cursor: default; }
.gallery-zoom-controls .gallery-reset { font-size: 11px; padding-inline: 12px; margin-inline-start: 5px; }
.gallery-zoom-level { min-width: 46px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; }
.product-gallery-dialog .modal-body p.gallery-viewer-note { margin: 0; padding: 4px 30px max(14px,env(safe-area-inset-bottom)); background: #fff; color: #776d7c; font-size: 10px; line-height: 1.5; }
@media(max-width:760px){
 .product-gallery .gallery-enlarge { aspect-ratio: 1; }
 .product-gallery .gallery-enlarge .product-photo { height: auto; width: 100%; transform-origin: center; }
 .gallery-stage .gallery-detail .product-photo { transform: scale(1.65); }
 .product-gallery .gallery-thumb { flex-basis: 54px; height: 54px; }.product-gallery .gallery-thumb .product-photo { height: 46px; }
 .gallery-preview-badge,.gallery-counter { top: 10px; font-size: 9px; padding: 4px 8px; }.gallery-preview-badge { inset-inline-start: 10px; }.gallery-counter { inset-inline-end: 10px; }
 .gallery-arrow-previous { inset-inline-start: 8px; }.gallery-arrow-next { inset-inline-end: 8px; }.gallery-view-label { bottom: 12px; inset-inline-start: 10px; font-size: 10px; }
 .gallery-viewer-art { width: min(100vw,calc(100dvh - 240px)); }.product-gallery-dialog .modal-head { padding-inline: 16px; }
 .gallery-viewer-toolbar { padding: 10px 16px 5px; flex-wrap: wrap; gap: 8px; }.gallery-viewer-toolbar > div:first-child { flex: 1 1 100%; flex-direction: row; justify-content: space-between; align-items: baseline; }
 .gallery-zoom-controls { width: 100%; justify-content: center; }.product-gallery-dialog .modal-body p.gallery-viewer-note { padding-inline: 16px; }
}