/* Vídeo do produto */
.erpp-video-tem { position: relative; }
.erpp-video-slide { position: absolute; inset: 0; z-index: 3; background: #000; overflow: hidden; }
.erpp-video-slide video, .erpp-video-slide iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; cursor: pointer; }
.erpp-video-btn { display: inline-flex !important; box-sizing: border-box; margin: 0 !important; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; line-height: 0; }
.erpp-video-btn svg { width: 20px; height: 20px; fill: currentColor; }
.erpp-video-btn:hover, .erpp-video-btn:focus-visible { background: rgba(0, 0, 0, .8); }
.erpp-video-slide .erpp-video-som { position: absolute; left: 12px; bottom: 12px; }
.erpp-video-slide .erpp-video-fotos { box-sizing: border-box; margin: 0 !important; position: absolute; left: 58px; bottom: 12px; display: inline-flex; align-items: center; gap: 4px; height: 38px; padding: 0 14px 0 10px; border: 0; border-radius: 19px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }
.erpp-video-slide .erpp-video-fotos svg { width: 16px; height: 16px; fill: currentColor; }
.erpp-video-slide .erpp-video-fotos:hover { background: rgba(0, 0, 0, .8); }
.erpp-video-rede { position: absolute; right: 12px; bottom: 12px; padding: 8px 14px; border-radius: 20px; background: #fff; color: #111 !important; font-size: 13px; font-weight: 600; line-height: 1.2; text-decoration: none !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.erpp-video-rede:hover { background: #f0f0f0; }
/* Instagram, Pinterest, Kwai, Facebook: a foto continua, com o "Ver vídeo" no meio; ao clicar, o player da rede entra no lugar */
.erpp-video-slide.erpp-video-slide-chamada { background: rgba(0, 0, 0, .12); display: flex; align-items: center; justify-content: center; }
.erpp-video-slide .erpp-video-ver-grande { display: inline-flex !important; align-items: center; gap: 8px; box-sizing: border-box; width: auto !important; margin: 0 !important; padding: 14px 24px !important; border: 0 !important; border-radius: 30px !important; background: rgba(0, 0, 0, .75) !important; color: #fff !important; font: 600 16px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important; cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, .3); }
.erpp-video-slide .erpp-video-ver-grande:hover { background: rgba(0, 0, 0, .9) !important; }
.erpp-video-slide .erpp-video-ver-grande svg { width: 20px; height: 20px; fill: currentColor; }
.erpp-video-slide.erpp-video-slide-rede { background: #fff; }
.erpp-video-slide iframe { position: relative; z-index: 1; background: transparent; }
.erpp-video-carregando { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #646970; font-size: 14px; }
.erpp-video-slide .erpp-video-fotos, .erpp-video-slide .erpp-video-som, .erpp-video-slide .erpp-video-rede { z-index: 2; }
.erpp-video-slide video { background: #000; }
/* Ícone de play na miniatura da foto principal */
.erpp-video-galeria .erpp-video-miniatura, .erpp-video-galeria .flex-control-thumbs li:first-child { position: relative; }
.erpp-video-galeria .erpp-video-miniatura::after, .erpp-video-galeria .flex-control-thumbs li:first-child::after { content: "▶"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; text-shadow: 0 1px 4px rgba(0, 0, 0, .7); pointer-events: none; }

/* Bolha flutuante. Tamanho e distância da borda vêm da tela Vídeos (--erpp-v-tam e --erpp-v-borda).
   Os !important seguram o estilo que temas e o Elementor aplicam a qualquer elemento clicável. */
.erpp-video-bolha { --erpp-v-tam: var(--erpp-v-base, 96px); --erpp-v-borda: 20px; position: fixed; z-index: 99990; display: flex !important; align-items: center; gap: 10px; margin: 0; padding: 0; line-height: normal; }
.erpp-video-pos-inferior-esquerda { left: var(--erpp-v-borda); bottom: var(--erpp-v-borda); }
.erpp-video-pos-inferior-direita { right: var(--erpp-v-borda); bottom: var(--erpp-v-borda); flex-direction: row-reverse; }
.erpp-video-pos-meio-esquerda { left: var(--erpp-v-borda); top: 50%; transform: translateY(-50%); }
.erpp-video-pos-meio-direita { right: var(--erpp-v-borda); top: 50%; transform: translateY(-50%); flex-direction: row-reverse; }
.erpp-video-pos-foto { position: absolute; z-index: 20; left: var(--erpp-v-borda); top: var(--erpp-v-borda); }
.erpp-video-bolha .erpp-video-mini { position: relative; display: block !important; box-sizing: border-box !important; width: var(--erpp-v-tam) !important; height: var(--erpp-v-tam) !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 3px solid #fff !important; background: #000 !important; overflow: hidden; cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, .3); flex: 0 0 auto !important; }
.erpp-video-redondo .erpp-video-mini { border-radius: 50% !important; }
.erpp-video-quadrado .erpp-video-mini { border-radius: 14px !important; height: calc(var(--erpp-v-tam) * 4 / 3) !important; }
.erpp-video-mini video, .erpp-video-mini iframe, .erpp-video-mini img { width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; object-fit: cover; border: 0 !important; border-radius: 0 !important; display: block; pointer-events: none; }
.erpp-video-mini iframe { transform: scale(1.6); }
.erpp-video-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .25); }
.erpp-video-play svg { width: 34%; height: 34%; fill: #fff; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); }
.erpp-video-bolha .erpp-video-rotulo { display: inline-block !important; box-sizing: border-box; width: auto !important; margin: 0 !important; padding: 10px 18px !important; border: 0 !important; border-radius: 22px !important; background: #111 !important; color: #fff !important; font: 700 12px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important; letter-spacing: .3px; text-transform: uppercase; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); white-space: nowrap; }
.erpp-video-bolha .erpp-video-rotulo:hover { background: #333 !important; }
.erpp-video-bolha .erpp-video-fechar-bolha { position: absolute; top: -8px; left: calc(var(--erpp-v-tam) - 20px); width: 26px !important; height: 26px !important; border: 2px solid #fff !important; }
.erpp-video-pos-inferior-direita .erpp-video-fechar-bolha, .erpp-video-pos-meio-direita .erpp-video-fechar-bolha { left: auto; right: calc(var(--erpp-v-tam) - 20px); }
.erpp-video-bolha .erpp-video-fechar-bolha svg { width: 14px; height: 14px; }
@media (max-width: 600px) {
    .erpp-video-bolha { --erpp-v-tam: min(var(--erpp-v-base, 96px), 76px); }
    .erpp-video-bolha:not(.erpp-video-pos-foto) .erpp-video-rotulo { display: none !important; }
}

/* Janela do vídeo, com som */
.erpp-video-janela { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .8); }
.erpp-video-caixa { position: relative; height: min(86vh, 760px); aspect-ratio: 9 / 16; max-width: 100%; background: #000; border-radius: 12px; overflow: hidden; }
.erpp-video-caixa video, .erpp-video-caixa iframe { width: 100%; height: 100%; border: 0; display: block; object-fit: contain; background: #000; }
.erpp-video-caixa-embed { aspect-ratio: auto; width: min(420px, 100%); background: #fff; }
.erpp-video-caixa .erpp-video-fechar { position: absolute; top: 10px; right: 10px; z-index: 2; }
.erpp-video-caixa .erpp-video-rede { bottom: 60px; z-index: 2; }
.erpp-video-caixa-embed .erpp-video-rede { bottom: 12px; }
body.erpp-video-aberto { overflow: hidden; }

/* Prévia na lista de produtos: no lugar da foto inteira (padrão) ou numa telinha redonda ou quadrada.
   Fica invisível até o vídeo começar a tocar, para a foto não piscar em preto. */
.erpp-video-alvo { position: relative; display: block; }
.erpp-video-alvo .erpp-video-selo { position: absolute; bottom: 8px; right: 8px; z-index: 5; display: flex !important; align-items: center; justify-content: center; box-sizing: border-box; width: 30px !important; height: 30px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; background: rgba(0, 0, 0, .55) !important; cursor: pointer; }
.erpp-video-alvo .erpp-video-selo svg { width: 16px; height: 16px; fill: #fff; }
.erpp-video-hover { position: absolute; z-index: 3; overflow: hidden; background: transparent; pointer-events: none; opacity: 0; transition: opacity .2s ease-out; }
.erpp-video-hover.erpp-video-pronto { opacity: 1; }
.erpp-video-hover.erpp-video-foto { inset: 0; }
.erpp-video-hover.erpp-video-redondo, .erpp-video-hover.erpp-video-quadrado { left: 50%; top: 50%; width: 78%; aspect-ratio: 1; transform: translate(-50%, -50%); background: #000; border: 3px solid #fff; box-shadow: 0 6px 22px rgba(0, 0, 0, .35); }
.erpp-video-hover.erpp-video-redondo { border-radius: 50%; }
.erpp-video-hover.erpp-video-quadrado { border-radius: 14px; width: 74%; aspect-ratio: 3 / 4; }
.erpp-video-hover video, .erpp-video-hover iframe { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; border: 0; display: block; }
.erpp-video-hover iframe { transform: scale(1.6); }
.erpp-video-hover-chamada { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .18); }
.erpp-video-hover-chamada .erpp-video-ver { display: inline-flex !important; align-items: center; gap: 6px; box-sizing: border-box; width: auto !important; margin: 0 !important; padding: 10px 18px !important; border: 0 !important; border-radius: 22px !important; background: rgba(0, 0, 0, .75) !important; color: #fff !important; font: 600 14px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important; cursor: pointer; }
.erpp-video-hover-chamada .erpp-video-ver svg { width: 16px; height: 16px; fill: currentColor; }
@media (prefers-reduced-motion: reduce) { .erpp-video-hover { transition: none; } }
/* Carregando: anel girando no meio da foto até o vídeo começar */
.erpp-video-girando { position: absolute; z-index: 4; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .45); border-top-color: #fff; background: rgba(0, 0, 0, .25); box-sizing: border-box; pointer-events: none; animation: erpp-video-gira .8s linear infinite; }
@keyframes erpp-video-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .erpp-video-girando { animation-duration: 2.4s; } }
