.lkvs-native-select-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.lkvs-swatches,
.lkvs-loop-swatches {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: flex-start !important;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	min-height: 0 !important;
	margin: 0.55rem 0 !important;
	padding: 0 !important;
	list-style: none !important;
	line-height: 0 !important;
	text-align: left !important;
	text-indent: 0 !important;
	font-size: 0 !important;
	direction: ltr !important;
	clear: both !important;
}

.lkvs-swatches::before,
.lkvs-swatches::after,
.lkvs-loop-swatches::before,
.lkvs-loop-swatches::after {
	content: none !important;
	display: none !important;
}

/*
 * Frontend swatches use the same visual model as the admin preview:
 * one crisp preview circle with a 1px neutral border and a subtle white inner ring.
 * The clickable button/link itself is only a reset wrapper, so theme button/link styles
 * cannot distort the visible color circle.
 */
.lkvs-swatch {
	--lkvs-size: 30px;
	all: unset !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	width: var(--lkvs-size) !important;
	height: var(--lkvs-size) !important;
	min-width: var(--lkvs-size) !important;
	min-height: var(--lkvs-size) !important;
	max-width: var(--lkvs-size) !important;
	max-height: var(--lkvs-size) !important;
	flex: 0 0 var(--lkvs-size) !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	outline: 0 !important;
	outline-offset: 0 !important;
	color: inherit !important;
	font: inherit !important;
	font-size: 0 !important;
	line-height: 0 !important;
	letter-spacing: normal !important;
	text-align: center !important;
	text-decoration: none !important;
	text-indent: 0 !important;
	vertical-align: top !important;
	float: none !important;
	clear: none !important;
	transform: none !important;
	filter: none !important;
	overflow: visible !important;
	isolation: isolate !important;
	cursor: pointer !important;
	-webkit-tap-highlight-color: transparent !important;
}

.lkvs-swatch::after,
.lkvs-swatch:not(.is-unavailable):not(:disabled)::before {
	content: none !important;
	display: none !important;
}

/* 0.1.16: hidden must apply to the actual swatch control. The base reset uses
 * display:inline-flex !important, so the native [hidden] rule alone is not enough. */
.lkvs-swatch[hidden],
.lkvs-swatch.is-hidden,
.lkvs-swatches .lkvs-swatch[hidden],
.lkvs-swatches .lkvs-swatch.is-hidden,
.lkvs-loop-swatches .lkvs-swatch[hidden],
.lkvs-loop-swatches .lkvs-swatch.is-hidden {
	display: none !important;
	visibility: hidden !important;
	width: 0 !important;
	height: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: 0 !important;
	max-height: 0 !important;
	flex: 0 0 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
}

.lkvs-swatch-visual {
	display: block !important;
	box-sizing: border-box !important;
	width: var(--lkvs-size) !important;
	height: var(--lkvs-size) !important;
	min-width: var(--lkvs-size) !important;
	min-height: var(--lkvs-size) !important;
	max-width: var(--lkvs-size) !important;
	max-height: var(--lkvs-size) !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 50% !important;
	border: 1px solid #8c8f94 !important;
	background-color: var(--lkvs-color, #ffffff) !important;
	background-image: none !important;
	background-clip: padding-box !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55) !important;
	outline: 0 !important;
	overflow: hidden !important;
	line-height: 0 !important;
	transform: none !important;
	filter: none !important;
	pointer-events: none !important;
}

