/*
 * Cyber Framework — arkusz bazowy.
 *
 * UWAGA: wartosci zmiennych ponizej to STATYCZNE wartosci domyslne, zgodne
 * z docs/acf-schema.md. Sluza jako warstwa awaryjna — na froncie nadpisuje je
 * inline <style id="cyber-global-vars"> wypisywany w wp_head na podstawie
 * Global Options (cyber_print_inline_css() w inc/enqueue.php). Ten arkusz
 * laduje sie wczesniej, wiec przy tej samej specyficznosci :root wygrywaja
 * wartosci z panelu.
 */

:root {
	--cyber-width-100: 100%;
	--cyber-width-80: 1500px;
	--cyber-width-60: 1150px;
	--cyber-container-width: 1500px;
	--cyber-container-margin: 40px;

	/*
	 * Skala odstepow (CLAUDE.md sekcja 6). Zamknieta lista wartosci, z ktorej
	 * korzystaja WSZYSTKIE marginesy i paddingi w projekcie. W odroznieniu od
	 * reszty tego bloku NIE sa to wartosci domyslne nadpisywane z panelu —
	 * skala jest stala i nie ma pol ACF. Stad miejsce tutaj, w arkuszu
	 * ladowanym na kazdej podstronie: modul kolejkowany warunkowo nie moze
	 * definiowac zmiennych, po ktore siega ktokolwiek poza nim.
	 */
	--cyber-space-1: 6px;
	--cyber-space-2: 12px;
	--cyber-space-3: 24px;
	--cyber-space-4: 36px;
	--cyber-space-5: 48px;
	--cyber-space-6: 64px;
	--cyber-space-7: 94px;

	/*
	 * Odstepy naglowkow h1-h6 w tresci edytora (.cyber-wysiwyg). Tak jak skala
	 * odstepow nie maja pol w panelu — zmienia sie je tutaj, w arkuszu.
	 */
	--cyber-wysiwyg-heading-mt: 0;
	--cyber-wysiwyg-heading-mb: var(--cyber-space-2);

	/*
	 * Odstep miedzy literami naglowkow h1-h6. Wartosc STALA: nie ma pola
	 * w panelu i nie skaluje sie na breakpointach (CLAUDE.md sekcja 19 —
	 * letter-spacing zaklasyfikowany jako stale, tak jak font-weight).
	 */
	--cyber-heading-letter-spacing: 1px;

	--cyber-font-family-headings: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--cyber-font-family-text: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	--cyber-font-weight-headings: 700;
	--cyber-font-weight-overtitle: 600;
	--cyber-font-weight-text: 400;
	--cyber-font-weight-links: 400;

	--cyber-font-size-h1: 48px;
	--cyber-font-size-h2: 40px;
	--cyber-font-size-h3: 32px;
	--cyber-font-size-h4: 26px;
	--cyber-font-size-h5: 22px;
	--cyber-font-size-h6: 18px;
	--cyber-font-size-overtitle-1: 16px;
	--cyber-font-size-overtitle-2: 14px;
	--cyber-font-size-text: 16px;
	--cyber-font-size-links: 16px;

	--cyber-header-bg: #ffffff;
	--cyber-header-padding-top: 24px;
	--cyber-header-padding-bottom: 24px;
	--cyber-header-menu-gap: 32px;
	--cyber-header-menu-link-padding: 8px;
	--cyber-header-menu-font-size: 16px;
	--cyber-header-menu-font-weight: 500;
	--cyber-header-menu-color: #1a1a1a;
	--cyber-header-menu-color-hover: #0057ff;
	--cyber-header-menu-color-active: #0057ff;

	--cyber-header-submenu-gap: 0px;
	--cyber-header-submenu-link-padding: 10px;
	--cyber-header-submenu-font-size: 15px;
	--cyber-header-submenu-font-weight: 400;
	--cyber-header-submenu-color: #1a1a1a;
	--cyber-header-submenu-color-hover: #0057ff;
	--cyber-header-submenu-color-active: #0057ff;

	--cyber-btn-large-padding-y: 18px;
	--cyber-btn-large-padding-x: 40px;
	--cyber-btn-large-font-size: 18px;
	--cyber-btn-large-font-weight: 600;
	--cyber-btn-large-color: #ffffff;
	--cyber-btn-large-color-hover: #ffffff;
	--cyber-btn-large-bg-color: #0057ff;
	--cyber-btn-large-bg-color-hover: #0041c2;

	--cyber-btn-medium-padding-y: 14px;
	--cyber-btn-medium-padding-x: 32px;
	--cyber-btn-medium-font-size: 16px;
	--cyber-btn-medium-font-weight: 600;
	--cyber-btn-medium-color: #ffffff;
	--cyber-btn-medium-color-hover: #ffffff;
	--cyber-btn-medium-bg-color: #0057ff;
	--cyber-btn-medium-bg-color-hover: #0041c2;

	--cyber-btn-small-padding-y: 10px;
	--cyber-btn-small-padding-x: 24px;
	--cyber-btn-small-font-size: 14px;
	--cyber-btn-small-font-weight: 600;
	--cyber-btn-small-color: #ffffff;
	--cyber-btn-small-color-hover: #ffffff;
	--cyber-btn-small-bg-color: #0057ff;
	--cyber-btn-small-bg-color-hover: #0041c2;

	--cyber-color-headings: #111111;
	--cyber-color-text: #333333;
	--cyber-color-overtitle-1: #0057ff;
	--cyber-color-overtitle-2: #666666;
	--cyber-color-links: #0057ff;
	--cyber-color-icons: #0057ff;

	--cyber-color-hover: #0041c2;
	--cyber-color-border-1: #e0e0e0;
	--cyber-color-border-2: #0057ff;
	--cyber-color-shadow: rgba(0, 0, 0, 0.12);
	--cyber-color-shadow-hover: rgba(0, 0, 0, 0.2);

	--cyber-radius: 0px;

	--cyber-topheader-bg: #111111;
	--cyber-topheader-color: #ffffff;
	--cyber-topheader-font-size: 14px;
	--cyber-topheader-lang-active: #0057ff;

	--cyber-footer-bg: #ffffff;
	--cyber-footer-title-font-size: 20px;
	--cyber-footer-title-color: #111111;
	--cyber-footer-text-font-size: 16px;
	--cyber-footer-text-color: #333333;
	--cyber-footer-link-font-size: 16px;
	--cyber-footer-link-color: #0057ff;

	--cyber-copyright-bg: #111111;
	--cyber-copyright-text-color: #ffffff;
	--cyber-copyright-link-color: #ffffff;
	--cyber-copyright-text-font-size: 14px;
	--cyber-copyright-link-font-size: 14px;

	--cyber-breadcrumb-font-size: 14px;
	--cyber-breadcrumb-color: #666666;
	--cyber-breadcrumb-color-active: #111111;

	--cyber-breadcrumb-wc-font-size: 14px;
	--cyber-breadcrumb-wc-color: #666666;
	--cyber-breadcrumb-wc-color-active: #111111;

	--cyber-wc-color-main: #d32f2f;
	--cyber-wc-bg: #ffffff;
	--cyber-wc-box-bg: #f7f7f7;
	--cyber-product-col-image: 40%;
	--cyber-product-col-summary: 60%;
	--cyber-product-media-height: 500px;
	--cyber-product-thumb-height: 158px;

	/*
	 * Ponizsze NIE maja pola ACF — to swiadome decyzje motywu, nie konfiguracja.
	 * Zeby staly sie edytowalne, trzeba dodac pola (patrz docs/acf-schema.md).
	 */
	--cyber-header-logo-max-height: 60px;
	--cyber-header-submenu-background: #fff;
	--cyber-header-submenu-min-width: 200px;
}

