.jr-swatches {
	margin: 0 0 18px;
}

.jr-swatches__label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	margin-bottom: 8px;
}

.jr-swatches__label span {
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	opacity: .75;
}

.jr-swatches__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.jr-swatch {
	width: 46px;
	height: 46px;
	padding: 0;
	border: 2px solid #d8d8d8;
	border-radius: 50%;
	background-color: #fff;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	cursor: pointer;
	overflow: hidden;
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.jr-swatch:hover {
	border-color: #8a8a8a;
	transform: translateY(-1px);
}

.jr-swatch.is-active {
	border-color: #111;
	box-shadow: 0 0 0 2px rgba(17, 17, 17, .25);
}

.jr-swatch.is-unavailable {
	opacity: .35;
	position: relative;
}

.jr-swatch.is-unavailable::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top left, transparent 47%, #b00 47%, #b00 53%, transparent 53%);
}

.jr-swatches .jr-sw-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}