.lkvs-swatch.lkvs-swatch--missing .lkvs-swatch-visual {
	background-color: #ffffff !important;
	background-image:
		linear-gradient(45deg, #eee 25%, transparent 25%),
		linear-gradient(-45deg, #eee 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #eee 75%),
		linear-gradient(-45deg, transparent 75%, #eee 75%) !important;
	background-size: 10px 10px !important;
	background-position: 0 0, 0 5px, 5px -5px, -5px 0 !important;
}

.lkvs-swatch:hover .lkvs-swatch-visual,
.lkvs-swatch:focus-visible .lkvs-swatch-visual {
	border-color: #5f6368 !important;
}

.lkvs-swatch:focus-visible {
	outline: 2px solid rgba(31, 41, 55, 0.45) !important;
	outline-offset: 2px !important;
}

.lkvs-swatch.is-selected {
	outline: 2px solid #2f3437 !important;
	outline-offset: 2px !important;
}

.lkvs-swatch.is-selected .lkvs-swatch-visual {
	border-color: #2f3437 !important;
}

.lkvs-swatch.is-unavailable,
.lkvs-swatch:disabled {
	opacity: 0.42 !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
}

.lkvs-swatch.is-unavailable::before,
.lkvs-swatch:disabled::before {
	content: "" !important;
	position: absolute !important;
	left: 50% !important;
	top: 50% !important;
	z-index: 3 !important;
	width: calc(var(--lkvs-size) - 4px) !important;
	height: 1px !important;
	background: rgba(0, 0, 0, 0.58) !important;
	transform: translate(-50%, -50%) rotate(-45deg) !important;
	transform-origin: center !important;
	pointer-events: none !important;
}

.lkvs-swatch-fallback-text {
	all: unset !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 100% !important;
	font-size: 0.68rem !important;
	font-weight: 600 !important;
	color: #222 !important;
	line-height: 1 !important;
}

.lkvs-swatches[data-lkvs-shape="square"] .lkvs-swatch,
.lkvs-loop-swatches[data-lkvs-shape="square"] .lkvs-swatch,
.lkvs-swatches[data-lkvs-shape="square"] .lkvs-swatch-visual,
.lkvs-loop-swatches[data-lkvs-shape="square"] .lkvs-swatch-visual {
	border-radius: 7px !important;
}

/* Product/category loop swatches. */
.lkvs-loop-swatches {
	gap: 0.52rem 0.56rem !important;
	margin: 0.55rem 0 0 !important;
}

.lkvs-loop-swatches .lkvs-swatch {
	--lkvs-size: 26px;
	flex: 0 0 var(--lkvs-size) !important;
}

.woocommerce ul.products li.product .lkvs-loop-swatches,
.elementor-widget-woocommerce-products .lkvs-loop-swatches,
.elementor-products-grid .lkvs-loop-swatches,
.elementor .products .lkvs-loop-swatches {
	display: flex !important;
	justify-content: flex-start !important;
	align-items: flex-start !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	left: auto !important;
	right: auto !important;
}

.woocommerce ul.products li.product .lkvs-loop-swatches > *,
.elementor-widget-woocommerce-products .lkvs-loop-swatches > *,
.elementor-products-grid .lkvs-loop-swatches > *,
.elementor .products .lkvs-loop-swatches > * {
	margin: 0 !important;
	float: none !important;
	text-indent: 0 !important;
}

/* If a theme/browser has produced a product-card main link inside the swatch row, hide it even when it contains whitespace. */
.lkvs-loop-swatches > a.woocommerce-LoopProduct-link:not(.lkvs-swatch),
.lkvs-loop-swatches > a.woocommerce-loop-product__link:not(.lkvs-swatch),
.lkvs-loop-swatches > a.woocommerce-LoopProduct-link.woocommerce-loop-product__link:not(.lkvs-swatch) {
	display: none !important;
	visibility: hidden !important;
	width: 0 !important;
	height: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: 0 !important;
	max-height: 0 !important;
	flex: 0 0 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
}

.lkvs-loop-more {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	min-width: 26px !important;
	height: 26px !important;
	padding: 0 0.35rem !important;
	border: 1px solid #8c8f94 !important;
	border-radius: 999px !important;
	font-size: 0.72rem !important;
	line-height: 1 !important;
	color: inherit !important;
	background: transparent !important;
}

/* Single product variation form. The color row is marked by JS so only that variation row is changed. */
.woocommerce div.product form.cart table.variations tr.lkvs-variation-row {
	display: block !important;
	margin: 0 0 1rem !important;
}

.woocommerce div.product form.cart table.variations tr.lkvs-variation-row th,
.woocommerce div.product form.cart table.variations tr.lkvs-variation-row td {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	text-align: left !important;
}

.woocommerce div.product form.cart table.variations tr.lkvs-variation-row th.label {
	padding-bottom: 0.35rem !important;
}

.woocommerce div.product form.cart table.variations tr.lkvs-variation-row td.value {
	padding-top: 0 !important;
}

.woocommerce div.product form.cart table.variations tr.lkvs-variation-row .lkvs-swatches {
	gap: 0.62rem 0.66rem !important;
	margin: 0.18rem 0 0.7rem !important;
	padding: 0 !important;
}

.woocommerce div.product form.cart table.variations tr.lkvs-variation-row .lkvs-swatch {
	--lkvs-size: 30px;
}

/* Single product spacing and selected color label. */
.woocommerce div.product form.cart table.variations tr.lkvs-variation-row {
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 1rem 1.05rem 0.42rem !important;
	background: #f7f7f7 !important;
	border: 0 !important;
}

.woocommerce div.product form.cart table.variations tr.lkvs-variation-row th,
.woocommerce div.product form.cart table.variations tr.lkvs-variation-row td,
.woocommerce div.product form.cart table.variations tr.lkvs-variation-row th.label,
.woocommerce div.product form.cart table.variations tr.lkvs-variation-row td.value {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}

.woocommerce div.product form.cart table.variations tr.lkvs-variation-row th.label {
	margin: 0 0 0.42rem !important;
}

.woocommerce div.product form.cart table.variations tr.lkvs-variation-row th.label label {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.35 !important;
}

.woocommerce div.product form.cart table.variations tr.lkvs-variation-row .lkvs-selected-label {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	margin: 0.14rem 0 0.82rem !important;
	padding: 0 !important;
	font-size: 0.92rem !important;
	line-height: 1.35 !important;
	color: #4b5563 !important;
	background: transparent !important;
}

.woocommerce div.product form.cart table.variations tr.lkvs-variation-row .lkvs-selected-label.is-empty {
	display: none !important;
}

.woocommerce div.product form.cart table.variations tr.lkvs-variation-row .lkvs-selected-label-prefix {
	font-weight: 400 !important;
}

.woocommerce div.product form.cart table.variations tr.lkvs-variation-row .lkvs-selected-label-value {
	font-weight: 600 !important;
}

.woocommerce div.product form.cart table.variations tr.lkvs-variation-row .lkvs-swatches {
	margin: 0.34rem 0 0.12rem !important;
	padding: 0 !important;
}

.woocommerce div.product form.cart table.variations tr.lkvs-variation-row .reset_variations {
	display: inline-block !important;
	margin-top: 0.18rem !important;
	margin-bottom: 0 !important;
}

/* WooCommerce keeps the reset link in the layout with visibility:hidden before a selection.
 * Hide that state fully so it does not create empty space below the swatches. */
.woocommerce div.product form.cart table.variations tr.lkvs-variation-row .reset_variations[style*="visibility: hidden"],
.woocommerce div.product form.cart table.variations tr.lkvs-variation-row .reset_variations[style*="visibility:hidden"] {
	display: none !important;
	margin: 0 !important;
}

/* 0.1.19: spacing when no color is selected. The selected-label row is hidden in
 * that state, so keep the top breathing room, but leave a small visible bottom
 * cushion inside the grey swatch panel. */
.woocommerce div.product form.cart table.variations tr.lkvs-variation-row.lkvs-no-selection {
	padding-bottom: 0.72rem !important;
}

.woocommerce div.product form.cart table.variations tr.lkvs-variation-row.lkvs-no-selection .lkvs-swatches {
	margin-top: 0.72rem !important;
	margin-bottom: 0.12rem !important;
}

.woocommerce div.product form.cart table.variations tr.lkvs-variation-row.lkvs-no-selection .reset_variations {
	display: none !important;
	visibility: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
	height: 0 !important;
	line-height: 0 !important;
}