/*
 * StarRUO swatch overrides.
 *
 * Two problems, both caused by Elementor Pro's add-to-cart widget styling
 * every <button> inside form.cart as if it were the Add to Cart button:
 *
 *   1. The swatches inherited width:100%, so they stacked full width instead
 *      of sitting inline at their configured 52px.
 *   2. They inherited the Add to Cart text colour (white), so an unselected
 *      swatch rendered white-on-white and looked like an empty box. The
 *      selected one stayed readable only because Store Kit sets its colour.
 *
 * Elementor's selectors out-specify swatches.css, so these rules match that
 * specificity and restore the configured tokens. Every value falls back to the
 * Store Kit default, so the Swatches settings tab still drives everything.
 *
 * Loaded after swatches.css; upstream stays byte-identical.
 */

/* The native select stays in the DOM - WooCommerce reads and writes it and
 * assistive technology uses it - so it is clipped rather than removed. */
.sk-swatches + select,
.sk-swatches ~ .sk-hidden-select,
.woocommerce div.product form.cart .variations td.value .sk-swatches + select,
.elementor-widget-woocommerce-product-add-to-cart .variations .sk-swatches + select {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	min-height: 0 !important;
	max-height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	opacity: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	pointer-events: none !important;
	appearance: none !important;
}

.woocommerce div.product form.cart .variations .sk-swatches,
.elementor-widget-woocommerce-product-add-to-cart .variations .sk-swatches {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: var(--sk-sw-gap, 8px) !important;
	width: auto !important;
	margin: 0 0 6px !important;
}

.woocommerce div.product form.cart .variations .sk-swatch,
.elementor-widget-woocommerce-product-add-to-cart .variations .sk-swatch {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto !important;
	width: auto !important;
	min-width: var(--sk-sw-btn-w, 52px) !important;
	max-width: none !important;
	height: var(--sk-sw-btn-h, 44px) !important;
	min-height: var(--sk-sw-btn-h, 44px) !important;
	margin: 0 !important;
	padding: 0 14px !important;
	border: var(--sk-sw-border-w, 1px) solid var(--sk-sw-border, #d1d5db) !important;
	border-radius: var(--sk-sw-radius, 10px) !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--sk-primary, #111827) !important;
	-webkit-text-fill-color: var(--sk-primary, #111827) !important;
	font-family: inherit !important;
	font-size: var(--sk-sw-font, 14px) !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-shadow: none !important;
	cursor: pointer !important;
}

.woocommerce div.product form.cart .variations .sk-swatch.is-selected,
.elementor-widget-woocommerce-product-add-to-cart .variations .sk-swatch.is-selected {
	border-color: var(--sk-sw-sel-border, #111827) !important;
	background: var(--sk-sw-sel-bg, #111827) !important;
	color: var(--sk-sw-sel-fg, #ffffff) !important;
	-webkit-text-fill-color: var(--sk-sw-sel-fg, #ffffff) !important;
}

.woocommerce div.product form.cart .variations .sk-swatch:hover {
	border-color: var(--sk-sw-sel-border, #111827) !important;
}

/* Label inherits the button colour rather than the theme's button rules. */
.sk-swatch .sk-swatch__label {
	color: inherit !important;
	-webkit-text-fill-color: inherit !important;
	font: inherit !important;
}

/* Colour and image swatches size from their own tokens, not the button width. */
.sk-swatches--color .sk-swatch,
.sk-swatches--image .sk-swatch {
	width: var(--sk-sw-size, 38px) !important;
	min-width: var(--sk-sw-size, 38px) !important;
	height: var(--sk-sw-size, 38px) !important;
	min-height: var(--sk-sw-size, 38px) !important;
	padding: 0 !important;
}

.sk-swatch.is-unavailable {
	opacity: .45 !important;
}

.sk-swatches ~ .reset_variations {
	display: inline-block;
	margin-top: 4px;
}

@media (max-width: 640px) {
	.woocommerce div.product form.cart .variations .sk-swatch,
	.elementor-widget-woocommerce-product-add-to-cart .variations .sk-swatch {
		min-width: var(--sk-sw-btn-w-m, 44px) !important;
		height: var(--sk-sw-btn-h-m, 38px) !important;
		min-height: var(--sk-sw-btn-h-m, 38px) !important;
		font-size: var(--sk-sw-font-m, 13px) !important;
	}
}