/* =========================================================================
   VETKA — biblioteka UI v2 · chrom strony
   =========================================================================
   Nagłówek, pas tytułowy, mega menu i stopka — elementy obecne na każdym
   widoku. Ładowane globalnie, po tokenach i komponentach.

   Reguły motywu nadrzędnego siedzą na klasach o specyficzności (0,1,0)–(0,2,0),
   więc prefiks `body.vetka-ui` w większości wystarcza. Mega menu ma własne
   selektory (0,2,0) i tam potrzebne jest (0,3,1).
   ========================================================================= */

/* =========================================================================
   NAGŁÓWEK
   =========================================================================
   Dotąd pasek był przezroczystą warstwą NAD treścią (header-bg-transparent
   + header-above-content). Działało to tylko dopóki pod spodem stało ciemne
   zdjęcie, i wymuszało przyciemniającą nakładkę na każdym hero, żeby białe
   linki dało się przeczytać. Pasek wchodzi w normalny przepływ i dostaje
   własne tło — zdjęcia mogą wtedy zostać bez nakładki.
   ========================================================================= */
body.vetka-ui #masthead.site-header {
	position: relative;
	/* Motyw odsuwał pasek o wysokość paska administracyjnego regułą
	   `.admin-bar .site-header.header-above-content { top: 32px }` — było to
	   potrzebne, dopóki pasek leżał jako warstwa NAD treścią (position:
	   absolute) i chowałby się pod paskiem WordPressa. Po przejściu na
	   normalny przepływ `top` już nie przesuwa elementu w układzie, tylko
	   wizualnie, zostawiając nad nim 32 px pustki. Widoczne wyłącznie dla
	   zalogowanych, bo klasa `.admin-bar` jest tylko wtedy.                 */
	top: 0;
	/* Dolna linia wchodzi w wysokość paska (border-box), więc wnętrze jest
	   o 1 px niższe od tokenu i logo siadało odrobinę wyżej niż powinno.
	   Doliczamy tę linię, żeby odstęp nad logo i pod nim był równy.        */
	min-height: calc(var(--v2-header-h) + 1px);
	background-color: var(--v2-bg);
	border-bottom: 1px solid var(--v2-line);
	box-shadow: none;
}

body.vetka-ui #masthead .header-inner,
body.vetka-ui #masthead .navbar {
	min-height: var(--v2-header-h);
	box-shadow: none;
}

/* Wszystkie cztery sloty w opcjach motywu wskazują ciemny wariant SVG
   (assets/img/vetka-logo.svg, ta sama grafika co w bibliotece mediów).
   Nagłówek jest jasny, więc logo idzie w oryginalnym kolorze marki —
   dawny `filter: brightness(0)`, który zastępował brakującą ciemną wersję,
   jest już niepotrzebny.                                                   */
body.vetka-ui #masthead .site-logo,
body.vetka-ui #masthead .site-logo-sticky,
body.vetka-ui #masthead .mobile-logo,
body.vetka-ui #masthead .mobile-logo-sticky {
	max-width: 190px;
	max-height: 29px;   /* ta sama wysokość co na desktopie — patrz niżej */
	height: auto;
	border-radius: 0;
}

body.vetka-ui #masthead .primary-menu > li > a {
	color: var(--v2-ink);
	font-family: var(--v2-font);
	font-size: 15px;
	font-weight: 500;
}

/* Stan aktywny obejmuje też pozycję-rodzica: podstrony specjalizacji są
   dziećmi „Zakresu usług", więc WordPress oznacza tę pozycję klasami
   `current-menu-ancestor` / `current-page-ancestor`, nie `current-menu-item`.
   Bez nich szesnaście podstron nie pokazywało w pasku, gdzie się jest.     */
body.vetka-ui #masthead .primary-menu > li > a:hover,
body.vetka-ui #masthead .primary-menu > li.current-menu-item > a,
body.vetka-ui #masthead .primary-menu > li.current-menu-ancestor > a,
body.vetka-ui #masthead .primary-menu > li.current-page-ancestor > a {
	color: var(--v2-accent);
}

/* Stan aktywny niesie też wagę — tak jak stan otwarty mega menu
   (assets/css/mega-menu.css). Sam kolor jest zbyt cichym sygnałem przy
   15 px i wadze 500, a na hubie „Zakres usług" pozycja menu jest jedynym
   miejscem, po którym widać, w której części serwisu się jest.            */
body.vetka-ui #masthead .primary-menu > li.current-menu-item > a,
body.vetka-ui #masthead .primary-menu > li.current-menu-ancestor > a,
body.vetka-ui #masthead .primary-menu > li.current-page-ancestor > a {
	font-weight: 600;
}

