/*
Theme Name: Dargleb
Theme URI:
Author: Gogler
Description: Motyw strony dargleb.pl - ziemia ogrodnicza, torf, podłoża i kora od producenta z Podlasia.
Version: 0.3.0
Requires at least: 6.3
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: dargleb-theme
*/

/* ═══════════════════════════════════════════════════════════════════════════
   Design v1 „Skala pH” (docs/design.md, zaakceptowany 2026-11-03): torf + świerk z logo + kiełek z animacji,
   chłodne tła (biel, mgła), wielobarwna jest WYŁĄCZNIE skala pH. Zilla Slab (nagłówki - liternictwo z worków),
   IBM Plex Sans (tekst), IBM Plex Mono (każda liczba z karty produktu i etykiety sekcji).
   Nazwy tokenów startera (--c-*, --t-*, --s-*) zostają - używa ich cały motyw; zmieniły się wartości.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ 0. FONTY (lokalnie, przycięte do znaków strony - cms/narzedzia/fonty.mjs, licencje OFL obok plików) ═══ */
@font-face { font-family: "Zilla Slab"; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/zilla-slab-600-pl.woff2) format("woff2"); }
@font-face { font-family: "Zilla Slab"; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/zilla-slab-700-pl.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(assets/fonts/ibm-plex-sans-pl.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/ibm-plex-mono-500-pl.woff2) format("woff2"); }

:root {
	/* Paleta marki (docs/design.md) */
	--torf: #211915;          /* ciemne sekcje, stopka, tło pod hero, nagłówki - biały 17,3:1 */
	--torf-2: #2E241E;        /* podniesione elementy na ciemnym */
	--swierk: #1D5A44;        /* przyciski, linki, etykiety, pas zamówień - 8,1:1 na bieli */
	--swierk-ciemny: #154534; /* hover */
	--kielek: #8CBF3F;        /* tylko na ciemnym tle: etykiety, punktory, fokus - 7,9:1 na torfie */
	--bordo: #6E1F26;         /* wyłącznie znak w logo */
	--mgla: #EEF2EC;          /* co druga sekcja */
	/* Skala pH - barwy papierka wskaźnikowego co 0,5 (pH 3,0-7,0). Jedyne wielobarwne miejsce strony. */
	--ph-30: #D9472B; --ph-35: #E86A2C; --ph-40: #F0932F; --ph-45: #F2B53A;
	--ph-50: #E9CF45; --ph-55: #BFD14A; --ph-60: #8DBE4B; --ph-65: #5FA84E;
	--ph-gradient: linear-gradient(90deg, var(--ph-30) 0 12.5%, var(--ph-35) 12.5% 25%, var(--ph-40) 25% 37.5%, var(--ph-45) 37.5% 50%, var(--ph-50) 50% 62.5%, var(--ph-55) 62.5% 75%, var(--ph-60) 75% 87.5%, var(--ph-65) 87.5% 100%);

	/* Role kolorów startera */
	--c-tekst: var(--torf);          /* nagłówki */
	--c-tekst-tresc: #2B2622;        /* tekst ciągły - 15,0:1 */
	--c-tekst-slaby: #5D6159;        /* podpisy, etykiety - 6,3:1 na bieli, 5,6:1 na mgle */
	--c-tekst-bardzo-slaby: #5D6159;
	--c-tlo: #ffffff;
	--c-tlo-alt: var(--mgla);
	--c-biel: #ffffff;
	--c-linia: #D5DDD2;
	--c-linia-ciemna: rgb(255 255 255 / 0.12);
	--c-akcent: var(--swierk);
	--c-akcent-tekst: #ffffff;
	--c-akcent-tekst-kontrast: var(--swierk-ciemny);
	--c-akcent-przycisk: var(--swierk);
	--c-ciemne-tlo: var(--torf);
	--c-ciemne-tekst: #E7E1D8;
	--c-ciemne-tekst-slaby: #BDB5AA;  /* 8,6:1 na torfie */

	/* Typografia */
	--font-display: "Zilla Slab", Georgia, "Times New Roman", serif;
	--font-tekst: "IBM Plex Sans", system-ui, "Segoe UI", Roboto, sans-serif;
	--font-dane: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
	--font-utility: var(--font-tekst);

	--t-xs: 0.8125rem;
	--t-s: 0.9375rem;
	--t-m: 1.0625rem;                                  /* tekst ciągły */
	--t-l: 1.125rem;
	--t-xl: clamp(1.9rem, 1.2rem + 2.6vw, 2.9rem);     /* H2 */
	--t-xxl: clamp(2.2rem, 1.3rem + 3.4vw, 3.4rem);    /* H1 podstron */
	--t-hero: clamp(2.4rem, 1.2rem + 4.6vw, 4.1rem);   /* H1 strony głównej */
	--t-etykieta: 0.78rem;

	--interlinia: 1.65;
	--tracking-display: -0.005em;
	--tracking-utility: 0.08em;
	--waga-naglowkow: 700;

	--ikona-grubosc: 1.75;
	--ikona-rozmiar: 1.15em;

	--s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem;
	--s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-16: 4rem; --s-24: 6rem;
	--rytm-sekcji: clamp(4rem, 8vw, 7rem);

	--szerokosc-kontenera: 1290px;
	--szerokosc-waska: 860px;
	--margines-boczny: clamp(1.25rem, 4vw, 2.5rem);
	--promien: 4px;
	--promien-karta: 6px;
	--promien-pole: 4px;
	--wys-naglowka: 84px;
	--cien-karta: 0 10px 30px rgb(33 25 21 / 0.08);
}

