/* 
 * The main container defines the aspect ratio.
 * 3:5 ratio => height is 1.666x width => padding-bottom: 166.67%
 */
.rd-video-wrapper {
    position: relative;
    padding-bottom: 166.67%; 
    height: 0;
    overflow: hidden;
    background: #000;
    z-index: 20;
    width: 100%;
}

.rd-video-wrapper iframe,
.rd-video-wrapper video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center it */
    width: 100%;
    height: 100%;
}

/* Force HTML5 Video to cover the container */
video.rd-video-player {
    object-fit: cover !important;
    min-width: 100%;
    min-height: 100%;
}

/* 
 * YouTube Iframe Handling
 * We need to crop the sides of a 16:9 video to fit a 3:5 container.
 * Container Height (H) = (5/3) * Container Width (W)
 * 
 * Iframe Height = H
 * Iframe Width (to maintain 16/9) = H * (16/9)
 * 
 * Substitute H:
 * Iframe Width = (5/3 * W) * (16/9)
 * = (80 / 27) * W
 * ≈ 2.963 * W
 * 
 * So width should be ~297% of container width.
 */
.rd-video-wrapper.rd-video-youtube iframe {
    width: 297% !important; 
    height: 100% !important;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    pointer-events: auto;
}

/* Ensure gallery thumbnails are 1:1 and cover */
.flex-control-thumbs li img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* Disable lightbox link on video slide */
.woocommerce-product-gallery__image:has(.rd-video-wrapper) a {
    cursor: default;
    pointer-events: none;
}

/* Re-enable pointer events on the video/controls itself */
.woocommerce-product-gallery__image:has(.rd-video-wrapper) .rd-video-wrapper {
    pointer-events: auto;
}