@media (max-width: 980px) {
	:root {
		--cyber-container-margin: 30px;
	}
}

@media (max-width: 767px) {
	:root {
		--cyber-container-margin: 30px;
	}
}

@media (max-width: 479px) {
	:root {
		--cyber-container-margin: 20px;
	}
}

/* --- Przewijanie do kotwic -------------------------------------------------- */

/*
 * Plynne przewijanie po kliknieciu w odnosnik do kotwicy (#kursy) i odstep od
 * gory rowny wysokosci przyklejonego headera — bez niego cel laduje POD
 * headerem. --cyber-header-height ustawia assets/js/header.js (tylko przy
 * przyklejonym headerze; inaczej 0px), pasek administratora doklada swoja
 * zmienna z admin-bar.css, tak jak przy pozycji samego headera.
 *
 * Przy ograniczeniu animacji w systemie przewijanie jest natychmiastowe —
 * odstep od gory zostaje.
 */
html {
	scroll-behavior: smooth;
	/* + odstep ze skali, zeby cel nie przyklejal sie do krawedzi headera. */
	scroll-padding-top: calc(var(--cyber-header-height, 0px) + var(--wp-admin--admin-bar--height, 0px) + var(--cyber-space-3));
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* --- Reset minimalny ------------------------------------------------------ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--cyber-font-family-text);
	font-size: var(--cyber-font-size-text);
	font-weight: var(--cyber-font-weight-text);
	color: var(--cyber-color-text);
	line-height: 1.6;
}

img,
video {
	max-width: 100%;
	height: auto;
}

/* --- Typografia ----------------------------------------------------------- */

/*
 * Rozmiary, kroje i grubosci pochodza wylacznie ze zmiennych — konkretne wartosci sa
 * wypisywane inline w wp_head na podstawie zakladki "Ustawienia czcionki"
 * (cyber_font_css() w inc/enqueue.php). Tutaj nie ma zadnych liczb.
 */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--cyber-font-family-headings);
	font-weight: var(--cyber-font-weight-headings);
	letter-spacing: var(--cyber-heading-letter-spacing);
	color: var(--cyber-color-headings);
}

.cyber-overtitle,
.cyber-overtitle--secondary {
	font-family: var(--cyber-font-family-headings);
	font-weight: var(--cyber-font-weight-overtitle);
}

h1 { font-size: var(--cyber-font-size-h1); }
h2 { font-size: var(--cyber-font-size-h2); }
h3 { font-size: var(--cyber-font-size-h3); }
h4 { font-size: var(--cyber-font-size-h4); }
h5 { font-size: var(--cyber-font-size-h5); }
h6 { font-size: var(--cyber-font-size-h6); }

/*
 * Tresc edytora WYSIWYG — w sekcjach (nad i pod sekcja, kolumny, slajd)
 * i w tresci strony. Klase .cyber-wysiwyg niesie kazde opakowanie tresci
 * edytora, wiec odstepy naglowkow sa wszedzie takie same.
 */
.cyber-wysiwyg :is(h1, h2, h3, h4, h5, h6) {
	margin-top: var(--cyber-wysiwyg-heading-mt);
	margin-bottom: var(--cyber-wysiwyg-heading-mb);
}

/* Obrazek i ramka (mapa, film) nie moga wyjsc poza kolumne tresci. */
.cyber-wysiwyg img,
.cyber-wysiwyg iframe {
	max-width: 100%;
}

.cyber-wysiwyg img {
	height: auto;
}

/*
 * Klasy wyrownania obrazka z edytora WordPressa (przyciski "Wyrownaj" w oknie
 * obrazka TinyMCE dopisuja je do znacznika img). Rdzen ich nie styluje —
 * robi to motyw. Bez tych regul obrazek "wysrodkowany" w edytorze stal na
 * froncie przy lewej krawedzi. Odstepy przy oblewaniu tekstem ze skali.
 */
