/**
 * Variation pills — brand-matched to the theme's CSS custom properties.
 * The original <select> is kept in the DOM but visually hidden.
 */
.vk-select-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.vk-pills {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	width: 100%;
}

.vk-pills__label {
	font-family: var(--font-primary, inherit);
	font-size: var(--font-size-xs, .75rem);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #8a8a8a;
}

.vk-pills__group {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.vk-pill {
	appearance: none;
	cursor: pointer;
	font-family: var(--font-primary, inherit);
	font-size: var(--font-size-s, .9rem);
	line-height: 1;
	padding: .6em 1.15em;
	border-radius: 2rem;
	border: 1px solid #d8d2ca;
	background: transparent;
	color: var(--color-text, #232323);
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .08s ease;
}

.vk-pill:hover {
	border-color: var(--color-primary, #fc0048);
	color: var(--color-primary, #fc0048);
}

.vk-pill:active {
	transform: scale(.97);
}

.vk-pill:focus-visible {
	outline: 2px solid var(--color-primary, #fc0048);
	outline-offset: 2px;
}

.vk-pill.is-active {
	background: var(--color-primary, #fc0048);
	border-color: var(--color-primary, #fc0048);
	color: var(--color-base, #fff);
}