/*
 * Hover-voorbeeld bij swatches: een kleine, zwevende popup met een grotere
 * foto, die verschijnt zodra je een swatch AANWIJST (nog voor je klikt).
 * Alleen op apparaten met een echte muis-hover (zie swatch-preview.js se
 * media-feature-detectie) -- op mobiel/tablet gebeurt er niets, klikken
 * werkt daar gewoon zoals altijd.
 */

.vit-swatch-preview {
	position: fixed;
	/* Hoger dan het bestaande site-brede swatch-preview-systeem
	   (#aic-addon-preview-tooltip, z-index 9999999), voor de zekerheid. */
	z-index: 100000001;
	width: 180px;
	height: 180px;
	padding: 6px;
	background: #ffffff;
	border: 1px solid #d7d9db;
	border-radius: 6px;
	box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.18 );
	pointer-events: none; /* nooit de muis "wegvangen" van de swatch eronder */
	opacity: 0;
	transform: translateY( 4px );
	transition: opacity 0.12s ease, transform 0.12s ease;
}

.vit-swatch-preview.is-visible {
	opacity: 1;
	transform: translateY( 0 );
}

.vit-swatch-preview img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}