/* Ikony przy pozycjach menu dokładały trzeci sygnał obok tekstu i stanu.   */
body.vetka-ui #masthead .primary-menu > li > a > i,
body.vetka-ui #masthead .primary-menu > li > a > svg {
	display: none;
}

/* Przycisk rezerwacji wizyty — jedyny element po prawej stronie paska.
   Czarny, nie zielony: akcent niesie JEDNO CTA widoku, a na stronie głównej
   jest nim „Umów wizytę" w hero. Gdyby pasek też był zielony, oba wołałyby
   z równą siłą i żadne by nie wygrało.                                     */
body.vetka-ui #masthead .header-right-info .elementor-button,
body.vetka-ui #masthead .header-right-info .pgs-btn,
body.vetka-ui #masthead .header-right-info a.btn {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 22px;
	border: 1px solid var(--v2-ink);
	border-radius: var(--v2-r-lg);
	background-color: var(--v2-ink);
	color: var(--v2-on-accent);
	font-family: var(--v2-font);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	box-shadow: none;
	transition: background-color var(--v2-ease), border-color var(--v2-ease);
}

body.vetka-ui #masthead .header-right-info .elementor-button:hover,
body.vetka-ui #masthead .header-right-info .pgs-btn:hover,
body.vetka-ui #masthead .header-right-info a.btn:hover {
	background-color: #000;
	border-color: #000;
	color: var(--v2-on-accent);
}

body.vetka-ui #masthead .header-right-info a.btn:focus-visible {
	outline: 2px solid var(--v2-accent);
	outline-offset: 2px;
}

/* Menu mobilne (offcanvas) — te same reguły, ciemny tekst na białym.       */
body.vetka-ui .main-navigation.offcanvas {
	background-color: var(--v2-bg);
}

body.vetka-ui .main-navigation.offcanvas .offcanvas-title,
body.vetka-ui .main-navigation.offcanvas a {
	color: var(--v2-ink);
}

/* =========================================================================
   PAS TYTUŁOWY PODSTRON
   =========================================================================
   Był ciemnozielonym blokiem wysokości 550 px ze zdjęciem w tle. Przy białym
   nagłówku dawałoby to trzy różne płaszczyzny jedna pod drugą, zanim zacznie
   się treść. Zostaje jasna strefa wysokości wynikającej z treści, oddzielona
   hairline'em — tytuł niesie hierarchię, nie kolor tła.
   ========================================================================= */
/* Motyw ustawia na pasie sztywne `height: var(--pgs_pageheader_height, 550px)`,
   a nie `min-height` — zerowanie min-height nic tu nie daje. Do tego padding
   dokłada reguła `.page-header.pageheader-layout--all-center` o specyficzności
   (0,2,0), więc prefiks z jedną klasą (0,1,1) przegrywa. Stąd podwojenie
   klasy: `body.vetka-ui .page-header.page-header` daje (0,2,1).            */
body.vetka-ui .page-header.page-header {
	height: auto;
	min-height: 0;
	padding-block: 52px 44px;
	background-color: var(--v2-bg);
	background-image: none;
	border-bottom: 1px solid var(--v2-line);
}

body.vetka-ui .page-header.page-header::before,
body.vetka-ui .page-header.page-header::after {
	display: none;   /* nakładki przyciemniające zdjęcie — bez zdjęcia zbędne */
}

body.vetka-ui .page-header.page-header .page-header-inner {
	height: auto;
	min-height: 0;
}

body.vetka-ui .page-header.page-header .entry-title {
	color: var(--v2-ink);
	font-family: var(--v2-font);
	font-size: clamp(30px, 3.6vw, 46px);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -.02em;
}

/* =========================================================================
   MEGA MENU
   =========================================================================
   Panel „Zakres usług" ma własny arkusz — assets/css/mega-menu.css — i jest
   od redesignu w całości na tokenach v2. Nic tu po nim nie zostaje: tamten
   plik scopuje wszystko pod `#masthead`, więc żadna reguła stąd i tak by go
   nie dosięgła. Reguły dla samej POZYCJI menu w pasku (podkreślenie otwartej
   zakładki, zdjęcie pozycjonowania z opakowań nagłówka) też siedzą tam, przy
   komponencie, którego dotyczą.
   ========================================================================= */

