:root {
	--cb-swatch-graphite: #292928;
	--cb-swatch-line: #c9c8c4;
	--cb-swatch-focus: #6d5435;
}

.cb-metal-swatches {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 36px;
	margin: 8px 0 3px;
}

.cb-metal-swatch {
	position: relative;
	display: inline-grid;
	place-items: center;
	box-sizing: border-box;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.cb-metal-swatch::before {
	width: 18px;
	height: 18px;
	border: 1px solid rgba(41, 41, 40, 0.1);
	border-radius: inherit;
	background: var(--cb-metal-fill);
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7);
	content: "";
}

.cb-metal-swatch::after {
	position: absolute;
	inset: 3px;
	border: 1.5px solid transparent;
	border-radius: inherit;
	content: "";
	transition: border-color 140ms ease, transform 140ms ease;
}

.cb-metal-swatch[aria-pressed="true"]::after {
	border-color: var(--cb-swatch-graphite);
}

.cb-metal-swatch:hover::after {
	border-color: var(--cb-swatch-line);
}

.cb-metal-swatch[aria-pressed="true"]:hover::after {
	border-color: var(--cb-swatch-graphite);
}

.cb-metal-swatch:focus-visible {
	outline: 2px solid var(--cb-swatch-focus);
	outline-offset: 1px;
}

.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) {
	.cb-metal-swatches {
		gap: 1px;
		margin-top: 6px;
	}
}

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