/* FL Katalog — Linije na stranici brenda / linije (FLK_Linije_Front). Tokeni ACSS / FL, okrugli množitelji. */

.fl-linije {
	display: grid;
	gap: var(--space-xs);
	margin-block-start: var(--space-s);
	min-inline-size: 0;
}

.fl-linije__title {
	margin: 0;
	font-size: var(--text-s);
	font-weight: 600;
}

.fl-linije__grupe {
	display: grid;
	gap: var(--space-xs);
	min-inline-size: 0;
}

.fl-linije__grupa {
	display: grid;
	gap: calc(var(--space-xs) * 0.5);
	min-inline-size: 0;
}

.fl-linije__skupina {
	margin: 0;
	color: var(--text-dark-muted);
	font-size: var(--text-xs);
}

/* Mobitel: jedan red po skupini, pomiče se prstom. */
.fl-linije__lista {
	display: flex;
	gap: calc(var(--space-xs) * 0.5);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
}

.fl-linije__lista::-webkit-scrollbar {
	display: none;
}

.fl-linije__lista > li {
	flex: none;
	margin: 0;
	scroll-snap-align: start;
}

.fl-linije__chip {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--space-xs) * 0.4);
	min-block-size: var(--fl-tap);
	padding: 0 var(--space-s);
	background-color: var(--white);
	border: var(--border-width) var(--border-style) var(--border-color-dark);
	border-radius: var(--radius);
	color: var(--base);
	font-size: var(--text-s);
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	touch-action: manipulation;
	transition: border-color var(--transition-duration) var(--transition-timing);
}

.fl-linije__chip:hover {
	border-color: var(--base);
}

.fl-linije__chip:focus-visible {
	outline: var(--focus-width) solid var(--base);
	outline-offset: var(--focus-offset);
}

.fl-linije__chip[aria-current="page"] {
	background-color: var(--base);
	border-color: var(--base);
	color: var(--white);
}

.fl-linije__chip--sve {
	font-weight: 400;
}

/* Šire: skupine jedna ispod druge, linije se prelamaju. */
@media (min-width: 768px) {
	.fl-linije__lista {
		flex-wrap: wrap;
		overflow: visible;
	}
}

/* Broj proizvoda u liniji — isti izgled kao broj na čipovima kategorija (Brendovi). */
.fl-linije__broj {
	font-weight: 400;
	opacity: 0.7;
}