/* =========================================================================
   STOPKA
   =========================================================================
   Jedyna ciemna płaszczyzna serwisu. Markup renderuje inc/v2/footer.php,
   więc klasy są własne i wystarcza im jedna — poza tymi, które siedzą na
   `a` i `h2`, gdzie Kit stylizuje po typie.

   Kolumny: 2fr 1fr 1fr 1fr. Pierwsza jest szersza, bo niesie logo, zdanie
   o klinice i dane kontaktowe; trzy pozostałe to same listy odnośników.
   ========================================================================= */
body.vetka-ui .site-footer,
body.vetka-ui .footer-wrapper {
	background-color: var(--v2-dark);
}

body.vetka-ui .vk-footer {
	background-color: var(--v2-dark);
	color: var(--v2-on-dark);
	font-family: var(--v2-font);
}

body.vetka-ui .vk-footer__wrap {
	max-width: var(--v2-wrap);
	margin-inline: auto;
	padding-inline: 24px;
}

body.vetka-ui .vk-footer__grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 48px;
	padding-top: 64px;
}

body.vetka-ui .vk-footer :where(h1, h2, h3, p, ul, address) {
	margin: 0;
}

body.vetka-ui .vk-footer ul {
	padding: 0;
	list-style: none;
}

body.vetka-ui .vk-footer__logo-link {
	display: inline-block;
	margin-bottom: 14px;
}

/* Logo zostaje białe: tu ciemne tło jest właściwe, więc odwracający filtr
   z nagłówka musi być wyłączony.                                          */
body.vetka-ui .vk-footer__logo {
	width: auto;
	height: 44px;
	filter: none;
	border-radius: 0;
}

body.vetka-ui .vk-footer__desc {
	max-width: 280px;
	color: var(--v2-on-dark);
	font-size: 14px;
	line-height: 1.5;
}

body.vetka-ui .vk-footer__address {
	margin-top: 24px;
	color: var(--v2-on-dark);
	font-size: 14px;
	font-style: normal;
	line-height: 1.6;
}

body.vetka-ui .vk-footer__col-title {
	margin-bottom: 14px;
	color: var(--v2-on-accent);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
}

body.vetka-ui .vk-footer__links {
	display: grid;
	gap: 8px;
	font-size: 14px;
}

body.vetka-ui .vk-footer__hours {
	color: var(--v2-on-dark);
	font-size: 14px;
	line-height: 1.5;
}

body.vetka-ui .vk-footer a {
	color: var(--v2-on-dark);
	text-decoration: none;
	transition: color var(--v2-ease);
}

body.vetka-ui .vk-footer a:hover {
	color: var(--v2-on-accent);
}

body.vetka-ui .vk-footer a:focus-visible {
	outline: 2px solid var(--v2-focus);
	outline-offset: 2px;
}

/* Dolny pasek — hairline w bieli o niskiej nieprzezroczystości, nie pełna
   linia i nie druga płaszczyzna.                                          */
body.vetka-ui .vk-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 40px;
	padding-block: 28px;
	border-top: 1px solid var(--v2-line-dark);
	color: rgba(255, 255, 255, .55);
	font-size: 13px;
}

body.vetka-ui .vk-footer__social {
	display: flex;
	gap: 16px;
}

/* Progi jak w całym serwisie (patrz assets/css/v2/tokens.css): tablet
   ≤1024 px, mobile ≤640 px. Stopka na tablecie idzie w dwie kolumny,
   na mobile'u w jedną, a margines boczny schodzi do 40 / 20 px.         */
@media (max-width: 1024px) {
	body.vetka-ui .vk-footer__wrap {
		padding-inline: 40px;
	}

	body.vetka-ui .vk-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
		padding-top: 48px;
	}

	body.vetka-ui .vk-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
}

@media (max-width: 640px) {
	body.vetka-ui .vk-footer__wrap {
		padding-inline: 20px;
	}

	body.vetka-ui .vk-footer__grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

/* Pas tytułowy podstron, których nie przejął żaden własny szablon
   (np. widoki motywu nadrzędnego). Mniejszy rytm i margines boczny
   zgodny z resztą serwisu.                                             */
@media (max-width: 1024px) {
	body.vetka-ui .page-header.page-header {
		padding-block: 40px 32px;
		padding-inline: 40px;
	}
}

@media (max-width: 640px) {
	body.vetka-ui .page-header.page-header {
		padding-block: 28px 24px;
		padding-inline: 20px;
	}
}

/* =========================================================================
   NAGŁÓWEK — układ jak na zapier.com
   =========================================================================
   Było: 147 px wysokości (samo logo 86 px) i menu wyśrodkowane w wolnej
   przestrzeni. Zapier trzyma pasek na 56 px, a menu stawia bezpośrednio przy
   logo — nawigacja czyta się wtedy jako jeden ciąg od lewej, a nie jako trzy
   osobne wyspy.

   Wiersz nagłówka to `.container-fluid` z `display: block`; elementy układają
   się dziś inaczej niż flexem. Przestawiamy go na flex, żeby dało się sterować
   kolejnością i odstępami: logo, menu, a prawa strona odpychana `margin-left`.
   ========================================================================= */
body.vetka-ui #masthead.site-header {
	padding-inline: 40px;
}

