/* =========================================================================
 * G4U — NAGŁÓWEK, MENU, PANEL, STOPKA
 *
 * Odwzorowanie nawigacji witryny centrali. Zbudowane wyłącznie na tokenach.
 * Nagłówek przechodzi w tryb mobilny przy 1280 px — tak samo jak oryginał.
 * ========================================================================= */

/* --- Nagłówek ------------------------------------------------------------ */

.g4u-header {
	position: sticky;
	top: 0;
	z-index: 900;
	background-color: var(--g4u-bg);
	border-bottom: 1px solid var(--g4u-border);
}

/* Układ oddziałowy (1:1 ze screenu produkcji): logo z lewej, menu z prawej,
   na końcu koszyk. Wcześniejszy układ centrali (menu-logo-panel) zastąpiony
   w 0.12.4 na życzenie klienta. */
.g4u-header__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--g4u-gap);
	padding: var(--g4u-header-pad-y) var(--g4u-header-pad-x);
}

.g4u-header__side {
	display: flex;
	align-items: center;
	min-width: 0;
}

.g4u-header__side--end { justify-content: flex-end; gap: var(--g4u-space-medium); }

.g4u-header__brand { flex-shrink: 0; }

/* --- Logo ---------------------------------------------------------------- */

.g4u-logo {
	display: inline-flex;
	align-items: center;
	color: var(--g4u-heading);
	text-decoration: none;
}

.g4u-logo__image {
	max-height: var(--g4u-logo-height);
	width: auto;
}

.g4u-logo__text {
	font-family: var(--g4u-font-heading);
	font-size: 20px;
	font-weight: var(--g4u-weight-bold);
	letter-spacing: -.01em;
}

/* --- Menu poziome -------------------------------------------------------- */

.g4u-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.g4u-nav__list a {
	position: relative;
	display: inline-block;
	padding: var(--g4u-menu-item-pad);
	color: var(--g4u-menu-color);
	font-family: var(--g4u-font-ui);
	font-size: var(--g4u-menu-size);
	font-weight: var(--g4u-menu-weight);
	line-height: 1.5;
	text-decoration: none;
}

/* Podkreślenie wyjeżdżające od lewej — efekt „zoom line" z oryginału. */
.g4u-nav__list a::after {
	content: "";
	position: absolute;
	left: var(--g4u-menu-item-pad);
	right: var(--g4u-menu-item-pad);
	bottom: .35em;
	height: 1px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--g4u-dur-icon) var(--g4u-ease-out);
}

.g4u-nav__list a:hover,
.g4u-nav__list a:focus-visible,
.g4u-nav__list .current-menu-item > a {
	color: var(--g4u-menu-hover);
}

.g4u-nav__list a:hover::after,
.g4u-nav__list a:focus-visible::after,
.g4u-nav__list .current-menu-item > a::after {
	transform: scaleX(1);
}

/* --- Przyciski ikonowe --------------------------------------------------- */

.g4u-burger,
.g4u-panel-toggle,
.g4u-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--g4u-radius);
	background: none;
	color: var(--g4u-heading);
	cursor: pointer;
}

.g4u-burger:hover,
.g4u-panel-toggle:hover,
.g4u-close:hover { color: var(--g4u-accent); }

/* Ikony są rysowanymi SVG (inc/icons.php) — dziedziczą kolor i grubość kreski. */
.g4u-icon { display: block; }

/* --- Koszyk w nagłówku -----------------------------------------------------
 * Torba z licznikiem na końcu nagłówka — jak na produkcyjnych stronach
 * oddziałów. Okrągła plakietka to świadome odstępstwo od zerowych
 * zaokrągleń: wierność 1:1 produkcji (screen klienta, 0.12.4).
 */
.g4u-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--g4u-heading);
	transition: color var(--g4u-transition);
}

.g4u-cart:hover,
.g4u-cart:focus-visible { color: var(--g4u-accent); }

.g4u-cart__count {
	position: absolute;
	right: 1px;
	bottom: 3px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--g4u-accent);
	color: var(--g4u-on-accent);
	font-family: var(--g4u-font-ui);
	font-size: 11px;
	font-weight: var(--g4u-weight-strong);
	line-height: 1;
	letter-spacing: 0;
	border-radius: 50%;
	font-variant-numeric: tabular-nums;
}

.g4u-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--g4u-radius);
	background: none;
	color: var(--g4u-heading);
	cursor: pointer;
}

.g4u-burger:hover,
.g4u-panel-toggle:hover,
.g4u-close:hover { color: var(--g4u-accent); }

/* Hamburger i ikona panelu rysowane cieniami — bez plików graficznych. */
.g4u-burger__bars,
.g4u-burger__bars::before,
.g4u-burger__bars::after,
.g4u-panel-toggle__bars,
.g4u-panel-toggle__bars::before,
.g4u-panel-toggle__bars::after {
	display: block;
	height: 2px;
	background-color: currentColor;
	transition: background-color var(--g4u-transition);
}

