/*
 * FlowNav — mega menu, drawer mobilny i nawigacja listingu.
 *
 * Krój pisma DZIEDZICZYMY po motywie (flowrolls.pl używa „Sen”). Makieta była złożona
 * w Quicksandzie, ale dociąganie kolejnego webfontu na sklepie, który walczy o budżet
 * zasobów, kosztowałoby więcej, niż daje. Reszta tokenów jest z makiety co do wartości.
 */

.flownav {
	--fn-ink: #111;
	--fn-muted: #555;
	--fn-dim: #8a8a8a;
	--fn-faint: #9a9a9a;
	--fn-count: #b5b5b5;
	--fn-line: #ececec;
	--fn-line-soft: #f0f0f0;
	--fn-border: #e7e7e7;
	--fn-bg: #fff;
	--fn-bg-soft: #fbfbfb;
	--fn-accent: #e74c3c;
	--fn-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
	--fn-radius: 12px;

	position: relative;
	font-family: inherit;
	color: var(--fn-ink);
}

.flownav *,
.flownav-side * { box-sizing: border-box; }

.flownav a { color: inherit; text-decoration: none; }

/* Focus widoczny zawsze — bez tego menu jest nieobsługiwalne z klawiatury. */
.flownav :focus-visible,
.flownav-side :focus-visible {
	outline: 2px solid var(--fn-ink);
	outline-offset: 2px;
	border-radius: 4px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	clip-path: inset(50%);
	overflow: hidden; white-space: nowrap;
}

/* ---------- belka ---------- */

.flownav__bar { display: block; }

.flownav__items {
	display: flex;
	align-items: center;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.flownav__item { position: static; }

.flownav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 0;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--fn-muted);
	border-bottom: 2px solid transparent;
	transition: color .12s ease;
}

.flownav__link:hover,
.flownav__link[aria-expanded="true"] {
	color: var(--fn-ink);
}

.flownav__link[aria-expanded="true"] {
	font-weight: 800;
	border-bottom-color: var(--fn-ink);
}

.flownav__chevron { transition: transform .15s ease; }
.flownav__link[aria-expanded="true"] .flownav__chevron { transform: rotate(180deg); }

.flownav__item--flat .flownav__link {
	font-weight: 800;
	color: var(--flownav-accent, var(--fn-accent));
	gap: 7px;
}

.flownav__dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: currentColor;
}

/* ---------- panel ---------- */

.flownav__panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 90;
	background: var(--fn-bg);
	border-radius: var(--fn-radius);
	box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
	border: 1px solid var(--fn-line-soft);
	overflow: hidden;
}

.flownav__panel[hidden] { display: none; }

/* Desktop z JS: panel przypięty do okna, wyśrodkowany, szeroki jak treść sklepu — nie jak
   kolumna nagłówka, w której siedzi belka. Górną krawędź ustawia JS (--fn-panel-top). */
@media (min-width: 1025px) {
	.flownav--js .flownav__panel {
		position: fixed;
		top: var(--fn-panel-top, 96px);
		left: 50%;
		right: auto;
		transform: translateX(-50%);
		width: min(1200px, calc(100vw - 32px));
		max-height: calc(100vh - var(--fn-panel-top, 96px) - 16px);
		overflow: auto;
	}
}

.flownav__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 38px;
	padding: 30px 40px 24px;
}

.flownav__block { min-width: 0; }

/* Ostatnia kolumna panelu odcięta linią — jak w makiecie. */
.flownav__block--feature {
	border-left: 1px solid var(--fn-line);
	padding-left: 32px;
}

.flownav__block-head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding-bottom: 11px;
	border-bottom: 1px solid var(--fn-line);
	margin-bottom: 13px;
}

.flownav__block--feature .flownav__block-head { border-bottom: 0; margin-bottom: 4px; }

