/* === NAGŁÓWEK: pasek kontaktowy, logo, menu, koszyk === */

.pasek-gorny {
	background: var(--petrol-ciemny);
	color: #b9d2dc;
	font-size: 0.85rem;
}
.pasek-gorny .kontener {
	display: flex;
	gap: 22px;
	align-items: center;
	justify-content: space-between;
	padding-top: 8px;
	padding-bottom: 8px;
	flex-wrap: wrap;
}
.pasek-gorny a { color: var(--biel); font-weight: 600; }
.pasek-gorny a:hover { color: var(--akcent); }
.pasek-gorny .nota { letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.74rem; color: #8fb4c2; }

.naglowek {
	position: sticky;
	top: 0;
	background: var(--biel);
	border-bottom: 1px solid var(--linia);
	z-index: 50;
	box-shadow: var(--cien);
}
.naglowek .kontener {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 74px;
}

.logo {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--petrol-ciemny);
}
.logo:hover { color: var(--petrol); }
.logo .znak {
	width: 44px; height: 44px; flex: 0 0 44px;
	border-radius: 12px;
	background: var(--petrol);
	display: grid; place-items: center;
}
.logo .znak svg { width: 24px; height: 24px; }
.logo .napis { font-size: 1.45rem; font-weight: 800; letter-spacing: 0.04em; line-height: 1.1; }
.logo-obraz { width: 173px; height: auto; flex: 0 0 auto; }
.logo-obraz.naglowek { width: 160px; }
.logo .podpis { font-size: 0.72rem; color: var(--tekst-2); letter-spacing: 0.08em; text-transform: uppercase; }

.menu-glowne ul { display: flex; gap: 6px; list-style: none; }
.menu-glowne a {
	display: block;
	padding: 10px 14px;
	border-radius: 8px;
	font-weight: 600;
	color: var(--tekst);
	font-size: 0.97rem;
}
.menu-glowne a:hover { background: var(--akcent-jasny); color: var(--petrol); }
.menu-glowne .aktualne a { color: var(--petrol); background: var(--akcent-jasny); }

.koszyk-link {
	position: relative;
	display: flex; align-items: center; gap: 8px;
	padding: 10px 14px;
	border: 1px solid var(--linia);
	border-radius: var(--promien);
	font-weight: 700;
}
.koszyk-link:hover { border-color: var(--akcent); background: var(--akcent-jasny); }
.koszyk-link .licznik {
	min-width: 22px; height: 22px;
	border-radius: 11px;
	background: var(--akcent);
	color: var(--biel);
	font-size: 0.78rem;
	display: grid; place-items: center;
	padding: 0 5px;
}
.koszyk-link svg { width: 20px; height: 20px; }

.przycisk-menu {
	display: none;
	background: none;
	border: 2px solid var(--petrol);
	border-radius: 8px;
	width: 44px; height: 44px;
	cursor: pointer;
}
.przycisk-menu svg { width: 22px; height: 22px; stroke: var(--petrol); }

@media (max-width: 900px) {
	.przycisk-menu { display: block; }
	.menu-glowne {
		position: absolute;
		left: 0; right: 0; top: 100%;
		background: var(--biel);
		border-bottom: 1px solid var(--linia);
		box-shadow: var(--cien-mocny);
		/* Płynne rozwijanie: ukryte przez maksymalną wysokość i przezroczystość */
		visibility: hidden;
		opacity: 0;
		max-height: 0;
		overflow: hidden;
		transform: translateY(-8px);
		transition: opacity 0.25s ease, transform 0.25s ease, max-height 0.3s ease, visibility 0.3s;
	}
	.menu-glowne.otwarte {
		visibility: visible;
		opacity: 1;
		max-height: 70vh;
		overflow-y: auto;
		transform: translateY(0);
	}
	.menu-glowne ul { flex-direction: column; gap: 0; padding: 10px 20px 16px; }
	.menu-glowne a { padding: 13px 10px; border-bottom: 1px solid var(--linia); border-radius: 0; }
	.pasek-gorny .nota { display: none; }

	/* Kompaktowy nagłówek po przewinięciu: mniejszy, nadal czytelny */
	.naglowek { transition: box-shadow 0.25s ease; }
	.naglowek.skurczony .logo-obraz { width: 120px; }
	.naglowek.skurczony .kontener { min-height: 56px; }
	.naglowek.skurczony .podpis { display: none; }
	.naglowek.skurczony .koszyk-link { padding: 6px 10px; }
}

/* Sticky nie zasłania treści przy kotwicach (uzupełnienie scroll-padding-top w baza.css) */
.naglowek { will-change: box-shadow; }