/*
 * Nawigacja w nagłówku — linki, aktywna pozycja, podmenu, hamburger i panel
 * mobilny. Pozycjonowanie/tło samego paska jest w header.css.
 */
.site-header__nav {
	/* Odstęp między samą nawigacją a grupą telefon/social (.fotolady-contact-icons)
	 * — wyraźnie większy niż odstęp między pozycjami menu, żeby ikony kontaktowe
	 * czytały się jako osobna grupa, a nie kolejna pozycja nawigacji.
	 * 24px — trochę ciaśniej niż na foto-lady.pl (30px). */
	gap: 1.5rem;
	flex-wrap: nowrap;
}

.site-header .wp-block-navigation {
	flex-wrap: nowrap;
}

.site-header .wp-block-navigation__container {
	/* Równe odstępy między pozycjami menu — 48px przy pełnej szerokości
	 * (foto-lady.pl: 58px, u nas trochę ciaśniej), ciaśniej na węższych
	 * ekranach, żeby menu z ikonami zmieściło się w jednym rzędzie. */
	gap: clamp(1.25rem, 2.5vw, 3rem);
	flex-wrap: nowrap;
}

.site-header .wp-block-navigation-item > a {
	white-space: nowrap;
	padding: 0;
	position: relative;
	/* 17px (wartość wprost — skala z theme.json nie ma takiego tokenu). */
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.0625rem;
	font-weight: 400;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--text-dark);
	transition: color 0.25s ease;
}

/* Hover na zwykłym (nie-hero) nagłówku: tekst przechodzi w kolor accent —
 * ta sama barwa co aktywna pozycja menu (current-menu-item, niżej) i co
 * hover ikon telefon/social. Strony z hero mają własne, bardziej
 * specyficzne reguły koloru (niżej) i tego nie nadpisują. */
.site-header .wp-block-navigation-item > a:hover,
.site-header .wp-block-navigation-item > a:focus-visible {
	color: var(--wp--preset--color--accent);
}

/* Strony z hero (przezroczysty nagłówek na zdjęciu) mają zawsze jasny
 * (paper) tekst linków i ikonę menu — niezależnie od scrolla. Po
 * przewinięciu w górę (html.is-header-pinned) pasek wraca do ciemnego
 * tekstu, tak jak na zwykłych stronach. */
body.has-hero-header .site-header .wp-block-navigation-item > a,
body.has-hero-header .site-header .wp-block-navigation__submenu-icon svg,
body.has-hero-header .site-header .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--paper);
}

html.is-header-pinned body.has-hero-header .site-header .wp-block-navigation-item > a,
html.is-header-pinned body.has-hero-header .site-header .wp-block-navigation__submenu-icon svg {
	color: var(--wp--preset--color--text-dark);
	fill: var(--wp--preset--color--text-dark);
}

html.is-header-pinned body.has-hero-header .site-header .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--text-dark);
}

/* Hover na ciemnym (hero, przezroczysty nagłówek) i po przypięciu też
 * zmienia kolor na accent — te konteksty mają wyższą specyficzność niż
 * zwykła reguła hover wyżej, więc potrzebują własnych. */
body.has-hero-header .site-header .wp-block-navigation-item > a:hover,
body.has-hero-header .site-header .wp-block-navigation-item > a:focus-visible,
html.is-header-pinned body.has-hero-header .site-header .wp-block-navigation-item > a:hover,
html.is-header-pinned body.has-hero-header .site-header .wp-block-navigation-item > a:focus-visible {
	color: var(--wp--preset--color--accent);
}

/* Pozycja odpowiadająca aktualnie otwartej stronie — WordPress sam dokłada
 * klasy current-menu-item / current_page_item do <li> nawigacji.
 *
 * Selektory muszą powtórzyć konteksty hero (przezroczysty i przypięty), bo
 * tamte reguły kolorują linki z wyższą specyficznością i inaczej wygrywają
 * z samym ".site-header .wp-block-navigation-item.current-menu-item". */
.site-header .wp-block-navigation-item.current-menu-item > a,
.site-header .wp-block-navigation-item.current_page_item > a,
.site-header .wp-block-navigation-item.current-menu-ancestor > a,
body.has-hero-header .site-header .wp-block-navigation-item.current-menu-item > a,
body.has-hero-header .site-header .wp-block-navigation-item.current_page_item > a,
body.has-hero-header .site-header .wp-block-navigation-item.current-menu-ancestor > a,
html.is-header-pinned body.has-hero-header .site-header .wp-block-navigation-item.current-menu-item > a,
html.is-header-pinned body.has-hero-header .site-header .wp-block-navigation-item.current_page_item > a,
html.is-header-pinned body.has-hero-header .site-header .wp-block-navigation-item.current-menu-ancestor > a {
	color: var(--wp--preset--color--accent);
}

/* --- Rozwijane podmenu ("Usługi") na desktopie -------------------------------
 * Biała karta w stylu motywu: jeden mocniej zaokrąglony róg (jak zdjęcia),
 * miękki cień jak karty, koralowa kreska u góry. Pozycje krojem nagłówków;
 * po najechaniu wjeżdża koralowa migawka i piaskowe tło, aktualna strona
 * jest koralowa. Karta wysuwa się płynnie, pozycje pojawiają się po kolei.
 * Poniżej 1025px menu jest w panelu mobilnym — tam te reguły nie działają.
 */
