/* WD Product Videos — estilos del video dentro de la galería del producto.
 *
 * La foto de preview (.wd-pv-poster) es un <img> hijo DIRECTO del mismo div
 * que usan las fotos normales (.woocommerce-product-gallery__image) — así
 * el tema la recorta/llena EXACTAMENTE igual que a cualquier otra foto, sin
 * que nosotros tengamos que adivinar su CSS ni imponer un aspect-ratio propio.
 */

.wd-pv-video-slide {
    position: relative; /* para que el botón de play y el video real se puedan centrar encima */
}

/* Botón de play: círculo rojo grande con triángulo blanco, hecho 100% con
   CSS (nada de SVG/fill) para que no lo afecte ningún reset de íconos del tema. */
.wd-pv-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(224, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    z-index: 2;
}
.wd-pv-play-triangle {
    width: 0;
    height: 0;
    margin-left: 5px; /* centrado óptico: el triángulo "pesa" visualmente a la izquierda */
    border-style: solid;
    border-width: 13px 0 13px 21px;
    border-color: transparent transparent transparent #fff;
}

/* Una vez que el cliente le dio play, se quita la foto y el botón. */
.wd-pv-video-slide.wd-pv-playing .wd-pv-poster,
.wd-pv-video-slide.wd-pv-playing .wd-pv-play-icon {
    display: none;
}

/* El iframe/video real llena exactamente la misma caja que ocupaba la foto
   (el JS congela el ancho/alto en píxeles antes de quitar la <img>, así que
   esto siempre tiene una caja de tamaño fijo donde apoyarse). */
.wd-pv-video-slide iframe,
.wd-pv-video-slide video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Compatibilidad extra: si el tema SÍ arma el slider clásico de WooCommerce
   (flexslider) con su tira de miniaturas aparte, esto asegura que la
   miniatura del video también se vea recortada en cuadrado ahí. */
.flex-control-nav li {
    position: relative;
}
.flex-control-nav li:has(img[src*="ytimg.com"]),
.flex-control-nav li:has(img[src*="img.youtube.com"]),
.flex-control-nav li:has(img[src*="wd-pv-video-thumb"]) {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.flex-control-nav li:has(img[src*="ytimg.com"]) img,
.flex-control-nav li:has(img[src*="img.youtube.com"]) img,
.flex-control-nav li:has(img[src*="wd-pv-video-thumb"]) img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.flex-control-nav li:has(img[src*="ytimg.com"])::after,
.flex-control-nav li:has(img[src*="img.youtube.com"])::after,
.flex-control-nav li:has(img[src*="wd-pv-video-thumb"])::after {
    content: "▶";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    background: rgba(0, 0, 0, 0.35);
    pointer-events: none;
}