/* Hover da segunda imagem no card de produto (par do card-hover.js).
   Compartilhado: _Layout recebe via bundles (site-giv/fut.min.css) e o
   _LayoutHotsite linka este arquivo direto. */

/* Ancora a segunda imagem exatamente sobre a principal, sem alterar o espacamento do card.
   O z-index deixa a imagem acima do overlay do card clicavel: sem isso o overlay
   recebe o ponteiro no lugar do wrap, o mouseenter nao dispara e a troca de foto
   no hover para de acontecer. A imagem tem link proprio para o mesmo produto,
   entao o clique continua indo para a pagina do produto. */
.card-prod-novo .card-prod-img-wrap {
    display: block;
    position: relative;
    z-index: 2;
    line-height: 0;
}

/* Troca para a segunda foto do produto no hover. So em ponteiro fino (nao existe hover no mobile). */
@media (hover: hover) and (pointer: fine) {
    .card-prod-novo .card-prod-img.card-prod-img-hover {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
        opacity: 0;
        pointer-events: none;
        /* Curto de proposito: as duas fotos tem fundo claro e o meio do crossfade lava a imagem */
        transition: opacity .12s ease-in;
    }

    .card-prod-novo .card-prod-img-wrap.is-hover .card-prod-img-hover {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .card-prod-novo .card-prod-img.card-prod-img-hover {
        transition: none;
    }
}