/* Shared by admin preview, PHP-rendered loops and JS-rendered product swatches.
 * Decorative layers live inside the color span, NEVER on the clickable button.
 * No images, filters, blend modes, animation, transforms or changes to layout. */
.lkvs-surface {
	position: relative !important;
	isolation: isolate !important;
}

.lkvs-surface::before,
.lkvs-surface::after {
	content: none !important;
	display: none !important;
	position: absolute !important;
	inset: 0 !important;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: inherit !important;
	box-shadow: none !important;
	transform: none !important;
	filter: none !important;
	opacity: 1 !important;
	pointer-events: none !important;
	background-color: transparent !important;
	background-repeat: no-repeat !important;
	background-size: 100% 100% !important;
	background-position: 0 0 !important;
}

/* Metallic sheen preserves the base colour. Light keeps the brighter reflection;
 * dark uses softer shadowing plus restrained narrow highlights. Without a highlight,
 * an all-black overlay looks like a dark stripe rather than reflective metal. */
.lkvs-surface[data-lkvs-effect="metallic"][data-lkvs-metal-mode="light"]::before {
	content: "" !important;
	display: block !important;
	background-image: linear-gradient(135deg,
		rgba(255,255,255,.04) 0%, rgba(255,255,255,.18) 25%,
		rgba(255,255,255,.38) 37%, rgba(255,255,255,.78) 47%,
		rgba(255,255,255,.30) 55%, rgba(255,255,255,.08) 68%,
		rgba(255,255,255,.24) 84%, rgba(255,255,255,.06) 100%) !important;
}
.lkvs-surface[data-lkvs-effect="metallic"][data-lkvs-metal-mode="dark"]::before {
	content: "" !important;
	display: block !important;
	background-image: linear-gradient(135deg,
		rgba(0,0,0,.17) 0%, rgba(0,0,0,.14) 18%,
		rgba(0,0,0,.08) 27%, rgba(255,255,255,.07) 31%,
		rgba(255,255,255,.24) 38%, rgba(255,255,255,.09) 44%,
		rgba(0,0,0,.08) 51%, rgba(0,0,0,.19) 63%,
		rgba(0,0,0,.21) 69%, rgba(255,255,255,.11) 79%,
		rgba(0,0,0,.12) 89%, rgba(0,0,0,.15) 100%) !important;
}
/* Backwards-safe default for cached markup without data-lkvs-metal-mode. */
.lkvs-surface[data-lkvs-effect="metallic"]:not([data-lkvs-metal-mode])::before {
	content: "" !important;
	display: block !important;
	background-image: linear-gradient(135deg,
		rgba(255,255,255,.04) 0%, rgba(255,255,255,.18) 25%,
		rgba(255,255,255,.38) 37%, rgba(255,255,255,.78) 47%,
		rgba(255,255,255,.30) 55%, rgba(255,255,255,.08) 68%,
		rgba(255,255,255,.24) 84%, rgba(255,255,255,.06) 100%) !important;
}

/* Pearl: optional single-colour tint; absent variable preserves the original
 * pastel reflections byte-for-byte in computed colour/opacity. Base stays visible. */
.lkvs-surface[data-lkvs-effect="pearlescent"]::before {
	content: "" !important;
	display: block !important;
	background-image: linear-gradient(125deg,
		rgba(var(--lkvs-pearl-rgb, 245, 196, 216), .50) 0%, rgba(var(--lkvs-pearl-rgb, 250, 230, 207), .32) 24%,
		rgba(var(--lkvs-pearl-rgb, 205, 242, 222), .58) 44%, rgba(var(--lkvs-pearl-rgb, 211, 229, 249), .48) 66%,
		rgba(var(--lkvs-pearl-rgb, 228, 205, 242), .50) 84%, rgba(var(--lkvs-pearl-rgb, 244, 215, 230), .30) 100%) !important;
}
.lkvs-surface[data-lkvs-effect="pearlescent"]::after {
	content: "" !important;
	display: block !important;
	background-image:
		radial-gradient(ellipse at 32% 22%, rgba(255, 255, 255, .80) 0%, rgba(255, 255, 255, .30) 28%, rgba(255, 255, 255, 0) 62%),
		linear-gradient(145deg, rgba(255, 255, 255, 0) 40%, rgba(64, 70, 92, .10) 71%, rgba(255, 255, 255, .32) 100%) !important;
}