@media (min-width: 1025px) {
	/* Ten sam rozmiar zamkniętej i otwartej karty. Rdzeń WP chowa podmenu
	 * przez width/height 0 i overflow hidden (a otwiera z width:auto,
	 * min-width:200px) — przy naszym płynnym zamykaniu karta ściskała się
	 * wtedy do zera i dłuższe nazwy się zawijały. Chowamy ją tylko
	 * przezroczystością i visibility; !important, bo reguły rdzenia dla
	 * stanu otwartego mają wyższą specyficzność. */
	.site-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container {
		width: max-content !important;
		min-width: 0 !important;
		height: auto !important;
		overflow: visible !important;
	}

	.site-header .wp-block-navigation .wp-block-navigation__submenu-container {
		padding: 8px;
		border: 1px solid rgba(26, 26, 30, 0.08);
		border-top: 2px solid var(--wp--preset--color--accent);
		border-radius: 3px 3px 3px 22px;
		background-color: var(--wp--preset--color--white);
		box-shadow: 0 22px 40px -14px rgba(26, 26, 30, 0.28);
		transform: translateY(10px);
		transition:
			opacity 0.25s var(--fotolady-hover-ease, ease),
			transform 0.3s var(--fotolady-hover-ease, ease),
			visibility 0s linear 0.3s !important;
	}

	/* Odstęp między "Usługi" a kartą — mostek, żeby kursor w drodze do
	 * podmenu go nie zamykał. */
	.site-header .wp-block-navigation .wp-block-navigation__submenu-container {
		top: calc(100% + 14px);
	}

	.site-header .wp-block-navigation .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		bottom: 100%;
		left: 0;
		right: 0;
		height: 16px;
	}

	.site-header .wp-block-navigation-item:is(:hover, :focus-within) > .wp-block-navigation__submenu-container {
		transform: translateY(0);
		transition:
			opacity 0.25s var(--fotolady-hover-ease, ease),
			transform 0.3s var(--fotolady-hover-ease, ease),
			visibility 0s linear 0s !important;
	}

	.site-header .wp-block-navigation__submenu-container > .wp-block-navigation-item {
		opacity: 0;
		translate: 0 6px;
		transition: opacity 0.25s ease, translate 0.3s var(--fotolady-hover-ease, ease);
	}

	.site-header .wp-block-navigation-item:is(:hover, :focus-within) > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
		opacity: 1;
		translate: 0 0;
	}

	.site-header .wp-block-navigation-item:is(:hover, :focus-within) > .wp-block-navigation__submenu-container > :nth-child(2) { transition-delay: 30ms; }
	.site-header .wp-block-navigation-item:is(:hover, :focus-within) > .wp-block-navigation__submenu-container > :nth-child(3) { transition-delay: 60ms; }
	.site-header .wp-block-navigation-item:is(:hover, :focus-within) > .wp-block-navigation__submenu-container > :nth-child(4) { transition-delay: 90ms; }
	.site-header .wp-block-navigation-item:is(:hover, :focus-within) > .wp-block-navigation__submenu-container > :nth-child(5) { transition-delay: 120ms; }
	.site-header .wp-block-navigation-item:is(:hover, :focus-within) > .wp-block-navigation__submenu-container > :nth-child(6) { transition-delay: 150ms; }
	.site-header .wp-block-navigation-item:is(:hover, :focus-within) > .wp-block-navigation__submenu-container > :nth-child(n + 7) { transition-delay: 180ms; }

	/* Pozycje — ten sam ciemny tekst także na stronach z hero (tam linki
	 * pierwszego poziomu są jasne), stąd powtórzone konteksty hero.
	 * Selektory celowo dłuższe niż reguła rdzenia WP dla pozycji podmenu
	 * (".wp-block-navigation .has-child … > .wp-block-navigation-item__content",
	 * padding .5em 1em) — inaczej rdzeń nadpisywał wypełnienie. */
	.site-header .wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-navigation-item > a.wp-block-navigation-item__content,
	body.has-hero-header .site-header .wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-navigation-item > a.wp-block-navigation-item__content,
	html.is-header-pinned body.has-hero-header .site-header .wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-navigation-item > a.wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		gap: 0;
		width: 100%;
		/* 36px z prawej = 14px + miejsce na migawkę (12px) i odstęp (10px).
		 * Kiedy migawka wjeżdża, prawy margines maleje o tyle samo — pozycja
		 * (a z nią cała karta) nie zmienia szerokości. */
		padding: 10px 36px 10px 14px;
		border-radius: 3px;
		color: var(--wp--preset--color--ink);
		font-size: 0.8125rem;
		line-height: 1.35;
		letter-spacing: 0.01em;
		white-space: nowrap;
		transition:
			background-color 0.2s ease,
			color 0.2s ease,
			gap 0.25s var(--fotolady-hover-ease, ease),
			padding-right 0.25s var(--fotolady-hover-ease, ease);
	}

	/* Migawka przed nazwą — schowana (zerowa szerokość), wjeżdża po
	 * najechaniu i przy aktualnej stronie. */
	.site-header .wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-navigation-item > a.wp-block-navigation-item__content::before {
		content: "";
		flex: 0 0 auto;
		width: 0;
		height: 12px;
		background-color: var(--wp--preset--color--accent);
		-webkit-mask: var(--fotolady-shutter-mask) center / 12px no-repeat;
		mask: var(--fotolady-shutter-mask) center / 12px no-repeat;
		opacity: 0;
		transition: width 0.25s var(--fotolady-hover-ease, ease), opacity 0.2s ease, transform 0.35s ease;
	}

	.site-header .wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-navigation-item > a.wp-block-navigation-item__content:is(:hover, :focus-visible),
	body.has-hero-header .site-header .wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-navigation-item > a.wp-block-navigation-item__content:is(:hover, :focus-visible),
	html.is-header-pinned body.has-hero-header .site-header .wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-navigation-item > a.wp-block-navigation-item__content:is(:hover, :focus-visible) {
		gap: 10px;
		padding-right: 14px;
		background-color: var(--wp--preset--color--sand);
		color: var(--wp--preset--color--ink);
	}

	.site-header .wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-navigation-item > a.wp-block-navigation-item__content:is(:hover, :focus-visible)::before,
	.site-header .wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-navigation-item:is(.current-menu-item, .current_page_item) > a.wp-block-navigation-item__content::before {
		width: 12px;
		opacity: 1;
		transform: rotate(45deg);
	}

	.site-header .wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-navigation-item:is(.current-menu-item, .current_page_item) > a.wp-block-navigation-item__content,
	body.has-hero-header .site-header .wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-navigation-item:is(.current-menu-item, .current_page_item) > a.wp-block-navigation-item__content,
	html.is-header-pinned body.has-hero-header .site-header .wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-navigation-item:is(.current-menu-item, .current_page_item) > a.wp-block-navigation-item__content {
		gap: 10px;
		padding-right: 14px;
		color: var(--fotolady-eyebrow-color, #d6431f);
	}
}

