/* Shared media lightbox used by installation, promotions, and product media. */
body.kiddee-media-lightbox-open {
	overflow: hidden;
}

.kiddee-media-lightbox[hidden] {
	display: none;
}

.kiddee-media-lightbox {
	position: fixed;
	z-index: 99999;
	inset: 0;
	display: grid;
	place-items: center;
	padding: clamp(52px, 6vw, 84px) clamp(16px, 4vw, 64px) clamp(20px, 4vw, 52px);
	background: color-mix(in srgb, var(--kv2-color-text) 92%, transparent);
	backdrop-filter: blur(4px);
}

.kiddee-media-lightbox__stage {
	display: flex;
	max-width: 100%;
	max-height: 100%;
	flex-direction: column;
	align-items: center;
	gap: var(--kv2-space-3);
}

.kiddee-media-lightbox__image {
	display: block;
	width: auto;
	height: auto;
	max-width: min(92vw, 1440px);
	max-height: 82vh;
	border-radius: var(--kv2-radius-sm);
	object-fit: contain;
	box-shadow: 0 24px 70px color-mix(in srgb, var(--kv2-color-footer-black) 48%, transparent);
}

.kiddee-media-lightbox__caption {
	margin: 0;
	color: var(--kv2-color-surface);
	font-size: var(--kv2-type-caption-size);
	line-height: var(--kv2-type-caption-line);
	text-align: center;
}

.kiddee-media-lightbox__close {
	position: absolute;
	top: clamp(14px, 2vw, 28px);
	right: clamp(14px, 2vw, 28px);
	display: inline-grid;
	width: 46px;
	height: 46px;
	min-height: 46px;
	place-items: center;
	border: 1px solid color-mix(in srgb, var(--kv2-color-surface) 58%, transparent);
	border-radius: 50%;
	padding: 0;
	color: var(--kv2-color-surface);
	background: color-mix(in srgb, var(--kv2-color-surface) 12%, transparent);
	box-shadow: none;
	font-family: var(--font-body);
	font-size: var(--kv2-type-display-md-size);
	font-weight: var(--kv2-type-display-md-weight);
	line-height: var(--kv2-type-display-md-line);
	cursor: pointer;
}

:where(html:not([data-kiddee-input="touch"])) .kiddee-media-lightbox__close:hover{
	border-color: var(--kv2-color-surface);
	color: var(--kv2-color-primary-dark);
	background: var(--kv2-color-surface);
	box-shadow: none;
	transform: none;
}

.kiddee-media-lightbox__close:active {
	transform: scale(.96);
}

.kiddee-media-lightbox__close:focus,
.kiddee-media-lightbox__close:focus-visible,
:where(.dialog-close-button, .elementor-lightbox .dialog-close-button):focus,
:where(.dialog-close-button, .elementor-lightbox .dialog-close-button):focus-visible {
	outline: none ;
	outline-offset: 0 ;
	box-shadow: none ;
}