/* Product picture zoom: magnifier buttons, viewer and the press-and-hold peek */
.product-image{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.product-image img{-webkit-touch-callout:none;-webkit-user-drag:none}
.product-image.is-zoomable{cursor:zoom-in}
.zoom-btn{position:absolute;z-index:3;top:12px;right:12px;width:40px;height:40px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:#fffffff2;color:var(--indigo);box-shadow:0 4px 16px #1a1a4a26;cursor:zoom-in;opacity:0;transform:scale(.85);transition:opacity .25s ease,transform .35s cubic-bezier(.22,1,.36,1),background .2s,color .2s}
.zoom-btn svg{width:20px;height:20px}
.product-card:hover .zoom-btn,.zoom-btn:focus-visible,.product-image:focus-within .zoom-btn{opacity:1;transform:none}
.zoom-btn:hover{background:var(--indigo);color:#fff}
.zoom-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
@media(hover:none){.zoom-btn{opacity:.92;transform:none;width:36px;height:36px;top:8px;right:8px}.zoom-btn svg{width:18px;height:18px}}

html.pz-lock{overflow:hidden;padding-right:var(--pz-sbw,0)}
html.pz-peeking,html.pz-peeking body{overflow:hidden;touch-action:none}
.pz[hidden],.pz-peek:not(.is-on){display:none}

/* viewer */
.pz{position:fixed;inset:0;z-index:200;display:grid;grid-template-rows:minmax(0,1fr) auto;color:#fff;font-family:var(--body)}
.pz-backdrop{position:absolute;inset:0;background:rgba(12,13,24,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;transition:opacity .25s ease}
.pz.is-open .pz-backdrop{opacity:1}
.pz-stage{position:relative;z-index:1;grid-row:1;min-height:0;display:grid;place-items:center;overflow:hidden;touch-action:none;cursor:zoom-in;padding:64px 72px 8px}
.pz.is-zoomed .pz-stage{cursor:grab}
.pz-img{max-width:100%;max-height:calc(100vh - 210px);max-height:calc(100dvh - 210px);width:auto;height:auto;object-fit:contain;border-radius:6px;background:#f1f1f6;box-shadow:0 30px 80px #00000066;transform-origin:center;will-change:transform;opacity:0;transform:scale(.94);transition:opacity .25s ease,transform .35s cubic-bezier(.22,1,.36,1);-webkit-user-select:none;user-select:none;pointer-events:none}
.pz.is-open .pz-img{opacity:1}
.pz-img.is-loading{opacity:.35}
.pz-btn{position:absolute;z-index:3;width:46px;height:46px;padding:0;border:1px solid #ffffff2e;border-radius:50%;display:grid;place-items:center;background:#ffffff14;color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .2s,transform .3s cubic-bezier(.22,1,.36,1),opacity .25s;opacity:0}
.pz.is-open .pz-btn{opacity:1}
.pz-btn svg{width:22px;height:22px}
.pz-btn:hover{background:#ffffff2e}
.pz-btn:focus-visible,.pz-view:focus-visible,.pz-quote:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.pz-close{top:16px;right:16px}
.pz-nav{top:50%;margin-top:-23px}
.pz-prev{left:16px}.pz-next{right:16px}
.pz[data-single="true"] .pz-nav{display:none}
.pz.is-zoomed .pz-nav{opacity:0;pointer-events:none}
.pz-bar{position:relative;z-index:2;grid-row:2;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 28px 26px;max-width:1100px;width:100%;margin:0 auto;transform:translateY(14px);opacity:0;transition:opacity .3s ease .05s,transform .4s cubic-bezier(.22,1,.36,1) .05s}
.pz.is-open .pz-bar{transform:none;opacity:1}
.pz-meta{min-width:0}
.pz-code{margin:0 0 4px;font-family:var(--heading);font-size:12px;letter-spacing:.12em;color:#9fd8ea}
.pz-title{margin:0;font-family:var(--heading);font-size:clamp(18px,2vw,24px);font-weight:500;line-height:1.2;letter-spacing:-.025em}
.pz-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
.pz-view{min-height:44px;padding:0 18px;border:1px solid #ffffff59;background:transparent;color:#fff;font:inherit;font-size:15px;cursor:pointer;transition:background .2s}
.pz-view[hidden]{display:none}
.pz-view:hover{background:#ffffff1f}
.pz-quote{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;background:var(--indigo);color:#fff;font-size:15px;font-weight:600;text-decoration:none;transition:background .2s}
.pz-quote:hover{background:#3a3eb0}
.pz-hint{position:absolute;z-index:2;left:0;right:0;top:20px;margin:0;text-align:center;font-size:13px;color:#ffffffa6;pointer-events:none;opacity:0;transition:opacity .4s ease .6s}
.pz.is-open .pz-hint{opacity:1}
.pz.is-zoomed .pz-hint{opacity:0;transition-delay:0s}
@media(max-width:767px){
  .pz-stage{padding:60px 12px 4px}
  .pz-img{max-height:calc(100vh - 250px);max-height:calc(100dvh - 250px)}
  .pz-close{top:10px;right:10px;width:42px;height:42px}
  .pz-nav{display:none}
  .pz-bar{flex-direction:column;align-items:stretch;gap:12px;padding:12px 18px calc(18px + env(safe-area-inset-bottom))}
  .pz-actions{justify-content:space-between}
  .pz-quote{flex:1;justify-content:center}
  .pz-hint{top:16px;font-size:12px;padding:0 64px}
}

/* press-and-hold peek */
.pz-peek{position:fixed;inset:0;z-index:210;display:grid;place-items:center;padding:24px;background:rgba(12,13,24,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:none;animation:pz-fade .18s ease both}
.pz-peek-card{width:min(92vw,520px);max-height:88vh;display:grid;gap:12px;animation:pz-pop .28s cubic-bezier(.2,1.1,.3,1) both}
.pz-peek-card img{display:block;width:100%;max-height:72vh;object-fit:contain;background:#f1f1f6;border-radius:14px;box-shadow:0 30px 80px #00000073;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.pz-peek-title{margin:0;text-align:center;font-family:var(--heading);font-size:15px;letter-spacing:-.01em;color:#fff}
@keyframes pz-fade{from{opacity:0}to{opacity:1}}
@keyframes pz-pop{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}

@media(prefers-reduced-motion:reduce){.pz *,.pz-peek,.pz-peek-card,.zoom-btn{transition:none!important;animation:none!important}}

/* bigger touch area for the magnifier without a bigger button */
.zoom-btn::after{content:"";position:absolute;inset:-6px}

/* wider phone peek: almost edge to edge */
.pz-peek{padding:10px}
.pz-peek-card{width:min(100%,560px)}

.pz-whatsapp{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid #25d36673;color:#fff;font-size:15px;text-decoration:none;transition:background .2s}
.pz-whatsapp[hidden]{display:none}
.pz-whatsapp svg{width:20px;height:20px;color:#25d366;flex:0 0 20px}
.pz-whatsapp:hover{background:#25d36626}
@media(max-width:767px){.pz-actions{flex-wrap:wrap}.pz-actions .pz-view,.pz-actions .pz-whatsapp{flex:1;justify-content:center}.pz-actions .pz-quote{flex:1 1 100%}}