.product-image-open { display:none; }
.product-image-open[hidden] { display:none; }
@media (hover:none), (pointer:coarse) {
    .product-image-open { position:absolute; inset:0; z-index:1; display:flex; align-items:flex-end; justify-content:flex-end; width:100%; height:100%; padding:10px; border:0; border-radius:inherit; background:transparent; color:var(--text-color); cursor:zoom-in; touch-action:manipulation; }
    .product-image-open>span { display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--border-color); border-radius:50%; background:var(--customer-bg-color); color:var(--text-color); }
    .product-image-open:focus-visible { outline:3px solid var(--customer-link-color); outline-offset:-3px; }
}
html.image-viewer-open, html.image-viewer-open body { overflow:hidden; overscroll-behavior:none; }
.product-image-viewer { position:fixed; inset:0; width:100%; max-width:none; height:100%; height:100dvh; max-height:none; margin:0; padding:0; border:0; background:var(--customer-bg-color); color:var(--text-color); overscroll-behavior:none; }
.product-image-viewer[open] { display:flex; flex-direction:column; }
.product-image-viewer::backdrop { background:var(--customer-bg-color); }
.image-viewer-toolbar { display:flex; align-items:center; justify-content:space-between; flex-shrink:0; gap:12px; padding:calc(6px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) 6px max(12px,env(safe-area-inset-left,0px)); }
.image-viewer-toolbar>span { font-size:14px; font-variant-numeric:tabular-nums; }
.product-image-viewer button { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:8px; border:1px solid var(--border-color); border-radius:8px; color:var(--text-color); background:var(--customer-surface-color); font-size:13px; touch-action:manipulation; cursor:pointer; }
.product-image-viewer button:focus-visible { outline:3px solid var(--customer-link-color); outline-offset:2px; }
.product-image-viewer button:disabled { opacity:.4; cursor:default; }
.image-viewer-stage { position:relative; flex:1; min-height:0; overflow:hidden; touch-action:none; user-select:none; -webkit-user-select:none; }
.image-viewer-stage img { display:block; width:100%; height:100%; object-fit:contain; transform-origin:center; pointer-events:none; }
.image-viewer-error { position:absolute; inset:0; display:grid; place-items:center; margin:0; padding:24px; text-align:center; background:var(--customer-bg-color); color:var(--text-color); }
.image-viewer-error[hidden] { display:none; }
.image-viewer-controls { display:flex; align-items:center; justify-content:center; flex-shrink:0; gap:8px; padding:8px max(8px,env(safe-area-inset-right,0px)) 4px max(8px,env(safe-area-inset-left,0px)); }
.image-viewer-instructions { flex-shrink:0; margin:0; padding:4px max(12px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px)); text-align:center; font-size:12px; color:var(--muted-color); }
@media (hover:hover) and (pointer:fine) {
    .product-image-viewer button:not(:disabled):hover { background:var(--customer-btn-hover-color); color:var(--on-button-hover-color); }
}