/*
 * Webkul Video Player inside the MagicZoomPlus video container.
 * MagicZoomPlus forces "#mtVideoContainer > div" into a 16:9 padding box sized
 * for iframes; uploaded files keep their own aspect ratio instead.
 */
#mtVideoContainer > div.cgs-webkul-video--upload {
    height: auto;
    padding-bottom: 0;
}

/*
 * The video box has the same shape as the main product image (ratio set by
 * webkul-player.js), so the gallery doesn't collapse while the video loads,
 * doesn't jump when it starts, and scales on resize/rotation. The video is
 * fitted inside it (landscape or portrait) on the page background.
 * It plays on its own with no controls and must not be interactive:
 * no click/tap, no long-press or context menu.
 */
#mtVideoContainer .cgs-webkul-video--upload video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--cgs-stage-ratio, 1);
    object-fit: contain;
    background: transparent;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Hide any native control UI (e.g. Safari's start-playback button) */
#mtVideoContainer .cgs-webkul-video--upload video::-webkit-media-controls,
#mtVideoContainer .cgs-webkul-video--upload video::-webkit-media-controls-panel,
#mtVideoContainer .cgs-webkul-video--upload video::-webkit-media-controls-start-playback-button,
#mtVideoContainer .cgs-webkul-video--upload video::-webkit-media-controls-overlay-play-button {
    display: none !important;
    -webkit-appearance: none;
}

#mtVideoContainer .cgs-webkul-video--drive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*
 * Video thumbnails. MagicZoomPlus forces them to "height: 100%" of the
 * MagicScroll cell (magiczoomplus.module.css), while image thumbnails keep their
 * own size and are centred vertically. That stretched/upscaled the poster:
 * blurry on desktop, distorted on mobile. Size them like image thumbnails
 * (width/height attributes are added by VideoSelectorSizePlugin) and never
 * distort the poster if the cell is narrower than it.
 */
div.MagicToolboxSelectorsContainer .mcs-item a.mt-thumb-switcher.video-selector img {
    height: auto;
    object-fit: contain;
}

/*
 * MagicScroll makes every selector link full cell height. Centre the poster
 * inside it like image thumbnails; the play icon (:before/:after) is absolutely
 * centred on the link, so it stays on the middle of the poster.
 */
div.MagicToolboxSelectorsContainer .mcs-item a.mt-thumb-switcher.video-selector {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}