/* =====================================================================
   Essenza 360 — viewer de vista 360° na PDP
   Botão "360°" sobre o stage da galeria + lightbox com spin por arrasto.
   Paleta: espresso #3A342C · bege #F2ECDF · marfim #FAF7F1 · bronze #A5855A
   ===================================================================== */

/* ── Botão sobre o stage ── */
.ez360-open{
  position:absolute;right:12px;bottom:12px;z-index:6;
  display:inline-flex;align-items:center;gap:7px;
  background:#3A342C;color:#FAF7F1;border:1.5px solid rgba(255,255,255,.35);
  border-radius:99px;padding:8px 14px;
  font-family:'Manrope',sans-serif;font-weight:800;font-size:13px;letter-spacing:.04em;
  cursor:pointer;box-shadow:0 4px 14px rgba(42,37,31,.25);
  transition:transform .15s ease,background .15s ease;
}
.ez360-open:hover{background:#2A251F;transform:translateY(-1px)}
.ez360-open svg{width:16px;height:16px;flex-shrink:0}
@media(max-width:1180px){
  .ez360-open{bottom:52px;right:14px}   /* acima dos dots da galeria mobile */
}

/* ── Lightbox ── */
.ez360-modal{
  position:fixed;inset:0;z-index:99998;display:none;
  align-items:center;justify-content:center;
  background:rgba(42,37,31,.82);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;transition:opacity .25s ease;
}
.ez360-modal.on{display:flex}
.ez360-modal.vis{opacity:1}
.ez360-box{
  position:relative;width:min(92vw,760px);aspect-ratio:1/1;max-height:88vh;
  background:#FAF7F1;border-radius:18px;overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.35);
  display:flex;align-items:center;justify-content:center;
  touch-action:none;user-select:none;-webkit-user-select:none;
}
@media(max-width:768px){.ez360-box{width:96vw;max-height:78vh;border-radius:14px}}
.ez360-box img{
  width:100%;height:100%;object-fit:contain;display:block;
  transform-origin:center center;
}
.ez360-box.dragging{cursor:grabbing}
.ez360-hint{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  background:rgba(58,52,44,.85);color:#FAF7F1;border-radius:99px;
  font-family:'Manrope',sans-serif;font-size:12px;font-weight:600;
  padding:7px 14px;white-space:nowrap;pointer-events:none;
  transition:opacity .4s ease;
}
.ez360-close{
  position:absolute;top:12px;right:12px;z-index:3;
  width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;
  background:#3A342C;color:#FAF7F1;font-size:19px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s ease;
}
.ez360-close:hover{background:#2A251F}
.ez360-play{
  position:absolute;top:12px;left:12px;z-index:3;
  height:38px;padding:0 14px;border-radius:99px;border:none;cursor:pointer;
  background:#F2ECDF;color:#3A342C;font-family:'Manrope',sans-serif;
  font-weight:800;font-size:12px;letter-spacing:.05em;
  display:flex;align-items:center;gap:6px;
  transition:background .15s ease;
}
.ez360-play:hover{background:#E7DECD}
.ez360-load{
  position:absolute;inset:0;display:flex;flex-direction:column;gap:14px;
  align-items:center;justify-content:center;background:#FAF7F1;z-index:2;
  font-family:'Manrope',sans-serif;font-size:13px;font-weight:600;color:#8A7D6B;
}
.ez360-load .bar{width:180px;height:5px;border-radius:99px;background:#E4DACA;overflow:hidden}
.ez360-load .bar i{display:block;height:100%;width:0;background:#A5855A;border-radius:99px;transition:width .2s ease}
.ez360-badge360{
  position:absolute;top:12px;left:50%;transform:translateX(-50%);
  background:#A5855A;color:#fff;border-radius:8px;
  font-family:'Manrope',sans-serif;font-weight:800;font-size:11px;letter-spacing:.12em;
  padding:4px 10px;pointer-events:none;
}