.scs-swatch-wrapper .scs-select-holder {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.scs-swatch-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 2px 0;
}

.scs-swatch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px #d0d0d0;
	cursor: pointer;
	position: relative;
	background-color: #eee;
	transition: box-shadow 0.15s ease, transform 0.1s ease;
}

.scs-swatch:hover {
	transform: translateY(-1px);
	box-shadow: 0 0 0 1px #999;
}

.scs-swatch:focus {
	outline: none;
	box-shadow: 0 0 0 1px #999, 0 0 0 3px rgba(0, 0, 0, 0.15);
}

.scs-swatch--selected {
	box-shadow: 0 0 0 2px #000;
}

.scs-swatch--selected:hover {
	box-shadow: 0 0 0 2px #000;
}

.scs-swatch--text {
	width: auto;
	min-width: 34px;
	height: 34px;
	border-radius: 17px;
	padding: 0 12px;
	font-size: 12px;
	line-height: 1;
	background-color: #f5f5f5;
	color: #333;
	white-space: nowrap;
}

.scs-selected-label {
	font-weight: 400;
	text-transform: none;
}

/* Small swatches shown on shop / category / related-product cards. */
.scs-loop-swatch-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 8px 0;
}

.scs-loop-swatch {
	display: inline-block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px #d0d0d0;
	background-color: #eee;
	transition: box-shadow 0.15s ease, transform 0.1s ease;
}

.scs-loop-swatch:hover,
.scs-loop-swatch:focus {
	box-shadow: 0 0 0 1px #999;
	transform: translateY(-1px);
}

/* The main summary price (top of the page) now updates to the selected
   variation's price via JS, so hide WooCommerce's own duplicate price line
   further down next to the Add to cart button. Availability/stock text and
   any variation description in that same box are left untouched. */
.single_variation_wrap .woocommerce-variation-price {
	display: none;
}