.wcs-element {
	display: block;
	width: 100%;
}

.wcs {
	--wcs-size: 38px;
	--wcs-button-width: 48px;
	--wcs-radius: 6px;
	--wcs-border: 2px;
	--wcs-border-inactive: #3a3833;
	--wcs-border-active: #F5C242;
	--wcs-bg: #1c1b18;
	--wcs-color: #F3EFE6;
	--wcs-selected-bg: #F5C242;
	--wcs-selected-text: #131210;
	--wcs-gap: 8px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	line-height: 1.5;
}

.wcs-title {
	margin: 0 0 2px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.wcs-empty {
	font-size: 13px;
	opacity: 0.6;
}

.wcs-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.wcs-group__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.wcs-attribute-name {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.75;
}

.wcs-selected-value {
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.wcs-selected-value--empty::before {
	content: '\00a0';
}

.wcs-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wcs-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.wcs-swatches li {
	margin: 0;
	padding: 0;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wcs-swatch {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wcs-size);
	height: var(--wcs-size);
	border: var(--wcs-border) solid var(--wcs-border-inactive);
	border-radius: var(--wcs-radius);
	background: none;
	margin: 0;
	padding: 0;
	cursor: pointer;
	overflow: visible;
	transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, opacity 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
	font-family: inherit;
	line-height: 1;
}

.wcs--square .wcs-swatch {
	border-radius: 0;
}

.wcs-swatch:hover {
	border-color: var(--wcs-border-active);
}

.wcs-swatch:focus-visible {
	outline: 2px solid var(--wcs-border-active);
	outline-offset: 2px;
}

.wcs-swatch.is-selected {
	border-color: var(--wcs-border-active);
	box-shadow: 0 0 0 1px var(--wcs-border-active);
}

.wcs-swatch.is-disabled,
.wcs-swatch.is-oos {
	cursor: not-allowed;
}

.wcs-swatch.is-disabled {
	opacity: 0.4;
}

.wcs-swatch--color {
	background: transparent;
}

.wcs-swatch--image img,
.wcs-swatch--image .wcs-swatch__image {
	position: absolute;
	inset: calc(var(--wcs-border) + 1px);
	width: auto;
	height: auto;
	max-width: calc(100% - (var(--wcs-border) + 1px) * 2);
	max-height: calc(100% - (var(--wcs-border) + 1px) * 2);
	object-fit: cover;
	border-radius: calc(var(--wcs-radius) - var(--wcs-border));
}

.wcs-swatch--button {
	width: auto;
	min-width: var(--wcs-button-width);
	padding: 0 12px;
	background: var(--wcs-bg);
	color: var(--wcs-color);
	font-size: 13px;
	font-weight: 600;
}

.wcs-swatch--button.is-selected {
	background: var(--wcs-selected-bg);
	color: var(--wcs-selected-text);
	border-color: var(--wcs-selected-bg);
	box-shadow: 0 0 0 1px var(--wcs-selected-bg);
}

.wcs--oos-crossed .wcs-swatch.is-oos .wcs-swatch__text {
	text-decoration: line-through;
	opacity: 0.55;
}

.wcs--oos-crossed .wcs-swatch.is-oos::after,
.wcs--oos-crossed .wcs-swatch--image.is-oos::after {
	content: '';
	position: absolute;
	left: -4px;
	right: -4px;
	top: 50%;
	height: 2px;
	background: currentColor;
	opacity: 0.55;
	transform: rotate(-45deg);
}

.wcs--oos-blur .wcs-swatch.is-oos {
	filter: blur(2px) grayscale(1);
	opacity: 0.6;
}

.wcs--oos-hide .wcs-swatch.is-oos,
.wcs--oos-hide .wcs-swatch.is-disabled {
	display: none;
}

.wcs--hide-head .wcs-group__head {
	display: none;
}

.wcs--oos-hide .wcs-swatches {
	min-height: var(--wcs-size);
}

.wcs-swatch[data-tip]::after {
	content: attr(data-tip);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	background: var(--wcs-bg, #111);
	color: var(--wcs-color, #fff);
	border: 1px solid var(--wcs-border-inactive, rgba(255, 255, 255, 0.15));
	padding: 5px 9px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
	z-index: 20;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}

.wcs-swatch[data-tip]::before {
	content: '';
	position: absolute;
	bottom: calc(100% + 4px);
	left: 50%;
	transform: translateX(-50%) rotate(45deg);
	width: 8px;
	height: 8px;
	background: var(--wcs-bg, #111);
	border-right: 1px solid var(--wcs-border-inactive, rgba(255, 255, 255, 0.15));
	border-bottom: 1px solid var(--wcs-border-inactive, rgba(255, 255, 255, 0.15));
	z-index: 20;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}

.wcs-swatch[data-tip]:hover::after,
.wcs-swatch[data-tip]:hover::before,
.wcs-swatch[data-tip]:focus::after,
.wcs-swatch[data-tip]:focus::before,
.wcs-swatch[data-tip]:focus-visible::after,
.wcs-swatch[data-tip]:focus-visible::before {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.wcs-swatch[data-tip]:hover::before,
.wcs-swatch[data-tip]:focus::before,
.wcs-swatch[data-tip]:focus-visible::before {
	transform: translateX(-50%) rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
	.wcs-swatch,
	.wcs-swatch[data-tip]::after,
	.wcs-swatch[data-tip]::before {
		transition: none;
	}
}