body.vetka-ui #masthead .header-inner,
body.vetka-ui #masthead .navbar,
body.vetka-ui #masthead > .container-fluid {
	min-height: var(--v2-header-h);
	height: auto;
	padding-block: 0;
}

/* Logo dostrojone do przycisku „Skontaktuj się z nami" po prawej stronie
   paska: pudełko przycisku ma 44 px, ale to pełna czarna plama, a logo to
   sam tusz na bieli. Znak równej wysokości ważyłby optycznie więcej niż
   przycisk, dlatego jest wyraźnie niższy.

   UWAGA na podpis: przy 29 px „KLINIKA WETERYNARYJNA" ma 5,3 px i jest już
   nieczytelny — zostaje jako szara kreska pod nazwą. Świadoma decyzja, bo
   priorytetem był mały znak. Jeśli kiedyś ma wrócić czytelność, są dwie drogi:
   podnieść tę wartość do 36 px albo podmienić plik w opcjach motywu na
   `assets/img/vetka-logo-znak.svg` — ten sam znak bez podpisu, przy 29 px
   sama nazwa VETKA ma tam 20 px i jest ostra.

   Wysokość mierzy samą grafikę: dostarczony SVG jest przycięty do krawędzi
   znaku. Poprzedni PNG miał ~30 % pustego marginesu u góry i u dołu viewBoksa,
   przez co w tym samym pudełku sam znak miał ledwie 39 % zadanej wartości.   */
body.vetka-ui #masthead .site-logo,
body.vetka-ui #masthead .site-logo-sticky {
	max-width: 260px;
	max-height: 29px;
	width: auto;
	height: auto;
	object-fit: contain;
}

body.vetka-ui #masthead .site-branding {
	display: flex;
	align-items: center;
	min-height: var(--v2-header-h);
}

@media (min-width: 1200px) {
	body.vetka-ui #masthead > .container-fluid,
	body.vetka-ui #masthead .header-inner {
		display: flex;
		align-items: center;
		gap: 28px;
		min-height: var(--v2-header-h);
	}

	/* Nawigacja przestaje rozpychać się na całą wolną szerokość — zajmuje
	   tyle, ile potrzebuje, i staje tuż za logo.                            */
	body.vetka-ui #masthead .main-navigation {
		flex: 0 1 auto;
		min-height: var(--v2-header-h);
	}

	body.vetka-ui #masthead .main-navigation .navbar,
	body.vetka-ui #masthead .main-navigation > .container,
	body.vetka-ui #masthead .main-navigation > div {
		justify-content: flex-start;
		min-height: var(--v2-header-h);
	}

	body.vetka-ui #masthead .primary-menu {
		justify-content: flex-start;
		gap: 0 24px;
		min-height: var(--v2-header-h);
	}

	body.vetka-ui #masthead .primary-menu > li > a {
		min-height: var(--v2-header-h);
		display: flex;
		align-items: center;
	}

	/* Wszystko po prawej stronie paska odsuwa się do krawędzi.
	   `.header-right-info` nie leży bezpośrednio we flexie wiersza, tylko
	   wewnątrz `nav.navbar` — dlatego to navbar musi zająć całą wolną
	   szerokość, inaczej `margin-left: auto` odpycha CTA tylko do końca
	   navbara, czyli tuż za menu.                                          */
	body.vetka-ui #masthead .navbar {
		flex: 1 1 auto;
		width: 100%;
		justify-content: flex-start;
		gap: 28px;
		padding-block: 0;
		padding-inline: 0;
	}

	body.vetka-ui #masthead .header-right-info {
		margin-left: auto;
		flex: 0 0 auto;
	}
}

/* Dwa źródła nadmiarowej wysokości i odstępu, oba z motywu:
   - `.site-title` niesie padding 30 px góra i dół, co dawało 100 px paska
     niezależnie od tego, jak niskie jest logo;
   - `.primary-menu-wrapper` ma bootstrapowe `ms-auto`, które odpychało menu
     od logo na środek — dokładnie to, co usuwamy.                          */
body.vetka-ui #masthead .site-title {
	padding-block: 0;
	margin: 0;
	line-height: 0;
}