@media (min-width: 1025px) and (prefers-reduced-motion: reduce) {
	.site-header .wp-block-navigation .wp-block-navigation__submenu-container,
	.site-header .wp-block-navigation__submenu-container > .wp-block-navigation-item,
	.site-header .wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-navigation-item > a.wp-block-navigation-item__content,
	.site-header .wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-navigation-item > a.wp-block-navigation-item__content::before {
		transform: none;
		translate: none;
		transition: none !important;
	}
}

/* Przycisk otwierający menu mobilne — zamiast domyślnego hamburgera WP
 * (trzy poziome kreski) własna ikonka "trzech kropek" (⋮, pionowo), jak
 * w referencyjnym projekcie (10.10.10.10:8080). Chowamy oryginalne <svg>
 * i rysujemy własny kształt maską na ::before — dzięki temu istniejące
 * reguły koloru (hero/pinned, wyżej) mogą dalej sterować samym `color`
 * na przycisku i przez currentColor trafiać też do naszej ikonki. */
.site-header .wp-block-navigation__responsive-container-open {
	background: none;
	border: none;
	padding: 0;
	width: 44px;
	height: 44px;
	color: var(--wp--preset--color--text-dark);
}

.site-header .wp-block-navigation__responsive-container-open svg {
	display: none;
}

.site-header .wp-block-navigation__responsive-container-open::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='3' r='1.9'/%3E%3Ccircle cx='8' cy='8' r='1.9'/%3E%3Ccircle cx='8' cy='13' r='1.9'/%3E%3C/svg%3E") center / 58% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='3' r='1.9'/%3E%3Ccircle cx='8' cy='8' r='1.9'/%3E%3Ccircle cx='8' cy='13' r='1.9'/%3E%3C/svg%3E") center / 58% no-repeat;
}


/* Tablet (600–1024px): rdzeń WP przełącza na hamburger dopiero poniżej
 * 600px, więc na tabletach zostawało rozpychane menu inline. Wymuszamy tu
 * ten sam tryb co na telefonie: przycisk-kropki + panel z prawej (próg jak
 * na foto-lady.pl). Otwarte menu (.is-menu-open) rdzeń pokazuje samo,
 * niezależnie od szerokości. */