/* Snow: sparse subpixel grains and a quiet sheen in ONE selected color. */
.lkvs-surface[data-lkvs-effect="snow"]::before {
	content: "" !important;
	display: block !important;
	background-image:
		radial-gradient(circle at .7px .6px, rgba(var(--lkvs-effect-rgb, 255,255,255), .48) 0 .17px, rgba(var(--lkvs-effect-rgb, 255,255,255), 0) .45px),
		radial-gradient(circle at 1.4px 1.8px, rgba(var(--lkvs-effect-rgb, 255,255,255), .32) 0 .18px, rgba(var(--lkvs-effect-rgb, 255,255,255), 0) .42px),
		radial-gradient(circle at 2.5px .8px, rgba(var(--lkvs-effect-rgb, 255,255,255), .24) 0 .16px, rgba(var(--lkvs-effect-rgb, 255,255,255), 0) .42px) !important;
	background-size: 1.7px 2.3px, 2.9px 2.7px, 3.1px 3.7px !important;
	background-repeat: repeat !important;
}
.lkvs-surface[data-lkvs-effect="snow"]::after {
	content: "" !important;
	display: block !important;
	background-image: linear-gradient(135deg,
		rgba(var(--lkvs-effect-rgb, 255,255,255), 0) 15%,
		rgba(var(--lkvs-effect-rgb, 255,255,255), .16) 43%,
		rgba(var(--lkvs-effect-rgb, 255,255,255), .05) 60%,
		rgba(var(--lkvs-effect-rgb, 255,255,255), 0) 86%) !important;
}

/* Glitter: denser contrasting grains and a few brighter sparkles. Static. */
.lkvs-surface[data-lkvs-effect="glitter"]::before {
	content: "" !important;
	display: block !important;
	background-image:
		radial-gradient(circle at 1px 2px, rgba(var(--lkvs-effect-rgb, 255,255,255), .90) 0 .35px, rgba(var(--lkvs-effect-rgb, 255,255,255), 0) .70px),
		radial-gradient(circle at 3px 1px, rgba(var(--lkvs-effect-rgb, 255,255,255), .78) 0 .45px, rgba(var(--lkvs-effect-rgb, 255,255,255), 0) .80px),
		radial-gradient(circle at 2px 4px, rgba(var(--lkvs-effect-rgb, 255,255,255), .48) 0 .30px, rgba(var(--lkvs-effect-rgb, 255,255,255), 0) .65px),
		radial-gradient(circle at 4px 2px, rgba(0, 0, 0, .28) 0 .45px, rgba(0, 0, 0, 0) .65px) !important;
	background-size: 2.7px 3.3px, 4.1px 3.7px, 3.9px 2.9px, 4.7px 4.3px !important;
	background-repeat: repeat !important;
}
.lkvs-surface[data-lkvs-effect="glitter"]::after {
	content: "" !important;
	display: block !important;
	background-image:
		radial-gradient(ellipse 2.3px .65px at 30% 26%, rgba(var(--lkvs-effect-rgb, 255,255,255), .98) 0%, rgba(var(--lkvs-effect-rgb, 255,255,255), 0) 100%),
		radial-gradient(ellipse .65px 2.3px at 30% 26%, rgba(var(--lkvs-effect-rgb, 255,255,255), .98) 0%, rgba(var(--lkvs-effect-rgb, 255,255,255), 0) 100%),
		radial-gradient(ellipse 1.7px .6px at 71% 64%, rgba(var(--lkvs-effect-rgb, 255,255,255), .90) 0%, rgba(var(--lkvs-effect-rgb, 255,255,255), 0) 100%),
		radial-gradient(ellipse .6px 1.7px at 71% 64%, rgba(var(--lkvs-effect-rgb, 255,255,255), .90) 0%, rgba(var(--lkvs-effect-rgb, 255,255,255), 0) 100%),
		linear-gradient(135deg, rgba(0, 0, 0, .08), rgba(var(--lkvs-effect-rgb, 255,255,255), .12) 43%, rgba(0, 0, 0, .09)) !important;
}

/* Decorative textures should not obscure controls in forced-colors mode. */
@media (forced-colors: active) {
	.lkvs-surface[data-lkvs-effect]::before,
	.lkvs-surface[data-lkvs-effect]::after {
		content: none !important;
		display: none !important;
	}
}