.cyber-wysiwyg .aligncenter {
	display: block;
	margin-inline: auto;
}

.cyber-wysiwyg .alignleft {
	float: left;
	margin: 0 var(--cyber-space-3) var(--cyber-space-2) 0;
}

.cyber-wysiwyg .alignright {
	float: right;
	margin: 0 0 var(--cyber-space-2) var(--cyber-space-3);
}

.cyber-overtitle {
	font-size: var(--cyber-font-size-overtitle-1);
	color: var(--cyber-color-overtitle-1);
}

.cyber-overtitle--secondary {
	font-size: var(--cyber-font-size-overtitle-2);
	color: var(--cyber-color-overtitle-2);
}

p,
span,
ul,
li {
	font-family: var(--cyber-font-family-text);
	font-size: var(--cyber-font-size-text);
	font-weight: var(--cyber-font-weight-text);
	color: var(--cyber-color-text);
}

/*
 * Pogrubienie z edytora obejmuje tez zagniezdzony span. TinyMCE zapisuje
 * kolorowy pogrubiony tekst jako <strong><span style="color:…">…</span></strong>,
 * a regula wyzej ustawia grubosc BEZPOSREDNIO na span — bez tego wyjatku
 * taki tekst tracil pogrubienie, bo wlasna regula tagu wygrywa z dziedziczeniem.
 */
:is(strong, b) span {
	font-weight: inherit;
}

/*
 * Selektor bazowy o najnizszej specyficznosci. Linki menu (.cyber-menu a)
 * i przyciski (.btn-*) maja wlasne, bardziej specyficzne reguly z modulow
 * Header i Przyciski — wygrywaja w kaskadzie bez zadnych wykluczen.
 */
a {
	font-family: var(--cyber-font-family-text);
	font-size: var(--cyber-font-size-links);
	font-weight: var(--cyber-font-weight-links);
	color: var(--cyber-color-links);
}

/*
 * Tekst i linki wewnatrz naglowkow dziedzicza rozmiar, kroj i grubosc naglowka.
 * Bez tej reguly <h1><a>...</a></h1> zmniejszylby sie do wielkosci i grubosci
 * linku, a <span> w naglowku do wartosci tekstu.
 */
h1 :is(a, span),
h2 :is(a, span),
h3 :is(a, span),
h4 :is(a, span),
h5 :is(a, span),
h6 :is(a, span),
.cyber-overtitle :is(a, span),
.cyber-overtitle--secondary :is(a, span) {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
}

/* --- Kontener ------------------------------------------------------------- */

.cyber-container {
	width: 100%;
	max-width: var(--cyber-container-width);
	margin-inline: auto;
	padding-inline: var(--cyber-container-margin);
}

/* --- Top Header ------------------------------------------------------------ */

/*
 * Cienki pasek nad naglowkiem. Z ACF pochodza wylacznie trzy wartosci: tlo,
 * kolor i rozmiar czcionki. Padding paska, odstep miedzy ikonami, ich rozmiar
 * i przezroczystosc na hover sa stale — to proporcje paska, nie konfiguracja.
 *
 * Ikony nie maja wlasnego koloru: SVG uzywa fill="currentColor", wiec dziedziczy
 * --cyber-topheader-color razem z tekstem.
 */

.cyber-topheader {
	padding-block: var(--cyber-space-1);
	background-color: var(--cyber-topheader-bg);
	color: var(--cyber-topheader-color);
	font-size: var(--cyber-topheader-font-size);
}

