/* SVI Updated — frontend gallery */

.svi-updated-gallery {
	position: relative;
}

.svi-updated-main-image img {
	display: block;
	width: 100%;
	height: auto;
}

.svi-updated-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.svi-updated-thumb-item {
	cursor: pointer;
	border: 2px solid transparent;
	border-radius: 4px;
	overflow: hidden;
	line-height: 0;
	flex: 0 0 auto;
}

.svi-updated-thumb-item img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	display: block;
}

.svi-updated-thumb-item.is-active {
	border-color: currentColor;
}

/* ------------------------------------------------------------------ *
 * Video
 *
 * A video decorates one of the gallery's images: the image is the tile
 * and the poster, and the badge swaps it for a player on click.
 * ------------------------------------------------------------------ */

.svi-updated-thumb-item.has-video,
.svi-updated-main-image.has-video {
	position: relative;
}

.sviicon-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 48px;
	height: 48px;
	padding: 0;
	margin: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background: rgba(0, 0, 0, .35);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	transition: background-color .15s ease-in-out;
}

.sviicon-play:hover,
.sviicon-play:focus-visible {
	background: rgba(0, 0, 0, .6);
}

.sviicon-play svg {
	width: 22px;
	height: 22px;
	/* Nudge the triangle so it reads as centred inside the circle. */
	margin-left: 2px;
}

.svi-updated-thumb-item .sviicon-play {
	width: 28px;
	height: 28px;
	border-width: 1px;
}

.svi-updated-thumb-item .sviicon-play svg {
	width: 13px;
	height: 13px;
	margin-left: 1px;
}

/* The player is laid OVER its host image rather than replacing it. The image is
   what gives the tile its size, so leaving it in flow means starting playback
   causes no reflow: no collapsed tile, no gap in a grid row, and nothing to
   restore on teardown beyond removing the player node. */
.is-playing,
.is-autoplaying {
	position: relative;
}

.svi-updated-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	background: #000;
	z-index: 5;
}

.svi-updated-video-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* !important because themes force these tiles visible from far more specific
   selectors — konte-child sets
   `… .variable-gallery-hero-grid ul.svi-updated-thumbs img { display: block }`,
   which outranks any plain selector this file could write. The badge is a
   functional state, not styling: leaving it up puts a play button over a
   playing video. */
.is-playing > .sviicon-play,
.is-autoplaying > .sviicon-play {
	display: none !important;
}

/* Loop showcase (archive pages) */
.svi-updated-loop-showcase {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}

.svi-updated-loop-thumb img {
	width: 36px;
	height: 36px;
	object-fit: cover;
	border-radius: 3px;
	display: block;
}

/* Showcase strip under the variation form */
.svi-updated-showcase-under {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 10px 0;
}

.svi-updated-showcase-item {
	padding: 0;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: none;
	cursor: pointer;
	line-height: 0;
}

.svi-updated-showcase-item img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	display: block;
}

/* Lightbox */
.svi-updated-lightbox {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.85);
	z-index: 100000;
	padding: 24px;
}

.svi-updated-lightbox.is-open {
	display: flex;
}

.svi-updated-lightbox-img {
	max-width: 92vw;
	max-height: 92vh;
	object-fit: contain;
}

.svi-updated-lightbox-close {
	position: absolute;
	top: 16px;
	right: 24px;
	width: 40px;
	height: 40px;
	font-size: 28px;
	line-height: 1;
	color: #fff;
	background: none;
	border: none;
	cursor: pointer;
}

.svi-updated-noscroll {
	overflow: hidden;
}