.toroobche-gallery-video {
    max-width: 100%;
    height: auto;
    display: block;
}

#product_images_container .toroobche-gallery-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* WooCommerce's flexslider builds the thumbnail-strip <img> for each slide
   client-side from the slide's data-thumb attribute, outside any PHP filter's
   reach - so a video slide's thumb is a plain <img src="...mp4"> and renders as
   a broken image icon. Hiding the broken-icon glyph/alt-text keeps the button
   clickable without the jarring broken-image look. */
.flex-control-thumbs img[src$='.mp4'],
.flex-control-thumbs img[src$='.mov'],
.flex-control-thumbs img[src$='.webm'],
.flex-control-thumbs img[src$='.ogv'] {
    background: #23282d;
    color: transparent;
}

/*
 * WooCommerce's RTL stylesheets (admin-rtl.css and woocommerce-rtl.css) float
 * every item in the gallery thumbnail strip - both the "Product gallery" box in
 * wp-admin and the front-end thumbnail row - with float: right instead of
 * float: left. That makes the FIRST item chosen/ordered by the admin land on
 * the far RIGHT, and each item added after it stack progressively further
 * LEFT - so whatever was added last (e.g. a video appended after existing
 * gallery images) ends up on the far left, i.e. in the position everyone reads
 * as "shown first," regardless of what order is actually saved in
 * _product_image_gallery. Forcing float: left here makes DOM order (the order
 * the admin actually set) map directly to left-to-right visual order, with no
 * dependence on the site's RTL text direction.
 */
#woocommerce-product-images .inside #product_images_container ul li.image {
    float: left !important;
}

.flex-control-thumbs li {
    float: left !important;
}

.flex-control-thumbs li:nth-child(3n+1) {
    clear: left !important;
}