/**
 * Menu by WT — mega menu.
 * Autor: Jakub Chrobot, WytworniaTresci.pl
 * Wszystkie kolory i odstępy sterowane zmiennymi CSS (nadpisywane kontrolkami Elementora).
 */

.wtmm {
	--wtmm-accent: #7b2d8e;
	--wtmm-bar-justify: flex-start;
	--wtmm-bar-gap: 22px;
	--wtmm-bar-color: #1b1b1f;
	--wtmm-bar-color-hover: var(--wtmm-accent);
	--wtmm-bar-indicator: var(--wtmm-accent);
	--wtmm-panel-bg: #fff;
	--wtmm-panel-offset: 0px;
	--wtmm-panel-max-width: 1200px;
	--wtmm-panel-left: 0px;
	--wtmm-panel-width: 100%;
	--wtmm-col-gap: 32px;
	--wtmm-col-max-width: none;
	--wtmm-divider-color: #e6e6ea;
	--wtmm-divider-width: 1px;
	--wtmm-col-title-color: #1b1b1f;
	--wtmm-col-title-spacing: 14px;
	--wtmm-item-color: #2b2b30;
	--wtmm-item-color-hover: var(--wtmm-accent);
	--wtmm-item-color-highlight: #111114;
	--wtmm-item-gap: 10px;
	--wtmm-icon-size: 1.05em;
	--wtmm-icon-gap: 8px;
	--wtmm-icon-color: currentColor;
	--wtmm-icon-opacity: 0.75;
	--wtmm-list-max-height: none;
	--wtmm-featured-title-color: var(--wtmm-accent);
	--wtmm-card-gap: 18px;
	--wtmm-card-image-width: 108px;
	--wtmm-card-image-radius: 6px;
	--wtmm-card-title-color: #1b1b1f;
	--wtmm-card-excerpt-color: #5c5c66;
	--wtmm-view-all-color: var(--wtmm-accent);
	--wtmm-view-all-color-hover: #4d1a5c;
	--wtmm-anim-duration: 220ms;
	--wtmm-anim-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--wtmm-anim-shift: 10px;
	--wtmm-stagger: 14ms;
	--wtmm-featured-width: 360px;

	position: relative;
	font-size: 15px;

	/* Odziedziczone visibility:hidden (np. klasa elementor-invisible od animacji
	   wejścia, której wyzwalacz nie odpalił) nie może ukrywać nawigacji. */
	visibility: visible;
}

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

/* ---------- pasek poziomu 1 ---------- */

.wtmm .wtmm__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: var(--wtmm-bar-justify);
	gap: var(--wtmm-bar-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wtmm__item {
	position: static;
	display: flex;
	align-items: center;
	margin: 0;
}

.wtmm .wtmm__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	position: relative;
	margin: 0;
	padding: 6px 0;
	border: 0;
	background: none;
	color: var(--wtmm-bar-color);
	font: inherit;
	line-height: 1.3;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.18s ease;
}

.wtmm__link--plain {
	cursor: default;
}

/* Kit motywu składa wersalikami każdy odnośnik (`a { text-transform: uppercase }`),
   a reguła łapie wyłącznie `<a>`. Stąd w pasku „SKLEP” i „BLOG” krzyczały, a
   „Szkoła podstawowa” nie — te pierwsze są odnośnikami, ta druga przyciskiem
   otwierającym panel. W bazie wszystkie etykiety są zapisane normalnie, więc
   wielkość liter należy do redakcji, nie do arkusza.

   Trzy klasy w selektorze, żeby przebić kit (dwie klasy i element). */
.wtmm .wtmm__bar .wtmm__link,
.wtmm .wtmm__panel .wtmm__list-link,
.wtmm .wtmm__panel .wtmm__col-title,
.wtmm .wtmm__panel .wtmm__group-label {
	text-transform: none;
}

/* Kit motywu daje wszystkim odnośnikom `a:hover` z pogrubieniem i podkreśleniem.
   Pozycja paska rosła przez to o blisko trzy piksele (SKLEP: 46,08 → 48,81), a że
   pasek się zawija, wystarczało to, by pozycja stojąca na granicy wiersza
   przeskoczyła do następnego, uciekła spod kursora, straciła najechanie i wróciła
   — w kółko, bez szansy na kliknięcie. Rozmiar musi więc zostać ten sam. */
.wtmm .wtmm__item:hover > .wtmm__link,
.wtmm .wtmm__item.is-open > .wtmm__link,
.wtmm .wtmm__link:focus-visible {
	color: var(--wtmm-bar-color-hover);
	font-weight: inherit;
	text-decoration: none;
}

/* Podkreślenie zostaje jako sygnał, ale rysuje je kreska w pozycjonowaniu
   bezwzględnym — ta sama, co przy otwartym panelu. Nie zajmuje miejsca
   w układzie, więc niczego nie przesuwa. */
.wtmm .wtmm__item:hover > .wtmm__link::after,
.wtmm .wtmm__link:focus-visible::after,
.wtmm__item.is-open > .wtmm__link::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 2px;
	background: var(--wtmm-bar-indicator);
}

.wtmm__toggle {
	display: inline-flex;
	align-items: center;
	padding: 6px 2px;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.wtmm__caret {
	display: inline-flex;
	transition: transform 0.2s ease;
}

.wtmm__caret svg {
	display: block;
	width: 10px;
	height: 6px;
}

.wtmm__item.is-open .wtmm__caret {
	transform: rotate(180deg);
}

/* ---------- panel ---------- */

.wtmm__panel {
	position: absolute;
	top: calc(100% + var(--wtmm-panel-offset));
	left: var(--wtmm-panel-left);
	z-index: 999;
	width: var(--wtmm-panel-width);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	pointer-events: none;
}

.wtmm__item.is-open > .wtmm__panel,
.wtmm:not(.wtmm--js) .wtmm__item:hover > .wtmm__panel,
.wtmm:not(.wtmm--js) .wtmm__item:focus-within > .wtmm__panel {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
}

/* Most nad odstępem między paskiem a panelem.

   Panel jest odsunięty o --wtmm-panel-offset, a ten pas nie należy do <li>, więc
   przejazd myszą z paska w dół wywoływał mouseleave i menu zamykało się w drodze
   do niego. Klik trafiał wtedy w sekcję pod spodem — z perspektywy użytkownika
   „kliknąłem i menu zniknęło, nic się nie otworzyło”.

   Pas jest niewidoczny i działa tylko przy otwartym panelu: zamknięty panel ma
   pointer-events: none, które dziedziczy też ten pseudoelement. */
.wtmm__panel::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 100%;
	height: var(--wtmm-panel-offset);
}

