/* Pasek sekcji na telefonie (baba-kotwice.js) — wygląd jak pasek sekcji
   karty produktu (.baba-prod__nav w baba-katalog). */

.baba-belka {
	display: none;
}

@media (max-width: 767px) {
	.baba-belka {
		position: fixed;
		z-index: 8999;
		/* `top` ustawia skrypt, mierząc dolną krawędź przyklejonego nagłówka. */
		top: 0;
		right: 0;
		left: 0;
		display: flex;
		gap: 6px;
		overflow-x: auto;
		overflow-y: hidden;
		padding: 8px 12px;
		border-bottom: 1px solid #ece7f2;
		background: #fff;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
		visibility: hidden;
		transform: translateY(-100%);
		transition: transform 0.22s ease, visibility 0s linear 0.22s;
		white-space: nowrap;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.baba-belka::-webkit-scrollbar {
		display: none;
	}

	.baba-belka.is-widoczna {
		visibility: visible;
		transform: none;
		transition: transform 0.22s ease;
	}

	/* Pary ze stanami: kit Elementora maluje linki na :hover/:focus po swojemu. */
	.baba-belka .baba-belka__item,
	.baba-belka .baba-belka__item:hover,
	.baba-belka .baba-belka__item:focus {
		flex: 0 0 auto;
		padding: 7px 14px;
		border-radius: 999px;
		background: transparent;
		color: #545E69;
		font-family: Poppins, sans-serif;
		font-size: 13px;
		font-weight: 600;
		letter-spacing: 0;
		line-height: 1.2;
		text-decoration: none;
		text-transform: none;
	}

	.baba-belka .baba-belka__item[aria-current="true"] {
		background: #995BB3;
		color: #fff;
	}
}