/* =============================================================================
   YouTube Product Video — Frontend Styles
   ============================================================================= */

/* Gallery slide wrapper — fills the same space as a product image slide */
.ypv-gallery-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

/* 1:1 iframe container — aspect-ratio is readable by FlexSlider's height calculations */
.ypv-video {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #000;
}

.ypv-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Force the thumbnail strip image to appear square (crop 16:9 YouTube thumb) */
.flex-control-thumbs img[src*="img.youtube.com"] {
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
}

/* Play button overlay on the video thumbnail */
.flex-control-thumbs li:has(img[src*="img.youtube.com"]) {
    position: relative;
}

.flex-control-thumbs li:has(img[src*="img.youtube.com"])::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath d='M66.5 7.7A8.5 8.5 0 0 0 60.7 2C55.4.5 34 .5 34 .5S12.6.5 7.3 2A8.5 8.5 0 0 0 1.5 7.7C0 13 0 24 0 24s0 11 1.5 16.3A8.5 8.5 0 0 0 7.3 46C12.6 47.5 34 47.5 34 47.5s21.4 0 26.7-1.5a8.5 8.5 0 0 0 5.8-5.7C68 35 68 24 68 24s0-11-1.5-16.3z' fill='%23f00'/%3E%3Cpath d='M27 34l18-10-18-10z' fill='%23fff'/%3E%3C/svg%3E")
        no-repeat center / 50%;
}