.wtmm__panel-inner {
	padding: 34px 28px;
	overflow: hidden;
	background: var(--wtmm-panel-bg);
	box-shadow: 0 18px 40px rgba(15, 15, 25, 0.12);
	transition: height var(--wtmm-anim-duration) var(--wtmm-anim-ease);
}

.wtmm__cols {
	display: flex;
	align-items: flex-start;
	width: 100%;
	max-width: var(--wtmm-panel-max-width);
	margin: 0 auto;
}

/* ---------- kolumny poziomów ---------- */

.wtmm__col {
	flex: 0 0 auto;
	min-width: 0;
	padding-inline: calc(var(--wtmm-col-gap) / 2);
}

.wtmm__col:first-child {
	padding-inline-start: 0;
}

.wtmm__col:last-child {
	padding-inline-end: 0;
}

.wtmm__col + .wtmm__col {
	border-inline-start: var(--wtmm-divider-width) solid var(--wtmm-divider-color);
}

.wtmm__col--level {
	max-width: var(--wtmm-col-max-width);
}

.wtmm__col--level-2 {
	min-width: 190px;
}

.wtmm__col--level-3,
.wtmm__col--level-4,
.wtmm__col--level-5 {
	min-width: 170px;
}

.wtmm__col--featured {
	flex: 1 1 auto;
	min-width: 280px;
}

.wtmm .wtmm__col-title {
	margin: 0 0 var(--wtmm-col-title-spacing);
	color: var(--wtmm-col-title-color);
	font-size: 1.05em;
	font-weight: 600;
	line-height: 1.3;
}

.wtmm__col-title--featured {
	color: var(--wtmm-featured-title-color);
}

.wtmm__list {
	margin: 0;
	padding: 0;
	max-height: var(--wtmm-list-max-height);
	overflow-y: auto;
	column-count: var(--wtmm-list-columns, 1);
	column-gap: var(--wtmm-col-gap);
	list-style: none;
}

.wtmm__list-item {
	margin: 0 0 var(--wtmm-item-gap);
	break-inside: avoid;
}

.wtmm__list-item:last-child {
	margin-bottom: 0;
}

.wtmm .wtmm__list-link {
	display: inline-block;
	color: var(--wtmm-item-color);
	line-height: 1.45;
	text-decoration: none;
	transition: color 0.16s ease;
}

/* Niewidoczna kopia etykiety w wersji pogrubionej. Ustala szerokość pozycji raz
   na zawsze, więc stany .is-active i .is-highlighted nie zmieniają już rozmiaru
   kolumny — bez tego najechanie kursorem przesuwało sąsiednie kolumny w bok. */
.wtmm .wtmm__list-link[data-label]::after {
	content: attr(data-label);
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	font-weight: 500;
	pointer-events: none;
}

/* Ikona przy pozycji (koszyk przy produktach).

   Leży absolutnie, a miejsce na nią robi lewy padding pozycji. Dzięki temu
   niewidoczna kopia etykiety w ::after nadal rezerwuje szerokość samego tekstu,
   a padding jest taki sam w każdym stanie — najechanie nic nie przesuwa. */
.wtmm .wtmm__list-link--with-icon {
	position: relative;
	padding-inline-start: calc(var(--wtmm-icon-size) + var(--wtmm-icon-gap));
}

.wtmm .wtmm__list-icon {
	position: absolute;
	inset-inline-start: 0;
	top: calc((1.45em - var(--wtmm-icon-size)) / 2);
	width: var(--wtmm-icon-size);
	height: var(--wtmm-icon-size);
	color: var(--wtmm-icon-color);
	opacity: var(--wtmm-icon-opacity);
	pointer-events: none;
}

.wtmm .wtmm__list-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Na najechanej i wyróżnionej pozycji ikona idzie w parze z tekstem. */
.wtmm a.wtmm__list-link:hover .wtmm__list-icon,
.wtmm a.wtmm__list-link:focus-visible .wtmm__list-icon,
.wtmm .wtmm__list-link.is-active .wtmm__list-icon,
.wtmm .wtmm__list-link.is-highlighted .wtmm__list-icon {
	opacity: 1;
}