.cyber-topheader__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.cyber-topheader__contact,
.cyber-topheader__end {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

/*
 * Przelacznik jezykow (Polylang): kody jezykow rozdzielone ukosnikiem, biezacy
 * jezyk w kolorze z pola cyber_topheader_lang_active_color. Ukosnik jest
 * pseudo-elementem z pustym tekstem alternatywnym — czytnik go nie odczytuje,
 * a lista zachowuje poprawna liczbe pozycji.
 */
.cyber-topheader__lang {
	font-weight: 700;
}

.cyber-topheader__lang-list {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cyber-topheader__lang-item {
	display: flex;
	align-items: center;
	margin: 0;
}

.cyber-topheader__lang-item + .cyber-topheader__lang-item::before {
	content: "/";
	content: "/" / "";
	padding-inline: var(--cyber-space-1);
	font-weight: 400;
	opacity: 0.5;
}

/* (0,2,0) — przebija ".cyber-topheader :is(span, a, ul, li)" (0,1,1) nizej. */
.cyber-topheader .cyber-topheader__lang-link--current {
	color: var(--cyber-topheader-lang-active);
}

/*
 * Wspolny komponent ikon (template-parts/components/social-icons.php) niesie
 * klase .cyber-social-icons oraz klase kontekstu przekazana w argumencie.
 * Uklad jest wspolny, wiec definiujemy go raz na klasie bazowej.
 */
/*
 * Ikony SVG motywu (cyber_get_icon()). Ksztalty rysuja sie currentColor,
 * wiec kolor ustawiony na samym <svg> barwi wypelnienie i obrys naraz.
 * Kolor jednej ikony nadpisuje sie klasa z nazwa ikony, np.:
 *
 *   .cyber-icon--cart { color: #ff0000; }
 */
.cyber-icon {
	color: var(--cyber-color-icons);
}

.cyber-social-icons {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 12px;
}

/*
 * Rozmiar ikon nalezy do komponentu, nie do kontekstu. Wczesniej wymiary dawala
 * wylacznie regula ".cyber-topheader svg", wiec ikony w stopce zostawaly bez
 * szerokosci i wysokosci — <svg> ma tylko viewBox, bez atrybutow width/height.
 */
.cyber-social-icons svg {
	display: block;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}

.cyber-topheader svg {
	display: block;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

/*
 * Ikony paska biora kolor paska ("Kolor tekstu i ikon"), nie globalny kolor
 * ikon. Wspolna regula .cyber-icon { color: var(--cyber-color-icons) } ma
 * wlasna deklaracje, wiec bez tego wyjatku wygrywala z dziedziczeniem — przy
 * kolorze ikon rownym tlu paska ikony byly po prostu niewidoczne.
 */
.cyber-topheader .cyber-icon {
	color: inherit;
}

/*
 * Wyszukiwarka na pasku: biale pole i ciemniejszy kwadratowy przycisk z lupa.
 * Wysokosc i szerokosc pola to wymiary elementu, nie odstepy (sekcja 6).
 * Kolory przycisku z przycisku Small z zakladki Przyciski (tlo po najechaniu
 * jako tlo spoczynkowe — na pasku w kolorze marki zwykle tlo by sie zlalo).
 */
.cyber-topheader__search {
	display: flex;
	align-items: stretch;
	height: 36px;
}

.cyber-topheader__search-field {
	width: 180px;
	min-width: 0;
	padding: 0 var(--cyber-space-1);
	border: 0;
	border-radius: var(--cyber-radius) 0 0 var(--cyber-radius);
	background-color: #ffffff;
	color: var(--cyber-color-text);
	font: inherit;
	box-sizing: border-box;
}

.cyber-topheader__search-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	padding: 0;
	border: 0;
	border-radius: 0 var(--cyber-radius) var(--cyber-radius) 0;
	background-color: var(--cyber-btn-small-bg-color-hover);
	color: var(--cyber-btn-small-color);
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.cyber-topheader__search-submit:hover,
.cyber-topheader__search-submit:focus-visible {
	opacity: 0.8;
}

@media (max-width: 767px) {
	.cyber-topheader__search-field {
		width: 120px;
	}
}

.cyber-topheader a,
.cyber-topheader__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: inherit;
	font-size: inherit;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.cyber-topheader a:hover,
.cyber-topheader a:focus-visible {
	opacity: 0.7;
}

/*
 * Modul Typografii ustawia font-size, font-weight i color BEZPOSREDNIO na
 * selektorze span (regula "p, span, ul, li"), wiec <span> z tekstem telefonu
 * i emaila nie dziedziczyl wartosci z .cyber-topheader — dostawal rozmiar
 * i kolor tekstu tresci zamiast ustawien paska.
 *
 * Ta sama sytuacja co z linkami w naglowkach, patrz sekcja "Typografia".
 * Specyficznosc (0,1,1) przebija globalne (0,0,1). ul i li doszly razem
 * z przelacznikiem jezykow — ta sama regula Typografii trafia w liste.
 */
.cyber-topheader :is(span, a, ul, li) {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

/* --- Header Desktop -------------------------------------------------------- */

/*
 * Padding poziomy NIE jest tu ustawiany: header korzysta z tej samej klasy
 * .cyber-container co reszta strony, wiec dziedziczy --cyber-container-margin
 * i trzyma jedna linie z trescia na kazdym breakpoincie.
 */

.cyber-header {
	position: relative;
	background-color: var(--cyber-header-bg);
}

/*
 * Wariant: header przyklejony do gory ekranu. Wlacza go pole
 * cyber_header_sticky — to obecnosc reguly, a nie jej wartosc, wiec klasa
 * modyfikujaca zamiast zmiennej CSS (CLAUDE.md sekcja 20).
 *
 * Klasa jest PROSTOPADLA do wariantu ukladu (.cyber-header--default i kolejne)
 * i wystepuje obok niego, nie zamiast niego.
 *
 * top nie jest zerem: --wp-admin--admin-bar--height ustawia WordPress
 * w admin-bar.css (32px, a na waskich ekranach 46px). Fallback 0px obowiazuje
 * u wylogowanych, u ktorych ten arkusz sie nie laduje. Dzieki temu pasek
 * administratora nie wymaga wlasnego breakpointu — CLAUDE.md sekcja 18
 * zostaje nietknieta.
 *
 * z-index podnosi CALY header ponad tresc strony. Podmenu (10) i panel
 * mobilny (20) leza wewnatrz niego i stackuja sie w jego kontekscie, wiec
 * nie trzeba ich podbijac.
 *
 * UWAGA: przezroczyste tlo headera sprawia, ze przy przewijaniu tresc bedzie
 * widoczna pod nim. To dlatego cyber_header_bg_color istnieje jako pole.
 */
.cyber-header--sticky {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 30;
}

.cyber-header__inner {
	display: flex;
	align-items: center;
	gap: var(--cyber-header-menu-gap);
	padding-top: var(--cyber-header-padding-top);
	padding-bottom: var(--cyber-header-padding-bottom);
}

/*
 * margin-right: auto odpycha wszystko pozostale w prawo. Wczesniej robil to
 * margin-left: auto na hamburgerze, ale odkad istnieje slot akcji, hamburger
 * nie jest juz ostatnim elementem i musialby o to miejsce konkurowac.
 */
.cyber-header__brand {
	margin: 0 auto 0 0;
	flex-shrink: 0;
}

.cyber-header__logo {
	display: block;
	max-height: var(--cyber-header-logo-max-height);
	width: auto;
}

.cyber-header__nav {
	flex: 1;
	min-width: 0;
}

/*
 * Slot akcji po prawej stronie headera. Wnosza go warianty 'cta'
 * i 'woocommerce'; warianty 'default' i 'centered' nie renderuja go wcale,
 * wiec ta regula nie ma wtedy na czym zadzialac.
 *
 * Odstep miedzy elementami slotu jest staly — to proporcja komponentu,
 * nie konfiguracja.
 */
.cyber-header__actions {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 16px;
}

/* --- Header: warianty ukladu ----------------------------------------------- */

/*
 * Wariant 'centered': logo na srodku, menu pod nim. Zmienia wylacznie os
 * ukladu — wyrownanie samego menu nadal nalezy do pola Wyrownanie menu
 * (.cyber-menu--left/center/right), zeby zaden wariant nie unewaznial po cichu
 * istniejacego pola.
 *
 * Ponizej progu mobilnego blok generowany przez cyber_header_mobile_css()
 * przywraca uklad w rzedzie — kolumna z hamburgerem pod logo nie ma sensu.
 */
.cyber-header--centered .cyber-header__inner {
	flex-direction: column;
	align-items: center;
}

.cyber-header--centered .cyber-header__brand {
	margin: 0;
}

.cyber-header--centered .cyber-header__nav {
	flex: 0 1 auto;
	width: 100%;
}

/* --- Menu glowne ---------------------------------------------------------- */

.cyber-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cyber-header-menu-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cyber-menu--left {
	justify-content: flex-start;
}

.cyber-menu--center {
	justify-content: center;
}

.cyber-menu--right {
	justify-content: flex-end;
}

.cyber-menu li {
	position: relative;
}

.cyber-menu a {
	display: block;
	padding: var(--cyber-header-menu-link-padding);
	font-size: var(--cyber-header-menu-font-size);
	font-weight: var(--cyber-header-menu-font-weight);
	color: var(--cyber-header-menu-color);
	text-decoration: none;
}

.cyber-menu a:hover,
.cyber-menu a:focus-visible {
	color: var(--cyber-header-menu-color-hover);
}

.cyber-menu .current-menu-item > a,
.cyber-menu .current-menu-ancestor > a {
	color: var(--cyber-header-menu-color-active);
}

/*
 * Wskaznik rozwijalnego podmenu. Klasa .menu-item-has-children pochodzi z rdzenia
 * WordPressa — motyw nie wykrywa dzieci menu wlasnym kodem.
 *
 * Strzalka rysowana jest dwoma krawedziami zamiast znakiem z fontu: nie zalezy
 * od dostepnosci glifu w wybranym kroju. currentColor sprawia, ze dziedziczy
 * kolor kazdego stanu linku (domyslny, hover, aktywna strona) bez osobnego pola.
 *
 * Widocznoscia steruje modyfikator .cyber-menu--with-indicator nakladany w PHP
 * na podstawie pola cyber_header_submenu_indicator.
 */

.cyber-menu--with-indicator .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 0.4em;
	height: 0.4em;
	margin-left: 0.5em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
	transition: transform 0.2s ease;
}

/* --- Podmenu -------------------------------------------------------------- */

/*
 * Rozwijanie dziala na :hover ORAZ :focus-within — bez tego drugiego podmenu
 * byloby nieosiagalne z klawiatury (CLAUDE.md sekcja 11).
 */

.cyber-submenu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10;
	flex-direction: column;
	gap: var(--cyber-header-submenu-gap);
	min-width: var(--cyber-header-submenu-min-width);
	margin: 0;
	padding-block: var(--cyber-header-submenu-link-padding);
	padding-inline: 0;
	list-style: none;
	background: var(--cyber-header-submenu-background);
}

.cyber-menu li:hover > .cyber-submenu,
.cyber-menu li:focus-within > .cyber-submenu {
	display: flex;
}

.cyber-submenu--left {
	align-items: flex-start;
	text-align: left;
}

.cyber-submenu--center {
	align-items: center;
	text-align: center;
}

.cyber-submenu--right {
	align-items: flex-end;
	text-align: right;
}

.cyber-submenu li {
	width: 100%;
}

.cyber-submenu a {
	display: block;
	padding: var(--cyber-header-submenu-link-padding);
	font-size: var(--cyber-header-submenu-font-size);
	font-weight: var(--cyber-header-submenu-font-weight);
	color: var(--cyber-header-submenu-color);
	text-decoration: none;
}

.cyber-submenu a:hover,
.cyber-submenu a:focus-visible {
	color: var(--cyber-header-submenu-color-hover);
}

.cyber-submenu .current-menu-item > a {
	color: var(--cyber-header-submenu-color-active);
}

/* --- Header Mobile -------------------------------------------------------- */

/*
 * Prog przelaczania desktop/mobile pochodzi z pola ACF, wiec caly blok @media
 * generuje PHP (cyber_header_mobile_css() w inc/enqueue.php). Tutaj leza tylko
 * reguly niezalezne od progu: wyglad hamburgera i bazowe style panelu.
 *
 * Selektor .cyber-mobile-menu celowo NIE zawiera pozycjonowania — to zadanie
 * klasy modyfikujacej (.cyber-mobile-menu--dropdown). Dzieki temu dolozenie
 * wariantu wysuwanego z lewej lub prawej to nowa klasa obok istniejacej,
 * a nie przepisywanie komponentu (CLAUDE.md sekcja 20).
 */

.cyber-hamburger {
	/* Ukryty domyslnie; pokazuje go dopiero blok @media z progiem z panelu. */
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	padding: var(--cyber-header-menu-link-padding);
	border: 0;
	background: none;
	color: var(--cyber-header-menu-color);
	cursor: pointer;
}

.cyber-hamburger:hover,
.cyber-hamburger:focus-visible {
	color: var(--cyber-header-menu-color-hover);
}

.cyber-hamburger__bar {
	display: block;
	width: 24px;
	height: 2px;
	background: currentColor;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

/*
 * Stan otwarty: skrajne kreski jada do srodka i krzyzuja sie, srodkowa znika.
 * Przesuniecie o 7px wynika z geometrii przycisku — 3 kreski po 2px z gap 5px
 * daja 16px wysokosci, wiec srodek lezy 7px od kazdej skrajnej kreski.
 * Zmiana gap albo grubosci kresek wymaga przeliczenia tej wartosci.
 */

.cyber-hamburger--active .cyber-hamburger__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.cyber-hamburger--active .cyber-hamburger__bar:nth-child(2) {
	opacity: 0;
}

.cyber-hamburger--active .cyber-hamburger__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* --- Header: konto i koszyk WooCommerce ------------------------------------ */

/*
 * Wariant 'woocommerce'. Ikony dziedzicza kolory menu glownego, wiec nie maja
 * wlasnych pol — zmiana koloru linkow menu przestawia je razem z nim.
 *
 * Licznik korzysta z barw przycisku Medium (--cyber-btn-medium-*), tego samego,
 * ktory niesie przycisk CTA. Osobne pole na kolor plakietki byloby czwartym
 * miejscem, w ktorym trzeba pamietac o tej samej barwie akcentu.
 */

.cyber-wc-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: var(--cyber-header-menu-link-padding);
	color: var(--cyber-header-menu-color);
	text-decoration: none;
}

.cyber-wc-link:hover,
.cyber-wc-link:focus-visible {
	color: var(--cyber-header-menu-color-hover);
}

.cyber-wc-link svg {
	display: block;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
}

/*
 * Plakietka z liczba pozycji. Specyficznosc (0,1,0) przebija globalna regule
 * "p, span, ul, li" (0,0,1) z modulu Typografii, ktora inaczej narzucilaby
 * plakietce rozmiar i kolor tekstu tresci.
 */
.cyber-wc-count {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 18px;
	padding: 0 var(--cyber-space-1);
	border-radius: 9px;
	background-color: var(--cyber-btn-medium-bg-color);
	color: var(--cyber-btn-medium-color);
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

/*
 * Pusty koszyk: element ZOSTAJE w DOM, tylko sie nie wyswietla. Usuniecie go
 * odebraloby WooCommerce cel do podmiany fragmentem AJAX i licznik nie
 * pojawilby sie po dodaniu pierwszego produktu.
 */
.cyber-wc-count--empty {
	display: none;
}

/*
 * Podpowiedz widoczna WYLACZNIE dla zalogowanego administratora, gdy wariant
 * WooCommerce jest wybrany, a wtyczki nie ma. Gosc witryny nie dostaje niczego.
 * Ten sam wyglad ma podpowiedz o sekcji globalnej, ktora sie nie wyswietla
 * (template-parts/sections/global.php) i podpowiedz o przelaczniku jezykow
 * bez Polylang — ta ostatnia dziedziczy kolor i rozmiar paska Top Header.
 */
.cyber-wc-missing,
.cyber-section-missing,
.cyber-topheader__lang-missing {
	padding: var(--cyber-space-1);
	border: 1px dashed var(--cyber-color-border-1);
	color: var(--cyber-color-text);
	font-size: 12px;
	line-height: 1.3;
}

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

/*
 * .btn niesie wylacznie wlasciwosci strukturalne — te, ktorych ACF nie ustawia.
 * Wszystko, co konfigurowalne, przychodzi ze zmiennych rozmiaru.
 *
 * Zaokraglenie rogow bierze sie z wartosci globalnej: Global Options ->
 * Glowne ustawienia strony -> Zaokraglenie rogow (cyber_border_radius,
 * zmienna --cyber-radius). Przyciski nie maja wlasnego pola — to ta sama
 * wartosc, z ktorej korzystaja sekcje ustawione na "Z ustawien globalnych".
 */

.btn {
	display: inline-block;
	border: none;
	border-radius: var(--cyber-radius);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/*
 * Przycisk z ikona (argument 'icon' w cyber_button()). Ikona stoi przed
 * tekstem i bierze kolor tekstu przycisku, nie globalny kolor ikon — wspolna
 * regula .cyber-icon ma wlasna deklaracje koloru, stad jawne inherit.
 * Rozmiar ikony to wymiar elementu, nie odstep (CLAUDE.md sekcja 6).
 */
.btn--icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cyber-space-1);
}

.btn--icon .cyber-icon {
	flex: none;
	width: 22px;
	height: 22px;
	color: inherit;
}

.btn-large {
	padding: var(--cyber-btn-large-padding-y) var(--cyber-btn-large-padding-x);
	font-size: var(--cyber-btn-large-font-size);
	font-weight: var(--cyber-btn-large-font-weight);
	color: var(--cyber-btn-large-color);
	background-color: var(--cyber-btn-large-bg-color);
}

.btn-large:hover,
.btn-large:focus-visible {
	color: var(--cyber-btn-large-color-hover);
	background-color: var(--cyber-btn-large-bg-color-hover);
}

.btn-medium {
	padding: var(--cyber-btn-medium-padding-y) var(--cyber-btn-medium-padding-x);
	font-size: var(--cyber-btn-medium-font-size);
	font-weight: var(--cyber-btn-medium-font-weight);
	color: var(--cyber-btn-medium-color);
	background-color: var(--cyber-btn-medium-bg-color);
}

.btn-medium:hover,
.btn-medium:focus-visible {
	color: var(--cyber-btn-medium-color-hover);
	background-color: var(--cyber-btn-medium-bg-color-hover);
}

.btn-small {
	padding: var(--cyber-btn-small-padding-y) var(--cyber-btn-small-padding-x);
	font-size: var(--cyber-btn-small-font-size);
	font-weight: var(--cyber-btn-small-font-weight);
	color: var(--cyber-btn-small-color);
	background-color: var(--cyber-btn-small-bg-color);
}

.btn-small:hover,
.btn-small:focus-visible {
	color: var(--cyber-btn-small-color-hover);
	background-color: var(--cyber-btn-small-bg-color-hover);
}

/* --- Kolory narzedziowe (utility) ------------------------------------------ */

/*
 * Te klasy NIE aplikuja sie same. Nazwa kazdej z nich jest stala i zapisana
 * w kodzie — ACF ustawia wylacznie kolor. Zeby ich uzyc, trzeba dopisac klase
 * recznie do elementu w markupie (CLAUDE.md sekcja 5, dwa wzorce kolorow).
 *
 * Wartosci nie-kolorystyczne (grubosc i styl obramowania, offset i rozmycie
 * cienia) sa celowo stale — pole ACF steruje tylko barwa.
 */

.cyber-hover-color:hover,
.cyber-hover-color:focus-visible {
	color: var(--cyber-color-hover);
}

.cyber-border-1 {
	border: 1px solid var(--cyber-color-border-1);
}

.cyber-border-2 {
	border: 1px solid var(--cyber-color-border-2);
}

.cyber-shadow {
	box-shadow: 0 4px 12px var(--cyber-color-shadow);
}

.cyber-shadow-hover:hover,
.cyber-shadow-hover:focus-visible {
	box-shadow: 0 4px 12px var(--cyber-color-shadow-hover);
}

/* --- Footer ---------------------------------------------------------------- */

/*
 * Tlo stopki pochodzi z pola cyber_footer_bg_color (zakladka Footer, sekcja
 * "Stylizacja Footer") i trafia tutaj jako --cyber-footer-bg. Rozmiary i kolory
 * tekstu daja klasy narzedziowe ponizej, wiec stopka nie dziedziczy juz
 * kolorystyki z body.
 *
 * Odstepy siatki i podzial na breakpointach to na razie stale wartosci
 * (progi zgodne z CLAUDE.md sekcja 18).
 */

.cyber-footer {
	background-color: var(--cyber-footer-bg);
}

/*
 * Odstep pionowy siedzi tutaj, a nie na .cyber-footer. Pasek Copyright jest
 * teraz ostatnim dzieckiem <footer>, wiec padding dolny stopki wypadlby
 * PONIZEJ niego i zostawil pod paskiem pas tla stopki.
 */
.cyber-footer__main {
	padding-block: var(--cyber-space-5);
}

/*
 * Klasy narzedziowe stopki. Nazwy sa stale i zapisane w kodzie — ACF ustawia
 * wylacznie wartosci (CLAUDE.md sekcja 5, wzorzec narzedziowy).
 *
 * Ograniczenie do wnetrza .cyber-footer jest KONWENCJA, nie technika: nic nie
 * blokuje nalozenia tych klas gdzie indziej, ale nie po to powstaly.
 *
 * .cyber-footer-title niosa tytuly kolumn 2-4, .cyber-footer-link — telefon
 * i email; linki menu stopki biora te same zmienne (CLAUDE.md sekcja 22).
 */

.cyber-footer-title {
	font-size: var(--cyber-footer-title-font-size);
	color: var(--cyber-footer-title-color);
}

.cyber-footer-text {
	font-size: var(--cyber-footer-text-font-size);
	color: var(--cyber-footer-text-color);
}

/*
 * Tresc z WYSIWYG to znaczniki generowane przez wpautop, a modul Typografii
 * ustawia font-size i color BEZPOSREDNIO na selektorach p / span / ul / li,
 * wiec nie dziedzicza one wartosci z kontenera. Ta sama sytuacja co w pasku
 * Top Header — patrz sekcja "Top Header".
 */
.cyber-footer-text :is(p, span, ul, ol, li) {
	font-size: inherit;
	color: inherit;
}

.cyber-footer-link {
	font-size: var(--cyber-footer-link-font-size);
	color: var(--cyber-footer-link-color);
}

/*
 * Piec kolumn: logo i social media, dane kontaktowe, dane rejestrowe i dwa
 * menu. minmax(0, 1fr) zamiast 1fr — dlugi wyraz w menu (np. adres strony
 * w nazwie regulaminu) nie rozpycha wtedy swojej kolumny kosztem sasiednich.
 */
.cyber-footer__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 32px;
}

.cyber-footer__menu a {
	overflow-wrap: anywhere;
}

/*
 * Ikony social media pod logo sa wieksze niz na pasku Top Header (tam 20px):
 * w stopce stoja same, bez tekstu obok. Rozmiar to wymiar elementu, nie odstep.
 */
.cyber-footer__social {
	gap: var(--cyber-space-2);
}

.cyber-footer__social svg {
	width: 24px;
	height: 24px;
}

.cyber-footer__brand {
	margin: 0 0 var(--cyber-space-2);
}

.cyber-footer__logo {
	display: block;
	max-height: var(--cyber-header-logo-max-height);
	width: auto;
}

/*
 * Kolumny 2-4: tytul, linie danych kontaktowych i menu. Rozmiary i kolory
 * niosa klasy narzedziowe wyzej (pola zakladki Footer), tutaj tylko uklad.
 * Linia nad siatka oddziela stopke od tresci strony — barwa z zakladki Kolory.
 */
.cyber-footer__grid {
	padding-top: var(--cyber-space-4);
	border-top: 1px solid var(--cyber-color-border-1);
}

.cyber-footer__title {
	margin: 0 0 var(--cyber-space-2);
	font-weight: 700;
}

.cyber-footer__block + .cyber-footer__block {
	margin-top: var(--cyber-space-3);
}

.cyber-footer__line {
	margin: 0 0 var(--cyber-space-1);
}

.cyber-footer__menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cyber-footer__menu li {
	margin: 0 0 var(--cyber-space-2);
}

.cyber-footer-link,
.cyber-footer__menu a {
	font-size: var(--cyber-footer-link-font-size);
	color: var(--cyber-footer-link-color);
	text-decoration: none;
	transition: color 0.2s ease;
}

.cyber-footer__menu a {
	text-transform: uppercase;
}

.cyber-footer-link:hover,
.cyber-footer-link:focus-visible,
.cyber-footer__menu a:hover,
.cyber-footer__menu a:focus-visible {
	color: var(--cyber-color-hover);
	text-decoration: underline;
}

.cyber-footer__content > *:first-child {
	margin-top: 0;
}

.cyber-footer__content > *:last-child {
	margin-bottom: 0;
}

@media (max-width: 980px) {
	.cyber-footer__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.cyber-footer__grid {
		grid-template-columns: 1fr;
	}
}

/* --- Copyright ------------------------------------------------------------- */

/*
 * Strukturalnie ten sam pasek co Top Header: kontener, inner z flexem
 * i dwie strony (CLAUDE.md sekcja 16a). Padding i separator miedzy linkami
 * sa stale — to proporcje paska, nie konfiguracja.
 */

.cyber-copyright {
	padding-block: var(--cyber-space-2);
	background-color: var(--cyber-copyright-bg);
}

.cyber-copyright__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.cyber-copyright__text {
	font-size: var(--cyber-copyright-text-font-size);
	color: var(--cyber-copyright-text-color);
}

.cyber-copyright__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.cyber-copyright__links a {
	font-size: var(--cyber-copyright-link-font-size);
	color: var(--cyber-copyright-link-color);
	text-decoration: none;
}

.cyber-copyright__links a:hover,
.cyber-copyright__links a:focus-visible {
	text-decoration: underline;
}

/*
 * Separator miedzy linkami. Pseudoelement zamiast border-left na samym linku,
 * zeby kreska nie pojawila sie przy pierwszej pozycji ani po zawinieciu
 * do nowej linii nie wygladala jak wciecie.
 */
.cyber-copyright__links a + a::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 1em;
	margin-right: var(--cyber-space-2);
	vertical-align: -0.15em;
	background: currentColor;
	opacity: 0.4;
}

