/* Lupa, botão de ampliar e lightbox (image-zoom-view.js).
   O lightbox é claro porque as fotos têm fundo branco e usam multiply. */

/* ---------- Página do produto: palco clicável + lupa ---------- */
.pdp-stage{ position:relative; }
.pdp-zoom{
  display:flex; align-items:center; justify-content:center; width:100%; height:100%;
  padding:0; background:none; border:0; border-radius:inherit; cursor:zoom-in;
}
.pdp-zoom:focus-visible{ outline:2px solid var(--blue); outline-offset:4px; }
.pdp-zoom img{ transition:transform .3s var(--ease); will-change:transform; }
.pdp-zoom-hint{
  position:absolute; right:14px; bottom:14px; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; pointer-events:none;
  background:#fff; border:1px solid var(--line); color:var(--ink);
  transition:opacity .2s ease, transform .2s var(--ease);
}
.pdp-zoom-hint svg{ width:18px; height:18px; }

@media (hover:hover) and (pointer:fine){
  /* a foto cresce em volta do ponto do cursor; o clique ainda abre o lightbox */
  .pdp-stage.is-hovering .pdp-zoom img{ transform:scale(2); transform-origin:var(--zx,50%) var(--zy,50%); transition:transform .25s var(--ease); }
  .pdp-stage.is-hovering .pdp-zoom-hint{ opacity:0; transform:scale(.9); }
}

/* ---------- Cartão do catálogo: botão de ampliar ---------- */
.pcard .model-media{ position:relative; }
.pcard-zoom{
  position:absolute; right:10px; bottom:10px; z-index:2; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; padding:0;
  background:#fff; border:1px solid var(--line); color:var(--ink);
  transition:opacity .2s ease, transform .16s var(--ease), border-color .16s ease;
}
.pcard-zoom[hidden]{ display:none; }
.pcard-zoom svg{ width:17px; height:17px; }
.pcard-zoom:active{ transform:scale(.94); }
.pcard-zoom:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
@media (hover:hover) and (pointer:fine){
  .pcard-zoom{ opacity:0; }
  .pcard:hover .pcard-zoom, .pcard-zoom:focus-visible{ opacity:1; }
  .pcard-zoom:hover{ border-color:var(--ink); }
  .pcard .model-media img{ transition:transform .35s var(--ease); }
  .pcard:hover .model-media img{ transform:scale(1.05); }
}

/* ---------- Lightbox ---------- */
html.zm-lock{ overflow:hidden; }
html.zm-lock body{ padding-right:var(--zm-sw,0); }

dialog.zm{
  position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:0;
  border:0; background:var(--panel); color:var(--ink); overflow:hidden;
}
dialog.zm[open]{ display:block; animation:zmIn .2s var(--ease); }
dialog.zm::backdrop{ background:var(--panel); }
@keyframes zmIn{ from{ opacity:0; transform:scale(.985); } to{ opacity:1; transform:none; } }

.zm-bar{
  position:absolute; top:0; left:0; right:0; z-index:3; display:flex; align-items:center; justify-content:space-between;
  padding:calc(14px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 0 calc(20px + env(safe-area-inset-left));
  pointer-events:none;
}
.zm-count{ font-size:0.86rem; font-weight:500; color:var(--ink-soft); font-variant-numeric:tabular-nums; }

.zm-btn{
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0;
  background:#fff; border:1px solid var(--line); color:var(--ink); pointer-events:auto;
  transition:border-color .16s ease, transform .16s var(--ease), opacity .2s ease;
}
.zm-btn svg{ width:20px; height:20px; }
.zm-btn:active{ transform:scale(.94); }
.zm-btn:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
@media (hover:hover) and (pointer:fine){ .zm-btn:hover{ border-color:var(--ink); } }

.zm-nav{ position:absolute; top:50%; z-index:3; margin-top:-22px; }
.zm-nav:active{ transform:scale(.94); }
.zm-prev{ left:calc(18px + env(safe-area-inset-left)); }
.zm-next{ right:calc(18px + env(safe-area-inset-right)); }
dialog.zm.zm-single .zm-nav{ display:none; }

.zm-stage{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; overflow:hidden;
  padding:72px 84px; touch-action:none; cursor:zoom-in; user-select:none; -webkit-user-select:none;
}
.zm-stage.is-zoomed{ cursor:grab; }
.zm-stage.is-zoomed:active{ cursor:grabbing; }
.zm-img{
  display:block; max-width:100%; max-height:100%; width:auto; height:auto; mix-blend-mode:multiply;
  transform-origin:center; will-change:transform; transition:opacity .18s ease; -webkit-user-drag:none;
}
.zm-img.is-loading{ opacity:0; }

.zm-hint{
  position:absolute; left:50%; bottom:calc(22px + env(safe-area-inset-bottom)); z-index:3; margin:0; transform:translate(-50%,6px);
  padding:9px 16px; border-radius:100px; background:#fff; border:1px solid var(--line);
  font-size:0.8rem; color:var(--ink-soft); white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity .3s ease, transform .3s var(--ease);
}
.zm-hint.show{ opacity:1; transform:translate(-50%,0); }

@media (max-width:700px){
  .zm-stage{ padding:64px 8px 76px; }
  .zm-nav{ top:auto; bottom:calc(16px + env(safe-area-inset-bottom)); margin-top:0; width:48px; height:48px; }
  .zm-prev{ left:calc(16px + env(safe-area-inset-left)); }
  .zm-next{ right:calc(16px + env(safe-area-inset-right)); }
  .zm-hint{ bottom:calc(84px + env(safe-area-inset-bottom)); max-width:calc(100% - 32px); white-space:normal; text-align:center; }
  .pdp-zoom-hint{ right:10px; bottom:10px; }
  .pcard-zoom{ opacity:1; }
}

@media (prefers-reduced-motion:reduce){
  dialog.zm[open]{ animation:none; }
  .zm-img, .zm-hint, .pdp-zoom img{ transition:none; }
  .pdp-stage.is-hovering .pdp-zoom img{ transition:none; }
}