/* Gallery enhancement is isolated from the existing purchase, stock and review controls. */
body.o1-zoom-open{overflow:hidden}.product-detail #media-stage.o1-media-zoomable{position:relative}.o1-media-zoomable>img.main-media{cursor:zoom-in}.o1-media-zoomable>img.main-media:focus-visible{outline:3px solid #6c8be4;outline-offset:4px}.o1-product-zoom{position:absolute;bottom:16px;right:16px;display:inline-flex;gap:8px;align-items:center;min-height:44px;padding:10px 14px;background:#fff;border:1px solid #dfe4ec;border-radius:8px;color:#142743;font:600 13px/1.3 Arial,"Segoe UI",sans-serif;box-shadow:0 2px 10px #1427430d}.o1-product-zoom:hover{background:#f2f5fc}.o1-product-zoom img{width:20px;height:20px;flex:none}.o1-zoom-modal{width:calc(100vw - 32px);height:calc(100dvh - 32px);max-width:1700px;max-height:none;margin:auto;padding:20px 24px;border:1px solid #dfe4ec;border-radius:12px;background:#fcfdff;color:#142743;overflow:hidden;box-shadow:0 18px 70px #14274330}.o1-zoom-modal[open]{display:flex;flex-direction:column}.o1-zoom-modal::backdrop{background:#142743b3}.o1-zoom-header{display:flex;justify-content:space-between;align-items:center;gap:22px;flex:none}.o1-zoom-header>div{min-width:0}.o1-zoom-header h2{font:600 17px/1.4 Arial,"Segoe UI",sans-serif;letter-spacing:0;max-width:1000px;margin:0 0 4px}.o1-zoom-count{font:13px/1.4 Arial,"Segoe UI",sans-serif;color:#65748a;margin:0}.o1-zoom-modal button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:10px;border:1px solid #dfe4ec;border-radius:8px;background:white;color:#142743;cursor:pointer;flex:none}.o1-zoom-modal button img{width:22px;height:22px;display:block;pointer-events:none}.o1-zoom-modal button:hover{background:#eef2fc}.o1-zoom-modal button:disabled{opacity:.35;cursor:not-allowed}.o1-zoom-modal button:focus-visible{outline:3px solid #6c8be4;outline-offset:3px}.o1-zoom-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;background:#fff;overflow:hidden;margin:18px 0;touch-action:none;border-radius:8px}.o1-zoom-stage.is-zoomed{cursor:grab}.o1-zoom-stage.is-dragging{cursor:grabbing}.o1-zoom-image{display:block;max-width:none;max-height:none;flex:none;object-fit:contain;transform-origin:center;will-change:transform;user-select:none;-webkit-user-drag:none}.o1-zoom-controls{display:flex;align-items:center;justify-content:center;gap:12px;flex:none}.o1-zoom-value{font:600 13px/1.4 Arial,"Segoe UI",sans-serif;min-width:52px;text-align:center}.o1-zoom-help{font:12px/1.5 Arial,"Segoe UI",sans-serif;color:#65748a;text-align:center;min-height:18px;flex:none;margin:10px 0 0}.o1-zoom-close{align-self:flex-start}
@media(max-width:700px){.o1-product-zoom{right:11px;bottom:11px;font-size:12px;padding:10px 12px}.o1-zoom-modal{width:100vw;height:100dvh;margin:0;padding:14px 12px max(14px,env(safe-area-inset-bottom));border:0;border-radius:0;max-width:none}.o1-zoom-header{gap:14px;align-items:flex-start}.o1-zoom-header h2{font-size:14px;line-height:1.5;max-height:65px;overflow:auto}.o1-zoom-count{font-size:11px}.o1-zoom-stage{margin:13px 0;border-radius:0}.o1-zoom-controls{gap:7px}.o1-zoom-modal button{min-width:42px;min-height:44px;padding:9px}.o1-zoom-value{font-size:12px;min-width:42px}.o1-zoom-help{font-size:11px;margin-top:8px;line-height:1.5}.o1-zoom-modal button img{width:20px;height:20px}}
@media(prefers-reduced-motion:reduce){.o1-zoom-modal,.o1-product-zoom,.o1-zoom-modal *{animation:none!important;transition:none!important}.o1-zoom-image{will-change:auto}}
/* The mobile viewer keeps its close control and thumbnail strip outside the pannable photo. */
.o1-zoom-modal{padding:0;background:#fff;overscroll-behavior:contain}
.o1-zoom-modal::backdrop{background:#142743d9;backdrop-filter:none}
.o1-zoom-header{position:relative;z-index:3;padding:12px 18px;border-bottom:1px solid #edf0f4;background:#fff;min-height:68px;gap:14px}
.o1-zoom-header h2{font-size:14px;line-height:1.35;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-height:none;margin:0 0 3px}
.o1-zoom-close{position:relative;flex:none;align-self:center;border-radius:50%!important;min-width:44px!important;min-height:44px!important;background:#fff!important;opacity:1!important;visibility:visible!important}
.o1-zoom-stage{margin:0;border-radius:0;background:#f7f7f5;isolation:isolate}
.o1-zoom-image{will-change:auto}
.o1-zoom-stage.is-zoomed .o1-zoom-image{will-change:transform}
.o1-zoom-image[hidden],.o1-zoom-pan[hidden]{display:none}
.o1-zoom-controls{padding:8px 12px;gap:6px;border-top:1px solid #edf0f4;background:#fff;position:relative;z-index:2}
.o1-zoom-value{min-width:44px;font-variant-numeric:tabular-nums}
.o1-zoom-modal button{min-width:44px;min-height:44px}
.o1-zoom-thumbnails{display:flex;justify-content:flex-start;gap:8px;flex:none;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;padding:8px 14px 12px;border-top:1px solid #edf0f4;background:white;scroll-padding-inline:14px;scrollbar-width:thin}
.o1-zoom-thumbnails button{padding:3px;width:50px;height:62px;border:1px solid #dfe4ec;border-radius:6px;flex:none}
.o1-zoom-thumbnails button[aria-pressed=true]{border:2px solid #264bcb;padding:2px;background:#edf1ff}
.o1-zoom-thumbnails button img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.o1-zoom-help{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;min-height:0}
.o1-zoom-pan{display:flex;position:absolute;bottom:10px;left:50%;transform:translateX(-50%);gap:4px;padding:4px;border:1px solid #dfe4ec;border-radius:10px;background:#fffffff2;z-index:2}
.o1-zoom-pan [data-o1-zoom-command=up] img{transform:rotate(90deg)}
.o1-zoom-pan [data-o1-zoom-command=down] img{transform:rotate(90deg)}
@media(max-width:900px),(hover:none),(pointer:coarse){
 .o1-zoom-modal{inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;border:0;border-radius:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
 .o1-zoom-header{padding:10px 12px;min-height:64px}
 .o1-zoom-header h2{font-size:13px}
 .o1-zoom-controls{gap:6px;padding:7px 8px}
 .o1-zoom-thumbnails{padding:7px 12px 9px}
}
@media(max-height:500px) and (min-width:560px){
 .o1-zoom-header{padding:6px 12px;min-height:56px}
 .o1-zoom-header h2{-webkit-line-clamp:1;margin:0}
 .o1-zoom-count{font-size:10px}
 .o1-zoom-controls{padding:5px 8px}
 .o1-zoom-thumbnails{padding:4px 12px}
 .o1-zoom-thumbnails button{height:44px;width:40px}
}
