/* Katrille Video in Gallery — frontend
 *
 * Sizing strategy (what you proved works in your DevTools experiment):
 *
 *   height: 100% + width: auto + max-width: none
 *
 * For a replaced element (<video>), height:100% + auto width preserves
 * the video's intrinsic aspect ratio while filling the tile vertically.
 * If the video's aspect ratio is wider than the tile (e.g. 4:5 video in
 * 3:4 tile), the element ends up slightly wider than the tile — the
 * excess is cleanly clipped by overflow:hidden on the parent. Full
 * vertical content (head to feet) is preserved, with at most a tiny
 * side crop where the aspects differ. No `width: 100%`, so no subpixel
 * gap on the right edge. No `object-fit`, so no bars.
 *
 * Limitation worth noting: if a video is MORE vertical than the tile
 * (e.g. 9:16 video in 3:4 tile), this leaves empty space on the right
 * since the element ends up narrower than the tile. Solution in that
 * case: re-encode the product video closer to your product photo aspect.
 */

.kvg-gallery-item {
	position: relative;
	overflow: hidden;
}

.kvg-gallery-video {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: auto;
	max-width: none;
	display: block;
}

/* FlexSlider thumbnail rail safety. */
.flex-control-thumbs li img[src^="data:image/svg+xml"] {
	background: #000;
	object-fit: contain;
}