@media (min-width: 1200px) {
	body.vetka-ui #masthead .primary-menu-wrapper.ms-auto,
	body.vetka-ui #masthead .primary-menu-wrapper {
		margin-left: 0;
		padding-right: 0;
	}

	body.vetka-ui #masthead .main-navigation .offcanvas-body {
		padding: 0;
	}
}

/* Kalibracja do wymiarów zapier.com — trzy rzeczy, które nie dociągnęły:

   1. `gap` na wierszu nagłówka zostawiał 28 px także po prawej stronie, więc
      CTA nie dochodziło do krawędzi. Odstęp logo–menu robi teraz margines
      samej nawigacji, a nie gap wiersza.
   2. `.site-branding` jest szerszy od samego obrazka logo, przez co odstęp
      liczony od krawędzi logo wychodził dwa razy większy niż zakładany.
   3. `.btn` ma z motywu wysoki `line-height`; przy padding 8 px dawało to
      48 px zamiast 38 px. Wysokość przycisku niesie teraz interlinia.        */
@media (min-width: 1200px) {
	body.vetka-ui #masthead > .container-fluid,
	body.vetka-ui #masthead .header-inner,
	body.vetka-ui #masthead .navbar {
		gap: 0;
	}

	body.vetka-ui #masthead .site-branding {
		flex: 0 0 auto;
		padding: 0;
		margin: 0;
	}

	body.vetka-ui #masthead .site-title,
	body.vetka-ui #masthead .site-title > a {
		display: inline-flex;
		align-items: center;
		width: auto;
	}

	/* Odstęp logo–menu. Po zmniejszeniu znaku do 29 px stary margines 28 px
	   robił z logo i pierwszej pozycji menu jedną grupę — mniejszy znak
	   potrzebuje więcej powietrza, żeby nadal czytał się jako osobny blok.  */
	body.vetka-ui #masthead .main-navigation {
		margin-left: 48px;
	}

	body.vetka-ui #masthead .header-right-info .btn,
	body.vetka-ui #masthead .header-right-info .elementor-button,
	body.vetka-ui #masthead .header-right-info .pgs-btn,
	body.vetka-ui #masthead .header-right-info a.btn {
		min-height: 44px;
		padding: 0 22px;
		font-size: 15px;
		line-height: 1.2;
	}
}

/* =========================================================================
   NAGŁÓWEK MOBILNY I TABLETOWY  (≤ 1199.98 px)
   =========================================================================
   Wzorzec globalny „Header mobilny" i sekcja 1 handoffu
   `design_handoff_menu_mobile` (33b): pasek 60 px z hairline'em u dołu,
   logo po lewej, a po prawej wyjście na telefon (na mobile'u kwadratowy
   przycisk ☎ 44×44 z obrysem `--v2-ink`, na tablecie numer tekstem)
   i przycisk menu 44×44 z obrysem hairline — hamburger, gdy panel jest
   zamknięty, ✕, gdy otwarty. Desktopowa nawigacja i CTA znikają.

   PRÓG. Handoff sugeruje 1024 px, ale motyw nadrzędny zwija nawigację do
   szuflady dokładnie przy 1200 px (`navbar-expand-xl` Bootstrapa). Gdyby
   pasek łamał się przy 1024, pas 1025–1199 px zostałby bez żadnej nawigacji:
   desktopowe menu jest tam już zwinięte przez Bootstrapa, a mobilne nie
   byłoby jeszcze włączone. Dlatego chrom łamie się przy progu motywu, a
   TREŚĆ widoków — przy progach z handoffu (640 / 1024 px).
   ========================================================================= */
/* --- Ikona słuchawki ------------------------------------------------------
   Handoff rysuje w tym miejscu glif ☎ (U+260E). W praktyce znak wpada
   w systemową rodzinę emoji — a ta maluje własnym kolorem i ignoruje
   `color`, więc na ciemnym pasku hero słuchawka zostawała czarna. Stąd
   plik SVG wpuszczany MASKĄ: kształt bierze z pliku, kolor z
   `background-color`, czyli działa w obu wariantach paska i w stopce panelu
   menu. Ten sam zabieg, co przy ikonie hamburgera niżej.

   Używają jej: przycisk ☎ w pasku (`.vk-hdrm__tel-btn`) i przycisk telefonu
   w stopce panelu menu (`.vk-mnav-cta__btn--tel`).                       */
body.vetka-ui .vk-ico-tel {
	display: inline-block;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: url("../../img/ikona-telefon.svg") center / contain no-repeat;
	mask: url("../../img/ikona-telefon.svg") center / contain no-repeat;
}