.wtmm a.wtmm__list-link:hover,
.wtmm a.wtmm__list-link:focus-visible {
	color: var(--wtmm-item-color-hover);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.wtmm .wtmm__list-link.is-highlighted {
	color: var(--wtmm-item-color-highlight);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.wtmm__list-link--plain {
	cursor: default;
}

/* ---------- grupy powiązane z poziomem wyżej ---------- */

.wtmm__group {
	display: none;
}

.wtmm__group.is-active {
	display: block;
}

.wtmm__list--shared + .wtmm__group.is-active {
	margin-top: var(--wtmm-item-gap);
}

/* Wpisy domyślne „Bazy wiedzy” ustępują wpisom przypisanym do pozycji. */
.wtmm--ready .wtmm__cards--shared.is-hidden {
	display: none;
}

.wtmm--mobile .wtmm__cards--shared.is-hidden {
	display: flex;
}

.wtmm__group-label {
	display: none;
}

.wtmm--ready .wtmm__col--level:not(.is-revealed),
.wtmm--ready .wtmm__panel--featured-step .wtmm__col--featured:not(.is-revealed) {
	display: none;
}

.wtmm__panel--step .wtmm__col--featured {
	flex: 0 1 var(--wtmm-featured-width);
	margin-inline-start: auto;
}

/* Pierwsza widoczna kolumna nie ma linii ani wcięcia. */
.wtmm__col.is-first-visible {
	padding-inline-start: 0;
	border-inline-start: 0;
}

@keyframes wtmm-col-in {
	from {
		opacity: 0;
		transform: translateX(calc(-1 * var(--wtmm-anim-shift)));
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes wtmm-item-in {
	from {
		opacity: 0;
		transform: translateY(4px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes wtmm-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.wtmm__col.is-animating {
	animation: wtmm-col-in var(--wtmm-anim-duration) var(--wtmm-anim-ease) both;
}

.wtmm__col.is-animating .wtmm__list-item,
.wtmm__col.is-animating .wtmm__card {
	animation: wtmm-item-in var(--wtmm-anim-duration) var(--wtmm-anim-ease) both;
	animation-delay: calc(var(--wtmm-i, 0) * var(--wtmm-stagger));
}

.wtmm--anim-fade .wtmm__col.is-animating,
.wtmm--anim-fade .wtmm__col.is-animating .wtmm__list-item,
.wtmm--anim-fade .wtmm__col.is-animating .wtmm__card {
	animation-name: wtmm-fade-in;
}

.wtmm--anim-none .wtmm__col.is-animating,
.wtmm--anim-none .wtmm__col.is-animating .wtmm__list-item,
.wtmm--anim-none .wtmm__col.is-animating .wtmm__card,
.wtmm--anim-none .wtmm__panel-inner {
	animation: none;
	transition: none;
}

.wtmm__list-link.has-children {
	cursor: pointer;
}

.wtmm .wtmm__list-link.is-active {
	color: var(--wtmm-item-color-highlight);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Dopóki JS nie zakończy inicjalizacji, pokazujemy wszystko z podpisami.
   Awaria skryptu daje rozwinięte menu, a nie puste miejsce. */
.wtmm:not(.wtmm--ready) .wtmm__group,
.wtmm:not(.wtmm--ready) .wtmm__group-label {
	display: block;
}

/* ---------- kolumna „Baza wiedzy” ---------- */

.wtmm__cards {
	display: flex;
	flex-direction: column;
	gap: var(--wtmm-card-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wtmm__card {
	margin: 0;
}

.wtmm__card-link {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	text-decoration: none;
}

.wtmm__card-media {
	flex: 0 0 var(--wtmm-card-image-width);
	max-width: var(--wtmm-card-image-width);
	overflow: hidden;
	border-radius: var(--wtmm-card-image-radius);
	line-height: 0;
}

.wtmm__card-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.wtmm__card-body {
	flex: 1 1 auto;
}

.wtmm .wtmm__card-title {
	display: block;
	color: var(--wtmm-card-title-color);
	font-weight: 600;
	line-height: 1.35;
	transition: color 0.16s ease;
}

.wtmm__card-link:hover .wtmm__card-title,
.wtmm__card-link:focus-visible .wtmm__card-title {
	color: var(--wtmm-accent);
}

.wtmm .wtmm__card-excerpt {
	display: block;
	margin-top: 5px;
	color: var(--wtmm-card-excerpt-color);
	font-size: 0.86em;
	line-height: 1.5;
}

/* --- karta produktu w kolumnie wyróżnionej ---

   Cena zamiast zapowiedzi, pod nią dwa przyciski. Przyciski leżą poza
   odnośnikiem karty (odnośnik w odnośniku rozpada się w przeglądarce),
   więc odstęp muszą trzymać same. */
.wtmm .wtmm__card-price {
	display: block;
	margin-top: 6px;
	color: var(--wtmm-card-title-color);
	font-weight: 600;
	line-height: 1.4;
	/* Kit składa wersalikami wszystko wewnątrz odnośnika, a „90,00 ZŁ” czyta
	   się inaczej niż ta sama cena na karcie produktu i w katalogu. */
	text-transform: none;
}

.wtmm .wtmm__card-price-old {
	color: var(--wtmm-card-excerpt-color);
	font-weight: 400;
	text-decoration: line-through;
}

/* Karta produktu jako siatka: okładka w lewej kolumnie przez oba wiersze,
   tekst i przyciski jeden pod drugim w prawej.

   Bez tego przyciski lądowały pod CAŁYM odnośnikiem, a ten sięga dołu okładki
   — przy tytule krótszym niż zdjęcie zostawało 46 px pustki między ceną
   a przyciskami. Odnośnik rozpuszczamy przez `display: contents`, żeby jego
   dzieci trafiły wprost do siatki; klikalność zostaje, bo w drzewie dokumentu
   nic się nie zmienia. Przyciski muszą stać poza nim — odnośnik w odnośniku
   rozpada się w przeglądarce. */
.wtmm__card--product {
	display: grid;
	align-items: start;
	grid-template-columns: var(--wtmm-card-image-width) 1fr;
	column-gap: 14px;
}

.wtmm__card--product .wtmm__card-link {
	display: contents;
}

.wtmm__card--product .wtmm__card-media {
	grid-row: 1 / span 2;
	grid-column: 1;
}

.wtmm__card--product .wtmm__card-body {
	grid-row: 1;
	grid-column: 2;
}

.wtmm__card--product .wtmm__card-actions {
	grid-row: 2;
	grid-column: 2;
}

/* Oba przyciski w jednej linii, zaraz pod ceną.

   W prawej kolumnie zostaje tyle miejsca, ile daje karta bez okładki: przy
   karcie 413 px to 239 px. Domyślne napisy potrzebowały 241 px i łamały się
   do pionu, stąd ciaśniejsze wypełnienie i mniejszy stopień. Zawijanie
   zostaje jako wyjście awaryjne, gdyby redakcja wpisała dłuższe napisy —
   wtedy lepszy drugi wiersz niż tekst poza panelem. */
.wtmm__card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
}

.wtmm .wtmm__card-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 12px;
	border: 1px solid var(--wtmm-accent);
	border-radius: 999px;
	color: var(--wtmm-accent);
	font-size: 0.78em;
	white-space: nowrap;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: background 0.16s ease, color 0.16s ease;
}

.wtmm .wtmm__card-btn:hover,
.wtmm .wtmm__card-btn:focus-visible {
	background: var(--wtmm-accent);
	color: #fff;
}

/* „Kup teraz” jest tym, po co ten pasek istnieje — wypełniony od razu,
   a nie dopiero po najechaniu. */
.wtmm .wtmm__card-btn--buy {
	background: var(--wtmm-accent);
	color: #fff;
}

.wtmm .wtmm__card-btn--buy:hover,
.wtmm .wtmm__card-btn--buy:focus-visible {
	filter: brightness(0.92);
}

/* Produkt bez okładki nie potrzebuje lewej kolumny. */
.wtmm__card--product:not(:has(.wtmm__card-media)) {
	grid-template-columns: 1fr;
}

.wtmm__card--product:not(:has(.wtmm__card-media)) :is(.wtmm__card-body, .wtmm__card-actions) {
	grid-column: 1;
}

.wtmm .wtmm__view-all {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
	color: var(--wtmm-view-all-color);
	font-weight: 600;
	text-decoration: none;
	transition: color 0.16s ease;
}

.wtmm__view-all:hover,
.wtmm__view-all:focus-visible {
	color: var(--wtmm-view-all-color-hover);
}

.wtmm__view-all-arrow svg {
	display: block;
	width: 18px;
	height: 8px;
	transition: transform 0.18s ease;
}

.wtmm__view-all:hover .wtmm__view-all-arrow svg {
	transform: translateX(3px);
}

/* ---------- przycisk mobilny ---------- */

.wtmm .wtmm__burger {
	display: none;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
	border: 0;
	background: none;
	color: var(--wtmm-bar-color);
	font: inherit;
	cursor: pointer;
}

.wtmm__burger-icon {
	display: inline-flex;
	flex-direction: column;
	justify-content: space-between;
	width: 22px;
	height: 14px;
}

.wtmm__burger-icon span {
	display: block;
	height: 2px;
	background: currentColor;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.wtmm.is-mobile-open .wtmm__burger-icon span:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.wtmm.is-mobile-open .wtmm__burger-icon span:nth-child(2) {
	opacity: 0;
}

.wtmm.is-mobile-open .wtmm__burger-icon span:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

/* ---------- widok mobilny / akordeon ---------- */

.wtmm.wtmm--mobile .wtmm__burger {
	display: inline-flex;
}

.wtmm.wtmm--mobile .wtmm__bar {
	display: none;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.wtmm.wtmm--mobile.is-mobile-open .wtmm__bar,
.wtmm.wtmm--mobile:not(.wtmm--has-burger) .wtmm__bar {
	display: flex;
}

.wtmm--mobile .wtmm__item {
	display: block;
	border-bottom: 1px solid var(--wtmm-divider-color);
}

.wtmm--mobile .wtmm__item > .wtmm__link {
	padding: 14px 0;
}

.wtmm--mobile .wtmm__item--has-panel > .wtmm__link {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.wtmm--mobile .wtmm__toggle--icon {
	position: absolute;
	inset-inline-end: 0;
	padding: 14px 4px;
}

.wtmm--mobile .wtmm__item--has-panel {
	position: relative;
}

.wtmm--mobile .wtmm__panel {
	position: static;
	width: auto;
	max-height: 0;
	overflow: hidden;
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: max-height 0.24s ease;
	pointer-events: auto;
}

.wtmm--mobile .wtmm__item.is-open > .wtmm__panel {
	max-height: 2200px;
	overflow: auto;
}

.wtmm--mobile .wtmm__panel-inner {
	padding: 4px 0 20px;
	box-shadow: none;
}

.wtmm--mobile .wtmm__cols {
	flex-direction: column;
	max-width: none;
}

.wtmm--mobile .wtmm__col {
	width: 100%;
	padding: 16px 0 0;
	border: 0;
}

.wtmm--mobile .wtmm__col + .wtmm__col {
	margin-top: 14px;
	border-top: var(--wtmm-divider-width) solid var(--wtmm-divider-color);
	border-inline-start: 0;
}

.wtmm--mobile .wtmm__list {
	column-count: 1;
	max-height: none;
}

/* Na mobile kaskada nie ma sensu — pokazujemy wszystkie grupy z podpisami. */
.wtmm--mobile .wtmm__group {
	display: block;
}

.wtmm--mobile .wtmm__col--level,
.wtmm--mobile .wtmm__col--featured {
	display: block;
}

.wtmm--mobile .wtmm__panel-inner {
	height: auto !important;
	overflow: visible;
}

.wtmm--mobile .wtmm__col.is-first-visible {
	padding-inline-start: 0;
}

.wtmm--mobile .wtmm__group-label {
	display: block;
	margin: 14px 0 6px;
	color: var(--wtmm-col-title-color);
	font-weight: 500;
}

.wtmm--mobile .wtmm__list-link.is-active {
	font-weight: 400;
	text-decoration: none;
}

/* Awaryjnie, gdy JS się nie wykona. */
@media (max-width: 1024px) {
	.wtmm:not(.wtmm--js) .wtmm__cols {
		flex-direction: column;
		max-width: none;
	}

	.wtmm:not(.wtmm--js) .wtmm__col {
		width: 100%;
		border-inline-start: 0;
	}
}

/* ---------- drobne ---------- */

.wtmm__empty {
	padding: 14px 18px;
	border: 1px dashed var(--wtmm-divider-color);
	color: #5c5c66;
	font-size: 14px;
}

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

.wtmm :focus-visible {
	outline: 2px solid var(--wtmm-accent);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.wtmm__col.is-animating,
	.wtmm__col.is-animating .wtmm__list-item,
	.wtmm__col.is-animating .wtmm__card {
		animation: none;
	}

	.wtmm__panel-inner {
		transition: none;
	}

	.wtmm__panel,
	.wtmm__caret,
	.wtmm__card-title,
	.wtmm__view-all-arrow svg,
	.wtmm__list-link {
		transition: none;
	}
}

/* ---------- koszyk w pasku ---------- */

.wtmm-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wtmm-bar-color, currentColor);
	line-height: 0;
	text-decoration: none;
	transition: color 0.16s ease;
}

.wtmm-cart:hover,
.wtmm-cart:focus-visible {
	color: var(--wtmm-bar-color-hover, currentColor);
}



/* Liczba siedzi na rogu znaczka, a nie obok — pasek nagłówka jest ciasny
   i każdy dodatkowy piksel szerokości zbliża menu do zawinięcia. */
.wtmm-cart__count {
	position: absolute;
	top: -6px;
	right: -8px;
	display: inline-flex;
	min-width: 18px;
	height: 18px;
	align-items: center;
	justify-content: center;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--wtmm-accent, #7b2d8e);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
}

/* Pusty koszyk nie ma o czym informować. */
.wtmm-cart__count--pusty {
	display: none;
}

.wtmm-cart__uwaga {
	margin: 0;
	color: #b00;
	font-size: 13px;
}

/* ===========================================================================
   PASEK NAGŁÓWKA WG MAKIETY

   Figma `mOUOSCQIjchdiyz1JCgOBr`, węzeł 6:966 („Group 1000001573”, 1745 × 121
   w kadrze 1920). Pasek zajmuje w makiecie tę samą siatkę, co treść strony
   (1745 ≈ 1749), a tę renderujemy na 1440 — stąd przelicznik 0,8253, ten sam,
   którym przeliczona jest karta produktu.

   Wielkości poniżej to wprost wartości z makiety pomnożone przez ten przelicznik;
   przy każdej stoi liczba źródłowa, żeby dało się to sprawdzić bez otwierania
   Figmy.
   =========================================================================== */

/* --- szukajka: ten sam widżet, co w hero, w wyglądzie z makiety --- */

.elementor-location-header .elementor-widget-baba_search {
	/* 357 × 0,8253 = 295 i tyle tu było, dopóki w pasku nie stał koszyk.
	   Makieta koszyka nie zna, a przy 1920 px wiersz miał 17,7 px zapasu —
	   znaczek 21 px z odstępem 12 łamał go na trzy rzędy (zmierzone: pasek menu
	   30,6 → 81 px). Miejsce oddaje w całości pole, 33 px, i zapas wraca do
	   17,7 px. Ta sama liczba stoi w kontrolce `field_max_width`
	   (skrypty/naglowek-wg-makiety.php) — widżet generuje dla siebie CSS
	   silniejszy od tego arkusza, więc musi się zgadzać w obu miejscach. */
	flex: 0 0 262px; /* 357 × 0,8253 = 295, minus 33 na koszyk */
	min-width: 0;

	/* Odstęp pole↔logowanie z makiety (1651 − 1603,8). Przerwa kontenera zeszła
	   do 12 px, bo dotyczy teraz także pary logowanie↔koszyk; różnicę dokłada
	   margines, żeby liczba z projektu dalej stała zapisana wprost.

	   Na telefonie nie działa: pole jest tam schowane, a po kliknięciu lupy
	   staje się pasem na `position: fixed`. */
	margin-inline-end: 35px; /* 12 + 35 = 47 */
}

/* Tło, promień, wypełnienie i wielkość lupy ustawiają kontrolki widżetu
   (patrz skrypty/naglowek-wg-makiety.php) — widżet generuje dla siebie CSS
   silniejszy od tego arkusza. Tutaj zostaje tylko to, czego kontrolki nie mają:
   wysokość pola (79,283 × 0,8253) i odstęp między napisem a lupą. */
.elementor-location-header .baba-search__form {
	height: 65px;
	gap: 16px;
}

/* Kontrolka „wielkość przycisku” ustawia tylko szerokość i wysokość, a wtyczka
   daje mu jeszcze `padding: 8px 16px` — przez to lupa zajmowała 32 px zamiast
   20,5. Wypełnienia nie da się zdjąć kontrolką, więc zdejmujemy je tutaj. */
.elementor-location-header .baba-search__btn {
	padding: 0;
}

/* --- blok logowania --- */

.wtmm-login {
	display: inline-flex;
	flex-direction: column;
	gap: 5px; /* makieta: 5,13 px między linią górną a wierszem ze znaczkiem */
	color: inherit;
	text-decoration: none;
}

/* Blok logowania jako jedyny w pasku idzie 1:1 z makietą, bez przelicznika
   0,8253.

   Powód: przeliczone wielkości wychodziły 9,2 px na górnej linii, a to już nie
   jest napis do czytania, tylko szlaczek — makieta ma tu 11,1 px, czyli sama
   siedzi na granicy. Reszta paska (menu, pole wyszukiwania) zostaje
   przeliczona, więc blok jest względem niej o jedną piątą większy niż
   w makiecie. Odstępstwo świadome: wielkości wewnątrz bloku trzymają dokładnie
   proporcje z makiety, powiększona jest całość. */

.wtmm-login__top {
	color: #0060d4;
	font-family: "Poppins", sans-serif;
	font-size: 11.1px; /* makieta 1:1 */
	font-weight: 500;
	letter-spacing: 1.66px;
	line-height: 17.7px;
	text-transform: uppercase;
	white-space: nowrap;
}

.wtmm-login__row {
	display: inline-flex;
	align-items: center;
	gap: 10px; /* makieta: 10 px między tuszem znaczka a napisem */
}

.wtmm-login__icon {
	/* Znak z kroju, nie rysunek — rozmiar dyktuje więc stopień pisma, a nie
	   szerokość pola. 25 z makiety × 0,8253; przy tym stopniu tusz znaczka ma
	   21,5 px wysokości, czyli tyle, co 26 px z makiety po przeliczeniu. */
	flex: 0 0 auto;
	color: #0060d4;
	font-size: 25px; /* makieta 1:1 */
	line-height: 1;
}

.wtmm-login__label {
	color: #000;
	font-family: "Poppins", sans-serif;
	font-size: 19.8px; /* makieta 1:1 */
	font-weight: 500;
	letter-spacing: 2.97px;
	line-height: 31.7px;
	text-transform: uppercase;
	white-space: nowrap;
}

.wtmm-login:hover .wtmm-login__label,
.wtmm-login:focus-visible .wtmm-login__label {
	color: #0060d4;
}

/* Koszyk trzyma rytm z ikoną użytkownika — w makiecie go nie ma, więc dobieramy
   go do tego, co obok.

   Własnego marginesu już nie ma. Miał po 10 px z obu stron, gdy koszyk stał
   między polem a logowaniem przy przerwie 5 px z kontenera. Teraz stoi na końcu
   bloku, odstęp daje przerwa kontenera (12 px), a każdy piksel ponad to łamał
   wiersz przy 1920 px — zmierzone. */
.elementor-location-header .wtmm-cart {
	margin: 0;
}

/* Znaczek stał 1,5 px nad osią logo, lupy, logowania i hamburgera — zmierzone:
   środki 224,5 wobec 226.

   Powód: `.wtmm-cart` jest `inline-flex`, więc siada na linii bazowej pudełka
   widżetu, a to ma odziedziczoną po motywie interlinię 15 px i dokłada pod
   znaczkiem miejsce na spadek liter. Pudełko rosło przez to do 24 px przy
   rysunku wysokim na 21 i wyrównanie kontenera centrowało nie to, co trzeba.
   Blok logowania problemu nie miał, bo jest wyższy od tej interlinii.

   Pudełko robi się kontenerem elastycznym: strut znika, wysokość schodzi do 21
   i wszystkie pięć środków siada na 226. */
.elementor-location-header .elementor-widget-wt_mm_cart .elementor-widget-container {
	display: flex;
	align-items: center;
}

/* Prawy blok (pole wyszukiwania + logowanie) dobiera się do swojej treści.

   Wcześniej miał szerokość procentową i to była powtarzająca się przyczyna
   usterek: przy każdej zmianie zawartości albo szerokości okna procent
   przestawał się zgadzać z tym, co w środku, i flex ściskał dzieci — raz koszyk
   wchodził na logowanie, raz pole wyjeżdżało poza pasek. Przy `max-content`
   blok bierze dokładnie tyle, ile potrzebuje, a resztę wiersza dostaje menu.

   Klasa `.e-con` powtórzona, żeby przebić CSS generowany przez Elementora. */

.elementor-location-header .e-con.e-con:has(> .elementor-widget-baba_search) {
	flex: 0 0 max-content;
	/* Blok miał po 10 px wypełnienia z boków, czyli 20 px zabranych menu bez
	   powodu — w makiecie blok logowania kończy się dokładnie na prawej
	   krawędzi treści, a od menu i tak oddziela go przerwa wiersza. */
	padding-inline: 0;
}

.wtmm-cart__icon {
	width: 21px;
	height: 21px;
}

/* Na desktopie koszyk stoi SAM, bez napisu obok, i przy 21 px ginął przy bloku
   logowania (191 × 54 px, napis 19,8 px, ikonka osoby 22 × 25).

   34 px, bo wiersz „ZALOGUJ SIĘ” ma 32 px wysokości — przy dolnej krawędzi
   koszyk zajmuje 181..215 i staje się jego parą, a nie satelitą.

   WYRÓWNANIE DO DOŁU, nie do środka. Wszystko w pasku jest wyśrodkowane na osi
   188, ale blok logowania jest DWUWIERSZOWY („logowanie do platformy” nad
   „Zaloguj się”), więc przy wspólnym środku jego dół leży na 215, a dół
   pojedynczej ikony na 202. Te 13 px różnicy widać.

   Margines 6 px bierze się stąd, że `align-self: flex-end` dosuwa widżet do dna
   pasa roboczego kontenera (221), a logowanie kończy się na 215, bo jest w tym
   pasie wyśrodkowane przy własnych 54 px: (65 − 54) / 2 ≈ 6. Ten sam odstęp
   stawia oba dna na jednej linii.

   Telefon zostaje na 21 px i na środku: tam pasek jest ciasny, a obok stoi
   hamburger. */
@media (min-width: 1025px) {
	.wtmm-cart__icon {
		width: 34px;
		height: 34px;
	}

	/* Selektor powtarza kształt tego z Elementora i dokłada przodka.
	   Elementor zeruje odstępy widżetów w kontenerze regułą
	   `.e-con > .elementor-widget:last-child { margin-block-end: 0 }` i przy
	   naszych dwóch klasach (0,2,0) wygrywał — `align-self` wchodził, a margines
	   nie. Stąd 0,4,0 i `margin-block-end`, czyli ta sama właściwość, którą
	   ustawia tamta reguła. */
	.elementor-location-header .e-con > .elementor-widget.elementor-widget-wt_mm_cart {
		align-self: flex-end;
		margin-block-end: 6px;
	}
}

/* ===========================================================================
   PRZYKLEJONY PASEK

   Przy przewijaniu ma zostać sam biały pasek — belka promocyjna wyjeżdża w górę
   i znika. To oddaje z powrotem 90 px ekranu, a menu, szukajka, logowanie
   i koszyk są cały czas pod ręką.

   Robi to `position: sticky` na CAŁYM miejscu nagłówka z ujemnym odsunięciem
   o wysokość tego, co stoi nad paskiem. Nagłówek może więc wyjechać dokładnie
   o belkę i tam się zatrzymuje — pasek ląduje przy górnej krawędzi okna.

   Dlaczego nie sticky Elementora Pro: ustawienie zapisuje się w szablonie
   i widać je w `data-settings`, ale Elementor 4.2.3 nie podpina do kontenerów
   starego mechanizmu efektów ruchu — `elementorProFrontend.modules` jest puste,
   dla `frontend/element_ready/container` nie ma żadnej akcji, a klasa
   `elementor-sticky` nie pojawia się nigdzie. Sprawdzone na stagingu.

   Dlaczego całe miejsce nagłówka, a nie sam pasek: `position: sticky` działa
   w granicach rodzica, a rodzicem paska jest właśnie to miejsce — przyklejenie
   puszczałoby po 90 px przewinięcia. Rodzicem miejsca jest `body`, więc trzyma
   przez całą stronę. Ceną jest ujemne odsunięcie, ale to jedna liczba.

   Wysokość belki podaje skrypt w `--wtmm-naglowek-nad`, bo zmienia się razem
   z szerokością okna (przy 360 px napis łamie się na dwa wiersze). Bez skryptu
   zmienna ma 0 i przykleja się cały nagłówek razem z belką — układ gorszy, ale
   nie zepsuty.
   =========================================================================== */

.elementor-location-header {
	position: sticky;
	top: calc(-1 * var(--wtmm-naglowek-nad, 0px));
	/* Panel mega menu ma 999, ale WEWNĄTRZ paska — przeciw sekcjom strony
	   z własnym kontekstem układania liczy się warstwa samego nagłówka. */
	z-index: 100;
}

/* Pasek administracyjny WordPressa jest stały i zasłaniałby przyklejony pasek.
   Wysokości są jego własne: 32 px powyżej 782, 46 px poniżej. Przy 600 px i mniej
   pasek admina przestaje być stały i przewija się razem ze stroną, więc odsunięcia
   nie potrzeba. */
body.admin-bar .elementor-location-header {
	top: calc(32px - var(--wtmm-naglowek-nad, 0px));
}

@media (max-width: 782px) {
	body.admin-bar .elementor-location-header {
		top: calc(46px - var(--wtmm-naglowek-nad, 0px));
	}
}

@media (max-width: 600px) {
	body.admin-bar .elementor-location-header {
		top: calc(-1 * var(--wtmm-naglowek-nad, 0px));
	}
}

/* --- węższe ekrany: skąd wziąć miejsce ---

   Makieta rysuje pasek na 1745 px w kadrze 1920 — u nas treść ma 1440 minus
   2 × 80 px wypełnienia wiersza, czyli 1278. Przy 1440 i 1366 px zawartość
   w wielkościach z makiety (logo 100 + menu 742 + prawa strona 484 + przerwy)
   po prostu się nie mieści i menu łamało się na dwa wiersze, a koszyk wchodził
   na logowanie.

   Zamiast ściskać typografię — co robiliśmy wcześniej i co odjeżdżało od
   makiety — odbieramy miejsce marginesom, a dopiero na końcu polu wyszukiwania.
   Klasa `.e-con` powtórzona w selektorze, żeby przebić CSS generowany przez
   Elementora dla tego kontenera. */

/* Górna granica pasma podniesiona z 1600 na 1620: powyżej 1600 wraca wypełnienie
   5rem z szablonu, a wiersz treści ma pełne 1440 px dopiero od 1615 (1440 + 160
   wypełnienia + 15 paska przewijania). W dziurze 1601–1614 zapas spadał do 3,7 px
   — zmierzone; przed dołożeniem koszyka ta sama dziura miała 36,7 i nie rzucała
   się w oczy. */
@media (min-width: 1400px) and (max-width: 1620px) {
	.elementor-location-header .e-con.e-con:has(> .e-con-inner > .elementor-widget-wt_mega_menu) {
		/* 2rem → 1,5rem: 16 px dla wiersza, niewidoczne przy krawędzi paska. */
		--padding-left: 1.5rem;
		--padding-right: 1.5rem;
		--gap: 20px;
		--column-gap: 20px;
	}
}

/* Próg podniesiony z 1400 na 1500: przy oknie 1440 wiersz treści ma 1376 px
   (1440 minus wypełnienie), a zawartość w wielkościach z makiety potrzebuje
   1421 — zmierzone. Powyżej 1620 treść i tak jest ograniczona do 1440 i się
   mieści, więc pasmo obejmuje dokładnie tę dziurę. */
@media (min-width: 1400px) and (max-width: 1500px) {
	/* Ostatnie piksele bierzemy z szukajki — z 295 na 200 — i z marginesów.
	   Napis „WYSZUKAJ KURSU” dalej się mieści, a menu zostaje w jednym wierszu
	   aż do progu hamburgera. */
	.elementor-location-header .e-con.e-con:has(> .e-con-inner > .elementor-widget-wt_mega_menu) {
		/* 1,5rem → 1rem po dołożeniu koszyka: przy równych 1400 px zapasu
		   zostawało 0 i wiersz się łamał (pasek menu 30,6 → 81 px). */
		--padding-left: 1rem;
		--padding-right: 1rem;
	}

	.elementor-location-header .elementor-widget-baba_search {
		flex: 0 0 200px;

		/* Odstęp pole↔logowanie schodzi tu z 47 px na 24 (12 z przerwy
		   kontenera + 12 stąd). W tym paśmie proporcje makiety i tak są już
		   porzucone — pole ma 200 zamiast 295 — a te 23 px razem z
		   wypełnieniem dają przy 1400 px zapas 23,7 zamiast zera. */
		margin-inline-end: 12px;
	}

	.elementor-location-header .baba-search__form.baba-search__form {
		max-width: 200px;
	}

	/* Prawa strona zwęża się razem z polem — inaczej trzymałaby 34 % i zabierała
	   menu miejsce, którego właśnie mu szukamy. */
	.elementor-location-header .e-con.e-con:has(> .elementor-widget-baba_search) {
		--width: 31%;
	}
}

/* --- pasek pod progiem hamburgera ---

   Zmierzone na 360 px: szuflada siedziała w kolumnie szerokiej na 187 px, bo
   mieszka wewnątrz widżetu menu, a ten dostawał tyle, ile zostało po logo.
   Pozycji nie dało się ścisnąć poniżej szerokości najwęższej treści panelu
   (364 px — karty przypiętych produktów), więc strona przewijała się w bok:
   dokument miał 494 px przy oknie 360.

   Granica pasma to 1399, a nie 1400: skrypt uznaje pasek za mobilny przy
   `innerWidth < 1400`, więc przy równych 1400 arkusz szedłby już w układ
   telefonu, a hamburger by się nie pokazał.

   Sam próg wędrował: 1330 → 1350 po powiększeniu bloku logowania do skali
   makiety, a potem → 1400 po rozsunięciu pola wyszukiwania i logowania
   o 47 px. Zmierzone: 1400 mieści pasek w jednym wierszu, 1360 już nie. */

@media (max-width: 1399px) {
	/* Hamburger idzie na prawy koniec paska, tuż za koszyk i logowanie.
	   Wolne miejsce zbiera się przy logo — całą trójkę dosuwa do prawej
	   automatyczny margines na pierwszym z tych elementów. */
	.elementor-location-header .elementor-widget-wt_mega_menu {
		order: 3;
		flex: 0 0 auto;
	}

	/* Prawy blok trzymał 34 % szerokości wiersza. Przy hamburgerze menu nie
	   potrzebuje już miejsca, za to zawartość bloku owszem: przy 1024 px
	   szukajka, koszyk i logowanie nie mieściły się w 348 px i flex ściskał
	   dzieci tak, że koszyk nachodził na logowanie. Blok bierze więc tyle,
	   ile ma treści. */
	.elementor-location-header .e-con:has(> .elementor-widget-baba_search) {
		margin-inline-start: auto;
	}

	.elementor-location-header .elementor-widget-baba_search {
		flex: 0 0 200px;
	}

	.elementor-location-header .baba-search__form.baba-search__form {
		max-width: 200px;
	}

	/* Gdyby prawego bloku zabrakło, margines przejmuje samo menu. */
	.elementor-location-header .elementor-widget-wt_mega_menu:last-child {
		margin-inline-start: auto;
	}

	/* Szuflada przestaje być częścią wiersza: rozkłada się pod paskiem na całą
	   szerokość ekranu. Górną krawędź podaje skrypt w `--wtmm-drawer-top`, bo
	   wysokość paska zmienia się razem z belką promocyjną. */
	.wtmm.wtmm--mobile.is-mobile-open .wtmm__bar {
		position: fixed;
		/* Pasek na szerokich ekranach jest wierszem dosuniętym do prawej i to
		   zostawało: w pionowej szufladzie `wrap` łamał listę na dwie kolumny,
		   a `flex-end` spychał ją na dół. */
		flex-wrap: nowrap;
		justify-content: flex-start;
		top: var(--wtmm-drawer-top, 120px);
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 900;
		overflow-y: auto;
		padding: 4px 24px 32px;
		background: #fff;
		box-shadow: 0 12px 24px rgba(8, 8, 8, 0.12);
	}

	/* Bez tego pozycja rozpycha się do szerokości najszerszej karty w panelu. */
	.wtmm--mobile .wtmm__item,
	.wtmm--mobile .wtmm__panel,
	.wtmm--mobile .wtmm__panel-inner,
	.wtmm--mobile .wtmm__col,
	.wtmm--mobile .wtmm__card-link,
	.wtmm--mobile .wtmm__card-body {
		min-width: 0;
	}

	.wtmm--mobile .wtmm__card-title {
		overflow-wrap: anywhere;
	}
}

/* Hasła należą do pasa na telefonie — w pasku, przy każdej szerokości, nie ma
   na nie miejsca. */
.elementor-location-header .baba-search__popular {
	display: none;
}

/* Znaczek lupy dokłada skrypt do paska na każdej szerokości, ale służy tylko
   telefonowi — poza tym pasmem musi być schowany, bo inaczej stoi w pasku jako
   puste pudełko po przycisku. */
.wtmm-szukajka__przycisk {
	display: none;
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	background: none;
	color: rgba(8, 8, 8, 0.6);
	line-height: 1;
	cursor: pointer;
}

/* --- telefon: szukajka jako znaczek + pas pod paskiem ---

   Pole w wielkościach z makiety nie mieści się w pasku obok logo, więc siedziało
   w drugim wierszu i nagłówek urósł do 359 px (zmierzone przy 360 px). Teraz
   w pasku stoi sam znaczek lupy, a pole rozwija się po kliknięciu jako pas na
   całą szerokość — tam, gdzie mobilna szuflada menu i z tą samą górną
   krawędzią.

   Wszystko wisi na klasie `wtmm-szukajka--gotowa`, którą dokłada skrypt. Bez
   skryptu zostaje układ sprzed zmiany: pole w pasku, tyle że w drugim wierszu —
   a nie znaczek, którego nie da się kliknąć. */

@media (max-width: 767px) {
	/* Pasek zostaje jednym wierszem: logo, lupa, logowanie, hamburger.
	   Prawy blok bierze tyle, ile ma treści, i razem z hamburgerem idzie
	   do prawej krawędzi. */
	.elementor-location-header .e-con.e-con:has(> .elementor-widget-baba_search) {
		/* `auto` cofa podstawę do `width`, a tę Elementor wpisuje w atrybut
		   `style` — blok brał wtedy całą szerokość wiersza i wypychał hamburger
		   173 px poza ekran. Dobiera się do treści, tak jak w regule bazowej. */
		flex: 0 0 max-content;
		margin-inline-start: auto;
		flex-wrap: nowrap;
		align-items: center;
		gap: 12px;
	}

	.elementor-location-header .elementor-widget-wt_mega_menu {
		margin-inline-start: 0;
	}

	/* Napis „Zaloguj się” schodzi do warstwy dla czytników ekranu — w pasku
	   zostaje sam znaczek, żeby zmieściła się cała czwórka. */
	.elementor-location-header .wtmm-login__top {
		display: none;
	}

	.elementor-location-header .wtmm-login__label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}

	/* ——— znaczek lupy w pasku ——— */

	.elementor-location-header.wtmm-szukajka--gotowa .wtmm-szukajka__przycisk {
		display: inline-flex;
		align-items: center;
	}

	.wtmm-szukajka__przycisk svg {
		/* Rytm ze znaczkiem logowania, który ma 25 px tuszu. */
		width: 22px;
		height: 22px;
	}

	.wtmm-szukajka__przycisk:hover,
	.wtmm-szukajka__przycisk:focus-visible {
		color: #0060d4;
	}

	/* ——— pole schowane, dopóki pas jest zamknięty ——— */

	.wtmm-szukajka--gotowa .elementor-widget-baba_search:not(.wtmm-szukajka--otwarta) {
		display: none;
	}

	/* ——— otwarty pas ——— */

	.wtmm-szukajka--gotowa .elementor-widget-baba_search.wtmm-szukajka--otwarta {
		position: fixed;
		top: var(--wtmm-drawer-top, 120px);
		left: 0;
		right: 0;
		z-index: 900;
		max-height: calc(100vh - var(--wtmm-drawer-top, 120px));
		overflow-y: auto;
		padding: 16px 24px 24px;
		background: #fff;
		box-shadow: 0 12px 24px rgba(8, 8, 8, 0.12);
	}

	/* Pole i hasła na całą szerokość pasa.

	   Selektory z pięcioma klasami, bo tu konkurujemy z CSS-em, który Elementor
	   generuje dla widżetu z jego własnych kontrolek: tamten ma cztery klasy
	   i ładuje się PO arkuszu wtyczki, więc przy równej sile wygrywa
	   kolejnością — stąd ostatnia klasa powtórzona. Bez tego pole zostawało
	   szerokie na 295 px z makiety w pasie szerokim na 351. */
	.elementor-location-header .elementor-widget-baba_search.wtmm-szukajka--otwarta .baba-search__field.baba-search__field {
		max-width: none;
	}

	.elementor-location-header .elementor-widget-baba_search.wtmm-szukajka--otwarta .baba-search__form.baba-search__form {
		max-width: none;
		min-width: 0;
	}

	.elementor-location-header .elementor-widget-baba_search.wtmm-szukajka--otwarta .baba-search__input {
		min-width: 0;
	}

	/* Hasła: w pasku na pulpicie nie ma na nie miejsca, więc w nagłówku są
	   ukryte wszędzie poza otwartym pasem. Trzy kolumny schodzą do dwóch — przy
	   360 px „Egzamin ósmoklasisty” w trzeciej by się nie zmieścił. Margines
	   40 px z sekcji powitalnej też jest tu za duży. */
	.elementor-location-header .elementor-widget-baba_search.wtmm-szukajka--otwarta .baba-search__popular.baba-search__popular {
		display: block;
		margin-top: 20px;
	}

	.elementor-location-header .elementor-widget-baba_search.wtmm-szukajka--otwarta .baba-search__tags.baba-search__tags {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 16px;
	}

	.elementor-location-header .elementor-widget-baba_search.wtmm-szukajka--otwarta .baba-search__heading.baba-search__heading {
		margin-bottom: 14px;
	}
}