/**
 * Look video slide in the product gallery.
 *
 * Scoped to .sarno-product-video, which is the one slide this plugin adds —
 * nothing here touches the image slides or the thumbnail strip WooCommerce
 * generates around them.
 */

.sarno-product-video {
    /* Slide height is fixed by the frame below rather than by video metadata,
       so the gallery doesn't jump when the file finally loads. */
    --sarno-video-aspect: 3 / 4;
}

.sarno-product-video__frame {
    position: relative;
    width: 100%;
    aspect-ratio: var(--sarno-video-aspect);
    /* Matches the placeholder SVG's ground, so a video of any shape letterboxes
       into it invisibly. */
    background: #1a1a1a;
    overflow: hidden;
}

.sarno-product-video__player {
    display: block;
    width: 100%;
    height: 100%;
    /* contain, not cover: a portrait catwalk clip must not be cropped to fill
       a frame whose ratio we had to guess. */
    object-fit: contain;
    /* There are no controls, so there is nothing to click. This also stops a
       tap on the slide from pausing playback on mobile. */
    pointer-events: none;
}

/* Older browsers without aspect-ratio would collapse the frame to nothing,
   which loses the slide entirely rather than just sizing it oddly. */
@supports not (aspect-ratio: 3 / 4) {
    .sarno-product-video__frame { min-height: 420px; }
    .sarno-product-video__player { position: absolute; inset: 0; }
}