/* the picture viewer (viewer.js): a click on a picture opens it over the page */
#products img,#about img,.rframe{cursor:zoom-in}
#products a img,#products button img,#about a img,#about button img,.rph .rframe,.rph img,body.tx #products img,body.tx #about img,body.tx .rframe{cursor:inherit}
.pv{position:fixed;inset:0;z-index:55;background:var(--paper);opacity:0;transition:opacity .22s ease}
.pv.in{opacity:1}
.pv[hidden]{display:none}
.pv-stage{position:absolute;inset:0;overflow:hidden;overscroll-behavior:contain;cursor:zoom-out}
.pv-in{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:56px 88px;box-sizing:border-box}
.pv-img{display:block;max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply;cursor:zoom-out;user-select:none;-webkit-user-drag:none;transition:opacity .2s}
.pv.loading .pv-img{opacity:.25}
.pv-x,.pv-arrow{position:absolute;display:grid;place-items:center;padding:0;border:1px solid var(--line);border-radius:50%;background:rgba(251,251,249,.9);color:var(--ink);cursor:pointer;transition:border-color .2s,background .2s}
.pv-x:hover,.pv-arrow:hover{border-color:var(--ink);background:#fff}
.pv-x{top:16px;right:16px;width:44px;height:44px}
.pv-x svg{width:16px;height:16px}
.pv-arrow{top:50%;width:48px;height:48px;margin-top:-24px}
.pv-arrow svg{width:10px;height:20px}
.pv-arrow.prev{left:20px}.pv-arrow.next{right:20px}
.pv-arrow[hidden],.pv-count[hidden]{display:none}
.pv-count{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font:400 11px Inter,system-ui,sans-serif;letter-spacing:.12em;color:var(--mute)}
html.pv-on,html.pv-on body{overflow:hidden}
@media (max-width:600px){
  .pv-in{padding:64px 12px 72px}
  .pv-x{top:10px;right:10px}
  .pv-arrow{top:auto;bottom:12px;margin-top:0;width:44px;height:44px}
  .pv-arrow.prev{left:12px}.pv-arrow.next{right:12px}
  .pv-count{bottom:28px}
}