/* --- Breadcrumb ------------------------------------------------------------ */

/*
 * Waska belka pod headerem, nad trescia. Dwa warianty: .cyber-breadcrumb--default
 * poza sklepem i .cyber-breadcrumb--wc na stronach WooCommerce. Markup obu jest
 * IDENTYCZNY — sciezke sklepowa buduje WooCommerce, ale w naszych znacznikach
 * (argumenty wrap_before / before / after), wiec ten sam blok stylow obsluguje
 * oba przypadki.
 *
 * Padding pionowy i separator sa stale — to proporcje paska, nie konfiguracja,
 * tak samo jak w Top Header i Copyright. Z ACF pochodza wylacznie rozmiar
 * czcionki i dwa kolory.
 *
 * ZALOZENIE DO ZAKWESTIONOWANIA: dolna kreska. Modul nie ma pola tla, wiec bez
 * niej pasek nie odcina sie od tresci. Uzywa istniejacej zmiennej
 * --cyber-color-border-1 z modulu Kolory, zamiast wprowadzac wlasne pole.
 */

.cyber-breadcrumb {
	padding-block: var(--cyber-space-2);
	border-bottom: 1px solid var(--cyber-color-border-1);
	font-size: var(--cyber-breadcrumb-font-size);
	color: var(--cyber-breadcrumb-color);
}