.flownav__block-title {
	font-family: var(--fn-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .13em;
	color: var(--fn-faint);
}

.flownav__all {
	margin-left: auto;
	font-size: 11px;
	font-weight: 800;
	white-space: nowrap;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.flownav__links {
	display: flex;
	flex-direction: column;
	gap: 11px;
	margin: 0; padding: 0;
	list-style: none;
}

.flownav__links a {
	display: flex;
	align-items: baseline;
	gap: 7px;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.25;
}

.flownav__links a:hover { text-decoration: underline; text-underline-offset: 3px; }

.flownav__count {
	font-size: 10.5px;
	font-weight: 600;
	color: var(--fn-count);
}

/* Licznik przy pozycji belki ma sens tylko w drawerze — desktop pokazuje go dopiero w panelu. */
.flownav__link .flownav__count { display: none; }

.flownav__note {
	margin: 12px 0 0;
	font-size: 11px;
	line-height: 1.55;
	color: var(--fn-dim);
}

/* ---------- karty marek ---------- */

.flownav__cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 9px;
}

.flownav__card {
	border: 1px solid var(--fn-border);
	border-radius: 10px;
	padding: 12px 15px;
	transition: border-color .12s ease;
}

.flownav__card:hover { border-color: var(--fn-ink); }

.flownav__card-name { display: block; font-size: 13px; font-weight: 800; }
.flownav__card-note { display: block; margin-top: 2px; font-size: 10.5px; color: var(--fn-dim); }

/* ---------- chipy ---------- */

.flownav__chips {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
	gap: 8px;
}

.flownav__chip {
	position: relative;
	border: 1px solid var(--fn-border);
	border-radius: 10px;
	padding: 11px 13px;
	transition: border-color .12s ease;
}

.flownav__chip:hover { border-color: var(--fn-ink); }

.flownav__chip-label { display: block; font-size: 14px; font-weight: 800; }
.flownav__chip-meta { display: block; margin-top: 2px; font-size: 10.5px; color: var(--fn-dim); }
.flownav__chip-meta del { opacity: .55; margin-right: 3px; }
.flownav__chip-meta ins { text-decoration: none; }

.flownav__badge {
	display: inline-block;
	margin-top: 5px;
	font-family: var(--fn-mono);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--fn-faint);
}

/* ---------- produkty polecane + promocja ---------- */

.flownav__feature { display: flex; flex-direction: column; gap: 2px; }

.flownav__product {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
}

.flownav__product:hover .flownav__product-name { text-decoration: underline; text-underline-offset: 3px; }

.flownav__thumb {
	width: 46px; height: 46px;
	flex: none;
	border-radius: 9px;
	border: 1px solid var(--fn-line-soft);
	object-fit: cover;
	background: #fafafa;
}