.g4u-burger__bars { position: relative; width: 22px; }
.g4u-burger__bars::before,
.g4u-burger__bars::after { content: ""; position: absolute; left: 0; width: 100%; }
.g4u-burger__bars::before { top: -7px; }
.g4u-burger__bars::after  { top: 7px; }

/* Ikona panelu: krótka, średnia, długa — jak w oryginale. */
.g4u-panel-toggle__bars { position: relative; width: 22px; }
.g4u-panel-toggle__bars::before,
.g4u-panel-toggle__bars::after { content: ""; position: absolute; right: 0; }
.g4u-panel-toggle__bars::before { top: -7px; width: 14px; }
.g4u-panel-toggle__bars::after  { top: 7px;  width: 18px; }

.g4u-close {
}

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

/* Hamburger pojawia się dopiero w trybie mobilnym. */
.g4u-burger { display: none; }

@media (max-width: 1279px) {
	.g4u-header__row { padding: 15px var(--g4u-container-pad); }

	.g4u-nav { display: none; }
	.g4u-burger { display: inline-flex; }
	.g4u-logo__image { max-height: var(--g4u-logo-height-sm); }
}

@media (max-width: 767px) {
	.g4u-header__row { padding: 10px var(--g4u-container-pad); }
}

/* --- Menu pełnoekranowe --------------------------------------------------- */

.g4u-mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	background-color: var(--g4u-bg-alt);
	color: var(--g4u-text);
	overflow-y: auto;
}

/* Warstwa zostaje w drzewie, żeby dało się ją animować. Wychodzi szybciej,
   niż wchodzi — powrót nie powinien kazać na siebie czekać. */
.g4u-mobile-menu {
	visibility: hidden;
	opacity: 0;
	transition: opacity var(--g4u-dur-exit) var(--g4u-ease-out), visibility 0s linear var(--g4u-dur-exit);
}

.g4u-mobile-menu.is-open {
	visibility: visible;
	opacity: 1;
	transition: opacity var(--g4u-dur-enter) var(--g4u-ease-out), visibility 0s;
}

.g4u-mobile-menu__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px var(--g4u-container-pad);
	border-bottom: 1px solid var(--g4u-border);
}

.g4u-mobile-menu__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	padding: 40px var(--g4u-container-pad);
}

.g4u-mobile-menu__list {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.g4u-mobile-menu__list a {
	display: inline-block;
	padding: 10px 0;
	color: var(--g4u-text);
	font-family: var(--g4u-font-ui);
	font-size: var(--g4u-mobile-menu-size);
	font-weight: var(--g4u-weight-body);
	letter-spacing: var(--g4u-mobile-menu-tracking);
	line-height: 1.5;
	text-decoration: none;
}

.g4u-mobile-menu__list a:hover,
.g4u-mobile-menu__list a:focus-visible { color: var(--g4u-accent); }

/* --- Panel kontaktowy ----------------------------------------------------- */

.g4u-panel-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background-color: var(--g4u-overlay);
}

.g4u-panel-overlay {
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--g4u-dur-exit) linear, visibility 0s linear var(--g4u-dur-exit);
}

.g4u-panel-overlay.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--g4u-dur-enter) linear, visibility 0s;
}

.g4u-panel {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1001;
	width: var(--g4u-panel-width);
	max-width: 100%;
	height: 100%;
	padding: var(--g4u-panel-pad);
	background-color: var(--g4u-bg-alt);
	color: var(--g4u-text);
	overflow-y: auto;
}

.g4u-panel {
	transform: translateX(100%);
	visibility: hidden;
	transition: transform var(--g4u-dur-panel-exit) var(--g4u-ease-out), visibility 0s linear var(--g4u-dur-panel-exit);
}

.g4u-panel.is-open {
	transform: none;
	visibility: visible;
	transition: transform var(--g4u-dur-panel-enter) var(--g4u-ease-out), visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
	.g4u-panel { transform: none; }
}

.g4u-panel .g4u-close {
	position: absolute;
	top: 12px;
	right: 12px;
}

.g4u-panel__title {
	margin: 0 0 var(--g4u-space-small);
	font-size: var(--g4u-h6-size);
	line-height: var(--g4u-h6-lh);
	font-weight: var(--g4u-weight-strong);
}

.g4u-panel__links,
.g4u-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.g4u-panel__links a,
.g4u-footer__links a {
	display: inline-block;
	padding: 6px 0;
	color: var(--g4u-text);
	font-size: var(--g4u-text-size);
	text-decoration: none;
}

.g4u-panel__links a:hover,
.g4u-panel__links a:focus-visible,
.g4u-footer__links a:hover,
.g4u-footer__links a:focus-visible { color: var(--g4u-accent); }

.g4u-panel__contact {
	margin-top: var(--g4u-space-large);
	padding-top: var(--g4u-space-small);
	border-top: 1px solid var(--g4u-border);
}