.cyber-breadcrumb--wc {
	font-size: var(--cyber-breadcrumb-wc-font-size);
	color: var(--cyber-breadcrumb-wc-color);
}

/*
 * Okruszki to lista <ol> (wzorzec WAI-ARIA "Breadcrumb"), ale wygladaja jak
 * jeden wiersz tekstu: reset punktorow, marginesu i wciecia listy, uklad flex
 * jak wczesniej na <nav>.
 */
.cyber-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Specyficznosc (0,1,0) przebija globalna regule "p, span, ul, li" (0,0,1)
 * z modulu Typografii, ktora inaczej narzucilaby okruszkom rozmiar i kolor
 * tekstu tresci. Ta sama sytuacja co w pasku Top Header.
 */
.cyber-breadcrumb__item,
.cyber-breadcrumb__item a {
	margin: 0;
	padding: 0;
	font-size: inherit;
	color: inherit;
}

.cyber-breadcrumb__item a {
	text-decoration: none;
}

.cyber-breadcrumb__item a:hover,
.cyber-breadcrumb__item a:focus-visible {
	text-decoration: underline;
}

/*
 * Ostatni okruszek to strona biezaca. Oba warianty niosa aria-current="page"
 * (w sklepie dopisuje je szablon po WooCommerce), ale selektor zostaje na
 * pozycji — jest prawdziwa niezaleznie od tego, czy atrybut dotarl.
 */