/* ═══ 1. BAZA ═════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
	margin: 0; background: var(--c-tlo); color: var(--c-tekst-tresc);
	font: 400 var(--t-m) / var(--interlinia) var(--font-tekst);
	-webkit-font-smoothing: antialiased;
}
img, picture, svg, iframe, video { max-width: 100%; }
img { height: auto; display: block; }

h1, h2, h3, h4 {
	font-family: var(--font-display); font-weight: var(--waga-naglowkow);
	line-height: 1.08; color: var(--c-tekst); margin: 0 0 0.5em;
	letter-spacing: var(--tracking-display); text-wrap: balance;
}
h1 { font-size: var(--t-xxl); line-height: 1.04; }
h2 { font-size: var(--t-xl); }
h3 { font-size: 1.3rem; font-weight: 600; line-height: 1.2; }
h4 { font-size: var(--t-l); font-weight: 600; line-height: 1.25; }
p, ul, ol, dl { margin: 0 0 1em; }
p { text-wrap: pretty; }
a { color: var(--swierk); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--swierk-ciemny); text-decoration-thickness: 2px; }
strong, b { font-weight: 600; }
address { font-style: normal; }

/* Fokus klawiatury: kiełek na ciemnym, świerk na jasnym (a11y - nie usuwać bez zamiennika). */
:focus-visible { outline: 3px solid var(--swierk); outline-offset: 3px; }
.sekcja--ciemny :focus-visible, .sekcja--swierk :focus-visible, .hero--z-tlem :focus-visible,
.stopka :focus-visible,
body:has(.tresc-glowna > .hero--z-tlem:first-child) .naglowek:not(.jest-przewiniety) :focus-visible { outline-color: var(--kielek); }

