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

.toroobche-gallery-video-wrap {
    position: relative;
    display: block;
    cursor: pointer;
}

.toroobche-gallery-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20%;
    max-width: 56px;
    min-width: 32px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    pointer-events: none;
}

.toroobche-gallery-video-play::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 56%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 8px 0 8px 14px;
    border-color: transparent transparent transparent #fff;
}

.toroobche-video-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
}

.toroobche-video-lightbox__player {
    max-width: 92vw;
    max-height: 88vh;
}

.toroobche-video-lightbox__close {
    position: absolute;
    top: 16px;
    inset-inline-end: 16px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.toroobche-video-lightbox__close:hover {
    background: rgba(255, 255, 255, 0.3);
}

#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;
}