/* =========================
   CLICK IMAGEM
========================= */

.product-image img{
  cursor:pointer;
}

/* =========================
   MODAL IMAGEM
========================= */

.image-modal{
  position:fixed;
  inset:0;

  background:rgba(0,0,0,0.88);

  display:flex;
  align-items:center;
  justify-content:center;

  padding: 10px;

  z-index:999999;

  opacity:0;
  visibility:hidden;

  transition:0.3s;
}

.image-modal.active{
  opacity:1;
  visibility:visible;
}

.image-modal img{
  max-width: 100%;
  max-height:92vh;

  object-fit:contain;

  border-radius: 8px;

  animation:imageZoom 0.3s ease;
}

/* =========================
   BOTÃO FECHAR
========================= */

.close-image-modal{
  position:absolute;

  top:24px;
  right:24px;

  width:48px;
  height:48px;

  border:none;
  border-radius:50%;

  background:rgba(255,255,255,0.12);

  color:white;

  font-size:20px;

  cursor:pointer;

  backdrop-filter:blur(10px);

  transition:0.3s;
}

.close-image-modal:hover{
  background:rgba(255,255,255,0.22);
}

/* =========================
   ANIMAÇÃO
========================= */

@keyframes imageZoom{

  from{
    transform:scale(0.92);
    opacity:0;
  }

  to{
    transform:scale(1);
    opacity:1;
  }

}