@media (min-width: 600px) and (max-width: 1024px) {
	.site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Menu mobilne jako pełnowysoki panel (sidebar) wysuwany z prawej: sam
 * kontener .is-menu-open (fixed, cały ekran) robi za przyciemnione tło, a
 * .wp-block-navigation__responsive-dialog jest panelem od góry do dołu.
 *
 * .wp-block-navigation__responsive-dialog istnieje w DOM cały czas (nie tylko
 * po otwarciu menu) — dlatego tło i układ ustawiamy wyłącznie dla .is-menu-open;
 * inaczej "wyciekałyby" jako biały prostokąt w zamkniętym, inline menu. */
.site-header .wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	--navigation-layout-align: flex-start;
	padding: 0;
	/* !important: rdzeń ustawia tu białe tło mocniejszym selektorem. */
	background-color: transparent !important;
	/* overflow: hidden — panel wjeżdża spoza ekranu (translateX(100%)), a przy
	 * domyślnym overflow: auto to na moment robiło poziomy pasek przewijania
	 * i cała nakładka "drgała". Panel ma własne przewijanie w pionie. Bez
	 * backdrop-filter: rozmycie tła animowane razem z panelem szarpało. */
	overflow: hidden;
	/* clip zamiast hidden (hidden zostaje jako fallback): rdzeń po otwarciu
	 * ustawia fokus na pierwszym linku, który przy starcie animacji leży
	 * jeszcze poza ekranem — przeglądarka (zwłaszcza Chrome na Androidzie)
	 * przewijała wtedy ukryty kontener, żeby go pokazać, i panel "skakał".
	 * Kontenera z overflow: clip nie da się przewinąć nawet programowo. */
	overflow: clip;
	overscroll-behavior: contain;
}

/* Przyciemnienie tła jako osobna warstwa — dzięki temu animujemy tylko ją
 * (fade), a panel przy zamykaniu wyjeżdża w całości zamiast blaknąć. */
.site-header .wp-block-navigation__responsive-container.is-menu-open::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(24, 22, 20, 0.55);
	animation: fotolady-fade-in 0.35s ease both;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
	display: flex;
	justify-content: flex-end;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	width: min(22rem, 86vw);
	height: 100%;
	margin: 0;
	padding: 1.5rem 1.75rem 2rem;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
	overflow-y: auto;
	background-color: var(--wp--preset--color--paper);
	border-radius: 1.75rem 0 0 1.75rem;
	box-shadow: -10px 0 30px rgba(24, 22, 20, 0.22), -1px 0 0 rgba(24, 22, 20, 0.06);
	animation: fotolady-drawer-in 0.42s cubic-bezier(0.32, 0.72, 0, 1) both;
	will-change: transform;
	backface-visibility: hidden;
	overscroll-behavior: contain;
	-webkit-tap-highlight-color: transparent;
}

