/**
 * MARO Linked Variations – swatche na stronie produktu.
 *
 * BEM: .mlv-swatches / .mlv-swatch
 */

/* ── Kontener ────────────────────────────────────────────────────────────── */
.mlv-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 12px 0 16px;
	padding: 0;
	list-style: none;
}

/* ── Pojedynczy swatch (wspólna baza dla <a> i <span>) ───────────────────── */
.mlv-swatch {
	display: inline-block;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid #E3D9CF;
	box-sizing: border-box;
	cursor: pointer;
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
	text-decoration: none;
	position: relative;
	flex-shrink: 0;
}

/* Pierścień zewnętrzny – zawsze widoczny jako separator od tła */
.mlv-swatch::before {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 1px solid transparent;
	transition: border-color 0.15s ease;
	pointer-events: none;
}

/* ── Hover ───────────────────────────────────────────────────────────────── */
.mlv-swatch:hover:not(.mlv-swatch--active) {
	transform: scale(1.1);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}

.mlv-swatch:hover::before {
	border-color: #999;
}

/* ── Aktywny (bieżący produkt) ───────────────────────────────────────────── */
.mlv-swatch--active {
	border-color: #1a1a1a;
	cursor: default;
	box-shadow: 0 0 0 2px #fff inset; /* Biały ring między kolorem a bordem */
}

.mlv-swatch--active::before {
	border-color: #1a1a1a;
}

/* ── Brak zdefiniowanego koloru ──────────────────────────────────────────── */
.mlv-swatch--no-color {
	background-color: #e0e0e0;
	background-image: repeating-linear-gradient(
		45deg,
		#ccc 0,
		#ccc 3px,
		transparent 0,
		transparent 50%
	);
	background-size: 8px 8px;
}

/* ── Focus (a11y) ────────────────────────────────────────────────────────── */
.mlv-swatch:focus-visible {
	outline: 2px solid #0073aa;
	outline-offset: 3px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
	.mlv-swatch {
		width: 24px;
		height: 24px;
	}
}

/* ── Dwukolorowy swatch (diagonal split) ─────────────────────────────────── */
/* Gradient ustawiany inline (linear-gradient w style="").                    */
/* overflow:hidden zapewnia ze gradient nie wychodzi poza border-radius.      */
.mlv-swatch--dual {
	overflow: hidden;
}