/**
 * PX Vídeo na Capa do Produto (Flatsome Ready)
 * Frontend Styles
 * Version: 1.5.3
 */

/* ==================================
   PÁGINA DO PRODUTO INDIVIDUAL
   ================================== */

/* Wrapper do vídeo na página do produto */
.wcv-video-wrapper {
    position: relative;
}

.wcv-video-wrapper video.wcv-video {
    width: 100%;
    height: auto;
    display: block;
}

.wcv-video-wrapper img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ==================================
   CATÁLOGO / LISTAGEM DE PRODUTOS
   ================================== */

/* Container de vídeo no loop - posicionado sobre a imagem */
.wcv-loop-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    overflow: hidden;
}

/* Vídeo no catálogo */
.wcv-loop-video-container video.wcv-loop-video,
.wcv-loop-video-container img.wcv-loop-gif {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    background: #000;
}

/* Esconde a imagem original quando há vídeo */
.wcv-hidden-by-video {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Esconde imagem de capa quando o produto tem vídeo */
.wcv-has-video .box-image img,
.wcv-has-video .product-image img {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Flatsome: Garantir que o container funcione dentro do box-image */
.box-image .wcv-loop-video-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* Animação suave no hover */
.wcv-loop-video-container video.wcv-loop-video {
    transition: transform 0.3s ease;
}

.product:hover .wcv-loop-video-container video.wcv-loop-video,
.product-small:hover .wcv-loop-video-container video.wcv-loop-video {
    transform: scale(1.03);
}

/* ==================================
   MELHORIAS PARA iOS
   ================================== */

@supports (-webkit-touch-callout: none) {
    .wcv-video-wrapper video.wcv-video,
    .wcv-video-thumb-wrapper video.wcv-loop-video {
        object-fit: cover;
        width: 100%;
        height: 100%;
        opacity: 1 !important;
        pointer-events: auto;
        background-color: #000;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        backface-visibility: hidden;
        perspective: 1000;
        will-change: transform;
    }
}

/* ==================================
   RESPONSIVO
   ================================== */

@media (max-width: 767px) {
    /* Catálogo mobile: aspect ratio levemente diferente */
    .wcv-video-thumb-wrapper {
        aspect-ratio: 4 / 5;
    }
    
    /* Remover hover effect em mobile */
    .product:hover .wcv-video-thumb-wrapper video.wcv-loop-video,
    .product-small:hover .wcv-video-thumb-wrapper video.wcv-loop-video {
        transform: none;
    }
}