/* Znak marki (przysłona/migawka) w lewym górnym rogu panelu, naprzeciw
 * przycisku zamknięcia; przy otwarciu lekko się "otwiera" obrotem. */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog::before {
	content: "";
	position: absolute;
	top: 1.25rem;
	left: 1.75rem;
	width: 40px;
	height: 40px;
	background: url("../images/icon-color-on-light.svg") center / contain no-repeat;
	animation: fotolady-shutter-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

.site-header .wp-block-navigation__responsive-container.disable-default-overlay .wp-block-navigation__responsive-dialog::before {
	/* Własny panel ma znak marki jako edytowalny blok obrazu
	 * (.fotolady-panel__mark), więc domyślny znak z CSS jest zbędny. */
	display: none;
}

.admin-bar .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog::before {
	top: calc(1.25rem + var(--wp-admin--admin-bar--height, 46px));
}

@keyframes fotolady-shutter-in {
	from {
		opacity: 0;
		transform: rotate(-45deg) scale(0.85);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes fotolady-fade-out {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

@keyframes fotolady-drawer-out {
	from {
		transform: none;
	}
	to {
		transform: translateX(100%);
	}
}

/* Zamykanie (klasę is-closing dokłada assets/js/header.js na czas animacji,
 * po niej dopiero rdzeń faktycznie zamyka menu): panel wyjeżdża w prawo,
 * a tło gaśnie. */
.site-header .wp-block-navigation__responsive-container.is-menu-open.is-closing {
	pointer-events: none;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open.is-closing::before {
	animation: fotolady-fade-out 0.28s ease-out both;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open.is-closing .wp-block-navigation__responsive-dialog {
	animation: fotolady-drawer-out 0.28s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes fotolady-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes fotolady-item-in {
	from {
		opacity: 0;
		transform: translateX(2rem);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes fotolady-drawer-in {
	from {
		transform: translateX(100%);
	}
	to {
		transform: none;
	}
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	flex: 1;
	padding-top: 5rem;
	align-items: flex-start;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	gap: 0;
	/* !important: klasa items-justified-right na liście (ustawienie bloku
	 * nawigacji dla desktopu) inaczej spycha pozycje panelu na prawo. stretch
	 * rozciąga pozycje na całą szerokość panelu (duży cel dotykowy). */
	align-items: stretch !important;
	justify-content: flex-start !important;
	width: 100%;
}

/* !important: tło panelu jest jasne, a na stronach z hero (jasny tekst
 * linków na zdjęciu) reguły wyżej kolorują linki na paper — bez tego byłyby
 * niewidoczne w panelu. */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a {
	/* Cały wiersz jest klikalny: link na pełną szerokość panelu i min. 56px
	 * wysokości (zalecane minimum celu dotykowego to 44-48px). */
	display: flex;
	align-items: center;
	/* Link sięga do obu krawędzi panelu (ujemny margines równy paddingowi
	 * panelu), więc tapnięcie w dowolnym miejscu wiersza otwiera stronę. */
	width: calc(100% + 3.5rem);
	margin: 0 -1.75rem;
	min-height: 56px;
	padding: 0.5rem 1.75rem !important;
	border-bottom: 1px solid rgba(24, 22, 20, 0.08);
	font-size: 0.9375rem;
	white-space: normal;
	color: var(--wp--preset--color--text-dark) !important;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item > a,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current_page_item > a,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a:hover {
	color: var(--wp--preset--color--accent) !important;
}

/* Przycisk zamknięcia: ten sam język co ikony telefon/social — ciemny
 * zaokrąglony kwadrat z jasnym symbolem, accent i obrót przy hover. Własny
 * "X" rysowany maską zamiast domyślnego svg z rdzenia. */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: 1.25rem;
	right: 1.25rem;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background-color: var(--wp--preset--color--background-dark);
	color: var(--wp--preset--color--paper);
	transition: background-color 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:focus-visible {
	background-color: var(--wp--preset--color--accent);
	transform: rotate(90deg);
}

.site-header .wp-block-navigation__responsive-container-close svg {
	display: none;
}

.site-header .wp-block-navigation__responsive-container-close::before {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	margin: auto;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Pozycje menu wjeżdżają kolejno, jedna po drugiej. */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	animation: fotolady-item-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: 0.16s;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2) {
	animation-delay: 0.21s;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3) {
	animation-delay: 0.26s;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) {
	animation-delay: 0.31s;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(n + 5) {
	animation-delay: 0.36s;
}

@media (prefers-reduced-motion: reduce) {
	.site-header .wp-block-navigation__responsive-container.is-menu-open::before,
	.site-header .wp-block-navigation__responsive-container.is-menu-open.is-closing::before,
	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
	.site-header .wp-block-navigation__responsive-container.is-menu-open.is-closing .wp-block-navigation__responsive-dialog,
	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog::before {
		animation: none;
	}
}

/* Zalogowany użytkownik: panel zostaje od góry do dołu, ale treść i przycisk
 * zamknięcia schodzą pod pasek admina (jest nad nakładką). */
.admin-bar .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	padding-top: var(--wp-admin--admin-bar--height, 46px);
}

.admin-bar .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: calc(1.25rem + var(--wp-admin--admin-bar--height, 46px));
}

/* Otwarte menu blokuje przewijanie (overflow: hidden na <html>), a wtedy
 * znika pasek przewijania i cała strona za panelem przesuwa się o jego
 * szerokość. scrollbar-gutter zostawia to miejsce zarezerwowane. */
html.has-modal-open {
	scrollbar-gutter: stable;
}

/* Android/Chrome: szare mignięcie po tapnięciu i "odbijanie" strony pod
 * nakładką przy otwartym menu. */
.site-header .wp-block-navigation__responsive-container.is-menu-open a,
.site-header .wp-block-navigation__responsive-container.is-menu-open button {
	-webkit-tap-highlight-color: transparent;
}

html.has-modal-open {
	overscroll-behavior: none;
}

/* ==========================================================================
 * Panel menu mobilnego jako część szablonu (parts/navigation-overlay.html)
 *
 * Zawartość panelu — menu, przycisk zamknięcia, przycisk telefonu, ikony
 * social — edytuje się w Edytorze witryny (Wzorce → Części szablonu →
 * "Panel menu mobilnego"). Rdzeń renderuje ją wewnątrz
 * .wp-block-navigation__overlay-container; ramę panelu (tło, wysuwanie,
 * animacje) robią reguły wyżej, a poniżej tylko wygląd samych bloków.
 * ========================================================================== */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	display: flex;
	flex-direction: column;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__overlay-container {
	/* !important: rdzeń ustawia tu display: block przy własnym panelu. */
	display: flex !important;
	align-self: stretch;
	flex: 1;
	width: 100%;
}

.fotolady-panel {
	display: flex;
	flex: 1;
	flex-direction: column;
	width: 100%;
	margin: 0;
}

.fotolady-panel > .wp-block-navigation {
	width: 100%;
}

/* Przycisk zamknięcia (core/navigation-overlay-close) — ten sam wygląd co
 * wcześniej: ciemny zaokrąglony kwadrat w prawym górnym rogu panelu. */
.site-header .is-menu-open .wp-block-navigation-overlay-close {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background-color: var(--wp--preset--color--background-dark);
	color: var(--wp--preset--color--paper);
	cursor: pointer;
	transition: background-color 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) {
	.site-header .is-menu-open .wp-block-navigation-overlay-close:hover {
		background-color: var(--wp--preset--color--accent);
		transform: rotate(90deg);
	}
}

/* Rdzeń ustawia fokus na przycisku zamknięcia zaraz po otwarciu panelu —
 * dlatego fokus to tylko delikatna obwódka, a nie kolor accent. */
.site-header .is-menu-open .wp-block-navigation-overlay-close:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.site-header .is-menu-open .wp-block-navigation-overlay-close svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.admin-bar .site-header .is-menu-open .wp-block-navigation-overlay-close {
	top: calc(1.25rem + var(--wp-admin--admin-bar--height, 46px));
}

/* Dół panelu: blok "Kontakt — ikony" (fotolady/contact-icons) — ten sam co w
 * nagłówku (telefon, Facebook, YouTube z Dostosuj → Dane kontaktowe),
 * w panelu tylko większe kwadraty 44px. Na małych ekranach nagłówek chowa
 * własną kopię tego bloku, w panelu ma być widoczna. */
.fotolady-panel__footer {
	margin-top: auto;
	padding-top: 2rem;
	padding-bottom: 0.5rem;
	animation: fotolady-item-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
}

.fotolady-panel__footer .fotolady-contact-icons,
html.has-modal-open .fotolady-panel__footer .fotolady-contact-icons {
	display: flex !important;
	/* nagłówek chowa swoje ikony przy otwartym menu (visibility: hidden) —
	 * kopia w panelu ma zostać widoczna */
	visibility: visible;
	gap: 0.625rem;
}

.fotolady-panel__footer .fotolady-contact-icons {
	flex-wrap: wrap;
	--fotolady-icon-size: 44px;
	--fotolady-icon-glyph: 18px;
}

.fotolady-panel__footer .fotolady-icon-btn {
	border-radius: 10px;
}

/* CTA w panelu: pełna szerokość, nad ikonami — na telefonie to główny
 * przycisk akcji. */
.fotolady-panel__footer .fotolady-cta {
	order: -1;
	flex-basis: 100%;
	justify-content: center;
	margin: 0 0 0.375rem;
	border-radius: 10px;
	font-size: 1rem;
}

@media (prefers-reduced-motion: reduce) {
	.fotolady-panel__footer {
		animation: none;
	}
}

/* ==========================================================================
 * Podgląd panelu w Edytorze witryny (Części szablonu → "Panel menu
 * mobilnego"). Wszystkie reguły powyżej dotyczą otwartego panelu na stronie
 * (.site-header … .is-menu-open), więc w edytorze menu i "X" wyglądały na
 * niestylowane. Tu ten sam wygląd, zakotwiczony w .fotolady-panel.
 * ========================================================================== */
.editor-styles-wrapper .fotolady-panel {
	position: relative;
	width: min(22rem, 100%);
	min-height: 34rem;
	margin: 0 auto;
	padding: 5rem 1.75rem 2rem;
	overflow: hidden;
	border-radius: 1.75rem;
	background-color: var(--wp--preset--color--paper);
	box-shadow: 0 0 0 1px rgba(24, 22, 20, 0.08), 0 20px 48px -24px rgba(24, 22, 20, 0.35);
}

.editor-styles-wrapper .fotolady-panel .wp-block-navigation-overlay-close {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background-color: var(--wp--preset--color--background-dark);
	color: var(--wp--preset--color--paper);
}

.editor-styles-wrapper .fotolady-panel .wp-block-navigation-overlay-close svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.editor-styles-wrapper .fotolady-panel .wp-block-navigation .wp-block-navigation__container,
.editor-styles-wrapper .fotolady-panel .wp-block-navigation .wp-block-page-list,
.editor-styles-wrapper .fotolady-panel .wp-block-navigation .wp-block-navigation-item {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	width: 100%;
}

.editor-styles-wrapper .fotolady-panel .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: 56px;
	padding: 0.5rem 0;
	border-bottom: 1px solid rgba(24, 22, 20, 0.08);
	color: var(--wp--preset--color--text-dark);
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-decoration: none;
	white-space: normal;
}

.editor-styles-wrapper .fotolady-panel .current-menu-item > .wp-block-navigation-item__content,
.editor-styles-wrapper .fotolady-panel .current_page_item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
}

.editor-styles-wrapper .fotolady-panel {
	display: flex;
	flex-direction: column;
}

.editor-styles-wrapper .fotolady-panel > .fotolady-panel__footer {
	animation: none;
	margin-top: auto;
}

/* Znak marki (migawka) jako blok obrazu w części szablonu panelu — zmieniasz
 * go w Edytorze witryny (obrazek, rozmiar, link). Położenie w rogu i
 * animacja pojawiania się są tutaj. */
.fotolady-panel__mark {
	position: absolute;
	top: 1.25rem;
	left: 1.75rem;
	z-index: 1;
	margin: 0;
	animation: fotolady-shutter-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

.fotolady-panel__mark img {
	display: block;
	object-fit: contain;
}

.admin-bar .site-header .is-menu-open .fotolady-panel__mark {
	top: calc(1.25rem + var(--wp-admin--admin-bar--height, 46px));
}

.editor-styles-wrapper .fotolady-panel .fotolady-panel__mark {
	/* edytor nadaje blokowi obrazu własne position: relative — nadpisujemy */
	position: absolute;
	top: 1.25rem;
	left: 1.75rem;
	margin: 0;
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	.fotolady-panel__mark {
		animation: none;
	}
}

/* ==========================================================================
 * Podmenu w panelu mobilnym (telefon, tablet) jako akordeon: rozwija się pod
 * pozycją (z wcięciem) po kliknięciu strzałki, zamiast pływającej listy
 * z wersji desktopowej, która nachodziła na kolejne pozycje. Domyślnie
 * zwinięte; strzałka przełącza klasę .is-sub-open (assets/js/header.js —
 * rdzeń w panelu ma aria-expanded zawsze "true", więc na nim nie polegamy).
 * !important: rdzeń otwiera podmenu na :hover / :focus-within mocniejszymi
 * selektorami i ustawia position: absolute, szerokości i przejścia.
 * ========================================================================== */
.fotolady-panel .wp-block-navigation .has-child {
	position: relative;
	/* link na całą szerokość, lista podmenu pod nim (rdzeń: flex w rzędzie) */
	flex-direction: column !important;
}

.fotolady-panel .wp-block-navigation .has-child > .wp-block-navigation__submenu-container .wp-block-navigation-item {
	flex-direction: column !important;
}

/* Wiersz z podmenu: nazwa (otwiera stronę) i osobne pole ze strzałką
 * (rozwija podmenu) — oddzielone pionową linią, strzałka na całą wysokość
 * wiersza i wyśrodkowana. Lista podmenu pod spodem na całą szerokość. */
.fotolady-panel .wp-block-navigation .has-child {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) 64px;
	align-items: stretch !important;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .fotolady-panel .has-child > .wp-block-navigation-item__content {
	grid-column: 1;
	grid-row: 1;
	width: auto !important;
	margin: 0 0 0 -1.75rem !important;
	padding-right: 1rem !important;
}

/* !important: rdzeń nadaje przyciskowi podmenu własną wysokość i wyrównanie
 * (align-self), przez co pole strzałki nie wypełniało wiersza. */
.fotolady-panel .wp-block-navigation .has-child > .wp-block-navigation__submenu-icon {
	position: relative;
	grid-column: 2;
	grid-row: 1;
	align-self: stretch !important;
	z-index: 1;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	height: auto !important;
	min-height: 56px;
	margin: 0 -1.75rem 0 0 !important;
	padding: 0;
	border: 0;
	border-left: 1px solid rgba(24, 22, 20, 0.08);
	border-bottom: 1px solid rgba(24, 22, 20, 0.08);
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--text-dark);
	cursor: pointer;
}

.fotolady-panel .wp-block-navigation .has-child > .wp-block-navigation__submenu-container {
	grid-column: 1 / -1;
}

/* Strzałka jako okrągły przycisk; ciemna także na stronach z hero, gdzie
 * nagłówek koloruje ikony podmenu na jasno (niewidoczne na jasnym panelu). */
.fotolady-panel .wp-block-navigation .has-child > .wp-block-navigation__submenu-icon::before {
	content: "";
	position: absolute;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background-color: rgba(24, 22, 20, 0.06);
	transition: background-color 0.2s ease;
}

.fotolady-panel .wp-block-navigation .has-child.is-sub-open > .wp-block-navigation__submenu-icon::before {
	background-color: rgba(255, 90, 54, 0.14);
}

.fotolady-panel .wp-block-navigation .has-child > .wp-block-navigation__submenu-icon svg {
	position: relative;
	width: 14px;
	height: 14px;
	color: var(--wp--preset--color--text-dark) !important;
	fill: none !important;
	stroke: currentColor;
	stroke-width: 2;
	transition: transform 0.25s ease;
}

.fotolady-panel .wp-block-navigation .has-child.is-sub-open > .wp-block-navigation__submenu-icon svg {
	color: var(--wp--preset--color--accent) !important;
}

.fotolady-panel .wp-block-navigation .has-child > .wp-block-navigation__submenu-icon svg {
	transform: none !important;
}

.fotolady-panel .wp-block-navigation .has-child.is-sub-open > .wp-block-navigation__submenu-icon svg {
	transform: rotate(180deg) !important;
}

.fotolady-panel .wp-block-navigation .has-child > .wp-block-navigation__submenu-container {
	position: static !important;
	display: flex !important;
	flex-direction: column;
	width: auto !important;
	min-width: 0 !important;
	height: auto !important;
	/* Animacja rozwijania: max-height (wysokość "auto" się nie animuje);
	 * visibility gaśnie dopiero po zwinięciu, żeby lista nie znikała od razu. */
	max-height: 0;
	/* Do krawędzi panelu — overflow: hidden (potrzebne animacji) inaczej
	 * przycinałby linki pozycji wysunięte na boki ujemnym marginesem. */
	margin: 0 -1.75rem !important;
	padding: 0 1.75rem !important;
	overflow: hidden !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transform: none !important;
	transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease, visibility 0s linear 0.35s !important;
}

.fotolady-panel .wp-block-navigation .has-child.is-sub-open > .wp-block-navigation__submenu-container {
	max-height: 40rem;
	opacity: 1 !important;
	visibility: visible !important;
	transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease, visibility 0s !important;
}

.fotolady-panel .wp-block-navigation .wp-block-navigation__submenu-container::before {
	display: none !important;
}

/* Pozycje podmenu wjeżdżają po kolei przy rozwinięciu. */
.fotolady-panel .wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-navigation-item {
	opacity: 0 !important;
	transform: translateX(-10px) !important;
	transition: opacity 0.2s ease, transform 0.2s ease !important;
	animation: none !important;
}

.fotolady-panel .wp-block-navigation .has-child.is-sub-open > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
	opacity: 1 !important;
	transform: none !important;
	transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.fotolady-panel .has-child.is-sub-open > .wp-block-navigation__submenu-container > :nth-child(2) { transition-delay: 40ms !important; }
.fotolady-panel .has-child.is-sub-open > .wp-block-navigation__submenu-container > :nth-child(3) { transition-delay: 80ms !important; }
.fotolady-panel .has-child.is-sub-open > .wp-block-navigation__submenu-container > :nth-child(4) { transition-delay: 120ms !important; }
.fotolady-panel .has-child.is-sub-open > .wp-block-navigation__submenu-container > :nth-child(5) { transition-delay: 160ms !important; }
.fotolady-panel .has-child.is-sub-open > .wp-block-navigation__submenu-container > :nth-child(6) { transition-delay: 200ms !important; }
.fotolady-panel .has-child.is-sub-open > .wp-block-navigation__submenu-container > :nth-child(n + 7) { transition-delay: 240ms !important; }

/* Strzałka: obrót z lekkim "odbiciem", pole strzałki podświetla się przy
 * dotknięciu. */
.fotolady-panel .wp-block-navigation .has-child > .wp-block-navigation__submenu-icon svg {
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease !important;
}

.fotolady-panel .wp-block-navigation .has-child > .wp-block-navigation__submenu-icon:active::before {
	transform: scale(0.88);
}

.fotolady-panel .wp-block-navigation .has-child > .wp-block-navigation__submenu-icon::before {
	transition: background-color 0.2s ease, transform 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
	.fotolady-panel .wp-block-navigation .has-child > .wp-block-navigation__submenu-container,
	.fotolady-panel .wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-navigation-item,
	.fotolady-panel .wp-block-navigation .has-child > .wp-block-navigation__submenu-icon svg {
		transition: none !important;
	}
}

/* Pozycje podmenu: wcięte, mniejsze, na delikatnym tle. */
.site-header .wp-block-navigation__responsive-container.is-menu-open .fotolady-panel .wp-block-navigation__submenu-container .wp-block-navigation-item > a {
	min-height: 48px;
	padding-left: calc(1.75rem + 1rem) !important;
	background-color: rgba(24, 22, 20, 0.03);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9rem;
	font-weight: 500;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .fotolady-panel .wp-block-navigation__submenu-container .wp-block-navigation-item > a::before {
	content: none !important;
}

/* ==========================================================================
 * Panel mobilny: przewija się tylko lista menu. Górna belka (znak marki
 * i przycisk zamknięcia) oraz dół z ikonami kontaktu zostają na miejscu.
 * ========================================================================== */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	overflow-y: hidden;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__overlay-container,
.site-header .wp-block-navigation__responsive-container.is-menu-open .fotolady-panel {
	min-height: 0;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .fotolady-panel > .wp-block-navigation {
	flex: 1 1 auto;
	align-self: stretch;
	/* do krawędzi panelu (jak linki pozycji), przewijanie tylko tutaj */
	width: auto !important;
	min-height: 0;
	margin: 0 -1.75rem !important;
	padding: 0 1.75rem;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	/* Cienki pasek w kolorach motywu zamiast szarego systemowego. */
	scrollbar-width: thin;
	scrollbar-color: rgba(24, 22, 20, 0.22) transparent;
	/* Cień u góry / u dołu tylko, gdy jest co przewijać: jasne "zasłony"
	 * przewijają się razem z treścią (local) i zakrywają cienie (scroll)
	 * na samej górze i na samym dole listy. */
	background:
		linear-gradient(var(--wp--preset--color--paper) 30%, rgba(247, 244, 240, 0)) top / 100% 24px no-repeat local,
		linear-gradient(rgba(247, 244, 240, 0), var(--wp--preset--color--paper) 70%) bottom / 100% 24px no-repeat local,
		linear-gradient(rgba(24, 22, 20, 0.1), rgba(24, 22, 20, 0)) top / 100% 10px no-repeat scroll,
		linear-gradient(rgba(24, 22, 20, 0), rgba(24, 22, 20, 0.1)) bottom / 100% 10px no-repeat scroll;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .fotolady-panel > .wp-block-navigation::-webkit-scrollbar {
	width: 6px;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .fotolady-panel > .wp-block-navigation::-webkit-scrollbar-track {
	margin: 6px 0;
	background: transparent;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .fotolady-panel > .wp-block-navigation::-webkit-scrollbar-thumb {
	border: 1px solid transparent;
	border-radius: 99px;
	background-color: rgba(24, 22, 20, 0.22);
	background-clip: padding-box;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .fotolady-panel > .wp-block-navigation::-webkit-scrollbar-thumb:hover {
	background-color: var(--wp--preset--color--accent);
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .fotolady-panel > .fotolady-panel__footer {
	flex: none;
	margin-top: 0;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(24, 22, 20, 0.08);
}