/*
 * ESTILOS PARA O BLOCO DE VÍDEO DO PRODUTO
*/

/* Container principal para controlar o alinhamento e largura máxima */
.wc-produto-video-container {
    width: 100%;
    /* max-width: 720px; /* Largura padrão do conteúdo do tema */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.5em; /* Espaço abaixo */
}

/* Quando o bloco for "Largura Ampla" */
.wc-produto-video-container.alignwide {
    /*max-width: 1280px;*/
}

/* Quando o bloco for "Largura Total" */
.wc-produto-video-container.alignfull {
    max-width: none;
}

/*
 * Container interno que mantém a proporção do vídeo.
 * Seja um facade ou o iframe direto.
*/
.wc-produto-video-embed-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* Proporção 16:9 */
    background-color: #000; /* Fundo preto para o iframe carregar */
}

/* Estilos para a capa clicável (facade) */
.wc-video-facade {
    cursor: pointer;
    overflow: hidden;
}

.wc-video-facade img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que a imagem cubra a área sem distorcer */
}

.wc-video-facade .play-button-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s ease;
}

.wc-video-facade:hover .play-button-overlay {
    background-color: rgba(0, 0, 0, 0);
}

.wc-video-facade .play-button-overlay svg {
    width: 68px;
    height: 48px;
    transition: transform 0.2s ease;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

.wc-video-facade:hover .play-button-overlay svg {
    transform: scale(1.15);
}

/* Garante que o iframe preencha o container */
.wc-produto-video-embed-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}