/* ── Product Variants: chip switcher ─────────────────────────────────────
 * The root sets no color or font (Bricks native Style owns the box;
 * bricks-native-capabilities.md §7). Every value below is a token the Bricks
 * element's controls override. Sizes in em so the root's Typography carries.
 */
.mmpv {
	--mmpv-row-gap: 0.9em;
	--mmpv-chip-gap: 0.5em;
	--mmpv-label-gap: 0.35em;
	--mmpv-chip-padding: 0.45em 0.9em;
	--mmpv-chip-radius: 0.4em;
	--mmpv-chip-border-width: 1px;
	--mmpv-chip-color: currentColor;
	--mmpv-chip-bg: transparent;
	--mmpv-chip-border: color-mix(in srgb, currentColor 30%, transparent);
	--mmpv-chip-hover-border: currentColor;
	--mmpv-current-color: currentColor;
	--mmpv-current-bg: color-mix(in srgb, currentColor 8%, transparent);
	--mmpv-current-border: currentColor;
	--mmpv-current-border-width: 2px;
	--mmpv-nearest-opacity: 0.5;
	--mmpv-nearest-border-style: dashed;
	--mmpv-oos-opacity: 0.7;
	--mmpv-note-accent: #d97706;
	--mmpv-note-bg: #fffbeb;
	--mmpv-note-color: #78350f;
	display: flex;
	flex-direction: column;
	gap: var(--mmpv-row-gap);
}

.mmpv-row {
	display: flex;
	flex-direction: column;
	gap: var(--mmpv-label-gap);
}

.mmpv-label {
	font-weight: 600;
}

.mmpv-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mmpv-chip-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mmpv-chips li {
	margin: 0;
}

.mmpv-chip {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	padding: var(--mmpv-chip-padding);
	border: var(--mmpv-chip-border-width) solid var(--mmpv-chip-border);
	border-radius: var(--mmpv-chip-radius);
	background: var(--mmpv-chip-bg);
	color: var(--mmpv-chip-color);
	line-height: 1.25;
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
}

.mmpv-chip:hover,
.mmpv-chip:focus-visible {
	border-color: var(--mmpv-chip-hover-border);
}

.mmpv-chip.is-current {
	border: var(--mmpv-current-border-width) solid var(--mmpv-current-border);
	background: var(--mmpv-current-bg);
	color: var(--mmpv-current-color);
	font-weight: 600;
}

/* Not offered with the visitor's other choices: still a link, to the closest sibling. */
.mmpv-chip.is-nearest {
	border-style: var(--mmpv-nearest-border-style);
	opacity: var(--mmpv-nearest-opacity);
}

.mmpv-chip.is-nearest:hover,
.mmpv-chip.is-nearest:focus-visible {
	opacity: 1;
}

.mmpv-chip.is-out-of-stock:not(.is-current) {
	opacity: var(--mmpv-oos-opacity);
}

.mmpv-oos {
	font-size: 0.75em;
	font-weight: 400;
	opacity: 0.8;
}

.mmpv-preview-note {
	margin: 0;
	padding: 0.4em 0.7em;
	border-left: 3px solid var(--mmpv-note-accent);
	background: var(--mmpv-note-bg);
	color: var(--mmpv-note-color);
	font-size: 0.85em;
}