.g4u-panel__phone {
	margin: 0 0 6px;
	font-family: var(--g4u-font-heading);
	font-size: var(--g4u-h5-size);
	font-weight: var(--g4u-weight-strong);
}

.g4u-panel__phone a,
.g4u-panel__email a { color: var(--g4u-heading); text-decoration: none; }

.g4u-panel__phone a:hover,
.g4u-panel__email a:hover { color: var(--g4u-accent); }

.g4u-panel__email { margin: 0; }

body.g4u-locked { overflow: hidden; }

/* --- Stopka --------------------------------------------------------------- */

.g4u-footer {
	padding-top: var(--g4u-sec-gap);
	padding-bottom: var(--g4u-space-medium);
	background-color: var(--g4u-bg);
	color: var(--g4u-text);
}

/* Stopka domyka dokument tą samą linią, którą otwiera się każda sekcja. */
.g4u-footer > .g4u-container { border-top: 1px solid var(--g4u-border); padding-top: var(--g4u-sec-gap); }
.g4u-footer { padding-top: 0; }

.g4u-footer__title {
	margin: 0 0 var(--g4u-space-tiny);
	font-size: var(--g4u-h6-size);
	line-height: var(--g4u-h6-lh);
	font-weight: var(--g4u-weight-strong);
}

.g4u-footer__rule {
	margin: var(--g4u-space-medium) 0 var(--g4u-space-small);
	border: 0;
	border-top: 1px solid var(--g4u-border);
}

.g4u-footer__copy {
	margin: 0;
	color: var(--g4u-footer-copy);
	font-size: var(--g4u-footer-copy-size);
	text-align: center;
}

.g4u-footer__copy a { color: inherit; text-decoration: underline; }
.g4u-footer__copy a:hover { color: var(--g4u-accent); }

@media (max-width: 767px) {
	.g4u-footer__copy { font-size: 15px; line-height: 1.4; }
}

/* =========================================================================
 * STOPKA — układ wzorowany na Garden i Parker: identyfikacja podmiotu po lewej,
 * odnośniki po prawej, pas prawny pod włosową linią.
 * ========================================================================= */

.g4u-footer__top {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--g4u-space-medium);
	padding-bottom: var(--g4u-space-medium);
}

@media (min-width: 900px) {
	.g4u-footer__top {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--g4u-space-large);
	}
}

.g4u-footer__brand {
	margin: 0 0 var(--g4u-space-tiny);
	color: var(--g4u-heading);
	font-family: var(--g4u-font-heading);
	font-size: var(--g4u-h5-size);
	font-weight: var(--g4u-weight-bold);
	letter-spacing: -.02em;
	line-height: 1.1;
}

.g4u-footer__city {
	color: var(--g4u-text-muted);
	font-weight: var(--g4u-weight-strong);
}

.g4u-footer__entity,
.g4u-footer__contact {
	margin: 0 0 .4rem;
	color: var(--g4u-text-muted);
	font-size: var(--g4u-meta-size);
	line-height: 1.6;
}

.g4u-footer__contact {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--g4u-space-small);
}

.g4u-footer__contact a { color: var(--g4u-text); text-decoration: none; }
.g4u-footer__contact a:hover { color: var(--g4u-accent); }

.g4u-footer__nav .g4u-eyebrow { margin-bottom: var(--g4u-space-small); }

/* Etykieta kolumny odnośników. Bez własnej reguły brał globalny styl `h2`,
   czyli 47 px — nagłówek dwa razy większy od nazwy podmiotu obok i większy
   od wszystkiego innego w stopce. To etykieta kolumny, nie nagłówek sekcji,
   więc siada w rejestrze stopki: rozmiar h6, waga podpisu, margines z rytmu. */
.g4u-footer__nav-title {
	margin: 0 0 var(--g4u-space-small);
	color: var(--g4u-heading);
	font-family: var(--g4u-font-heading);
	font-size: var(--g4u-h6-size);
	font-weight: var(--g4u-weight-strong);
	letter-spacing: -.01em;
	line-height: 1.2;
}

.g4u-footer__links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 0 var(--g4u-space-medium);
	margin: 0;
	padding: 0;
	list-style: none;
}

.g4u-footer__links a {
	display: inline-block;
	padding: .3rem 0;
	color: var(--g4u-text-muted);
	font-size: var(--g4u-meta-size);
	text-decoration: none;
}

.g4u-footer__links a:hover,
.g4u-footer__links a:focus-visible { color: var(--g4u-accent); }

.g4u-footer__legal {
	padding-top: var(--g4u-space-small);
	border-top: 1px solid var(--g4u-border);
}

.g4u-footer__copy {
	margin: 0;
	color: var(--g4u-text-muted);
	font-family: var(--g4u-font-ui);
	font-size: 11px;
	letter-spacing: .1em;
	line-height: 1.6;
	text-align: left;
	text-transform: uppercase;
}

.g4u-footer__copy a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--g4u-border); }
.g4u-footer__copy a:hover { color: var(--g4u-heading); }