.flownav__thumb--empty {
	background: repeating-linear-gradient(45deg, #f5f5f5 0 8px, #ececec 8px 16px);
}

.flownav__product-text { flex: 1; min-width: 0; }
.flownav__product-name { display: block; font-size: 12.5px; font-weight: 700; }
.flownav__product-price { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 800; }
.flownav__product-price del { font-weight: 600; opacity: .5; margin-right: 4px; }
.flownav__product-price ins { text-decoration: none; }

.flownav__promo {
	margin-top: 12px;
	padding: 16px 18px;
	border-radius: var(--fn-radius);
	background: #fff7e8;
	color: #5c3d00;
}

.flownav__promo-kicker {
	display: block;
	font-family: var(--fn-mono);
	font-size: 9px; font-weight: 700;
	letter-spacing: .13em;
	color: #b26a00;
}

.flownav__promo-title { display: block; margin-top: 6px; font-size: 15px; font-weight: 800; }
.flownav__promo-sub { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.55; color: #7a5200; }
.flownav__promo-cta { display: inline-block; margin-top: 10px; font-size: 11px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- pasek zaufania ---------- */

.flownav__trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 36px;
	padding: 14px 40px;
	border-top: 1px solid var(--fn-line-soft);
	background: var(--fn-bg-soft);
}

.flownav__claim { font-size: 11.5px; font-weight: 700; color: #444; }
.flownav__trust-link { margin-left: auto; font-size: 11.5px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- mobile: belka STAJE SIĘ drawerem ---------- */

/*
 * Na desktopie te elementy nie istnieją wizualnie, ale są w HTML — dzięki temu
 * mobile nie potrzebuje drugiego renderu tej samej nawigacji.
 */
.flownav__burger,
.flownav__scrim,
.flownav__drawer-head,
.flownav__search,
.flownav__back,
.flownav__all-row,
.flownav__caret { display: none; }

@media (max-width: 1024px) {

	/*
	 * Bez JS belka zostaje zwykłą, widoczną listą kategorii — sześć działających linków.
	 * Drawer (i hamburger) włącza dopiero klasa dokładana przez skrypt.
	 */
	.flownav__items { flex-direction: column; align-items: stretch; gap: 0; }

	.flownav__link {
		display: flex;
		width: 100%;
		min-height: 56px;
		padding: 8px 0;
		border-bottom: 1px solid #f2f2f2;
		font-size: 14.5px;
		font-weight: 800;
		color: var(--fn-ink);
	}

	.flownav__link .flownav__label { flex: 1; min-width: 0; }
	.flownav__link .flownav__count { display: inline; margin-right: 10px; font-size: 11px; }
	.flownav__chevron { display: none; }
	.flownav__caret { display: inline-block; flex: none; }

	.flownav__link[aria-expanded="true"] { border-bottom-color: #f2f2f2; }

	.flownav--js .flownav__burger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px; height: 44px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--fn-ink);
		cursor: pointer;
	}

	.flownav--js .flownav__scrim {
		position: fixed;
		inset: 0;
		z-index: 998;
		border: 0;
		background: rgba(0, 0, 0, .35);
	}

	.flownav--js .flownav__scrim:not([hidden]) { display: block; }

	.flownav--js .flownav__bar {
		position: fixed;
		inset: 0 12% 0 0;
		z-index: 999;
		display: none;
		max-width: 390px;
		background: var(--fn-bg);
		box-shadow: 0 0 60px rgba(0, 0, 0, .3);
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	.flownav--js.is-open .flownav__bar { display: block; }

	.flownav--js .flownav__drawer-head {
		position: sticky;
		top: 0;
		z-index: 2;
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 14px 8px 14px 18px;
		border-bottom: 1px solid var(--fn-line-soft);
		background: var(--fn-bg);
	}

	.flownav__drawer-title { font-size: 15px; font-weight: 800; }

	.flownav__close {
		margin-left: auto;
		width: 44px; height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border: 0;
		background: none;
		color: var(--fn-ink);
		cursor: pointer;
	}

	.flownav--js .flownav__search {
		display: flex;
		align-items: center;
		gap: 10px;
		height: 48px;
		margin: 14px 16px 4px;
		padding: 0 15px;
		border: 1.5px solid #dcdcdc;
		border-radius: 11px;
		color: #888;
	}

	.flownav__search input[type="search"] {
		flex: 1;
		min-width: 0;
		padding: 0;
		border: 0;
		font: inherit;
		font-size: 13.5px;
		color: var(--fn-ink);
		background: none;
		outline: none;
	}

	.flownav__items { padding: 0 16px 28px; }

	/* Panel = drugi poziom drill-downu: przykrywa listę, jeden ekran naraz. */
	.flownav--js .flownav__panel {
		position: fixed;
		inset: 0 12% 0 0;
		z-index: 1000;
		max-width: 390px;
		padding: 14px 16px 28px;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.flownav--js .flownav__back {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		min-height: 44px;
		padding: 0;
		border: 0;
		background: none;
		font: inherit;
		font-size: 13px;
		font-weight: 700;
		color: var(--fn-muted);
		cursor: pointer;
	}

	.flownav--js .flownav__all-row {
		display: flex;
		align-items: center;
		min-height: 56px;
		border-bottom: 1px solid var(--fn-line);
		font-size: 14.5px;
		font-weight: 800;
	}

	/* Siatka paneli spłaszcza się do listy — kolumny nie mają sensu na 390 px. */
	.flownav__grid {
		grid-template-columns: 1fr !important;
		gap: 0;
		padding: 0;
	}

	.flownav__block--feature { border-left: 0; padding-left: 0; }

	/* Bestsellery i pasek zaufania zostają na desktopie: w drawerze liczy się droga do półki. */
	.flownav__block--feature,
	.flownav__trust { display: none; }

	.flownav__block-head {
		margin: 20px 0 0;
		padding-bottom: 6px;
		border-bottom: 0;
	}

	.flownav__links { gap: 0; }

	.flownav__links a,
	.flownav__card,
	.flownav__chip {
		display: flex;
		align-items: center;
		gap: 10px;
		min-height: 56px;
		padding: 8px 0;
		border: 0;
		border-bottom: 1px solid #f2f2f2;
		border-radius: 0;
		font-size: 14.5px;
		font-weight: 800;
	}

	.flownav__cards,
	.flownav__chips { display: block; }

	.flownav__card-name,
	.flownav__chip-label { flex: 1; font-size: 14.5px; font-weight: 800; }

	.flownav__card-note,
	.flownav__chip-meta {
		margin-top: 0;
		font-size: 11.5px;
		font-weight: 600;
		color: var(--fn-count);
		text-align: right;
	}

	.flownav__badge { margin-top: 0; margin-left: 8px; }

	.flownav__item--flat .flownav__link { color: var(--flownav-accent, var(--fn-accent)); }
}

/* Zablokuj tło pod otwartym drawerem, żeby scroll nie „przeciekał”. */
body.flownav-open { overflow: hidden; }

/* ---------- listing: drzewko i filtry (1e / 1f) ---------- */

.flownav-side {
	--fn-ink: #111;
	--fn-count: #b5b5b5;
	--fn-line: #ececec;
	font-family: inherit;
	color: var(--fn-ink);
}

.flownav-side__toggle { display: none; }

.flownav-side__title {
	margin: 0 0 12px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: #9a9a9a;
}

.flownav-side__panel + .flownav-side__panel { margin-top: 26px; }

.flownav-side__tree,
.flownav-side__kids { margin: 0; padding: 0; list-style: none; }

.flownav-side__branch > a {
	display: flex;
	align-items: baseline;
	gap: 7px;
	padding: 9px 0;
	font-size: 13.5px;
	font-weight: 700;
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid #f4f4f4;
}

.flownav-side__branch.is-open > a { font-weight: 800; }

.flownav-side__kids {
	padding: 6px 0 10px 12px;
	border-left: 2px solid var(--fn-line);
	margin-left: 2px;
}

.flownav-side__kids a {
	display: flex;
	align-items: baseline;
	gap: 7px;
	padding: 6px 0;
	font-size: 13px;
	font-weight: 600;
	color: #444;
	text-decoration: none;
}

.flownav-side__kids .is-current > a {
	font-weight: 800;
	color: var(--fn-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.flownav-side__count { font-size: 10.5px; font-weight: 600; color: var(--fn-count); }

.flownav-side__filters { display: flex; flex-direction: column; gap: 10px; }

.flownav-side__check {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.flownav-side__check input { width: 17px; height: 17px; accent-color: #111; }

.flownav-side__price { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.flownav-side__legend { width: 100%; font-size: 11px; font-weight: 700; color: #9a9a9a; }

.flownav-side__price input {
	width: 84px;
	height: 38px;
	padding: 0 10px;
	border: 1px solid #dcdcdc;
	border-radius: 9px;
	font: inherit;
	font-size: 13px;
}

.flownav-side__apply {
	margin-top: 4px;
	min-height: 46px;
	border: 0;
	border-radius: 10px;
	background: #111;
	color: #fff;
	font: inherit;
	font-size: 13px;
	font-weight: 800;
	cursor: pointer;
}

.flownav-side__clear {
	align-self: flex-start;
	font-size: 11.5px;
	font-weight: 700;
	color: #777;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.flownav-side__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 17px; height: 17px;
	padding: 0 4px;
	border-radius: 99px;
	background: #111;
	color: #fff;
	font-size: 10px;
	font-weight: 800;
}

/*
 * Mobile: kategorie i filtry idą NAD produkty, w przyklejony pasek.
 * Dziś ten box stoi pod paginacją — po piętnastu stronach akcesoriów.
 */
@media (max-width: 1024px) {
	.flownav-side {
		position: sticky;
		top: 0;
		z-index: 60;
		display: flex;
		gap: 8px;
		padding: 10px 0;
		background: #fff;
		border-bottom: 1px solid var(--fn-line);
	}

	.flownav-side__toggle {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		min-height: 42px;
		padding: 0 16px;
		border: 1px solid #dcdcdc;
		border-radius: 99px;
		background: #fff;
		font: inherit;
		font-size: 13px;
		font-weight: 700;
		cursor: pointer;
	}

	.flownav-side__toggle[aria-expanded="true"] { border-color: #111; }

	/* Arkusz z dołu — nie accordion pod stroną. */
	.flownav-side__panel {
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: 999;
		max-height: 78vh;
		margin: 0;
		padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
		border-radius: 18px 18px 0 0;
		background: #fff;
		box-shadow: 0 -14px 50px rgba(0, 0, 0, .22);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.flownav-side__panel[hidden] { display: none; }
	.flownav-side__panel + .flownav-side__panel { margin-top: 0; }

	.flownav-side__branch > a,
	.flownav-side__kids a { min-height: 48px; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
	.flownav *, .flownav-side * { transition: none !important; }
}

/* Filtr po atrybucie (Typ) — fieldset bez ramki, radio w tym samym rytmie co checkboxy. */
.flownav-side__attr{border:0;padding:0;margin:0 0 10px;min-width:0}
.flownav-side__attr .flownav-side__legend{display:block;margin:6px 0 4px}
.flownav-side__attr input[type=radio]{margin-right:6px}

/* Astra i Elementor stylują każdy <button> globalnie (obramowanie, padding, pigułka, kolor tła),
   więc burger i zamknięcie zapadni dostawały wygląd przycisku formularza — na telefonie ikona X
   ginęła w białej pigułce z czarną ramką (zrzut z produkcji 11.09). Reguły z !important, bo
   walczymy z arkuszem motywu ładowanym po naszym. */
.flownav .flownav__burger,
.flownav .flownav__close {
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
	line-height: 1 !important;
	color: var(--fn-ink) !important;
	text-transform: none !important;
}
.flownav .flownav__close { margin-left: auto !important; }
.flownav .flownav__burger svg,
.flownav .flownav__close svg { display: block; stroke: currentColor; fill: none; width: 22px; height: 22px; }

/* Astra i Elementor nadają h2/legend własny rozmiar i krój (zrzut z produkcji 11.09: „KATEGORIE"
   jako duży, szeroko rozstrzelony nagłówek). Nagłówki panelu to etykiety, nie tytuły sekcji —
   pilnujemy tego z wyższą specyficznością niż arkusz motywu. */
.flownav-side h2.flownav-side__title,
.flownav-side .flownav-side__title,
.flownav-side .flownav-side__legend {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	letter-spacing: .13em !important;
	text-transform: uppercase !important;
	color: #9a9a9a !important;
	margin: 0 0 12px !important;
	padding: 0 !important;
}
.flownav-side .flownav-side__legend { font-size: 11px !important; margin: 6px 0 4px !important; }
.flownav-side a, .flownav-side label, .flownav-side li { font-family: inherit !important; }