/* Product page full-screen photo viewer (js/product-photo-viewer.js) */
#productMainImage { cursor: zoom-in; }
.photo-zoom-btn { position: absolute; top: .6rem; right: .6rem; z-index: 2; width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: .9; }
.photo-zoom-btn:hover, .photo-zoom-btn:focus-visible { opacity: 1; }

html.pv-open, html.pv-open body { overflow: hidden; }

/* White, like the product photos' own backgrounds; above everything (the chat widget and contact bar go up to 10000) */
.photo-viewer { position: fixed; inset: 0; z-index: 10100; display: flex; flex-direction: column; background: #fff; color: #212529; -webkit-user-select: none; user-select: none; }
.photo-viewer:focus { outline: none; }
.photo-viewer[hidden], .photo-viewer [hidden] { display: none !important; }
.photo-viewer .pv-bar { display: flex; align-items: center; padding: .5rem .5rem .5rem 1rem; padding-top: max(.5rem, env(safe-area-inset-top)); }
.photo-viewer .pv-count { font-size: .95rem; color: #495057; }
.photo-viewer .pv-close { margin-left: auto; background: none; border: 0; border-radius: .375rem; color: #212529; font-size: 1.5rem; line-height: 1; padding: .5rem .75rem; }
.photo-viewer .pv-stage { position: relative; flex: 1 1 auto; overflow: hidden; touch-action: none; }
/* the script sizes and places the picture (as big as fits, at most 2x its real size) */
.photo-viewer .pv-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; transform-origin: 0 0; cursor: zoom-in; -webkit-user-drag: none; }
.photo-viewer.pv-zoomed .pv-img { cursor: grab; }
.photo-viewer .pv-nav { position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .06); color: #212529; font-size: 1.3rem; }
.photo-viewer .pv-prev { left: .5rem; }
.photo-viewer .pv-next { right: .5rem; }
.photo-viewer.pv-zoomed .pv-nav { opacity: .5; }
.photo-viewer .pv-nav:hover, .photo-viewer .pv-close:hover { background: rgba(0, 0, 0, .12); }
.photo-viewer button:focus-visible { outline: 2px solid #212529; outline-offset: 2px; }
.photo-viewer .pv-spinner { position: absolute; right: 1rem; bottom: 1rem; z-index: 2; color: #6c757d; }
.photo-viewer .pv-hint { text-align: center; font-size: .8rem; color: #6c757d; padding: .5rem 1rem; padding-bottom: max(.5rem, env(safe-area-inset-bottom)); }
/* gallery photos: link to the untouched camera original, next to the X */
.photo-viewer .pv-orig { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; border-radius: .375rem; color: #212529; font-size: .9rem; text-decoration: none; padding: .45rem .7rem; border: 1px solid rgba(0, 0, 0, .2); }
.photo-viewer .pv-orig:hover { background: rgba(0, 0, 0, .08); color: #212529; }
.photo-viewer .pv-orig[hidden] { display: none !important; }
.photo-viewer .pv-orig:not([hidden]) + .pv-close { margin-left: .25rem; }
.photo-viewer .pv-orig:focus-visible { outline: 2px solid #212529; outline-offset: 2px; }