/* Długość smyczy: wiersz w liście opcji (pod kolorem), w stylu etykiet wariantów – bez ramki. */
.z-length { width: 100%; max-width: 420px; }
.z-length__label {
	display: block;
	margin-bottom: 10px;
	font-family: var(--f-mono, 'Barlow', system-ui, sans-serif);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.z-length__value { font: inherit; color: var(--c-orange-text, #C2361A); }
.z-length__control { display: flex; align-items: flex-start; gap: 10px; }
.z-length__track { flex: 1; min-width: 0; }
.z-length .z-length__step {
	flex: none;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 2px solid var(--c-black, #040809);
	border-radius: 0;
	background: var(--c-snow, #FFFBFC);
	color: var(--c-black, #040809);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}
.z-length .z-length__step:hover { background: var(--c-yellow, #FFF94F); }
.z-length__range {
	display: block;
	width: 100%;
	height: 32px;
	margin: 0;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
	--z-fill: 0%;
}
.z-length__range::-webkit-slider-runnable-track {
	height: 6px;
	background: linear-gradient(to right, var(--c-orange, #EF4923) var(--z-fill), var(--c-line, #E6E0E1) var(--z-fill));
}
.z-length__range::-moz-range-track { height: 6px; background: var(--c-line, #E6E0E1); }
.z-length__range::-moz-range-progress { height: 6px; background: var(--c-orange, #EF4923); }
.z-length__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	margin-top: -7px;
	background: var(--c-black, #040809);
	border: 3px solid var(--c-snow, #FFFBFC);
	box-shadow: 0 0 0 2px var(--c-black, #040809);
	cursor: grab;
}
.z-length__range::-moz-range-thumb {
	width: 16px;
	height: 16px;
	background: var(--c-black, #040809);
	border: 3px solid var(--c-snow, #FFFBFC);
	border-radius: 0;
	box-shadow: 0 0 0 2px var(--c-black, #040809);
	cursor: grab;
}
.z-length__range:focus-visible { outline: 3px solid var(--c-orange, #EF4923); outline-offset: 2px; }
.z-length__scale { display: flex; justify-content: space-between; margin-top: 2px; font-size: 12px; color: var(--c-text-3, #5B6164); }