:root {
	--cb-swatch-selected: #006c70;
	--cb-swatch-line: #c9c8c4;
	--cb-swatch-focus: #292928;
}

body.woocommerce ul.products li.product .cb-metal-swatches {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 3px !important;
	min-height: 34px !important;
	margin: 8px 0 2px !important;
	padding: 0 !important;
}

body.woocommerce ul.products li.product .cb-metal-swatches button.cb-metal-swatch {
	position: relative !important;
	display: inline-grid !important;
	flex: 0 0 32px !important;
	place-items: center !important;
	box-sizing: border-box !important;
	width: 32px !important;
	min-width: 32px !important;
	max-width: 32px !important;
	height: 32px !important;
	min-height: 32px !important;
	max-height: 32px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	box-shadow: none !important;
	color: transparent !important;
	font-size: 0 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	appearance: none !important;
	cursor: pointer !important;
	-webkit-tap-highlight-color: transparent;
}

body.woocommerce ul.products li.product .cb-metal-swatches button.cb-metal-swatch::before {
	display: block !important;
	box-sizing: border-box !important;
	width: 20px !important;
	height: 20px !important;
	border: 1px solid rgba(41, 41, 40, 0.1) !important;
	border-radius: 50% !important;
	background: var(--cb-metal-fill) !important;
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.72) !important;
	content: "" !important;
}

.cb-metal-swatches button.cb-metal-swatch::after {
	position: absolute !important;
	inset: 2px !important;
	box-sizing: border-box !important;
	border: 1.5px solid transparent !important;
	border-radius: 50% !important;
	content: "" !important;
	transition: border-color 140ms ease, transform 140ms ease;
}

body.woocommerce ul.products li.product .cb-metal-swatches button.cb-metal-swatch[aria-pressed="true"]::after {
	border-color: var(--cb-swatch-selected) !important;
}

body.woocommerce ul.products li.product .cb-metal-swatches button.cb-metal-swatch:hover::after {
	border-color: var(--cb-swatch-line) !important;
}

body.woocommerce ul.products li.product .cb-metal-swatches button.cb-metal-swatch[aria-pressed="true"]:hover::after {
	border-color: var(--cb-swatch-selected) !important;
}

body.woocommerce ul.products li.product .cb-metal-swatches button.cb-metal-swatch:focus-visible {
	outline: 2px solid var(--cb-swatch-focus) !important;
	outline-offset: 1px !important;
}

.cb-metal-swatch--white {
	--cb-metal-fill: linear-gradient(135deg, #fdfdfc 5%, #c7c9c8 43%, #ffffff 68%, #aaadad 100%);
}

.cb-metal-swatch--yellow {
	--cb-metal-fill: linear-gradient(135deg, #fff5bf 4%, #d8a72f 42%, #fff0a5 68%, #b77b16 100%);
}

.cb-metal-swatch--rose {
	--cb-metal-fill: linear-gradient(135deg, #ffe2d5 4%, #d99073 43%, #ffd4c1 68%, #b86952 100%);
}

.cb-metal-swatch--neutral {
	--cb-metal-fill: linear-gradient(135deg, #f5f3ef, #aaa7a1);
}

.products .product.cb-metal-is-changing img.attachment-woocommerce_thumbnail,
.products .product.cb-metal-is-changing img.wp-post-image {
	opacity: 0.35;
}

.products .product img.attachment-woocommerce_thumbnail,
.products .product img.wp-post-image {
	transition: opacity 120ms ease;
}

@media (max-width: 767px) {
	body.woocommerce ul.products li.product .cb-metal-swatches {
		gap: 1px !important;
		margin-top: 6px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cb-metal-swatch::after,
	.products .product img.attachment-woocommerce_thumbnail,
	.products .product img.wp-post-image {
		transition: none;
	}
}