/* Frontend multicolor swatch base. */
.wcmcs-term-preview,
.thwvsf-item-span-color.wcmcs-has-2-colors,
.thwvsf-item-span-color.wcmcs-has-3-colors {
	display: inline-block;
}

.wcmcs-term-preview,
.thwvsf-item-span-color.wcmcs-has-2-colors,
.thwvsf-item-span-color.wcmcs-has-3-colors {
	background-color: var(--wcmcs-color-1, transparent);
}

/* 2-color swatch: diagonal split. */
.wcmcs-term-preview.wcmcs-has-2-colors,
.thwvsf-item-span-color.wcmcs-has-2-colors {
	background-image: linear-gradient(135deg, var(--wcmcs-color-1) 0 50%, var(--wcmcs-color-2) 50% 100%) !important;
	background: linear-gradient(135deg, var(--wcmcs-color-1) 0 50%, var(--wcmcs-color-2) 50% 100%) !important;
	background-color: var(--wcmcs-color-1) !important;
}

/* 3-color swatch: conic pie. */
.wcmcs-term-preview.wcmcs-has-3-colors,
.thwvsf-item-span-color.wcmcs-has-3-colors {
	background-image: conic-gradient(from 225deg, var(--wcmcs-color-1) 0 33.333%, var(--wcmcs-color-2) 33.333% 66.666%, var(--wcmcs-color-3) 66.666% 100%) !important;
	background: conic-gradient(from 225deg, var(--wcmcs-color-1) 0 33.333%, var(--wcmcs-color-2) 33.333% 66.666%, var(--wcmcs-color-3) 66.666% 100%) !important;
	background-color: var(--wcmcs-color-1) !important;
}

.wcmcs-term-preview {
	width: 28px;
	height: 28px;
	border: 1px solid #c3c4c7;
	border-radius: 50%;
	vertical-align: middle;
}

/* Fallback swatch layout (no THWVSF). */
.wcmcs-fallback-swatches {
	margin-top: 10px;
}

.wcmcs-fallback-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wcmcs-fallback-option {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.wcmcs-fallback-option .wcmcs-term-preview {
	width: 32px;
	height: 32px;
}

.wcmcs-fallback-option.is-selected .wcmcs-term-preview,
.wcmcs-fallback-option:focus-visible .wcmcs-term-preview {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}

.wcmcs-fallback-label {
	display: inline-block;
	padding: 6px 10px;
	border: 1px solid #c3c4c7;
	border-radius: 999px;
	background: #fff;
	font-size: 12px;
	line-height: 1.2;
}

/* Generic .option.color markup used by some themes. */
.option.color[data-wcmcs-count="2"] i {
	background-image: linear-gradient(135deg, var(--wcmcs-color-1) 0 50%, var(--wcmcs-color-2) 50% 100%) !important;
	background: linear-gradient(135deg, var(--wcmcs-color-1) 0 50%, var(--wcmcs-color-2) 50% 100%) !important;
	background-color: var(--wcmcs-color-1) !important;
}

.option.color[data-wcmcs-count="3"] i {
	background-image: conic-gradient(from 225deg, var(--wcmcs-color-1) 0 33.333%, var(--wcmcs-color-2) 33.333% 66.666%, var(--wcmcs-color-3) 66.666% 100%) !important;
	background: conic-gradient(from 225deg, var(--wcmcs-color-1) 0 33.333%, var(--wcmcs-color-2) 33.333% 66.666%, var(--wcmcs-color-3) 66.666% 100%) !important;
	background-color: var(--wcmcs-color-1) !important;
}