/* Ikona lupy na swatchu (tryb "icon") */
.yith-wapo-addon-type-color .yith-wapo-option label .color {
	position: relative;
}
.desiva-cp-icon {
	position: absolute;
	right: -6px;
	bottom: -6px;
	width: 22px;
	height: 22px;
	padding: 0;
	line-height: 1;
	font-size: 11px;
	border: 1px solid rgba( 0, 0, 0, 0.15 );
	border-radius: 50%;
	background: #fff;
	color: #333;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.2 );
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}
.desiva-cp-icon:hover {
	background: #f3f3f3;
}

/* Overlay + modal */
.desiva-cp-overlay {
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, 0.6 );
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 100000;
	padding: 20px;
	opacity: 0;
	transition: opacity 0.25s ease;
}
/* Ukryty słownik nazw dla GTranslate – poza ekranem, ale renderowany (tłumaczony) */
.desiva-cp-i18n {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}
.desiva-cp-name {
	margin-bottom: 14px;
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	text-align: center;
	text-shadow: 0 1px 4px rgba( 0, 0, 0, 0.5 );
}
.desiva-cp-overlay.is-open {
	opacity: 1;
}
/* Ramka filmu: dokadrowanie do 3:2, biała ramka, wyśrodkowana i zmieszczona w oknie */
.desiva-cp-frame {
	position: relative;
	aspect-ratio: 3 / 4;
	width: min( 90vw, 60vh, 520px ); /* 60vh utrzymuje wysokość <= 80vh przy proporcji 3:4 */
	background: #fff;
	border: 6px solid #fff;
	border-radius: 12px;
	box-shadow: 0 10px 40px rgba( 0, 0, 0, 0.35 );
	overflow: hidden;
	transform: scale( 0.96 );
	transition: transform 0.25s ease;
}
.desiva-cp-overlay.is-open .desiva-cp-frame {
	transform: scale( 1 );
}
.desiva-cp-only-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover; /* docięcie do 3:2 bez zniekształceń */
}
.desiva-cp-close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	width: 34px;
	height: 34px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.9 );
	color: #222;
	font-size: 24px;
	line-height: 32px;
	text-align: center;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.25 );
}
.desiva-cp-close:hover {
	background: #fff;
}
@media ( prefers-reduced-motion: reduce ) {
	.desiva-cp-overlay,
	.desiva-cp-frame {
		transition: none;
	}
}