.cyber-breadcrumb__item:last-child {
	color: var(--cyber-breadcrumb-color-active);
}

.cyber-breadcrumb--wc .cyber-breadcrumb__item:last-child {
	color: var(--cyber-breadcrumb-wc-color-active);
}

/*
 * Separator jako pseudoelement, nie znak w markupie — tak samo jak w pasku
 * Copyright. Znak wpisany w tresc bylby czytany przez czytniki ekranu.
 */
.cyber-breadcrumb__item + .cyber-breadcrumb__item::before {
	content: "/";
	margin-inline: var(--cyber-space-1);
	color: var(--cyber-breadcrumb-color);
	opacity: 0.6;
}

/* --- Tlo stron sklepu ---------------------------------------------------- */

/*
 * Global Options -> WooCommerce -> Tlo stron sklepu (--cyber-wc-bg).
 * Klase woocommerce-page WooCommerce nadaje <body> na wszystkich swoich
 * widokach: sklep i kategorie, produkt, koszyk, zamowienie, konto. Page header
 * i stopka maja wlasne tla, bo leza poza <main>.
 */
.woocommerce-page .cyber-main {
	background-color: var(--cyber-wc-bg);
}

/* --- Dostepnosc ----------------------------------------------------------- */

.cyber-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 0.75rem 1rem;
	background: #000;
	color: #fff;
}

.cyber-skip-link:focus {
	left: 0;
}

:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

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