/* ==================================================
   EFEITO DE LENTE DE AUMENTO PARA IMAGENS DE PRODUTOS
   ================================================== */

/* Container da imagem com zoom */
.img-zoom-container {
    position: relative;
    display: inline-block;
    cursor: crosshair;
}

/* A lente de aumento - área circular que segue o cursor */
.img-zoom-lens {
    position: absolute;
    /*
       AJUSTE 1: Tamanho da lente
       - Aumente os valores para uma lente maior
       - Diminua para uma lente menor
       - Exemplo: 150px para lente maior, 80px para menor
    */
    width: 160px;
    height: 160px;

    /*
       AJUSTE 2: Formato da lente
       - 50% = círculo perfeito
       - 0% = quadrado
       - 10px = quadrado com cantos arredondados
    */
    border-radius: 50%;

    /*
       AJUSTE 3: Borda da lente
       - Primeira cor: cor da borda
       - Segundo valor: espessura da borda
    */
    border: 3px solid #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

    /*
       AJUSTE 4: Opacidade da lente
       - 0.3 = 30% de opacidade (mais transparente)
       - 0.7 = 70% de opacidade (mais opaco)
    */
    background-color: rgba(255, 255, 255, 0.3);

    pointer-events: none;
    z-index: 10;
}

/* Container do resultado ampliado */
.img-zoom-result {
    position: absolute;

    /*
       AJUSTE 5: Posição do zoom
       - top: 0 = alinhado ao topo
       - left: 110% = à direita da imagem (100% + 10% de margem)
       - Você pode mudar para: right: 110% para aparecer à esquerda
       - Ou bottom: 110% para aparecer abaixo
    */
    top: 0;
    left: 110%;

    /*
       AJUSTE 6: Tamanho da área ampliada
       - Maior = mais zoom visível
       - Recomendado: 1.5x a 2x o tamanho da imagem original
    */
    width: 400px;
    height: 400px;

    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 100;

    /* Esconde o resultado até o mouse passar sobre a imagem */
    display: none;
}

/* Mostra o resultado quando hover na imagem */
.img-zoom-container:hover .img-zoom-result {
    display: block;
}

/* Mostra a lente quando hover na imagem */
.img-zoom-container:hover .img-zoom-lens {
    display: block;
}

/* Inicialmente esconde a lente */
.img-zoom-lens {
    display: none;
}

/* Responsividade - em telas menores, desabilita o zoom */
@media (max-width: 992px) {
    .img-zoom-result {
        display: none !important;
    }

    .img-zoom-lens {
        display: none !important;
    }

    .img-zoom-container {
        cursor: default;
    }
}

/*
   DICAS DE PERSONALIZAÇÃO:

   1. Para mudar a cor da borda da lente, altere:
      border: 3px solid #000; (para preto)
      border: 3px solid #gold; (para dourado)

   2. Para aumentar o nível de zoom, ajuste no JavaScript
      a variável 'zoomLevel' (padrão: 2.5)

   3. Para mostrar o zoom abaixo da imagem em vez de ao lado:
      .img-zoom-result {
          top: 110%;
          left: 0;
      }

   4. Para adicionar animação suave na lente:
      .img-zoom-lens {
          transition: all 0.1s ease;
      }
*/