/* Akcje mobilne są w markupie zawsze (widoczność nie może zależeć od
   sniffingu User-Agenta, bo strony idą z cache). Na desktopie po prostu
   ich nie ma — tam po prawej stronie paska stoi CTA „Skontaktuj się".   */
body.vetka-ui .vk-hdrm {
	display: none;
}

@media (max-width: 1199.98px) {

	body.vetka-ui #masthead.site-header {
		min-height: calc(var(--v2-header-h-m) + 1px);
		padding-inline: 24px;
	}

	body.vetka-ui #masthead .header-inner,
	body.vetka-ui #masthead .navbar,
	body.vetka-ui #masthead > .container-fluid {
		min-height: var(--v2-header-h-m);
	}

	body.vetka-ui #masthead .navbar {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 10px;
		padding-inline: 0;
	}

	/* Motyw przestawia logo na `order: 1`, czyli ZA prawą stronę paska —
	   w jego układzie mobilnym hamburger stoi po lewej. Handoff chce
	   odwrotnie: logo pierwsze, akcje przy prawej krawędzi.               */
	body.vetka-ui #masthead .site-branding {
		flex: 0 0 auto;
		order: 0;
		min-height: var(--v2-header-h-m);
		padding: 0;
		margin: 0;
	}

	/* Logo z dopiskiem. Motyw pokazuje `.site-logo` powyżej 991 px, a niżej
	   `.mobile-logo` — my przesuwamy tę granicę na próg mobile'a z handoffu
	   (640 px), bo to dopisek decyduje o tym, który wariant jest właściwy,
	   a nie breakpoint Bootstrapa.                                          */
	body.vetka-ui #masthead .site-branding .site-title .site-logo {
		display: block;
		max-height: 29px;
	}

	body.vetka-ui #masthead .site-branding .site-title .mobile-logo,
	body.vetka-ui #masthead .site-branding .site-title .site-logo-sticky,
	body.vetka-ui #masthead .site-branding .site-title .mobile-logo-sticky {
		display: none;
	}

	/* Wszystko, co należy do układu desktopowego, znika: szuflada z menu jest
	   pozycjonowana osobno (menu-mobilne.css), a przycisk „Skontaktuj się
	   z nami" wraca dopiero w stopce panelu.                                */
	body.vetka-ui #masthead .header-right-info {
		display: none;
	}

	/* --- Akcje po prawej (renderuje inc/v2/naglowek-mobilny.php) --------- */
	body.vetka-ui .vk-hdrm {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-left: auto;
	}

	body.vetka-ui .vk-hdrm__tel-text {
		color: var(--v2-ink);
		font-family: var(--v2-font);
		font-size: 14px;
		font-weight: 600;
		font-variant-numeric: tabular-nums;
		line-height: 1.2;
		text-decoration: none;
		white-space: nowrap;
		transition: color var(--v2-ease);
	}

	body.vetka-ui .vk-hdrm__tel-text:hover {
		color: var(--v2-accent);
	}

	/* --- Kwadratowy przycisk ☎ ------------------------------------------ */
	/* Alternatywa dla numeru tekstem, nie dodatek: pokazuje się dopiero
	   poniżej 641 px, czyli tam, gdzie numer się chowa. Na każdej szerokości
	   w pasku jest więc dokładnie jedno wyjście na telefon.               */
	body.vetka-ui .vk-hdrm__tel-btn {
		display: none;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border: 1px solid var(--v2-ink);
		border-radius: var(--v2-r-lg);
		color: var(--v2-ink);
		text-decoration: none;
		transition: background-color var(--v2-ease), border-color var(--v2-ease), color var(--v2-ease);
	}

	body.vetka-ui .vk-hdrm__tel-btn:hover {
		border-color: var(--v2-accent);
		background-color: var(--v2-accent);
		color: var(--v2-on-accent);
	}

	body.vetka-ui .vk-hdrm__tel-text:focus-visible,
	body.vetka-ui .vk-hdrm__tel-btn:focus-visible,
	body.vetka-ui #masthead .navbar-toggler:focus-visible {
		outline: 2px solid var(--v2-accent);
		outline-offset: 2px;
	}

	/* Bootstrap rysuje po kliknięciu własny pierścień grubości
	   `--bs-navbar-toggler-focus-width` CIENIEM, nie obrysem, i robi to na
	   `:focus`, czyli także przy kliknięciu myszą. W bibliotece v2 sygnał
	   fokusu jest jeden — obrys `:focus-visible` wyżej — więc cień gasimy.
	   Zerowanie w regule bazowej nie wystarczy: `.navbar-toggler:focus` ma
	   tę samą specyficzność co selektor bez stanu i wygrywa kolejnością.  */
	body.vetka-ui #masthead .navbar-toggler:focus {
		box-shadow: none;
	}

	/* --- Przycisk menu --------------------------------------------------- */
	/* Ikona to siatka 3×3 zaokrąglonych kwadratów (assets/img/ikona-menu.svg,
	   plik z zestawu dostarczonego przez klienta). Wchodzi MASKĄ, nie
	   obrazem: maska bierze z pliku sam kształt, a kolor daje
	   `background-color` — dzięki temu ta sama ikona jest ciemna w zwykłym
	   pasku i biała na zdjęciu w hero, bez drugiego pliku i bez filtra.

	   SVG motywu (trzy prostokąty o różnych szerokościach) gasimy.         */
	body.vetka-ui #masthead .navbar-toggler {
		/* `!important` z konieczności: motyw daje przyciskowi bootstrapową
		   klasę `.d-block`, a ta niesie `display: block !important`. Bez
		   zdjęcia tego kreski lądują przy lewej krawędzi pudełka zamiast
		   na jego środku — `justify-content` nie ma wtedy czego ustawiać.
		   Reguła siedzi w zapytaniu `max-width`, więc `.d-xl-none`, które
		   chowa przycisk powyżej 1200 px, zostaje nienaruszone.           */
		display: inline-flex !important;
		flex: 0 0 auto;
		order: 9;              /* zawsze ostatni w rzędzie, za przyciskiem ☎ */
		align-items: center;
		justify-content: center;
		/* Pudełko 44×44 z obrysem hairline — para do przycisku ☎ obok,
		   tak jak w makiecie 33b (tam ☎ ma obrys mocniejszy, bo jest
		   akcją, a menu tylko przełącznikiem).                            */
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1px solid var(--v2-line);
		border-radius: var(--v2-r-lg);
		background-color: transparent;
		box-shadow: none;
	}

	body.vetka-ui #masthead .navbar-toggler svg {
		display: none;
	}

	body.vetka-ui #masthead .navbar-toggler .toggler-icon {
		display: block;
		position: relative;
		/* Plik ma 3 px marginesu z każdej strony w viewBoksie 24×24, więc
		   sama siatka to 3/4 zadanego pudełka: przy 28 px rysunek ma
		   ~21 px i wypełnia przycisk 44 px bez dotykania obrysu.         */
		width: 28px;
		height: 28px;
		background-color: var(--v2-ink);
		-webkit-mask: url("../../img/ikona-menu.svg") center / contain no-repeat;
		mask: url("../../img/ikona-menu.svg") center / contain no-repeat;
	}

	/* --- Stan otwarty: ✕ -------------------------------------------------- */
	/* Krzyżyk jest rysowany, a nie wczytywany: dwie kreski z pseudoelementów
	   nie kosztują ani pliku, ani żądania, a przy okazji biorą kolor stąd,
	   gdzie już stoi — także w wersji białej nad zdjęciem hero.          */
	body.vetka-ui #masthead .navbar-toggler[aria-expanded="true"] .toggler-icon {
		background-color: transparent;
		-webkit-mask: none;
		mask: none;
	}

	body.vetka-ui #masthead .navbar-toggler[aria-expanded="true"] .toggler-icon::before,
	body.vetka-ui #masthead .navbar-toggler[aria-expanded="true"] .toggler-icon::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 19px;
		height: 1.5px;
		margin: -0.75px 0 0 -9.5px;
		background-color: var(--v2-ink);
	}

	body.vetka-ui #masthead .navbar-toggler[aria-expanded="true"] .toggler-icon::before {
		transform: rotate(45deg);
	}

	body.vetka-ui #masthead .navbar-toggler[aria-expanded="true"] .toggler-icon::after {
		transform: rotate(-45deg);
	}
}

