/*
 * 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);

	--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-topheader-bg: #111111;
	--cyber-topheader-color: #ffffff;
	--cyber-topheader-font-size: 14px;

	--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-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;
	}
}

/* --- 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);
	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;
}

.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);
}

/*
 * 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 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

/*
 * 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: 16px;
	height: 16px;
}

.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).
 */
.cyber-topheader :is(span, a) {
	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).
 */
.cyber-wc-missing,
.cyber-section-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.
 *
 * border-radius: 0 jest wartoscia domyslna, nie decyzja projektowa — projekt
 * nie ma jeszcze ustalonego promienia zaokraglenia i nie wymyslamy dla niego
 * pola na zapas (patrz docs/acf-schema.md).
 */

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

.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 i .cyber-footer-link nie maja jeszcze zastosowania
 * w markupie — stopka nie ma tytulow kolumn ani linkow tekstowych. Sa gotowe
 * pod zawartosc kolumn 2 i 3 (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);
}

.cyber-footer__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}

.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;
}

.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(2, 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);
}

.cyber-breadcrumb__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

/*
 * 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 {
	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. W naszym markupie niesie aria-current,
 * ale WooCommerce takiego atrybutu nie dodaje — dlatego selektor opiera sie
 * na pozycji, ktora jest prawdziwa w obu przypadkach.
 */
.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;
}

/* --- 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;
}