/* ═══ 2. POMOCNICZE ═══════════════════════════════════════════════════════ */
.kontener { width: 100%; max-width: var(--szerokosc-kontenera); margin-inline: auto; padding-inline: var(--margines-boczny); }
.kontener.waski { max-width: var(--szerokosc-waska); }
.tylko-dla-czytnikow {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.pomin-do-tresci { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--torf); color: #fff; padding: var(--s-3) var(--s-4); }
.pomin-do-tresci:focus { left: var(--s-4); top: var(--s-4); }

.ikona {
	width: var(--ikona-rozmiar); height: var(--ikona-rozmiar);
	fill: none; stroke: currentColor; stroke-width: var(--ikona-grubosc);
	stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto;
}

/* Etykieta sekcji - mono jak opis na etykiecie laboratoryjnej. */
.etykieta, .nadtytul {
	font: 500 var(--t-etykieta) / 1.35 var(--font-dane);
	letter-spacing: var(--tracking-utility); text-transform: uppercase;
	color: var(--swierk); margin: 0 0 var(--s-4);
}
.lead-strony, .lead-sekcji { font-size: var(--t-l); line-height: 1.6; color: var(--c-tekst-slaby); }

/* ── Przyciski (pole dotyku ≥ 44 px) ───────────────────────────────────── */
.przycisk {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
	min-height: 48px; padding: 0.75rem 1.4rem;
	background: var(--swierk); color: #fff;
	border: 2px solid var(--swierk); border-radius: var(--promien);
	font: 600 1rem / 1.1 var(--font-tekst); text-decoration: none; text-align: center; cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.przycisk:hover { background: var(--swierk-ciemny); border-color: var(--swierk-ciemny); color: #fff; }
.przycisk--jasny { background: #fff; border-color: #fff; color: var(--torf); }
.przycisk--jasny:hover { background: var(--mgla); border-color: var(--mgla); color: var(--torf); }
.przycisk--obrys { background: transparent; border-color: currentColor; color: #fff; }
.przycisk--obrys:hover { background: #fff; border-color: #fff; color: var(--torf); }
.przycisk--obrys-ciemny { background: transparent; border-color: var(--swierk); color: var(--swierk); }
.przycisk--obrys-ciemny:hover { background: var(--swierk); border-color: var(--swierk); color: #fff; }
.przycisk--maly { min-height: 44px; padding: var(--s-2) var(--s-4); }
.link-dalej { font-weight: 600; color: var(--swierk); }

/* Kotwice nie wjeżdżają pod przyklejony nagłówek */
[id] { scroll-margin-top: calc(var(--wys-naglowka) + var(--s-4)); }

/* ═══ 3. TREŚĆ REDAKCYJNA (.tresc) - szerokość daje kontener, bez limitu wiersza (reguła z koha) ═══ */
.tresc { max-width: none; }
.tresc > :last-child { margin-bottom: 0; }
.tresc h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin-top: var(--s-12); }
.tresc h3 { margin-top: var(--s-8); }
.tresc > h2:first-child, .tresc > h3:first-child { margin-top: 0; }
.tresc ul, .tresc ol { padding-left: 1.25em; }
.tresc li + li { margin-top: var(--s-2); }
.tresc ul li::marker { color: var(--swierk); }
.tresc blockquote { margin: var(--s-8) 0; padding-left: var(--s-6); border-left: 3px solid var(--swierk); color: var(--c-tekst-slaby); font-size: var(--t-l); }
.tresc table { width: 100%; border-collapse: collapse; margin: var(--s-8) 0; font-size: var(--t-s); }
.tresc th, .tresc td { padding: var(--s-3); border-bottom: 1px solid var(--c-linia); text-align: left; }
.tresc figure { margin: var(--s-8) 0; }
.tresc figcaption { font: 500 var(--t-etykieta) var(--font-dane); color: var(--c-tekst-slaby); margin-top: var(--s-2); }
.tresc .alignright { float: right; margin: 0 0 var(--s-4) var(--s-6); }
.tresc .alignleft { float: left; margin: 0 var(--s-6) var(--s-4) 0; }
.tresc .aligncenter { margin-inline: auto; }

/* ═══ 4. NAGŁÓWEK ═════════════════════════════════════════════════════════
   Domyślnie biały i przyklejony. Na stronie, która zaczyna się hero z tłem (animacja, baner), leży na nim
   przezroczysty z białymi napisami, a po przewinięciu robi się biały (app.js: .jest-przewiniety).
   Logo zawsze na białej „etykiecie” - kolory logo nie walczą z wideo (docs/design.md). */
.naglowek { position: sticky; top: 0; z-index: 50; background: #fff; transition: background-color .25s ease, box-shadow .25s ease; }
.naglowek.jest-przewiniety { box-shadow: 0 1px 0 var(--c-linia); }
.naglowek__wnetrze {
	display: flex; align-items: center; gap: var(--s-6);
	width: 100%; max-width: 1400px; margin-inline: auto; padding-inline: var(--margines-boczny);
	min-height: var(--wys-naglowka);
}
.marka { display: block; margin-right: auto; text-decoration: none; background: #fff; flex: 0 0 auto; }
.marka__logo { display: block; width: auto; height: 46px; transition: height .25s ease; }
.marka__wordmark { font: 700 1.6rem/1 var(--font-display); color: var(--bordo); }

.nawigacja__lista { display: flex; align-items: center; gap: var(--s-6); list-style: none; margin: 0; padding: 0; }
.nawigacja__lista a {
	display: inline-flex; align-items: center; min-height: 44px;
	font: 500 1rem/1.2 var(--font-tekst); color: var(--torf); text-decoration: none;
}
.nawigacja__lista > li > a:hover,
.nawigacja__lista > .current-menu-item > a,
.nawigacja__lista > .current-menu-ancestor > a,
.nawigacja__lista > .current-menu-parent > a,
.nawigacja__lista > .current-post-ancestor > a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.45em; }
.nawigacja__lista li { position: relative; }
/* Podmenu bez JS: :hover dla myszy, :focus-within dla klawiatury. */
.nawigacja__lista .sub-menu {
	position: absolute; top: 100%; left: calc(-1 * var(--s-5)); z-index: 60;
	display: none; min-width: 22rem; margin: 0; padding: var(--s-3) 0; list-style: none;
	background: #fff; border: 1px solid var(--c-linia); border-radius: var(--promien);
	box-shadow: 0 18px 40px rgb(33 25 21 / 0.14);
}
.nawigacja__lista li:hover > .sub-menu,
.nawigacja__lista li:focus-within > .sub-menu { display: block; }
.nawigacja__lista .sub-menu a { display: flex; padding: 0.35rem var(--s-5); font-size: var(--t-s); font-weight: 400; color: var(--c-tekst-tresc); }
.nawigacja__lista .sub-menu a:hover, .nawigacja__lista .sub-menu .current-menu-item > a { background: var(--mgla); color: var(--torf); }
.nawigacja__lista .menu-item-has-children > a::after {
	content: ""; flex: 0 0 auto; margin-left: var(--s-2); width: 0.4em; height: 0.4em;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
}
.nawigacja__lista a:not([href]) { cursor: default; }

.naglowek__telefon {
	display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px;
	font: 500 1rem/1 var(--font-dane); color: var(--torf); text-decoration: none; white-space: nowrap;
}
.naglowek__telefon:hover { color: var(--swierk); }
.naglowek__cta { white-space: nowrap; }
.menu-przycisk { display: none; min-width: 44px; min-height: 44px; background: none; border: 0; cursor: pointer; color: var(--torf); }

/* Nagłówek na hero z tłem (strona główna, banery podstron, hub kategorii). */
body:has(.tresc-glowna > .hero--z-tlem:first-child) .naglowek {
	position: fixed; left: 0; right: 0; background: transparent;
}
body:has(.tresc-glowna > .hero--z-tlem:first-child) .naglowek:not(.jest-przewiniety) .nawigacja__lista > li > a,
body:has(.tresc-glowna > .hero--z-tlem:first-child) .naglowek:not(.jest-przewiniety) .naglowek__telefon,
body:has(.tresc-glowna > .hero--z-tlem:first-child) .naglowek:not(.jest-przewiniety) .menu-przycisk { color: #fff; }
/* Logo poziome na białej etykiecie w pasku (nie wisi od górnej krawędzi - wcześniej wyglądało na ucięte). */
body:has(.tresc-glowna > .hero--z-tlem:first-child) .naglowek:not(.jest-przewiniety) .marka {
	padding: 0.5rem 0.8rem; border-radius: var(--promien); box-shadow: 0 6px 20px rgb(0 0 0 / 0.18);
}
body:has(.tresc-glowna > .hero--z-tlem:first-child) .naglowek.jest-przewiniety { background: #fff; }
body:has(.tresc-glowna > .hero--z-tlem:first-child) .naglowek:not(.jest-przewiniety) .naglowek__cta { box-shadow: 0 6px 20px rgb(0 0 0 / 0.2); }

/* ═══ 5. OKRUSZKI ═════════════════════════════════════════════════════════ */
.okruszki { font: 500 var(--t-etykieta)/1.4 var(--font-dane); letter-spacing: 0.04em; }
.okruszki__lista { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0; padding: var(--s-5) 0 0; color: var(--c-tekst-slaby); }
.okruszki__lista a { color: var(--c-tekst-slaby); text-decoration: none; }
.okruszki__lista a:hover { color: var(--swierk); text-decoration: underline; }
.okruszki__pozycja + .okruszki__pozycja::before { content: "/"; margin-right: var(--s-2); }
.hero--z-tlem .okruszki .kontener { padding: 0; }
.hero--z-tlem .okruszki__lista { padding: 0 0 var(--s-6); color: #CFC8BE; }
.hero--z-tlem .okruszki__lista a { color: #E7E1D8; }
.hero--z-tlem .okruszki__lista a:hover { color: #fff; }

/* ═══ 6. STOPKA (torf) ════════════════════════════════════════════════════ */
.stopka { background: var(--torf); color: var(--c-ciemne-tekst-slaby); font-size: 0.98rem; }
.stopka a { color: #fff; text-decoration: none; }
.stopka a:hover { color: var(--kielek); text-decoration: underline; }
.stopka__siatka {
	display: grid; grid-template-columns: 1.3fr 1fr 1.4fr; gap: var(--s-12);
	padding-block: clamp(3.5rem, 6vw, 4.5rem) var(--s-12);
}
.stopka__marka .marka { display: inline-block; padding: 0.8rem 1rem; border-radius: var(--promien); margin-bottom: var(--s-5); }
.stopka__logo { display: block; height: 96px; width: auto; }
.stopka__tekst { color: var(--c-ciemne-tekst); max-width: 34ch; }
.stopka__adres { line-height: 1.6; }
.stopka__tytul-kolumny {
	font: 500 var(--t-etykieta)/1.35 var(--font-dane); letter-spacing: var(--tracking-utility); text-transform: uppercase;
	color: var(--kielek); margin: 0 0 var(--s-4);
}
.stopka__kolumna ul { list-style: none; padding: 0; margin: 0; }
.stopka__kolumna li + li { margin-top: var(--s-2); }
.stopka__kolumna:not(.stopka__kolumna--produkty) a[href^="tel:"] { font-family: var(--font-dane); font-size: 1.05rem; }
.stopka__dojazd { margin-top: var(--s-4); }
@media (min-width: 761px) {
	.stopka__kolumna--produkty ul { columns: 2; column-gap: var(--s-6); }
	.stopka__kolumna--produkty li { break-inside: avoid; margin: 0; padding-bottom: var(--s-2); }
}
.stopka__dol {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-8);
	padding-block: var(--s-6); border-top: 1px solid var(--c-linia-ciemna); font-size: 0.88rem;
}
.stopka__dol p { margin: 0; }
.stopka__licznik { font-family: var(--font-dane); font-size: 0.82rem; letter-spacing: 0.02em; }
.stopka__linki-dol ul { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); list-style: none; margin: 0; padding: 0; }
.stopka__linki-dol a { color: var(--c-ciemne-tekst-slaby); }

.tresc-glowna { display: block; min-height: 50vh; }

/* ═══ 7. MOBILE ═══════════════════════════════════════════════════════════ */
.podmenu-przelacznik { display: none; }
@media (max-width: 960px) {
	:root { --wys-naglowka: 68px; }
	.naglowek__wnetrze { gap: var(--s-3); }
	.marka__logo { height: 36px; }
	body:has(.tresc-glowna > .hero--z-tlem:first-child) .naglowek:not(.jest-przewiniety) .marka { padding: 0.4rem 0.6rem; }
	.menu-przycisk { display: inline-flex; align-items: center; justify-content: center; order: 3; }
	.nawigacja { display: none; }
	.nawigacja.jest-otwarte {
		display: block; position: absolute; inset: var(--wys-naglowka) 0 auto;
		max-height: calc(100vh - var(--wys-naglowka)); overflow-y: auto;
		background: #fff; border-top: 1px solid var(--c-linia); box-shadow: 0 16px 32px rgb(33 25 21 / 0.14);
		padding: var(--s-2) var(--margines-boczny) var(--s-8);
	}
	/* Otwarte menu nad hero: nagłówek biały, żeby panel nie wisiał pod przezroczystym paskiem. */
	body:has(.tresc-glowna > .hero--z-tlem:first-child):has(.nawigacja.jest-otwarte) .naglowek:not(.jest-przewiniety) .marka { padding: 0; box-shadow: none; }
	body:has(.nawigacja.jest-otwarte) .naglowek { background: #fff !important; }
	body:has(.nawigacja.jest-otwarte) .naglowek .naglowek__telefon,
	body:has(.nawigacja.jest-otwarte) .naglowek .menu-przycisk { color: var(--torf) !important; }
	.nawigacja.jest-otwarte .nawigacja__lista { flex-direction: column; align-items: stretch; gap: 0; }
	.nawigacja.jest-otwarte .nawigacja__lista > li > a { color: var(--torf) !important; font-size: 1.1rem; min-height: 52px; border-bottom: 1px solid var(--c-linia); }
	/* Podmenu: zwinięte, rozwija przycisk ze strzałką (app.js); tekst pozycji prowadzi do jej strony. */
	.nawigacja.jest-otwarte .nawigacja__lista > .menu-item-has-children { display: grid; grid-template-columns: minmax(0, 1fr) 52px; align-items: stretch; }
	.nawigacja.jest-otwarte .menu-item-has-children > .sub-menu { grid-column: 1 / -1; }
	.nawigacja.jest-otwarte .nawigacja__lista .menu-item-has-children > .sub-menu { display: none; }
	.nawigacja.jest-otwarte .nawigacja__lista .menu-item-has-children.is-otwarte > .sub-menu { display: block; }
	.podmenu-przelacznik {
		display: inline-flex; align-items: center; justify-content: center; min-height: 52px;
		background: none; border: 0; border-bottom: 1px solid var(--c-linia); cursor: pointer; color: var(--torf);
	}
	.podmenu-przelacznik span { width: 0.6em; height: 0.6em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.15em) rotate(45deg); transition: transform .2s ease; }
	.is-otwarte > .podmenu-przelacznik span { transform: translateY(0.15em) rotate(225deg); }
	.nawigacja.jest-otwarte .sub-menu { position: static; min-width: 0; background: transparent; border: 0; box-shadow: none; padding: var(--s-2) 0 var(--s-4) var(--s-3); }
	.nawigacja.jest-otwarte .sub-menu a { min-height: 44px; padding-inline: 0; }
	.nawigacja.jest-otwarte .menu-item-has-children > a::after { display: none; }
	.naglowek__numer { display: none; }
	.naglowek__telefon { justify-content: center; min-width: 44px; border: 1.5px solid currentColor; border-radius: var(--promien); }
	.naglowek__cta { min-height: 44px; padding: 0.55rem 0.9rem; font-size: 0.9rem; }
	.stopka__siatka { grid-template-columns: 1fr; gap: var(--s-8); }
}
@media (max-width: 560px) { .naglowek__cta { display: none; } }

/* Hamburger: trzy kreski na jednym elemencie; otwarte menu → krzyżyk. */
.menu-przycisk__kreski, .menu-przycisk__kreski::before, .menu-przycisk__kreski::after {
	display: block; width: 24px; height: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease;
}
.menu-przycisk__kreski { position: relative; }
.menu-przycisk__kreski::before, .menu-przycisk__kreski::after { content: ""; position: absolute; left: 0; }
.menu-przycisk__kreski::before { top: -7px; }
.menu-przycisk__kreski::after { top: 7px; }
.menu-przycisk[aria-expanded="true"] .menu-przycisk__kreski { background: transparent; }
.menu-przycisk[aria-expanded="true"] .menu-przycisk__kreski::before { transform: translateY(7px) rotate(45deg); }
.menu-przycisk[aria-expanded="true"] .menu-przycisk__kreski::after { transform: translateY(-7px) rotate(-45deg); }