/* --- Mobile (≤ 640 px) ---------------------------------------------------
   Pasek zwęża się do 16 px z boku, logo traci dopisek, a numer telefonu
   zostaje już tylko w przycisku ☎.                                        */
@media (max-width: 640px) {

	body.vetka-ui #masthead.site-header {
		padding-inline: 16px;
	}

	body.vetka-ui #masthead .site-branding .site-title .site-logo {
		display: none;
	}

	body.vetka-ui #masthead .site-branding .site-title .mobile-logo {
		display: block;
		/* Znak bez dopisku. Przy 28 px sama nazwa VETKA ma ~19 px — tyle, ile
		   w makiecie (600/19 px).                                           */
		max-height: 28px;
	}

	body.vetka-ui .vk-hdrm__tel-text {
		display: none;
	}

	body.vetka-ui .vk-hdrm__tel-btn {
		display: inline-flex;
	}
}

/* =========================================================================
   NAGŁÓWEK NAD MOBILNYM HERO ZE ZDJĘCIEM  (≤ 640 px, strona główna)
   =========================================================================
   Handoff `design_handoff_hero_mobile`. W obu wariantach pasek leży NA
   zdjęciu, a nie nad nim: wychodzi z przepływu, dzięki czemu hero zaczyna
   się od górnej krawędzi okna i jego `100svh` obejmuje też pasek — tak jak
   w makiecie. Różnica między wariantami to sama oprawa: 32a jest
   przezroczysty z białym znakiem, 32c mlecznobiały z rozmyciem.

   Reguły siedzą tu, a nie w arkuszu strony głównej, bo dotyczą chromu —
   arkusz strony nie adresuje `#masthead` ani jednym selektorem.
   ========================================================================= */
@media (max-width: 640px) {

	body.vetka-ui:is(.vk-hero-32a, .vk-hero-32c) #masthead.site-header {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		z-index: 3;
	}

	/* Zalogowanemu pasek administracyjny WordPressa stoi na stałe u góry
	   okna — nagłówek musi zacząć się pod nim.                            */
	body.vetka-ui.admin-bar:is(.vk-hero-32a, .vk-hero-32c) #masthead.site-header {
		top: 46px;
	}

	/* --- 32a: przezroczysty, znak i ikony w bieli ------------------------ */
	body.vetka-ui.vk-hero-32a #masthead.site-header {
		background-color: transparent;
		border-bottom: 0;
	}

	body.vetka-ui.vk-hero-32a .vk-hdrm__tel-text {
		color: var(--v2-on-accent);
	}

	body.vetka-ui.vk-hero-32a .vk-hdrm__tel-text:hover {
		color: #8FD4AC;
	}

	body.vetka-ui.vk-hero-32a #masthead .navbar-toggler {
		border-color: rgba(255, 255, 255, .45);
	}

	body.vetka-ui.vk-hero-32a #masthead .navbar-toggler .toggler-icon {
		background-color: var(--v2-on-accent);
	}

	body.vetka-ui.vk-hero-32a #masthead .navbar-toggler[aria-expanded="true"] .toggler-icon {
		background-color: transparent;
	}

	body.vetka-ui.vk-hero-32a #masthead .navbar-toggler[aria-expanded="true"] .toggler-icon::before,
	body.vetka-ui.vk-hero-32a #masthead .navbar-toggler[aria-expanded="true"] .toggler-icon::after {
		background-color: var(--v2-on-accent);
	}

	body.vetka-ui.vk-hero-32a .vk-hdrm__tel-btn {
		border-color: var(--v2-on-accent);
		color: var(--v2-on-accent);
	}

	body.vetka-ui.vk-hero-32a .vk-hdrm__tel-btn:hover {
		border-color: var(--v2-on-accent);
		background-color: var(--v2-on-accent);
		color: var(--v2-accent);
	}

	/* Pierścień fokusu w jaśniejszej zieleni: akcent marki na zdjęciu
	   przestaje być widoczny. Ten sam token, co na ciemnych paskach.      */
	body.vetka-ui.vk-hero-32a .vk-hdrm__tel-text:focus-visible,
	body.vetka-ui.vk-hero-32a .vk-hdrm__tel-btn:focus-visible,
	body.vetka-ui.vk-hero-32a #masthead .navbar-toggler:focus-visible {
		outline-color: var(--v2-focus);
	}

	/* Znak w bieli podmienia slot logo mobilnego po stronie PHP
	   (inc/v2/naglowek-mobilny.php) — plik, nie filtr na obrazie.         */

	/* --- 32c: mlecznobiały z rozmyciem ---------------------------------- */
	/* Rozmycie NIE może siedzieć na samym `#masthead`. `backdrop-filter`
	   robi z elementu blok zawierający dla potomków `position: fixed`, a
	   panel menu jest jego potomkiem — przy otwarciu liczyłby swoje `top`
	   i `bottom` od paska zamiast od okna, a przeglądarka dodatkowo
	   przewijała stronę o wysokość paska, żeby „dojechać" do panelu.
	   Tło i rozmycie niesie więc warstwa pod treścią paska.              */
	body.vetka-ui.vk-hero-32c #masthead.site-header {
		background-color: transparent;
		border-bottom: 1px solid var(--v2-line);
	}

	body.vetka-ui.vk-hero-32c #masthead.site-header::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background-color: rgba(255, 255, 255, .85);
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
	}
}